Feat: Dark Mode, Mobile Nav, and Global Search

backend/src/assets/assets-import.controller.ts

@@ -0,0 +1,26 @@
+import {
+  Controller,
+  Post,
+  Req,
+  UploadedFile,
+  UseGuards,
+  UseInterceptors,
+} from '@nestjs/common';
+import { AuthGuard } from '@nestjs/passport';
+import { FileInterceptor } from '@nestjs/platform-express';
+import { AssetsImportService } from './assets-import.service';
+
+@Controller('assets')
+@UseGuards(AuthGuard('jwt'))
+export class AssetsImportController {
+  constructor(private readonly assetsImportService: AssetsImportService) {}
+
+  @Post('import')
+  @UseInterceptors(FileInterceptor('file'))
+  async import(
+    @UploadedFile() file: Express.Multer.File,
+    @Req() req: any,
+  ) {
+    return this.assetsImportService.import(file, req.user?.id);
+  }
+}

backend/src/assets/assets-import.service.ts

@@ -0,0 +1,83 @@
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository, EntityManager } from 'typeorm';
+import { Asset, AssetStatus, AssetCondition } from '../entities/asset.entity';
+import { ImportAssetDto } from './dtos/import-asset.dto';
+import { Category } from '../../categories/entities/category.entity';
+import { Department } from '../../users/entities/department.entity';
+import * as Papa from 'papaparse';
+import * as ExcelJS from 'exceljs';
+
+@Injectable()
+export class AssetsImportService {
+  constructor(
+    @InjectRepository(Asset)
+    private readonly assetRepository: Repository<Asset>,
+    @InjectRepository(Category)
+    private readonly categoryRepository: Repository<Category>,
+    @InjectRepository(Department)
+    private readonly departmentRepository: Repository<Department>,
+    private readonly entityManager: EntityManager,
+  ) {}
+
+  async import(file: Express.Multer.File, userId: string) {
+    const assetsToCreate: ImportAssetDto[] = [];
+    const errors = [];
+
+    if (file.mimetype === 'text/csv') {
+      const parsed = Papa.parse(file.buffer.toString(), { header: true });
+      assetsToCreate.push(...parsed.data as ImportAssetDto[]);
+    } else {
+      const workbook = new ExcelJS.Workbook();
+      await workbook.xlsx.load(file.buffer);
+      const worksheet = workbook.worksheets[0];
+      const headerRow = worksheet.getRow(1);
+      worksheet.eachRow((row, rowNumber) => {
+        if (rowNumber > 1) {
+          const rowData: any = {};
+          row.eachCell((cell, colNumber) => {
+            const headerCell = headerRow.getCell(colNumber);
+            rowData[headerCell.value as string] = cell.value;
+          });
+          assetsToCreate.push(rowData);
+        }
+      });
+    }
+
+    let importedCount = 0;
+
+    await this.entityManager.transaction(async (transactionalEntityManager) => {
+      for (const [index, assetData] of assetsToCreate.entries()) {
+        try {
+          const category = await this.categoryRepository.findOne({ where: { name: assetData.category } });
+          const department = await this.departmentRepository.findOne({ where: { name: assetData.department } });
+
+          if (!category || !department) {
+            errors.push({ rowIndex: index, message: 'Invalid category or department' });
+            continue;
+          }
+
+          const newAsset = this.assetRepository.create({
+            ...assetData,
+            categoryId: category.id,
+            departmentId: department.id,
+            createdBy: userId,
+            status: assetData.status || AssetStatus.ACTIVE,
+            condition: assetData.condition || AssetCondition.NEW,
+          });
+
+          await transactionalEntityManager.save(newAsset);
+          importedCount++;
+        } catch (error) {
+          errors.push({ rowIndex: index, message: error.message });
+        }
+      }
+    });
+
+    return {
+      importedCount,
+      errorCount: errors.length,
+      errors,
+    };
+  }
+}

backend/src/assets/assets.module.ts

@@ -1,13 +1,17 @@
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
-import { Asset } from './asset.entity';
+import { Asset } from './entities/asset.entity';
 import { AssetsService } from './assets.service';
 import { AssetsController } from './assets.controller';
+import { AssetsImportController } from './assets-import.controller';
+import { AssetsImportService } from './assets-import.service';
+import { Category } from '../categories/entities/category.entity';
+import { Department } from '../users/entities/department.entity';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Asset])],
-  controllers: [AssetsController],
-  providers: [AssetsService],
+  imports: [TypeOrmModule.forFeature([Asset, Category, Department])],
+  controllers: [AssetsController, AssetsImportController],
+  providers: [AssetsService, AssetsImportService],
   exports: [AssetsService],
 })
-export class AssetsModule {}
+export class AssetsModule {}

backend/src/assets/dtos/import-asset.dto.ts

@@ -0,0 +1,45 @@
+import { IsString, IsOptional, IsEnum, IsNumber } from 'class-validator';
+import { AssetStatus, AssetCondition } from '../entities/asset.entity';
+
+export class ImportAssetDto {
+  @IsString()
+  name: string;
+
+  @IsString()
+  category: string;
+
+  @IsString()
+  department: string;
+
+  @IsString()
+  @IsOptional()
+  serialNumber?: string;
+
+  @IsString()
+  @IsOptional()
+  manufacturer?: string;
+
+  @IsString()
+  @IsOptional()
+  model?: string;
+
+  @IsString()
+  @IsOptional()
+  location?: string;
+
+  @IsEnum(AssetCondition)
+  @IsOptional()
+  condition?: AssetCondition;
+
+  @IsEnum(AssetStatus)
+  @IsOptional()
+  status?: AssetStatus;
+
+  @IsNumber()
+  @IsOptional()
+  purchasePrice?: number;
+
+  @IsString()
+  @IsOptional()
+  notes?: string;
+}

frontend/app/(dashboard)/assets/page.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { StatusBadge } from "@/components/assets/status-badge";
 import { ConditionBadge } from "@/components/assets/condition-badge";
 import { CreateAssetModal } from "@/components/assets/create-asset-modal";
+import { ImportAssetModal } from "@/components/assets/import-asset-modal";
 import { ScannerModal } from "@/components/assets/ScannerModal";
 import { useAssets } from "@/lib/query/hooks/useAssets";
 import { AssetStatus, AssetCondition } from "@/lib/query/types/asset";
@@ -17,6 +18,11 @@ const STATUS_OPTIONS = ["All", ...Object.values(AssetStatus)];
 
 export default function AssetsPage() {
   const router = useRouter();
+  const [showModal, setShowModal] = useState(false);
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState("");
+  const [page, setPage] = useState(1);
   const [showScanner, setShowScanner] = useState(false);
   const { toast } = useToast();
 
@@ -66,6 +72,14 @@ export default function AssetsPage() {
               : "No assets yet"}
           </p>
         </div>
+        <Button onClick={() => setShowImportModal(true)} variant="outline">
+          <Plus size={16} className="mr-1.5" />
+          Import Assets
+        </Button>
+        <Button onClick={() => setShowModal(true)}>
+          <Plus size={16} className="mr-1.5" />
+          Register Asset
+        </Button>
         <div className="flex items-center gap-2">
           <Button
             variant="outline"
@@ -248,6 +262,10 @@ export default function AssetsPage() {
           onSuccess={() => refetch()}
         />
       )}
+      {showImportModal && (
+        <ImportAssetModal
+          onClose={() => setShowImportModal(false)}
+          onSuccess={() => refetch()}
 
       {showScanner && (
         <ScannerModal

frontend/app/(dashboard)/dashboard/page.tsx

@@ -17,9 +17,9 @@ const statCards = [
 
 function StatSkeleton() {
   return (
-    <div className="bg-white rounded-xl border border-gray-200 p-5 animate-pulse">
-      <div className="h-4 w-24 bg-gray-200 rounded mb-3" />
-      <div className="h-8 w-16 bg-gray-200 rounded" />
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 animate-pulse">
+      <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded mb-3" />
+      <div className="h-8 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
     </div>
   );
 }
@@ -29,7 +29,7 @@ function RowSkeleton() {
     <tr className="animate-pulse">
       {[1, 2, 3, 4, 5].map((i) => (
         <td key={i} className="px-4 py-3">
-          <div className="h-4 bg-gray-200 rounded w-3/4" />
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
         </td>
       ))}
     </tr>
@@ -50,15 +50,15 @@ export default function DashboardPage() {
   return (
     <div>
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
           Welcome back{user ? `, ${user.firstName}` : ''}
         </h1>
-        <p className="text-sm text-gray-500 mt-1">Here&apos;s an overview of your assets</p>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Here&apos;s an overview of your assets</p>
       </div>
 
       {/* Stat cards */}
       {isError ? (
-        <div className="bg-red-50 border border-red-200 rounded-xl p-5 mb-6 text-sm text-red-600">
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-900/50 rounded-xl p-5 mb-6 text-sm text-red-600 dark:text-red-400">
           Failed to load summary data. Please try refreshing the page.
         </div>
       ) : (
@@ -69,31 +69,31 @@ export default function DashboardPage() {
                 <Link
                   key={key}
                   href={status ? `/assets?status=${status}` : '/assets'}
-                  className="bg-white rounded-xl border border-gray-200 p-5 hover:border-gray-300 transition-colors"
+                  className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
                 >
                   <div className="flex items-center justify-between mb-2">
-                    <p className="text-sm text-gray-500">{label}</p>
-                    <Icon size={18} className="text-gray-400" />
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{label}</p>
+                    <Icon size={18} className="text-gray-400 dark:text-gray-500" />
                   </div>
-                  <p className="text-3xl font-bold text-gray-900">{counts[key]}</p>
+                  <p className="text-3xl font-bold text-gray-900 dark:text-white">{counts[key]}</p>
                 </Link>
               ))}
         </div>
       )}
 
       {/* Recent assets table */}
-      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
-          <h2 className="text-sm font-semibold text-gray-900">Recent Assets</h2>
-          <Link href="/assets" className="text-xs text-gray-500 hover:text-gray-900 hover:underline">
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-gray-700">
+          <h2 className="text-sm font-semibold text-gray-900 dark:text-white">Recent Assets</h2>
+          <Link href="/assets" className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:underline">
             View all assets
           </Link>
         </div>
 
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-gray-100 text-xs text-gray-400 uppercase tracking-wide">
+              <tr className="border-b border-gray-100 dark:border-gray-700 text-xs text-gray-400 dark:text-gray-500 uppercase tracking-wide">
                 <th className="px-4 py-3 text-left font-medium">Name</th>
                 <th className="px-4 py-3 text-left font-medium">Asset ID</th>
                 <th className="px-4 py-3 text-left font-medium">Status</th>
@@ -106,9 +106,9 @@ export default function DashboardPage() {
                 Array.from({ length: 5 }).map((_, i) => <RowSkeleton key={i} />)
               ) : !data?.recent?.length ? (
                 <tr>
-                  <td colSpan={5} className="px-4 py-10 text-center text-sm text-gray-400">
+                  <td colSpan={5} className="px-4 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                     No assets yet.{' '}
-                    <Link href="/assets" className="text-gray-900 underline">
+                    <Link href="/assets" className="text-gray-900 dark:text-white underline">
                       Register your first asset
                     </Link>
                   </td>
@@ -117,14 +117,14 @@ export default function DashboardPage() {
                 data.recent.map((asset) => (
                   <tr
                     key={asset.id}
-                    className="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer"
+                    className="border-b border-gray-100 dark:border-gray-700 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer"
                     onClick={() => window.location.href = `/assets/${asset.id}`}
                   >
-                    <td className="px-4 py-3 font-medium text-gray-900">{asset.name}</td>
-                    <td className="px-4 py-3 text-gray-500">{asset.assetId}</td>
+                    <td className="px-4 py-3 font-medium text-gray-900 dark:text-white">{asset.name}</td>
+                    <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{asset.assetId}</td>
                     <td className="px-4 py-3"><StatusBadge status={asset.status} /></td>
-                    <td className="px-4 py-3 text-gray-500">{asset.department?.name ?? '—'}</td>
-                    <td className="px-4 py-3 text-gray-500">
+                    <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{asset.department?.name ?? '—'}</td>
+                    <td className="px-4 py-3 text-gray-500 dark:text-gray-400">
                       {format(new Date(asset.createdAt), 'MMM d, yyyy')}
                     </td>
                   </tr>
@@ -136,4 +136,4 @@ export default function DashboardPage() {
       </div>
     </div>
   );
-}
+}