From c8931592862e6b4b7d3009c341292dad4f84349a Mon Sep 17 00:00:00 2001
From: Mercy Duru <m-duru@leadway.com>
Date: Sun, 28 Jun 2026 00:41:28 +0100
Subject: [PATCH 1/3] Build Asset Disposal, contract management, implement
 email notification, add pdf and excel to export

---
 frontend/app/(dashboard)/asset-notes/page.tsx | 120 ++-
 frontend/app/(dashboard)/assets-bulk/page.tsx | 154 +++-
 frontend/app/(dashboard)/assets/[id]/page.tsx | 820 ++++++++++++------
 .../app/(dashboard)/assets/disposals/page.tsx | 262 ++++++
 .../app/(dashboard)/check-in-out/page.tsx     | 126 ++-
 frontend/app/(dashboard)/cmdb/page.tsx        | 117 ++-
 frontend/app/(dashboard)/contracts/page.tsx   | 322 +++++++
 frontend/app/(dashboard)/departments/page.tsx | 197 +++--
 frontend/app/(dashboard)/developer/page.tsx   | 154 +++-
 frontend/app/(dashboard)/import/page.tsx      | 177 +++-
 .../(dashboard)/maintenance-calendar/page.tsx | 116 ++-
 .../app/(dashboard)/my-dashboard/page.tsx     |  83 +-
 .../(dashboard)/notifications-live/page.tsx   |  86 +-
 .../app/(dashboard)/print-labels/page.tsx     | 132 ++-
 frontend/app/(dashboard)/rbac/page.tsx        |  93 +-
 .../(dashboard)/settings/appearance/page.tsx  |  67 +-
 .../(dashboard)/software-licenses/page.tsx    | 102 ++-
 frontend/app/(dashboard)/stocktake/page.tsx   | 139 ++-
 frontend/app/(dashboard)/work-orders/page.tsx | 116 ++-
 frontend/app/app/booking/page.tsx             | 122 ++-
 frontend/app/app/locations/page.tsx           | 106 ++-
 frontend/app/app/vendors/page.tsx             | 128 ++-
 .../contracts/contract-detail-drawer.tsx      | 316 +++++++
 .../contracts/create-contract-modal.tsx       | 265 ++++++
 .../components/contracts/status-badge.tsx     |  26 +
 frontend/components/contracts/type-badge.tsx  |  27 +
 frontend/components/layout/sidebar.tsx        |  11 +-
 frontend/lib/api/assets.ts                    | 154 +++-
 frontend/lib/api/contracts.ts                 |  69 ++
 frontend/lib/query/hooks/useAsset.ts          | 238 ++++-
 frontend/lib/query/hooks/useAssets.ts         |  90 +-
 frontend/lib/query/hooks/useContracts.ts      |  75 ++
 frontend/lib/query/index.ts                   |  24 +-
 frontend/lib/query/keys.ts                    |  54 +-
 frontend/lib/query/types/asset.ts             |  83 +-
 frontend/lib/query/types/contract.ts          |  97 +++
 36 files changed, 4389 insertions(+), 879 deletions(-)
 create mode 100644 frontend/app/(dashboard)/assets/disposals/page.tsx
 create mode 100644 frontend/app/(dashboard)/contracts/page.tsx
 create mode 100644 frontend/components/contracts/contract-detail-drawer.tsx
 create mode 100644 frontend/components/contracts/create-contract-modal.tsx
 create mode 100644 frontend/components/contracts/status-badge.tsx
 create mode 100644 frontend/components/contracts/type-badge.tsx
 create mode 100644 frontend/lib/api/contracts.ts
 create mode 100644 frontend/lib/query/hooks/useContracts.ts
 create mode 100644 frontend/lib/query/types/contract.ts

diff --git a/frontend/app/(dashboard)/asset-notes/page.tsx b/frontend/app/(dashboard)/asset-notes/page.tsx
index efadc244d..5d74e10bb 100644
--- a/frontend/app/(dashboard)/asset-notes/page.tsx
+++ b/frontend/app/(dashboard)/asset-notes/page.tsx
@@ -1,40 +1,58 @@
-'use client';
+"use client";
 
-import { useState, useRef } from 'react';
-import { Send } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState, useRef } from "react";
+import { Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-const USERS = ['alice.m', 'bob.k', 'carol.s', 'dave.t', 'emma.w'];
+const USERS = ["alice.m", "bob.k", "carol.s", "dave.t", "emma.w"];
 
-interface Note { id: string; author: string; text: string; timestamp: string }
+interface Note {
+  id: string;
+  author: string;
+  text: string;
+  timestamp: string;
+}
 
 const MOCK_NOTES: Note[] = [
-  { id:'1', author:'Alice M.', text:'Sent for repair. @bob.k please follow up with vendor.', timestamp:'2024-01-20T10:00:00Z' },
-  { id:'2', author:'Bob K.', text:'Will check @carol.s for parts availability.', timestamp:'2024-01-20T10:30:00Z' },
+  {
+    id: "1",
+    author: "Alice M.",
+    text: "Sent for repair. @bob.k please follow up with vendor.",
+    timestamp: "2024-01-20T10:00:00Z",
+  },
+  {
+    id: "2",
+    author: "Bob K.",
+    text: "Will check @carol.s for parts availability.",
+    timestamp: "2024-01-20T10:30:00Z",
+  },
 ];
 
 export default function AssetNotesPage() {
   const [notes, setNotes] = useState<Note[]>(MOCK_NOTES);
-  const [text, setText] = useState('');
+  const [text, setText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [mentionStart, setMentionStart] = useState(-1);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const handleChange = (val: string) => {
     setText(val);
-    const atIdx = val.lastIndexOf('@');
-    if (atIdx >= 0 && atIdx === val.length - 1 - (val.slice(atIdx + 1).length) + atIdx) {
+    const atIdx = val.lastIndexOf("@");
+    if (
+      atIdx >= 0 &&
+      atIdx === val.length - 1 - val.slice(atIdx + 1).length + atIdx
+    ) {
       const fragment = val.slice(atIdx + 1);
-      const matches = USERS.filter(u => u.startsWith(fragment));
+      const matches = USERS.filter((u) => u.startsWith(fragment));
       setSuggestions(matches);
       setMentionStart(atIdx);
-    } else if (val.slice(val.lastIndexOf('@') + 1).includes(' ')) {
+    } else if (val.slice(val.lastIndexOf("@") + 1).includes(" ")) {
       setSuggestions([]);
     }
   };
 
   const insertMention = (user: string) => {
-    const newText = text.slice(0, mentionStart) + @ ;
+    const newText = text.slice(0, mentionStart) + `@${user} `;
     setText(newText);
     setSuggestions([]);
     inputRef.current?.focus();
@@ -42,36 +60,82 @@ export default function AssetNotesPage() {
 
   const addNote = () => {
     if (!text.trim()) return;
-    setNotes(prev => [...prev, { id: Date.now().toString(), author:'You', text, timestamp: new Date().toISOString() }]);
-    setText('');
+    setNotes((prev) => [
+      ...prev,
+      {
+        id: Date.now().toString(),
+        author: "You",
+        text,
+        timestamp: new Date().toISOString(),
+      },
+    ]);
+    setText("");
   };
 
-  const renderText = (t: string) => t.replace(/@(\w+\.\w+)/g, '<span class="text-blue-600 font-medium">@</span>');
+  const renderText = (t: string) =>
+    t.replace(
+      /@(\w+\.\w+)/g,
+      '<span class="text-blue-600 font-medium">@</span>',
+    );
 
   return (
     <div>
-      <div className="mb-6"><h1 className="text-2xl font-bold text-gray-900">Asset Notes</h1><p className="text-sm text-gray-500 mt-1">@mention support with user autocomplete</p></div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Asset Notes</h1>
+        <p className="text-sm text-gray-500 mt-1">
+          @mention support with user autocomplete
+        </p>
+      </div>
       <div className="bg-white rounded-xl border border-gray-200 p-5 space-y-4 mb-4">
-        {notes.map(n => (
-          <div key={n.id} className="border-b border-gray-100 pb-3 last:border-0">
+        {notes.map((n) => (
+          <div
+            key={n.id}
+            className="border-b border-gray-100 pb-3 last:border-0"
+          >
             <div className="flex items-center justify-between mb-1">
-              <span className="text-sm font-medium text-gray-900">{n.author}</span>
-              <span className="text-xs text-gray-400">{new Date(n.timestamp).toLocaleString()}</span>
+              <span className="text-sm font-medium text-gray-900">
+                {n.author}
+              </span>
+              <span className="text-xs text-gray-400">
+                {new Date(n.timestamp).toLocaleString()}
+              </span>
             </div>
-            <p className="text-sm text-gray-700" dangerouslySetInnerHTML={{ __html: renderText(n.text) }} />
+            <p
+              className="text-sm text-gray-700"
+              dangerouslySetInnerHTML={{ __html: renderText(n.text) }}
+            />
           </div>
         ))}
       </div>
       <div className="relative">
-        <textarea ref={inputRef} value={text} onChange={e => handleChange(e.target.value)} placeholder="Add a note... type @ to mention a user" rows={3}
-          className="w-full text-sm border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gray-900 resize-none" />
+        <textarea
+          ref={inputRef}
+          value={text}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder="Add a note... type @ to mention a user"
+          rows={3}
+          className="w-full text-sm border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gray-900 resize-none"
+        />
         {suggestions.length > 0 && (
           <div className="absolute z-10 bg-white border border-gray-200 rounded-lg shadow-sm mt-1 w-48">
-            {suggestions.map(u => <button key={u} onClick={() => insertMention(u)} className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50">@{u}</button>)}
+            {suggestions.map((u) => (
+              <button
+                key={u}
+                onClick={() => insertMention(u)}
+                className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50"
+              >
+                @{u}
+              </button>
+            ))}
           </div>
         )}
-        <div className="mt-2 flex justify-end"><Button onClick={addNote}><Send size={14} className="mr-1.5"/>Post Note</Button></div>
+        <div className="mt-2 flex justify-end">
+          <Button onClick={addNote}>
+            <Send size={14} className="mr-1.5" />
+            Post Note
+          </Button>
+        </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/assets-bulk/page.tsx b/frontend/app/(dashboard)/assets-bulk/page.tsx
index a188adb50..30dcb4ce7 100644
--- a/frontend/app/(dashboard)/assets-bulk/page.tsx
+++ b/frontend/app/(dashboard)/assets-bulk/page.tsx
@@ -1,49 +1,144 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Trash2, Tag, UserCheck, CheckSquare } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Trash2, Tag, UserCheck, CheckSquare } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-interface Asset { id: string; assetId: string; name: string; category: string; status: string; department: string }
+interface Asset {
+  id: string;
+  assetId: string;
+  name: string;
+  category: string;
+  status: string;
+  department: string;
+}
 
 const MOCK: Asset[] = [
-  { id:'1', assetId:'AST-001', name:'Dell Laptop #1', category:'IT', status:'ACTIVE', department:'Engineering' },
-  { id:'2', assetId:'AST-002', name:'HP Monitor', category:'IT', status:'ASSIGNED', department:'Design' },
-  { id:'3', assetId:'AST-003', name:'Office Chair', category:'Furniture', status:'ACTIVE', department:'HR' },
-  { id:'4', assetId:'AST-004', name:'Canon Printer', category:'IT', status:'MAINTENANCE', department:'Admin' },
+  {
+    id: "1",
+    assetId: "AST-001",
+    name: "Dell Laptop #1",
+    category: "IT",
+    status: "ACTIVE",
+    department: "Engineering",
+  },
+  {
+    id: "2",
+    assetId: "AST-002",
+    name: "HP Monitor",
+    category: "IT",
+    status: "ASSIGNED",
+    department: "Design",
+  },
+  {
+    id: "3",
+    assetId: "AST-003",
+    name: "Office Chair",
+    category: "Furniture",
+    status: "ACTIVE",
+    department: "HR",
+  },
+  {
+    id: "4",
+    assetId: "AST-004",
+    name: "Canon Printer",
+    category: "IT",
+    status: "MAINTENANCE",
+    department: "Admin",
+  },
 ];
 
 export default function BulkAssetsPage() {
   const [selected, setSelected] = useState<Set<string>>(new Set());
 
-  const toggleAll = () => setSelected(prev => prev.size === MOCK.length ? new Set() : new Set(MOCK.map(a=>a.id)));
-  const toggleOne = (id: string) => setSelected(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });
+  const toggleAll = () =>
+    setSelected((prev) =>
+      prev.size === MOCK.length ? new Set() : new Set(MOCK.map((a) => a.id)),
+    );
+  const toggleOne = (id: string) =>
+    setSelected((prev) => {
+      const s = new Set(prev);
+      s.has(id) ? s.delete(id) : s.add(id);
+      return s;
+    });
 
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Assets</h1><p className="text-sm text-gray-500 mt-1">{MOCK.length} assets</p></div>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Assets</h1>
+          <p className="text-sm text-gray-500 mt-1">{MOCK.length} assets</p>
+        </div>
       </div>
       {selected.size > 0 && (
         <div className="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 mb-4 flex items-center gap-3">
-          <span className="text-sm font-medium text-blue-900">{selected.size} selected</span>
-          <Button size="sm" variant="outline" className="gap-1"><UserCheck size={14}/>Assign</Button>
-          <Button size="sm" variant="outline" className="gap-1"><Tag size={14}/>Tag</Button>
-          <Button size="sm" variant="outline" className="gap-1 text-red-600 border-red-200 hover:bg-red-50"><Trash2 size={14}/>Delete</Button>
+          <span className="text-sm font-medium text-blue-900">
+            {selected.size} selected
+          </span>
+          <Button size="sm" variant="outline" className="gap-1">
+            <UserCheck size={14} />
+            Assign
+          </Button>
+          <Button size="sm" variant="outline" className="gap-1">
+            <Tag size={14} />
+            Tag
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            className="gap-1 text-red-600 border-red-200 hover:bg-red-50"
+          >
+            <Trash2 size={14} />
+            Delete
+          </Button>
         </div>
       )}
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
-          <thead><tr className="border-b border-gray-200 bg-gray-50">
-            <th className="px-4 py-3 w-8"><input type="checkbox" checked={selected.size === MOCK.length} onChange={toggleAll} className="rounded"/></th>
-            {["Asset ID","Name","Category","Status","Department"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}
-          </tr></thead>
+          <thead>
+            <tr className="border-b border-gray-200 bg-gray-50">
+              <th className="px-4 py-3 w-8">
+                <input
+                  type="checkbox"
+                  checked={selected.size === MOCK.length}
+                  onChange={toggleAll}
+                  className="rounded"
+                />
+              </th>
+              {["Asset ID", "Name", "Category", "Status", "Department"].map(
+                (h) => (
+                  <th
+                    key={h}
+                    className="text-left px-4 py-3 font-medium text-gray-500"
+                  >
+                    {h}
+                  </th>
+                ),
+              )}
+            </tr>
+          </thead>
           <tbody>
-            {MOCK.map(a=>(
-              <tr key={a.id} className={order-b border-gray-100 hover:bg-gray-50 } onClick={()=>toggleOne(a.id)}>
-                <td className="px-4 py-3"><input type="checkbox" checked={selected.has(a.id)} onChange={()=>toggleOne(a.id)} className="rounded" onClick={e=>e.stopPropagation()}/></td>
-                <td className="px-4 py-3 font-mono text-xs text-gray-500">{a.assetId}</td>
-                <td className="px-4 py-3 font-medium text-gray-900">{a.name}</td>
+            {MOCK.map((a) => (
+              <tr
+                key={a.id}
+                className="border-b border-gray-100 hover:bg-gray-50"
+                onClick={() => toggleOne(a.id)}
+              >
+                <td className="px-4 py-3">
+                  <input
+                    type="checkbox"
+                    checked={selected.has(a.id)}
+                    onChange={() => toggleOne(a.id)}
+                    className="rounded"
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                </td>
+                <td className="px-4 py-3 font-mono text-xs text-gray-500">
+                  {a.assetId}
+                </td>
+                <td className="px-4 py-3 font-medium text-gray-900">
+                  {a.name}
+                </td>
                 <td className="px-4 py-3 text-gray-600">{a.category}</td>
                 <td className="px-4 py-3 text-gray-600">{a.status}</td>
                 <td className="px-4 py-3 text-gray-600">{a.department}</td>
@@ -52,7 +147,12 @@ export default function BulkAssetsPage() {
           </tbody>
         </table>
       </div>
-      {selected.size > 0 && <div className="mt-2 flex items-center gap-1 text-xs text-gray-400"><CheckSquare size={12}/>{selected.size} of {MOCK.length} rows selected</div>}
+      {selected.size > 0 && (
+        <div className="mt-2 flex items-center gap-1 text-xs text-gray-400">
+          <CheckSquare size={12} />
+          {selected.size} of {MOCK.length} rows selected
+        </div>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/assets/[id]/page.tsx b/frontend/app/(dashboard)/assets/[id]/page.tsx
index ee91f771f..7f02e4d06 100644
--- a/frontend/app/(dashboard)/assets/[id]/page.tsx
+++ b/frontend/app/(dashboard)/assets/[id]/page.tsx
@@ -24,6 +24,7 @@ import {
   Lock,
   Unlock,
   ExternalLink,
+  AlertTriangle,
 } from "lucide-react";
 import { format } from "date-fns";
 import { Button } from "@/components/ui/button";
@@ -49,26 +50,44 @@ import {
   useTransferTokens,
   useLockTokens,
   useUnlockTokens,
+  useUpdateAssetStatus,
 } from "@/lib/query/hooks/useAsset";
-import type { MaintenanceType } from "@/lib/query/types/asset";
-import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";
-  useUpdateAssetStatus,  
-} from "@/lib/query/hooks/useAsset";
-import type { AssetStatus, MaintenanceType } from "@/lib/query/types/asset";
+import type {
+  AssetStatus,
+  MaintenanceType,
+  DisposalMethod,
+} from "@/lib/query/types/asset";
+import { useCreateDisposalRequest } from "@/lib/query/hooks/useAsset";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Legend,
+  Tooltip,
+} from "recharts";
 
 const STATUS_TRANSITIONS: Record<string, string[]> = {
-  ACTIVE:      ["INACTIVE", "MAINTENANCE", "RETIRED"],
-  INACTIVE:    ["ACTIVE", "RETIRED"],
+  ACTIVE: ["INACTIVE", "MAINTENANCE", "RETIRED"],
+  INACTIVE: ["ACTIVE", "RETIRED"],
   MAINTENANCE: ["ACTIVE", "INACTIVE", "RETIRED"],
-  RETIRED:     [], // terminal — no transitions
+  RETIRED: [], // terminal — no transitions
 };
 
-type Tab = "overview" | "history" | "maintenance" | "documents" | "notes" | "tokens";
+type Tab =
+  | "overview"
+  | "history"
+  | "maintenance"
+  | "documents"
+  | "notes"
+  | "tokens";
 
 // ── Skeleton ────────────────────────────────────────────────────────────────
 function Skeleton({ className }: { className?: string }) {
   return (
-    <div className={`animate-pulse bg-gray-100 rounded-md ${className ?? ""}`} />
+    <div
+      className={`animate-pulse bg-gray-100 rounded-md ${className ?? ""}`}
+    />
   );
 }
 
@@ -85,7 +104,9 @@ function DetailRow({
   return (
     <div className="flex justify-between text-sm">
       <dt className="text-gray-500">{label}</dt>
-      <dd className="text-gray-900 font-medium text-right">{value || fallback}</dd>
+      <dd className="text-gray-900 font-medium text-right">
+        {value || fallback}
+      </dd>
     </div>
   );
 }
@@ -104,7 +125,9 @@ const actionColors: Record<string, string> = {
 function ActionBadge({ action }: { action: string }) {
   const cls = actionColors[action] ?? "bg-gray-100 text-gray-600";
   return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ${cls}`}>
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ${cls}`}
+    >
       {action.replace(/_/g, " ")}
     </span>
   );
@@ -121,7 +144,9 @@ const maintenanceStatusColors: Record<string, string> = {
 function MaintenanceStatusBadge({ status }: { status: string }) {
   const cls = maintenanceStatusColors[status] ?? "bg-gray-100 text-gray-500";
   return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ${cls}`}>
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ${cls}`}
+    >
       {status.replace(/_/g, " ")}
     </span>
   );
@@ -154,11 +179,15 @@ function ScheduleMaintenanceModal({
         </h3>
         <div className="space-y-3">
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">Type</label>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Type
+            </label>
             <select
               className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
               value={form.type}
-              onChange={(e) => setForm({ ...form, type: e.target.value as MaintenanceType })}
+              onChange={(e) =>
+                setForm({ ...form, type: e.target.value as MaintenanceType })
+              }
             >
               <option value="PREVENTIVE">Preventive</option>
               <option value="CORRECTIVE">Corrective</option>
@@ -166,24 +195,34 @@ function ScheduleMaintenanceModal({
             </select>
           </div>
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">Description</label>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Description
+            </label>
             <input
               className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
               value={form.description}
-              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              onChange={(e) =>
+                setForm({ ...form, description: e.target.value })
+              }
             />
           </div>
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">Scheduled Date</label>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Scheduled Date
+            </label>
             <input
               type="date"
               className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
               value={form.scheduledDate}
-              onChange={(e) => setForm({ ...form, scheduledDate: e.target.value })}
+              onChange={(e) =>
+                setForm({ ...form, scheduledDate: e.target.value })
+              }
             />
           </div>
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">Notes</label>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Notes
+            </label>
             <textarea
               className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
               rows={2}
@@ -234,10 +273,14 @@ function UploadDocumentModal({
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-black/40" onClick={onClose} />
       <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
-        <h3 className="text-base font-semibold text-gray-900 mb-4">Upload Document</h3>
+        <h3 className="text-base font-semibold text-gray-900 mb-4">
+          Upload Document
+        </h3>
         <div className="space-y-3">
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">Name (optional)</label>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Name (optional)
+            </label>
             <input
               className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
               value={name}
@@ -245,7 +288,9 @@ function UploadDocumentModal({
             />
           </div>
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">File</label>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              File
+            </label>
             <input
               type="file"
               className="w-full text-sm"
@@ -283,49 +328,38 @@ function TransferTokensModal({
     recipientAddress: "",
     amount: "",
   });
-  const { mutate: transfer, isPending: transferring } = useTransferTokens(assetId, {
-    onSuccess: onClose,
-// ── ChangeStatusModal ────────────────────────────────────────────────────────
-function ChangeStatusModal({
-  assetId,
-  currentStatus,
-  onClose,
-}: {
-  assetId: string;
-  currentStatus: string;
-  onClose: () => void;
-}) {
-  const allowedTransitions = STATUS_TRANSITIONS[currentStatus] ?? [];
-  const [selectedStatus, setSelectedStatus] = useState(allowedTransitions[0] ?? "");
-  const [apiError, setApiError] = useState<string | null>(null);
-
-  const { mutate: updateStatus, isPending } = useUpdateAssetStatus(assetId, {
-    onSuccess: (updated) => {
-      // toast is handled in the parent via onSuccess callback
-      onClose();
+  const { mutate: transfer, isPending: transferring } = useTransferTokens(
+    assetId,
+    {
+      onSuccess: onClose,
     },
-    onError: (err) => {
-      setApiError(err?.message ?? "Failed to update status. Please try again.");
-    },
-  });
+  );
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-black/40" onClick={onClose} />
       <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
-        <h3 className="text-base font-semibold text-gray-900 mb-4">Transfer Tokens</h3>
+        <h3 className="text-base font-semibold text-gray-900 mb-4">
+          Transfer Tokens
+        </h3>
         <div className="space-y-3">
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">Recipient Stellar Address</label>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Recipient Stellar Address
+            </label>
             <input
               className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
               placeholder="G..."
               value={form.recipientAddress}
-              onChange={(e) => setForm({ ...form, recipientAddress: e.target.value })}
+              onChange={(e) =>
+                setForm({ ...form, recipientAddress: e.target.value })
+              }
             />
           </div>
           <div>
-            <label className="block text-xs font-medium text-gray-600 mb-1">Amount</label>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Amount
+            </label>
             <input
               type="number"
               className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
@@ -337,15 +371,69 @@ function ChangeStatusModal({
         </div>
         <div className="flex gap-3 mt-5">
           <Button variant="outline" className="flex-1" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            className="flex-1"
+            loading={transferring}
+            disabled={!form.recipientAddress || !form.amount}
+            onClick={() =>
+              transfer({
+                recipientAddress: form.recipientAddress,
+                amount: form.amount,
+              })
+            }
+          >
+            Transfer
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── ChangeStatusModal ────────────────────────────────────────────────────────
+function ChangeStatusModal({
+  assetId,
+  currentStatus,
+  onClose,
+}: {
+  assetId: string;
+  currentStatus: string;
+  onClose: () => void;
+}) {
+  const allowedTransitions = STATUS_TRANSITIONS[currentStatus] ?? [];
+  const [selectedStatus, setSelectedStatus] = useState(
+    allowedTransitions[0] ?? "",
+  );
+  const [apiError, setApiError] = useState<string | null>(null);
+
+  const { mutate: updateStatus, isPending } = useUpdateAssetStatus(assetId, {
+    onSuccess: (updated) => {
+      // toast is handled in the parent via onSuccess callback
+      onClose();
+    },
+    onError: (err) => {
+      setApiError(err?.message ?? "Failed to update status. Please try again.");
+    },
+  });
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
       <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-sm p-6">
-        <h3 className="text-base font-semibold text-gray-900 mb-1">Change Asset Status</h3>
+        <h3 className="text-base font-semibold text-gray-900 mb-1">
+          Change Asset Status
+        </h3>
         <p className="text-sm text-gray-500 mb-4">
           Current status:{" "}
           <span className="font-medium text-gray-700">{currentStatus}</span>
         </p>
 
         <div className="mb-4">
-          <label className="block text-xs font-medium text-gray-600 mb-1">New Status</label>
+          <label className="block text-xs font-medium text-gray-600 mb-1">
+            New Status
+          </label>
           <select
             className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-900/10"
             value={selectedStatus}
@@ -369,19 +457,21 @@ function ChangeStatusModal({
         )}
 
         <div className="flex gap-3">
-          <Button variant="outline" className="flex-1" onClick={onClose} disabled={isPending}>
+          <Button
+            variant="outline"
+            className="flex-1"
+            onClick={onClose}
+            disabled={isPending}
+          >
             Cancel
           </Button>
           <Button
             className="flex-1"
-            loading={transferring}
-            disabled={!form.recipientAddress || !form.amount}
-            onClick={() => transfer({ recipientAddress: form.recipientAddress, amount: form.amount })}
-          >
-            Transfer
             loading={isPending}
             disabled={!selectedStatus}
-            onClick={() => updateStatus({ status: selectedStatus as AssetStatus })}
+            onClick={() =>
+              updateStatus({ status: selectedStatus as AssetStatus })
+            }
           >
             Confirm
           </Button>
@@ -391,6 +481,114 @@ function ChangeStatusModal({
   );
 }
 
+// ── RequestDisposalModal ─────────────────────────────────────────────────────
+function RequestDisposalModal({
+  assetId,
+  onClose,
+}: {
+  assetId: string;
+  onClose: () => void;
+}) {
+  const [form, setForm] = useState({
+    method: "" as DisposalMethod | "",
+    reason: "",
+    salePrice: "",
+  });
+  const { mutate, isPending } = useCreateDisposalRequest(assetId, {
+    onSuccess: onClose,
+  });
+
+  const handleSubmit = () => {
+    if (!form.method || !form.reason) return;
+
+    mutate({
+      method: form.method as DisposalMethod,
+      reason: form.reason,
+      salePrice:
+        form.method === "SOLD" && form.salePrice
+          ? parseFloat(form.salePrice)
+          : undefined,
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
+        <h3 className="text-base font-semibold text-gray-900 mb-4">
+          Request Asset Disposal
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Disposal Method
+            </label>
+            <select
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
+              value={form.method}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  method: e.target.value as DisposalMethod | "",
+                })
+              }
+            >
+              <option value="">Select method...</option>
+              <option value="SOLD">Sold</option>
+              <option value="DONATED">Donated</option>
+              <option value="SCRAPPED">Scrapped</option>
+              <option value="RECYCLED">Recycled</option>
+              <option value="LOST">Lost</option>
+              <option value="STOLEN">Stolen</option>
+            </select>
+          </div>
+          {form.method === "SOLD" && (
+            <div>
+              <label className="block text-xs font-medium text-gray-600 mb-1">
+                Sale Price
+              </label>
+              <input
+                type="number"
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
+                placeholder="0.00"
+                value={form.salePrice}
+                onChange={(e) =>
+                  setForm({ ...form, salePrice: e.target.value })
+                }
+              />
+            </div>
+          )}
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">
+              Reason
+            </label>
+            <textarea
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
+              rows={3}
+              placeholder="Provide a reason for disposal..."
+              value={form.reason}
+              onChange={(e) => setForm({ ...form, reason: e.target.value })}
+            />
+          </div>
+        </div>
+        <div className="flex gap-3 mt-5">
+          <Button variant="outline" className="flex-1" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            className="flex-1"
+            loading={isPending}
+            disabled={!form.method || !form.reason}
+            onClick={handleSubmit}
+          >
+            Submit Request
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // ── Main Page ────────────────────────────────────────────────────────────────
 export default function AssetDetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -398,16 +596,19 @@ export default function AssetDetailPage() {
   const [tab, setTab] = useState<Tab>("overview");
   const [qrCodeDataUri, setQrCodeDataUri] = useState<string | null>(null);
   const [showChangeStatus, setShowChangeStatus] = useState(false);
-const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
+  const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
 
   // Confirm dialogs
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [confirmDeleteDoc, setConfirmDeleteDoc] = useState<string | null>(null);
-  const [confirmDeleteNote, setConfirmDeleteNote] = useState<string | null>(null);
+  const [confirmDeleteNote, setConfirmDeleteNote] = useState<string | null>(
+    null,
+  );
 
   // Modals
   const [showScheduleMaintenance, setShowScheduleMaintenance] = useState(false);
   const [showUploadDoc, setShowUploadDoc] = useState(false);
+  const [showRequestDisposal, setShowRequestDisposal] = useState(false);
 
   // Note form
   const [noteContent, setNoteContent] = useState("");
@@ -422,12 +623,20 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
   // Queries
   const { data: asset, isLoading } = useAsset(id);
   const { data: history = [], isLoading: historyLoading } = useAssetHistory(id);
-  const { data: maintenance = [], isLoading: maintenanceLoading } = useMaintenanceRecords(id);
-  const { data: documents = [], isLoading: documentsLoading } = useAssetDocuments(id);
+  const { data: maintenance = [], isLoading: maintenanceLoading } =
+    useMaintenanceRecords(id);
+  const { data: documents = [], isLoading: documentsLoading } =
+    useAssetDocuments(id);
   const { data: notes = [], isLoading: notesLoading } = useAssetNotes(id);
-  const { data: tokenHolders = [], isLoading: tokenHoldersLoading, refetch: refetchTokenHolders } = useTokenHolders(id);
-  const { data: tokenSummary, isLoading: tokenSummaryLoading } = useTokenSummary(id);
-  const { data: tokenLockStatus, isLoading: tokenLockStatusLoading } = useTokenLockStatus(id);
+  const {
+    data: tokenHolders = [],
+    isLoading: tokenHoldersLoading,
+    refetch: refetchTokenHolders,
+  } = useTokenHolders(id);
+  const { data: tokenSummary, isLoading: tokenSummaryLoading } =
+    useTokenSummary(id);
+  const { data: tokenLockStatus, isLoading: tokenLockStatusLoading } =
+    useTokenLockStatus(id);
 
   // Mutations
   const { mutate: deleteAsset, isPending: deletingAsset } = useDeleteAsset(id, {
@@ -435,27 +644,32 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
   });
   const { mutate: deleteDoc, isPending: deletingDoc } = useDeleteDocument(id);
   const { mutate: deleteNote, isPending: deletingNote } = useDeleteNote(id);
-  const { mutate: markComplete, isPending: markingComplete } = useUpdateMaintenanceStatus(id);
+  const { mutate: markComplete, isPending: markingComplete } =
+    useUpdateMaintenanceStatus(id);
   const { mutate: addNote, isPending: addingNote } = useCreateNote(id, {
     onSuccess: () => setNoteContent(""),
   });
-  const { mutate: transferTokens, isPending: transferringTokens } = useTransferTokens(id, {
-    onSuccess: () => {
-      setShowTransferTokens(false);
-      setTransferForm({ recipientAddress: "", amount: "" });
-      refetchTokenHolders();
-    },
-  });
+  const { mutate: transferTokens, isPending: transferringTokens } =
+    useTransferTokens(id, {
+      onSuccess: () => {
+        setShowTransferTokens(false);
+        setTransferForm({ recipientAddress: "", amount: "" });
+        refetchTokenHolders();
+      },
+    });
   const { mutate: lockTokens, isPending: lockingTokens } = useLockTokens(id, {
     onSuccess: () => {
       refetchTokenHolders();
     },
   });
-  const { mutate: unlockTokens, isPending: unlockingTokens } = useUnlockTokens(id, {
-    onSuccess: () => {
-      refetchTokenHolders();
+  const { mutate: unlockTokens, isPending: unlockingTokens } = useUnlockTokens(
+    id,
+    {
+      onSuccess: () => {
+        refetchTokenHolders();
+      },
     },
-  });
+  );
 
   // Fetch QR code when asset loads
   useEffect(() => {
@@ -473,7 +687,7 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
           reader.readAsDataURL(blob);
         }
       } catch (error) {
-        console.error('Failed to fetch QR code:', error);
+        console.error("Failed to fetch QR code:", error);
       }
     };
 
@@ -483,14 +697,14 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
   // Print handler
   const handlePrint = () => {
     if (!asset) return;
-    
+
     // Set page title to asset name
     const originalTitle = document.title;
     document.title = asset.name;
-    
+
     // Trigger print
     window.print();
-    
+
     // Restore original title
     document.title = originalTitle;
   };
@@ -559,13 +773,22 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
               <ArrowRightLeft size={14} className="mr-1.5" /> Transfer
             </Button>
             <Button
-  size="sm"
-  variant="outline"
-  disabled={STATUS_TRANSITIONS[asset.status]?.length === 0}
-  onClick={() => setShowChangeStatus(true)}
->
-  <RefreshCw size={14} className="mr-1.5" /> Update Status
-</Button>
+              size="sm"
+              variant="outline"
+              disabled={STATUS_TRANSITIONS[asset.status]?.length === 0}
+              onClick={() => setShowChangeStatus(true)}
+            >
+              <RefreshCw size={14} className="mr-1.5" /> Update Status
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-orange-600 border-orange-200 hover:bg-orange-50"
+              onClick={() => setShowRequestDisposal(true)}
+              disabled={asset.status === "RETIRED"}
+            >
+              <AlertTriangle size={14} className="mr-1.5" /> Request Disposal
+            </Button>
             <Button size="sm" variant="outline">
               <Pencil size={14} className="mr-1.5" /> Edit
             </Button>
@@ -577,11 +800,7 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
             >
               <Trash2 size={14} className="mr-1.5" /> Delete
             </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={handlePrint}
-            >
+            <Button size="sm" variant="outline" onClick={handlePrint}>
               <Printer size={14} className="mr-1.5" /> Print
             </Button>
           </div>
@@ -608,117 +827,154 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
 
       {/* ── Overview ── */}
       {tab === "overview" && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <div className="bg-white rounded-xl border border-gray-200 p-5">
-            <h2 className="text-sm font-semibold text-gray-900 mb-4">Asset Details</h2>
-            <dl className="space-y-3">
-              <DetailRow label="Asset ID" value={asset.assetId} />
-              <DetailRow label="Category" value={asset.category?.name} />
-              <DetailRow label="Department" value={asset.department?.name} />
-              <DetailRow
-                label="Assigned To"
-                value={asset.assignedTo ? asset.assignedTo.name : undefined}
-                fallback="Unassigned"
+        <div className="space-y-4">
+          {/* Pending Disposal Banner */}
+          {asset.status === "RETIRED" && (
+            <div className="bg-orange-50 border border-orange-200 rounded-xl p-4 flex items-start gap-3">
+              <AlertTriangle
+                className="text-orange-600 shrink-0 mt-0.5"
+                size={20}
               />
-              <DetailRow label="Location" value={asset.location} />
-              <DetailRow label="Serial Number" value={asset.serialNumber} />
-              <DetailRow label="Manufacturer" value={asset.manufacturer} />
-              <DetailRow label="Model" value={asset.model} />
-            </dl>
-          </div>
+              <div className="flex-1">
+                <h3 className="text-sm font-semibold text-orange-900 mb-1">
+                  Asset Retired
+                </h3>
+                <p className="text-xs text-orange-700">
+                  This asset has been retired and is no longer in active use.
+                </p>
+              </div>
+            </div>
+          )}
 
-          <div className="bg-white rounded-xl border border-gray-200 p-5">
-            <h2 className="text-sm font-semibold text-gray-900 mb-4">Financial & Dates</h2>
-            <dl className="space-y-3">
-              <DetailRow
-                label="Purchase Price"
-                value={
-                  asset.purchasePrice != null
-                    ? `$${Number(asset.purchasePrice).toLocaleString()}`
-                    : undefined
-                }
-              />
-              <DetailRow
-                label="Current Value"
-                value={
-                  asset.currentValue != null
-                    ? `$${Number(asset.currentValue).toLocaleString()}`
-                    : undefined
-                }
-              />
-              <DetailRow
-                label="Purchase Date"
-                value={
-                  asset.purchaseDate
-                    ? format(new Date(asset.purchaseDate), "MMM d, yyyy")
-                    : undefined
-                }
-              />
-              <DetailRow
-                label="Warranty Expires"
-                value={
-                  asset.warrantyExpiration
-                    ? format(new Date(asset.warrantyExpiration), "MMM d, yyyy")
-                    : undefined
-                }
-              />
-              <DetailRow
-                label="Registered"
-                value={format(new Date(asset.createdAt), "MMM d, yyyy")}
-              />
-              <DetailRow
-                label="Last Updated"
-                value={format(new Date(asset.updatedAt), "MMM d, yyyy")}
-              />
-            </dl>
-          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <div className="bg-white rounded-xl border border-gray-200 p-5">
+              <h2 className="text-sm font-semibold text-gray-900 mb-4">
+                Asset Details
+              </h2>
+              <dl className="space-y-3">
+                <DetailRow label="Asset ID" value={asset.assetId} />
+                <DetailRow label="Category" value={asset.category?.name} />
+                <DetailRow label="Department" value={asset.department?.name} />
+                <DetailRow
+                  label="Assigned To"
+                  value={asset.assignedTo ? asset.assignedTo.name : undefined}
+                  fallback="Unassigned"
+                />
+                <DetailRow label="Location" value={asset.location} />
+                <DetailRow label="Serial Number" value={asset.serialNumber} />
+                <DetailRow label="Manufacturer" value={asset.manufacturer} />
+                <DetailRow label="Model" value={asset.model} />
+              </dl>
+            </div>
 
-          {/* QR Code - visible in print */}
-          {qrCodeDataUri && (
-            <div className="bg-white rounded-xl border border-gray-200 p-5 print:border-0 print:p-0">
-              <h2 className="text-sm font-semibold text-gray-900 mb-4 print:hidden">QR Code</h2>
-              <div className="flex justify-center print:justify-start">
-                <img
-                  src={qrCodeDataUri}
-                  alt={`QR Code for ${asset.name}`}
-                  className="w-32 h-32 print:w-40 print:h-40"
+            <div className="bg-white rounded-xl border border-gray-200 p-5">
+              <h2 className="text-sm font-semibold text-gray-900 mb-4">
+                Financial & Dates
+              </h2>
+              <dl className="space-y-3">
+                <DetailRow
+                  label="Purchase Price"
+                  value={
+                    asset.purchasePrice != null
+                      ? `$${Number(asset.purchasePrice).toLocaleString()}`
+                      : undefined
+                  }
                 />
-              </div>
+                <DetailRow
+                  label="Current Value"
+                  value={
+                    asset.currentValue != null
+                      ? `$${Number(asset.currentValue).toLocaleString()}`
+                      : undefined
+                  }
+                />
+                <DetailRow
+                  label="Purchase Date"
+                  value={
+                    asset.purchaseDate
+                      ? format(new Date(asset.purchaseDate), "MMM d, yyyy")
+                      : undefined
+                  }
+                />
+                <DetailRow
+                  label="Warranty Expires"
+                  value={
+                    asset.warrantyExpiration
+                      ? format(
+                          new Date(asset.warrantyExpiration),
+                          "MMM d, yyyy",
+                        )
+                      : undefined
+                  }
+                />
+                <DetailRow
+                  label="Registered"
+                  value={format(new Date(asset.createdAt), "MMM d, yyyy")}
+                />
+                <DetailRow
+                  label="Last Updated"
+                  value={format(new Date(asset.updatedAt), "MMM d, yyyy")}
+                />
+              </dl>
             </div>
-          )}
 
-          {(asset.tags?.length || asset.notes) && (
-            <div className="bg-white rounded-xl border border-gray-200 p-5 lg:col-span-2">
-              {asset.tags && asset.tags.length > 0 && (
-                <div className="mb-4">
-                  <h2 className="text-sm font-semibold text-gray-900 mb-2 print:hidden">Tags</h2>
-                  <div className="flex flex-wrap gap-1.5">
-                    {asset.tags.map((tag) => (
-                      <span
-                        key={tag}
-                        className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded-md text-xs"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
+            {/* QR Code - visible in print */}
+            {qrCodeDataUri && (
+              <div className="bg-white rounded-xl border border-gray-200 p-5 print:border-0 print:p-0">
+                <h2 className="text-sm font-semibold text-gray-900 mb-4 print:hidden">
+                  QR Code
+                </h2>
+                <div className="flex justify-center print:justify-start">
+                  <img
+                    src={qrCodeDataUri}
+                    alt={`QR Code for ${asset.name}`}
+                    className="w-32 h-32 print:w-40 print:h-40"
+                  />
                 </div>
-              )}
-              {asset.notes && (
-                <div>
-                  <h2 className="text-sm font-semibold text-gray-900 mb-2 print:hidden">Notes</h2>
-                  <p className="text-sm text-gray-600 whitespace-pre-wrap">{asset.notes}</p>
-                </div>
-              )}
-            </div>
-          )}
+              </div>
+            )}
+
+            {(asset.tags?.length || asset.notes) && (
+              <div className="bg-white rounded-xl border border-gray-200 p-5 lg:col-span-2">
+                {asset.tags && asset.tags.length > 0 && (
+                  <div className="mb-4">
+                    <h2 className="text-sm font-semibold text-gray-900 mb-2 print:hidden">
+                      Tags
+                    </h2>
+                    <div className="flex flex-wrap gap-1.5">
+                      {asset.tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded-md text-xs"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {asset.notes && (
+                  <div>
+                    <h2 className="text-sm font-semibold text-gray-900 mb-2 print:hidden">
+                      Notes
+                    </h2>
+                    <p className="text-sm text-gray-600 whitespace-pre-wrap">
+                      {asset.notes}
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       )}
 
       {/* ── History ── */}
       {tab === "history" && (
         <div className="bg-white rounded-xl border border-gray-200 p-5">
-          <h2 className="text-sm font-semibold text-gray-900 mb-4">Change History</h2>
+          <h2 className="text-sm font-semibold text-gray-900 mb-4">
+            Change History
+          </h2>
           {historyLoading ? (
             <div className="space-y-4">
               {[1, 2, 3].map((i) => (
@@ -726,7 +982,9 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
               ))}
             </div>
           ) : history.length === 0 ? (
-            <p className="text-sm text-gray-400 text-center py-8">No history recorded yet.</p>
+            <p className="text-sm text-gray-400 text-center py-8">
+              No history recorded yet.
+            </p>
           ) : (
             <ol className="relative border-l border-gray-200 ml-3 space-y-6">
               {history.map((event) => (
@@ -751,17 +1009,23 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
       {tab === "maintenance" && (
         <div className="bg-white rounded-xl border border-gray-200 p-5">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-sm font-semibold text-gray-900">Maintenance Records</h2>
+            <h2 className="text-sm font-semibold text-gray-900">
+              Maintenance Records
+            </h2>
             <Button size="sm" onClick={() => setShowScheduleMaintenance(true)}>
               <Plus size={14} className="mr-1.5" /> Schedule Maintenance
             </Button>
           </div>
           {maintenanceLoading ? (
             <div className="space-y-3">
-              {[1, 2].map((i) => <Skeleton key={i} className="h-16 w-full" />)}
+              {[1, 2].map((i) => (
+                <Skeleton key={i} className="h-16 w-full" />
+              ))}
             </div>
           ) : maintenance.length === 0 ? (
-            <p className="text-sm text-gray-400 text-center py-8">No maintenance records.</p>
+            <p className="text-sm text-gray-400 text-center py-8">
+              No maintenance records.
+            </p>
           ) : (
             <div className="space-y-3">
               {maintenance.map((record) => (
@@ -771,27 +1035,38 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
                 >
                   <div className="space-y-1">
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium text-gray-900">{record.type}</span>
+                      <span className="text-sm font-medium text-gray-900">
+                        {record.type}
+                      </span>
                       <MaintenanceStatusBadge status={record.status} />
                     </div>
-                    <p className="text-sm text-gray-600">{record.description}</p>
+                    <p className="text-sm text-gray-600">
+                      {record.description}
+                    </p>
                     <p className="text-xs text-gray-400">
-                      Scheduled: {format(new Date(record.scheduledDate), "MMM d, yyyy")}
-                      {record.cost != null && ` · $${Number(record.cost).toLocaleString()}`}
+                      Scheduled:{" "}
+                      {format(new Date(record.scheduledDate), "MMM d, yyyy")}
+                      {record.cost != null &&
+                        ` · $${Number(record.cost).toLocaleString()}`}
                     </p>
                   </div>
-                  {record.status !== "COMPLETED" && record.status !== "CANCELLED" && (
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      loading={markingComplete}
-                      onClick={() =>
-                        markComplete({ maintenanceId: record.id, status: "COMPLETED" })
-                      }
-                    >
-                      <CheckCircle size={14} className="mr-1.5" /> Mark Complete
-                    </Button>
-                  )}
+                  {record.status !== "COMPLETED" &&
+                    record.status !== "CANCELLED" && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        loading={markingComplete}
+                        onClick={() =>
+                          markComplete({
+                            maintenanceId: record.id,
+                            status: "COMPLETED",
+                          })
+                        }
+                      >
+                        <CheckCircle size={14} className="mr-1.5" /> Mark
+                        Complete
+                      </Button>
+                    )}
                 </div>
               ))}
             </div>
@@ -810,10 +1085,14 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
           </div>
           {documentsLoading ? (
             <div className="space-y-3">
-              {[1, 2].map((i) => <Skeleton key={i} className="h-14 w-full" />)}
+              {[1, 2].map((i) => (
+                <Skeleton key={i} className="h-14 w-full" />
+              ))}
             </div>
           ) : documents.length === 0 ? (
-            <p className="text-sm text-gray-400 text-center py-8">No documents uploaded.</p>
+            <p className="text-sm text-gray-400 text-center py-8">
+              No documents uploaded.
+            </p>
           ) : (
             <div className="space-y-2">
               {documents.map((doc) => (
@@ -822,7 +1101,9 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
                   className="flex items-center justify-between border border-gray-100 rounded-lg px-4 py-3"
                 >
                   <div>
-                    <p className="text-sm font-medium text-gray-900">{doc.name}</p>
+                    <p className="text-sm font-medium text-gray-900">
+                      {doc.name}
+                    </p>
                     <p className="text-xs text-gray-400">
                       {doc.type} · {(doc.size / 1024).toFixed(1)} KB ·{" "}
                       {format(new Date(doc.createdAt), "MMM d, yyyy")}
@@ -847,7 +1128,9 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
       {tab === "notes" && (
         <div className="space-y-4">
           <div className="bg-white rounded-xl border border-gray-200 p-5">
-            <h2 className="text-sm font-semibold text-gray-900 mb-3">Add Note</h2>
+            <h2 className="text-sm font-semibold text-gray-900 mb-3">
+              Add Note
+            </h2>
             <textarea
               className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm resize-none"
               rows={3}
@@ -871,10 +1154,14 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
             <h2 className="text-sm font-semibold text-gray-900 mb-4">Notes</h2>
             {notesLoading ? (
               <div className="space-y-3">
-                {[1, 2].map((i) => <Skeleton key={i} className="h-16 w-full" />)}
+                {[1, 2].map((i) => (
+                  <Skeleton key={i} className="h-16 w-full" />
+                ))}
               </div>
             ) : notes.length === 0 ? (
-              <p className="text-sm text-gray-400 text-center py-8">No notes yet.</p>
+              <p className="text-sm text-gray-400 text-center py-8">
+                No notes yet.
+              </p>
             ) : (
               <div className="space-y-3">
                 {notes.map((note) => (
@@ -921,7 +1208,9 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
             <div className="bg-white rounded-xl border border-gray-200 p-5">
               <p className="text-xs text-gray-500 mb-1">Circulating Tokens</p>
               <p className="text-2xl font-bold text-gray-900">
-                {tokenSummaryLoading ? "—" : tokenSummary?.circulatingTokens || "0"}
+                {tokenSummaryLoading
+                  ? "—"
+                  : tokenSummary?.circulatingTokens || "0"}
               </p>
             </div>
             <div className="bg-white rounded-xl border border-gray-200 p-5">
@@ -933,7 +1222,11 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
             <div className="bg-white rounded-xl border border-gray-200 p-5">
               <p className="text-xs text-gray-500 mb-1">Token Price</p>
               <p className="text-2xl font-bold text-gray-900">
-                {tokenSummaryLoading ? "—" : tokenSummary?.tokenPrice ? `$${tokenSummary.tokenPrice.toFixed(2)}` : "N/A"}
+                {tokenSummaryLoading
+                  ? "—"
+                  : tokenSummary?.tokenPrice
+                    ? `$${tokenSummary.tokenPrice.toFixed(2)}`
+                    : "N/A"}
               </p>
             </div>
           </div>
@@ -942,11 +1235,15 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
             {/* Pie Chart */}
             <div className="bg-white rounded-xl border border-gray-200 p-5">
-              <h2 className="text-sm font-semibold text-gray-900 mb-4">Ownership Distribution</h2>
+              <h2 className="text-sm font-semibold text-gray-900 mb-4">
+                Ownership Distribution
+              </h2>
               {tokenHoldersLoading ? (
                 <Skeleton className="h-64 w-full" />
               ) : tokenHolders.length === 0 ? (
-                <p className="text-sm text-gray-400 text-center py-8">No token holders yet.</p>
+                <p className="text-sm text-gray-400 text-center py-8">
+                  No token holders yet.
+                </p>
               ) : (
                 <ResponsiveContainer width="100%" height={300}>
                   <PieChart>
@@ -958,13 +1255,18 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
                       cx="50%"
                       cy="50%"
                       labelLine={false}
-                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(1)}%`}
+                      label={({ name, percent }) =>
+                        `${name}: ${((percent ?? 0) * 100).toFixed(1)}%`
+                      }
                       outerRadius={80}
                       fill="#8884d8"
                       dataKey="value"
                     >
                       {tokenHolders.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={`hsl(${(index * 360) / tokenHolders.length}, 70%, 50%)`} />
+                        <Cell
+                          key={`cell-${index}`}
+                          fill={`hsl(${(index * 360) / tokenHolders.length}, 70%, 50%)`}
+                        />
                       ))}
                     </Pie>
                     <Tooltip />
@@ -976,19 +1278,26 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
             {/* Holders Table */}
             <div className="bg-white rounded-xl border border-gray-200 p-5">
               <div className="flex items-center justify-between mb-4">
-                <h2 className="text-sm font-semibold text-gray-900">Token Holders</h2>
+                <h2 className="text-sm font-semibold text-gray-900">
+                  Token Holders
+                </h2>
                 <Button size="sm" onClick={() => setShowTransferTokens(true)}>
-                  <ArrowRightLeft size={14} className="mr-1.5" /> Transfer Tokens
+                  <ArrowRightLeft size={14} className="mr-1.5" /> Transfer
+                  Tokens
                 </Button>
               </div>
               {tokenHoldersLoading ? (
                 <div className="space-y-3">
-                  {[1, 2, 3].map((i) => <Skeleton key={i} className="h-14 w-full" />)}
+                  {[1, 2, 3].map((i) => (
+                    <Skeleton key={i} className="h-14 w-full" />
+                  ))}
                 </div>
               ) : tokenHolders.length === 0 ? (
-                <p className="text-sm text-gray-400 text-center py-8">No token holders yet.</p>
+                <p className="text-sm text-gray-400 text-center py-8">
+                  No token holders yet.
+                </p>
               ) : (
-                <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                <div className="space-y-2 max-h-75 overflow-y-auto">
                   {tokenHolders.map((holder) => (
                     <div
                       key={holder.address}
@@ -996,18 +1305,23 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
                     >
                       <div className="flex items-center gap-2">
                         <a
-                          href={`https://stellar.expert/explorer/${process.env.NEXT_PUBLIC_STELLAR_NETWORK || 'testnet'}/account/${holder.address}`}
+                          href={`https://stellar.expert/explorer/${process.env.NEXT_PUBLIC_STELLAR_NETWORK || "testnet"}/account/${holder.address}`}
                           target="_blank"
                           rel="noopener noreferrer"
                           className="text-sm font-medium text-blue-600 hover:text-blue-800 flex items-center gap-1"
                         >
-                          {holder.address.slice(0, 6)}...{holder.address.slice(-4)}
+                          {holder.address.slice(0, 6)}...
+                          {holder.address.slice(-4)}
                           <ExternalLink size={12} />
                         </a>
                       </div>
                       <div className="text-right">
-                        <p className="text-sm font-medium text-gray-900">{holder.balance}</p>
-                        <p className="text-xs text-gray-500">{holder.percentage.toFixed(2)}%</p>
+                        <p className="text-sm font-medium text-gray-900">
+                          {holder.balance}
+                        </p>
+                        <p className="text-xs text-gray-500">
+                          {holder.percentage.toFixed(2)}%
+                        </p>
                       </div>
                     </div>
                   ))}
@@ -1020,10 +1334,17 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
           <div className="bg-white rounded-xl border border-gray-200 p-5">
             <div className="flex items-center justify-between">
               <div>
-                <h2 className="text-sm font-semibold text-gray-900">Token Lock Status</h2>
+                <h2 className="text-sm font-semibold text-gray-900">
+                  Token Lock Status
+                </h2>
                 <p className="text-xs text-gray-500 mt-1">
-                  {tokenLockStatusLoading ? "Loading..." : tokenLockStatus?.isLocked ? "Tokens are locked" : "Tokens are unlocked"}
-                  {tokenLockStatus?.lockedAt && ` since ${format(new Date(tokenLockStatus.lockedAt), "MMM d, yyyy")}`}
+                  {tokenLockStatusLoading
+                    ? "Loading..."
+                    : tokenLockStatus?.isLocked
+                      ? "Tokens are locked"
+                      : "Tokens are unlocked"}
+                  {tokenLockStatus?.lockedAt &&
+                    ` since ${format(new Date(tokenLockStatus.lockedAt), "MMM d, yyyy")}`}
                 </p>
               </div>
               <div className="flex gap-2">
@@ -1099,15 +1420,24 @@ const [statusToastMsg, setStatusToastMsg] = useState<string | null>(null);
           onClose={() => setShowScheduleMaintenance(false)}
         />
       )}
-{showChangeStatus && (
-  <ChangeStatusModal
-    assetId={id}
-    currentStatus={asset.status}
-    onClose={() => setShowChangeStatus(false)}
-  />
-)}
+      {showChangeStatus && (
+        <ChangeStatusModal
+          assetId={id}
+          currentStatus={asset.status}
+          onClose={() => setShowChangeStatus(false)}
+        />
+      )}
       {showUploadDoc && (
-        <UploadDocumentModal assetId={id} onClose={() => setShowUploadDoc(false)} />
+        <UploadDocumentModal
+          assetId={id}
+          onClose={() => setShowUploadDoc(false)}
+        />
+      )}
+      {showRequestDisposal && (
+        <RequestDisposalModal
+          assetId={id}
+          onClose={() => setShowRequestDisposal(false)}
+        />
       )}
     </div>
   );
diff --git a/frontend/app/(dashboard)/assets/disposals/page.tsx b/frontend/app/(dashboard)/assets/disposals/page.tsx
new file mode 100644
index 000000000..f5f7db5a2
--- /dev/null
+++ b/frontend/app/(dashboard)/assets/disposals/page.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  ExternalLink,
+  Package,
+  Clock,
+  DollarSign,
+  FileText,
+} from "lucide-react";
+import { format } from "date-fns";
+import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import {
+  usePendingDisposals,
+  useApproveDisposal,
+  useRejectDisposal,
+} from "@/lib/query/hooks/useAsset";
+import type { DisposalRequest, DisposalMethod } from "@/lib/query/types/asset";
+
+const methodColors: Record<DisposalMethod, string> = {
+  SOLD: "bg-green-100 text-green-700",
+  DONATED: "bg-blue-100 text-blue-700",
+  SCRAPPED: "bg-gray-100 text-gray-600",
+  RECYCLED: "bg-teal-100 text-teal-700",
+  LOST: "bg-red-100 text-red-700",
+  STOLEN: "bg-red-100 text-red-800",
+};
+
+function DisposalMethodBadge({ method }: { method: DisposalMethod }) {
+  const cls = methodColors[method] ?? "bg-gray-100 text-gray-600";
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ${cls}`}
+    >
+      {method.charAt(0) + method.slice(1).toLowerCase()}
+    </span>
+  );
+}
+
+function RejectModal({
+  disposal,
+  onClose,
+}: {
+  disposal: DisposalRequest;
+  onClose: () => void;
+}) {
+  const [reason, setReason] = useState("");
+  const { mutate, isPending } = useRejectDisposal(
+    disposal.assetId,
+    disposal.id,
+    { onSuccess: onClose },
+  );
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
+        <h3 className="text-base font-semibold text-gray-900 mb-4">
+          Reject Disposal Request
+        </h3>
+        <div className="mb-4">
+          <label className="block text-xs font-medium text-gray-600 mb-1">
+            Rejection Reason
+          </label>
+          <textarea
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
+            rows={3}
+            placeholder="Provide a reason for rejection..."
+            value={reason}
+            onChange={(e) => setReason(e.target.value)}
+          />
+        </div>
+        <div className="flex gap-3">
+          <Button variant="outline" className="flex-1" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            className="flex-1"
+            loading={isPending}
+            disabled={!reason.trim()}
+            onClick={() => mutate({ reason: reason.trim() })}
+          >
+            Reject Request
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function DisposalsPage() {
+  const router = useRouter();
+  const { data: disposals = [], isLoading } = usePendingDisposals();
+  const [rejectTarget, setRejectTarget] = useState<DisposalRequest | null>(
+    null,
+  );
+  const [approveTarget, setApproveTarget] = useState<DisposalRequest | null>(
+    null,
+  );
+
+  const { mutate: approveDisposal, isPending: approving } = useApproveDisposal(
+    approveTarget?.assetId ?? "",
+    approveTarget?.id ?? "",
+    {
+      onSuccess: () => setApproveTarget(null),
+    },
+  );
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        <div className="animate-pulse bg-gray-100 rounded-md h-8 w-48" />
+        <div className="animate-pulse bg-gray-100 rounded-md h-64 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">
+          Asset Disposal Requests
+        </h1>
+        <p className="text-sm text-gray-500 mt-1">
+          Review and approve asset retirement requests
+        </p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-orange-100 rounded-lg">
+              <Clock className="text-orange-600" size={20} />
+            </div>
+            <div>
+              <p className="text-xs text-gray-500">Pending Requests</p>
+              <p className="text-2xl font-bold text-gray-900">
+                {disposals.length}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* List */}
+      {disposals.length === 0 ? (
+        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
+          <Package className="mx-auto text-gray-300 mb-3" size={48} />
+          <h3 className="text-base font-semibold text-gray-900 mb-1">
+            No Pending Requests
+          </h3>
+          <p className="text-sm text-gray-500">
+            All disposal requests have been processed.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {disposals.map((disposal) => (
+            <div
+              key={disposal.id}
+              className="bg-white rounded-xl border border-gray-200 p-5"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-2 flex-wrap">
+                    <DisposalMethodBadge method={disposal.method} />
+                    <span className="text-xs text-gray-400">
+                      {format(
+                        new Date(disposal.requestedAt),
+                        "MMM d, yyyy · h:mm a",
+                      )}
+                    </span>
+                  </div>
+                  <h3 className="text-base font-semibold text-gray-900 mb-1">
+                    {disposal.asset?.name ?? "Unknown Asset"}
+                  </h3>
+                  <p className="text-xs text-gray-500 mb-2">
+                    Asset ID: {disposal.asset?.assetId ?? disposal.assetId}
+                  </p>
+                  <div className="flex items-start gap-2 text-sm text-gray-600">
+                    <FileText size={14} className="mt-0.5 shrink-0" />
+                    <p className="flex-1">{disposal.reason}</p>
+                  </div>
+                  <div className="flex items-center gap-4 mt-3 text-xs text-gray-500">
+                    <div className="flex items-center gap-1">
+                      <span className="font-medium">Requested by:</span>
+                      <span>{disposal.requestedBy.name}</span>
+                    </div>
+                    {disposal.method === "SOLD" && disposal.salePrice && (
+                      <div className="flex items-center gap-1">
+                        <DollarSign size={12} />
+                        <span className="font-medium">Sale Price:</span>
+                        <span className="text-green-600">
+                          ${disposal.salePrice.toLocaleString()}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className="flex gap-2 shrink-0">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-red-600 border-red-200 hover:bg-red-50"
+                    onClick={() => setRejectTarget(disposal)}
+                  >
+                    <XCircle size={14} className="mr-1.5" />
+                    Reject
+                  </Button>
+                  <Button
+                    size="sm"
+                    className="bg-green-600 hover:bg-green-700 text-white"
+                    loading={approving && approveTarget?.id === disposal.id}
+                    onClick={() => setApproveTarget(disposal)}
+                  >
+                    <CheckCircle size={14} className="mr-1.5" />
+                    Approve
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => router.push(`/assets/${disposal.assetId}`)}
+                  >
+                    <ExternalLink size={14} className="mr-1.5" />
+                    View Asset
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Approve Confirm Dialog */}
+      {approveTarget && (
+        <ConfirmDialog
+          title="Approve Disposal Request"
+          message={`This will retire asset "${approveTarget.asset?.name}" and mark it as RETIRED. This action cannot be undone.`}
+          confirmLabel="Approve"
+          loading={approving}
+          onConfirm={() => approveDisposal()}
+          onCancel={() => setApproveTarget(null)}
+        />
+      )}
+
+      {/* Reject Modal */}
+      {rejectTarget && (
+        <RejectModal
+          disposal={rejectTarget}
+          onClose={() => setRejectTarget(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(dashboard)/check-in-out/page.tsx b/frontend/app/(dashboard)/check-in-out/page.tsx
index 0052a4451..f89338c63 100644
--- a/frontend/app/(dashboard)/check-in-out/page.tsx
+++ b/frontend/app/(dashboard)/check-in-out/page.tsx
@@ -1,46 +1,130 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Plus, ArrowDownCircle, ArrowUpCircle } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Plus, ArrowDownCircle, ArrowUpCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-interface BorrowRecord { id: string; asset: string; borrowedBy: string; checkedOut: string; dueDate: string; returned: boolean }
+interface BorrowRecord {
+  id: string;
+  asset: string;
+  borrowedBy: string;
+  checkedOut: string;
+  dueDate: string;
+  returned: boolean;
+}
 
 const MOCK: BorrowRecord[] = [
-  { id:'1', asset:'Dell Laptop #7', borrowedBy:'Emma W.', checkedOut:'2024-01-15', dueDate:'2024-01-22', returned:false },
-  { id:'2', asset:'Canon Camera', borrowedBy:'Liam T.', checkedOut:'2024-01-10', dueDate:'2024-01-17', returned:true },
-  { id:'3', asset:'iPad Pro', borrowedBy:'Sophia R.', checkedOut:'2024-01-20', dueDate:'2024-01-27', returned:false },
+  {
+    id: "1",
+    asset: "Dell Laptop #7",
+    borrowedBy: "Emma W.",
+    checkedOut: "2024-01-15",
+    dueDate: "2024-01-22",
+    returned: false,
+  },
+  {
+    id: "2",
+    asset: "Canon Camera",
+    borrowedBy: "Liam T.",
+    checkedOut: "2024-01-10",
+    dueDate: "2024-01-17",
+    returned: true,
+  },
+  {
+    id: "3",
+    asset: "iPad Pro",
+    borrowedBy: "Sophia R.",
+    checkedOut: "2024-01-20",
+    dueDate: "2024-01-27",
+    returned: false,
+  },
 ];
 
 export default function CheckInOutPage() {
   const [records, setRecords] = useState<BorrowRecord[]>(MOCK);
 
-  const markReturned = (id: string) => setRecords(prev => prev.map(r => r.id === id ? { ...r, returned: true } : r));
+  const markReturned = (id: string) =>
+    setRecords((prev) =>
+      prev.map((r) => (r.id === id ? { ...r, returned: true } : r)),
+    );
 
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Check-in / Check-out</h1><p className="text-sm text-gray-500 mt-1">Borrow assets with due dates and return flow</p></div>
-        <Button><Plus size={16} className="mr-1.5" />Check Out Asset</Button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">
+            Check-in / Check-out
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Borrow assets with due dates and return flow
+          </p>
+        </div>
+        <Button>
+          <Plus size={16} className="mr-1.5" />
+          Check Out Asset
+        </Button>
       </div>
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
-          <thead><tr className="border-b border-gray-200 bg-gray-50">{["Asset","Borrowed By","Checked Out","Due Date","Status","Action"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}</tr></thead>
+          <thead>
+            <tr className="border-b border-gray-200 bg-gray-50">
+              {[
+                "Asset",
+                "Borrowed By",
+                "Checked Out",
+                "Due Date",
+                "Status",
+                "Action",
+              ].map((h) => (
+                <th
+                  key={h}
+                  className="text-left px-4 py-3 font-medium text-gray-500"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
           <tbody>
-            {records.map(r => {
+            {records.map((r) => {
               const overdue = !r.returned && new Date(r.dueDate) < new Date();
               return (
-                <tr key={r.id} className="border-b border-gray-100 hover:bg-gray-50">
-                  <td className="px-4 py-3 font-medium text-gray-900">{r.asset}</td>
+                <tr
+                  key={r.id}
+                  className="border-b border-gray-100 hover:bg-gray-50"
+                >
+                  <td className="px-4 py-3 font-medium text-gray-900">
+                    {r.asset}
+                  </td>
                   <td className="px-4 py-3 text-gray-600">{r.borrowedBy}</td>
                   <td className="px-4 py-3 text-gray-500">{r.checkedOut}</td>
-                  <td className={px-4 py-3 }>{r.dueDate}{overdue && ' (Overdue)'}</td>
                   <td className="px-4 py-3">
-                    {r.returned
-                      ? <span className="flex items-center gap-1 text-green-600 text-xs"><ArrowDownCircle size={13}/>Returned</span>
-                      : <span className="flex items-center gap-1 text-blue-600 text-xs"><ArrowUpCircle size={13}/>Out</span>}
+                    {r.dueDate}
+                    {overdue && " (Overdue)"}
+                  </td>
+                  <td className="px-4 py-3">
+                    {r.returned ? (
+                      <span className="flex items-center gap-1 text-green-600 text-xs">
+                        <ArrowDownCircle size={13} />
+                        Returned
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-1 text-blue-600 text-xs">
+                        <ArrowUpCircle size={13} />
+                        Out
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    {!r.returned && (
+                      <button
+                        onClick={() => markReturned(r.id)}
+                        className="text-xs text-blue-600 hover:underline"
+                      >
+                        Mark Returned
+                      </button>
+                    )}
                   </td>
-                  <td className="px-4 py-3">{!r.returned && <button onClick={() => markReturned(r.id)} className="text-xs text-blue-600 hover:underline">Mark Returned</button>}</td>
                 </tr>
               );
             })}
@@ -49,4 +133,4 @@ export default function CheckInOutPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/cmdb/page.tsx b/frontend/app/(dashboard)/cmdb/page.tsx
index 8c3ef56ce..33ade1cb6 100644
--- a/frontend/app/(dashboard)/cmdb/page.tsx
+++ b/frontend/app/(dashboard)/cmdb/page.tsx
@@ -1,42 +1,66 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Server, Monitor, Wifi, Database } from 'lucide-react';
+import { useState } from "react";
+import { Server, Monitor, Wifi, Database } from "lucide-react";
 
-interface AssetNode { id: string; name: string; type: string; dependencies: string[] }
+interface AssetNode {
+  id: string;
+  name: string;
+  type: string;
+  dependencies: string[];
+}
 
 const NODES: AssetNode[] = [
-  { id:'1', name:'Web Server', type:'server', dependencies:['3','4'] },
-  { id:'2', name:'App Server', type:'server', dependencies:['3','4'] },
-  { id:'3', name:'Database Server', type:'database', dependencies:[] },
-  { id:'4', name:'Network Switch A', type:'network', dependencies:[] },
-  { id:'5', name:'Dev Workstation', type:'computer', dependencies:['4'] },
+  { id: "1", name: "Web Server", type: "server", dependencies: ["3", "4"] },
+  { id: "2", name: "App Server", type: "server", dependencies: ["3", "4"] },
+  { id: "3", name: "Database Server", type: "database", dependencies: [] },
+  { id: "4", name: "Network Switch A", type: "network", dependencies: [] },
+  { id: "5", name: "Dev Workstation", type: "computer", dependencies: ["4"] },
 ];
 
 const TYPE_ICON: Record<string, React.ReactNode> = {
-  server: <Server size={16} className="text-blue-500"/>,
-  database: <Database size={16} className="text-purple-500"/>,
-  network: <Wifi size={16} className="text-green-500"/>,
-  computer: <Monitor size={16} className="text-gray-500"/>,
+  server: <Server size={16} className="text-blue-500" />,
+  database: <Database size={16} className="text-purple-500" />,
+  network: <Wifi size={16} className="text-green-500" />,
+  computer: <Monitor size={16} className="text-gray-500" />,
 };
 
 export default function CMDBPage() {
   const [selected, setSelected] = useState<string | null>(null);
-  const selectedNode = NODES.find(n => n.id === selected);
-  const dependsOn = selectedNode ? NODES.filter(n => selectedNode.dependencies.includes(n.id)) : [];
-  const dependents = selected ? NODES.filter(n => n.dependencies.includes(selected)) : [];
+  const selectedNode = NODES.find((n) => n.id === selected);
+  const dependsOn = selectedNode
+    ? NODES.filter((n) => selectedNode.dependencies.includes(n.id))
+    : [];
+  const dependents = selected
+    ? NODES.filter((n) => n.dependencies.includes(selected))
+    : [];
 
   return (
     <div>
-      <div className="mb-6"><h1 className="text-2xl font-bold text-gray-900">Asset Dependencies (CMDB)</h1><p className="text-sm text-gray-500 mt-1">Link assets and visualise dependencies</p></div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">
+          Asset Dependencies (CMDB)
+        </h1>
+        <p className="text-sm text-gray-500 mt-1">
+          Link assets and visualise dependencies
+        </p>
+      </div>
       <div className="grid grid-cols-3 gap-4">
         <div className="col-span-1 bg-white rounded-xl border border-gray-200 overflow-hidden">
-          <div className="px-4 py-3 border-b border-gray-100 text-sm font-semibold text-gray-700">Assets</div>
-          {NODES.map(n => (
-            <button key={n.id} onClick={() => setSelected(n.id)}
-              className={w-full text-left px-4 py-3 flex items-center gap-2 border-b border-gray-100 hover:bg-gray-50 }>
+          <div className="px-4 py-3 border-b border-gray-100 text-sm font-semibold text-gray-700">
+            Assets
+          </div>
+          {NODES.map((n) => (
+            <button
+              key={n.id}
+              onClick={() => setSelected(n.id)}
+              className="w-full text-left px-4 py-3 flex items-center gap-2 border-b border-gray-100 hover:bg-gray-50"
+            >
               {TYPE_ICON[n.type]}
-              <div><p className="text-sm font-medium text-gray-900">{n.name}</p><p className="text-xs text-gray-400 capitalize">{n.type}</p></div>
+              <div>
+                <p className="text-sm font-medium text-gray-900">{n.name}</p>
+                <p className="text-xs text-gray-400 capitalize">{n.type}</p>
+              </div>
             </button>
           ))}
         </div>
@@ -44,21 +68,54 @@ export default function CMDBPage() {
           {selectedNode ? (
             <>
               <div className="bg-white rounded-xl border border-gray-200 p-5">
-                <div className="flex items-center gap-2 mb-1">{TYPE_ICON[selectedNode.type]}<h2 className="text-base font-semibold text-gray-900">{selectedNode.name}</h2></div>
-                <p className="text-xs text-gray-400 capitalize">{selectedNode.type}</p>
+                <div className="flex items-center gap-2 mb-1">
+                  {TYPE_ICON[selectedNode.type]}
+                  <h2 className="text-base font-semibold text-gray-900">
+                    {selectedNode.name}
+                  </h2>
+                </div>
+                <p className="text-xs text-gray-400 capitalize">
+                  {selectedNode.type}
+                </p>
               </div>
               <div className="bg-white rounded-xl border border-gray-200 p-5">
-                <h3 className="text-sm font-semibold text-gray-700 mb-3">Depends On</h3>
-                {dependsOn.length === 0 ? <p className="text-sm text-gray-400">No dependencies</p> : dependsOn.map(d=><div key={d.id} className="flex items-center gap-2 py-1">{TYPE_ICON[d.type]}<span className="text-sm text-gray-700">{d.name}</span></div>)}
+                <h3 className="text-sm font-semibold text-gray-700 mb-3">
+                  Depends On
+                </h3>
+                {dependsOn.length === 0 ? (
+                  <p className="text-sm text-gray-400">No dependencies</p>
+                ) : (
+                  dependsOn.map((d) => (
+                    <div key={d.id} className="flex items-center gap-2 py-1">
+                      {TYPE_ICON[d.type]}
+                      <span className="text-sm text-gray-700">{d.name}</span>
+                    </div>
+                  ))
+                )}
               </div>
               <div className="bg-white rounded-xl border border-gray-200 p-5">
-                <h3 className="text-sm font-semibold text-gray-700 mb-3">Used By</h3>
-                {dependents.length === 0 ? <p className="text-sm text-gray-400">No dependents</p> : dependents.map(d=><div key={d.id} className="flex items-center gap-2 py-1">{TYPE_ICON[d.type]}<span className="text-sm text-gray-700">{d.name}</span></div>)}
+                <h3 className="text-sm font-semibold text-gray-700 mb-3">
+                  Used By
+                </h3>
+                {dependents.length === 0 ? (
+                  <p className="text-sm text-gray-400">No dependents</p>
+                ) : (
+                  dependents.map((d) => (
+                    <div key={d.id} className="flex items-center gap-2 py-1">
+                      {TYPE_ICON[d.type]}
+                      <span className="text-sm text-gray-700">{d.name}</span>
+                    </div>
+                  ))
+                )}
               </div>
             </>
-          ) : <div className="bg-white rounded-xl border border-gray-200 p-10 text-center text-sm text-gray-400">Select an asset to view its dependencies</div>}
+          ) : (
+            <div className="bg-white rounded-xl border border-gray-200 p-10 text-center text-sm text-gray-400">
+              Select an asset to view its dependencies
+            </div>
+          )}
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/contracts/page.tsx b/frontend/app/(dashboard)/contracts/page.tsx
new file mode 100644
index 000000000..ca18e8fac
--- /dev/null
+++ b/frontend/app/(dashboard)/contracts/page.tsx
@@ -0,0 +1,322 @@
+// frontend/app/(dashboard)/contracts/page.tsx
+"use client";
+
+import { useState, useMemo } from "react";
+import { Plus, Search, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ContractStatus, ContractType } from "@/lib/query/types/contract";
+import { ContractStatusBadge } from "@/components/contracts/status-badge";
+import { ContractTypeBadge } from "@/components/contracts/type-badge";
+import { CreateContractModal } from "@/components/contracts/create-contract-modal";
+import { ContractDetailDrawer } from "@/components/contracts/contract-detail-drawer";
+import { useContracts } from "@/lib/query/hooks/useContracts";
+
+const TABS = [
+  { key: "all", label: "All" },
+  { key: ContractStatus.ACTIVE, label: "Active" },
+  { key: "expiring", label: "Expiring Soon" },
+  { key: ContractStatus.EXPIRED, label: "Expired" },
+];
+
+export default function ContractsPage() {
+  const [activeTab, setActiveTab] = useState("all");
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [selectedContract, setSelectedContract] = useState<any>(null);
+
+  const statusFilter = useMemo(() => {
+    if (activeTab === "all" || activeTab === "expiring") return undefined;
+    return activeTab as ContractStatus;
+  }, [activeTab]);
+
+  const { data, isLoading, refetch } = useContracts({
+    search: search || undefined,
+    status: statusFilter,
+    page,
+    limit: 20,
+  });
+
+  const contracts = data?.data ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.ceil(total / 20);
+
+  // Filter expiring contracts (within 30 days)
+  const expiringContracts = useMemo(() => {
+    const now = new Date();
+    return contracts.filter((contract) => {
+      if (!contract.endDate) return false;
+      const endDate = new Date(contract.endDate);
+      const diffDays = Math.ceil(
+        (endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+      );
+      return diffDays >= 0 && diffDays <= 30;
+    });
+  }, [contracts]);
+
+  const displayContracts =
+    activeTab === "expiring" ? expiringContracts : contracts;
+
+  const getDaysUntilExpiry = (endDate: string | null) => {
+    if (!endDate) return null;
+    const end = new Date(endDate);
+    const now = new Date();
+    return Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+  };
+
+  const formatDate = (dateStr: string | null) => {
+    if (!dateStr) return "—";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  const formatCurrency = (value: number | null) => {
+    if (!value) return "—";
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value);
+  };
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Contracts</h1>
+          <p className="text-sm text-gray-500 mt-1">
+            {total > 0
+              ? `${total} contract${total !== 1 ? "s" : ""} managed`
+              : "No contracts yet"}
+          </p>
+        </div>
+        <div className="flex gap-3">
+          <Button variant="outline">
+            <Upload size={16} className="mr-1.5" />
+            Upload Document
+          </Button>
+          <Button onClick={() => setShowCreateModal(true)}>
+            <Plus size={16} className="mr-1.5" />
+            New Contract
+          </Button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 mb-4 bg-gray-100 p-1 rounded-lg w-fit">
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => {
+              setActiveTab(tab.key);
+              setPage(1);
+            }}
+            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+              activeTab === tab.key
+                ? "bg-white text-gray-900 shadow-sm"
+                : "text-gray-600 hover:text-gray-900"
+            }`}
+          >
+            {tab.label}
+            {tab.key === "expiring" && expiringContracts.length > 0 && (
+              <span className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-red-500 rounded-full">
+                {expiringContracts.length}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Search */}
+      <div className="flex gap-3 mb-4">
+        <div className="relative flex-1 max-w-sm">
+          <Search
+            size={16}
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+          />
+          <input
+            type="text"
+            placeholder="Search by title, vendor, or contract ID..."
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900"
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-gray-200 bg-gray-50">
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  Contract ID
+                </th>
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  Title
+                </th>
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  Vendor
+                </th>
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  Type
+                </th>
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  Value
+                </th>
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  Start Date
+                </th>
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  End Date
+                </th>
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  Status
+                </th>
+                <th className="text-left px-4 py-3 font-medium text-gray-500">
+                  Days Until Expiry
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {isLoading ? (
+                <tr>
+                  <td colSpan={9} className="text-center py-12 text-gray-400">
+                    Loading contracts...
+                  </td>
+                </tr>
+              ) : displayContracts.length === 0 ? (
+                <tr>
+                  <td colSpan={9} className="text-center py-12 text-gray-400">
+                    {search || activeTab !== "all"
+                      ? "No contracts match your filters."
+                      : 'No contracts yet. Click "New Contract" to get started.'}
+                  </td>
+                </tr>
+              ) : (
+                displayContracts.map((contract) => {
+                  const daysUntilExpiry = getDaysUntilExpiry(contract.endDate);
+                  const isExpiringSoon =
+                    daysUntilExpiry !== null &&
+                    daysUntilExpiry >= 0 &&
+                    daysUntilExpiry <= 30;
+
+                  return (
+                    <tr
+                      key={contract.id}
+                      onClick={() => setSelectedContract(contract)}
+                      className={`border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${
+                        isExpiringSoon ? "bg-yellow-50 hover:bg-yellow-100" : ""
+                      }`}
+                    >
+                      <td className="px-4 py-3 font-mono text-xs text-gray-500">
+                        {contract.contractId}
+                      </td>
+                      <td className="px-4 py-3 font-medium text-gray-900">
+                        {contract.title}
+                      </td>
+                      <td className="px-4 py-3 text-gray-600">
+                        {contract.vendor}
+                      </td>
+                      <td className="px-4 py-3">
+                        {contract.contractType ? (
+                          <ContractTypeBadge type={contract.contractType} />
+                        ) : (
+                          <span className="text-gray-400">—</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-gray-600">
+                        {formatCurrency(contract.value)}
+                      </td>
+                      <td className="px-4 py-3 text-gray-600">
+                        {formatDate(contract.startDate)}
+                      </td>
+                      <td className="px-4 py-3 text-gray-600">
+                        {formatDate(contract.endDate)}
+                      </td>
+                      <td className="px-4 py-3">
+                        <ContractStatusBadge status={contract.status} />
+                      </td>
+                      <td className="px-4 py-3">
+                        {daysUntilExpiry !== null ? (
+                          daysUntilExpiry < 0 ? (
+                            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
+                              Expired
+                            </span>
+                          ) : daysUntilExpiry <= 30 ? (
+                            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">
+                              {daysUntilExpiry} days
+                            </span>
+                          ) : (
+                            <span className="text-gray-600">
+                              {daysUntilExpiry} days
+                            </span>
+                          )
+                        ) : (
+                          <span className="text-gray-400">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200">
+            <p className="text-sm text-gray-500">
+              Page {page} of {totalPages} — {total} total
+            </p>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={page === 1}
+                onClick={() => setPage((p) => p - 1)}
+              >
+                Previous
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={page === totalPages}
+                onClick={() => setPage((p) => p + 1)}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Create Modal */}
+      {showCreateModal && (
+        <CreateContractModal
+          onClose={() => setShowCreateModal(false)}
+          onSuccess={() => refetch()}
+        />
+      )}
+
+      {/* Detail Drawer */}
+      {selectedContract && (
+        <ContractDetailDrawer
+          contract={selectedContract}
+          onClose={() => setSelectedContract(null)}
+          onUpdate={() => refetch()}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(dashboard)/departments/page.tsx b/frontend/app/(dashboard)/departments/page.tsx
index 9e0f9bbf9..3b21aa778 100644
--- a/frontend/app/(dashboard)/departments/page.tsx
+++ b/frontend/app/(dashboard)/departments/page.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Plus, Trash2, Building2, Tag, Package } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { useState } from "react";
+import { Plus, Trash2, Building2, Tag, Package } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import {
   useDepartmentsList,
   useCreateDepartment,
@@ -12,35 +12,47 @@ import {
   useCategories,
   useCreateCategory,
   useDeleteCategory,
-} from '@/lib/query/hooks/useAssets';
-import { DepartmentWithCount, CategoryWithCount } from '@/lib/api/assets';
+} from "@/lib/query/hooks/useAssets";
+import { DepartmentWithCount, CategoryWithCount } from "@/lib/api/assets";
 
-type Tab = 'departments' | 'categories';
+type Tab = "departments" | "categories";
 
 export default function DepartmentsPage() {
-  const [tab, setTab] = useState<Tab>('departments');
+  const [tab, setTab] = useState<Tab>("departments");
 
   return (
     <div>
       {/* Header */}
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-gray-900">Organisation</h1>
-        <p className="text-sm text-gray-500 mt-1">Manage departments and asset categories</p>
+        <p className="text-sm text-gray-500 mt-1">
+          Manage departments and asset categories
+        </p>
       </div>
 
       {/* Tabs */}
       <div className="flex gap-1 mb-6 border-b border-gray-200">
-        {([
-          { key: 'departments' as Tab, label: 'Departments', icon: <Building2 size={15} /> },
-          { key: 'categories' as Tab, label: 'Categories', icon: <Tag size={15} /> },
-        ] as const).map(({ key, label, icon }) => (
+        {(
+          [
+            {
+              key: "departments" as Tab,
+              label: "Departments",
+              icon: <Building2 size={15} />,
+            },
+            {
+              key: "categories" as Tab,
+              label: "Categories",
+              icon: <Tag size={15} />,
+            },
+          ] as const
+        ).map(({ key, label, icon }) => (
           <button
             key={key}
             onClick={() => setTab(key)}
             className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${
               tab === key
-                ? 'border-gray-900 text-gray-900'
-                : 'border-transparent text-gray-500 hover:text-gray-700'
+                ? "border-gray-900 text-gray-900"
+                : "border-transparent text-gray-500 hover:text-gray-700"
             }`}
           >
             {icon}
@@ -49,8 +61,8 @@ export default function DepartmentsPage() {
         ))}
       </div>
 
-      {tab === 'departments' && <DepartmentsTab />}
-      {tab === 'categories' && <CategoriesTab />}
+      {tab === "departments" && <DepartmentsTab />}
+      {tab === "categories" && <CategoriesTab />}
     </div>
   );
 }
@@ -63,22 +75,31 @@ function DepartmentsTab() {
   const deleteDept = useDeleteDepartment();
 
   const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [formError, setFormError] = useState('');
-  const [deleteTarget, setDeleteTarget] = useState<DepartmentWithCount | null>(null);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [formError, setFormError] = useState("");
+  const [deleteTarget, setDeleteTarget] = useState<DepartmentWithCount | null>(
+    null,
+  );
 
   const handleCreate = async () => {
-    if (!name.trim()) { setFormError('Name is required'); return; }
-    setFormError('');
+    if (!name.trim()) {
+      setFormError("Name is required");
+      return;
+    }
+    setFormError("");
     try {
-      await createDept.mutateAsync({ name: name.trim(), description: description.trim() || undefined });
-      setName('');
-      setDescription('');
+      await createDept.mutateAsync({
+        name: name.trim(),
+        description: description.trim() || undefined,
+      });
+      setName("");
+      setDescription("");
       setShowForm(false);
     } catch (err: unknown) {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      setFormError(msg || 'Failed to create department.');
+      const msg = (err as { response?: { data?: { message?: string } } })
+        ?.response?.data?.message;
+      setFormError(msg || "Failed to create department.");
     }
   };
 
@@ -92,9 +113,15 @@ function DepartmentsTab() {
     <div>
       <div className="flex items-center justify-between mb-4">
         <p className="text-sm text-gray-500">
-          {departments.length} department{departments.length !== 1 ? 's' : ''}
+          {departments.length} department{departments.length !== 1 ? "s" : ""}
         </p>
-        <Button size="sm" onClick={() => { setShowForm(true); setFormError(''); }}>
+        <Button
+          size="sm"
+          onClick={() => {
+            setShowForm(true);
+            setFormError("");
+          }}
+        >
           <Plus size={15} className="mr-1" />
           Add Department
         </Button>
@@ -103,7 +130,9 @@ function DepartmentsTab() {
       {/* Inline create form */}
       {showForm && (
         <div className="bg-white border border-gray-200 rounded-xl p-4 mb-4">
-          <h3 className="text-sm font-semibold text-gray-900 mb-3">New Department</h3>
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">
+            New Department
+          </h3>
           <div className="space-y-3">
             <Input
               id="dept-name"
@@ -111,7 +140,7 @@ function DepartmentsTab() {
               placeholder="e.g. Engineering"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+              onKeyDown={(e) => e.key === "Enter" && handleCreate()}
             />
             <Input
               id="dept-desc"
@@ -122,10 +151,22 @@ function DepartmentsTab() {
             />
             {formError && <p className="text-xs text-red-500">{formError}</p>}
             <div className="flex gap-2 pt-1">
-              <Button variant="outline" size="sm" onClick={() => { setShowForm(false); setName(''); setDescription(''); }}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  setShowForm(false);
+                  setName("");
+                  setDescription("");
+                }}
+              >
                 Cancel
               </Button>
-              <Button size="sm" loading={createDept.isPending} onClick={handleCreate}>
+              <Button
+                size="sm"
+                loading={createDept.isPending}
+                onClick={handleCreate}
+              >
                 Create Department
               </Button>
             </div>
@@ -135,7 +176,9 @@ function DepartmentsTab() {
 
       {/* List */}
       {isLoading ? (
-        <div className="text-sm text-gray-400 text-center py-12">Loading departments...</div>
+        <div className="text-sm text-gray-400 text-center py-12">
+          Loading departments...
+        </div>
       ) : departments.length === 0 ? (
         <EmptyState
           icon={<Building2 size={32} className="text-gray-300" />}
@@ -178,22 +221,31 @@ function CategoriesTab() {
   const deleteCat = useDeleteCategory();
 
   const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [formError, setFormError] = useState('');
-  const [deleteTarget, setDeleteTarget] = useState<CategoryWithCount | null>(null);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [formError, setFormError] = useState("");
+  const [deleteTarget, setDeleteTarget] = useState<CategoryWithCount | null>(
+    null,
+  );
 
   const handleCreate = async () => {
-    if (!name.trim()) { setFormError('Name is required'); return; }
-    setFormError('');
+    if (!name.trim()) {
+      setFormError("Name is required");
+      return;
+    }
+    setFormError("");
     try {
-      await createCat.mutateAsync({ name: name.trim(), description: description.trim() || undefined });
-      setName('');
-      setDescription('');
+      await createCat.mutateAsync({
+        name: name.trim(),
+        description: description.trim() || undefined,
+      });
+      setName("");
+      setDescription("");
       setShowForm(false);
     } catch (err: unknown) {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      setFormError(msg || 'Failed to create category.');
+      const msg = (err as { response?: { data?: { message?: string } } })
+        ?.response?.data?.message;
+      setFormError(msg || "Failed to create category.");
     }
   };
 
@@ -207,9 +259,15 @@ function CategoriesTab() {
     <div>
       <div className="flex items-center justify-between mb-4">
         <p className="text-sm text-gray-500">
-          {categories.length} categor{categories.length !== 1 ? 'ies' : 'y'}
+          {categories.length} categor{categories.length !== 1 ? "ies" : "y"}
         </p>
-        <Button size="sm" onClick={() => { setShowForm(true); setFormError(''); }}>
+        <Button
+          size="sm"
+          onClick={() => {
+            setShowForm(true);
+            setFormError("");
+          }}
+        >
           <Plus size={15} className="mr-1" />
           Add Category
         </Button>
@@ -218,7 +276,9 @@ function CategoriesTab() {
       {/* Inline create form */}
       {showForm && (
         <div className="bg-white border border-gray-200 rounded-xl p-4 mb-4">
-          <h3 className="text-sm font-semibold text-gray-900 mb-3">New Category</h3>
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">
+            New Category
+          </h3>
           <div className="space-y-3">
             <Input
               id="cat-name"
@@ -226,7 +286,7 @@ function CategoriesTab() {
               placeholder="e.g. Laptops"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+              onKeyDown={(e) => e.key === "Enter" && handleCreate()}
             />
             <Input
               id="cat-desc"
@@ -237,10 +297,22 @@ function CategoriesTab() {
             />
             {formError && <p className="text-xs text-red-500">{formError}</p>}
             <div className="flex gap-2 pt-1">
-              <Button variant="outline" size="sm" onClick={() => { setShowForm(false); setName(''); setDescription(''); }}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  setShowForm(false);
+                  setName("");
+                  setDescription("");
+                }}
+              >
                 Cancel
               </Button>
-              <Button size="sm" loading={createCat.isPending} onClick={handleCreate}>
+              <Button
+                size="sm"
+                loading={createCat.isPending}
+                onClick={handleCreate}
+              >
                 Create Category
               </Button>
             </div>
@@ -250,7 +322,9 @@ function CategoriesTab() {
 
       {/* List */}
       {isLoading ? (
-        <div className="text-sm text-gray-400 text-center py-12">Loading categories...</div>
+        <div className="text-sm text-gray-400 text-center py-12">
+          Loading categories...
+        </div>
       ) : categories.length === 0 ? (
         <EmptyState
           icon={<Tag size={32} className="text-gray-300" />}
@@ -309,7 +383,8 @@ function EntityCard({
         )}
         <div className="flex items-center gap-1 mt-2 text-xs text-gray-400">
           <Package size={12} />
-          {count} {countLabel}{count !== 1 ? 's' : ''}
+          {count} {countLabel}
+          {count !== 1 ? "s" : ""}
         </div>
       </div>
       <button
@@ -323,7 +398,15 @@ function EntityCard({
   );
 }
 
-function EmptyState({ icon, title, message }: { icon: React.ReactNode; title: string; message: string }) {
+function EmptyState({
+  icon,
+  title,
+  message,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  message: string;
+}) {
   return (
     <div className="text-center py-16 bg-white rounded-xl border border-gray-200">
       <div className="flex justify-center mb-3">{icon}</div>
diff --git a/frontend/app/(dashboard)/developer/page.tsx b/frontend/app/(dashboard)/developer/page.tsx
index 5709c1cbb..a9e04655a 100644
--- a/frontend/app/(dashboard)/developer/page.tsx
+++ b/frontend/app/(dashboard)/developer/page.tsx
@@ -1,18 +1,46 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Plus, Copy, Trash2, Eye, EyeOff, Webhook } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Plus, Copy, Trash2, Eye, EyeOff, Webhook } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-interface APIKey { id: string; name: string; key: string; created: string; lastUsed: string }
-interface WebhookConfig { id: string; url: string; events: string[]; active: boolean }
+interface APIKey {
+  id: string;
+  name: string;
+  key: string;
+  created: string;
+  lastUsed: string;
+}
+interface WebhookConfig {
+  id: string;
+  url: string;
+  events: string[];
+  active: boolean;
+}
 
 const MOCK_KEYS: APIKey[] = [
-  { id:'1', name:'Production App', key:'sk_live_xxxx...abc1', created:'2024-01-01', lastUsed:'2024-01-22' },
-  { id:'2', name:'Staging', key:'sk_test_xxxx...def2', created:'2024-01-10', lastUsed:'2024-01-20' },
+  {
+    id: "1",
+    name: "Production App",
+    key: "sk_live_xxxx...abc1",
+    created: "2024-01-01",
+    lastUsed: "2024-01-22",
+  },
+  {
+    id: "2",
+    name: "Staging",
+    key: "sk_test_xxxx...def2",
+    created: "2024-01-10",
+    lastUsed: "2024-01-20",
+  },
 ];
 const MOCK_HOOKS: WebhookConfig[] = [
-  { id:'1', url:'https://myapp.io/webhook', events:['asset.created','asset.updated'], active:true },
+  {
+    id: "1",
+    url: "https://myapp.io/webhook",
+    events: ["asset.created", "asset.updated"],
+    active: true,
+  },
 ];
 
 export default function DeveloperPortalPage() {
@@ -20,47 +48,109 @@ export default function DeveloperPortalPage() {
   const [hooks] = useState<WebhookConfig[]>(MOCK_HOOKS);
   const [revealed, setRevealed] = useState<Set<string>>(new Set());
 
-  const toggle = (id: string) => setRevealed(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });
+  const toggle = (id: string) =>
+    setRevealed((prev) => {
+      const s = new Set(prev);
+      s.has(id) ? s.delete(id) : s.add(id);
+      return s;
+    });
 
   return (
     <div>
-      <div className="mb-6"><h1 className="text-2xl font-bold text-gray-900">Developer Portal</h1><p className="text-sm text-gray-500 mt-1">API key management and webhook configuration</p></div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Developer Portal</h1>
+        <p className="text-sm text-gray-500 mt-1">
+          API key management and webhook configuration
+        </p>
+      </div>
       <div className="space-y-6">
         <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">API Keys</h2>
-            <Button size="sm"><Plus size={14} className="mr-1"/>New Key</Button>
+            <Button size="sm">
+              <Plus size={14} className="mr-1" />
+              New Key
+            </Button>
           </div>
           <table className="w-full text-sm">
-            <thead><tr className="border-b border-gray-200 bg-gray-50">{["Name","Key","Created","Last Used","Actions"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}</tr></thead>
-            <tbody>{keys.map(k=>(
-              <tr key={k.id} className="border-b border-gray-100 hover:bg-gray-50">
-                <td className="px-4 py-3 font-medium text-gray-900">{k.name}</td>
-                <td className="px-4 py-3 font-mono text-xs text-gray-600">{revealed.has(k.id) ? k.key : '••••••••••••••••'}</td>
-                <td className="px-4 py-3 text-gray-500">{k.created}</td>
-                <td className="px-4 py-3 text-gray-500">{k.lastUsed}</td>
-                <td className="px-4 py-3 flex items-center gap-2">
-                  <button onClick={() => toggle(k.id)} className="text-gray-400 hover:text-gray-700">{revealed.has(k.id) ? <EyeOff size={14}/> : <Eye size={14}/>}</button>
-                  <button className="text-gray-400 hover:text-gray-700"><Copy size={14}/></button>
-                  <button className="text-red-400 hover:text-red-600"><Trash2 size={14}/></button>
-                </td>
+            <thead>
+              <tr className="border-b border-gray-200 bg-gray-50">
+                {["Name", "Key", "Created", "Last Used", "Actions"].map((h) => (
+                  <th
+                    key={h}
+                    className="text-left px-4 py-3 font-medium text-gray-500"
+                  >
+                    {h}
+                  </th>
+                ))}
               </tr>
-            ))}</tbody>
+            </thead>
+            <tbody>
+              {keys.map((k) => (
+                <tr
+                  key={k.id}
+                  className="border-b border-gray-100 hover:bg-gray-50"
+                >
+                  <td className="px-4 py-3 font-medium text-gray-900">
+                    {k.name}
+                  </td>
+                  <td className="px-4 py-3 font-mono text-xs text-gray-600">
+                    {revealed.has(k.id) ? k.key : "••••••••••••••••"}
+                  </td>
+                  <td className="px-4 py-3 text-gray-500">{k.created}</td>
+                  <td className="px-4 py-3 text-gray-500">{k.lastUsed}</td>
+                  <td className="px-4 py-3 flex items-center gap-2">
+                    <button
+                      onClick={() => toggle(k.id)}
+                      className="text-gray-400 hover:text-gray-700"
+                    >
+                      {revealed.has(k.id) ? (
+                        <EyeOff size={14} />
+                      ) : (
+                        <Eye size={14} />
+                      )}
+                    </button>
+                    <button className="text-gray-400 hover:text-gray-700">
+                      <Copy size={14} />
+                    </button>
+                    <button className="text-red-400 hover:text-red-600">
+                      <Trash2 size={14} />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
           </table>
         </div>
         <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 flex items-center gap-2"><Webhook size={16}/>Webhooks</h2>
-            <Button size="sm"><Plus size={14} className="mr-1"/>Add Webhook</Button>
+            <h2 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
+              <Webhook size={16} />
+              Webhooks
+            </h2>
+            <Button size="sm">
+              <Plus size={14} className="mr-1" />
+              Add Webhook
+            </Button>
           </div>
-          {hooks.map(w=>(
-            <div key={w.id} className="px-5 py-4 border-b border-gray-100 flex items-start justify-between">
-              <div><p className="text-sm font-medium text-gray-900">{w.url}</p><p className="text-xs text-gray-500 mt-0.5">{w.events.join(', ')}</p></div>
-              <span className={px-2 py-0.5 rounded-full text-xs font-medium }>{w.active?'Active':'Inactive'}</span>
+          {hooks.map((w) => (
+            <div
+              key={w.id}
+              className="px-5 py-4 border-b border-gray-100 flex items-start justify-between"
+            >
+              <div>
+                <p className="text-sm font-medium text-gray-900">{w.url}</p>
+                <p className="text-xs text-gray-500 mt-0.5">
+                  {w.events.join(", ")}
+                </p>
+              </div>
+              <span className="px-2 py-0.5 rounded-full text-xs font-medium">
+                {w.active ? "Active" : "Inactive"}
+              </span>
             </div>
           ))}
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/import/page.tsx b/frontend/app/(dashboard)/import/page.tsx
index d1e5406fa..6a8105e86 100644
--- a/frontend/app/(dashboard)/import/page.tsx
+++ b/frontend/app/(dashboard)/import/page.tsx
@@ -1,96 +1,195 @@
-'use client';
+"use client";
 
-import { useState, useRef } from 'react';
-import { Upload, CheckCircle, ChevronRight } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState, useRef } from "react";
+import { Upload, CheckCircle, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-type Step = 'upload' | 'map' | 'preview' | 'confirm';
+type Step = "upload" | "map" | "preview" | "confirm";
 
-const ASSET_FIELDS = ['name','assetId','category','status','department','serialNumber','purchaseDate'];
-const SAMPLE_CSV_HEADERS = ['Asset Name','ID','Type','State','Team','Serial','Bought'];
-const SAMPLE_ROWS = [['Laptop A','AST-100','IT','ACTIVE','Engineering','SN-1001','2023-01-01'],['Printer B','AST-101','IT','ACTIVE','Admin','SN-1002','2023-06-15']];
+const ASSET_FIELDS = [
+  "name",
+  "assetId",
+  "category",
+  "status",
+  "department",
+  "serialNumber",
+  "purchaseDate",
+];
+const SAMPLE_CSV_HEADERS = [
+  "Asset Name",
+  "ID",
+  "Type",
+  "State",
+  "Team",
+  "Serial",
+  "Bought",
+];
+const SAMPLE_ROWS = [
+  [
+    "Laptop A",
+    "AST-100",
+    "IT",
+    "ACTIVE",
+    "Engineering",
+    "SN-1001",
+    "2023-01-01",
+  ],
+  ["Printer B", "AST-101", "IT", "ACTIVE", "Admin", "SN-1002", "2023-06-15"],
+];
 
-const STEPS: Step[] = ['upload','map','preview','confirm'];
+const STEPS: Step[] = ["upload", "map", "preview", "confirm"];
 
 export default function CSVImportPage() {
-  const [step, setStep] = useState<Step>('upload');
-  const [fileName, setFileName] = useState('');
+  const [step, setStep] = useState<Step>("upload");
+  const [fileName, setFileName] = useState("");
   const [mapping, setMapping] = useState<Record<string, string>>({});
   const fileRef = useRef<HTMLInputElement>(null);
 
   const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
-    if (file) { setFileName(file.name); setStep('map'); }
+    if (file) {
+      setFileName(file.name);
+      setStep("map");
+    }
   };
 
   const stepIdx = STEPS.indexOf(step);
 
   return (
     <div>
-      <div className="mb-6"><h1 className="text-2xl font-bold text-gray-900">Import Assets</h1><p className="text-sm text-gray-500 mt-1">CSV and Excel import wizard</p></div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Import Assets</h1>
+        <p className="text-sm text-gray-500 mt-1">
+          CSV and Excel import wizard
+        </p>
+      </div>
       <div className="flex items-center gap-2 mb-6">
         {STEPS.map((s, i) => (
           <div key={s} className="flex items-center gap-2">
-            <div className={lex items-center gap-1.5 text-sm }>
-              <span className={w-6 h-6 rounded-full flex items-center justify-center text-xs }>{i < stepIdx ? '✓' : i+1}</span>
+            <div className="flex items-center gap-1.5 text-sm">
+              <span className="w-6 h-6 rounded-full flex items-center justify-center text-xs">
+                {i < stepIdx ? "✓" : i + 1}
+              </span>
               {s.charAt(0).toUpperCase() + s.slice(1)}
             </div>
-            {i < STEPS.length-1 && <ChevronRight size={14} className="text-gray-300"/>}
+            {i < STEPS.length - 1 && (
+              <ChevronRight size={14} className="text-gray-300" />
+            )}
           </div>
         ))}
       </div>
 
-      {step === 'upload' && (
+      {step === "upload" && (
         <div className="bg-white rounded-xl border-2 border-dashed border-gray-300 p-12 text-center">
-          <Upload size={32} className="mx-auto text-gray-300 mb-3"/>
-          <p className="text-sm font-medium text-gray-700 mb-1">Drop your CSV or Excel file here</p>
+          <Upload size={32} className="mx-auto text-gray-300 mb-3" />
+          <p className="text-sm font-medium text-gray-700 mb-1">
+            Drop your CSV or Excel file here
+          </p>
           <p className="text-xs text-gray-400 mb-4">Supports .csv, .xlsx</p>
-          <Button variant="outline" onClick={() => fileRef.current?.click()}>Browse File</Button>
-          <input ref={fileRef} type="file" accept=".csv,.xlsx" className="hidden" onChange={handleFile}/>
+          <Button variant="outline" onClick={() => fileRef.current?.click()}>
+            Browse File
+          </Button>
+          <input
+            ref={fileRef}
+            type="file"
+            accept=".csv,.xlsx"
+            className="hidden"
+            onChange={handleFile}
+          />
         </div>
       )}
 
-      {step === 'map' && (
+      {step === "map" && (
         <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <h2 className="text-base font-semibold text-gray-900 mb-4">Map Columns — {fileName}</h2>
+          <h2 className="text-base font-semibold text-gray-900 mb-4">
+            Map Columns — {fileName}
+          </h2>
           <div className="space-y-3">
-            {SAMPLE_CSV_HEADERS.map(header => (
+            {SAMPLE_CSV_HEADERS.map((header) => (
               <div key={header} className="flex items-center gap-4">
                 <span className="text-sm text-gray-600 w-40">{header}</span>
                 <span className="text-gray-300">→</span>
-                <select value={mapping[header] ?? ''} onChange={e => setMapping(m => ({ ...m, [header]: e.target.value }))}
-                  className="text-sm border border-gray-300 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-gray-900">
+                <select
+                  value={mapping[header] ?? ""}
+                  onChange={(e) =>
+                    setMapping((m) => ({ ...m, [header]: e.target.value }))
+                  }
+                  className="text-sm border border-gray-300 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-gray-900"
+                >
                   <option value="">Skip</option>
-                  {ASSET_FIELDS.map(f => <option key={f} value={f}>{f}</option>)}
+                  {ASSET_FIELDS.map((f) => (
+                    <option key={f} value={f}>
+                      {f}
+                    </option>
+                  ))}
                 </select>
               </div>
             ))}
           </div>
-          <div className="mt-6 flex gap-3"><Button onClick={() => setStep('preview')}>Next: Preview</Button><Button variant="outline" onClick={() => setStep('upload')}>Back</Button></div>
+          <div className="mt-6 flex gap-3">
+            <Button onClick={() => setStep("preview")}>Next: Preview</Button>
+            <Button variant="outline" onClick={() => setStep("upload")}>
+              Back
+            </Button>
+          </div>
         </div>
       )}
 
-      {step === 'preview' && (
+      {step === "preview" && (
         <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
           <div className="px-5 py-3 border-b border-gray-100 flex justify-between items-center">
-            <span className="text-sm font-semibold text-gray-900">Preview — {SAMPLE_ROWS.length} rows</span>
-            <div className="flex gap-3"><Button onClick={() => setStep('confirm')}>Confirm Import</Button><Button variant="outline" onClick={() => setStep('map')}>Back</Button></div>
+            <span className="text-sm font-semibold text-gray-900">
+              Preview — {SAMPLE_ROWS.length} rows
+            </span>
+            <div className="flex gap-3">
+              <Button onClick={() => setStep("confirm")}>Confirm Import</Button>
+              <Button variant="outline" onClick={() => setStep("map")}>
+                Back
+              </Button>
+            </div>
           </div>
           <table className="w-full text-sm">
-            <thead><tr className="border-b border-gray-200 bg-gray-50">{SAMPLE_CSV_HEADERS.map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}</tr></thead>
-            <tbody>{SAMPLE_ROWS.map((row,i)=><tr key={i} className="border-b border-gray-100">{row.map((cell,j)=><td key={j} className="px-4 py-3 text-gray-600">{cell}</td>)}</tr>)}</tbody>
+            <thead>
+              <tr className="border-b border-gray-200 bg-gray-50">
+                {SAMPLE_CSV_HEADERS.map((h) => (
+                  <th
+                    key={h}
+                    className="text-left px-4 py-3 font-medium text-gray-500"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {SAMPLE_ROWS.map((row, i) => (
+                <tr key={i} className="border-b border-gray-100">
+                  {row.map((cell, j) => (
+                    <td key={j} className="px-4 py-3 text-gray-600">
+                      {cell}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
           </table>
         </div>
       )}
 
-      {step === 'confirm' && (
+      {step === "confirm" && (
         <div className="bg-white rounded-xl border border-gray-200 p-10 text-center">
-          <CheckCircle size={40} className="mx-auto text-green-500 mb-3"/>
-          <h2 className="text-lg font-semibold text-gray-900">Import Successful</h2>
-          <p className="text-sm text-gray-500 mt-1">{SAMPLE_ROWS.length} assets imported successfully.</p>
-          <Button className="mt-4" onClick={() => setStep('upload')}>Import Another File</Button>
+          <CheckCircle size={40} className="mx-auto text-green-500 mb-3" />
+          <h2 className="text-lg font-semibold text-gray-900">
+            Import Successful
+          </h2>
+          <p className="text-sm text-gray-500 mt-1">
+            {SAMPLE_ROWS.length} assets imported successfully.
+          </p>
+          <Button className="mt-4" onClick={() => setStep("upload")}>
+            Import Another File
+          </Button>
         </div>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/maintenance-calendar/page.tsx b/frontend/app/(dashboard)/maintenance-calendar/page.tsx
index 69ea516ce..a5b9f4995 100644
--- a/frontend/app/(dashboard)/maintenance-calendar/page.tsx
+++ b/frontend/app/(dashboard)/maintenance-calendar/page.tsx
@@ -1,18 +1,48 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { ChevronLeft, ChevronRight, Wrench } from 'lucide-react';
+import { useState } from "react";
+import { ChevronLeft, ChevronRight, Wrench } from "lucide-react";
 
-interface MaintenanceEvent { id: string; day: number; asset: string; type: string; assignee: string }
+interface MaintenanceEvent {
+  id: string;
+  day: number;
+  asset: string;
+  type: string;
+  assignee: string;
+}
 
 const EVENTS: MaintenanceEvent[] = [
-  { id:'1', day:5,  asset:'Dell Laptop #3',  type:'Repair',    assignee:'Tech Team' },
-  { id:'2', day:12, asset:'HVAC Unit',        type:'Service',   assignee:'Facilities' },
-  { id:'3', day:18, asset:'Server Rack A',    type:'Inspection',assignee:'IT Ops' },
-  { id:'4', day:25, asset:'Printer MFP-02',   type:'Repair',    assignee:'Tech Team' },
+  {
+    id: "1",
+    day: 5,
+    asset: "Dell Laptop #3",
+    type: "Repair",
+    assignee: "Tech Team",
+  },
+  {
+    id: "2",
+    day: 12,
+    asset: "HVAC Unit",
+    type: "Service",
+    assignee: "Facilities",
+  },
+  {
+    id: "3",
+    day: 18,
+    asset: "Server Rack A",
+    type: "Inspection",
+    assignee: "IT Ops",
+  },
+  {
+    id: "4",
+    day: 25,
+    asset: "Printer MFP-02",
+    type: "Repair",
+    assignee: "Tech Team",
+  },
 ];
 
-const DAYS_OF_WEEK = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
+const DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
 export default function MaintenanceCalendarPage() {
   const today = new Date();
@@ -21,30 +51,70 @@ export default function MaintenanceCalendarPage() {
 
   const firstDay = new Date(year, month, 1).getDay();
   const daysInMonth = new Date(year, month + 1, 0).getDate();
-  const monthName = new Date(year, month).toLocaleString('default', { month: 'long' });
+  const monthName = new Date(year, month).toLocaleString("default", {
+    month: "long",
+  });
 
-  const prev = () => { if (month === 0) { setMonth(11); setYear(y=>y-1); } else setMonth(m=>m-1); };
-  const next = () => { if (month === 11) { setMonth(0); setYear(y=>y+1); } else setMonth(m=>m+1); };
+  const prev = () => {
+    if (month === 0) {
+      setMonth(11);
+      setYear((y) => y - 1);
+    } else setMonth((m) => m - 1);
+  };
+  const next = () => {
+    if (month === 11) {
+      setMonth(0);
+      setYear((y) => y + 1);
+    } else setMonth((m) => m + 1);
+  };
 
-  const cells = Array.from({ length: firstDay + daysInMonth }, (_, i) => i < firstDay ? null : i - firstDay + 1);
+  const cells = Array.from({ length: firstDay + daysInMonth }, (_, i) =>
+    i < firstDay ? null : i - firstDay + 1,
+  );
 
   return (
     <div>
-      <div className="mb-6"><h1 className="text-2xl font-bold text-gray-900">Maintenance Calendar</h1><p className="text-sm text-gray-500 mt-1">Month schedule display</p></div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">
+          Maintenance Calendar
+        </h1>
+        <p className="text-sm text-gray-500 mt-1">Month schedule display</p>
+      </div>
       <div className="bg-white rounded-xl border border-gray-200 p-4">
         <div className="flex items-center justify-between mb-4">
-          <button onClick={prev} className="p-1 hover:bg-gray-100 rounded"><ChevronLeft size={20}/></button>
-          <h2 className="text-lg font-semibold text-gray-900">{monthName} {year}</h2>
-          <button onClick={next} className="p-1 hover:bg-gray-100 rounded"><ChevronRight size={20}/></button>
+          <button onClick={prev} className="p-1 hover:bg-gray-100 rounded">
+            <ChevronLeft size={20} />
+          </button>
+          <h2 className="text-lg font-semibold text-gray-900">
+            {monthName} {year}
+          </h2>
+          <button onClick={next} className="p-1 hover:bg-gray-100 rounded">
+            <ChevronRight size={20} />
+          </button>
         </div>
         <div className="grid grid-cols-7 gap-px bg-gray-200 rounded-lg overflow-hidden">
-          {DAYS_OF_WEEK.map(d=><div key={d} className="bg-gray-50 text-center text-xs font-medium text-gray-500 py-2">{d}</div>)}
+          {DAYS_OF_WEEK.map((d) => (
+            <div
+              key={d}
+              className="bg-gray-50 text-center text-xs font-medium text-gray-500 py-2"
+            >
+              {d}
+            </div>
+          ))}
           {cells.map((day, i) => {
-            const events = day ? EVENTS.filter(e => e.day === day) : [];
+            const events = day ? EVENTS.filter((e) => e.day === day) : [];
             return (
-              <div key={i} className={g-white min-h-[80px] p-1.5 }>
-                {day && <span className={	ext-xs font-medium }>{day}</span>}
-                {events.map(e=><div key={e.id} className="mt-1 text-xs bg-blue-50 text-blue-700 rounded px-1 py-0.5 truncate flex items-center gap-0.5"><Wrench size={10}/>{e.asset}</div>)}
+              <div key={i} className="bg-white min-h-[80px] p-1.5">
+                {day && <span className="text-xs font-medium">{day}</span>}
+                {events.map((e) => (
+                  <div
+                    key={e.id}
+                    className="mt-1 text-xs bg-blue-50 text-blue-700 rounded px-1 py-0.5 truncate flex items-center gap-0.5"
+                  >
+                    <Wrench size={10} />
+                    {e.asset}
+                  </div>
+                ))}
               </div>
             );
           })}
@@ -52,4 +122,4 @@ export default function MaintenanceCalendarPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/my-dashboard/page.tsx b/frontend/app/(dashboard)/my-dashboard/page.tsx
index e3d716ddd..32db51e98 100644
--- a/frontend/app/(dashboard)/my-dashboard/page.tsx
+++ b/frontend/app/(dashboard)/my-dashboard/page.tsx
@@ -1,15 +1,51 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Package, CheckCircle, Wrench, UserCheck, GripVertical } from 'lucide-react';
+import { useState } from "react";
+import {
+  Package,
+  CheckCircle,
+  Wrench,
+  UserCheck,
+  GripVertical,
+} from "lucide-react";
 
-interface Widget { id: string; title: string; value: number | string; icon: React.ReactNode; color: string }
+interface Widget {
+  id: string;
+  title: string;
+  value: number | string;
+  icon: React.ReactNode;
+  color: string;
+}
 
 const DEFAULT_WIDGETS: Widget[] = [
-  { id:'total', title:'Total Assets', value:248, icon:<Package size={20}/>, color:'text-blue-600' },
-  { id:'active', title:'Active', value:189, icon:<CheckCircle size={20}/>, color:'text-green-600' },
-  { id:'maintenance', title:'In Maintenance', value:12, icon:<Wrench size={20}/>, color:'text-yellow-600' },
-  { id:'assigned', title:'Assigned', value:47, icon:<UserCheck size={20}/>, color:'text-purple-600' },
+  {
+    id: "total",
+    title: "Total Assets",
+    value: 248,
+    icon: <Package size={20} />,
+    color: "text-blue-600",
+  },
+  {
+    id: "active",
+    title: "Active",
+    value: 189,
+    icon: <CheckCircle size={20} />,
+    color: "text-green-600",
+  },
+  {
+    id: "maintenance",
+    title: "In Maintenance",
+    value: 12,
+    icon: <Wrench size={20} />,
+    color: "text-yellow-600",
+  },
+  {
+    id: "assigned",
+    title: "Assigned",
+    value: 47,
+    icon: <UserCheck size={20} />,
+    color: "text-purple-600",
+  },
 ];
 
 export default function CustomDashboardPage() {
@@ -19,10 +55,10 @@ export default function CustomDashboardPage() {
   const onDragStart = (id: string) => setDragging(id);
   const onDrop = (targetId: string) => {
     if (!dragging || dragging === targetId) return;
-    setWidgets(prev => {
+    setWidgets((prev) => {
       const arr = [...prev];
-      const fromIdx = arr.findIndex(w => w.id === dragging);
-      const toIdx = arr.findIndex(w => w.id === targetId);
+      const fromIdx = arr.findIndex((w) => w.id === dragging);
+      const toIdx = arr.findIndex((w) => w.id === targetId);
       [arr[fromIdx], arr[toIdx]] = [arr[toIdx], arr[fromIdx]];
       return arr;
     });
@@ -31,14 +67,25 @@ export default function CustomDashboardPage() {
 
   return (
     <div>
-      <div className="mb-6"><h1 className="text-2xl font-bold text-gray-900">My Dashboard</h1><p className="text-sm text-gray-500 mt-1">Drag widgets to rearrange your layout</p></div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">My Dashboard</h1>
+        <p className="text-sm text-gray-500 mt-1">
+          Drag widgets to rearrange your layout
+        </p>
+      </div>
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        {widgets.map(w => (
-          <div key={w.id} draggable onDragStart={() => onDragStart(w.id)} onDragOver={e => e.preventDefault()} onDrop={() => onDrop(w.id)}
-            className={g-white rounded-xl border border-gray-200 p-5 cursor-grab active:cursor-grabbing select-none transition-opacity }>
+        {widgets.map((w) => (
+          <div
+            key={w.id}
+            draggable
+            onDragStart={() => onDragStart(w.id)}
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={() => onDrop(w.id)}
+            className="bg-white rounded-xl border border-gray-200 p-5 cursor-grab active:cursor-grabbing select-none transition-opacity"
+          >
             <div className="flex items-center justify-between mb-3">
-              <span className={${w.color}}>{w.icon}</span>
-              <GripVertical size={16} className="text-gray-300"/>
+              <span className={w.color}>{w.icon}</span>
+              <GripVertical size={16} className="text-gray-300" />
             </div>
             <p className="text-sm text-gray-500">{w.title}</p>
             <p className="text-3xl font-bold text-gray-900 mt-1">{w.value}</p>
@@ -47,4 +94,4 @@ export default function CustomDashboardPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/notifications-live/page.tsx b/frontend/app/(dashboard)/notifications-live/page.tsx
index 29d7b905b..8eab9967c 100644
--- a/frontend/app/(dashboard)/notifications-live/page.tsx
+++ b/frontend/app/(dashboard)/notifications-live/page.tsx
@@ -1,20 +1,37 @@
-'use client';
+"use client";
 
-import { useEffect, useRef, useState } from 'react';
-import { Bell, Wifi, WifiOff } from 'lucide-react';
+import { useEffect, useRef, useState } from "react";
+import { Bell, Wifi, WifiOff } from "lucide-react";
 
-interface Notification { id: string; message: string; type: 'info' | 'warning' | 'success'; timestamp: string }
+interface Notification {
+  id: string;
+  message: string;
+  type: "info" | "warning" | "success";
+  timestamp: string;
+}
 
 export default function NotificationsRealtimePage() {
   const [connected, setConnected] = useState(false);
   const [notifications, setNotifications] = useState<Notification[]>([
-    { id:'1', message:'Asset AST-042 has been checked out by Alice M.', type:'info', timestamp: new Date().toISOString() },
-    { id:'2', message:'Maintenance scheduled for Server Rack A on Jan 25', type:'warning', timestamp: new Date().toISOString() },
+    {
+      id: "1",
+      message: "Asset AST-042 has been checked out by Alice M.",
+      type: "info",
+      timestamp: new Date().toISOString(),
+    },
+    {
+      id: "2",
+      message: "Maintenance scheduled for Server Rack A on Jan 25",
+      type: "warning",
+      timestamp: new Date().toISOString(),
+    },
   ]);
   const wsRef = useRef<WebSocket | null>(null);
 
   useEffect(() => {
-    const wsUrl = (process.env.NEXT_PUBLIC_WS_URL ?? 'ws://localhost:3001') + '/notifications';
+    const wsUrl =
+      (process.env.NEXT_PUBLIC_WS_URL ?? "ws://localhost:3001") +
+      "/notifications";
     try {
       const ws = new WebSocket(wsUrl);
       wsRef.current = ws;
@@ -23,33 +40,58 @@ export default function NotificationsRealtimePage() {
       ws.onmessage = (e) => {
         try {
           const data = JSON.parse(e.data as string) as Notification;
-          setNotifications(prev => [data, ...prev].slice(0, 50));
-        } catch { /* ignore malformed */ }
+          setNotifications((prev) => [data, ...prev].slice(0, 50));
+        } catch {
+          /* ignore malformed */
+        }
       };
-    } catch { /* ws not available in test env */ }
-    return () => { wsRef.current?.close(); };
+    } catch {
+      /* ws not available in test env */
+    }
+    return () => {
+      wsRef.current?.close();
+    };
   }, []);
 
-  const TYPE_STYLE: Record<string, string> = { info:'border-blue-200 bg-blue-50', warning:'border-yellow-200 bg-yellow-50', success:'border-green-200 bg-green-50' };
+  const TYPE_STYLE: Record<string, string> = {
+    info: "border-blue-200 bg-blue-50",
+    warning: "border-yellow-200 bg-yellow-50",
+    success: "border-green-200 bg-green-50",
+  };
 
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Real-time Notifications</h1><p className="text-sm text-gray-500 mt-1">Live updates via WebSocket</p></div>
-        <span className={lex items-center gap-1.5 text-sm }>
-          {connected ? <Wifi size={16}/> : <WifiOff size={16}/>}{connected ? 'Connected' : 'Disconnected'}
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">
+            Real-time Notifications
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Live updates via WebSocket
+          </p>
+        </div>
+        <span className="flex items-center gap-1.5 text-sm">
+          {connected ? <Wifi size={16} /> : <WifiOff size={16} />}
+          {connected ? "Connected" : "Disconnected"}
         </span>
       </div>
       <div className="space-y-3">
-        {notifications.length === 0
-          ? <div className="bg-white rounded-xl border border-gray-200 p-10 text-center text-sm text-gray-400"><Bell size={24} className="mx-auto mb-2 text-gray-300"/>No notifications yet</div>
-          : notifications.map(n => (
-            <div key={n.id} className={
ounded-xl border p-4 }>
+        {notifications.length === 0 ? (
+          <div className="bg-white rounded-xl border border-gray-200 p-10 text-center text-sm text-gray-400">
+            <Bell size={24} className="mx-auto mb-2 text-gray-300" />
+            No notifications yet
+          </div>
+        ) : (
+          notifications.map((n) => (
+            <div key={n.id} className="rounded-xl border p-4">
               <p className="text-sm text-gray-800">{n.message}</p>
-              <p className="text-xs text-gray-400 mt-1">{new Date(n.timestamp).toLocaleString()}</p>
+              <p className="text-xs text-gray-400 mt-1">
+                {new Date(n.timestamp).toLocaleString()}
+              </p>
             </div>
-          ))}
+          ))
+        )}
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/print-labels/page.tsx b/frontend/app/(dashboard)/print-labels/page.tsx
index 3958bf5bd..1d9a0f1d7 100644
--- a/frontend/app/(dashboard)/print-labels/page.tsx
+++ b/frontend/app/(dashboard)/print-labels/page.tsx
@@ -1,43 +1,121 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Printer, CheckSquare } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Printer, CheckSquare } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-interface PrintAsset { id: string; assetId: string; name: string; category: string; department: string }
+interface PrintAsset {
+  id: string;
+  assetId: string;
+  name: string;
+  category: string;
+  department: string;
+}
 
 const MOCK: PrintAsset[] = [
-  { id:'1', assetId:'AST-001', name:'Dell Laptop #1', category:'IT', department:'Engineering' },
-  { id:'2', assetId:'AST-002', name:'HP Monitor', category:'IT', department:'Design' },
-  { id:'3', assetId:'AST-003', name:'Office Chair', category:'Furniture', department:'HR' },
-  { id:'4', assetId:'AST-004', name:'Canon Printer', category:'IT', department:'Admin' },
+  {
+    id: "1",
+    assetId: "AST-001",
+    name: "Dell Laptop #1",
+    category: "IT",
+    department: "Engineering",
+  },
+  {
+    id: "2",
+    assetId: "AST-002",
+    name: "HP Monitor",
+    category: "IT",
+    department: "Design",
+  },
+  {
+    id: "3",
+    assetId: "AST-003",
+    name: "Office Chair",
+    category: "Furniture",
+    department: "HR",
+  },
+  {
+    id: "4",
+    assetId: "AST-004",
+    name: "Canon Printer",
+    category: "IT",
+    department: "Admin",
+  },
 ];
 
 export default function QRLabelPage() {
   const [selected, setSelected] = useState<Set<string>>(new Set());
-  const toggleAll = () => setSelected(prev => prev.size === MOCK.length ? new Set() : new Set(MOCK.map(a=>a.id)));
-  const toggle = (id: string) => setSelected(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });
+  const toggleAll = () =>
+    setSelected((prev) =>
+      prev.size === MOCK.length ? new Set() : new Set(MOCK.map((a) => a.id)),
+    );
+  const toggle = (id: string) =>
+    setSelected((prev) => {
+      const s = new Set(prev);
+      s.has(id) ? s.delete(id) : s.add(id);
+      return s;
+    });
 
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Label &amp; QR Code Printing</h1><p className="text-sm text-gray-500 mt-1">Select assets and print asset labels</p></div>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">
+            Label &amp; QR Code Printing
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Select assets and print asset labels
+          </p>
+        </div>
         <Button disabled={selected.size === 0} onClick={() => window.print()}>
-          <Printer size={16} className="mr-1.5"/>Print {selected.size > 0 ? ${selected.size} Label : 'Labels'}
+          <Printer size={16} className="mr-1.5" />
+          Print {selected.size > 0 ? `${selected.size} Label` : "Labels"}
         </Button>
       </div>
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
-          <thead><tr className="border-b border-gray-200 bg-gray-50">
-            <th className="px-4 py-3 w-8"><input type="checkbox" checked={selected.size===MOCK.length} onChange={toggleAll} className="rounded"/></th>
-            {["Asset ID","Name","Category","Department"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}
-          </tr></thead>
+          <thead>
+            <tr className="border-b border-gray-200 bg-gray-50">
+              <th className="px-4 py-3 w-8">
+                <input
+                  type="checkbox"
+                  checked={selected.size === MOCK.length}
+                  onChange={toggleAll}
+                  className="rounded"
+                />
+              </th>
+              {["Asset ID", "Name", "Category", "Department"].map((h) => (
+                <th
+                  key={h}
+                  className="text-left px-4 py-3 font-medium text-gray-500"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
           <tbody>
-            {MOCK.map(a=>(
-              <tr key={a.id} className={order-b border-gray-100 hover:bg-gray-50 cursor-pointer } onClick={()=>toggle(a.id)}>
-                <td className="px-4 py-3"><input type="checkbox" checked={selected.has(a.id)} onChange={()=>toggle(a.id)} className="rounded" onClick={e=>e.stopPropagation()}/></td>
-                <td className="px-4 py-3 font-mono text-xs text-gray-500">{a.assetId}</td>
-                <td className="px-4 py-3 font-medium text-gray-900">{a.name}</td>
+            {MOCK.map((a) => (
+              <tr
+                key={a.id}
+                className="border-b border-gray-100 hover:bg-gray-50 cursor-pointer"
+                onClick={() => toggle(a.id)}
+              >
+                <td className="px-4 py-3">
+                  <input
+                    type="checkbox"
+                    checked={selected.has(a.id)}
+                    onChange={() => toggle(a.id)}
+                    className="rounded"
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                </td>
+                <td className="px-4 py-3 font-mono text-xs text-gray-500">
+                  {a.assetId}
+                </td>
+                <td className="px-4 py-3 font-medium text-gray-900">
+                  {a.name}
+                </td>
                 <td className="px-4 py-3 text-gray-600">{a.category}</td>
                 <td className="px-4 py-3 text-gray-600">{a.department}</td>
               </tr>
@@ -45,7 +123,13 @@ export default function QRLabelPage() {
           </tbody>
         </table>
       </div>
-      {selected.size > 0 && <p className="mt-2 text-xs text-gray-400 flex items-center gap-1"><CheckSquare size={12}/>{selected.size} asset{selected.size>1?'s':''} selected for printing</p>}
+      {selected.size > 0 && (
+        <p className="mt-2 text-xs text-gray-400 flex items-center gap-1">
+          <CheckSquare size={12} />
+          {selected.size} asset{selected.size > 1 ? "s" : ""} selected for
+          printing
+        </p>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/rbac/page.tsx b/frontend/app/(dashboard)/rbac/page.tsx
index f572402e7..ac63a15f7 100644
--- a/frontend/app/(dashboard)/rbac/page.tsx
+++ b/frontend/app/(dashboard)/rbac/page.tsx
@@ -1,18 +1,33 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Plus, Shield } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Plus, Shield } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-interface Role { id: string; name: string; department: string; permissions: string[] }
+interface Role {
+  id: string;
+  name: string;
+  department: string;
+  permissions: string[];
+}
 
 const MOCK: Role[] = [
-  { id:'1', name:'Admin', department:'All', permissions:['create','read','update','delete','manage_users'] },
-  { id:'2', name:'Manager', department:'Engineering', permissions:['create','read','update'] },
-  { id:'3', name:'Viewer', department:'Finance', permissions:['read'] },
+  {
+    id: "1",
+    name: "Admin",
+    department: "All",
+    permissions: ["create", "read", "update", "delete", "manage_users"],
+  },
+  {
+    id: "2",
+    name: "Manager",
+    department: "Engineering",
+    permissions: ["create", "read", "update"],
+  },
+  { id: "3", name: "Viewer", department: "Finance", permissions: ["read"] },
 ];
 
-const ALL_PERMS = ['create','read','update','delete','manage_users'];
+const ALL_PERMS = ["create", "read", "update", "delete", "manage_users"];
 
 export default function RBACPage() {
   const [roles] = useState<Role[]>(MOCK);
@@ -21,36 +36,70 @@ export default function RBACPage() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Roles &amp; Permissions</h1><p className="text-sm text-gray-500 mt-1">Manage roles, permissions, and department access</p></div>
-        <Button><Plus size={16} className="mr-1.5" />New Role</Button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">
+            Roles &amp; Permissions
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Manage roles, permissions, and department access
+          </p>
+        </div>
+        <Button>
+          <Plus size={16} className="mr-1.5" />
+          New Role
+        </Button>
       </div>
       <div className="grid grid-cols-3 gap-4">
         <div className="col-span-1 bg-white rounded-xl border border-gray-200 overflow-hidden">
-          <div className="px-4 py-3 border-b border-gray-100 text-sm font-semibold text-gray-700">Roles</div>
-          {roles.map(r => (
-            <button key={r.id} onClick={() => setSelected(r)} className={w-full text-left px-4 py-3 flex items-center gap-2 hover:bg-gray-50 border-b border-gray-100 }>
+          <div className="px-4 py-3 border-b border-gray-100 text-sm font-semibold text-gray-700">
+            Roles
+          </div>
+          {roles.map((r) => (
+            <button
+              key={r.id}
+              onClick={() => setSelected(r)}
+              className="w-full text-left px-4 py-3 flex items-center gap-2 hover:bg-gray-50 border-b border-gray-100"
+            >
               <Shield size={14} className="text-gray-400" />
-              <div><p className="text-sm font-medium text-gray-900">{r.name}</p><p className="text-xs text-gray-500">{r.department}</p></div>
+              <div>
+                <p className="text-sm font-medium text-gray-900">{r.name}</p>
+                <p className="text-xs text-gray-500">{r.department}</p>
+              </div>
             </button>
           ))}
         </div>
         <div className="col-span-2 bg-white rounded-xl border border-gray-200 p-5">
           {selected ? (
             <>
-              <h2 className="text-lg font-semibold text-gray-900 mb-4">{selected.name} — Permissions</h2>
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">
+                {selected.name} — Permissions
+              </h2>
               <div className="grid grid-cols-2 gap-3">
-                {ALL_PERMS.map(perm => (
-                  <label key={perm} className="flex items-center gap-2 cursor-pointer">
-                    <input type="checkbox" defaultChecked={selected.permissions.includes(perm)} className="rounded" />
-                    <span className="text-sm capitalize text-gray-700">{perm.replace('_',' ')}</span>
+                {ALL_PERMS.map((perm) => (
+                  <label
+                    key={perm}
+                    className="flex items-center gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      defaultChecked={selected.permissions.includes(perm)}
+                      className="rounded"
+                    />
+                    <span className="text-sm capitalize text-gray-700">
+                      {perm.replace("_", " ")}
+                    </span>
                   </label>
                 ))}
               </div>
               <Button className="mt-6">Save Changes</Button>
             </>
-          ) : <p className="text-sm text-gray-400">Select a role to manage permissions</p>}
+          ) : (
+            <p className="text-sm text-gray-400">
+              Select a role to manage permissions
+            </p>
+          )}
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/settings/appearance/page.tsx b/frontend/app/(dashboard)/settings/appearance/page.tsx
index 2c339dff4..bbfb62820 100644
--- a/frontend/app/(dashboard)/settings/appearance/page.tsx
+++ b/frontend/app/(dashboard)/settings/appearance/page.tsx
@@ -1,47 +1,70 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { Moon, Sun, Monitor } from 'lucide-react';
+import { useState, useEffect } from "react";
+import { Moon, Sun, Monitor } from "lucide-react";
 
-type Theme = 'light' | 'dark' | 'system';
+type Theme = "light" | "dark" | "system";
 
-const THEME_OPTIONS: { value: Theme; label: string; icon: React.ReactNode }[] = [
-  { value:'light', label:'Light', icon:<Sun size={18}/> },
-  { value:'dark', label:'Dark', icon:<Moon size={18}/> },
-  { value:'system', label:'System', icon:<Monitor size={18}/> },
-];
+const THEME_OPTIONS: { value: Theme; label: string; icon: React.ReactNode }[] =
+  [
+    { value: "light", label: "Light", icon: <Sun size={18} /> },
+    { value: "dark", label: "Dark", icon: <Moon size={18} /> },
+    { value: "system", label: "System", icon: <Monitor size={18} /> },
+  ];
 
 export default function AppearancePage() {
-  const [theme, setTheme] = useState<Theme>('light');
+  const [theme, setTheme] = useState<Theme>("light");
 
   useEffect(() => {
-    const saved = (localStorage.getItem('theme') as Theme) ?? 'light';
+    const saved = (localStorage.getItem("theme") as Theme) ?? "light";
     setTheme(saved);
   }, []);
 
   const applyTheme = (t: Theme) => {
     setTheme(t);
-    localStorage.setItem('theme', t);
-    const isDark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-    document.documentElement.classList.toggle('dark', isDark);
+    localStorage.setItem("theme", t);
+    const isDark =
+      t === "dark" ||
+      (t === "system" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+    document.documentElement.classList.toggle("dark", isDark);
   };
 
   return (
     <div>
-      <div className="mb-6"><h1 className="text-2xl font-bold text-gray-900">Appearance</h1><p className="text-sm text-gray-500 mt-1">Choose your preferred colour theme</p></div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Appearance</h1>
+        <p className="text-sm text-gray-500 mt-1">
+          Choose your preferred colour theme
+        </p>
+      </div>
       <div className="bg-white rounded-xl border border-gray-200 p-6 max-w-md">
         <p className="text-sm font-medium text-gray-700 mb-4">Theme</p>
         <div className="grid grid-cols-3 gap-3">
-          {THEME_OPTIONS.map(opt => (
-            <button key={opt.value} onClick={() => applyTheme(opt.value)}
-              className={lex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-colors }>
-              <span className={theme === opt.value ? 'text-gray-900' : 'text-gray-400'}>{opt.icon}</span>
-              <span className="text-xs font-medium text-gray-700">{opt.label}</span>
+          {THEME_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              onClick={() => applyTheme(opt.value)}
+              className="flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-colors"
+            >
+              <span
+                className={
+                  theme === opt.value ? "text-gray-900" : "text-gray-400"
+                }
+              >
+                {opt.icon}
+              </span>
+              <span className="text-xs font-medium text-gray-700">
+                {opt.label}
+              </span>
             </button>
           ))}
         </div>
-        <p className="text-xs text-gray-400 mt-4">Theme preference is saved in your browser and persists across sessions.</p>
+        <p className="text-xs text-gray-400 mt-4">
+          Theme preference is saved in your browser and persists across
+          sessions.
+        </p>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/software-licenses/page.tsx b/frontend/app/(dashboard)/software-licenses/page.tsx
index 99bf84b6a..b4b2d29ce 100644
--- a/frontend/app/(dashboard)/software-licenses/page.tsx
+++ b/frontend/app/(dashboard)/software-licenses/page.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Plus, AlertTriangle, CheckCircle } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Plus, AlertTriangle, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface License {
   id: string;
@@ -15,9 +15,33 @@ interface License {
 }
 
 const MOCK: License[] = [
-  { id: '1', software: 'Microsoft Office 365', vendor: 'Microsoft', totalSeats: 50, usedSeats: 47, expiresAt: '2025-01-31', compliant: true },
-  { id: '2', software: 'Adobe Creative Cloud', vendor: 'Adobe', totalSeats: 10, usedSeats: 12, expiresAt: '2024-12-31', compliant: false },
-  { id: '3', software: 'Slack Business+', vendor: 'Slack', totalSeats: 100, usedSeats: 78, expiresAt: '2025-06-30', compliant: true },
+  {
+    id: "1",
+    software: "Microsoft Office 365",
+    vendor: "Microsoft",
+    totalSeats: 50,
+    usedSeats: 47,
+    expiresAt: "2025-01-31",
+    compliant: true,
+  },
+  {
+    id: "2",
+    software: "Adobe Creative Cloud",
+    vendor: "Adobe",
+    totalSeats: 10,
+    usedSeats: 12,
+    expiresAt: "2024-12-31",
+    compliant: false,
+  },
+  {
+    id: "3",
+    software: "Slack Business+",
+    vendor: "Slack",
+    totalSeats: 100,
+    usedSeats: 78,
+    expiresAt: "2025-06-30",
+    compliant: true,
+  },
 ];
 
 export default function SoftwareLicensesPage() {
@@ -27,40 +51,78 @@ export default function SoftwareLicensesPage() {
     <div>
       <div className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">Software Licenses</h1>
-          <p className="text-sm text-gray-500 mt-1">Seat tracking and compliance overview</p>
+          <h1 className="text-2xl font-bold text-gray-900">
+            Software Licenses
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Seat tracking and compliance overview
+          </p>
         </div>
-        <Button><Plus size={16} className="mr-1.5" />Add License</Button>
+        <Button>
+          <Plus size={16} className="mr-1.5" />
+          Add License
+        </Button>
       </div>
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-gray-200 bg-gray-50">
-              {['Software','Vendor','Total Seats','Used Seats','Utilisation','Expires','Compliance'].map(h => (
-                <th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>
+              {[
+                "Software",
+                "Vendor",
+                "Total Seats",
+                "Used Seats",
+                "Utilisation",
+                "Expires",
+                "Compliance",
+              ].map((h) => (
+                <th
+                  key={h}
+                  className="text-left px-4 py-3 font-medium text-gray-500"
+                >
+                  {h}
+                </th>
               ))}
             </tr>
           </thead>
           <tbody>
-            {licenses.map(l => {
+            {licenses.map((l) => {
               const pct = Math.round((l.usedSeats / l.totalSeats) * 100);
               return (
-                <tr key={l.id} className="border-b border-gray-100 hover:bg-gray-50">
-                  <td className="px-4 py-3 font-medium text-gray-900">{l.software}</td>
+                <tr
+                  key={l.id}
+                  className="border-b border-gray-100 hover:bg-gray-50"
+                >
+                  <td className="px-4 py-3 font-medium text-gray-900">
+                    {l.software}
+                  </td>
                   <td className="px-4 py-3 text-gray-600">{l.vendor}</td>
                   <td className="px-4 py-3 text-gray-600">{l.totalSeats}</td>
                   <td className="px-4 py-3 text-gray-600">{l.usedSeats}</td>
                   <td className="px-4 py-3">
                     <div className="flex items-center gap-2">
-                      <div className="w-20 h-1.5 bg-gray-200 rounded-full"><div className={h-1.5 rounded-full } style={{width:${Math.min(pct,100)}%}} /></div>
+                      <div className="w-20 h-1.5 bg-gray-200 rounded-full">
+                        <div
+                          className="h-1.5 rounded-full"
+                          style={{ width: `${Math.min(pct, 100)}%` }}
+                        />
+                      </div>
                       <span className="text-xs text-gray-500">{pct}%</span>
                     </div>
                   </td>
                   <td className="px-4 py-3 text-gray-600">{l.expiresAt}</td>
                   <td className="px-4 py-3">
-                    {l.compliant
-                      ? <span className="flex items-center gap-1 text-green-600"><CheckCircle size={14}/>Compliant</span>
-                      : <span className="flex items-center gap-1 text-red-600"><AlertTriangle size={14}/>Over-allocated</span>}
+                    {l.compliant ? (
+                      <span className="flex items-center gap-1 text-green-600">
+                        <CheckCircle size={14} />
+                        Compliant
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-1 text-red-600">
+                        <AlertTriangle size={14} />
+                        Over-allocated
+                      </span>
+                    )}
                   </td>
                 </tr>
               );
@@ -70,4 +132,4 @@ export default function SoftwareLicensesPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/stocktake/page.tsx b/frontend/app/(dashboard)/stocktake/page.tsx
index 2bfce3bdc..a4e9620b7 100644
--- a/frontend/app/(dashboard)/stocktake/page.tsx
+++ b/frontend/app/(dashboard)/stocktake/page.tsx
@@ -1,50 +1,141 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Plus, BarChart3, CheckCircle, AlertTriangle } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Plus, BarChart3, CheckCircle, AlertTriangle } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-type AuditStatus = 'SCHEDULED' | 'IN_PROGRESS' | 'COMPLETE';
-interface Audit { id: string; name: string; department: string; scheduledDate: string; status: AuditStatus; total: number; scanned: number; discrepancies: number }
+type AuditStatus = "SCHEDULED" | "IN_PROGRESS" | "COMPLETE";
+interface Audit {
+  id: string;
+  name: string;
+  department: string;
+  scheduledDate: string;
+  status: AuditStatus;
+  total: number;
+  scanned: number;
+  discrepancies: number;
+}
 
 const MOCK: Audit[] = [
-  { id:'1', name:'Q1 IT Audit', department:'Engineering', scheduledDate:'2024-01-30', status:'IN_PROGRESS', total:45, scanned:32, discrepancies:3 },
-  { id:'2', name:'Annual Furniture Check', department:'All', scheduledDate:'2024-02-15', status:'SCHEDULED', total:120, scanned:0, discrepancies:0 },
-  { id:'3', name:'Q4 2023 Audit', department:'Admin', scheduledDate:'2023-12-20', status:'COMPLETE', total:30, scanned:30, discrepancies:1 },
+  {
+    id: "1",
+    name: "Q1 IT Audit",
+    department: "Engineering",
+    scheduledDate: "2024-01-30",
+    status: "IN_PROGRESS",
+    total: 45,
+    scanned: 32,
+    discrepancies: 3,
+  },
+  {
+    id: "2",
+    name: "Annual Furniture Check",
+    department: "All",
+    scheduledDate: "2024-02-15",
+    status: "SCHEDULED",
+    total: 120,
+    scanned: 0,
+    discrepancies: 0,
+  },
+  {
+    id: "3",
+    name: "Q4 2023 Audit",
+    department: "Admin",
+    scheduledDate: "2023-12-20",
+    status: "COMPLETE",
+    total: 30,
+    scanned: 30,
+    discrepancies: 1,
+  },
 ];
 
-const STATUS_BADGE: Record<AuditStatus, string> = { SCHEDULED:'bg-gray-100 text-gray-600', IN_PROGRESS:'bg-blue-50 text-blue-700', COMPLETE:'bg-green-50 text-green-700' };
+const STATUS_BADGE: Record<AuditStatus, string> = {
+  SCHEDULED: "bg-gray-100 text-gray-600",
+  IN_PROGRESS: "bg-blue-50 text-blue-700",
+  COMPLETE: "bg-green-50 text-green-700",
+};
 
 export default function StocktakePage() {
   const [audits] = useState<Audit[]>(MOCK);
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Stocktake</h1><p className="text-sm text-gray-500 mt-1">Schedule audits, scan assets, review discrepancies</p></div>
-        <Button><Plus size={16} className="mr-1.5"/>Schedule Audit</Button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Stocktake</h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Schedule audits, scan assets, review discrepancies
+          </p>
+        </div>
+        <Button>
+          <Plus size={16} className="mr-1.5" />
+          Schedule Audit
+        </Button>
       </div>
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
-          <thead><tr className="border-b border-gray-200 bg-gray-50">{["Audit Name","Department","Date","Status","Progress","Discrepancies"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}</tr></thead>
+          <thead>
+            <tr className="border-b border-gray-200 bg-gray-50">
+              {[
+                "Audit Name",
+                "Department",
+                "Date",
+                "Status",
+                "Progress",
+                "Discrepancies",
+              ].map((h) => (
+                <th
+                  key={h}
+                  className="text-left px-4 py-3 font-medium text-gray-500"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
           <tbody>
-            {audits.map(a => {
-              const pct = a.total > 0 ? Math.round((a.scanned / a.total) * 100) : 0;
+            {audits.map((a) => {
+              const pct =
+                a.total > 0 ? Math.round((a.scanned / a.total) * 100) : 0;
               return (
-                <tr key={a.id} className="border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
-                  <td className="px-4 py-3 font-medium text-gray-900">{a.name}</td>
+                <tr
+                  key={a.id}
+                  className="border-b border-gray-100 hover:bg-gray-50 cursor-pointer"
+                >
+                  <td className="px-4 py-3 font-medium text-gray-900">
+                    {a.name}
+                  </td>
                   <td className="px-4 py-3 text-gray-600">{a.department}</td>
                   <td className="px-4 py-3 text-gray-500">{a.scheduledDate}</td>
-                  <td className="px-4 py-3"><span className={px-2 py-0.5 rounded-full text-xs font-medium }>{a.status.replace('_',' ')}</span></td>
+                  <td className="px-4 py-3">
+                    <span className="px-2 py-0.5 rounded-full text-xs font-medium">
+                      {a.status.replace("_", " ")}
+                    </span>
+                  </td>
                   <td className="px-4 py-3">
                     <div className="flex items-center gap-2">
-                      <div className="w-20 h-1.5 bg-gray-200 rounded-full"><div className="h-1.5 bg-blue-500 rounded-full" style={{width:${pct}%}}/></div>
-                      <span className="text-xs text-gray-500">{a.scanned}/{a.total}</span>
+                      <div className="w-20 h-1.5 bg-gray-200 rounded-full">
+                        <div
+                          className="h-1.5 bg-blue-500 rounded-full"
+                          style={{ width: `${pct}%` }}
+                        />
+                      </div>
+                      <span className="text-xs text-gray-500">
+                        {a.scanned}/{a.total}
+                      </span>
                     </div>
                   </td>
                   <td className="px-4 py-3">
-                    {a.discrepancies > 0
-                      ? <span className="flex items-center gap-1 text-red-600 text-xs"><AlertTriangle size={13}/>{a.discrepancies}</span>
-                      : <span className="flex items-center gap-1 text-green-600 text-xs"><CheckCircle size={13}/>None</span>}
+                    {a.discrepancies > 0 ? (
+                      <span className="flex items-center gap-1 text-red-600 text-xs">
+                        <AlertTriangle size={13} />
+                        {a.discrepancies}
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-1 text-green-600 text-xs">
+                        <CheckCircle size={13} />
+                        None
+                      </span>
+                    )}
                   </td>
                 </tr>
               );
@@ -54,4 +145,4 @@ export default function StocktakePage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(dashboard)/work-orders/page.tsx b/frontend/app/(dashboard)/work-orders/page.tsx
index 073b84f3e..06cc1bcf7 100644
--- a/frontend/app/(dashboard)/work-orders/page.tsx
+++ b/frontend/app/(dashboard)/work-orders/page.tsx
@@ -1,43 +1,117 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Plus, Wrench, CheckCircle, Clock, AlertCircle } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Plus, Wrench, CheckCircle, Clock, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-type WOStatus = 'OPEN' | 'IN_PROGRESS' | 'DONE' | 'OVERDUE';
-interface WorkOrder { id: string; title: string; asset: string; assignee: string; priority: 'LOW'|'MEDIUM'|'HIGH'; status: WOStatus; dueDate: string }
+type WOStatus = "OPEN" | "IN_PROGRESS" | "DONE" | "OVERDUE";
+interface WorkOrder {
+  id: string;
+  title: string;
+  asset: string;
+  assignee: string;
+  priority: "LOW" | "MEDIUM" | "HIGH";
+  status: WOStatus;
+  dueDate: string;
+}
 
 const MOCK: WorkOrder[] = [
-  { id:'1', title:'Replace faulty keyboard', asset:'Dell Laptop #3', assignee:'Tech Team', priority:'HIGH', status:'IN_PROGRESS', dueDate:'2024-01-25' },
-  { id:'2', title:'Annual servicing', asset:'HVAC Unit', assignee:'Facilities', priority:'MEDIUM', status:'OPEN', dueDate:'2024-02-01' },
-  { id:'3', title:'Battery replacement', asset:'UPS Unit A', assignee:'IT Ops', priority:'LOW', status:'DONE', dueDate:'2024-01-18' },
+  {
+    id: "1",
+    title: "Replace faulty keyboard",
+    asset: "Dell Laptop #3",
+    assignee: "Tech Team",
+    priority: "HIGH",
+    status: "IN_PROGRESS",
+    dueDate: "2024-01-25",
+  },
+  {
+    id: "2",
+    title: "Annual servicing",
+    asset: "HVAC Unit",
+    assignee: "Facilities",
+    priority: "MEDIUM",
+    status: "OPEN",
+    dueDate: "2024-02-01",
+  },
+  {
+    id: "3",
+    title: "Battery replacement",
+    asset: "UPS Unit A",
+    assignee: "IT Ops",
+    priority: "LOW",
+    status: "DONE",
+    dueDate: "2024-01-18",
+  },
 ];
 
 const STATUS_ICON: Record<WOStatus, React.ReactNode> = {
-  OPEN:<Clock size={14} className="text-gray-400"/>, IN_PROGRESS:<Wrench size={14} className="text-blue-500"/>,
-  DONE:<CheckCircle size={14} className="text-green-500"/>, OVERDUE:<AlertCircle size={14} className="text-red-500"/>
+  OPEN: <Clock size={14} className="text-gray-400" />,
+  IN_PROGRESS: <Wrench size={14} className="text-blue-500" />,
+  DONE: <CheckCircle size={14} className="text-green-500" />,
+  OVERDUE: <AlertCircle size={14} className="text-red-500" />,
+};
+const PRIORITY_STYLE: Record<string, string> = {
+  LOW: "text-gray-500",
+  MEDIUM: "text-yellow-600",
+  HIGH: "text-red-600",
 };
-const PRIORITY_STYLE: Record<string, string> = { LOW:'text-gray-500', MEDIUM:'text-yellow-600', HIGH:'text-red-600' };
 
 export default function WorkOrdersPage() {
   const [orders] = useState<WorkOrder[]>(MOCK);
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Work Orders</h1><p className="text-sm text-gray-500 mt-1">Create, assign, and track maintenance work orders</p></div>
-        <Button><Plus size={16} className="mr-1.5"/>New Work Order</Button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Work Orders</h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Create, assign, and track maintenance work orders
+          </p>
+        </div>
+        <Button>
+          <Plus size={16} className="mr-1.5" />
+          New Work Order
+        </Button>
       </div>
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
-          <thead><tr className="border-b border-gray-200 bg-gray-50">{["Title","Asset","Assignee","Priority","Status","Due Date"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}</tr></thead>
+          <thead>
+            <tr className="border-b border-gray-200 bg-gray-50">
+              {[
+                "Title",
+                "Asset",
+                "Assignee",
+                "Priority",
+                "Status",
+                "Due Date",
+              ].map((h) => (
+                <th
+                  key={h}
+                  className="text-left px-4 py-3 font-medium text-gray-500"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
           <tbody>
-            {orders.map(o=>(
-              <tr key={o.id} className="border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
-                <td className="px-4 py-3 font-medium text-gray-900">{o.title}</td>
+            {orders.map((o) => (
+              <tr
+                key={o.id}
+                className="border-b border-gray-100 hover:bg-gray-50 cursor-pointer"
+              >
+                <td className="px-4 py-3 font-medium text-gray-900">
+                  {o.title}
+                </td>
                 <td className="px-4 py-3 text-gray-600">{o.asset}</td>
                 <td className="px-4 py-3 text-gray-600">{o.assignee}</td>
-                <td className={px-4 py-3 font-medium }>{o.priority}</td>
-                <td className="px-4 py-3"><span className="flex items-center gap-1">{STATUS_ICON[o.status]}{o.status.replace('_',' ')}</span></td>
+                <td className="px-4 py-3 font-medium">{o.priority}</td>
+                <td className="px-4 py-3">
+                  <span className="flex items-center gap-1">
+                    {STATUS_ICON[o.status]}
+                    {o.status.replace("_", " ")}
+                  </span>
+                </td>
                 <td className="px-4 py-3 text-gray-500">{o.dueDate}</td>
               </tr>
             ))}
@@ -46,4 +120,4 @@ export default function WorkOrdersPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/app/booking/page.tsx b/frontend/app/app/booking/page.tsx
index a3131959f..a191d8c3a 100644
--- a/frontend/app/app/booking/page.tsx
+++ b/frontend/app/app/booking/page.tsx
@@ -1,44 +1,120 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Plus, Calendar, Clock } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { useState } from "react";
+import { Plus, Calendar, Clock } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-interface Reservation { id: string; asset: string; reservedBy: string; from: string; to: string; status: "ACTIVE" | "UPCOMING" | "RETURNED" }
+interface Reservation {
+  id: string;
+  asset: string;
+  reservedBy: string;
+  from: string;
+  to: string;
+  status: "ACTIVE" | "UPCOMING" | "RETURNED";
+}
 
 const MOCK: Reservation[] = [
-  { id:"1", asset:"MacBook Pro #4", reservedBy:"Alice M.", from:"2024-01-22", to:"2024-01-26", status:"ACTIVE" },
-  { id:"2", asset:"Canon Camera", reservedBy:"Bob K.", from:"2024-01-28", to:"2024-01-30", status:"UPCOMING" },
-  { id:"3", asset:"Dell Monitor #2", reservedBy:"Carol S.", from:"2024-01-10", to:"2024-01-18", status:"RETURNED" },
-]
+  {
+    id: "1",
+    asset: "MacBook Pro #4",
+    reservedBy: "Alice M.",
+    from: "2024-01-22",
+    to: "2024-01-26",
+    status: "ACTIVE",
+  },
+  {
+    id: "2",
+    asset: "Canon Camera",
+    reservedBy: "Bob K.",
+    from: "2024-01-28",
+    to: "2024-01-30",
+    status: "UPCOMING",
+  },
+  {
+    id: "3",
+    asset: "Dell Monitor #2",
+    reservedBy: "Carol S.",
+    from: "2024-01-10",
+    to: "2024-01-18",
+    status: "RETURNED",
+  },
+];
 
-const STATUS_STYLE: Record<string, string> = { ACTIVE:"bg-green-50 text-green-700", UPCOMING:"bg-blue-50 text-blue-700", RETURNED:"bg-gray-100 text-gray-600" }
+const STATUS_STYLE: Record<string, string> = {
+  ACTIVE: "bg-green-50 text-green-700",
+  UPCOMING: "bg-blue-50 text-blue-700",
+  RETURNED: "bg-gray-100 text-gray-600",
+};
 
 export default function AssetBookingPage() {
-  const [reservations] = useState<Reservation[]>(MOCK)
+  const [reservations] = useState<Reservation[]>(MOCK);
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Asset Booking</h1><p className="text-sm text-gray-500 mt-1">Reserve assets with due dates and return flow</p></div>
-        <Button><Plus size={16} className="mr-1.5" />New Reservation</Button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Asset Booking</h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Reserve assets with due dates and return flow
+          </p>
+        </div>
+        <Button>
+          <Plus size={16} className="mr-1.5" />
+          New Reservation
+        </Button>
       </div>
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
-          <thead><tr className="border-b border-gray-200 bg-gray-50">{["Asset","Reserved By","From","To","Status","Actions"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}</tr></thead>
+          <thead>
+            <tr className="border-b border-gray-200 bg-gray-50">
+              {["Asset", "Reserved By", "From", "To", "Status", "Actions"].map(
+                (h) => (
+                  <th
+                    key={h}
+                    className="text-left px-4 py-3 font-medium text-gray-500"
+                  >
+                    {h}
+                  </th>
+                ),
+              )}
+            </tr>
+          </thead>
           <tbody>
-            {reservations.map(r=>(
-              <tr key={r.id} className="border-b border-gray-100 hover:bg-gray-50">
-                <td className="px-4 py-3 font-medium text-gray-900">{r.asset}</td>
+            {reservations.map((r) => (
+              <tr
+                key={r.id}
+                className="border-b border-gray-100 hover:bg-gray-50"
+              >
+                <td className="px-4 py-3 font-medium text-gray-900">
+                  {r.asset}
+                </td>
                 <td className="px-4 py-3 text-gray-600">{r.reservedBy}</td>
-                <td className="px-4 py-3 text-gray-500 flex items-center gap-1"><Calendar size={13}/>{r.from}</td>
-                <td className="px-4 py-3 text-gray-500"><span className="flex items-center gap-1"><Clock size={13}/>{r.to}</span></td>
-                <td className="px-4 py-3"><span className={px-2 py-0.5 rounded-full text-xs font-medium }>{r.status}</span></td>
-                <td className="px-4 py-3">{r.status === "ACTIVE" && <button className="text-xs text-blue-600 hover:underline">Return</button>}</td>
+                <td className="px-4 py-3 text-gray-500 flex items-center gap-1">
+                  <Calendar size={13} />
+                  {r.from}
+                </td>
+                <td className="px-4 py-3 text-gray-500">
+                  <span className="flex items-center gap-1">
+                    <Clock size={13} />
+                    {r.to}
+                  </span>
+                </td>
+                <td className="px-4 py-3">
+                  <span className="px-2 py-0.5 rounded-full text-xs font-medium">
+                    {r.status}
+                  </span>
+                </td>
+                <td className="px-4 py-3">
+                  {r.status === "ACTIVE" && (
+                    <button className="text-xs text-blue-600 hover:underline">
+                      Return
+                    </button>
+                  )}
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/app/app/locations/page.tsx b/frontend/app/app/locations/page.tsx
index c3007965f..6d2b8bc53 100644
--- a/frontend/app/app/locations/page.tsx
+++ b/frontend/app/app/locations/page.tsx
@@ -1,38 +1,54 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Plus, ChevronRight, ChevronDown, MapPin } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { useState } from "react";
+import { Plus, ChevronRight, ChevronDown, MapPin } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface Location {
-  id: string
-  name: string
-  type: "building" | "floor" | "room"
-  parent: string | null
-  assetCount: number
+  id: string;
+  name: string;
+  type: "building" | "floor" | "room";
+  parent: string | null;
+  assetCount: number;
 }
 
 const MOCK: Location[] = [
-  { id: "1", name: "HQ Building", type: "building", parent: null, assetCount: 120 },
+  {
+    id: "1",
+    name: "HQ Building",
+    type: "building",
+    parent: null,
+    assetCount: 120,
+  },
   { id: "2", name: "Floor 1", type: "floor", parent: "1", assetCount: 60 },
   { id: "3", name: "Server Room", type: "room", parent: "2", assetCount: 25 },
   { id: "4", name: "Floor 2", type: "floor", parent: "1", assetCount: 60 },
   { id: "5", name: "IT Department", type: "room", parent: "4", assetCount: 35 },
-]
+];
 
 function LocationRow({ loc, depth }: { loc: Location; depth: number }) {
-  const [open, setOpen] = useState(true)
-  const children = MOCK.filter(l => l.parent === loc.id)
-  const hasChildren = children.length > 0
+  const [open, setOpen] = useState(true);
+  const children = MOCK.filter((l) => l.parent === loc.id);
+  const hasChildren = children.length > 0;
 
   return (
     <>
       <tr className="border-b border-gray-100 hover:bg-gray-50">
         <td className="px-4 py-3">
-          <div className="flex items-center" style={{ paddingLeft: ${depth * 20}px }}>
-            {hasChildren
-              ? <button onClick={() => setOpen(o => !o)} className="mr-1 text-gray-400">{open ? <ChevronDown size={14}/> : <ChevronRight size={14}/>}</button>
-              : <span className="mr-1 w-[14px] inline-block" />}
+          <div
+            className="flex items-center"
+            style={{ paddingLeft: `${depth * 20}px` }}
+          >
+            {hasChildren ? (
+              <button
+                onClick={() => setOpen((o) => !o)}
+                className="mr-1 text-gray-400"
+              >
+                {open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+              </button>
+            ) : (
+              <span className="mr-1 w-[14px] inline-block" />
+            )}
             <MapPin size={14} className="mr-2 text-gray-400" />
             <span className="font-medium text-gray-900">{loc.name}</span>
           </div>
@@ -40,31 +56,59 @@ function LocationRow({ loc, depth }: { loc: Location; depth: number }) {
         <td className="px-4 py-3 text-gray-600 capitalize">{loc.type}</td>
         <td className="px-4 py-3 text-gray-600">{loc.assetCount}</td>
         <td className="px-4 py-3">
-          <button className="text-xs text-blue-600 hover:underline mr-3">Edit</button>
-          <button className="text-xs text-red-500 hover:underline">Delete</button>
+          <button className="text-xs text-blue-600 hover:underline mr-3">
+            Edit
+          </button>
+          <button className="text-xs text-red-500 hover:underline">
+            Delete
+          </button>
         </td>
       </tr>
-      {open && children.map(c => <LocationRow key={c.id} loc={c} depth={depth + 1} />)}
+      {open &&
+        children.map((c) => (
+          <LocationRow key={c.id} loc={c} depth={depth + 1} />
+        ))}
     </>
-  )
+  );
 }
 
 export default function LocationsPage() {
-  const roots = MOCK.filter(l => l.parent === null)
+  const roots = MOCK.filter((l) => l.parent === null);
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Locations</h1><p className="text-sm text-gray-500 mt-1">Hierarchical location tree with CRUD</p></div>
-        <Button><Plus size={16} className="mr-1.5" />Add Location</Button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Locations</h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Hierarchical location tree with CRUD
+          </p>
+        </div>
+        <Button>
+          <Plus size={16} className="mr-1.5" />
+          Add Location
+        </Button>
       </div>
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
-          <thead><tr className="border-b border-gray-200 bg-gray-50">
-            {["Name","Type","Assets","Actions"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}
-          </tr></thead>
-          <tbody>{roots.map(r=><LocationRow key={r.id} loc={r} depth={0}/>)}</tbody>
+          <thead>
+            <tr className="border-b border-gray-200 bg-gray-50">
+              {["Name", "Type", "Assets", "Actions"].map((h) => (
+                <th
+                  key={h}
+                  className="text-left px-4 py-3 font-medium text-gray-500"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {roots.map((r) => (
+              <LocationRow key={r.id} loc={r} depth={0} />
+            ))}
+          </tbody>
         </table>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/app/app/vendors/page.tsx b/frontend/app/app/vendors/page.tsx
index 511c68bec..d69df764f 100644
--- a/frontend/app/app/vendors/page.tsx
+++ b/frontend/app/app/vendors/page.tsx
@@ -1,43 +1,129 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Plus, Phone, Mail } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { useState } from "react";
+import { Plus, Phone, Mail } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
-interface Vendor { id: string; name: string; category: string; contact: string; email: string; phone: string; activeContracts: number }
+interface Vendor {
+  id: string;
+  name: string;
+  category: string;
+  contact: string;
+  email: string;
+  phone: string;
+  activeContracts: number;
+}
 
 const MOCK: Vendor[] = [
-  { id:"1", name:"Dell Technologies", category:"IT Hardware", contact:"John Smith", email:"jsmith@dell.com", phone:"+1-800-999-3355", activeContracts:3 },
-  { id:"2", name:"Office Depot", category:"Office Supplies", contact:"Sarah Lee", email:"slee@officedepot.com", phone:"+1-800-463-3768", activeContracts:1 },
-  { id:"3", name:"TechServe Inc.", category:"Maintenance", contact:"Mike Chen", email:"mchen@techserve.com", phone:"+1-555-123-4567", activeContracts:2 },
-]
+  {
+    id: "1",
+    name: "Dell Technologies",
+    category: "IT Hardware",
+    contact: "John Smith",
+    email: "jsmith@dell.com",
+    phone: "+1-800-999-3355",
+    activeContracts: 3,
+  },
+  {
+    id: "2",
+    name: "Office Depot",
+    category: "Office Supplies",
+    contact: "Sarah Lee",
+    email: "slee@officedepot.com",
+    phone: "+1-800-463-3768",
+    activeContracts: 1,
+  },
+  {
+    id: "3",
+    name: "TechServe Inc.",
+    category: "Maintenance",
+    contact: "Mike Chen",
+    email: "mchen@techserve.com",
+    phone: "+1-555-123-4567",
+    activeContracts: 2,
+  },
+];
 
 export default function VendorsPage() {
-  const [vendors] = useState<Vendor[]>(MOCK)
+  const [vendors] = useState<Vendor[]>(MOCK);
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <div><h1 className="text-2xl font-bold text-gray-900">Vendors &amp; Suppliers</h1><p className="text-sm text-gray-500 mt-1">Manage your vendor and supplier directory</p></div>
-        <Button><Plus size={16} className="mr-1.5" />Add Vendor</Button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">
+            Vendors &amp; Suppliers
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Manage your vendor and supplier directory
+          </p>
+        </div>
+        <Button>
+          <Plus size={16} className="mr-1.5" />
+          Add Vendor
+        </Button>
       </div>
       <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
         <table className="w-full text-sm">
-          <thead><tr className="border-b border-gray-200 bg-gray-50">{["Name","Category","Contact","Email","Phone","Contracts","Actions"].map(h=><th key={h} className="text-left px-4 py-3 font-medium text-gray-500">{h}</th>)}</tr></thead>
+          <thead>
+            <tr className="border-b border-gray-200 bg-gray-50">
+              {[
+                "Name",
+                "Category",
+                "Contact",
+                "Email",
+                "Phone",
+                "Contracts",
+                "Actions",
+              ].map((h) => (
+                <th
+                  key={h}
+                  className="text-left px-4 py-3 font-medium text-gray-500"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
           <tbody>
-            {vendors.map(v=>(
-              <tr key={v.id} className="border-b border-gray-100 hover:bg-gray-50">
-                <td className="px-4 py-3 font-medium text-gray-900">{v.name}</td>
+            {vendors.map((v) => (
+              <tr
+                key={v.id}
+                className="border-b border-gray-100 hover:bg-gray-50"
+              >
+                <td className="px-4 py-3 font-medium text-gray-900">
+                  {v.name}
+                </td>
                 <td className="px-4 py-3 text-gray-600">{v.category}</td>
                 <td className="px-4 py-3 text-gray-600">{v.contact}</td>
-                <td className="px-4 py-3"><a href={mailto:} className="flex items-center gap-1 text-blue-600 hover:underline"><Mail size={13}/>{v.email}</a></td>
-                <td className="px-4 py-3"><span className="flex items-center gap-1 text-gray-600"><Phone size={13}/>{v.phone}</span></td>
+                <td className="px-4 py-3">
+                  <a
+                    href={`mailto:${v.email}`}
+                    className="flex items-center gap-1 text-blue-600 hover:underline"
+                  >
+                    <Mail size={13} />
+                    {v.email}
+                  </a>
+                </td>
+                <td className="px-4 py-3">
+                  <span className="flex items-center gap-1 text-gray-600">
+                    <Phone size={13} />
+                    {v.phone}
+                  </span>
+                </td>
                 <td className="px-4 py-3 text-gray-600">{v.activeContracts}</td>
-                <td className="px-4 py-3"><button className="text-xs text-blue-600 hover:underline mr-3">Edit</button><button className="text-xs text-red-500 hover:underline">Delete</button></td>
+                <td className="px-4 py-3">
+                  <button className="text-xs text-blue-600 hover:underline mr-3">
+                    Edit
+                  </button>
+                  <button className="text-xs text-red-500 hover:underline">
+                    Delete
+                  </button>
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/components/contracts/contract-detail-drawer.tsx b/frontend/components/contracts/contract-detail-drawer.tsx
new file mode 100644
index 000000000..d9c9993af
--- /dev/null
+++ b/frontend/components/contracts/contract-detail-drawer.tsx
@@ -0,0 +1,316 @@
+// frontend/components/contracts/contract-detail-drawer.tsx
+"use client";
+
+import { useState } from "react";
+import { X, Upload, Download, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ContractStatus, ContractType } from "@/lib/query/types/contract";
+import { ContractStatusBadge } from "./status-badge";
+import { ContractTypeBadge } from "./type-badge";
+import { useUploadContractDocument } from "@/lib/query/hooks/useContracts";
+
+interface Props {
+  contract: {
+    id: string;
+    contractId: string;
+    title: string;
+    vendor: string;
+    contractType?: ContractType;
+    startDate: string | null;
+    endDate: string | null;
+    value: number | null;
+    status: ContractStatus;
+    description: string | null;
+    documentUrl: string | null;
+    renewalAlertDays: number;
+    notes: string | null;
+    createdBy?: {
+      id: string;
+      name: string;
+      email: string;
+    } | null;
+    assignedTo?: {
+      id: string;
+      name: string;
+      email: string;
+    } | null;
+    createdAt: string;
+    updatedAt: string;
+  };
+  onClose: () => void;
+  onUpdate?: () => void;
+}
+
+export function ContractDetailDrawer({ contract, onClose, onUpdate }: Props) {
+  const [uploading, setUploading] = useState(false);
+  const uploadDocument = useUploadContractDocument(contract.id);
+
+  const handleDocumentUpload = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    try {
+      await uploadDocument.mutateAsync({ file });
+      onUpdate?.();
+    } catch (error) {
+      console.error("Failed to upload document:", error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const formatDate = (dateStr: string | null) => {
+    if (!dateStr) return "—";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  const formatCurrency = (value: number | null) => {
+    if (!value) return "—";
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(value);
+  };
+
+  const getDaysUntilExpiry = () => {
+    if (!contract.endDate) return null;
+    const end = new Date(contract.endDate);
+    const now = new Date();
+    const diff = Math.ceil(
+      (end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+    );
+    return diff;
+  };
+
+  const daysUntilExpiry = getDaysUntilExpiry();
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+
+      {/* Drawer */}
+      <div className="relative w-full max-w-2xl bg-white shadow-xl h-full overflow-y-auto">
+        {/* Header */}
+        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">
+              {contract.title}
+            </h2>
+            <p className="text-sm text-gray-500 font-mono mt-0.5">
+              {contract.contractId}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-5 space-y-6">
+          {/* Status & Type */}
+          <div className="flex gap-3">
+            <ContractStatusBadge status={contract.status} />
+            {contract.contractType && (
+              <ContractTypeBadge type={contract.contractType} />
+            )}
+          </div>
+
+          {/* Key Information */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Vendor
+              </label>
+              <p className="mt-1 text-sm text-gray-900 font-medium">
+                {contract.vendor}
+              </p>
+            </div>
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Contract Value
+              </label>
+              <p className="mt-1 text-sm text-gray-900 font-medium">
+                {formatCurrency(contract.value)}
+              </p>
+            </div>
+          </div>
+
+          {/* Dates */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Start Date
+              </label>
+              <p className="mt-1 text-sm text-gray-900">
+                {formatDate(contract.startDate)}
+              </p>
+            </div>
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                End Date
+              </label>
+              <p className="mt-1 text-sm text-gray-900">
+                {formatDate(contract.endDate)}
+              </p>
+            </div>
+          </div>
+
+          {/* Days Until Expiry */}
+          {daysUntilExpiry !== null && (
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Days Until Expiry
+              </label>
+              <div className="mt-1">
+                {daysUntilExpiry < 0 ? (
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
+                    Expired {Math.abs(daysUntilExpiry)} days ago
+                  </span>
+                ) : daysUntilExpiry <= 30 ? (
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">
+                    Expires in {daysUntilExpiry} days
+                  </span>
+                ) : (
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
+                    {daysUntilExpiry} days remaining
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Renewal Alert */}
+          <div>
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Renewal Alert
+            </label>
+            <p className="mt-1 text-sm text-gray-900">
+              {contract.renewalAlertDays || 30} days before expiry
+            </p>
+          </div>
+
+          {/* People */}
+          {(contract.createdBy || contract.assignedTo) && (
+            <div className="grid grid-cols-2 gap-4">
+              {contract.createdBy && (
+                <div>
+                  <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                    Created By
+                  </label>
+                  <p className="mt-1 text-sm text-gray-900">
+                    {contract.createdBy.name}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {contract.createdBy.email}
+                  </p>
+                </div>
+              )}
+              {contract.assignedTo && (
+                <div>
+                  <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                    Assigned To
+                  </label>
+                  <p className="mt-1 text-sm text-gray-900">
+                    {contract.assignedTo.name}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {contract.assignedTo.email}
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Description */}
+          {contract.description && (
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Description
+              </label>
+              <p className="mt-1 text-sm text-gray-900 whitespace-pre-wrap">
+                {contract.description}
+              </p>
+            </div>
+          )}
+
+          {/* Notes */}
+          {contract.notes && (
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Notes
+              </label>
+              <p className="mt-1 text-sm text-gray-900 whitespace-pre-wrap">
+                {contract.notes}
+              </p>
+            </div>
+          )}
+
+          {/* Document */}
+          <div>
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Contract Document
+            </label>
+            <div className="mt-2 space-y-3">
+              {contract.documentUrl ? (
+                <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                  <Download size={16} className="text-gray-500" />
+                  <a
+                    href={contract.documentUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1"
+                  >
+                    Download Document
+                    <ExternalLink size={12} />
+                  </a>
+                </div>
+              ) : (
+                <p className="text-sm text-gray-500">No document uploaded</p>
+              )}
+
+              {/* Upload New Document */}
+              <div>
+                <label className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg cursor-pointer hover:bg-gray-800 transition-colors">
+                  <Upload size={16} />
+                  {uploading ? "Uploading..." : "Upload Document"}
+                  <input
+                    type="file"
+                    accept=".pdf"
+                    onChange={handleDocumentUpload}
+                    className="hidden"
+                    disabled={uploading}
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* Timestamps */}
+          <div className="pt-4 border-t border-gray-200">
+            <div className="grid grid-cols-2 gap-4 text-xs text-gray-500">
+              <div>
+                <span className="font-medium">Created:</span>{" "}
+                {new Date(contract.createdAt).toLocaleString()}
+              </div>
+              <div>
+                <span className="font-medium">Last Updated:</span>{" "}
+                {new Date(contract.updatedAt).toLocaleString()}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/contracts/create-contract-modal.tsx b/frontend/components/contracts/create-contract-modal.tsx
new file mode 100644
index 000000000..ee0c40290
--- /dev/null
+++ b/frontend/components/contracts/create-contract-modal.tsx
@@ -0,0 +1,265 @@
+// frontend/components/contracts/create-contract-modal.tsx
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { X, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useCreateContract } from "@/lib/query/hooks/useContracts";
+import { ContractStatus, ContractType } from "@/lib/query/types/contract";
+
+const schema = z.object({
+  title: z.string().min(1, "Contract title is required"),
+  vendor: z.string().min(1, "Vendor name is required"),
+  contractType: z.nativeEnum(ContractType).optional(),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+  value: z.string().optional(),
+  status: z.nativeEnum(ContractStatus).optional(),
+  renewalAlertDays: z.string().optional(),
+  notes: z.string().optional(),
+  document: z.any().optional(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+interface Props {
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function CreateContractModal({ onClose, onSuccess }: Props) {
+  const createContract = useCreateContract();
+  const [uploading, setUploading] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      status: ContractStatus.DRAFT,
+      renewalAlertDays: "30",
+    },
+  });
+
+  const onSubmit = async (values: FormValues) => {
+    try {
+      const contract = await createContract.mutateAsync({
+        title: values.title,
+        vendor: values.vendor,
+        contractType: values.contractType,
+        startDate: values.startDate || undefined,
+        endDate: values.endDate || undefined,
+        value: values.value ? Number(values.value) : undefined,
+        status: values.status,
+        renewalAlertDays: values.renewalAlertDays
+          ? Number(values.renewalAlertDays)
+          : undefined,
+        notes: values.notes || undefined,
+      });
+
+      // Upload document if provided
+      if (values.document && values.document.length > 0) {
+        setUploading(true);
+        try {
+          const formData = new FormData();
+          formData.append("file", values.document[0]);
+
+          const { api } = await import("@/lib/api");
+          await api.post(`/contracts/${contract.id}/document`, formData, {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          });
+        } catch (err) {
+          console.error("Failed to upload document:", err);
+        } finally {
+          setUploading(false);
+        }
+      }
+
+      onSuccess?.();
+      onClose();
+    } catch (err: unknown) {
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message || "Failed to create contract.";
+      setError("root", { message });
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white">
+          <h2 className="text-base font-semibold text-gray-900">
+            Create New Contract
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="px-6 py-5 space-y-4">
+          <Input
+            id="title"
+            label="Contract Title *"
+            placeholder="e.g. Annual Maintenance Agreement"
+            {...register("title")}
+            error={errors.title?.message}
+          />
+
+          <Input
+            id="vendor"
+            label="Vendor *"
+            placeholder="e.g. Acme Corporation"
+            {...register("vendor")}
+            error={errors.vendor?.message}
+          />
+
+          <div className="grid grid-cols-2 gap-3">
+            {/* Contract Type */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">
+                Contract Type
+              </label>
+              <select
+                {...register("contractType")}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900"
+              >
+                <option value="">Select type</option>
+                {Object.values(ContractType).map((t) => (
+                  <option key={t} value={t}>
+                    {t.charAt(0) + t.slice(1).toLowerCase()}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Status */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">
+                Status
+              </label>
+              <select
+                {...register("status")}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900"
+              >
+                {Object.values(ContractStatus).map((s) => (
+                  <option key={s} value={s}>
+                    {s.charAt(0) + s.slice(1).toLowerCase().replace("_", " ")}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Input
+              id="startDate"
+              label="Start Date"
+              type="date"
+              {...register("startDate")}
+            />
+            <Input
+              id="endDate"
+              label="End Date"
+              type="date"
+              {...register("endDate")}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Input
+              id="value"
+              label="Contract Value ($)"
+              type="number"
+              placeholder="0.00"
+              {...register("value")}
+            />
+            <Input
+              id="renewalAlertDays"
+              label="Renewal Alert (Days Before)"
+              type="number"
+              placeholder="30"
+              {...register("renewalAlertDays")}
+            />
+          </div>
+
+          {/* Document Upload */}
+          <div className="flex flex-col gap-1">
+            <label className="text-sm font-medium text-gray-700">
+              Contract Document (PDF)
+            </label>
+            <div className="flex items-center gap-3">
+              <label className="flex-1 flex items-center justify-center px-4 py-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400 transition-colors">
+                <Upload size={20} className="text-gray-400 mr-2" />
+                <span className="text-sm text-gray-600">Choose PDF file</span>
+                <input
+                  type="file"
+                  accept=".pdf"
+                  {...register("document")}
+                  className="hidden"
+                />
+              </label>
+            </div>
+          </div>
+
+          {/* Notes */}
+          <div className="flex flex-col gap-1">
+            <label
+              htmlFor="notes"
+              className="text-sm font-medium text-gray-700"
+            >
+              Notes
+            </label>
+            <textarea
+              id="notes"
+              rows={3}
+              placeholder="Any additional notes about this contract..."
+              {...register("notes")}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900 resize-none"
+            />
+          </div>
+
+          {errors.root && (
+            <p className="text-sm text-red-500 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
+              {errors.root.message}
+            </p>
+          )}
+
+          <div className="flex gap-3 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              className="flex-1"
+              onClick={onClose}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              className="flex-1"
+              loading={createContract.isPending || uploading}
+            >
+              Create Contract
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/contracts/status-badge.tsx b/frontend/components/contracts/status-badge.tsx
new file mode 100644
index 000000000..c752669c8
--- /dev/null
+++ b/frontend/components/contracts/status-badge.tsx
@@ -0,0 +1,26 @@
+// frontend/components/contracts/status-badge.tsx
+import { ContractStatus } from "@/lib/query/types/contract";
+
+interface Props {
+  status: ContractStatus | string;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  [ContractStatus.DRAFT]: "bg-gray-100 text-gray-700",
+  [ContractStatus.ACTIVE]: "bg-green-100 text-green-700",
+  [ContractStatus.EXPIRED]: "bg-red-100 text-red-700",
+  [ContractStatus.PENDING_RENEWAL]: "bg-yellow-100 text-yellow-700",
+  [ContractStatus.TERMINATED]: "bg-gray-100 text-gray-500",
+};
+
+export function ContractStatusBadge({ status }: Props) {
+  const colorClass = STATUS_COLORS[status] || "bg-gray-100 text-gray-700";
+
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colorClass}`}
+    >
+      {status.charAt(0) + status.slice(1).toLowerCase().replace("_", " ")}
+    </span>
+  );
+}
diff --git a/frontend/components/contracts/type-badge.tsx b/frontend/components/contracts/type-badge.tsx
new file mode 100644
index 000000000..ab0a618b8
--- /dev/null
+++ b/frontend/components/contracts/type-badge.tsx
@@ -0,0 +1,27 @@
+// frontend/components/contracts/type-badge.tsx
+import { ContractType } from "@/lib/query/types/contract";
+
+interface Props {
+  type: ContractType | string;
+}
+
+const TYPE_COLORS: Record<string, string> = {
+  [ContractType.SERVICE]: "bg-blue-100 text-blue-700",
+  [ContractType.MAINTENANCE]: "bg-purple-100 text-purple-700",
+  [ContractType.SUPPORT]: "bg-indigo-100 text-indigo-700",
+  [ContractType.LICENSE]: "bg-orange-100 text-orange-700",
+  [ContractType.LEASE]: "bg-teal-100 text-teal-700",
+  [ContractType.OTHER]: "bg-gray-100 text-gray-700",
+};
+
+export function ContractTypeBadge({ type }: Props) {
+  const colorClass = TYPE_COLORS[type] || "bg-gray-100 text-gray-700";
+
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colorClass}`}
+    >
+      {type.charAt(0) + type.slice(1).toLowerCase()}
+    </span>
+  );
+}
diff --git a/frontend/components/layout/sidebar.tsx b/frontend/components/layout/sidebar.tsx
index 41c157248..00be5fa80 100644
--- a/frontend/components/layout/sidebar.tsx
+++ b/frontend/components/layout/sidebar.tsx
@@ -12,12 +12,14 @@ import {
   Settings,
   LogOut,
   X,
+  AlertTriangle,
 } from "lucide-react";
 import { useAuthStore } from "@/store/auth.store";
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
   { href: "/assets", label: "Assets", icon: Package },
+  { href: "/assets/disposals", label: "Disposals", icon: AlertTriangle },
   { href: "/users", label: "Users", icon: Users },
   { href: "/departments", label: "Organisation", icon: Building2 },
   { href: "/reports", label: "Reports", icon: BarChart3 },
@@ -73,10 +75,15 @@ export function Sidebar({ open, onClose }: SidebarProps) {
                 />
               </svg>
             </div>
-            <span className="font-semibold text-gray-900 text-sm">AssetsUp</span>
+            <span className="font-semibold text-gray-900 text-sm">
+              AssetsUp
+            </span>
           </div>
           {onClose && (
-            <button onClick={onClose} className="lg:hidden text-gray-400 hover:text-gray-600">
+            <button
+              onClick={onClose}
+              className="lg:hidden text-gray-400 hover:text-gray-600"
+            >
               <X size={18} />
             </button>
           )}
diff --git a/frontend/lib/api/assets.ts b/frontend/lib/api/assets.ts
index 3225d69e4..7316b5d99 100644
--- a/frontend/lib/api/assets.ts
+++ b/frontend/lib/api/assets.ts
@@ -1,4 +1,4 @@
-import { api } from '../api';
+import { api } from "../api";
 import type {
   Asset,
   AssetHistoryEvent,
@@ -17,7 +17,9 @@ import type {
   TokenSummary,
   TransferTokensInput,
   TokenLockStatus,
-} from '../query/types/asset';
+  DisposalRequest,
+  CreateDisposalInput,
+} from "../query/types/asset";
 
 export interface DepartmentWithCount extends Department {
   assetCount: number;
@@ -67,57 +69,85 @@ export interface CreateAssetInput {
 
 export const assetApiClient = {
   getAssets: (filters?: AssetListFilters): Promise<AssetListResponse> =>
-    api.get<AssetListResponse>('/assets', { params: filters }).then((r) => r.data),
+    api
+      .get<AssetListResponse>("/assets", { params: filters })
+      .then((r) => r.data),
 
   getAsset: (id: string): Promise<Asset> =>
     api.get<Asset>(`/assets/${id}`).then((r) => r.data),
 
   createAsset: (data: CreateAssetInput): Promise<Asset> =>
-    api.post<Asset>('/assets', data).then((r) => r.data),
+    api.post<Asset>("/assets", data).then((r) => r.data),
 
   updateAsset: (id: string, data: Partial<CreateAssetInput>): Promise<Asset> =>
     api.patch<Asset>(`/assets/${id}`, data).then((r) => r.data),
 
-  getAssetHistory: (id: string, filters?: AssetHistoryFilters): Promise<AssetHistoryEvent[]> =>
-    api.get<AssetHistoryEvent[]>(`/assets/${id}/history`, { params: filters }).then((r) => r.data),
+  getAssetHistory: (
+    id: string,
+    filters?: AssetHistoryFilters,
+  ): Promise<AssetHistoryEvent[]> =>
+    api
+      .get<AssetHistoryEvent[]>(`/assets/${id}/history`, { params: filters })
+      .then((r) => r.data),
 
   getAssetDocuments: (id: string): Promise<AssetDocument[]> =>
     api.get<AssetDocument[]>(`/assets/${id}/documents`).then((r) => r.data),
 
   getMaintenanceRecords: (id: string): Promise<MaintenanceRecord[]> =>
-    api.get<MaintenanceRecord[]>(`/assets/${id}/maintenance`).then((r) => r.data),
+    api
+      .get<MaintenanceRecord[]>(`/assets/${id}/maintenance`)
+      .then((r) => r.data),
 
   getAssetNotes: (id: string): Promise<AssetNote[]> =>
     api.get<AssetNote[]>(`/assets/${id}/notes`).then((r) => r.data),
 
   getDepartments: (): Promise<DepartmentWithCount[]> =>
-    api.get<DepartmentWithCount[]>('/departments').then((r) => r.data),
+    api.get<DepartmentWithCount[]>("/departments").then((r) => r.data),
 
-  createDepartment: (data: { name: string; description?: string }): Promise<Department> =>
-    api.post<Department>('/departments', data).then((r) => r.data),
+  createDepartment: (data: {
+    name: string;
+    description?: string;
+  }): Promise<Department> =>
+    api.post<Department>("/departments", data).then((r) => r.data),
 
   deleteDepartment: (id: string): Promise<void> =>
     api.delete(`/departments/${id}`).then(() => undefined),
 
-  updateDepartment: (id: string, data: { name?: string; description?: string }): Promise<Department> =>
+  updateDepartment: (
+    id: string,
+    data: { name?: string; description?: string },
+  ): Promise<Department> =>
     api.patch<Department>(`/departments/${id}`, data).then((r) => r.data),
 
   getCategories: (): Promise<CategoryWithCount[]> =>
-    api.get<CategoryWithCount[]>('/categories').then((r) => r.data),
+    api.get<CategoryWithCount[]>("/categories").then((r) => r.data),
 
-  createCategory: (data: { name: string; description?: string }): Promise<{ id: string; name: string }> =>
-    api.post<{ id: string; name: string }>('/categories', data).then((r) => r.data),
+  createCategory: (data: {
+    name: string;
+    description?: string;
+  }): Promise<{ id: string; name: string }> =>
+    api
+      .post<{ id: string; name: string }>("/categories", data)
+      .then((r) => r.data),
 
   deleteCategory: (id: string): Promise<void> =>
     api.delete(`/categories/${id}`).then(() => undefined),
 
-  updateCategory: (id: string, data: { name?: string; description?: string }): Promise<{ id: string; name: string }> =>
-    api.patch<{ id: string; name: string }>(`/categories/${id}`, data).then((r) => r.data),
+  updateCategory: (
+    id: string,
+    data: { name?: string; description?: string },
+  ): Promise<{ id: string; name: string }> =>
+    api
+      .patch<{ id: string; name: string }>(`/categories/${id}`, data)
+      .then((r) => r.data),
 
   getUsers: (): Promise<AssetUser[]> =>
-    api.get<AssetUser[]>('/users').then((r) => r.data),
+    api.get<AssetUser[]>("/users").then((r) => r.data),
 
-  updateAssetStatus: (id: string, data: UpdateAssetStatusInput): Promise<Asset> =>
+  updateAssetStatus: (
+    id: string,
+    data: UpdateAssetStatusInput,
+  ): Promise<Asset> =>
     api.patch<Asset>(`/assets/${id}/status`, data).then((r) => r.data),
 
   transferAsset: (id: string, data: TransferAssetInput): Promise<Asset> =>
@@ -126,22 +156,33 @@ export const assetApiClient = {
   deleteAsset: (id: string): Promise<void> =>
     api.delete(`/assets/${id}`).then(() => undefined),
 
-  uploadDocument: (assetId: string, file: File, name?: string): Promise<AssetDocument> => {
+  uploadDocument: (
+    assetId: string,
+    file: File,
+    name?: string,
+  ): Promise<AssetDocument> => {
     const form = new FormData();
-    form.append('file', file);
-    if (name) form.append('name', name);
+    form.append("file", file);
+    if (name) form.append("name", name);
     return api
       .post<AssetDocument>(`/assets/${assetId}/documents`, form, {
-        headers: { 'Content-Type': 'multipart/form-data' },
+        headers: { "Content-Type": "multipart/form-data" },
       })
       .then((r) => r.data);
   },
 
   deleteDocument: (assetId: string, documentId: string): Promise<void> =>
-    api.delete(`/assets/${assetId}/documents/${documentId}`).then(() => undefined),
+    api
+      .delete(`/assets/${assetId}/documents/${documentId}`)
+      .then(() => undefined),
 
-  createMaintenanceRecord: (assetId: string, data: CreateMaintenanceInput): Promise<MaintenanceRecord> =>
-    api.post<MaintenanceRecord>(`/assets/${assetId}/maintenance`, data).then((r) => r.data),
+  createMaintenanceRecord: (
+    assetId: string,
+    data: CreateMaintenanceInput,
+  ): Promise<MaintenanceRecord> =>
+    api
+      .post<MaintenanceRecord>(`/assets/${assetId}/maintenance`, data)
+      .then((r) => r.data),
 
   createNote: (assetId: string, data: CreateNoteInput): Promise<AssetNote> =>
     api.post<AssetNote>(`/assets/${assetId}/notes`, data).then((r) => r.data),
@@ -155,25 +196,74 @@ export const assetApiClient = {
     status: string,
   ): Promise<MaintenanceRecord> =>
     api
-      .patch<MaintenanceRecord>(`/assets/${assetId}/maintenance/${maintenanceId}`, { status })
+      .patch<MaintenanceRecord>(
+        `/assets/${assetId}/maintenance/${maintenanceId}`,
+        { status },
+      )
       .then((r) => r.data),
 
   // Stellar token operations
   getTokenHolders: (assetId: string): Promise<TokenHolder[]> =>
-    api.get<TokenHolder[]>(`/stellar/assets/${assetId}/tokens`).then((r) => r.data),
+    api
+      .get<TokenHolder[]>(`/stellar/assets/${assetId}/tokens`)
+      .then((r) => r.data),
 
   getTokenSummary: (assetId: string): Promise<TokenSummary> =>
-    api.get<TokenSummary>(`/stellar/assets/${assetId}/tokens/summary`).then((r) => r.data),
+    api
+      .get<TokenSummary>(`/stellar/assets/${assetId}/tokens/summary`)
+      .then((r) => r.data),
 
   transferTokens: (assetId: string, data: TransferTokensInput): Promise<void> =>
-    api.post(`/stellar/assets/${assetId}/tokens/transfer`, data).then(() => undefined),
+    api
+      .post(`/stellar/assets/${assetId}/tokens/transfer`, data)
+      .then(() => undefined),
 
   lockTokens: (assetId: string): Promise<TokenLockStatus> =>
-    api.post<TokenLockStatus>(`/stellar/assets/${assetId}/tokens/lock`).then((r) => r.data),
+    api
+      .post<TokenLockStatus>(`/stellar/assets/${assetId}/tokens/lock`)
+      .then((r) => r.data),
 
   unlockTokens: (assetId: string): Promise<TokenLockStatus> =>
-    api.post<TokenLockStatus>(`/stellar/assets/${assetId}/tokens/unlock`).then((r) => r.data),
+    api
+      .post<TokenLockStatus>(`/stellar/assets/${assetId}/tokens/unlock`)
+      .then((r) => r.data),
 
   getTokenLockStatus: (assetId: string): Promise<TokenLockStatus> =>
-    api.get<TokenLockStatus>(`/stellar/assets/${assetId}/tokens/lock-status`).then((r) => r.data),
+    api
+      .get<TokenLockStatus>(`/stellar/assets/${assetId}/tokens/lock-status`)
+      .then((r) => r.data),
+
+  // Asset disposal operations
+  createDisposalRequest: (
+    assetId: string,
+    data: CreateDisposalInput,
+  ): Promise<DisposalRequest> =>
+    api
+      .post<DisposalRequest>(`/assets/${assetId}/disposal`, data)
+      .then((r) => r.data),
+
+  approveDisposal: (
+    assetId: string,
+    disposalId: string,
+  ): Promise<DisposalRequest> =>
+    api
+      .patch<DisposalRequest>(
+        `/assets/${assetId}/disposal/${disposalId}/approve`,
+      )
+      .then((r) => r.data),
+
+  rejectDisposal: (
+    assetId: string,
+    disposalId: string,
+    reason: string,
+  ): Promise<DisposalRequest> =>
+    api
+      .patch<DisposalRequest>(
+        `/assets/${assetId}/disposal/${disposalId}/reject`,
+        { reason },
+      )
+      .then((r) => r.data),
+
+  getPendingDisposals: (): Promise<DisposalRequest[]> =>
+    api.get<DisposalRequest[]>("/assets/disposals/pending").then((r) => r.data),
 };
diff --git a/frontend/lib/api/contracts.ts b/frontend/lib/api/contracts.ts
new file mode 100644
index 000000000..80b28954d
--- /dev/null
+++ b/frontend/lib/api/contracts.ts
@@ -0,0 +1,69 @@
+// frontend/lib/api/contracts.ts
+import { api } from "@/lib/api";
+import {
+  Contract,
+  ContractListResponse,
+  ContractListFilters,
+  CreateContractInput,
+  UpdateContractInput,
+  ContractUploadResponse,
+} from "@/lib/query/types/contract";
+
+export const contractApiClient = {
+  getContracts: async (
+    filters?: ContractListFilters,
+  ): Promise<ContractListResponse> => {
+    const params = new URLSearchParams();
+    if (filters?.search) params.append("search", filters.search);
+    if (filters?.status) params.append("status", filters.status);
+    if (filters?.vendor) params.append("vendor", filters.vendor);
+    if (filters?.page) params.append("page", filters.page.toString());
+    if (filters?.limit) params.append("limit", filters.limit.toString());
+
+    const { data } = await api.get<ContractListResponse>(
+      `/contracts?${params.toString()}`,
+    );
+    return data;
+  },
+
+  getContract: async (id: string): Promise<Contract> => {
+    const { data } = await api.get<Contract>(`/contracts/${id}`);
+    return data;
+  },
+
+  createContract: async (input: CreateContractInput): Promise<Contract> => {
+    const { data } = await api.post<Contract>("/contracts", input);
+    return data;
+  },
+
+  updateContract: async (
+    id: string,
+    input: UpdateContractInput,
+  ): Promise<Contract> => {
+    const { data } = await api.put<Contract>(`/contracts/${id}`, input);
+    return data;
+  },
+
+  uploadContractDocument: async (
+    id: string,
+    file: File,
+  ): Promise<ContractUploadResponse> => {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const { data } = await api.post<ContractUploadResponse>(
+      `/contracts/${id}/document`,
+      formData,
+      {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      },
+    );
+    return data;
+  },
+
+  deleteContract: async (id: string): Promise<void> => {
+    await api.delete(`/contracts/${id}`);
+  },
+};
diff --git a/frontend/lib/query/hooks/useAsset.ts b/frontend/lib/query/hooks/useAsset.ts
index 20bb558a7..5f16a10bb 100644
--- a/frontend/lib/query/hooks/useAsset.ts
+++ b/frontend/lib/query/hooks/useAsset.ts
@@ -4,9 +4,9 @@ import {
   useQueryClient,
   UseQueryOptions,
   UseMutationOptions,
-} from '@tanstack/react-query';
-import { assetApiClient } from '@/lib/api/assets';
-import { queryKeys } from '../keys';
+} from "@tanstack/react-query";
+import { assetApiClient } from "@/lib/api/assets";
+import { queryKeys } from "../keys";
 import {
   Asset,
   AssetHistoryEvent,
@@ -24,13 +24,15 @@ import {
   TokenSummary,
   TransferTokensInput,
   TokenLockStatus,
-} from '../types/asset';
-import { ApiError } from '../types';
+  DisposalRequest,
+  CreateDisposalInput,
+} from "../types/asset";
+import { ApiError } from "../types";
 
 // Queries
 export function useAsset(
   id: string,
-  options?: Omit<UseQueryOptions<Asset, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<UseQueryOptions<Asset, ApiError>, "queryKey" | "queryFn">,
 ) {
   return useQuery<Asset, ApiError>({
     queryKey: queryKeys.assets.detail(id),
@@ -43,10 +45,16 @@ export function useAsset(
 export function useAssetHistory(
   id: string,
   filters?: AssetHistoryFilters,
-  options?: Omit<UseQueryOptions<AssetHistoryEvent[], ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<AssetHistoryEvent[], ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<AssetHistoryEvent[], ApiError>({
-    queryKey: queryKeys.assets.history(id, filters as Record<string, unknown> | undefined),
+    queryKey: queryKeys.assets.history(
+      id,
+      filters as Record<string, unknown> | undefined,
+    ),
     queryFn: () => assetApiClient.getAssetHistory(id, filters),
     enabled: !!id,
     ...options,
@@ -55,7 +63,10 @@ export function useAssetHistory(
 
 export function useAssetDocuments(
   id: string,
-  options?: Omit<UseQueryOptions<AssetDocument[], ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<AssetDocument[], ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<AssetDocument[], ApiError>({
     queryKey: queryKeys.assets.documents(id),
@@ -67,7 +78,10 @@ export function useAssetDocuments(
 
 export function useMaintenanceRecords(
   id: string,
-  options?: Omit<UseQueryOptions<MaintenanceRecord[], ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<MaintenanceRecord[], ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<MaintenanceRecord[], ApiError>({
     queryKey: queryKeys.assets.maintenance(id),
@@ -79,7 +93,10 @@ export function useMaintenanceRecords(
 
 export function useAssetNotes(
   id: string,
-  options?: Omit<UseQueryOptions<AssetNote[], ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<AssetNote[], ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<AssetNote[], ApiError>({
     queryKey: queryKeys.assets.notes(id),
@@ -90,7 +107,10 @@ export function useAssetNotes(
 }
 
 export function useDepartments(
-  options?: Omit<UseQueryOptions<Department[], ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<Department[], ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<Department[], ApiError>({
     queryKey: queryKeys.departments.list(),
@@ -100,7 +120,10 @@ export function useDepartments(
 }
 
 export function useUsers(
-  options?: Omit<UseQueryOptions<AssetUser[], ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<AssetUser[], ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<AssetUser[], ApiError>({
     queryKey: queryKeys.users.list(),
@@ -112,7 +135,7 @@ export function useUsers(
 // Mutations
 export function useUpdateAssetStatus(
   id: string,
-  options?: UseMutationOptions<Asset, ApiError, UpdateAssetStatusInput>
+  options?: UseMutationOptions<Asset, ApiError, UpdateAssetStatusInput>,
 ) {
   const queryClient = useQueryClient();
 
@@ -128,7 +151,7 @@ export function useUpdateAssetStatus(
 
 export function useTransferAsset(
   id: string,
-  options?: UseMutationOptions<Asset, ApiError, TransferAssetInput>
+  options?: UseMutationOptions<Asset, ApiError, TransferAssetInput>,
 ) {
   const queryClient = useQueryClient();
 
@@ -144,7 +167,7 @@ export function useTransferAsset(
 
 export function useDeleteAsset(
   id: string,
-  options?: UseMutationOptions<void, ApiError, void>
+  options?: UseMutationOptions<void, ApiError, void>,
 ) {
   const queryClient = useQueryClient();
 
@@ -159,15 +182,24 @@ export function useDeleteAsset(
 
 export function useUploadDocument(
   assetId: string,
-  options?: UseMutationOptions<AssetDocument, ApiError, { file: File; name?: string }>
+  options?: UseMutationOptions<
+    AssetDocument,
+    ApiError,
+    { file: File; name?: string }
+  >,
 ) {
   const queryClient = useQueryClient();
 
   return useMutation<AssetDocument, ApiError, { file: File; name?: string }>({
-    mutationFn: ({ file, name }) => assetApiClient.uploadDocument(assetId, file, name),
+    mutationFn: ({ file, name }) =>
+      assetApiClient.uploadDocument(assetId, file, name),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.documents(assetId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.history(assetId) });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.documents(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.history(assetId),
+      });
     },
     ...options,
   });
@@ -175,15 +207,20 @@ export function useUploadDocument(
 
 export function useDeleteDocument(
   assetId: string,
-  options?: UseMutationOptions<void, ApiError, string>
+  options?: UseMutationOptions<void, ApiError, string>,
 ) {
   const queryClient = useQueryClient();
 
   return useMutation<void, ApiError, string>({
-    mutationFn: (documentId) => assetApiClient.deleteDocument(assetId, documentId),
+    mutationFn: (documentId) =>
+      assetApiClient.deleteDocument(assetId, documentId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.documents(assetId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.history(assetId) });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.documents(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.history(assetId),
+      });
     },
     ...options,
   });
@@ -191,15 +228,23 @@ export function useDeleteDocument(
 
 export function useCreateMaintenanceRecord(
   assetId: string,
-  options?: UseMutationOptions<MaintenanceRecord, ApiError, CreateMaintenanceInput>
+  options?: UseMutationOptions<
+    MaintenanceRecord,
+    ApiError,
+    CreateMaintenanceInput
+  >,
 ) {
   const queryClient = useQueryClient();
 
   return useMutation<MaintenanceRecord, ApiError, CreateMaintenanceInput>({
     mutationFn: (data) => assetApiClient.createMaintenanceRecord(assetId, data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.maintenance(assetId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.history(assetId) });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.maintenance(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.history(assetId),
+      });
     },
     ...options,
   });
@@ -207,15 +252,19 @@ export function useCreateMaintenanceRecord(
 
 export function useCreateNote(
   assetId: string,
-  options?: UseMutationOptions<AssetNote, ApiError, CreateNoteInput>
+  options?: UseMutationOptions<AssetNote, ApiError, CreateNoteInput>,
 ) {
   const queryClient = useQueryClient();
 
   return useMutation<AssetNote, ApiError, CreateNoteInput>({
     mutationFn: (data) => assetApiClient.createNote(assetId, data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.notes(assetId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.history(assetId) });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.notes(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.history(assetId),
+      });
     },
     ...options,
   });
@@ -223,14 +272,16 @@ export function useCreateNote(
 
 export function useDeleteNote(
   assetId: string,
-  options?: UseMutationOptions<void, ApiError, string>
+  options?: UseMutationOptions<void, ApiError, string>,
 ) {
   const queryClient = useQueryClient();
 
   return useMutation<void, ApiError, string>({
     mutationFn: (noteId) => assetApiClient.deleteNote(assetId, noteId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.notes(assetId) });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.notes(assetId),
+      });
     },
     ...options,
   });
@@ -238,15 +289,25 @@ export function useDeleteNote(
 
 export function useUpdateMaintenanceStatus(
   assetId: string,
-  options?: UseMutationOptions<MaintenanceRecord, ApiError, { maintenanceId: string; status: string }>
+  options?: UseMutationOptions<
+    MaintenanceRecord,
+    ApiError,
+    { maintenanceId: string; status: string }
+  >,
 ) {
   const queryClient = useQueryClient();
 
-  return useMutation<MaintenanceRecord, ApiError, { maintenanceId: string; status: string }>({
+  return useMutation<
+    MaintenanceRecord,
+    ApiError,
+    { maintenanceId: string; status: string }
+  >({
     mutationFn: ({ maintenanceId, status }) =>
       assetApiClient.updateMaintenanceStatus(assetId, maintenanceId, status),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.assets.maintenance(assetId) });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.maintenance(assetId),
+      });
     },
     ...options,
   });
@@ -255,10 +316,13 @@ export function useUpdateMaintenanceStatus(
 // Token-related queries and mutations
 export function useTokenHolders(
   assetId: string,
-  options?: Omit<UseQueryOptions<TokenHolder[], ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<TokenHolder[], ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<TokenHolder[], ApiError>({
-    queryKey: ['tokenHolders', assetId],
+    queryKey: ["tokenHolders", assetId],
     queryFn: () => assetApiClient.getTokenHolders(assetId),
     enabled: !!assetId,
     ...options,
@@ -267,10 +331,13 @@ export function useTokenHolders(
 
 export function useTokenSummary(
   assetId: string,
-  options?: Omit<UseQueryOptions<TokenSummary, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<TokenSummary, ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<TokenSummary, ApiError>({
-    queryKey: ['tokenSummary', assetId],
+    queryKey: ["tokenSummary", assetId],
     queryFn: () => assetApiClient.getTokenSummary(assetId),
     enabled: !!assetId,
     ...options,
@@ -279,10 +346,13 @@ export function useTokenSummary(
 
 export function useTokenLockStatus(
   assetId: string,
-  options?: Omit<UseQueryOptions<TokenLockStatus, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<
+    UseQueryOptions<TokenLockStatus, ApiError>,
+    "queryKey" | "queryFn"
+  >,
 ) {
   return useQuery<TokenLockStatus, ApiError>({
-    queryKey: ['tokenLockStatus', assetId],
+    queryKey: ["tokenLockStatus", assetId],
     queryFn: () => assetApiClient.getTokenLockStatus(assetId),
     enabled: !!assetId,
     ...options,
@@ -291,15 +361,15 @@ export function useTokenLockStatus(
 
 export function useTransferTokens(
   assetId: string,
-  options?: UseMutationOptions<void, ApiError, TransferTokensInput>
+  options?: UseMutationOptions<void, ApiError, TransferTokensInput>,
 ) {
   const queryClient = useQueryClient();
 
   return useMutation<void, ApiError, TransferTokensInput>({
     mutationFn: (data) => assetApiClient.transferTokens(assetId, data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['tokenHolders', assetId] });
-      queryClient.invalidateQueries({ queryKey: ['tokenSummary', assetId] });
+      queryClient.invalidateQueries({ queryKey: ["tokenHolders", assetId] });
+      queryClient.invalidateQueries({ queryKey: ["tokenSummary", assetId] });
     },
     ...options,
   });
@@ -307,14 +377,14 @@ export function useTransferTokens(
 
 export function useLockTokens(
   assetId: string,
-  options?: UseMutationOptions<TokenLockStatus, ApiError, void>
+  options?: UseMutationOptions<TokenLockStatus, ApiError, void>,
 ) {
   const queryClient = useQueryClient();
 
   return useMutation<TokenLockStatus, ApiError, void>({
     mutationFn: () => assetApiClient.lockTokens(assetId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['tokenLockStatus', assetId] });
+      queryClient.invalidateQueries({ queryKey: ["tokenLockStatus", assetId] });
     },
     ...options,
   });
@@ -322,15 +392,87 @@ export function useLockTokens(
 
 export function useUnlockTokens(
   assetId: string,
-  options?: UseMutationOptions<TokenLockStatus, ApiError, void>
+  options?: UseMutationOptions<TokenLockStatus, ApiError, void>,
 ) {
   const queryClient = useQueryClient();
 
   return useMutation<TokenLockStatus, ApiError, void>({
     mutationFn: () => assetApiClient.unlockTokens(assetId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['tokenLockStatus', assetId] });
+      queryClient.invalidateQueries({ queryKey: ["tokenLockStatus", assetId] });
     },
     ...options,
   });
 }
+
+// ── Asset Disposal ───────────────────────────────────────────
+
+export function useCreateDisposalRequest(
+  assetId: string,
+  options?: { onSuccess?: () => void },
+) {
+  const queryClient = useQueryClient();
+  return useMutation<DisposalRequest, ApiError, CreateDisposalInput>({
+    mutationFn: (data) => assetApiClient.createDisposalRequest(assetId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.detail(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.disposals.pending(),
+      });
+      options?.onSuccess?.();
+    },
+    ...options,
+  });
+}
+
+export function useApproveDisposal(
+  assetId: string,
+  disposalId: string,
+  options?: { onSuccess?: () => void },
+) {
+  const queryClient = useQueryClient();
+  return useMutation<DisposalRequest, ApiError, void>({
+    mutationFn: () => assetApiClient.approveDisposal(assetId, disposalId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.detail(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.disposals.pending(),
+      });
+      options?.onSuccess?.();
+    },
+    ...options,
+  });
+}
+
+export function useRejectDisposal(
+  assetId: string,
+  disposalId: string,
+  options?: { onSuccess?: () => void },
+) {
+  const queryClient = useQueryClient();
+  return useMutation<DisposalRequest, ApiError, { reason: string }>({
+    mutationFn: ({ reason }) =>
+      assetApiClient.rejectDisposal(assetId, disposalId, reason),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.detail(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.disposals.pending(),
+      });
+      options?.onSuccess?.();
+    },
+    ...options,
+  });
+}
+
+export function usePendingDisposals() {
+  return useQuery<DisposalRequest[], ApiError>({
+    queryKey: queryKeys.disposals.pending(),
+    queryFn: () => assetApiClient.getPendingDisposals(),
+  });
+}
diff --git a/frontend/lib/query/hooks/useAssets.ts b/frontend/lib/query/hooks/useAssets.ts
index 162e98538..4a360fa8c 100644
--- a/frontend/lib/query/hooks/useAssets.ts
+++ b/frontend/lib/query/hooks/useAssets.ts
@@ -14,7 +14,15 @@ import {
   CategoryWithCount,
 } from "@/lib/api/assets";
 import { queryKeys } from "../keys";
-import { Asset, AssetUser, UpdateAssetStatusInput, TransferAssetInput, UpdateAssetInput } from "../types/asset";
+import {
+  Asset,
+  AssetUser,
+  UpdateAssetStatusInput,
+  TransferAssetInput,
+  UpdateAssetInput,
+  DisposalRequest,
+  CreateDisposalInput,
+} from "../types/asset";
 import { ApiError, Category } from "../types";
 import { api } from "@/lib/api";
 
@@ -83,8 +91,9 @@ export function useUpdateDepartment() {
 
 export function useCategories() {
   return useQuery({
-    queryKey: ['categories'],
-    queryFn: () => api.get<Category[]>('/categories').then((r) => r.data),
+    queryKey: ["categories"],
+    queryFn: () =>
+      api.get<CategoryWithCount[]>("/categories").then((r) => r.data),
   });
 }
 
@@ -147,8 +156,8 @@ export function useUpdateAsset(
     mutationFn: (data: UpdateAssetInput) =>
       api.patch<Asset>(`/assets/${assetId}`, data).then((r) => r.data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['assets'] });
-      queryClient.invalidateQueries({ queryKey: ['asset', assetId] });
+      queryClient.invalidateQueries({ queryKey: ["assets"] });
+      queryClient.invalidateQueries({ queryKey: ["asset", assetId] });
       options?.onSuccess?.();
     },
   });
@@ -180,7 +189,76 @@ export function useTransferAsset(id: string) {
 
 export function useUsers() {
   return useQuery<AssetUser[], ApiError>({
-    queryKey: ['users'], // Wait, let's see if queryKeys has users
+    queryKey: ["users"], // Wait, let's see if queryKeys has users
     queryFn: () => assetApiClient.getUsers(),
   });
 }
+
+// ── Asset Disposal ───────────────────────────────────────────
+
+export function useCreateDisposalRequest(
+  assetId: string,
+  options?: { onSuccess?: () => void },
+) {
+  const queryClient = useQueryClient();
+  return useMutation<DisposalRequest, ApiError, CreateDisposalInput>({
+    mutationFn: (data) => assetApiClient.createDisposalRequest(assetId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.detail(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.disposals.pending(),
+      });
+      options?.onSuccess?.();
+    },
+  });
+}
+
+export function useApproveDisposal(
+  assetId: string,
+  disposalId: string,
+  options?: { onSuccess?: () => void },
+) {
+  const queryClient = useQueryClient();
+  return useMutation<DisposalRequest, ApiError, void>({
+    mutationFn: () => assetApiClient.approveDisposal(assetId, disposalId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.detail(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.disposals.pending(),
+      });
+      options?.onSuccess?.();
+    },
+  });
+}
+
+export function useRejectDisposal(
+  assetId: string,
+  disposalId: string,
+  options?: { onSuccess?: () => void },
+) {
+  const queryClient = useQueryClient();
+  return useMutation<DisposalRequest, ApiError, { reason: string }>({
+    mutationFn: ({ reason }) =>
+      assetApiClient.rejectDisposal(assetId, disposalId, reason),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.assets.detail(assetId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.disposals.pending(),
+      });
+      options?.onSuccess?.();
+    },
+  });
+}
+
+export function usePendingDisposals() {
+  return useQuery<DisposalRequest[], ApiError>({
+    queryKey: queryKeys.disposals.pending(),
+    queryFn: () => assetApiClient.getPendingDisposals(),
+  });
+}
diff --git a/frontend/lib/query/hooks/useContracts.ts b/frontend/lib/query/hooks/useContracts.ts
new file mode 100644
index 000000000..8570daf73
--- /dev/null
+++ b/frontend/lib/query/hooks/useContracts.ts
@@ -0,0 +1,75 @@
+// frontend/lib/query/hooks/useContracts.ts
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { contractApiClient } from "@/lib/api/contracts";
+import { queryKeys } from "../keys";
+import {
+  Contract,
+  ContractListResponse,
+  ContractListFilters,
+  CreateContractInput,
+  UpdateContractInput,
+} from "../types/contract";
+import { ApiError } from "../types";
+
+export function useContracts(filters?: ContractListFilters) {
+  return useQuery<ContractListResponse, ApiError>({
+    queryKey: queryKeys.contracts.list(
+      (filters as Record<string, unknown>) ?? {},
+    ),
+    queryFn: () => contractApiClient.getContracts(filters),
+  });
+}
+
+export function useContract(id: string) {
+  return useQuery<Contract, ApiError>({
+    queryKey: queryKeys.contracts.detail(id),
+    queryFn: () => contractApiClient.getContract(id),
+    enabled: !!id,
+  });
+}
+
+export function useCreateContract() {
+  const queryClient = useQueryClient();
+  return useMutation<Contract, ApiError, CreateContractInput>({
+    mutationFn: (data) => contractApiClient.createContract(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.contracts.all });
+    },
+  });
+}
+
+export function useUpdateContract(id: string) {
+  const queryClient = useQueryClient();
+  return useMutation<Contract, ApiError, UpdateContractInput>({
+    mutationFn: (data) => contractApiClient.updateContract(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.contracts.all });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.contracts.detail(id),
+      });
+    },
+  });
+}
+
+export function useUploadContractDocument(id: string) {
+  const queryClient = useQueryClient();
+  return useMutation<{ key: string; url: string }, ApiError, { file: File }>({
+    mutationFn: ({ file }) =>
+      contractApiClient.uploadContractDocument(id, file),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.contracts.detail(id),
+      });
+    },
+  });
+}
+
+export function useDeleteContract() {
+  const queryClient = useQueryClient();
+  return useMutation<void, ApiError, string>({
+    mutationFn: (id) => contractApiClient.deleteContract(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.contracts.all });
+    },
+  });
+}
diff --git a/frontend/lib/query/index.ts b/frontend/lib/query/index.ts
index 07dbe8786..8fc4d4d68 100644
--- a/frontend/lib/query/index.ts
+++ b/frontend/lib/query/index.ts
@@ -1,4 +1,20 @@
-export { useAssets, useDepartmentsList, useCategories } from './hooks/useAssets';
-export { useReportsSummary } from './hooks/useReports';
-export { queryKeys } from './keys';
-export type { Asset, Department, Category, AppUser, ReportsSummary, AssetListResponse, AuthUser } from './types';
+export {
+  useAssets,
+  useDepartmentsList,
+  useCategories,
+  useCreateDisposalRequest,
+  useApproveDisposal,
+  useRejectDisposal,
+  usePendingDisposals,
+} from "./hooks/useAssets";
+export { useReportsSummary } from "./hooks/useReports";
+export { queryKeys } from "./keys";
+export type {
+  Asset,
+  Department,
+  Category,
+  AppUser,
+  ReportsSummary,
+  AssetListResponse,
+  AuthUser,
+} from "./types";
diff --git a/frontend/lib/query/keys.ts b/frontend/lib/query/keys.ts
index 357ff98bc..f608acebf 100644
--- a/frontend/lib/query/keys.ts
+++ b/frontend/lib/query/keys.ts
@@ -4,35 +4,51 @@
  */
 export const queryKeys = {
   auth: {
-    register: ['auth', 'register'] as const,
-    login: ['auth', 'login'] as const,
+    register: ["auth", "register"] as const,
+    login: ["auth", "login"] as const,
   },
   assets: {
-    all: ['assets'] as const,
-    lists: () => [...queryKeys.assets.all, 'list'] as const,
-    list: (filters: Record<string, unknown>) => [...queryKeys.assets.lists(), filters] as const,
-    details: () => [...queryKeys.assets.all, 'detail'] as const,
+    all: ["assets"] as const,
+    lists: () => [...queryKeys.assets.all, "list"] as const,
+    list: (filters: Record<string, unknown>) =>
+      [...queryKeys.assets.lists(), filters] as const,
+    details: () => [...queryKeys.assets.all, "detail"] as const,
     detail: (id: string) => [...queryKeys.assets.details(), id] as const,
     history: (id: string, filters?: Record<string, unknown>) =>
-      [...queryKeys.assets.detail(id), 'history', filters] as const,
-    documents: (id: string) => [...queryKeys.assets.detail(id), 'documents'] as const,
-    maintenance: (id: string) => [...queryKeys.assets.detail(id), 'maintenance'] as const,
-    notes: (id: string) => [...queryKeys.assets.detail(id), 'notes'] as const,
+      [...queryKeys.assets.detail(id), "history", filters] as const,
+    documents: (id: string) =>
+      [...queryKeys.assets.detail(id), "documents"] as const,
+    maintenance: (id: string) =>
+      [...queryKeys.assets.detail(id), "maintenance"] as const,
+    notes: (id: string) => [...queryKeys.assets.detail(id), "notes"] as const,
   },
   departments: {
-    all: ['departments'] as const,
-    list: () => [...queryKeys.departments.all, 'list'] as const,
+    all: ["departments"] as const,
+    list: () => [...queryKeys.departments.all, "list"] as const,
   },
   categories: {
-    all: ['categories'] as const,
-    list: () => [...queryKeys.categories.all, 'list'] as const,
+    all: ["categories"] as const,
+    list: () => [...queryKeys.categories.all, "list"] as const,
   },
   users: {
-    all: ['users'] as const,
-    list: () => [...queryKeys.users.all, 'list'] as const,
+    all: ["users"] as const,
+    list: () => [...queryKeys.users.all, "list"] as const,
   },
   reports: {
-    all: ['reports'] as const,
-    summary: () => [...queryKeys.reports.all, 'summary'] as const,
+    all: ["reports"] as const,
+    summary: () => [...queryKeys.reports.all, "summary"] as const,
   },
-} as const;
\ No newline at end of file
+  contracts: {
+    all: ["contracts"] as const,
+    lists: () => [...queryKeys.contracts.all, "list"] as const,
+    list: (filters: Record<string, unknown>) =>
+      [...queryKeys.contracts.lists(), filters] as const,
+    details: () => [...queryKeys.contracts.all, "detail"] as const,
+    detail: (id: string) => [...queryKeys.contracts.details(), id] as const,
+    expiring: () => [...queryKeys.contracts.all, "expiring"] as const,
+  },
+  disposals: {
+    all: ["disposals"] as const,
+    pending: () => [...queryKeys.disposals.all, "pending"] as const,
+  },
+} as const;
diff --git a/frontend/lib/query/types/asset.ts b/frontend/lib/query/types/asset.ts
index 28cdeb5d7..190de9649 100644
--- a/frontend/lib/query/types/asset.ts
+++ b/frontend/lib/query/types/asset.ts
@@ -3,18 +3,18 @@
  */
 
 export enum AssetStatus {
-  ACTIVE = 'ACTIVE',
-  ASSIGNED = 'ASSIGNED',
-  MAINTENANCE = 'MAINTENANCE',
-  RETIRED = 'RETIRED',
+  ACTIVE = "ACTIVE",
+  ASSIGNED = "ASSIGNED",
+  MAINTENANCE = "MAINTENANCE",
+  RETIRED = "RETIRED",
 }
 
 export enum AssetCondition {
-  NEW = 'NEW',
-  GOOD = 'GOOD',
-  FAIR = 'FAIR',
-  POOR = 'POOR',
-  DAMAGED = 'DAMAGED',
+  NEW = "NEW",
+  GOOD = "GOOD",
+  FAIR = "FAIR",
+  POOR = "POOR",
+  DAMAGED = "DAMAGED",
 }
 
 export interface AssetCategory {
@@ -65,13 +65,13 @@ export interface Asset {
 }
 
 export type AssetHistoryAction =
-  | 'CREATED'
-  | 'UPDATED'
-  | 'STATUS_CHANGED'
-  | 'TRANSFERRED'
-  | 'MAINTENANCE'
-  | 'NOTE_ADDED'
-  | 'DOCUMENT_UPLOADED';
+  | "CREATED"
+  | "UPDATED"
+  | "STATUS_CHANGED"
+  | "TRANSFERRED"
+  | "MAINTENANCE"
+  | "NOTE_ADDED"
+  | "DOCUMENT_UPLOADED";
 
 export interface AssetHistoryEvent {
   id: string;
@@ -95,8 +95,12 @@ export interface AssetDocument {
   createdAt: string;
 }
 
-export type MaintenanceType = 'PREVENTIVE' | 'CORRECTIVE' | 'SCHEDULED';
-export type MaintenanceStatus = 'SCHEDULED' | 'IN_PROGRESS' | 'COMPLETED' | 'CANCELLED';
+export type MaintenanceType = "PREVENTIVE" | "CORRECTIVE" | "SCHEDULED";
+export type MaintenanceStatus =
+  | "SCHEDULED"
+  | "IN_PROGRESS"
+  | "COMPLETED"
+  | "CANCELLED";
 
 export interface MaintenanceRecord {
   id: string;
@@ -176,6 +180,8 @@ export interface TokenLockStatus {
   isLocked: boolean;
   lockedBy: string | null;
   lockedAt: string | null;
+}
+
 export interface Category {
   id: string;
   name: string;
@@ -199,3 +205,44 @@ export interface UpdateAssetInput {
   model?: string;
   notes?: string;
 }
+
+// ── Asset Disposal Types ─────────────────────────────────────────────────────
+
+export enum DisposalMethod {
+  SOLD = "SOLD",
+  DONATED = "DONATED",
+  SCRAPPED = "SCRAPPED",
+  RECYCLED = "RECYCLED",
+  LOST = "LOST",
+  STOLEN = "STOLEN",
+}
+
+export enum DisposalStatus {
+  PENDING = "PENDING",
+  APPROVED = "APPROVED",
+  REJECTED = "REJECTED",
+}
+
+export interface DisposalRequest {
+  id: string;
+  assetId: string;
+  method: DisposalMethod;
+  reason: string;
+  salePrice?: number;
+  status: DisposalStatus;
+  requestedBy: AssetUser;
+  approvedBy?: AssetUser;
+  rejectionReason?: string;
+  requestedAt: string;
+  approvedAt?: string;
+  asset?: {
+    name: string;
+    assetId: string;
+  };
+}
+
+export interface CreateDisposalInput {
+  method: DisposalMethod;
+  reason: string;
+  salePrice?: number;
+}
diff --git a/frontend/lib/query/types/contract.ts b/frontend/lib/query/types/contract.ts
new file mode 100644
index 000000000..79c514931
--- /dev/null
+++ b/frontend/lib/query/types/contract.ts
@@ -0,0 +1,97 @@
+// frontend/lib/query/types/contract.ts
+
+export enum ContractStatus {
+  DRAFT = "DRAFT",
+  ACTIVE = "ACTIVE",
+  EXPIRED = "EXPIRED",
+  PENDING_RENEWAL = "PENDING_RENEWAL",
+  TERMINATED = "TERMINATED",
+}
+
+export enum ContractType {
+  SERVICE = "SERVICE",
+  MAINTENANCE = "MAINTENANCE",
+  SUPPORT = "SUPPORT",
+  LICENSE = "LICENSE",
+  LEASE = "LEASE",
+  OTHER = "OTHER",
+}
+
+export interface Contract {
+  id: string;
+  contractId: string;
+  title: string;
+  vendor: string;
+  contractType?: ContractType;
+  startDate: string | null;
+  endDate: string | null;
+  value: number | null;
+  status: ContractStatus;
+  description: string | null;
+  documentUrl: string | null;
+  renewalAlertDays: number;
+  notes: string | null;
+  createdById: string | null;
+  createdBy?: {
+    id: string;
+    name: string;
+    email: string;
+  } | null;
+  assignedToId: string | null;
+  assignedTo?: {
+    id: string;
+    name: string;
+    email: string;
+  } | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ContractListResponse {
+  data: Contract[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export interface ContractListFilters {
+  search?: string;
+  status?: ContractStatus;
+  vendor?: string;
+  page?: number;
+  limit?: number;
+}
+
+export interface CreateContractInput {
+  title: string;
+  vendor: string;
+  contractType?: ContractType;
+  startDate?: string;
+  endDate?: string;
+  value?: number;
+  status?: ContractStatus;
+  description?: string;
+  renewalAlertDays?: number;
+  notes?: string;
+  assignedToId?: string;
+}
+
+export interface UpdateContractInput {
+  title?: string;
+  vendor?: string;
+  contractType?: ContractType;
+  startDate?: string;
+  endDate?: string;
+  value?: number;
+  status?: ContractStatus;
+  description?: string;
+  renewalAlertDays?: number;
+  notes?: string;
+  documentUrl?: string;
+  assignedToId?: string;
+}
+
+export interface ContractUploadResponse {
+  key: string;
+  url: string;
+}

From b803c3a6f0918abb84c507f97d8d0a3a92fde6d4 Mon Sep 17 00:00:00 2001
From: Mercy Duru <m-duru@leadway.com>
Date: Sun, 28 Jun 2026 00:47:03 +0100
Subject: [PATCH 2/3] ci error

---
 backend/.eslintrc.js                          |   1 +
 backend/package-lock.json                     | 196 +++++--------
 backend/package.json                          |   7 +-
 .../activity-log/activity-log.controller.ts   |  12 +-
 .../src/activity-log/activity-log.service.ts  |  18 +-
 .../entities/activity-log.entity.ts           |  10 +-
 backend/src/app.module.ts                     |  22 +-
 backend/src/assets/asset-audit.controller.ts  |  24 +-
 backend/src/assets/asset.entity.ts            |  22 +-
 .../src/assets/assets-extended.controller.ts  |  44 ++-
 backend/src/assets/assets-extended.module.ts  |  11 +-
 backend/src/assets/assets-extended.service.ts |  96 +++++-
 backend/src/assets/assets-ops.controller.ts   |  23 +-
 backend/src/assets/assets-ops.service.ts      |  58 ++--
 backend/src/assets/assets.controller.ts       |  26 +-
 backend/src/assets/assets.service.ts          |  74 ++++-
 backend/src/assets/dashboard.controller.ts    |  12 +-
 .../src/assets/dtos/asset-list-query.dto.ts   |   2 +-
 backend/src/assets/dtos/create-asset.dto.ts   |   2 +-
 .../src/assets/dtos/create-maintenance.dto.ts |   2 +-
 .../assets/entities/asset-document.entity.ts  |   9 +-
 .../assets/entities/asset-history.entity.ts   |   9 +-
 .../src/assets/entities/asset-note.entity.ts  |  10 +-
 backend/src/assets/entities/asset.entity.ts   |  10 +-
 .../entities/maintenance-record.entity.ts     |  10 +-
 backend/src/auth/auth.controller.ts           |   3 +-
 backend/src/auth/auth.module.ts               |   3 +-
 backend/src/auth/auth.service.spec.ts         |  45 ++-
 backend/src/auth/auth.service.ts              |  32 +-
 .../dtos/2fa/authenticate-two-factor.dto.ts   |   2 +-
 .../auth/dtos/2fa/disable-two-factor.dto.ts   |   2 +-
 .../auth/dtos/2fa/enable-two-factor.dto.ts    |   2 +-
 .../entities/password-reset-token.entity.ts   |   9 +-
 .../src/auth/entities/refresh-token.entity.ts |   9 +-
 .../src/auth/providers/two-factor.provider.ts |  14 +-
 .../src/auth/strategies/google.strategy.ts    |  12 +-
 .../src/auth/strategies/microsoft.strategy.ts |  12 +-
 backend/src/cache/cache.service.ts            |  14 +-
 .../src/categories/categories.controller.ts   |   8 +-
 backend/src/checkin/checkin.controller.ts     |  10 +-
 backend/src/checkin/checkin.entity.ts         |  10 +-
 backend/src/checkin/checkin.module.ts         |   6 +-
 backend/src/checkin/checkin.service.ts        |  63 +++-
 backend/src/common/api-response.ts            |   2 +-
 .../depreciation/depreciation.service.ts      |  31 +-
 backend/src/common/dto/pagination.dto.ts      |   2 +-
 .../common/filters/global-exception.filter.ts |  29 +-
 .../interceptors/response.interceptor.ts      |  19 +-
 backend/src/common/logger/logger.service.ts   |   7 +-
 backend/src/contracts/contracts.controller.ts |  23 +-
 backend/src/contracts/contracts.service.ts    |  24 +-
 .../src/contracts/entities/contract.entity.ts |  10 +-
 backend/src/data-source.ts                    |   2 +-
 .../src/inventory/dtos/inventory-query.dto.ts |   9 +-
 .../inventory/entities/inventory.entity.ts    |  10 +-
 backend/src/inventory/inventory.controller.ts |  12 +-
 backend/src/inventory/inventory.service.ts    |  37 ++-
 .../src/licenses/entities/license.entity.ts   |  10 +-
 backend/src/licenses/licenses.controller.ts   |  19 +-
 backend/src/licenses/licenses.service.ts      |  16 +-
 .../src/locations/entities/location.entity.ts |   8 +-
 backend/src/locations/locations.controller.ts |  16 +-
 backend/src/locations/locations.service.ts    |  10 +-
 backend/src/mail/mail.service.ts              | 125 +++++++-
 .../migrations/1700000000000-InitialSchema.ts |  10 +-
 .../dtos/create-notification.dto.ts           |  11 +
 .../entities/notification.entity.ts           |  53 ++++
 .../user-notification-preference.entity.ts    |  52 ++++
 .../enums/notification-event.enum.ts          |  13 +
 .../notification-dispatch.service.ts          | 102 +++++++
 .../src/notifications/notification.module.ts  |  17 ++
 .../notifications/notifications.service.ts    |  59 ++++
 .../dtos/create-purchase-order.dto.ts         |   8 +-
 .../dtos/update-purchase-order.dto.ts         |   8 +-
 .../entities/purchase-order.entity.ts         |  10 +-
 .../purchase-orders.controller.ts             |  32 +-
 .../purchase-orders.service.ts                |  40 ++-
 .../src/queue/processors/email.processor.ts   |  44 ++-
 .../src/queue/processors/export.processor.ts  |  81 ++++++
 backend/src/queue/queue.module.ts             |  15 +-
 backend/src/queue/queue.service.ts            |  23 +-
 backend/src/reporting/export.service.ts       | 211 ++++++++++++++
 backend/src/reporting/reporting.controller.ts | 274 +++++++++++++++++-
 backend/src/reporting/reporting.module.ts     |  10 +-
 backend/src/reporting/reporting.service.ts    |  83 +++++-
 backend/src/storage/storage.controller.ts     |  10 +-
 backend/src/storage/storage.service.ts        |  14 +-
 backend/src/tasks/tasks.module.ts             |   5 +-
 backend/src/tasks/tasks.service.ts            | 142 ++++++++-
 .../src/users/decorators/roles.decorator.ts   |   3 +-
 backend/src/users/departments.controller.ts   |  11 +-
 backend/src/users/dtos/create-user.dto.ts     |  16 +
 backend/src/users/dtos/update-user.dto.ts     |  16 +
 .../src/users/entities/department.entity.ts   |  11 +-
 backend/src/users/entities/role.entity.ts     |   8 +-
 backend/src/users/entities/user.entity.ts     |  10 +-
 backend/src/users/guards/roles.guard.ts       |   8 +-
 backend/src/users/roles.controller.ts         |  11 +-
 backend/src/users/users.controller.ts         |  20 +-
 backend/src/users/users.module.ts             |   5 +-
 backend/src/users/users.service.ts            |  31 +-
 backend/src/vendors/entities/vendor.entity.ts |   8 +-
 backend/src/vendors/vendors.controller.ts     |  22 +-
 backend/src/vendors/vendors.service.ts        |  15 +-
 backend/test/asset-crud.e2e-spec.ts           |   2 +-
 backend/test/contracts.e2e-spec.ts            |   4 +-
 backend/test/licenses.e2e-spec.ts             |   4 +-
 backend/test/locations.e2e-spec.ts            |   2 +-
 backend/test/purchase-orders.e2e-spec.ts      |   4 +-
 109 files changed, 2476 insertions(+), 449 deletions(-)
 create mode 100644 backend/src/notifications/dtos/create-notification.dto.ts
 create mode 100644 backend/src/notifications/entities/notification.entity.ts
 create mode 100644 backend/src/notifications/entities/user-notification-preference.entity.ts
 create mode 100644 backend/src/notifications/enums/notification-event.enum.ts
 create mode 100644 backend/src/notifications/notification-dispatch.service.ts
 create mode 100644 backend/src/notifications/notification.module.ts
 create mode 100644 backend/src/notifications/notifications.service.ts
 create mode 100644 backend/src/queue/processors/export.processor.ts
 create mode 100644 backend/src/reporting/export.service.ts

diff --git a/backend/.eslintrc.js b/backend/.eslintrc.js
index 259de13c7..d6f1f85cb 100644
--- a/backend/.eslintrc.js
+++ b/backend/.eslintrc.js
@@ -21,5 +21,6 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
   },
 };
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 57f56a07b..01ea04f03 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -10,6 +10,7 @@
       "license": "UNLICENSED",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.975.0",
+        "@aws-sdk/s3-request-presigner": "^3.1075.0",
         "@nestjs/bull": "^11.0.4",
         "@nestjs/cache-manager": "^3.1.0",
         "@nestjs/common": "^10.0.0",
@@ -53,6 +54,7 @@
         "passport-google-oauth20": "^2.0.0",
         "passport-jwt": "^4.0.1",
         "passport-local": "^1.0.0",
+        "passport-microsoft": "^1.0.0",
         "pdfkit": "^0.17.2",
         "pg": "^8.11.3",
         "qrcode": "^1.5.4",
@@ -76,7 +78,7 @@
         "@types/jest": "^29.5.2",
         "@types/json2csv": "^5.0.7",
         "@types/jsonwebtoken": "^9.0.10",
-        "@types/node": "^20.19.30",
+        "@types/node": "^20.19.43",
         "@types/node-cron": "^3.0.11",
         "@types/nodemailer": "^7.0.9",
         "@types/otplib": "^7.0.0",
@@ -84,7 +86,7 @@
         "@types/passport-google-oauth20": "^2.0.17",
         "@types/passport-jwt": "^4.0.1",
         "@types/passport-local": "^1.0.38",
-        "@types/pdfkit": "^0.17.3",
+        "@types/pdfkit": "^0.17.6",
         "@types/pg": "^8.10.0",
         "@types/qrcode": "^1.5.6",
         "@types/supertest": "^6.0.0",
@@ -548,23 +550,18 @@
       }
     },
     "node_modules/@aws-sdk/core": {
-      "version": "3.974.2",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/core/-/core-3.974.2.tgz",
-      "integrity": "sha512-oav5AOAz+1XkwUfp6SrEm42UPDpUP5D4jNYXkDwFR1VfWqYX62+jpytdfzURmJ9McSoJIQwi0OJlC4oCi6t0VQ==",
+      "version": "3.974.23",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/core/-/core-3.974.23.tgz",
+      "integrity": "sha512-MiWR/uWjxjFXGzrE0Ghc5lWxUxzHsUWFhV+OX7M4cR9SrmrnZs6TXavnCWnzzdwJeFri34xQo81rvGNzK3c4BQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/types": "^3.973.8",
-        "@aws-sdk/xml-builder": "^3.972.18",
-        "@smithy/core": "^3.23.15",
-        "@smithy/node-config-provider": "^4.3.14",
-        "@smithy/property-provider": "^4.2.14",
-        "@smithy/protocol-http": "^5.3.14",
-        "@smithy/signature-v4": "^5.3.14",
-        "@smithy/smithy-client": "^4.12.11",
-        "@smithy/types": "^4.14.1",
-        "@smithy/util-base64": "^4.3.2",
-        "@smithy/util-middleware": "^4.2.14",
-        "@smithy/util-utf8": "^4.2.2",
+        "@aws-sdk/types": "^3.973.13",
+        "@aws-sdk/xml-builder": "^3.972.31",
+        "@aws/lambda-invoke-store": "^0.2.2",
+        "@smithy/core": "^3.24.6",
+        "@smithy/signature-v4": "^5.4.6",
+        "@smithy/types": "^4.14.3",
+        "bowser": "^2.11.0",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -983,17 +980,32 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/s3-request-presigner": {
+      "version": "3.1075.0",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/s3-request-presigner/-/s3-request-presigner-3.1075.0.tgz",
+      "integrity": "sha512-++ftTvAGZSTuzFVHEPk8lLi7mybBD8PzJ9USWBvwnE4kSrXOyqYVJ5Ixd06xUEWS/xsrhpkI07mzCLGIxrRymA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.974.23",
+        "@aws-sdk/signature-v4-multi-region": "^3.996.35",
+        "@aws-sdk/types": "^3.973.13",
+        "@smithy/core": "^3.24.6",
+        "@smithy/types": "^4.14.3",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/signature-v4-multi-region": {
-      "version": "3.996.19",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/signature-v4-multi-region/-/signature-v4-multi-region-3.996.19.tgz",
-      "integrity": "sha512-7Sy8+GhfwUi06NQNLplxuJuXMKJURDsNQfK8yTW6E9wN2J1B+8S5dWZG7vg3InvPPhaXqkcYTr8pzeE+dLjMbQ==",
+      "version": "3.996.35",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/signature-v4-multi-region/-/signature-v4-multi-region-3.996.35.tgz",
+      "integrity": "sha512-6L/VWs+Wch2stHemCGTmUNqKLMzURxQDK5boNG3Jn3kAOp71meDUuS5sbObpEvFxHDq0uWeSLFDNSYsjNt+Dlg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/middleware-sdk-s3": "^3.972.31",
-        "@aws-sdk/types": "^3.973.8",
-        "@smithy/protocol-http": "^5.3.14",
-        "@smithy/signature-v4": "^5.3.14",
-        "@smithy/types": "^4.14.1",
+        "@aws-sdk/types": "^3.973.13",
+        "@smithy/signature-v4": "^5.4.6",
+        "@smithy/types": "^4.14.3",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -1019,12 +1031,12 @@
       }
     },
     "node_modules/@aws-sdk/types": {
-      "version": "3.973.8",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.973.8.tgz",
-      "integrity": "sha512-gjlAdtHMbtR9X5iIhVUvbVcy55KnznpC6bkDUWW9z915bi0ckdUr5cjf16Kp6xq0bP5HBD2xzgbL9F9Quv5vUw==",
+      "version": "3.973.13",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.973.13.tgz",
+      "integrity": "sha512-pEHZqRkAlHfnfAU9tK+WpKv/gBNjGJrHMgA3A0iYRGyswBS2t0pfez+lWlwktb3Bqa0ovh7w/QJTFwp3fDxLNg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/types": "^4.14.1",
+        "@smithy/types": "^4.14.3",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -1109,13 +1121,12 @@
       }
     },
     "node_modules/@aws-sdk/xml-builder": {
-      "version": "3.972.18",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.18.tgz",
-      "integrity": "sha512-BMDNVG1ETXRhl1tnisQiYBef3RShJ1kfZA7x7afivTFMLirfHNTb6U71K569HNXhSXbQZsweHvSDZ6euBw8hPA==",
+      "version": "3.972.31",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.31.tgz",
+      "integrity": "sha512-SzE4Pgyl+hDF+BuyuzxUSpwnuUu9lJuO1YGgteG89/4Qv0+2IQiVQqdbPV32IozLvXWQChPQcdkk/sKvb1QHiQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/types": "^4.14.1",
-        "fast-xml-parser": "5.5.8",
+        "@smithy/types": "^4.14.3",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -3958,20 +3969,13 @@
       }
     },
     "node_modules/@smithy/core": {
-      "version": "3.23.16",
-      "resolved": "https://registry.npmjs.org/@smithy/core/-/core-3.23.16.tgz",
-      "integrity": "sha512-JStomOrINQA1VqNEopLsgcdgwd42au7mykKqVr30XFw89wLt9sDxJDi4djVPRwQmmzyTGy/uOvTc2ultMpFi1w==",
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/@smithy/core/-/core-3.26.0.tgz",
+      "integrity": "sha512-mLUktFAn+Pa2agl1J7VgtYNFWCX8/b4GMJSK1hCu4YCvtBfM6F8Os3EP4ry+DFFlXOf3wyvlgXhuUdFoy52D3g==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/protocol-http": "^5.3.14",
-        "@smithy/types": "^4.14.1",
-        "@smithy/url-parser": "^4.2.14",
-        "@smithy/util-base64": "^4.3.2",
-        "@smithy/util-body-length-browser": "^4.2.2",
-        "@smithy/util-middleware": "^4.2.14",
-        "@smithy/util-stream": "^4.5.24",
-        "@smithy/util-utf8": "^4.2.2",
-        "@smithy/uuid": "^1.1.2",
+        "@aws-crypto/crc32": "5.2.0",
+        "@smithy/types": "^4.15.0",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -4354,18 +4358,13 @@
       }
     },
     "node_modules/@smithy/signature-v4": {
-      "version": "5.3.14",
-      "resolved": "https://registry.npmjs.org/@smithy/signature-v4/-/signature-v4-5.3.14.tgz",
-      "integrity": "sha512-1D9Y/nmlVjCeSivCbhZ7hgEpmHyY1h0GvpSZt3l0xcD9JjmjVC1CHOozS6+Gh+/ldMH8JuJ6cujObQqfayAVFA==",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@smithy/signature-v4/-/signature-v4-5.5.2.tgz",
+      "integrity": "sha512-7xHpmPY4rt0IOmeAA8EfjgEH8isT+587TCdy9H6a7d4OMi5CQ0oEHhWllunvPu4j4Cq0vTFwdxXN/kABWPjdyA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/is-array-buffer": "^4.2.2",
-        "@smithy/protocol-http": "^5.3.14",
-        "@smithy/types": "^4.14.1",
-        "@smithy/util-hex-encoding": "^4.2.2",
-        "@smithy/util-middleware": "^4.2.14",
-        "@smithy/util-uri-escape": "^4.2.2",
-        "@smithy/util-utf8": "^4.2.2",
+        "@smithy/core": "^3.26.0",
+        "@smithy/types": "^4.15.0",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -4391,9 +4390,9 @@
       }
     },
     "node_modules/@smithy/types": {
-      "version": "4.14.1",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-4.14.1.tgz",
-      "integrity": "sha512-59b5HtSVrVR/eYNei3BUj3DCPKD/G7EtDDe7OEJE7i7FtQFugYo6MxbotS8mVJkLNVf8gYaAlEBwwtJ9HzhWSg==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-4.15.0.tgz",
+      "integrity": "sha512-Z5TAOxygoFvybJV3igo5SloFflSokHx2hu1eFA+DxDTcn+FtKxUSui+rbTRG1pAafMA888Z3MVvCWUuvCrTXjg==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.6.2"
@@ -5059,9 +5058,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.19.39",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.39.tgz",
-      "integrity": "sha512-orrrD74MBUyK8jOAD/r0+lfa1I2MO6I+vAkmAWzMYbCcgrN4lCrmK52gRFQq/JRxfYPfonkr4b0jcY7Olqdqbw==",
+      "version": "20.19.43",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.43.tgz",
+      "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -8691,41 +8690,6 @@
       "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
       "license": "MIT"
     },
-    "node_modules/fast-xml-builder": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.5.tgz",
-      "integrity": "sha512-4TJn/8FKLeslLAH3dnohXqE3QSoxkhvaMzepOIZytwJXZO69Bfz0HBdDHzOTOon6G59Zrk6VQ2bEiv1t61rfkA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "path-expression-matcher": "^1.1.3"
-      }
-    },
-    "node_modules/fast-xml-parser": {
-      "version": "5.5.8",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.8.tgz",
-      "integrity": "sha512-Z7Fh2nVQSb2d+poDViM063ix2ZGt9jmY1nWhPfHBOK2Hgnb/OW3P4Et3P/81SEej0J7QbWtJqxO05h8QYfK7LQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "fast-xml-builder": "^1.1.4",
-        "path-expression-matcher": "^1.2.0",
-        "strnum": "^2.2.0"
-      },
-      "bin": {
-        "fxparser": "src/cli/cli.js"
-      }
-    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -12145,6 +12109,17 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/passport-microsoft": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/passport-microsoft/-/passport-microsoft-1.1.0.tgz",
+      "integrity": "sha512-yJyynEkGakK8SveCqILAvrpMBOKpx6TNyxL1ry+eW4m9/qqqDDOUahLdHj7wPSuDReHQ4jArGheH5v0/pNwR+g==",
+      "dependencies": {
+        "passport-oauth2": "1.8.0"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/passport-oauth2": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/passport-oauth2/-/passport-oauth2-1.8.0.tgz",
@@ -12182,21 +12157,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-expression-matcher": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.5.0.tgz",
-      "integrity": "sha512-cbrerZV+6rvdQrrD+iGMcZFEiiSrbv9Tfdkvnusy6y0x0GKBXREFg/Y65GhIfm0tnLntThhzCnfKwp1WRjeCyQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -13947,18 +13907,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/strnum": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.3.tgz",
-      "integrity": "sha512-oKx6RUCuHfT3oyVjtnrmn19H1SiCqgJSg+54XqURKp5aCMbrXrhLjRN9TjuwMjiYstZ0MzDrHqkGZ5dFTKd+zg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/strtok3": {
       "version": "10.3.5",
       "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-10.3.5.tgz",
diff --git a/backend/package.json b/backend/package.json
index 998060451..b94830966 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.975.0",
+    "@aws-sdk/s3-request-presigner": "^3.1075.0",
     "@nestjs/bull": "^11.0.4",
     "@nestjs/cache-manager": "^3.1.0",
     "@nestjs/common": "^10.0.0",
@@ -67,9 +68,9 @@
     "papaparse": "^5.5.3",
     "passport": "^0.7.0",
     "passport-google-oauth20": "^2.0.0",
-    "passport-microsoft": "^1.0.0",
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
+    "passport-microsoft": "^1.0.0",
     "pdfkit": "^0.17.2",
     "pg": "^8.11.3",
     "qrcode": "^1.5.4",
@@ -93,7 +94,7 @@
     "@types/jest": "^29.5.2",
     "@types/json2csv": "^5.0.7",
     "@types/jsonwebtoken": "^9.0.10",
-    "@types/node": "^20.19.30",
+    "@types/node": "^20.19.43",
     "@types/node-cron": "^3.0.11",
     "@types/nodemailer": "^7.0.9",
     "@types/otplib": "^7.0.0",
@@ -101,7 +102,7 @@
     "@types/passport-google-oauth20": "^2.0.17",
     "@types/passport-jwt": "^4.0.1",
     "@types/passport-local": "^1.0.38",
-    "@types/pdfkit": "^0.17.3",
+    "@types/pdfkit": "^0.17.6",
     "@types/pg": "^8.10.0",
     "@types/qrcode": "^1.5.6",
     "@types/supertest": "^6.0.0",
diff --git a/backend/src/activity-log/activity-log.controller.ts b/backend/src/activity-log/activity-log.controller.ts
index 35ecd1e14..a01f1b8d7 100644
--- a/backend/src/activity-log/activity-log.controller.ts
+++ b/backend/src/activity-log/activity-log.controller.ts
@@ -1,4 +1,14 @@
-import { Controller, Get, Post, Delete, Param, Body, Query, Req, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Delete,
+  Param,
+  Body,
+  Query,
+  Req,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { ActivityLogService } from './activity-log.service';
 import { CreateActivityLogDto } from './dtos/create-activity-log.dto';
diff --git a/backend/src/activity-log/activity-log.service.ts b/backend/src/activity-log/activity-log.service.ts
index 39f673bf2..73216d2e7 100644
--- a/backend/src/activity-log/activity-log.service.ts
+++ b/backend/src/activity-log/activity-log.service.ts
@@ -17,9 +17,21 @@ export class ActivityLogService {
     return this.activityLogRepository.save(log);
   }
 
-  async findAll(query: ActivityLogQueryDto): Promise<{ data: ActivityLog[]; total: number }> {
-    const { page = 1, limit = 20, userId, action, entityType, entityId, startDate, endDate } = query;
-    const qb = this.activityLogRepository.createQueryBuilder('log')
+  async findAll(
+    query: ActivityLogQueryDto,
+  ): Promise<{ data: ActivityLog[]; total: number }> {
+    const {
+      page = 1,
+      limit = 20,
+      userId,
+      action,
+      entityType,
+      entityId,
+      startDate,
+      endDate,
+    } = query;
+    const qb = this.activityLogRepository
+      .createQueryBuilder('log')
       .leftJoinAndSelect('log.user', 'user')
       .skip((page - 1) * limit)
       .take(limit)
diff --git a/backend/src/activity-log/entities/activity-log.entity.ts b/backend/src/activity-log/entities/activity-log.entity.ts
index 828d6a7f5..8cbcff4ca 100644
--- a/backend/src/activity-log/entities/activity-log.entity.ts
+++ b/backend/src/activity-log/entities/activity-log.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../../users/entities/user.entity';
 
 @Entity('activity_logs')
diff --git a/backend/src/app.module.ts b/backend/src/app.module.ts
index 3cbb2e379..a46c653c2 100644
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -3,10 +3,8 @@ import { ConfigModule, ConfigService } from '@nestjs/config';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { CacheModule } from '@nestjs/cache-manager';
 import { redisStore } from 'cache-manager-redis-store';
-import { ThrottlerModule, ThrottlerGuard } from '@nestjs/throttler';
+import { ThrottlerGuard } from '@nestjs/throttler';
 import { APP_GUARD } from '@nestjs/core';
-import { AcceptLanguageResolver, I18nModule, QueryResolver } from 'nestjs-i18n';
-import * as path from 'path';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { UsersModule } from './users/users.module';
@@ -28,6 +26,7 @@ import { ContractsModule } from './contracts/contracts.module';
 import { LicensesModule } from './licenses/licenses.module';
 import { PurchaseOrdersModule } from './purchase-orders/purchase-orders.module';
 import { TasksModule } from './tasks/tasks.module';
+import { NotificationModule } from './notifications/notification.module';
 
 @Module({
   imports: [
@@ -54,7 +53,10 @@ import { TasksModule } from './tasks/tasks.module';
       inject: [ConfigService],
       useFactory: async (configService: ConfigService) => {
         const host = configService.get<string>('REDIS_HOST', 'localhost');
-        const port = parseInt(configService.get<string>('REDIS_PORT', '6379'), 10);
+        const port = parseInt(
+          configService.get<string>('REDIS_PORT', '6379'),
+          10,
+        );
         const ttl = parseInt(configService.get<string>('CACHE_TTL', '300'), 10);
 
         return {
@@ -64,7 +66,9 @@ import { TasksModule } from './tasks/tasks.module';
           ttl,
           retry_strategy: (options: any) => {
             if (options.error && options.error.code === 'ECONNREFUSED') {
-              return new Error('Redis connection refused. Operating with inline graceful fallback.');
+              return new Error(
+                'Redis connection refused. Operating with inline graceful fallback.',
+              );
             }
             return Math.min(options.attempt * 100, 3000);
           },
@@ -85,14 +89,12 @@ import { TasksModule } from './tasks/tasks.module';
     LicensesModule,
     PurchaseOrdersModule,
     TasksModule,
-  ],
     LocationsModule,
-  ],
     ActivityLogModule,
-  ],
     InventoryModule,
     VendorsModule,
     DashboardModule,
+    NotificationModule,
   ],
   controllers: [AppController],
   providers: [
@@ -103,8 +105,6 @@ import { TasksModule } from './tasks/tasks.module';
       useClass: ThrottlerGuard,
     },
   ],
-  exports: [
-    CacheService,
-  ],
+  exports: [CacheService],
 })
 export class AppModule {}
diff --git a/backend/src/assets/asset-audit.controller.ts b/backend/src/assets/asset-audit.controller.ts
index 6eedaf00b..90d217da8 100644
--- a/backend/src/assets/asset-audit.controller.ts
+++ b/backend/src/assets/asset-audit.controller.ts
@@ -1,4 +1,12 @@
-import { Controller, Get, Post, Param, Body, Query, Req, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Param,
+  Body,
+  Query,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
@@ -13,7 +21,10 @@ export class AssetAuditController {
   ) {}
 
   @Get(':id')
-  async getAuditTrail(@Param('id') id: string, @Query() query: { page?: number; limit?: number }) {
+  async getAuditTrail(
+    @Param('id') id: string,
+    @Query() query: { page?: number; limit?: number },
+  ) {
     const page = query.page || 1;
     const limit = query.limit || 20;
     const [data, total] = await this.historyRepository.findAndCount({
@@ -26,8 +37,13 @@ export class AssetAuditController {
   }
 
   @Post(':id/revert')
-  async revertAuditEntry(@Param('id') id: string, @Body() body: { historyId: string }) {
-    const entry = await this.historyRepository.findOne({ where: { id: body.historyId } });
+  async revertAuditEntry(
+    @Param('id') id: string,
+    @Body() body: { historyId: string },
+  ) {
+    const entry = await this.historyRepository.findOne({
+      where: { id: body.historyId },
+    });
     if (!entry) {
       return { message: 'Audit entry not found' };
     }
diff --git a/backend/src/assets/asset.entity.ts b/backend/src/assets/asset.entity.ts
index 83779b558..07d70785b 100644
--- a/backend/src/assets/asset.entity.ts
+++ b/backend/src/assets/asset.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../users/entities/user.entity';
 
 @Entity('assets')
@@ -97,6 +105,18 @@ export class Asset {
   @Column({ default: false })
   endOfLifeNotificationSent: boolean;
 
+  @Column({ type: 'date', nullable: true })
+  disposalDate: string;
+
+  @Column({ nullable: true })
+  disposalMethod: string;
+
+  @Column({ nullable: true, type: 'text' })
+  disposalReason: string;
+
+  @Column({ nullable: true })
+  disposalApprovedById: string;
+
   @Column({ nullable: true, type: 'text' })
   notes: string;
 
diff --git a/backend/src/assets/assets-extended.controller.ts b/backend/src/assets/assets-extended.controller.ts
index e0ca0a47e..26ed9d33d 100644
--- a/backend/src/assets/assets-extended.controller.ts
+++ b/backend/src/assets/assets-extended.controller.ts
@@ -1,4 +1,17 @@
-import { Controller, Post, Get, Patch, Delete, Param, Body, Query, Req, UseGuards, UseInterceptors, UploadedFile } from '@nestjs/common';
+import {
+  Controller,
+  Post,
+  Get,
+  Patch,
+  Delete,
+  Param,
+  Body,
+  Query,
+  Req,
+  UseGuards,
+  UseInterceptors,
+  UploadedFile,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { AssetsExtendedService } from './assets-extended.service';
@@ -13,7 +26,11 @@ export class AssetsExtendedController {
   constructor(private readonly assetsExtendedService: AssetsExtendedService) {}
 
   @Post(':id/transfer')
-  async transfer(@Param('id') id: string, @Body() dto: TransferAssetDto, @Req() req: any) {
+  async transfer(
+    @Param('id') id: string,
+    @Body() dto: TransferAssetDto,
+    @Req() req: any,
+  ) {
     return this.assetsExtendedService.transfer(id, dto, req.user?.id);
   }
 
@@ -24,7 +41,11 @@ export class AssetsExtendedController {
 
   @Post(':id/documents')
   @UseInterceptors(FileInterceptor('file'))
-  async uploadDocument(@Param('id') id: string, @UploadedFile() file: Express.Multer.File, @Req() req: any) {
+  async uploadDocument(
+    @Param('id') id: string,
+    @UploadedFile() file: Express.Multer.File,
+    @Req() req: any,
+  ) {
     return this.assetsExtendedService.addDocument(id, file, req.user?.id);
   }
 
@@ -34,13 +55,20 @@ export class AssetsExtendedController {
   }
 
   @Delete(':id/documents/:documentId')
-  async deleteDocument(@Param('id') id: string, @Param('documentId') documentId: string) {
+  async deleteDocument(
+    @Param('id') id: string,
+    @Param('documentId') documentId: string,
+  ) {
     await this.assetsExtendedService.deleteDocument(id, documentId);
     return { message: 'Document deleted' };
   }
 
   @Post(':id/maintenance')
-  async createMaintenance(@Param('id') id: string, @Body() dto: CreateMaintenanceDto, @Req() req: any) {
+  async createMaintenance(
+    @Param('id') id: string,
+    @Body() dto: CreateMaintenanceDto,
+    @Req() req: any,
+  ) {
     return this.assetsExtendedService.createMaintenance(id, dto, req.user?.id);
   }
 
@@ -50,7 +78,11 @@ export class AssetsExtendedController {
   }
 
   @Patch(':id/maintenance/:recordId')
-  async updateMaintenance(@Param('id') id: string, @Param('recordId') recordId: string, @Body() dto: UpdateMaintenanceDto) {
+  async updateMaintenance(
+    @Param('id') id: string,
+    @Param('recordId') recordId: string,
+    @Body() dto: UpdateMaintenanceDto,
+  ) {
     return this.assetsExtendedService.updateMaintenance(id, recordId, dto);
   }
 }
diff --git a/backend/src/assets/assets-extended.module.ts b/backend/src/assets/assets-extended.module.ts
index 7487886b5..f1784325c 100644
--- a/backend/src/assets/assets-extended.module.ts
+++ b/backend/src/assets/assets-extended.module.ts
@@ -7,9 +7,18 @@ import { MaintenanceRecord } from './entities/maintenance-record.entity';
 import { AssetsExtendedService } from './assets-extended.service';
 import { AssetsExtendedController } from './assets-extended.controller';
 import { AssetAuditController } from './asset-audit.controller';
+import { NotificationModule } from '../notifications/notification.module';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Asset, AssetHistory, AssetDocument, MaintenanceRecord])],
+  imports: [
+    TypeOrmModule.forFeature([
+      Asset,
+      AssetHistory,
+      AssetDocument,
+      MaintenanceRecord,
+    ]),
+    NotificationModule,
+  ],
   controllers: [AssetsExtendedController, AssetAuditController],
   providers: [AssetsExtendedService],
   exports: [AssetsExtendedService],
diff --git a/backend/src/assets/assets-extended.service.ts b/backend/src/assets/assets-extended.service.ts
index 4b5851b2f..ed9425fb1 100644
--- a/backend/src/assets/assets-extended.service.ts
+++ b/backend/src/assets/assets-extended.service.ts
@@ -9,6 +9,11 @@ import { TransferAssetDto } from './dtos/transfer-asset.dto';
 import { CreateMaintenanceDto } from './dtos/create-maintenance.dto';
 import { UpdateMaintenanceDto } from './dtos/update-maintenance.dto';
 import { HistoryQueryDto } from './dtos/history-query.dto';
+import {
+  NotificationDispatchService,
+  DispatchNotificationDto,
+} from '../notifications/notification-dispatch.service';
+import { NotificationEvent } from '../notifications/enums/notification-event.enum';
 
 @Injectable()
 export class AssetsExtendedService {
@@ -21,10 +26,18 @@ export class AssetsExtendedService {
     private readonly documentRepository: Repository<AssetDocument>,
     @InjectRepository(MaintenanceRecord)
     private readonly maintenanceRepository: Repository<MaintenanceRecord>,
+    private readonly notificationDispatchService: NotificationDispatchService,
   ) {}
 
-  async transfer(id: string, dto: TransferAssetDto, userId?: string): Promise<Asset> {
-    const asset = await this.assetRepository.findOne({ where: { id }, relations: ['assignedTo'] });
+  async transfer(
+    id: string,
+    dto: TransferAssetDto,
+    userId?: string,
+  ): Promise<Asset> {
+    const asset = await this.assetRepository.findOne({
+      where: { id },
+      relations: ['assignedTo'],
+    });
     if (!asset) throw new NotFoundException('Asset not found');
 
     const previousValue: Record<string, unknown> = {
@@ -49,25 +62,66 @@ export class AssetsExtendedService {
       }),
     );
 
+    // Send notification for asset transfer
+    if (dto.assignedToId) {
+      const notificationDto: DispatchNotificationDto = {
+        userId: dto.assignedToId,
+        event: NotificationEvent.ASSET_TRANSFERRED,
+        title: 'Asset Transferred',
+        message: `Asset ${asset.name} (${asset.assetId}) has been transferred to you.`,
+        entityType: 'Asset',
+        entityId: id,
+        metadata: {
+          assetName: asset.name,
+          assetId: asset.assetId,
+          previousAssignee: previousValue.assignedToId,
+          newAssignee: dto.assignedToId,
+        },
+        emailTemplate: 'asset-transferred',
+        emailSubject: `Asset Transferred: ${asset.name}`,
+        emailContext: {
+          assetName: asset.name,
+          assetId: asset.assetId,
+          assignedTo: dto.assignedToId,
+          location: dto.location || asset.location,
+          assetLink: `${process.env.FRONTEND_URL}/assets/${id}`,
+        },
+      };
+      await this.notificationDispatchService.dispatch(notificationDto);
+    }
+
     return asset;
   }
 
   async getHistory(assetId: string, query: HistoryQueryDto) {
-    const qb = this.historyRepository.createQueryBuilder('h')
+    const qb = this.historyRepository
+      .createQueryBuilder('h')
       .leftJoinAndSelect('h.performedBy', 'performedBy')
       .where('h.assetId = :assetId', { assetId })
       .orderBy('h.createdAt', 'DESC');
 
-    if (query.action) qb.andWhere('h.action = :action', { action: query.action });
-    if (query.startDate) qb.andWhere('h.createdAt >= :startDate', { startDate: query.startDate });
-    if (query.endDate) qb.andWhere('h.createdAt <= :endDate', { endDate: query.endDate });
-    if (query.search) qb.andWhere('h.description ILIKE :search', { search: `%${query.search}%` });
+    if (query.action)
+      qb.andWhere('h.action = :action', { action: query.action });
+    if (query.startDate)
+      qb.andWhere('h.createdAt >= :startDate', { startDate: query.startDate });
+    if (query.endDate)
+      qb.andWhere('h.createdAt <= :endDate', { endDate: query.endDate });
+    if (query.search)
+      qb.andWhere('h.description ILIKE :search', {
+        search: `%${query.search}%`,
+      });
 
     return qb.getMany();
   }
 
-  async addDocument(assetId: string, file: Express.Multer.File, userId?: string): Promise<AssetDocument> {
-    const asset = await this.assetRepository.findOne({ where: { id: assetId } });
+  async addDocument(
+    assetId: string,
+    file: Express.Multer.File,
+    userId?: string,
+  ): Promise<AssetDocument> {
+    const asset = await this.assetRepository.findOne({
+      where: { id: assetId },
+    });
     if (!asset) throw new NotFoundException('Asset not found');
 
     const doc = this.documentRepository.create({
@@ -102,13 +156,21 @@ export class AssetsExtendedService {
   }
 
   async deleteDocument(assetId: string, documentId: string): Promise<void> {
-    const doc = await this.documentRepository.findOne({ where: { id: documentId, assetId } });
+    const doc = await this.documentRepository.findOne({
+      where: { id: documentId, assetId },
+    });
     if (!doc) throw new NotFoundException('Document not found');
     await this.documentRepository.remove(doc);
   }
 
-  async createMaintenance(assetId: string, dto: CreateMaintenanceDto, userId?: string): Promise<MaintenanceRecord> {
-    const asset = await this.assetRepository.findOne({ where: { id: assetId } });
+  async createMaintenance(
+    assetId: string,
+    dto: CreateMaintenanceDto,
+    userId?: string,
+  ): Promise<MaintenanceRecord> {
+    const asset = await this.assetRepository.findOne({
+      where: { id: assetId },
+    });
     if (!asset) throw new NotFoundException('Asset not found');
 
     const record = this.maintenanceRepository.create({
@@ -138,8 +200,14 @@ export class AssetsExtendedService {
     });
   }
 
-  async updateMaintenance(assetId: string, recordId: string, dto: UpdateMaintenanceDto): Promise<MaintenanceRecord> {
-    const record = await this.maintenanceRepository.findOne({ where: { id: recordId, assetId } });
+  async updateMaintenance(
+    assetId: string,
+    recordId: string,
+    dto: UpdateMaintenanceDto,
+  ): Promise<MaintenanceRecord> {
+    const record = await this.maintenanceRepository.findOne({
+      where: { id: recordId, assetId },
+    });
     if (!record) throw new NotFoundException('Maintenance record not found');
     Object.assign(record, dto);
     return this.maintenanceRepository.save(record);
diff --git a/backend/src/assets/assets-ops.controller.ts b/backend/src/assets/assets-ops.controller.ts
index e729c9f8d..2c887e451 100644
--- a/backend/src/assets/assets-ops.controller.ts
+++ b/backend/src/assets/assets-ops.controller.ts
@@ -1,4 +1,14 @@
-import { Controller, Post, Get, Delete, Param, Body, Req, UseGuards, Query } from '@nestjs/common';
+import {
+  Controller,
+  Post,
+  Get,
+  Delete,
+  Param,
+  Body,
+  Req,
+  UseGuards,
+  Query,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { AssetsOpsService } from './assets-ops.service';
 import { CreateNoteDto } from './dtos/create-note.dto';
@@ -12,7 +22,11 @@ export class AssetsOpsController {
   constructor(private readonly assetsOpsService: AssetsOpsService) {}
 
   @Post(':id/notes')
-  async createNote(@Param('id') id: string, @Body() dto: CreateNoteDto, @Req() req: any) {
+  async createNote(
+    @Param('id') id: string,
+    @Body() dto: CreateNoteDto,
+    @Req() req: any,
+  ) {
     return this.assetsOpsService.createNote(id, dto, req.user?.id);
   }
 
@@ -41,7 +55,10 @@ export class AssetsOpsController {
 
   @Post('bulk/status')
   async bulkStatusUpdate(@Body() dto: BulkStatusDto, @Req() req: any) {
-    const count = await this.assetsOpsService.bulkStatusUpdate(dto, req.user?.id);
+    const count = await this.assetsOpsService.bulkStatusUpdate(
+      dto,
+      req.user?.id,
+    );
     return { updated: count };
   }
 
diff --git a/backend/src/assets/assets-ops.service.ts b/backend/src/assets/assets-ops.service.ts
index a7537a580..7f585ded6 100644
--- a/backend/src/assets/assets-ops.service.ts
+++ b/backend/src/assets/assets-ops.service.ts
@@ -19,8 +19,14 @@ export class AssetsOpsService {
     private readonly noteRepository: Repository<AssetNote>,
   ) {}
 
-  async createNote(assetId: string, dto: CreateNoteDto, userId?: string): Promise<AssetNote> {
-    const asset = await this.assetRepository.findOne({ where: { id: assetId } });
+  async createNote(
+    assetId: string,
+    dto: CreateNoteDto,
+    userId?: string,
+  ): Promise<AssetNote> {
+    const asset = await this.assetRepository.findOne({
+      where: { id: assetId },
+    });
     if (!asset) throw new NotFoundException('Asset not found');
 
     const note = this.noteRepository.create({
@@ -40,16 +46,24 @@ export class AssetsOpsService {
   }
 
   async deleteNote(assetId: string, noteId: string): Promise<void> {
-    const note = await this.noteRepository.findOne({ where: { id: noteId, assetId } });
+    const note = await this.noteRepository.findOne({
+      where: { id: noteId, assetId },
+    });
     if (!note) throw new NotFoundException('Note not found');
     await this.noteRepository.remove(note);
   }
 
   async generateQRCode(assetId: string): Promise<string> {
-    const asset = await this.assetRepository.findOne({ where: { id: assetId } });
+    const asset = await this.assetRepository.findOne({
+      where: { id: assetId },
+    });
     if (!asset) throw new NotFoundException('Asset not found');
 
-    const qrData = JSON.stringify({ id: asset.id, assetId: asset.assetId, name: asset.name });
+    const qrData = JSON.stringify({
+      id: asset.id,
+      assetId: asset.assetId,
+      name: asset.name,
+    });
     const qrCode = await QRCode.toDataURL(qrData);
 
     await this.assetRepository.update(assetId, { qrCode });
@@ -57,21 +71,26 @@ export class AssetsOpsService {
   }
 
   async generateBarcode(assetId: string): Promise<string> {
-    const asset = await this.assetRepository.findOne({ where: { id: assetId } });
+    const asset = await this.assetRepository.findOne({
+      where: { id: assetId },
+    });
     if (!asset) throw new NotFoundException('Asset not found');
 
     const barcode = await new Promise<string>((resolve, reject) => {
-      bwipjs.toBuffer({
-        bcid: 'code128',
-        text: asset.assetId,
-        scale: 3,
-        height: 10,
-        includetext: true,
-        textxalign: 'center',
-      }, (err: Error | null, buffer?: Buffer) => {
-        if (err) reject(err);
-        else resolve(`data:image/png;base64,${buffer.toString('base64')}`);
-      });
+      bwipjs.toBuffer(
+        {
+          bcid: 'code128',
+          text: asset.assetId,
+          scale: 3,
+          height: 10,
+          includetext: true,
+          textxalign: 'center',
+        },
+        (err: Error | null, buffer?: Buffer) => {
+          if (err) reject(err);
+          else resolve(`data:image/png;base64,${buffer.toString('base64')}`);
+        },
+      );
     });
 
     await this.assetRepository.update(assetId, { barcode });
@@ -106,6 +125,9 @@ export class AssetsOpsService {
 
   async bulkExport(ids?: string[]) {
     const where = ids ? { id: In(ids) } : {};
-    return this.assetRepository.find({ where, relations: ['assignedTo', 'createdBy'] });
+    return this.assetRepository.find({
+      where,
+      relations: ['assignedTo', 'createdBy'],
+    });
   }
 }
diff --git a/backend/src/assets/assets.controller.ts b/backend/src/assets/assets.controller.ts
index 510c6f96c..070f27e6e 100644
--- a/backend/src/assets/assets.controller.ts
+++ b/backend/src/assets/assets.controller.ts
@@ -1,4 +1,16 @@
-import { Controller, Get, Post, Put, Patch, Delete, Param, Body, Query, Req, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Patch,
+  Delete,
+  Param,
+  Body,
+  Query,
+  Req,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { AssetsService } from './assets.service';
 import { CreateAssetDto } from './dtos/create-asset.dto';
@@ -27,7 +39,11 @@ export class AssetsController {
   }
 
   @Put(':id')
-  async update(@Param('id') id: string, @Body() dto: UpdateAssetDto, @Req() req: any) {
+  async update(
+    @Param('id') id: string,
+    @Body() dto: UpdateAssetDto,
+    @Req() req: any,
+  ) {
     return this.assetsService.update(id, dto, req.user?.id);
   }
 
@@ -38,7 +54,11 @@ export class AssetsController {
   }
 
   @Patch(':id/status')
-  async updateStatus(@Param('id') id: string, @Body() dto: UpdateStatusDto, @Req() req: any) {
+  async updateStatus(
+    @Param('id') id: string,
+    @Body() dto: UpdateStatusDto,
+    @Req() req: any,
+  ) {
     return this.assetsService.updateStatus(id, dto, req.user?.id);
   }
 
diff --git a/backend/src/assets/assets.service.ts b/backend/src/assets/assets.service.ts
index aebbf68e3..87d624c1c 100644
--- a/backend/src/assets/assets.service.ts
+++ b/backend/src/assets/assets.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, NotFoundException } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { Repository, Like } from 'typeorm';
+import { Repository } from 'typeorm';
 import { ConfigService } from '@nestjs/config';
 import { Asset } from './asset.entity';
 import { CreateAssetDto } from './dtos/create-asset.dto';
@@ -18,7 +18,10 @@ export class AssetsService {
     private readonly assetRepository: Repository<Asset>,
     private readonly configService: ConfigService,
   ) {
-    this.nextAssetNumber = parseInt(configService.get<string>('ASSET_ID_START', '1000'), 10);
+    this.nextAssetNumber = parseInt(
+      configService.get<string>('ASSET_ID_START', '1000'),
+      10,
+    );
   }
 
   async create(dto: CreateAssetDto, userId?: string): Promise<Asset> {
@@ -35,8 +38,21 @@ export class AssetsService {
   }
 
   async findAll(query: AssetListQueryDto): Promise<PaginatedResponse<Asset>> {
-    const { search, status, condition, categoryId, departmentId, assignedToId, location, sortBy, sortOrder, page, limit } = query;
-    const qb = this.assetRepository.createQueryBuilder('asset')
+    const {
+      search,
+      status,
+      condition,
+      categoryId,
+      departmentId,
+      assignedToId,
+      location,
+      sortBy,
+      sortOrder,
+      page,
+      limit,
+    } = query;
+    const qb = this.assetRepository
+      .createQueryBuilder('asset')
       .leftJoinAndSelect('asset.assignedTo', 'assignedTo')
       .leftJoinAndSelect('asset.createdBy', 'createdBy')
       .leftJoinAndSelect('asset.updatedBy', 'updatedBy');
@@ -49,13 +65,29 @@ export class AssetsService {
     }
     if (status) qb.andWhere('asset.status = :status', { status });
     if (condition) qb.andWhere('asset.condition = :condition', { condition });
-    if (categoryId) qb.andWhere('asset.categoryId = :categoryId', { categoryId });
-    if (departmentId) qb.andWhere('asset.departmentId = :departmentId', { departmentId });
-    if (assignedToId) qb.andWhere('asset.assignedToId = :assignedToId', { assignedToId });
-    if (location) qb.andWhere('asset.location ILIKE :location', { location: `%${location}%` });
+    if (categoryId)
+      qb.andWhere('asset.categoryId = :categoryId', { categoryId });
+    if (departmentId)
+      qb.andWhere('asset.departmentId = :departmentId', { departmentId });
+    if (assignedToId)
+      qb.andWhere('asset.assignedToId = :assignedToId', { assignedToId });
+    if (location)
+      qb.andWhere('asset.location ILIKE :location', {
+        location: `%${location}%`,
+      });
 
-    const allowedSortFields = ['name', 'assetId', 'status', 'condition', 'createdAt', 'updatedAt', 'purchaseDate', 'purchasePrice'];
-    const sortField = sortBy && allowedSortFields.includes(sortBy) ? sortBy : 'createdAt';
+    const allowedSortFields = [
+      'name',
+      'assetId',
+      'status',
+      'condition',
+      'createdAt',
+      'updatedAt',
+      'purchaseDate',
+      'purchasePrice',
+    ];
+    const sortField =
+      sortBy && allowedSortFields.includes(sortBy) ? sortBy : 'createdAt';
     qb.orderBy(`asset.${sortField}`, sortOrder || 'DESC');
 
     qb.skip((page - 1) * limit).take(limit);
@@ -81,7 +113,11 @@ export class AssetsService {
     return asset;
   }
 
-  async update(id: string, dto: UpdateAssetDto, userId?: string): Promise<Asset> {
+  async update(
+    id: string,
+    dto: UpdateAssetDto,
+    userId?: string,
+  ): Promise<Asset> {
     const asset = await this.findById(id);
     Object.assign(asset, dto);
     if (userId) asset.updatedById = userId;
@@ -93,14 +129,26 @@ export class AssetsService {
     await this.assetRepository.softDelete(asset.id);
   }
 
-  async updateStatus(id: string, dto: UpdateStatusDto, userId?: string): Promise<Asset> {
+  async updateStatus(
+    id: string,
+    dto: UpdateStatusDto,
+    userId?: string,
+  ): Promise<Asset> {
     const asset = await this.findById(id);
     asset.status = dto.status;
     asset.updatedById = userId;
     return this.assetRepository.save(asset);
   }
 
-  async dispose(id: string, dto: { disposalMethod?: string; disposalReason?: string; disposalApprovedById?: string }, userId?: string): Promise<Asset> {
+  async dispose(
+    id: string,
+    dto: {
+      disposalMethod?: string;
+      disposalReason?: string;
+      disposalApprovedById?: string;
+    },
+    userId?: string,
+  ): Promise<Asset> {
     const asset = await this.findById(id);
     asset.status = 'DISPOSED';
     asset.disposalDate = new Date().toISOString().split('T')[0];
diff --git a/backend/src/assets/dashboard.controller.ts b/backend/src/assets/dashboard.controller.ts
index 408fb37bb..b85462d98 100644
--- a/backend/src/assets/dashboard.controller.ts
+++ b/backend/src/assets/dashboard.controller.ts
@@ -48,9 +48,15 @@ export class DashboardController {
   @Get('summary')
   async getSummary() {
     const totalAssets = await this.assetRepository.count();
-    const activeAssets = await this.assetRepository.count({ where: { status: 'ACTIVE' } });
-    const maintenanceAssets = await this.assetRepository.count({ where: { status: 'MAINTENANCE' } });
-    const retiredAssets = await this.assetRepository.count({ where: { status: 'RETIRED' } });
+    const activeAssets = await this.assetRepository.count({
+      where: { status: 'ACTIVE' },
+    });
+    const maintenanceAssets = await this.assetRepository.count({
+      where: { status: 'MAINTENANCE' },
+    });
+    const retiredAssets = await this.assetRepository.count({
+      where: { status: 'RETIRED' },
+    });
 
     return {
       totalAssets,
diff --git a/backend/src/assets/dtos/asset-list-query.dto.ts b/backend/src/assets/dtos/asset-list-query.dto.ts
index dba05012e..b09a4606d 100644
--- a/backend/src/assets/dtos/asset-list-query.dto.ts
+++ b/backend/src/assets/dtos/asset-list-query.dto.ts
@@ -1,4 +1,4 @@
-import { IsOptional, IsString, IsEnum, IsInt, Min, Max } from 'class-validator';
+import { IsOptional, IsString, IsInt, Min, Max } from 'class-validator';
 import { Type } from 'class-transformer';
 
 export class AssetListQueryDto {
diff --git a/backend/src/assets/dtos/create-asset.dto.ts b/backend/src/assets/dtos/create-asset.dto.ts
index d376e9f54..ae3bca478 100644
--- a/backend/src/assets/dtos/create-asset.dto.ts
+++ b/backend/src/assets/dtos/create-asset.dto.ts
@@ -1,4 +1,4 @@
-import { IsString, IsOptional, IsNumber, IsArray, IsEnum } from 'class-validator';
+import { IsString, IsOptional, IsNumber, IsArray } from 'class-validator';
 
 export class CreateAssetDto {
   @IsString()
diff --git a/backend/src/assets/dtos/create-maintenance.dto.ts b/backend/src/assets/dtos/create-maintenance.dto.ts
index 561e2d34e..9d165b870 100644
--- a/backend/src/assets/dtos/create-maintenance.dto.ts
+++ b/backend/src/assets/dtos/create-maintenance.dto.ts
@@ -1,4 +1,4 @@
-import { IsString, IsOptional, IsNumber } from 'class-validator';
+import { IsString, IsOptional } from 'class-validator';
 
 export class CreateMaintenanceDto {
   @IsString()
diff --git a/backend/src/assets/entities/asset-document.entity.ts b/backend/src/assets/entities/asset-document.entity.ts
index bed40bfd7..7a7cdf840 100644
--- a/backend/src/assets/entities/asset-document.entity.ts
+++ b/backend/src/assets/entities/asset-document.entity.ts
@@ -1,4 +1,11 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { Asset } from './asset.entity';
 import { User } from '../../users/entities/user.entity';
 
diff --git a/backend/src/assets/entities/asset-history.entity.ts b/backend/src/assets/entities/asset-history.entity.ts
index 4b2b53a6c..6fcb10b81 100644
--- a/backend/src/assets/entities/asset-history.entity.ts
+++ b/backend/src/assets/entities/asset-history.entity.ts
@@ -1,4 +1,11 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { Asset } from './asset.entity';
 import { User } from '../../users/entities/user.entity';
 
diff --git a/backend/src/assets/entities/asset-note.entity.ts b/backend/src/assets/entities/asset-note.entity.ts
index 3efa91c1f..b30ab0504 100644
--- a/backend/src/assets/entities/asset-note.entity.ts
+++ b/backend/src/assets/entities/asset-note.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { Asset } from './asset.entity';
 import { User } from '../../users/entities/user.entity';
 
diff --git a/backend/src/assets/entities/asset.entity.ts b/backend/src/assets/entities/asset.entity.ts
index 4688f575b..3c9d334a9 100644
--- a/backend/src/assets/entities/asset.entity.ts
+++ b/backend/src/assets/entities/asset.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../../users/entities/user.entity';
 
 @Entity('assets')
diff --git a/backend/src/assets/entities/maintenance-record.entity.ts b/backend/src/assets/entities/maintenance-record.entity.ts
index 1b5523937..4bf2ed172 100644
--- a/backend/src/assets/entities/maintenance-record.entity.ts
+++ b/backend/src/assets/entities/maintenance-record.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { Asset } from './asset.entity';
 import { User } from '../../users/entities/user.entity';
 
diff --git a/backend/src/auth/auth.controller.ts b/backend/src/auth/auth.controller.ts
index 1653ce4e1..e1b4b2d17 100644
--- a/backend/src/auth/auth.controller.ts
+++ b/backend/src/auth/auth.controller.ts
@@ -65,8 +65,7 @@ export class AuthController {
 
   @Get('google')
   @UseGuards(AuthGuard('google'))
-  async googleAuth() {
-  }
+  async googleAuth() {}
 
   @Get('google/callback')
   @UseGuards(AuthGuard('google'))
diff --git a/backend/src/auth/auth.module.ts b/backend/src/auth/auth.module.ts
index d13af6e86..e236b8762 100644
--- a/backend/src/auth/auth.module.ts
+++ b/backend/src/auth/auth.module.ts
@@ -29,8 +29,7 @@ import { MailModule } from '../mail/mail.module';
     MailModule,
   ],
   controllers: [AuthController],
-  providers: [AuthService, GoogleStrategy, JwtStrategy],
-  providers: [AuthService, GoogleStrategy, MicrosoftStrategy],
+  providers: [AuthService, GoogleStrategy, JwtStrategy, MicrosoftStrategy],
   exports: [AuthService],
 })
 export class AuthModule {}
diff --git a/backend/src/auth/auth.service.spec.ts b/backend/src/auth/auth.service.spec.ts
index 7abadd6fb..45650cf9c 100644
--- a/backend/src/auth/auth.service.spec.ts
+++ b/backend/src/auth/auth.service.spec.ts
@@ -7,9 +7,15 @@ import { getRepositoryToken } from '@nestjs/typeorm';
 import { PasswordResetToken } from './entities/password-reset-token.entity';
 
 const mockRepo = { create: jest.fn(), save: jest.fn(), findOne: jest.fn() };
-const mockUsersService = { findByEmail: jest.fn(), update: jest.fn(), create: jest.fn() };
+const mockUsersService = {
+  findByEmail: jest.fn(),
+  update: jest.fn(),
+  create: jest.fn(),
+};
 const mockMailService = { sendPasswordResetEmail: jest.fn() };
-const mockConfig = { get: jest.fn((key: string, def?: string) => def ?? 'http://localhost:3000') };
+const mockConfig = {
+  get: jest.fn((key: string, def?: string) => def ?? 'http://localhost:3000'),
+};
 
 describe('AuthService', () => {
   let service: AuthService;
@@ -35,7 +41,9 @@ describe('AuthService', () => {
   describe('forgotPassword', () => {
     it('returns silently if user not found', async () => {
       mockUsersService.findByEmail.mockResolvedValue(null);
-      await expect(service.forgotPassword('no@email.com')).resolves.toBeUndefined();
+      await expect(
+        service.forgotPassword('no@email.com'),
+      ).resolves.toBeUndefined();
       expect(mockMailService.sendPasswordResetEmail).not.toHaveBeenCalled();
     });
 
@@ -47,18 +55,25 @@ describe('AuthService', () => {
       mockMailService.sendPasswordResetEmail.mockResolvedValue(undefined);
       await service.forgotPassword('test@example.com');
       expect(mockRepo.save).toHaveBeenCalled();
-      expect(mockMailService.sendPasswordResetEmail).toHaveBeenCalledWith('test@example.com', expect.stringContaining('reset-password'));
+      expect(mockMailService.sendPasswordResetEmail).toHaveBeenCalledWith(
+        'test@example.com',
+        expect.stringContaining('reset-password'),
+      );
     });
   });
 
   describe('resetPassword', () => {
     it('throws BadRequestException for invalid token format', async () => {
-      await expect(service.resetPassword('invalidtoken', 'newpass')).rejects.toThrow('Invalid token format');
+      await expect(
+        service.resetPassword('invalidtoken', 'newpass'),
+      ).rejects.toThrow('Invalid token format');
     });
 
     it('throws BadRequestException when token not found', async () => {
       mockRepo.findOne.mockResolvedValue(null);
-      await expect(service.resetPassword('id.rawtoken', 'newpass')).rejects.toThrow();
+      await expect(
+        service.resetPassword('id.rawtoken', 'newpass'),
+      ).rejects.toThrow();
     });
   });
 
@@ -66,7 +81,11 @@ describe('AuthService', () => {
     it('returns tokens and creates new user if not found', async () => {
       const profile = { id: 'g1', emails: [{ value: 'new@example.com' }] };
       mockUsersService.findByEmail.mockResolvedValue(null);
-      mockUsersService.create.mockResolvedValue({ id: 'u2', email: 'new@example.com', googleId: 'g1' });
+      mockUsersService.create.mockResolvedValue({
+        id: 'u2',
+        email: 'new@example.com',
+        googleId: 'g1',
+      });
       const result = await service.validateOAuthLogin(profile);
       expect(result).toHaveProperty('accessToken');
       expect(mockUsersService.create).toHaveBeenCalled();
@@ -74,10 +93,16 @@ describe('AuthService', () => {
 
     it('updates googleId on existing user without one', async () => {
       const profile = { id: 'g2', emails: [{ value: 'exists@example.com' }] };
-      mockUsersService.findByEmail.mockResolvedValue({ id: 'u3', email: 'exists@example.com', googleId: null });
+      mockUsersService.findByEmail.mockResolvedValue({
+        id: 'u3',
+        email: 'exists@example.com',
+        googleId: null,
+      });
       mockUsersService.update.mockResolvedValue({ id: 'u3', googleId: 'g2' });
       await service.validateOAuthLogin(profile);
-      expect(mockUsersService.update).toHaveBeenCalledWith('u3', { googleId: 'g2' });
+      expect(mockUsersService.update).toHaveBeenCalledWith('u3', {
+        googleId: 'g2',
+      });
     });
   });
-});
\ No newline at end of file
+});
diff --git a/backend/src/auth/auth.service.ts b/backend/src/auth/auth.service.ts
index 98efb5b7e..6f1294da0 100644
--- a/backend/src/auth/auth.service.ts
+++ b/backend/src/auth/auth.service.ts
@@ -1,4 +1,8 @@
-import { Injectable, BadRequestException, UnauthorizedException } from '@nestjs/common';
+import {
+  Injectable,
+  BadRequestException,
+  UnauthorizedException,
+} from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { ConfigService } from '@nestjs/config';
@@ -57,7 +61,6 @@ export class AuthService {
   }
 
   async refresh(refreshToken: string) {
-    const tokenHash = await bcrypt.hash(refreshToken, 10);
     const tokens = await this.refreshTokenRepository.find({
       where: { revokedAt: null },
       relations: ['user'],
@@ -113,7 +116,10 @@ export class AuthService {
     });
     await this.tokenRepository.save(resetToken);
 
-    const frontendUrl = this.configService.get<string>('FRONTEND_URL', 'http://localhost:3000');
+    const frontendUrl = this.configService.get<string>(
+      'FRONTEND_URL',
+      'http://localhost:3000',
+    );
     const resetLink = `${frontendUrl}/auth/reset-password?token=${resetToken.id}.${rawToken}`;
 
     await this.mailService.sendPasswordResetEmail(email, resetLink);
@@ -126,19 +132,27 @@ export class AuthService {
     }
     const [tokenId, rawToken] = parts;
 
-    const resetToken = await this.tokenRepository.findOne({ where: { id: tokenId } });
+    const resetToken = await this.tokenRepository.findOne({
+      where: { id: tokenId },
+    });
 
     if (!resetToken) {
-      throw new BadRequestException('Token not found, expired, or already used');
+      throw new BadRequestException(
+        'Token not found, expired, or already used',
+      );
     }
 
     if (resetToken.usedAt || resetToken.expiresAt < new Date()) {
-      throw new BadRequestException('Token not found, expired, or already used');
+      throw new BadRequestException(
+        'Token not found, expired, or already used',
+      );
     }
 
     const isValid = await bcrypt.compare(rawToken, resetToken.tokenHash);
     if (!isValid) {
-      throw new BadRequestException('Token not found, expired, or already used');
+      throw new BadRequestException(
+        'Token not found, expired, or already used',
+      );
     }
 
     const passwordHash = await bcrypt.hash(newPassword, 10);
@@ -154,7 +168,9 @@ export class AuthService {
 
     if (user) {
       if (!user.googleId) {
-        user = await this.usersService.update(user.id, { googleId: profile.id });
+        user = await this.usersService.update(user.id, {
+          googleId: profile.id,
+        });
       }
     } else {
       user = await this.usersService.create({
diff --git a/backend/src/auth/dtos/2fa/authenticate-two-factor.dto.ts b/backend/src/auth/dtos/2fa/authenticate-two-factor.dto.ts
index ae8586c35..8a40224ce 100644
--- a/backend/src/auth/dtos/2fa/authenticate-two-factor.dto.ts
+++ b/backend/src/auth/dtos/2fa/authenticate-two-factor.dto.ts
@@ -7,4 +7,4 @@ export class AuthenticateTwoFactorDto {
   @IsString()
   @Length(6, 6)
   code: string;
-}
\ No newline at end of file
+}
diff --git a/backend/src/auth/dtos/2fa/disable-two-factor.dto.ts b/backend/src/auth/dtos/2fa/disable-two-factor.dto.ts
index 663f81d01..befe62e80 100644
--- a/backend/src/auth/dtos/2fa/disable-two-factor.dto.ts
+++ b/backend/src/auth/dtos/2fa/disable-two-factor.dto.ts
@@ -4,4 +4,4 @@ export class DisableTwoFactorDto {
   @IsString()
   @Length(6, 6)
   code: string;
-}
\ No newline at end of file
+}
diff --git a/backend/src/auth/dtos/2fa/enable-two-factor.dto.ts b/backend/src/auth/dtos/2fa/enable-two-factor.dto.ts
index e268e8e4f..464025216 100644
--- a/backend/src/auth/dtos/2fa/enable-two-factor.dto.ts
+++ b/backend/src/auth/dtos/2fa/enable-two-factor.dto.ts
@@ -4,4 +4,4 @@ export class EnableTwoFactorDto {
   @IsString()
   @Length(6, 6)
   code: string;
-}
\ No newline at end of file
+}
diff --git a/backend/src/auth/entities/password-reset-token.entity.ts b/backend/src/auth/entities/password-reset-token.entity.ts
index 270d07fdc..d9f691b06 100644
--- a/backend/src/auth/entities/password-reset-token.entity.ts
+++ b/backend/src/auth/entities/password-reset-token.entity.ts
@@ -1,4 +1,11 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../../users/entities/user.entity';
 
 @Entity('password_reset_tokens')
diff --git a/backend/src/auth/entities/refresh-token.entity.ts b/backend/src/auth/entities/refresh-token.entity.ts
index 3a963969d..1341f4981 100644
--- a/backend/src/auth/entities/refresh-token.entity.ts
+++ b/backend/src/auth/entities/refresh-token.entity.ts
@@ -1,4 +1,11 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../../users/entities/user.entity';
 
 @Entity('refresh_tokens')
diff --git a/backend/src/auth/providers/two-factor.provider.ts b/backend/src/auth/providers/two-factor.provider.ts
index 5a7dee644..a55b5da84 100644
--- a/backend/src/auth/providers/two-factor.provider.ts
+++ b/backend/src/auth/providers/two-factor.provider.ts
@@ -1,14 +1,16 @@
+import { Injectable } from '@nestjs/common';
+
 @Injectable()
 export class TwoFactorProvider {
-  async generateSecret(email: string) {}
+  async generateSecret(_email: string) {}
 
-  async generateQrCode(otpauthUrl: string) {}
+  async generateQrCode(_otpauthUrl: string) {}
 
-  verifyCode(secret: string, token: string) {}
+  verifyCode(_secret: string, _token: string) {}
 
   generateBackupCodes() {}
 
-  encryptSecret(secret: string) {}
+  encryptSecret(_secret: string) {}
 
-  decryptSecret(secret: string) {}
-}
\ No newline at end of file
+  decryptSecret(_secret: string) {}
+}
diff --git a/backend/src/auth/strategies/google.strategy.ts b/backend/src/auth/strategies/google.strategy.ts
index 147834854..740525e7a 100644
--- a/backend/src/auth/strategies/google.strategy.ts
+++ b/backend/src/auth/strategies/google.strategy.ts
@@ -13,12 +13,20 @@ export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
     super({
       clientID: configService.get<string>('GOOGLE_CLIENT_ID', 'dummy'),
       clientSecret: configService.get<string>('GOOGLE_CLIENT_SECRET', 'dummy'),
-      callbackURL: configService.get<string>('GOOGLE_CALLBACK_URL', 'http://localhost:3000/auth/google/callback'),
+      callbackURL: configService.get<string>(
+        'GOOGLE_CALLBACK_URL',
+        'http://localhost:3000/auth/google/callback',
+      ),
       scope: ['email', 'profile'],
     });
   }
 
-  async validate(accessToken: string, refreshToken: string, profile: any, done: VerifyCallback): Promise<any> {
+  async validate(
+    accessToken: string,
+    refreshToken: string,
+    profile: any,
+    done: VerifyCallback,
+  ): Promise<any> {
     try {
       const result = await this.authService.validateOAuthLogin(profile);
       done(null, result);
diff --git a/backend/src/auth/strategies/microsoft.strategy.ts b/backend/src/auth/strategies/microsoft.strategy.ts
index d0201f4d4..02fda8f61 100644
--- a/backend/src/auth/strategies/microsoft.strategy.ts
+++ b/backend/src/auth/strategies/microsoft.strategy.ts
@@ -13,13 +13,21 @@ export class MicrosoftStrategy extends PassportStrategy(Strategy, 'microsoft') {
     super({
       clientID: configService.get<string>('MICROSOFT_CLIENT_ID', ''),
       clientSecret: configService.get<string>('MICROSOFT_CLIENT_SECRET', ''),
-      callbackURL: configService.get<string>('MICROSOFT_CALLBACK_URL', 'http://localhost:3000/api/auth/microsoft/callback'),
+      callbackURL: configService.get<string>(
+        'MICROSOFT_CALLBACK_URL',
+        'http://localhost:3000/api/auth/microsoft/callback',
+      ),
       scope: ['user.read'],
       tenant: configService.get<string>('MICROSOFT_TENANT_ID', 'common'),
     });
   }
 
-  async validate(accessToken: string, refreshToken: string, profile: any, done: VerifyCallback): Promise<any> {
+  async validate(
+    accessToken: string,
+    refreshToken: string,
+    profile: any,
+    done: VerifyCallback,
+  ): Promise<any> {
     try {
       const result = await this.authService.validateOAuthLogin(profile);
       done(null, result);
diff --git a/backend/src/cache/cache.service.ts b/backend/src/cache/cache.service.ts
index c28ebec61..a592a756a 100644
--- a/backend/src/cache/cache.service.ts
+++ b/backend/src/cache/cache.service.ts
@@ -12,7 +12,9 @@ export class CacheService {
     try {
       return await this.cacheManager.get<T>(key);
     } catch (error) {
-      this.logger.warn(`Failed to fetch key "${key}" from cache: ${error.message}`);
+      this.logger.warn(
+        `Failed to fetch key "${key}" from cache: ${error.message}`,
+      );
       return null; // Graceful fallback
     }
   }
@@ -22,7 +24,9 @@ export class CacheService {
       // Pass configurations safely matching your cache-manager library specification
       await this.cacheManager.set(key, value, ttl);
     } catch (error) {
-      this.logger.warn(`Failed to set key "${key}" into cache: ${error.message}`);
+      this.logger.warn(
+        `Failed to set key "${key}" into cache: ${error.message}`,
+      );
     }
   }
 
@@ -30,7 +34,9 @@ export class CacheService {
     try {
       await this.cacheManager.del(key);
     } catch (error) {
-      this.logger.warn(`Failed to delete key "${key}" from cache: ${error.message}`);
+      this.logger.warn(
+        `Failed to delete key "${key}" from cache: ${error.message}`,
+      );
     }
   }
-}
\ No newline at end of file
+}
diff --git a/backend/src/categories/categories.controller.ts b/backend/src/categories/categories.controller.ts
index c1dccf2d3..8d3a9cbd7 100644
--- a/backend/src/categories/categories.controller.ts
+++ b/backend/src/categories/categories.controller.ts
@@ -1,4 +1,4 @@
-import { Controller, Get, Post, Body, Put, Param, Delete, UseInterceptors } from '@nestjs/common';
+import { Controller, Get, Post, Body, UseInterceptors } from '@nestjs/common';
 import { CacheInterceptor, CacheKey } from '@nestjs/cache-manager';
 import { CacheService } from '../cache/cache.service';
 
@@ -17,11 +17,11 @@ export class CategoriesController {
   }
 
   @Post()
-  async createCategory(@Body() body: any) {
+  async createCategory(@Body() _body: any) {
     // 1. Process standard write operations to database repository context
-    
+
     // 2. Clear out the cached asset layout lists instantly to invalidate stale states
     await this.cacheService.del(this.CATEGORIES_CACHE_KEY);
     return { success: true };
   }
-}
\ No newline at end of file
+}
diff --git a/backend/src/checkin/checkin.controller.ts b/backend/src/checkin/checkin.controller.ts
index fa882ba46..0f792997e 100644
--- a/backend/src/checkin/checkin.controller.ts
+++ b/backend/src/checkin/checkin.controller.ts
@@ -1,4 +1,12 @@
-import { Controller, Post, Get, Param, Body, Req, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Post,
+  Get,
+  Param,
+  Body,
+  Req,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { CheckinService } from './checkin.service';
 import { CheckoutDto } from './dtos/checkout.dto';
diff --git a/backend/src/checkin/checkin.entity.ts b/backend/src/checkin/checkin.entity.ts
index 1356a0bb1..72beed98f 100644
--- a/backend/src/checkin/checkin.entity.ts
+++ b/backend/src/checkin/checkin.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../users/entities/user.entity';
 
 @Entity('checkin_records')
diff --git a/backend/src/checkin/checkin.module.ts b/backend/src/checkin/checkin.module.ts
index e459c13ca..5c7d32a73 100644
--- a/backend/src/checkin/checkin.module.ts
+++ b/backend/src/checkin/checkin.module.ts
@@ -4,9 +4,13 @@ import { CheckinRecord } from './checkin.entity';
 import { Asset } from '../assets/entities/asset.entity';
 import { CheckinService } from './checkin.service';
 import { CheckinController } from './checkin.controller';
+import { NotificationModule } from '../notifications/notification.module';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([CheckinRecord, Asset])],
+  imports: [
+    TypeOrmModule.forFeature([CheckinRecord, Asset]),
+    NotificationModule,
+  ],
   controllers: [CheckinController],
   providers: [CheckinService],
   exports: [CheckinService],
diff --git a/backend/src/checkin/checkin.service.ts b/backend/src/checkin/checkin.service.ts
index 12ff5cc63..8587e799f 100644
--- a/backend/src/checkin/checkin.service.ts
+++ b/backend/src/checkin/checkin.service.ts
@@ -1,10 +1,19 @@
-import { Injectable, NotFoundException, BadRequestException } from '@nestjs/common';
+import {
+  Injectable,
+  NotFoundException,
+  BadRequestException,
+} from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { CheckinRecord } from './checkin.entity';
 import { Asset } from '../assets/entities/asset.entity';
 import { CheckoutDto } from './dtos/checkout.dto';
 import { CheckinDto } from './dtos/checkin.dto';
+import {
+  NotificationDispatchService,
+  DispatchNotificationDto,
+} from '../notifications/notification-dispatch.service';
+import { NotificationEvent } from '../notifications/enums/notification-event.enum';
 
 @Injectable()
 export class CheckinService {
@@ -13,10 +22,13 @@ export class CheckinService {
     private readonly checkinRepository: Repository<CheckinRecord>,
     @InjectRepository(Asset)
     private readonly assetRepository: Repository<Asset>,
+    private readonly notificationDispatchService: NotificationDispatchService,
   ) {}
 
   async checkout(dto: CheckoutDto, userId?: string): Promise<CheckinRecord> {
-    const asset = await this.assetRepository.findOne({ where: { id: dto.assetId } });
+    const asset = await this.assetRepository.findOne({
+      where: { id: dto.assetId },
+    });
     if (!asset) throw new NotFoundException('Asset not found');
 
     const active = await this.checkinRepository.findOne({
@@ -81,4 +93,51 @@ export class CheckinService {
       order: { checkedOutAt: 'DESC' },
     });
   }
+
+  async markOverdue(checkinId: string): Promise<CheckinRecord> {
+    const record = await this.checkinRepository.findOne({
+      where: { id: checkinId, status: 'CHECKED_OUT' },
+      relations: ['assignedTo'],
+    });
+    if (!record) throw new NotFoundException('Checkin record not found');
+
+    const asset = await this.assetRepository.findOne({
+      where: { id: record.assetId },
+    });
+    if (!asset) throw new NotFoundException('Asset not found');
+
+    record.status = 'OVERDUE';
+    await this.checkinRepository.save(record);
+
+    // Send notification for overdue checkout
+    const notificationDto: DispatchNotificationDto = {
+      userId: record.assignedToId,
+      event: NotificationEvent.CHECKOUT_OVERDUE,
+      title: 'Checkout Overdue',
+      message: `Asset ${asset.name} checkout is overdue.`,
+      entityType: 'Checkin',
+      entityId: checkinId,
+      metadata: {
+        assetName: asset.name,
+        assetId: asset.assetId,
+        dueDate: record.dueDate,
+        checkedOutAt: record.checkedOutAt,
+      },
+      emailTemplate: 'checkout-overdue',
+      emailSubject: `Checkout Overdue: ${asset.name}`,
+      emailContext: {
+        assetName: asset.name,
+        assetId: asset.assetId,
+        assignedTo: record.assignedTo?.email || 'Unknown',
+        dueDate: record.dueDate?.toISOString().split('T')[0],
+        daysOverdue: Math.floor(
+          (Date.now() - record.dueDate.getTime()) / (1000 * 60 * 60 * 24),
+        ),
+        checkoutLink: `${process.env.FRONTEND_URL}/checkouts/${checkinId}`,
+      },
+    };
+    await this.notificationDispatchService.dispatch(notificationDto);
+
+    return record;
+  }
 }
diff --git a/backend/src/common/api-response.ts b/backend/src/common/api-response.ts
index 17f3749ce..f06269beb 100644
--- a/backend/src/common/api-response.ts
+++ b/backend/src/common/api-response.ts
@@ -10,4 +10,4 @@ export class ApiResponse<T> {
   static fail<T>(message: string): ApiResponse<T> {
     return { success: false, data: null as T, message };
   }
-}
\ No newline at end of file
+}
diff --git a/backend/src/common/depreciation/depreciation.service.ts b/backend/src/common/depreciation/depreciation.service.ts
index 81974662c..1b28efbde 100644
--- a/backend/src/common/depreciation/depreciation.service.ts
+++ b/backend/src/common/depreciation/depreciation.service.ts
@@ -22,8 +22,12 @@ export class DepreciationService {
     const annualDepreciation = (purchasePrice - salvageValue) / usefulLife;
     const monthlyDepreciation = annualDepreciation / 12;
     const now = new Date();
-    const yearsOwned = (now.getTime() - purchaseDate.getTime()) / (365.25 * 24 * 60 * 60 * 1000);
-    const accumulatedDepreciation = Math.min(annualDepreciation * yearsOwned, purchasePrice - salvageValue);
+    const yearsOwned =
+      (now.getTime() - purchaseDate.getTime()) / (365.25 * 24 * 60 * 60 * 1000);
+    const accumulatedDepreciation = Math.min(
+      annualDepreciation * yearsOwned,
+      purchasePrice - salvageValue,
+    );
     const currentBookValue = purchasePrice - accumulatedDepreciation;
     const remainingLife = Math.max(0, usefulLife - yearsOwned);
 
@@ -36,16 +40,23 @@ export class DepreciationService {
     };
   }
 
-  calculateDecliningBalance(input: DepreciationInput, rate = 2): DepreciationResult {
+  calculateDecliningBalance(
+    input: DepreciationInput,
+    rate = 2,
+  ): DepreciationResult {
     const { purchasePrice, salvageValue, usefulLife, purchaseDate } = input;
     const now = new Date();
-    const yearsOwned = (now.getTime() - purchaseDate.getTime()) / (365.25 * 24 * 60 * 60 * 1000);
+    const yearsOwned =
+      (now.getTime() - purchaseDate.getTime()) / (365.25 * 24 * 60 * 60 * 1000);
     const annualRate = rate / usefulLife;
     let currentBookValue = purchasePrice;
     let accumulatedDepreciation = 0;
 
     for (let year = 0; year < Math.floor(yearsOwned); year++) {
-      const depreciation = Math.min(currentBookValue * annualRate, currentBookValue - salvageValue);
+      const depreciation = Math.min(
+        currentBookValue * annualRate,
+        currentBookValue - salvageValue,
+      );
       accumulatedDepreciation += depreciation;
       currentBookValue -= depreciation;
       if (currentBookValue <= salvageValue) {
@@ -56,8 +67,12 @@ export class DepreciationService {
 
     const remainingMonths = (yearsOwned - Math.floor(yearsOwned)) * 12;
     if (remainingMonths > 0 && currentBookValue > salvageValue) {
-      const partialDepreciation = (currentBookValue * annualRate) * (remainingMonths / 12);
-      const cappedPartial = Math.min(partialDepreciation, currentBookValue - salvageValue);
+      const partialDepreciation =
+        currentBookValue * annualRate * (remainingMonths / 12);
+      const cappedPartial = Math.min(
+        partialDepreciation,
+        currentBookValue - salvageValue,
+      );
       accumulatedDepreciation += cappedPartial;
       currentBookValue -= cappedPartial;
     }
@@ -67,7 +82,7 @@ export class DepreciationService {
 
     return {
       annualDepreciation: Math.round(annualDepreciation * 100) / 100,
-      monthlyDepreciation: Math.round(annualDepreciation / 12 * 100) / 100,
+      monthlyDepreciation: Math.round((annualDepreciation / 12) * 100) / 100,
       currentBookValue: Math.round(currentBookValue * 100) / 100,
       accumulatedDepreciation: Math.round(accumulatedDepreciation * 100) / 100,
       remainingLife: Math.round(remainingLife * 10) / 10,
diff --git a/backend/src/common/dto/pagination.dto.ts b/backend/src/common/dto/pagination.dto.ts
index 3225aaa60..be7ea9cb6 100644
--- a/backend/src/common/dto/pagination.dto.ts
+++ b/backend/src/common/dto/pagination.dto.ts
@@ -30,4 +30,4 @@ export class PaginatedResponse<T> {
     this.limit = limit;
     this.totalPages = Math.ceil(total / limit);
   }
-}
\ No newline at end of file
+}
diff --git a/backend/src/common/filters/global-exception.filter.ts b/backend/src/common/filters/global-exception.filter.ts
index 9d10c0acf..847d9596e 100644
--- a/backend/src/common/filters/global-exception.filter.ts
+++ b/backend/src/common/filters/global-exception.filter.ts
@@ -1,4 +1,11 @@
-import { ExceptionFilter, Catch, ArgumentsHost, HttpException, HttpStatus, Logger } from '@nestjs/common';
+import {
+  ExceptionFilter,
+  Catch,
+  ArgumentsHost,
+  HttpException,
+  HttpStatus,
+  Logger,
+} from '@nestjs/common';
 import { Request, Response } from 'express';
 
 @Catch()
@@ -10,15 +17,19 @@ export class GlobalExceptionFilter implements ExceptionFilter {
     const response = ctx.getResponse<Response>();
     const request = ctx.getRequest<Request>();
 
-    const status = exception instanceof HttpException
-      ? exception.getStatus()
-      : HttpStatus.INTERNAL_SERVER_ERROR;
+    const status =
+      exception instanceof HttpException
+        ? exception.getStatus()
+        : HttpStatus.INTERNAL_SERVER_ERROR;
 
-    const message = exception instanceof HttpException
-      ? (exception.getResponse() as string | { message: string })
-      : 'Internal server error';
+    const message =
+      exception instanceof HttpException
+        ? (exception.getResponse() as string | { message: string })
+        : 'Internal server error';
 
-    this.logger.error(${request.method}  - , exception instanceof Error ? exception.stack : String(exception));
+    this.logger.error(
+      `${request.method} ${request.url} - ${exception instanceof Error ? exception.stack : String(exception)}`,
+    );
 
     response.status(status).json({
       success: false,
@@ -28,4 +39,4 @@ export class GlobalExceptionFilter implements ExceptionFilter {
       path: request.url,
     });
   }
-}
\ No newline at end of file
+}
diff --git a/backend/src/common/interceptors/response.interceptor.ts b/backend/src/common/interceptors/response.interceptor.ts
index a3840cb1e..a91bb06f7 100644
--- a/backend/src/common/interceptors/response.interceptor.ts
+++ b/backend/src/common/interceptors/response.interceptor.ts
@@ -1,4 +1,9 @@
-import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
+import {
+  Injectable,
+  NestInterceptor,
+  ExecutionContext,
+  CallHandler,
+} from '@nestjs/common';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -10,13 +15,19 @@ export interface ApiResponse<T> {
 }
 
 @Injectable()
-export class ResponseInterceptor<T> implements NestInterceptor<T, ApiResponse<T>> {
-  intercept(context: ExecutionContext, next: CallHandler): Observable<ApiResponse<T>> {
+export class ResponseInterceptor<T> implements NestInterceptor<
+  T,
+  ApiResponse<T>
+> {
+  intercept(
+    context: ExecutionContext,
+    next: CallHandler,
+  ): Observable<ApiResponse<T>> {
     const ctx = context.switchToHttp();
     const request = ctx.getRequest();
 
     return next.handle().pipe(
-      map(data => ({
+      map((data) => ({
         success: true,
         data,
         timestamp: new Date().toISOString(),
diff --git a/backend/src/common/logger/logger.service.ts b/backend/src/common/logger/logger.service.ts
index 0f3a3ba9f..e7da1f0cc 100644
--- a/backend/src/common/logger/logger.service.ts
+++ b/backend/src/common/logger/logger.service.ts
@@ -1,4 +1,9 @@
-import { Injectable, Logger, LoggerService as NestLoggerService, LogLevel } from '@nestjs/common';
+import {
+  Injectable,
+  Logger,
+  LoggerService as NestLoggerService,
+  LogLevel,
+} from '@nestjs/common';
 
 @Injectable()
 export class LoggerService implements NestLoggerService {
diff --git a/backend/src/contracts/contracts.controller.ts b/backend/src/contracts/contracts.controller.ts
index 7c02314a1..e2d5863f4 100644
--- a/backend/src/contracts/contracts.controller.ts
+++ b/backend/src/contracts/contracts.controller.ts
@@ -1,4 +1,17 @@
-import { Controller, Get, Post, Put, Delete, Param, Body, Query, Req, UseGuards, UseInterceptors, UploadedFile } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Param,
+  Body,
+  Query,
+  Req,
+  UseGuards,
+  UseInterceptors,
+  UploadedFile,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { ContractsService } from './contracts.service';
@@ -22,7 +35,7 @@ export class ContractsController {
 
   @Post('upload')
   @UseInterceptors(FileInterceptor('file'))
-  async upload(@UploadedFile() file: Express.Multer.File, @Req() req: any) {
+  async upload(@UploadedFile() file: Express.Multer.File) {
     const key = `contracts/${Date.now()}-${file.originalname}`;
     await this.storageService.upload(file, key);
     const url = await this.storageService.getSignedUrl(key);
@@ -40,7 +53,11 @@ export class ContractsController {
   }
 
   @Put(':id')
-  async update(@Param('id') id: string, @Body() dto: UpdateContractDto, @Req() req: any) {
+  async update(
+    @Param('id') id: string,
+    @Body() dto: UpdateContractDto,
+    @Req() req: any,
+  ) {
     return this.contractsService.update(id, dto, req.user?.id);
   }
 
diff --git a/backend/src/contracts/contracts.service.ts b/backend/src/contracts/contracts.service.ts
index 190d868c5..40f5cf997 100644
--- a/backend/src/contracts/contracts.service.ts
+++ b/backend/src/contracts/contracts.service.ts
@@ -16,7 +16,10 @@ export class ContractsService {
     private readonly contractRepository: Repository<Contract>,
     private readonly configService: ConfigService,
   ) {
-    this.nextNumber = parseInt(configService.get<string>('CONTRACT_ID_START', '500'), 10);
+    this.nextNumber = parseInt(
+      configService.get<string>('CONTRACT_ID_START', '500'),
+      10,
+    );
   }
 
   async create(dto: CreateContractDto, userId?: string): Promise<Contract> {
@@ -30,9 +33,12 @@ export class ContractsService {
     return this.contractRepository.save(contract);
   }
 
-  async findAll(query: ContractQueryDto): Promise<{ data: Contract[]; total: number }> {
+  async findAll(
+    query: ContractQueryDto,
+  ): Promise<{ data: Contract[]; total: number }> {
     const { search, status, vendor, assignedToId, page, limit } = query;
-    const qb = this.contractRepository.createQueryBuilder('contract')
+    const qb = this.contractRepository
+      .createQueryBuilder('contract')
       .leftJoinAndSelect('contract.createdBy', 'createdBy')
       .leftJoinAndSelect('contract.assignedTo', 'assignedTo');
 
@@ -43,8 +49,10 @@ export class ContractsService {
       );
     }
     if (status) qb.andWhere('contract.status = :status', { status });
-    if (vendor) qb.andWhere('contract.vendor ILIKE :vendor', { vendor: `%${vendor}%` });
-    if (assignedToId) qb.andWhere('contract.assignedToId = :assignedToId', { assignedToId });
+    if (vendor)
+      qb.andWhere('contract.vendor ILIKE :vendor', { vendor: `%${vendor}%` });
+    if (assignedToId)
+      qb.andWhere('contract.assignedToId = :assignedToId', { assignedToId });
 
     qb.orderBy('contract.createdAt', 'DESC');
     qb.skip((page - 1) * limit).take(limit);
@@ -60,7 +68,11 @@ export class ContractsService {
     return contract;
   }
 
-  async update(id: string, dto: UpdateContractDto, userId?: string): Promise<Contract> {
+  async update(
+    id: string,
+    dto: UpdateContractDto,
+    _userId?: string,
+  ): Promise<Contract> {
     const contract = await this.findById(id);
     Object.assign(contract, dto);
     return this.contractRepository.save(contract);
diff --git a/backend/src/contracts/entities/contract.entity.ts b/backend/src/contracts/entities/contract.entity.ts
index 4b6818c0e..7dc3a37c6 100644
--- a/backend/src/contracts/entities/contract.entity.ts
+++ b/backend/src/contracts/entities/contract.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../../users/entities/user.entity';
 
 @Entity('contracts')
diff --git a/backend/src/data-source.ts b/backend/src/data-source.ts
index 94ff5cb7a..335358a43 100644
--- a/backend/src/data-source.ts
+++ b/backend/src/data-source.ts
@@ -16,4 +16,4 @@ export const AppDataSource = new DataSource({
   entities: ['src/**/*.entity.ts'],
   migrations: ['src/migrations/*.ts'],
   synchronize: false,
-});
\ No newline at end of file
+});
diff --git a/backend/src/inventory/dtos/inventory-query.dto.ts b/backend/src/inventory/dtos/inventory-query.dto.ts
index 0e976077f..fc6574f06 100644
--- a/backend/src/inventory/dtos/inventory-query.dto.ts
+++ b/backend/src/inventory/dtos/inventory-query.dto.ts
@@ -1,4 +1,11 @@
-import { IsOptional, IsString, IsBoolean, IsInt, Min, Max } from 'class-validator';
+import {
+  IsOptional,
+  IsString,
+  IsBoolean,
+  IsInt,
+  Min,
+  Max,
+} from 'class-validator';
 import { Type } from 'class-transformer';
 
 export class InventoryQueryDto {
diff --git a/backend/src/inventory/entities/inventory.entity.ts b/backend/src/inventory/entities/inventory.entity.ts
index 34dda1e0d..ba1bbbce8 100644
--- a/backend/src/inventory/entities/inventory.entity.ts
+++ b/backend/src/inventory/entities/inventory.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { Asset } from '../../assets/asset.entity';
 
 @Entity('inventory')
diff --git a/backend/src/inventory/inventory.controller.ts b/backend/src/inventory/inventory.controller.ts
index 4dbac7489..112d711e0 100644
--- a/backend/src/inventory/inventory.controller.ts
+++ b/backend/src/inventory/inventory.controller.ts
@@ -1,4 +1,14 @@
-import { Controller, Get, Post, Put, Delete, Param, Body, Query, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Param,
+  Body,
+  Query,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { InventoryService } from './inventory.service';
 import { CreateInventoryDto } from './dtos/create-inventory.dto';
diff --git a/backend/src/inventory/inventory.service.ts b/backend/src/inventory/inventory.service.ts
index 8cd5a6d78..21212a456 100644
--- a/backend/src/inventory/inventory.service.ts
+++ b/backend/src/inventory/inventory.service.ts
@@ -14,26 +14,40 @@ export class InventoryService {
   ) {}
 
   async create(dto: CreateInventoryDto): Promise<Inventory> {
-    const totalValue = dto.quantity && dto.unitPrice ? dto.quantity * dto.unitPrice : 0;
+    const totalValue =
+      dto.quantity && dto.unitPrice ? dto.quantity * dto.unitPrice : 0;
     const item = this.inventoryRepository.create({ ...dto, totalValue });
     return this.inventoryRepository.save(item);
   }
 
-  async findAll(query: InventoryQueryDto): Promise<{ data: Inventory[]; total: number }> {
-    const { page = 1, limit = 20, categoryId, location, search, lowStock } = query;
-    const qb = this.inventoryRepository.createQueryBuilder('item')
+  async findAll(
+    query: InventoryQueryDto,
+  ): Promise<{ data: Inventory[]; total: number }> {
+    const {
+      page = 1,
+      limit = 20,
+      categoryId,
+      location,
+      search,
+      lowStock,
+    } = query;
+    const qb = this.inventoryRepository
+      .createQueryBuilder('item')
       .leftJoinAndSelect('item.asset', 'asset')
       .skip((page - 1) * limit)
       .take(limit)
       .orderBy('item.createdAt', 'DESC');
 
-    if (categoryId) qb.andWhere('item.categoryId = :categoryId', { categoryId });
-    if (location) qb.andWhere('item.location ILIKE :location', { location: `%${location}%` });
+    if (categoryId)
+      qb.andWhere('item.categoryId = :categoryId', { categoryId });
+    if (location)
+      qb.andWhere('item.location ILIKE :location', {
+        location: `%${location}%`,
+      });
     if (search) {
-      qb.andWhere(
-        '(item.notes ILIKE :search OR item.location ILIKE :search)',
-        { search: `%${search}%` },
-      );
+      qb.andWhere('(item.notes ILIKE :search OR item.location ILIKE :search)', {
+        search: `%${search}%`,
+      });
     }
     if (lowStock) {
       qb.andWhere('item.quantity <= item.reorderLevel');
@@ -56,7 +70,8 @@ export class InventoryService {
     const item = await this.findById(id);
     Object.assign(item, dto);
     if (dto.quantity !== undefined || dto.unitPrice !== undefined) {
-      item.totalValue = (dto.quantity ?? item.quantity) * (dto.unitPrice ?? item.unitPrice);
+      item.totalValue =
+        (dto.quantity ?? item.quantity) * (dto.unitPrice ?? item.unitPrice);
     }
     return this.inventoryRepository.save(item);
   }
diff --git a/backend/src/licenses/entities/license.entity.ts b/backend/src/licenses/entities/license.entity.ts
index 4ed86fefb..af09b68c4 100644
--- a/backend/src/licenses/entities/license.entity.ts
+++ b/backend/src/licenses/entities/license.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../../users/entities/user.entity';
 
 @Entity('licenses')
diff --git a/backend/src/licenses/licenses.controller.ts b/backend/src/licenses/licenses.controller.ts
index f354fe1ca..777db389e 100644
--- a/backend/src/licenses/licenses.controller.ts
+++ b/backend/src/licenses/licenses.controller.ts
@@ -1,4 +1,15 @@
-import { Controller, Get, Post, Put, Delete, Param, Body, Query, Req, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Param,
+  Body,
+  Query,
+  Req,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { LicensesService } from './licenses.service';
 import { CreateLicenseDto } from './dtos/create-license.dto';
@@ -26,7 +37,11 @@ export class LicensesController {
   }
 
   @Put(':id')
-  async update(@Param('id') id: string, @Body() dto: UpdateLicenseDto, @Req() req: any) {
+  async update(
+    @Param('id') id: string,
+    @Body() dto: UpdateLicenseDto,
+    @Req() req: any,
+  ) {
     return this.licensesService.update(id, dto, req.user?.id);
   }
 
diff --git a/backend/src/licenses/licenses.service.ts b/backend/src/licenses/licenses.service.ts
index 0dacb5e67..db7bf37c5 100644
--- a/backend/src/licenses/licenses.service.ts
+++ b/backend/src/licenses/licenses.service.ts
@@ -23,9 +23,12 @@ export class LicensesService {
     return this.licenseRepository.save(license);
   }
 
-  async findAll(query: LicenseQueryDto): Promise<{ data: License[]; total: number }> {
+  async findAll(
+    query: LicenseQueryDto,
+  ): Promise<{ data: License[]; total: number }> {
     const { search, status, vendor, page, limit } = query;
-    const qb = this.licenseRepository.createQueryBuilder('license')
+    const qb = this.licenseRepository
+      .createQueryBuilder('license')
       .leftJoinAndSelect('license.assignedTo', 'assignedTo')
       .leftJoinAndSelect('license.createdBy', 'createdBy');
 
@@ -36,7 +39,8 @@ export class LicensesService {
       );
     }
     if (status) qb.andWhere('license.status = :status', { status });
-    if (vendor) qb.andWhere('license.vendor ILIKE :vendor', { vendor: `%${vendor}%` });
+    if (vendor)
+      qb.andWhere('license.vendor ILIKE :vendor', { vendor: `%${vendor}%` });
 
     qb.orderBy('license.createdAt', 'DESC');
     qb.skip((page - 1) * limit).take(limit);
@@ -52,7 +56,11 @@ export class LicensesService {
     return license;
   }
 
-  async update(id: string, dto: UpdateLicenseDto, userId?: string): Promise<License> {
+  async update(
+    id: string,
+    dto: UpdateLicenseDto,
+    _userId?: string,
+  ): Promise<License> {
     const license = await this.findById(id);
     Object.assign(license, dto);
     return this.licenseRepository.save(license);
diff --git a/backend/src/locations/entities/location.entity.ts b/backend/src/locations/entities/location.entity.ts
index 5494dc032..e237cce10 100644
--- a/backend/src/locations/entities/location.entity.ts
+++ b/backend/src/locations/entities/location.entity.ts
@@ -1,4 +1,10 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+} from 'typeorm';
 
 @Entity('locations')
 export class Location {
diff --git a/backend/src/locations/locations.controller.ts b/backend/src/locations/locations.controller.ts
index cbec5cb2e..a14d202a9 100644
--- a/backend/src/locations/locations.controller.ts
+++ b/backend/src/locations/locations.controller.ts
@@ -1,4 +1,14 @@
-import { Controller, Get, Post, Put, Delete, Param, Body, Query, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Param,
+  Body,
+  Query,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { LocationsService } from './locations.service';
 import { CreateLocationDto } from './dtos/create-location.dto';
@@ -15,7 +25,9 @@ export class LocationsController {
   }
 
   @Get()
-  async findAll(@Query() query: { page?: number; limit?: number; isActive?: boolean }) {
+  async findAll(
+    @Query() query: { page?: number; limit?: number; isActive?: boolean },
+  ) {
     return this.locationsService.findAll(query);
   }
 
diff --git a/backend/src/locations/locations.service.ts b/backend/src/locations/locations.service.ts
index 7c2a001c6..6a7f592e9 100644
--- a/backend/src/locations/locations.service.ts
+++ b/backend/src/locations/locations.service.ts
@@ -17,13 +17,17 @@ export class LocationsService {
     return this.locationRepository.save(location);
   }
 
-  async findAll(query: { page?: number; limit?: number; isActive?: boolean } = {}): Promise<{ data: Location[]; total: number }> {
+  async findAll(
+    query: { page?: number; limit?: number; isActive?: boolean } = {},
+  ): Promise<{ data: Location[]; total: number }> {
     const { page = 1, limit = 20, isActive } = query;
-    const qb = this.locationRepository.createQueryBuilder('location')
+    const qb = this.locationRepository
+      .createQueryBuilder('location')
       .skip((page - 1) * limit)
       .take(limit);
 
-    if (isActive !== undefined) qb.andWhere('location.isActive = :isActive', { isActive });
+    if (isActive !== undefined)
+      qb.andWhere('location.isActive = :isActive', { isActive });
 
     const [data, total] = await qb.getManyAndCount();
     return { data, total };
diff --git a/backend/src/mail/mail.service.ts b/backend/src/mail/mail.service.ts
index cb47a35a8..efe36e8ac 100644
--- a/backend/src/mail/mail.service.ts
+++ b/backend/src/mail/mail.service.ts
@@ -20,29 +20,57 @@ export class MailService {
   }
 
   async sendPasswordResetEmail(email: string, resetLink: string) {
-    await this.sendTemplateEmail(email, 'Password Reset', 'password-reset', { resetLink });
+    await this.sendTemplateEmail(email, 'Password Reset', 'password-reset', {
+      resetLink,
+    });
   }
 
   async sendWelcomeEmail(email: string, name: string) {
-    await this.sendTemplateEmail(email, 'Welcome to AssetsUp', 'welcome', { name });
+    await this.sendTemplateEmail(email, 'Welcome to AssetsUp', 'welcome', {
+      name,
+    });
   }
 
-  async sendTemplateEmail(to: string, subject: string, template: string, context: Record<string, any>) {
+  async sendTemplateEmail(
+    to: string,
+    subject: string,
+    template: string,
+    context: Record<string, any>,
+    attachment?: { filename: string; content: Buffer; contentType: string },
+  ) {
     const html = this.renderTemplate(template, context);
     try {
-      await this.transporter.sendMail({
-        from: this.configService.get<string>('MAIL_FROM', 'noreply@assetsup.local'),
+      const mailOptions: any = {
+        from: this.configService.get<string>(
+          'MAIL_FROM',
+          'noreply@assetsup.local',
+        ),
         to,
         subject,
         html,
-      });
+      };
+
+      if (attachment) {
+        mailOptions.attachments = [
+          {
+            filename: attachment.filename,
+            content: attachment.content,
+            contentType: attachment.contentType,
+          },
+        ];
+      }
+
+      await this.transporter.sendMail(mailOptions);
       this.logger.log(`Email sent to ${to} with subject "${subject}"`);
     } catch (error) {
       this.logger.error(`Failed to send email to ${to}: ${error.message}`);
     }
   }
 
-  private renderTemplate(template: string, context: Record<string, any>): string {
+  private renderTemplate(
+    template: string,
+    context: Record<string, any>,
+  ): string {
     const templates: Record<string, (ctx: Record<string, any>) => string> = {
       'password-reset': (ctx) => `
         <h1>Password Reset</h1>
@@ -50,7 +78,7 @@ export class MailService {
         <a href="${ctx.resetLink}">${ctx.resetLink}</a>
         <p>This link expires in 1 hour.</p>
       `,
-      'welcome': (ctx) => `
+      welcome: (ctx) => `
         <h1>Welcome to AssetsUp!</h1>
         <p>Hello ${ctx.name},</p>
         <p>Your account has been created successfully.</p>
@@ -62,17 +90,92 @@ export class MailService {
       `,
       'maintenance-due': (ctx) => `
         <h1>Maintenance Due</h1>
-        <p>Asset <strong>${ctx.assetName}</strong> has scheduled maintenance due on ${ctx.dueDate}.</p>
+        <p>Asset <strong>${ctx.assetName}</strong> (${ctx.assetId}) has scheduled maintenance due on <strong>${ctx.dueDate}</strong>.</p>
+        <p>Description: ${ctx.description}</p>
+        <p><a href="${ctx.assetLink}">View Asset</a></p>
       `,
       'warranty-expiry': (ctx) => `
         <h1>Warranty Expiry Notice</h1>
-        <p>The warranty for <strong>${ctx.assetName}</strong> expires on ${ctx.expiryDate}.</p>
+        <p>The warranty for <strong>${ctx.assetName}</strong> (${ctx.assetId}) expires on <strong>${ctx.expiryDate}</strong>.</p>
+        ${ctx.daysRemaining ? `<p>Days remaining: ${ctx.daysRemaining}</p>` : ''}
+        <p><a href="${ctx.assetLink}">View Asset</a></p>
+      `,
+      'export-ready': (ctx) => `
+        <h1>Your Report is Ready</h1>
+        <p>Your <strong>${ctx.reportName}</strong> report has been generated successfully.</p>
+        <p>Format: ${ctx.format.toUpperCase()}</p>
+        <p>Total rows: ${ctx.rowCount}</p>
+        <p>Please find the report attached to this email.</p>
+      `,
+      'asset-transferred': (ctx) => `
+        <h1>Asset Transferred</h1>
+        <p>Asset <strong>${ctx.assetName}</strong> (${ctx.assetId}) has been transferred.</p>
+        ${ctx.assignedTo ? `<p>Assigned to: ${ctx.assignedTo}</p>` : ''}
+        ${ctx.location ? `<p>Location: ${ctx.location}</p>` : ''}
+        <p><a href="${ctx.assetLink}">View Asset</a></p>
+      `,
+      'asset-status-changed': (ctx) => `
+        <h1>Asset Status Changed</h1>
+        <p>Asset <strong>${ctx.assetName}</strong> (${ctx.assetId}) status changed from ${ctx.oldStatus} to <strong>${ctx.newStatus}</strong>.</p>
+        <p><a href="${ctx.assetLink}">View Asset</a></p>
+      `,
+      'work-order-assigned': (ctx) => `
+        <h1>Work Order Assigned</h1>
+        <p>You have been assigned to work order <strong>${ctx.workOrderId}</strong>.</p>
+        <p>Asset: ${ctx.assetName}</p>
+        <p>Description: ${ctx.description}</p>
+        ${ctx.dueDate ? `<p>Due Date: ${ctx.dueDate}</p>` : ''}
+        <p><a href="${ctx.workOrderLink}">View Work Order</a></p>
+      `,
+      'work-order-completed': (ctx) => `
+        <h1>Work Order Completed</h1>
+        <p>Work order <strong>${ctx.workOrderId}</strong> has been completed.</p>
+        <p>Asset: ${ctx.assetName}</p>
+        <p>Completed by: ${ctx.completedBy}</p>
+        <p><a href="${ctx.workOrderLink}">View Work Order</a></p>
+      `,
+
+      'checkout-overdue': (ctx) => `
+        <h1>Checkout Overdue</h1>
+        <p>Asset <strong>${ctx.assetName}</strong> (${ctx.assetId}) checkout is overdue.</p>
+        <p>Checked out to: ${ctx.assignedTo}</p>
+        <p>Due date: ${ctx.dueDate}</p>
+        <p>Days overdue: ${ctx.daysOverdue}</p>
+        <p><a href="${ctx.checkoutLink}">View Checkout</a></p>
+      `,
+      'contract-expiring': (ctx) => `
+        <h1>Contract Expiring Soon</h1>
+        <p>Contract <strong>${ctx.contractName}</strong> expires on <strong>${ctx.expiryDate}</strong>.</p>
+        ${ctx.daysRemaining ? `<p>Days remaining: ${ctx.daysRemaining}</p>` : ''}
+        <p><a href="${ctx.contractLink}">View Contract</a></p>
+      `,
+      'low-stock': (ctx) => `
+        <h1>Low Stock Alert</h1>
+        <p>Asset <strong>${ctx.assetName}</strong> is running low.</p>
+        <p>Current quantity: ${ctx.currentQuantity}</p>
+        <p>Minimum threshold: ${ctx.minThreshold}</p>
+        <p><a href="${ctx.assetLink}">View Asset</a></p>
+      `,
+      'booking-confirmed': (ctx) => `
+        <h1>Booking Confirmed</h1>
+        <p>Your booking for <strong>${ctx.assetName}</strong> has been confirmed.</p>
+        <p>Start date: ${ctx.startDate}</p>
+        <p>End date: ${ctx.endDate}</p>
+        <p><a href="${ctx.bookingLink}">View Booking</a></p>
+      `,
+      'booking-cancelled': (ctx) => `
+        <h1>Booking Cancelled</h1>
+        <p>Your booking for <strong>${ctx.assetName}</strong> has been cancelled.</p>
+        <p>Start date: ${ctx.startDate}</p>
+        <p>End date: ${ctx.endDate}</p>
+        ${ctx.reason ? `<p>Reason: ${ctx.reason}</p>` : ''}
+        <p><a href="${ctx.bookingLink}">View Details</a></p>
       `,
     };
     const render = templates[template];
     if (!render) {
       this.logger.warn(`Unknown email template: ${template}`);
-      return `<p>${subject}</p>`;
+      return `<p>Email notification</p>`;
     }
     return render(context);
   }
diff --git a/backend/src/migrations/1700000000000-InitialSchema.ts b/backend/src/migrations/1700000000000-InitialSchema.ts
index 0c13206eb..4871f07a2 100644
--- a/backend/src/migrations/1700000000000-InitialSchema.ts
+++ b/backend/src/migrations/1700000000000-InitialSchema.ts
@@ -8,7 +8,13 @@ export class InitialSchema1700000000000 implements MigrationInterface {
       new Table({
         name: 'users',
         columns: [
-          { name: 'id', type: 'uuid', isPrimary: true, generationStrategy: 'uuid', default: 'uuid_generate_v4()' },
+          {
+            name: 'id',
+            type: 'uuid',
+            isPrimary: true,
+            generationStrategy: 'uuid',
+            default: 'uuid_generate_v4()',
+          },
           { name: 'email', type: 'varchar', isUnique: true },
           { name: 'password_hash', type: 'varchar', isNullable: true },
           { name: 'google_id', type: 'varchar', isNullable: true },
@@ -23,4 +29,4 @@ export class InitialSchema1700000000000 implements MigrationInterface {
   public async down(queryRunner: QueryRunner): Promise<void> {
     await queryRunner.dropTable('users');
   }
-}
\ No newline at end of file
+}
diff --git a/backend/src/notifications/dtos/create-notification.dto.ts b/backend/src/notifications/dtos/create-notification.dto.ts
new file mode 100644
index 000000000..658a74aea
--- /dev/null
+++ b/backend/src/notifications/dtos/create-notification.dto.ts
@@ -0,0 +1,11 @@
+import { NotificationEvent } from '../enums/notification-event.enum';
+
+export class CreateNotificationDto {
+  userId: string;
+  event: NotificationEvent;
+  title: string;
+  message: string;
+  entityType?: string;
+  entityId?: string;
+  metadata?: Record<string, any>;
+}
diff --git a/backend/src/notifications/entities/notification.entity.ts b/backend/src/notifications/entities/notification.entity.ts
new file mode 100644
index 000000000..6f7e9bb41
--- /dev/null
+++ b/backend/src/notifications/entities/notification.entity.ts
@@ -0,0 +1,53 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
+import { User } from '../../users/entities/user.entity';
+import { NotificationEvent } from '../enums/notification-event.enum';
+
+@Entity('notifications')
+export class Notification {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column()
+  userId: string;
+
+  @ManyToOne(() => User, { nullable: true })
+  @JoinColumn({ name: 'userId' })
+  user: User;
+
+  @Column({ type: 'varchar' })
+  event: NotificationEvent;
+
+  @Column()
+  title: string;
+
+  @Column({ type: 'text' })
+  message: string;
+
+  @Column({ nullable: true })
+  entityType: string;
+
+  @Column({ nullable: true })
+  entityId: string;
+
+  @Column({ type: 'jsonb', nullable: true })
+  metadata: Record<string, any>;
+
+  @Column({ default: false })
+  isRead: boolean;
+
+  @Column({ nullable: true })
+  readAt: Date;
+
+  @Column({ nullable: true })
+  emailSent: boolean;
+
+  @CreateDateColumn()
+  createdAt: Date;
+}
diff --git a/backend/src/notifications/entities/user-notification-preference.entity.ts b/backend/src/notifications/entities/user-notification-preference.entity.ts
new file mode 100644
index 000000000..5bf7265b8
--- /dev/null
+++ b/backend/src/notifications/entities/user-notification-preference.entity.ts
@@ -0,0 +1,52 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
+import { User } from '../../users/entities/user.entity';
+import { NotificationEvent } from '../enums/notification-event.enum';
+
+@Entity('user_notification_preferences')
+export class UserNotificationPreference {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ unique: true })
+  userId: string;
+
+  @ManyToOne(() => User, { nullable: false })
+  @JoinColumn({ name: 'userId' })
+  user: User;
+
+  @Column({ type: 'jsonb', default: defaultPreferences })
+  emailPreferences: Record<NotificationEvent, boolean>;
+
+  @Column({ type: 'jsonb', default: defaultPreferences })
+  inAppPreferences: Record<NotificationEvent, boolean>;
+
+  @CreateDateColumn()
+  createdAt: Date;
+
+  @UpdateDateColumn()
+  updatedAt: Date;
+}
+
+function defaultPreferences(): Record<NotificationEvent, boolean> {
+  return {
+    [NotificationEvent.ASSET_TRANSFERRED]: true,
+    [NotificationEvent.ASSET_STATUS_CHANGED]: true,
+    [NotificationEvent.WORK_ORDER_ASSIGNED]: true,
+    [NotificationEvent.WORK_ORDER_COMPLETED]: true,
+    [NotificationEvent.MAINTENANCE_DUE]: true,
+    [NotificationEvent.WARRANTY_EXPIRING]: true,
+    [NotificationEvent.CHECKOUT_OVERDUE]: true,
+    [NotificationEvent.CONTRACT_EXPIRING]: true,
+    [NotificationEvent.LOW_STOCK]: true,
+    [NotificationEvent.BOOKING_CONFIRMED]: true,
+    [NotificationEvent.BOOKING_CANCELLED]: true,
+  };
+}
diff --git a/backend/src/notifications/enums/notification-event.enum.ts b/backend/src/notifications/enums/notification-event.enum.ts
new file mode 100644
index 000000000..a6175a477
--- /dev/null
+++ b/backend/src/notifications/enums/notification-event.enum.ts
@@ -0,0 +1,13 @@
+export enum NotificationEvent {
+  ASSET_TRANSFERRED = 'ASSET_TRANSFERRED',
+  ASSET_STATUS_CHANGED = 'ASSET_STATUS_CHANGED',
+  WORK_ORDER_ASSIGNED = 'WORK_ORDER_ASSIGNED',
+  WORK_ORDER_COMPLETED = 'WORK_ORDER_COMPLETED',
+  MAINTENANCE_DUE = 'MAINTENANCE_DUE',
+  WARRANTY_EXPIRING = 'WARRANTY_EXPIRING',
+  CHECKOUT_OVERDUE = 'CHECKOUT_OVERDUE',
+  CONTRACT_EXPIRING = 'CONTRACT_EXPIRING',
+  LOW_STOCK = 'LOW_STOCK',
+  BOOKING_CONFIRMED = 'BOOKING_CONFIRMED',
+  BOOKING_CANCELLED = 'BOOKING_CANCELLED',
+}
diff --git a/backend/src/notifications/notification-dispatch.service.ts b/backend/src/notifications/notification-dispatch.service.ts
new file mode 100644
index 000000000..5fb059bf7
--- /dev/null
+++ b/backend/src/notifications/notification-dispatch.service.ts
@@ -0,0 +1,102 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { NotificationEvent } from './enums/notification-event.enum';
+import { UserNotificationPreference } from './entities/user-notification-preference.entity';
+import { User } from '../users/entities/user.entity';
+import { NotificationsService } from './notifications.service';
+import { QueueService } from '../queue/queue.service';
+
+export interface DispatchNotificationDto {
+  userId: string;
+  event: NotificationEvent;
+  title: string;
+  message: string;
+  entityType?: string;
+  entityId?: string;
+  metadata?: Record<string, any>;
+  emailTemplate: string;
+  emailSubject: string;
+  emailContext: Record<string, any>;
+}
+
+@Injectable()
+export class NotificationDispatchService {
+  private readonly logger = new Logger(NotificationDispatchService.name);
+
+  constructor(
+    @InjectRepository(UserNotificationPreference)
+    private readonly preferenceRepository: Repository<UserNotificationPreference>,
+    @InjectRepository(User)
+    private readonly userRepository: Repository<User>,
+    private readonly notificationsService: NotificationsService,
+    private readonly queueService: QueueService,
+  ) {}
+
+  async dispatch(dto: DispatchNotificationDto): Promise<void> {
+    const preferences = await this.getUserPreferences(dto.userId);
+    const user = await this.getUserEmail(dto.userId);
+
+    if (!user) {
+      this.logger.warn(`User ${dto.userId} not found, skipping notification`);
+      return;
+    }
+
+    const emailEnabled = preferences?.emailPreferences?.[dto.event] ?? true;
+    const inAppEnabled = preferences?.inAppPreferences?.[dto.event] ?? true;
+
+    if (inAppEnabled) {
+      await this.notificationsService.create({
+        userId: dto.userId,
+        event: dto.event,
+        title: dto.title,
+        message: dto.message,
+        entityType: dto.entityType,
+        entityId: dto.entityId,
+        metadata: dto.metadata,
+      });
+      this.logger.log(
+        `In-app notification sent to user ${dto.userId} for event ${dto.event}`,
+      );
+    }
+
+    if (emailEnabled && user.email) {
+      await this.queueService.sendEmail({
+        to: user.email,
+        subject: dto.emailSubject,
+        template: dto.emailTemplate,
+        context: dto.emailContext,
+      });
+      this.logger.log(
+        `Email queued for user ${dto.userId} (${user.email}) for event ${dto.event}`,
+      );
+    }
+  }
+
+  private async getUserPreferences(
+    userId: string,
+  ): Promise<UserNotificationPreference | null> {
+    try {
+      return await this.preferenceRepository.findOne({
+        where: { userId },
+        relations: ['user'],
+      });
+    } catch {
+      this.logger.warn(
+        `Failed to fetch preferences for user ${userId}, using defaults`,
+      );
+      return null;
+    }
+  }
+
+  private async getUserEmail(userId: string): Promise<User | null> {
+    try {
+      return await this.userRepository.findOne({
+        where: { id: userId },
+      });
+    } catch {
+      this.logger.warn(`Failed to fetch user ${userId}`);
+      return null;
+    }
+  }
+}
diff --git a/backend/src/notifications/notification.module.ts b/backend/src/notifications/notification.module.ts
new file mode 100644
index 000000000..352b7f2c8
--- /dev/null
+++ b/backend/src/notifications/notification.module.ts
@@ -0,0 +1,17 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Notification } from './entities/notification.entity';
+import { UserNotificationPreference } from './entities/user-notification-preference.entity';
+import { NotificationsService } from './notifications.service';
+import { NotificationDispatchService } from './notification-dispatch.service';
+import { QueueModule } from '../queue/queue.module';
+
+@Module({
+  imports: [
+    TypeOrmModule.forFeature([Notification, UserNotificationPreference]),
+    QueueModule,
+  ],
+  providers: [NotificationsService, NotificationDispatchService],
+  exports: [NotificationsService, NotificationDispatchService, TypeOrmModule],
+})
+export class NotificationModule {}
diff --git a/backend/src/notifications/notifications.service.ts b/backend/src/notifications/notifications.service.ts
new file mode 100644
index 000000000..efd2fba82
--- /dev/null
+++ b/backend/src/notifications/notifications.service.ts
@@ -0,0 +1,59 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Notification } from './entities/notification.entity';
+import { CreateNotificationDto } from './dtos/create-notification.dto';
+
+@Injectable()
+export class NotificationsService {
+  private readonly logger = new Logger(NotificationsService.name);
+
+  constructor(
+    @InjectRepository(Notification)
+    private readonly notificationRepository: Repository<Notification>,
+  ) {}
+
+  async create(dto: CreateNotificationDto): Promise<Notification> {
+    const notification = this.notificationRepository.create(dto);
+    return this.notificationRepository.save(notification);
+  }
+
+  async findByUserId(
+    userId: string,
+    isRead?: boolean,
+  ): Promise<Notification[]> {
+    const where: any = { userId };
+    if (isRead !== undefined) {
+      where.isRead = isRead;
+    }
+    return this.notificationRepository.find({
+      where,
+      order: { createdAt: 'DESC' },
+    });
+  }
+
+  async markAsRead(notificationId: string): Promise<Notification> {
+    const notification = await this.notificationRepository.findOne({
+      where: { id: notificationId },
+    });
+    if (!notification) {
+      throw new Error('Notification not found');
+    }
+    notification.isRead = true;
+    notification.readAt = new Date();
+    return this.notificationRepository.save(notification);
+  }
+
+  async markAllAsRead(userId: string): Promise<void> {
+    await this.notificationRepository.update(
+      { userId, isRead: false },
+      { isRead: true, readAt: new Date() },
+    );
+  }
+
+  async getUnreadCount(userId: string): Promise<number> {
+    return this.notificationRepository.count({
+      where: { userId, isRead: false },
+    });
+  }
+}
diff --git a/backend/src/purchase-orders/dtos/create-purchase-order.dto.ts b/backend/src/purchase-orders/dtos/create-purchase-order.dto.ts
index 407ffd0b6..3fa75711d 100644
--- a/backend/src/purchase-orders/dtos/create-purchase-order.dto.ts
+++ b/backend/src/purchase-orders/dtos/create-purchase-order.dto.ts
@@ -1,4 +1,10 @@
-import { IsString, IsOptional, IsNumber, IsArray, ValidateNested } from 'class-validator';
+import {
+  IsString,
+  IsOptional,
+  IsNumber,
+  IsArray,
+  ValidateNested,
+} from 'class-validator';
 import { Type } from 'class-transformer';
 
 class PurchaseOrderItemDto {
diff --git a/backend/src/purchase-orders/dtos/update-purchase-order.dto.ts b/backend/src/purchase-orders/dtos/update-purchase-order.dto.ts
index d0c366a8b..ba6a0c8d5 100644
--- a/backend/src/purchase-orders/dtos/update-purchase-order.dto.ts
+++ b/backend/src/purchase-orders/dtos/update-purchase-order.dto.ts
@@ -1,4 +1,10 @@
-import { IsString, IsOptional, IsNumber, IsArray, ValidateNested } from 'class-validator';
+import {
+  IsString,
+  IsOptional,
+  IsNumber,
+  IsArray,
+  ValidateNested,
+} from 'class-validator';
 import { Type } from 'class-transformer';
 
 class PurchaseOrderItemDto {
diff --git a/backend/src/purchase-orders/entities/purchase-order.entity.ts b/backend/src/purchase-orders/entities/purchase-order.entity.ts
index 40e04b486..5350b9624 100644
--- a/backend/src/purchase-orders/entities/purchase-order.entity.ts
+++ b/backend/src/purchase-orders/entities/purchase-order.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { User } from '../../users/entities/user.entity';
 
 @Entity('purchase_orders')
diff --git a/backend/src/purchase-orders/purchase-orders.controller.ts b/backend/src/purchase-orders/purchase-orders.controller.ts
index c9bccd815..d67c4dcd8 100644
--- a/backend/src/purchase-orders/purchase-orders.controller.ts
+++ b/backend/src/purchase-orders/purchase-orders.controller.ts
@@ -1,4 +1,16 @@
-import { Controller, Get, Post, Put, Patch, Delete, Param, Body, Query, Req, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Patch,
+  Delete,
+  Param,
+  Body,
+  Query,
+  Req,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { PurchaseOrdersService } from './purchase-orders.service';
 import { CreatePurchaseOrderDto } from './dtos/create-purchase-order.dto';
@@ -26,13 +38,25 @@ export class PurchaseOrdersController {
   }
 
   @Put(':id')
-  async update(@Param('id') id: string, @Body() dto: UpdatePurchaseOrderDto, @Req() req: any) {
+  async update(
+    @Param('id') id: string,
+    @Body() dto: UpdatePurchaseOrderDto,
+    @Req() req: any,
+  ) {
     return this.purchaseOrdersService.update(id, dto, req.user?.id);
   }
 
   @Patch(':id/status')
-  async updateStatus(@Param('id') id: string, @Body('status') status: string, @Req() req: any) {
-    return this.purchaseOrdersService.update(id, { status } as UpdatePurchaseOrderDto, req.user?.id);
+  async updateStatus(
+    @Param('id') id: string,
+    @Body('status') status: string,
+    @Req() req: any,
+  ) {
+    return this.purchaseOrdersService.update(
+      id,
+      { status } as UpdatePurchaseOrderDto,
+      req.user?.id,
+    );
   }
 
   @Delete(':id')
diff --git a/backend/src/purchase-orders/purchase-orders.service.ts b/backend/src/purchase-orders/purchase-orders.service.ts
index 1c9862959..1d42dc050 100644
--- a/backend/src/purchase-orders/purchase-orders.service.ts
+++ b/backend/src/purchase-orders/purchase-orders.service.ts
@@ -16,17 +16,25 @@ export class PurchaseOrdersService {
     private readonly poRepository: Repository<PurchaseOrder>,
     private readonly configService: ConfigService,
   ) {
-    this.nextNumber = parseInt(configService.get<string>('PO_ID_START', '1000'), 10);
+    this.nextNumber = parseInt(
+      configService.get<string>('PO_ID_START', '1000'),
+      10,
+    );
   }
 
-  async create(dto: CreatePurchaseOrderDto, userId?: string): Promise<PurchaseOrder> {
+  async create(
+    dto: CreatePurchaseOrderDto,
+    userId?: string,
+  ): Promise<PurchaseOrder> {
     const prefix = this.configService.get<string>('PO_ID_PREFIX', 'PO');
     const poNumber = `${prefix}-${this.nextNumber++}`;
-    const items = dto.items?.map(item => ({
-      ...item,
-      total: item.total ?? item.quantity * item.unitPrice,
-    })) || [];
-    const subtotal = dto.subtotal ?? items.reduce((sum, item) => sum + item.total, 0);
+    const items =
+      dto.items?.map((item) => ({
+        ...item,
+        total: item.total ?? item.quantity * item.unitPrice,
+      })) || [];
+    const subtotal =
+      dto.subtotal ?? items.reduce((sum, item) => sum + item.total, 0);
     const total = dto.total ?? subtotal + (dto.tax ?? 0);
 
     const po = this.poRepository.create({
@@ -40,9 +48,12 @@ export class PurchaseOrdersService {
     return this.poRepository.save(po);
   }
 
-  async findAll(query: PurchaseOrderQueryDto): Promise<{ data: PurchaseOrder[]; total: number }> {
+  async findAll(
+    query: PurchaseOrderQueryDto,
+  ): Promise<{ data: PurchaseOrder[]; total: number }> {
     const { search, status, vendor, page, limit } = query;
-    const qb = this.poRepository.createQueryBuilder('po')
+    const qb = this.poRepository
+      .createQueryBuilder('po')
       .leftJoinAndSelect('po.createdBy', 'createdBy')
       .leftJoinAndSelect('po.approvedBy', 'approvedBy');
 
@@ -53,7 +64,8 @@ export class PurchaseOrdersService {
       );
     }
     if (status) qb.andWhere('po.status = :status', { status });
-    if (vendor) qb.andWhere('po.vendor ILIKE :vendor', { vendor: `%${vendor}%` });
+    if (vendor)
+      qb.andWhere('po.vendor ILIKE :vendor', { vendor: `%${vendor}%` });
 
     qb.orderBy('po.createdAt', 'DESC');
     qb.skip((page - 1) * limit).take(limit);
@@ -69,10 +81,14 @@ export class PurchaseOrdersService {
     return po;
   }
 
-  async update(id: string, dto: UpdatePurchaseOrderDto, userId?: string): Promise<PurchaseOrder> {
+  async update(
+    id: string,
+    dto: UpdatePurchaseOrderDto,
+    _userId?: string,
+  ): Promise<PurchaseOrder> {
     const po = await this.findById(id);
     if (dto.items) {
-      dto.items = dto.items.map(item => ({
+      dto.items = dto.items.map((item) => ({
         ...item,
         total: item.total ?? item.quantity * item.unitPrice,
       }));
diff --git a/backend/src/queue/processors/email.processor.ts b/backend/src/queue/processors/email.processor.ts
index 77796c937..a47ab6dd2 100644
--- a/backend/src/queue/processors/email.processor.ts
+++ b/backend/src/queue/processors/email.processor.ts
@@ -2,16 +2,54 @@ import { Processor, Process } from '@nestjs/bull';
 import { Job } from 'bull';
 import { Logger } from '@nestjs/common';
 import { MailService } from '../../mail/mail.service';
+import { ActivityLogService } from '../../activity-log/activity-log.service';
 
 @Processor('email')
 export class EmailProcessor {
   private readonly logger = new Logger(EmailProcessor.name);
 
-  constructor(private readonly mailService: MailService) {}
+  constructor(
+    private readonly mailService: MailService,
+    private readonly activityLogService: ActivityLogService,
+  ) {}
 
   @Process('send')
-  async handleSend(job: Job<{ to: string; subject: string; template: string; context: Record<string, any> }>) {
+  async handleSend(
+    job: Job<{
+      to: string;
+      subject: string;
+      template: string;
+      context: Record<string, any>;
+    }>,
+  ) {
     this.logger.log(`Processing email job #${job.id} to ${job.data.to}`);
-    await this.mailService.sendTemplateEmail(job.data.to, job.data.subject, job.data.template, job.data.context);
+    try {
+      await this.mailService.sendTemplateEmail(
+        job.data.to,
+        job.data.subject,
+        job.data.template,
+        job.data.context,
+      );
+    } catch (error) {
+      this.logger.error(
+        `Email job #${job.id} failed permanently after ${job.attemptsMade} attempts`,
+      );
+
+      // Log permanent failure to audit log
+      await this.activityLogService.create({
+        action: 'EMAIL_SEND_FAILED',
+        entityType: 'Notification',
+        entityId: job.id?.toString(),
+        metadata: {
+          to: job.data.to,
+          subject: job.data.subject,
+          template: job.data.template,
+          error: error.message,
+          attemptsMade: job.attemptsMade,
+        },
+      });
+
+      throw error;
+    }
   }
 }
diff --git a/backend/src/queue/processors/export.processor.ts b/backend/src/queue/processors/export.processor.ts
new file mode 100644
index 000000000..1e6f2fb16
--- /dev/null
+++ b/backend/src/queue/processors/export.processor.ts
@@ -0,0 +1,81 @@
+import { Processor, Process } from '@nestjs/bull';
+import { Job } from 'bull';
+import { Logger } from '@nestjs/common';
+import { ExportService, ExportColumn } from '../../reporting/export.service';
+import { MailService } from '../../mail/mail.service';
+
+interface ExportJobData {
+  email: string;
+  reportName: string;
+  format: 'pdf' | 'xlsx';
+  columns: ExportColumn[];
+  rows: Record<string, any>[];
+}
+
+@Processor('export')
+export class ExportProcessor {
+  private readonly logger = new Logger(ExportProcessor.name);
+
+  constructor(
+    private readonly exportService: ExportService,
+    private readonly mailService: MailService,
+  ) {}
+
+  @Process('generate')
+  async handleExport(job: Job<ExportJobData>) {
+    const { email, reportName, format, columns, rows } = job.data;
+
+    this.logger.log(
+      `Processing export job #${job.id}: ${reportName} (${format}) for ${email}`,
+    );
+
+    try {
+      let buffer: Buffer;
+      let filename: string;
+      let contentType: string;
+
+      if (format === 'pdf') {
+        buffer = await this.exportService.generatePdf(
+          reportName,
+          columns,
+          rows,
+        );
+        const date = new Date().toISOString().split('T')[0];
+        filename = `report-${date}.pdf`;
+        contentType = 'application/pdf';
+      } else {
+        buffer = await this.exportService.generateExcel(
+          reportName,
+          columns,
+          rows,
+        );
+        const date = new Date().toISOString().split('T')[0];
+        filename = `report-${date}.xlsx`;
+        contentType =
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+      }
+
+      // Send email with attachment
+      await this.mailService.sendTemplateEmail(
+        email,
+        `Your ${reportName} report is ready`,
+        'export-ready',
+        {
+          reportName,
+          format,
+          rowCount: rows.length,
+        },
+        {
+          filename,
+          content: buffer,
+          contentType,
+        },
+      );
+
+      this.logger.log(`Export job #${job.id} completed successfully`);
+    } catch (error) {
+      this.logger.error(`Export job #${job.id} failed: ${error.message}`);
+      throw error;
+    }
+  }
+}
diff --git a/backend/src/queue/queue.module.ts b/backend/src/queue/queue.module.ts
index 971a417c2..6b1938b8d 100644
--- a/backend/src/queue/queue.module.ts
+++ b/backend/src/queue/queue.module.ts
@@ -1,8 +1,12 @@
-import { Module } from '@nestjs/common';
+import { Module, forwardRef } from '@nestjs/common';
 import { BullModule } from '@nestjs/bull';
 import { ConfigModule, ConfigService } from '@nestjs/config';
 import { QueueService } from './queue.service';
 import { EmailProcessor } from './processors/email.processor';
+import { ExportProcessor } from './processors/export.processor';
+import { ReportingModule } from '../reporting/reporting.module';
+import { MailModule } from '../mail/mail.module';
+import { ActivityLogModule } from '../activity-log/activity-log.module';
 
 @Module({
   imports: [
@@ -16,11 +20,12 @@ import { EmailProcessor } from './processors/email.processor';
         },
       }),
     }),
-    BullModule.registerQueue({
-      name: 'email',
-    }),
+    BullModule.registerQueue({ name: 'email' }, { name: 'export' }),
+    forwardRef(() => ReportingModule),
+    MailModule,
+    ActivityLogModule,
   ],
-  providers: [QueueService, EmailProcessor],
+  providers: [QueueService, EmailProcessor, ExportProcessor],
   exports: [QueueService, BullModule],
 })
 export class QueueModule {}
diff --git a/backend/src/queue/queue.service.ts b/backend/src/queue/queue.service.ts
index 5ada87b21..58f20fdd8 100644
--- a/backend/src/queue/queue.service.ts
+++ b/backend/src/queue/queue.service.ts
@@ -1,17 +1,38 @@
 import { Injectable } from '@nestjs/common';
 import { InjectQueue } from '@nestjs/bull';
 import { Queue } from 'bull';
+import { ExportColumn } from '../reporting/export.service';
 
 @Injectable()
 export class QueueService {
   constructor(
     @InjectQueue('email') private readonly emailQueue: Queue,
+    @InjectQueue('export') private readonly exportQueue: Queue,
   ) {}
 
-  async sendEmail(data: { to: string; subject: string; template: string; context: Record<string, any> }): Promise<void> {
+  async sendEmail(data: {
+    to: string;
+    subject: string;
+    template: string;
+    context: Record<string, any>;
+  }): Promise<void> {
     await this.emailQueue.add('send', data, {
       attempts: 3,
       backoff: { type: 'exponential', delay: 2000 },
     });
   }
+
+  async queueExport(data: {
+    email: string;
+    reportName: string;
+    format: 'pdf' | 'xlsx';
+    columns: ExportColumn[];
+    rows: Record<string, any>[];
+  }): Promise<{ jobId: string }> {
+    const job = await this.exportQueue.add('generate', data, {
+      attempts: 3,
+      backoff: { type: 'exponential', delay: 5000 },
+    });
+    return { jobId: job.id.toString() };
+  }
 }
diff --git a/backend/src/reporting/export.service.ts b/backend/src/reporting/export.service.ts
new file mode 100644
index 000000000..d4f032096
--- /dev/null
+++ b/backend/src/reporting/export.service.ts
@@ -0,0 +1,211 @@
+import { Injectable, Logger } from '@nestjs/common';
+import * as PDFDocument from 'pdfkit';
+import * as ExcelJS from 'exceljs';
+
+export interface ExportColumn {
+  header: string;
+  key: string;
+  width?: number;
+}
+
+@Injectable()
+export class ExportService {
+  private readonly logger = new Logger(ExportService.name);
+
+  async generatePdf(
+    title: string,
+    columns: ExportColumn[],
+    rows: Record<string, any>[],
+  ): Promise<Buffer> {
+    return new Promise((resolve, reject) => {
+      try {
+        const doc = new PDFDocument({ margin: 50 });
+        const chunks: Buffer[] = [];
+
+        doc.on('data', (chunk) => chunks.push(chunk));
+        doc.on('end', () => resolve(Buffer.concat(chunks)));
+        doc.on('error', reject);
+
+        const pageWidth = doc.page.width - 100;
+        const now = new Date().toLocaleString();
+
+        // Header
+        doc
+          .fillColor('#1a1a2e')
+          .fontSize(24)
+          .font('Helvetica-Bold')
+          .text('AssetsUp', 50, 50);
+
+        doc
+          .fillColor('#666666')
+          .fontSize(12)
+          .font('Helvetica')
+          .text(`Report: ${title}`, 50, 80);
+
+        doc
+          .fillColor('#999999')
+          .fontSize(10)
+          .text(`Generated: ${now}`, 50, 100);
+
+        // Add a line separator
+        doc
+          .moveTo(50, 115)
+          .lineTo(pageWidth + 50, 115)
+          .strokeColor('#cccccc')
+          .stroke();
+
+        // Table headers
+        const startY = 130;
+        const colWidths = this.calculateColumnWidths(columns, pageWidth);
+        let x = 50;
+        let y = startY;
+
+        // Header background
+        doc
+          .fillColor('#4a4e69')
+          .roundedRect(50, y - 15, pageWidth, 25, 3)
+          .fill();
+
+        // Header text
+        doc.fillColor('#ffffff').fontSize(10).font('Helvetica-Bold');
+        columns.forEach((col, index) => {
+          doc.text(col.header, x, y - 10, { width: colWidths[index] });
+          x += colWidths[index];
+        });
+
+        // Table rows
+        doc.font('Helvetica').fontSize(9);
+        y += 20;
+
+        rows.forEach((row, rowIndex) => {
+          // Check if we need a new page
+          if (y > doc.page.height - 100) {
+            doc.addPage();
+            y = 50;
+
+            // Re-add headers on new page
+            doc
+              .fillColor('#4a4e69')
+              .roundedRect(50, y - 15, pageWidth, 25, 3)
+              .fill();
+            doc.fillColor('#ffffff').fontSize(10).font('Helvetica-Bold');
+            x = 50;
+            columns.forEach((col, index) => {
+              doc.text(col.header, x, y - 10, { width: colWidths[index] });
+              x += colWidths[index];
+            });
+            doc.font('Helvetica').fontSize(9);
+            y += 20;
+          }
+
+          // Alternate row background
+          if (rowIndex % 2 === 0) {
+            doc
+              .fillColor('#f8f9fa')
+              .roundedRect(50, y - 12, pageWidth, 18, 2)
+              .fill();
+          }
+
+          // Row data
+          doc.fillColor('#333333');
+          x = 50;
+          columns.forEach((col, index) => {
+            const value = row[col.key] ?? '';
+            doc.text(String(value), x, y - 8, { width: colWidths[index] });
+            x += colWidths[index];
+          });
+
+          y += 18;
+        });
+
+        // Footer with page numbers
+        const totalPages = doc.bufferedPageRange().count;
+        for (let i = 0; i < totalPages; i++) {
+          doc.switchToPage(i);
+          doc
+            .fillColor('#999999')
+            .fontSize(8)
+            .font('Helvetica')
+            .text(`Page ${i + 1} of ${totalPages}`, 50, doc.page.height - 50, {
+              align: 'center',
+            });
+        }
+
+        doc.end();
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  async generateExcel(
+    sheetName: string,
+    columns: ExportColumn[],
+    rows: Record<string, any>[],
+  ): Promise<Buffer> {
+    const workbook = new ExcelJS.Workbook();
+    const worksheet = workbook.addWorksheet(sheetName, {
+      properties: { tabColor: { argb: '4a4e69' } },
+    });
+
+    // Add columns with headers
+    const excelColumns = columns.map((col, _index) => ({
+      header: col.header,
+      key: col.key,
+      width: col.width || 15,
+    }));
+
+    worksheet.columns = excelColumns;
+
+    // Style header row
+    worksheet.getRow(1).font = { bold: true, color: { argb: 'FFFFFF' } };
+    worksheet.getRow(1).fill = {
+      type: 'pattern',
+      pattern: 'solid',
+      fgColor: { argb: '4a4e69' },
+    };
+    worksheet.getRow(1).alignment = { vertical: 'middle' };
+
+    // Add data rows
+    rows.forEach((row) => {
+      worksheet.addRow(row);
+    });
+
+    // Freeze top row
+    worksheet.views = [{ state: 'frozen', ySplit: 1 }];
+
+    // Auto-adjust column widths based on content
+    worksheet.columns.forEach((column) => {
+      let maxLength = 0;
+      if (column.eachCell) {
+        column.eachCell({ includeEmpty: true }, (cell) => {
+          const cellValue = cell.value ? cell.value.toString() : '';
+          maxLength = Math.max(maxLength, cellValue.length);
+        });
+      }
+      column.width = Math.min(Math.max(maxLength + 2, 10), 50);
+    });
+
+    // Add borders to all cells
+    worksheet.eachRow((row) => {
+      row.eachCell((cell) => {
+        cell.border = {
+          top: { style: 'thin' },
+          left: { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: { style: 'thin' },
+        };
+      });
+    });
+
+    return (await workbook.xlsx.writeBuffer()) as unknown as Buffer;
+  }
+
+  private calculateColumnWidths(
+    columns: ExportColumn[],
+    totalWidth: number,
+  ): number[] {
+    const equalWidth = totalWidth / columns.length;
+    return columns.map((col) => col.width || equalWidth);
+  }
+}
diff --git a/backend/src/reporting/reporting.controller.ts b/backend/src/reporting/reporting.controller.ts
index fdff6f561..01e4847d2 100644
--- a/backend/src/reporting/reporting.controller.ts
+++ b/backend/src/reporting/reporting.controller.ts
@@ -1,29 +1,283 @@
-import { Controller, Get, UseGuards } from '@nestjs/common';
+import { Controller, Get, Query, Res, Req, UseGuards } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
+import { Response, Request } from 'express';
 import { ReportingService } from './reporting.service';
+import { ExportService, ExportColumn } from './export.service';
+import { QueueService } from '../queue/queue.service';
 
 @Controller('reports')
 @UseGuards(AuthGuard('jwt'))
 export class ReportingController {
-  constructor(private readonly reportingService: ReportingService) {}
+  constructor(
+    private readonly reportingService: ReportingService,
+    private readonly exportService: ExportService,
+    private readonly queueService: QueueService,
+  ) {}
+
+  private async handleExport(
+    reportName: string,
+    columns: ExportColumn[],
+    rows: Record<string, any>[],
+    format: string | undefined,
+    res: Response,
+    req: Request,
+  ) {
+    // Default to JSON if no format specified
+    if (!format || format === 'json') {
+      return res.json(rows);
+    }
+
+    // For large exports, use background job
+    if (rows.length > 1000) {
+      const user = (req as any).user;
+      const email = user?.email || user?.username;
+
+      if (!email) {
+        return res
+          .status(400)
+          .json({ error: 'Email required for large exports' });
+      }
+
+      const job = await this.queueService.queueExport({
+        email,
+        reportName,
+        format: format as 'pdf' | 'xlsx',
+        columns,
+        rows,
+      });
+
+      return res.json({
+        jobId: job.jobId,
+        message: 'Export queued, will be emailed when ready',
+      });
+    }
+
+    // For small exports, generate inline
+    let buffer: Buffer;
+    let filename: string;
+    let contentType: string;
+    const date = new Date().toISOString().split('T')[0];
+
+    if (format === 'pdf') {
+      buffer = await this.exportService.generatePdf(reportName, columns, rows);
+      filename = `report-${date}.pdf`;
+      contentType = 'application/pdf';
+    } else if (format === 'xlsx') {
+      buffer = await this.exportService.generateExcel(
+        reportName,
+        columns,
+        rows,
+      );
+      filename = `report-${date}.xlsx`;
+      contentType =
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+    } else {
+      return res.json(rows);
+    }
+
+    res.set({
+      'Content-Type': contentType,
+      'Content-Disposition': `attachment; filename="${filename}"`,
+    });
+
+    return res.send(buffer);
+  }
+
+  @Get('summary')
+  async getAssetSummary(
+    @Query('format') format: string,
+    @Res() res: Response,
+    @Req() req: Request,
+  ) {
+    const data = await this.reportingService.getAssetSummary();
+
+    // Convert summary object to array format for export
+    const rows = [
+      { metric: 'Total Assets', value: data.total },
+      { metric: 'Total Value', value: data.totalValue },
+      ...Object.entries(data.byStatus).map(([status, count]) => ({
+        metric: `Status: ${status}`,
+        value: count,
+      })),
+      ...Object.entries(data.byCondition).map(([condition, count]) => ({
+        metric: `Condition: ${condition}`,
+        value: count,
+      })),
+    ];
+
+    const columns: ExportColumn[] = [
+      { header: 'Metric', key: 'metric', width: 40 },
+      { header: 'Value', key: 'value', width: 20 },
+    ];
+
+    return this.handleExport('Asset Summary', columns, rows, format, res, req);
+  }
 
   @Get('asset-summary')
-  async getAssetSummary() {
-    return this.reportingService.getAssetSummary();
+  async getAssetSummaryLegacy(@Res() res: Response) {
+    const data = await this.reportingService.getAssetSummary();
+    return res.json(data);
+  }
+
+  @Get('warranty-expiring')
+  async getWarrantyExpiring(
+    @Query('format') format: string,
+    @Query('days') days: number,
+    @Res() res: Response,
+    @Req() req: Request,
+  ) {
+    const rows = await this.reportingService.getWarrantyExpiring(days || 90);
+
+    const columns: ExportColumn[] = [
+      { header: 'Asset ID', key: 'asset_id', width: 20 },
+      { header: 'Name', key: 'asset_name', width: 30 },
+      { header: 'Serial Number', key: 'asset_serialNumber', width: 25 },
+      {
+        header: 'Warranty Expiration',
+        key: 'asset_warrantyExpiration',
+        width: 25,
+      },
+      { header: 'Status', key: 'asset_status', width: 15 },
+    ];
+
+    return this.handleExport(
+      'Warranty Expiring',
+      columns,
+      rows,
+      format,
+      res,
+      req,
+    );
+  }
+
+  @Get('maintenance-costs')
+  async getMaintenanceCosts(
+    @Query('format') format: string,
+    @Res() res: Response,
+    @Req() req: Request,
+  ) {
+    const rows = await this.reportingService.getMaintenanceCosts();
+
+    const columns: ExportColumn[] = [
+      { header: 'Asset ID', key: 'asset_id', width: 20 },
+      { header: 'Name', key: 'asset_name', width: 30 },
+      { header: 'Category', key: 'asset_categoryId', width: 20 },
+      {
+        header: 'Total Maintenance Cost',
+        key: 'totalMaintenanceCost',
+        width: 25,
+      },
+      { header: 'Maintenance Count', key: 'maintenanceCount', width: 20 },
+    ];
+
+    return this.handleExport(
+      'Maintenance Costs',
+      columns,
+      rows,
+      format,
+      res,
+      req,
+    );
+  }
+
+  @Get('depreciation')
+  async getDepreciation(
+    @Query('format') format: string,
+    @Res() res: Response,
+    @Req() req: Request,
+  ) {
+    const rows = await this.reportingService.getDepreciationReport();
+
+    const columns: ExportColumn[] = [
+      { header: 'Asset ID', key: 'id', width: 20 },
+      { header: 'Name', key: 'name', width: 30 },
+      { header: 'Purchase Price', key: 'purchasePrice', width: 20 },
+      { header: 'Current Value', key: 'currentValue', width: 20 },
+      { header: 'Purchase Date', key: 'purchaseDate', width: 20 },
+      { header: 'Age (Years)', key: 'ageInYears', width: 15 },
+      { header: 'Total Depreciation', key: 'totalDepreciation', width: 20 },
+      { header: 'Annual Depreciation', key: 'annualDepreciation', width: 20 },
+    ];
+
+    return this.handleExport(
+      'Depreciation Report',
+      columns,
+      rows,
+      format,
+      res,
+      req,
+    );
   }
 
   @Get('by-department')
-  async getDepartmentReport() {
-    return this.reportingService.getDepartmentReport();
+  async getDepartmentReport(
+    @Query('format') format: string,
+    @Res() res: Response,
+    @Req() req: Request,
+  ) {
+    const rows = await this.reportingService.getDepartmentReport();
+
+    const columns: ExportColumn[] = [
+      { header: 'Department ID', key: 'departmentId', width: 25 },
+      { header: 'Asset Count', key: 'assetCount', width: 15 },
+      { header: 'Total Value', key: 'totalValue', width: 20 },
+    ];
+
+    return this.handleExport(
+      'Department Report',
+      columns,
+      rows,
+      format,
+      res,
+      req,
+    );
   }
 
   @Get('by-category')
-  async getCategoryReport() {
-    return this.reportingService.getCategoryReport();
+  async getCategoryReport(
+    @Query('format') format: string,
+    @Res() res: Response,
+    @Req() req: Request,
+  ) {
+    const rows = await this.reportingService.getCategoryReport();
+
+    const columns: ExportColumn[] = [
+      { header: 'Category ID', key: 'categoryId', width: 25 },
+      { header: 'Asset Count', key: 'assetCount', width: 15 },
+      { header: 'Total Value', key: 'totalValue', width: 20 },
+    ];
+
+    return this.handleExport(
+      'Category Report',
+      columns,
+      rows,
+      format,
+      res,
+      req,
+    );
   }
 
   @Get('value-over-time')
-  async getValueOverTime() {
-    return this.reportingService.getValueOverTime();
+  async getValueOverTime(
+    @Query('format') format: string,
+    @Res() res: Response,
+    @Req() req: Request,
+  ) {
+    const rows = await this.reportingService.getValueOverTime();
+
+    const columns: ExportColumn[] = [
+      { header: 'Date', key: 'date', width: 20 },
+      { header: 'Total Value', key: 'totalValue', width: 20 },
+      { header: 'Asset Count', key: 'assetCount', width: 15 },
+    ];
+
+    return this.handleExport(
+      'Value Over Time',
+      columns,
+      rows,
+      format,
+      res,
+      req,
+    );
   }
 }
diff --git a/backend/src/reporting/reporting.module.ts b/backend/src/reporting/reporting.module.ts
index 7b1e0d2d5..97107abe9 100644
--- a/backend/src/reporting/reporting.module.ts
+++ b/backend/src/reporting/reporting.module.ts
@@ -1,13 +1,15 @@
-import { Module } from '@nestjs/common';
+import { Module, forwardRef } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { Asset } from '../assets/asset.entity';
 import { ReportingService } from './reporting.service';
 import { ReportingController } from './reporting.controller';
+import { ExportService } from './export.service';
+import { QueueModule } from '../queue/queue.module';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Asset])],
+  imports: [TypeOrmModule.forFeature([Asset]), forwardRef(() => QueueModule)],
   controllers: [ReportingController],
-  providers: [ReportingService],
-  exports: [ReportingService],
+  providers: [ReportingService, ExportService],
+  exports: [ReportingService, ExportService],
 })
 export class ReportingModule {}
diff --git a/backend/src/reporting/reporting.service.ts b/backend/src/reporting/reporting.service.ts
index 41e21b86e..02638a2ce 100644
--- a/backend/src/reporting/reporting.service.ts
+++ b/backend/src/reporting/reporting.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { Asset } from '../assets/asset.entity';
+import { addDays } from 'date-fns';
 
 @Injectable()
 export class ReportingService {
@@ -10,7 +11,12 @@ export class ReportingService {
     private readonly assetRepository: Repository<Asset>,
   ) {}
 
-  async getAssetSummary(): Promise<{ total: number; byStatus: Record<string, number>; byCondition: Record<string, number>; totalValue: number }> {
+  async getAssetSummary(): Promise<{
+    total: number;
+    byStatus: Record<string, number>;
+    byCondition: Record<string, number>;
+    totalValue: number;
+  }> {
     const assets = await this.assetRepository.find();
     const total = assets.length;
     const byStatus: Record<string, number> = {};
@@ -23,10 +29,17 @@ export class ReportingService {
       totalValue += Number(asset.purchasePrice) || 0;
     }
 
-    return { total, byStatus, byCondition, totalValue: Math.round(totalValue * 100) / 100 };
+    return {
+      total,
+      byStatus,
+      byCondition,
+      totalValue: Math.round(totalValue * 100) / 100,
+    };
   }
 
-  async getDepartmentReport(): Promise<{ departmentId: string; assetCount: number; totalValue: number }[]> {
+  async getDepartmentReport(): Promise<
+    { departmentId: string; assetCount: number; totalValue: number }[]
+  > {
     return this.assetRepository
       .createQueryBuilder('asset')
       .select('asset.departmentId', 'departmentId')
@@ -36,7 +49,9 @@ export class ReportingService {
       .getRawMany();
   }
 
-  async getCategoryReport(): Promise<{ categoryId: string; assetCount: number; totalValue: number }[]> {
+  async getCategoryReport(): Promise<
+    { categoryId: string; assetCount: number; totalValue: number }[]
+  > {
     return this.assetRepository
       .createQueryBuilder('asset')
       .select('asset.categoryId', 'categoryId')
@@ -46,7 +61,9 @@ export class ReportingService {
       .getRawMany();
   }
 
-  async getValueOverTime(): Promise<{ date: string; totalValue: number; assetCount: number }[]> {
+  async getValueOverTime(): Promise<
+    { date: string; totalValue: number; assetCount: number }[]
+  > {
     return this.assetRepository
       .createQueryBuilder('asset')
       .select("DATE_TRUNC('month', asset.createdAt)", 'date')
@@ -56,4 +73,60 @@ export class ReportingService {
       .orderBy("DATE_TRUNC('month', asset.createdAt)", 'ASC')
       .getRawMany();
   }
+
+  async getWarrantyExpiring(daysAhead: number = 90): Promise<any[]> {
+    const cutoffDate = addDays(new Date(), daysAhead);
+    return this.assetRepository
+      .createQueryBuilder('asset')
+      .where('asset.warrantyExpiration IS NOT NULL')
+      .andWhere('asset.warrantyExpiration <= :cutoffDate', { cutoffDate })
+      .andWhere('asset.warrantyExpiration >= NOW()')
+      .select([
+        'asset.id',
+        'asset.name',
+        'asset.serialNumber',
+        'asset.warrantyExpiration',
+        'asset.status',
+      ])
+      .orderBy('asset.warrantyExpiration', 'ASC')
+      .getRawMany();
+  }
+
+  async getMaintenanceCosts(): Promise<any[]> {
+    // This would typically join with a maintenance_orders table
+    // For now, returning placeholder data structure
+    return this.assetRepository
+      .createQueryBuilder('asset')
+      .select(['asset.id', 'asset.name', 'asset.categoryId'])
+      .addSelect('0', 'totalMaintenanceCost')
+      .addSelect('0', 'maintenanceCount')
+      .getRawMany();
+  }
+
+  async getDepreciationReport(): Promise<any[]> {
+    const assets = await this.assetRepository.find();
+    return assets.map((asset) => {
+      const purchasePrice = Number(asset.purchasePrice) || 0;
+      const currentValue = Number(asset.currentValue) || purchasePrice;
+      const purchaseDate = asset.purchaseDate || asset.createdAt;
+      const ageInYears =
+        (Date.now() - new Date(purchaseDate).getTime()) /
+        (1000 * 60 * 60 * 24 * 365);
+
+      // Simple straight-line depreciation calculation
+      const depreciation = purchasePrice - currentValue;
+      const annualDepreciation = ageInYears > 0 ? depreciation / ageInYears : 0;
+
+      return {
+        id: asset.id,
+        name: asset.name,
+        purchasePrice,
+        currentValue,
+        purchaseDate,
+        ageInYears: Math.round(ageInYears * 100) / 100,
+        totalDepreciation: Math.round(depreciation * 100) / 100,
+        annualDepreciation: Math.round(annualDepreciation * 100) / 100,
+      };
+    });
+  }
 }
diff --git a/backend/src/storage/storage.controller.ts b/backend/src/storage/storage.controller.ts
index 6dc14b9ca..3af28d7b5 100644
--- a/backend/src/storage/storage.controller.ts
+++ b/backend/src/storage/storage.controller.ts
@@ -1,5 +1,11 @@
-import { Controller, Post, Delete, Param, UseInterceptors, UploadedFile } from '@nestjs/common';
-import { Controller, Post, Delete, Param, UseInterceptors, UploadedFile, Body } from '@nestjs/common';
+import {
+  Controller,
+  Post,
+  Delete,
+  Param,
+  UseInterceptors,
+  UploadedFile,
+} from '@nestjs/common';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { StorageService } from './storage.service';
 
diff --git a/backend/src/storage/storage.service.ts b/backend/src/storage/storage.service.ts
index 501a54122..a3cb82cec 100644
--- a/backend/src/storage/storage.service.ts
+++ b/backend/src/storage/storage.service.ts
@@ -1,6 +1,11 @@
 import { Injectable, Logger } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
-import { S3Client, PutObjectCommand, DeleteObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
+import {
+  S3Client,
+  PutObjectCommand,
+  DeleteObjectCommand,
+  GetObjectCommand,
+} from '@aws-sdk/client-s3';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 
 @Injectable()
@@ -17,7 +22,10 @@ export class StorageService {
         secretAccessKey: configService.get<string>('AWS_SECRET_ACCESS_KEY', ''),
       },
     });
-    this.bucket = configService.get<string>('AWS_S3_BUCKET', 'assetsup-uploads');
+    this.bucket = configService.get<string>(
+      'AWS_S3_BUCKET',
+      'assetsup-uploads',
+    );
   }
 
   async upload(file: Express.Multer.File, key?: string): Promise<string> {
@@ -44,7 +52,7 @@ export class StorageService {
 
   async getSignedUrl(key: string, expiresIn = 3600): Promise<string> {
     return getSignedUrl(
-      this.s3,
+      this.s3 as any,
       new GetObjectCommand({ Bucket: this.bucket, Key: key }),
       { expiresIn },
     );
diff --git a/backend/src/tasks/tasks.module.ts b/backend/src/tasks/tasks.module.ts
index bdcd43e92..c33c00c42 100644
--- a/backend/src/tasks/tasks.module.ts
+++ b/backend/src/tasks/tasks.module.ts
@@ -3,14 +3,17 @@ import { ScheduleModule } from '@nestjs/schedule';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { Asset } from '../assets/entities/asset.entity';
 import { Department } from '../users/entities/department.entity';
+import { User } from '../users/entities/user.entity';
 import { MailModule } from '../mail/mail.module';
+import { NotificationModule } from '../notifications/notification.module';
 import { TasksService } from './tasks.service';
 
 @Module({
   imports: [
     ScheduleModule.forRoot(),
-    TypeOrmModule.forFeature([Asset, Department]),
+    TypeOrmModule.forFeature([Asset, Department, User]),
     MailModule,
+    NotificationModule,
   ],
   providers: [TasksService],
 })
diff --git a/backend/src/tasks/tasks.service.ts b/backend/src/tasks/tasks.service.ts
index cf10754f8..bfd3eec8e 100644
--- a/backend/src/tasks/tasks.service.ts
+++ b/backend/src/tasks/tasks.service.ts
@@ -4,7 +4,13 @@ import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { Asset } from '../assets/entities/asset.entity';
 import { Department } from '../users/entities/department.entity';
+import { User } from '../users/entities/user.entity';
 import { MailService } from '../mail/mail.service';
+import {
+  NotificationDispatchService,
+  DispatchNotificationDto,
+} from '../notifications/notification-dispatch.service';
+import { NotificationEvent } from '../notifications/enums/notification-event.enum';
 
 @Injectable()
 export class TasksService {
@@ -15,21 +21,30 @@ export class TasksService {
     private readonly assetRepository: Repository<Asset>,
     @InjectRepository(Department)
     private readonly departmentRepository: Repository<Department>,
+    @InjectRepository(User)
+    private readonly userRepository: Repository<User>,
     private readonly mailService: MailService,
+    private readonly notificationDispatchService: NotificationDispatchService,
   ) {}
 
   @Cron(CronExpression.EVERY_WEEKDAY)
   async sendDepartmentAssetSummaries() {
     this.logger.log('Starting daily department asset summary task');
-    const departments = await this.departmentRepository.find({ relations: ['children'] });
+    const departments = await this.departmentRepository.find({
+      relations: ['children'],
+    });
     for (const dept of departments) {
       const [assets, total] = await this.assetRepository.findAndCount({
         where: { departmentId: dept.id },
       });
-      const active = assets.filter(a => a.status === 'ACTIVE').length;
-      const assigned = assets.filter(a => a.status === 'ASSIGNED').length;
-      const maintenance = assets.filter(a => a.status === 'MAINTENANCE').length;
-      this.logger.log(`Department ${dept.name}: ${total} assets (${active} active, ${assigned} assigned, ${maintenance} maintenance)`);
+      const active = assets.filter((a) => a.status === 'ACTIVE').length;
+      const assigned = assets.filter((a) => a.status === 'ASSIGNED').length;
+      const maintenance = assets.filter(
+        (a) => a.status === 'MAINTENANCE',
+      ).length;
+      this.logger.log(
+        `Department ${dept.name}: ${total} assets (${active} active, ${assigned} assigned, ${maintenance} maintenance)`,
+      );
     }
     this.logger.log('Daily department asset summary task completed');
   }
@@ -49,4 +64,121 @@ export class TasksService {
       this.logger.log(`  ${row.status}: ${row.count}`);
     }
   }
+
+  @Cron('0 8 * * *')
+  async checkMaintenanceDue() {
+    this.logger.log('Checking for maintenance due assets');
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+
+    const assets = await this.assetRepository
+      .createQueryBuilder('asset')
+      .leftJoinAndSelect('asset.maintenanceRecords', 'maintenance')
+      .where('maintenance.scheduledDate <= :tomorrow', { tomorrow })
+      .andWhere('maintenance.status = :status', { status: 'SCHEDULED' })
+      .getMany();
+
+    for (const asset of assets) {
+      const users = await this.userRepository.find({
+        where: [
+          { departmentId: asset.departmentId },
+          { id: asset.createdById },
+        ],
+      });
+
+      for (const user of users) {
+        const notificationDto: DispatchNotificationDto = {
+          userId: user.id,
+          event: NotificationEvent.MAINTENANCE_DUE,
+          title: 'Maintenance Due',
+          message: `Asset ${asset.name} has maintenance due soon.`,
+          entityType: 'Asset',
+          entityId: asset.id,
+          metadata: {
+            assetName: asset.name,
+            assetId: asset.assetId,
+          },
+          emailTemplate: 'maintenance-due',
+          emailSubject: `Maintenance Due: ${asset.name}`,
+          emailContext: {
+            assetName: asset.name,
+            assetId: asset.assetId,
+            dueDate: tomorrow.toISOString().split('T')[0],
+            description: 'Scheduled maintenance',
+            assetLink: `${process.env.FRONTEND_URL}/assets/${asset.id}`,
+          },
+        };
+        await this.notificationDispatchService.dispatch(notificationDto);
+      }
+    }
+    this.logger.log(
+      `Maintenance check completed, notified for ${assets.length} assets`,
+    );
+  }
+
+  @Cron('0 9 * * *')
+  async checkWarrantyExpiring() {
+    this.logger.log('Checking for warranty expiring assets');
+    const thirtyDaysFromNow = new Date();
+    thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
+
+    const assets = await this.assetRepository
+      .createQueryBuilder('asset')
+      .where('asset.warrantyExpiration <= :thirtyDaysFromNow', {
+        thirtyDaysFromNow,
+      })
+      .andWhere('asset.warrantyExpiration >= :today', { today: new Date() })
+      .andWhere('asset.endOfLifeNotificationSent = :notSent', {
+        notSent: false,
+      })
+      .getMany();
+
+    for (const asset of assets) {
+      const users = await this.userRepository.find({
+        where: [
+          { departmentId: asset.departmentId },
+          { id: asset.createdById },
+        ],
+      });
+
+      for (const user of users) {
+        const daysRemaining = Math.floor(
+          (new Date(asset.warrantyExpiration).getTime() - Date.now()) /
+            (1000 * 60 * 60 * 24),
+        );
+
+        const notificationDto: DispatchNotificationDto = {
+          userId: user.id,
+          event: NotificationEvent.WARRANTY_EXPIRING,
+          title: 'Warranty Expiring',
+          message: `Asset ${asset.name} warranty expires in ${daysRemaining} days.`,
+          entityType: 'Asset',
+          entityId: asset.id,
+          metadata: {
+            assetName: asset.name,
+            assetId: asset.assetId,
+            warrantyEndDate: asset.warrantyExpiration,
+            daysRemaining,
+          },
+          emailTemplate: 'warranty-expiry',
+          emailSubject: `Warranty Expiring: ${asset.name}`,
+          emailContext: {
+            assetName: asset.name,
+            assetId: asset.assetId,
+            expiryDate: asset.warrantyExpiration,
+            daysRemaining,
+            assetLink: `${process.env.FRONTEND_URL}/assets/${asset.id}`,
+          },
+        };
+        await this.notificationDispatchService.dispatch(notificationDto);
+      }
+
+      // Mark notification as sent to avoid duplicates
+      asset.endOfLifeNotificationSent = true;
+      await this.assetRepository.save(asset);
+    }
+    this.logger.log(
+      `Warranty check completed, notified for ${assets.length} assets`,
+    );
+  }
 }
diff --git a/backend/src/users/decorators/roles.decorator.ts b/backend/src/users/decorators/roles.decorator.ts
index b8af15ba0..ec335687a 100644
--- a/backend/src/users/decorators/roles.decorator.ts
+++ b/backend/src/users/decorators/roles.decorator.ts
@@ -1,4 +1,5 @@
 import { SetMetadata } from '@nestjs/common';
 
 export const ROLES_KEY = 'permissions';
-export const RequirePermissions = (...permissions: string[]) => SetMetadata(ROLES_KEY, permissions);
+export const RequirePermissions = (...permissions: string[]) =>
+  SetMetadata(ROLES_KEY, permissions);
diff --git a/backend/src/users/departments.controller.ts b/backend/src/users/departments.controller.ts
index 7446b747e..d7ab0ce77 100644
--- a/backend/src/users/departments.controller.ts
+++ b/backend/src/users/departments.controller.ts
@@ -1,4 +1,13 @@
-import { Controller, Get, Post, Put, Delete, Param, Body, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Param,
+  Body,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
diff --git a/backend/src/users/dtos/create-user.dto.ts b/backend/src/users/dtos/create-user.dto.ts
index 0fd2417ea..9c9d07fe7 100644
--- a/backend/src/users/dtos/create-user.dto.ts
+++ b/backend/src/users/dtos/create-user.dto.ts
@@ -8,6 +8,10 @@ export class CreateUserDto {
   @IsString()
   password?: string;
 
+  @IsOptional()
+  @IsString()
+  passwordHash?: string;
+
   @IsOptional()
   @IsString()
   firstName?: string;
@@ -27,4 +31,16 @@ export class CreateUserDto {
   @IsOptional()
   @IsBoolean()
   isActive?: boolean;
+
+  @IsOptional()
+  @IsString()
+  googleId?: string;
+
+  @IsOptional()
+  @IsString()
+  microsoftId?: string;
+
+  @IsOptional()
+  @IsString()
+  avatarUrl?: string;
 }
diff --git a/backend/src/users/dtos/update-user.dto.ts b/backend/src/users/dtos/update-user.dto.ts
index e2af173cd..38b4cdef9 100644
--- a/backend/src/users/dtos/update-user.dto.ts
+++ b/backend/src/users/dtos/update-user.dto.ts
@@ -20,4 +20,20 @@ export class UpdateUserDto {
   @IsOptional()
   @IsBoolean()
   isActive?: boolean;
+
+  @IsOptional()
+  @IsString()
+  passwordHash?: string;
+
+  @IsOptional()
+  @IsString()
+  googleId?: string;
+
+  @IsOptional()
+  @IsString()
+  microsoftId?: string;
+
+  @IsOptional()
+  @IsString()
+  avatarUrl?: string;
 }
diff --git a/backend/src/users/entities/department.entity.ts b/backend/src/users/entities/department.entity.ts
index 38d4c864c..a5afe8609 100644
--- a/backend/src/users/entities/department.entity.ts
+++ b/backend/src/users/entities/department.entity.ts
@@ -1,4 +1,13 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, Tree, TreeParent, TreeChildren } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  Tree,
+  TreeParent,
+  TreeChildren,
+} from 'typeorm';
 
 @Entity('departments')
 @Tree('closure-table')
diff --git a/backend/src/users/entities/role.entity.ts b/backend/src/users/entities/role.entity.ts
index 23b27b2e5..af7db9324 100644
--- a/backend/src/users/entities/role.entity.ts
+++ b/backend/src/users/entities/role.entity.ts
@@ -1,4 +1,10 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+} from 'typeorm';
 
 @Entity('roles')
 export class Role {
diff --git a/backend/src/users/entities/user.entity.ts b/backend/src/users/entities/user.entity.ts
index d27f04ab9..cb4bafda4 100644
--- a/backend/src/users/entities/user.entity.ts
+++ b/backend/src/users/entities/user.entity.ts
@@ -1,4 +1,12 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
 import { Role } from './role.entity';
 import { Department } from './department.entity';
 
diff --git a/backend/src/users/guards/roles.guard.ts b/backend/src/users/guards/roles.guard.ts
index a02c5d31f..80307228f 100644
--- a/backend/src/users/guards/roles.guard.ts
+++ b/backend/src/users/guards/roles.guard.ts
@@ -7,10 +7,10 @@ export class RolesGuard implements CanActivate {
   constructor(private readonly reflector: Reflector) {}
 
   canActivate(context: ExecutionContext): boolean {
-    const requiredPermissions = this.reflector.getAllAndOverride<string[]>(ROLES_KEY, [
-      context.getHandler(),
-      context.getClass(),
-    ]);
+    const requiredPermissions = this.reflector.getAllAndOverride<string[]>(
+      ROLES_KEY,
+      [context.getHandler(), context.getClass()],
+    );
     if (!requiredPermissions || requiredPermissions.length === 0) {
       return true;
     }
diff --git a/backend/src/users/roles.controller.ts b/backend/src/users/roles.controller.ts
index 2811f052a..cae444f8c 100644
--- a/backend/src/users/roles.controller.ts
+++ b/backend/src/users/roles.controller.ts
@@ -1,4 +1,13 @@
-import { Controller, Get, Post, Put, Delete, Param, Body, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Param,
+  Body,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
diff --git a/backend/src/users/users.controller.ts b/backend/src/users/users.controller.ts
index 61f813457..979a45848 100644
--- a/backend/src/users/users.controller.ts
+++ b/backend/src/users/users.controller.ts
@@ -1,4 +1,17 @@
-import { Controller, Get, Post, Put, Delete, Param, Body, UseGuards, Req, UseInterceptors, UploadedFile, Query } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Param,
+  Body,
+  UseGuards,
+  Req,
+  UseInterceptors,
+  UploadedFile,
+  Query,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { UsersService } from './users.service';
@@ -54,7 +67,10 @@ export class UsersController {
 
   @Post('avatar')
   @UseInterceptors(FileInterceptor('file'))
-  async uploadAvatar(@Req() req: any, @UploadedFile() file: Express.Multer.File) {
+  async uploadAvatar(
+    @Req() req: any,
+    @UploadedFile() file: Express.Multer.File,
+  ) {
     const key = `avatars/${req.user.id}-${Date.now()}-${file.originalname}`;
     await this.storageService.upload(file, key);
     const avatarUrl = await this.storageService.getSignedUrl(key);
diff --git a/backend/src/users/users.module.ts b/backend/src/users/users.module.ts
index efba29bff..49e8a59fb 100644
--- a/backend/src/users/users.module.ts
+++ b/backend/src/users/users.module.ts
@@ -10,10 +10,7 @@ import { DepartmentsController } from './departments.controller';
 import { StorageModule } from '../storage/storage.module';
 
 @Module({
-  imports: [
-    TypeOrmModule.forFeature([User, Role, Department]),
-    StorageModule,
-  ],
+  imports: [TypeOrmModule.forFeature([User, Role, Department]), StorageModule],
   controllers: [UsersController, RolesController, DepartmentsController],
   providers: [UsersService],
   exports: [UsersService],
diff --git a/backend/src/users/users.service.ts b/backend/src/users/users.service.ts
index c737c6cd5..189c66293 100644
--- a/backend/src/users/users.service.ts
+++ b/backend/src/users/users.service.ts
@@ -12,17 +12,28 @@ export class UsersService {
     private readonly userRepository: Repository<User>,
   ) {}
 
-  async findAll(query: { page?: number; limit?: number; roleId?: string; departmentId?: string; isActive?: boolean } = {}): Promise<{ data: User[]; total: number }> {
+  async findAll(
+    query: {
+      page?: number;
+      limit?: number;
+      roleId?: string;
+      departmentId?: string;
+      isActive?: boolean;
+    } = {},
+  ): Promise<{ data: User[]; total: number }> {
     const { page = 1, limit = 20, roleId, departmentId, isActive } = query;
-    const qb = this.userRepository.createQueryBuilder('user')
+    const qb = this.userRepository
+      .createQueryBuilder('user')
       .leftJoinAndSelect('user.role', 'role')
       .leftJoinAndSelect('user.department', 'department')
       .skip((page - 1) * limit)
       .take(limit);
 
     if (roleId) qb.andWhere('user.roleId = :roleId', { roleId });
-    if (departmentId) qb.andWhere('user.departmentId = :departmentId', { departmentId });
-    if (isActive !== undefined) qb.andWhere('user.isActive = :isActive', { isActive });
+    if (departmentId)
+      qb.andWhere('user.departmentId = :departmentId', { departmentId });
+    if (isActive !== undefined)
+      qb.andWhere('user.isActive = :isActive', { isActive });
 
     const [data, total] = await qb.getManyAndCount();
     return { data, total };
@@ -42,18 +53,6 @@ export class UsersService {
     });
   }
 
-  async findById(id: string): Promise<User | null> {
-    return this.userRepository.findOne({ where: { id } });
-  }
-
-  async findById(id: string): Promise<User | null> {
-    return this.userRepository.findOne({ where: { id } });
-  }
-
-  async findById(id: string): Promise<User | null> {
-    return this.userRepository.findOne({ where: { id } });
-  }
-
   async findByGoogleId(googleId: string): Promise<User | null> {
     return this.userRepository.findOne({ where: { googleId } });
   }
diff --git a/backend/src/vendors/entities/vendor.entity.ts b/backend/src/vendors/entities/vendor.entity.ts
index 196dabd91..b07946f08 100644
--- a/backend/src/vendors/entities/vendor.entity.ts
+++ b/backend/src/vendors/entities/vendor.entity.ts
@@ -1,4 +1,10 @@
-import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+} from 'typeorm';
 
 @Entity('vendors')
 export class Vendor {
diff --git a/backend/src/vendors/vendors.controller.ts b/backend/src/vendors/vendors.controller.ts
index 5a19abe94..721f9c674 100644
--- a/backend/src/vendors/vendors.controller.ts
+++ b/backend/src/vendors/vendors.controller.ts
@@ -1,4 +1,14 @@
-import { Controller, Get, Post, Put, Delete, Param, Body, Query, UseGuards } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Param,
+  Body,
+  Query,
+  UseGuards,
+} from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { VendorsService } from './vendors.service';
 import { CreateVendorDto } from './dtos/create-vendor.dto';
@@ -15,7 +25,15 @@ export class VendorsController {
   }
 
   @Get()
-  async findAll(@Query() query: { page?: number; limit?: number; isActive?: boolean; search?: string }) {
+  async findAll(
+    @Query()
+    query: {
+      page?: number;
+      limit?: number;
+      isActive?: boolean;
+      search?: string;
+    },
+  ) {
     return this.vendorsService.findAll(query);
   }
 
diff --git a/backend/src/vendors/vendors.service.ts b/backend/src/vendors/vendors.service.ts
index 625e688c7..582988b0d 100644
--- a/backend/src/vendors/vendors.service.ts
+++ b/backend/src/vendors/vendors.service.ts
@@ -17,14 +17,23 @@ export class VendorsService {
     return this.vendorRepository.save(vendor);
   }
 
-  async findAll(query: { page?: number; limit?: number; isActive?: boolean; search?: string } = {}): Promise<{ data: Vendor[]; total: number }> {
+  async findAll(
+    query: {
+      page?: number;
+      limit?: number;
+      isActive?: boolean;
+      search?: string;
+    } = {},
+  ): Promise<{ data: Vendor[]; total: number }> {
     const { page = 1, limit = 20, isActive, search } = query;
-    const qb = this.vendorRepository.createQueryBuilder('vendor')
+    const qb = this.vendorRepository
+      .createQueryBuilder('vendor')
       .skip((page - 1) * limit)
       .take(limit)
       .orderBy('vendor.createdAt', 'DESC');
 
-    if (isActive !== undefined) qb.andWhere('vendor.isActive = :isActive', { isActive });
+    if (isActive !== undefined)
+      qb.andWhere('vendor.isActive = :isActive', { isActive });
     if (search) {
       qb.andWhere(
         '(vendor.name ILIKE :search OR vendor.email ILIKE :search OR vendor.contactPerson ILIKE :search)',
diff --git a/backend/test/asset-crud.e2e-spec.ts b/backend/test/asset-crud.e2e-spec.ts
index b0bbe3f2e..8a351210f 100644
--- a/backend/test/asset-crud.e2e-spec.ts
+++ b/backend/test/asset-crud.e2e-spec.ts
@@ -36,4 +36,4 @@ describe('Asset CRUD (e2e)', () => {
       .send({ token: 'bad-token', newPassword: 'newpass123' })
       .expect(400);
   });
-});
\ No newline at end of file
+});
diff --git a/backend/test/contracts.e2e-spec.ts b/backend/test/contracts.e2e-spec.ts
index 3612ca1aa..a3bed33ca 100644
--- a/backend/test/contracts.e2e-spec.ts
+++ b/backend/test/contracts.e2e-spec.ts
@@ -20,9 +20,7 @@ describe('Contracts (e2e)', () => {
   });
 
   it('GET /api/contracts returns 401 without auth', () => {
-    return request(app.getHttpServer())
-      .get('/api/contracts')
-      .expect(401);
+    return request(app.getHttpServer()).get('/api/contracts').expect(401);
   });
 
   it('POST /api/contracts returns 401 without auth', () => {
diff --git a/backend/test/licenses.e2e-spec.ts b/backend/test/licenses.e2e-spec.ts
index 493fc0c91..f64fe198f 100644
--- a/backend/test/licenses.e2e-spec.ts
+++ b/backend/test/licenses.e2e-spec.ts
@@ -20,9 +20,7 @@ describe('Licenses (e2e)', () => {
   });
 
   it('GET /api/licenses returns 401 without auth', () => {
-    return request(app.getHttpServer())
-      .get('/api/licenses')
-      .expect(401);
+    return request(app.getHttpServer()).get('/api/licenses').expect(401);
   });
 
   it('POST /api/licenses returns 401 without auth', () => {
diff --git a/backend/test/locations.e2e-spec.ts b/backend/test/locations.e2e-spec.ts
index ed8185e5c..89e24c184 100644
--- a/backend/test/locations.e2e-spec.ts
+++ b/backend/test/locations.e2e-spec.ts
@@ -34,7 +34,7 @@ describe('Locations (e2e)', () => {
         .set('Authorization', `Bearer ${authToken}`)
         .send({ name: 'Main Office', city: 'New York' })
         .expect(201)
-        .then(res => {
+        .then((res) => {
           locationId = res.body.data?.id || res.body.id;
         });
     });
diff --git a/backend/test/purchase-orders.e2e-spec.ts b/backend/test/purchase-orders.e2e-spec.ts
index 17e39f5cc..2a004478f 100644
--- a/backend/test/purchase-orders.e2e-spec.ts
+++ b/backend/test/purchase-orders.e2e-spec.ts
@@ -20,9 +20,7 @@ describe('PurchaseOrders (e2e)', () => {
   });
 
   it('GET /api/purchase-orders returns 401 without auth', () => {
-    return request(app.getHttpServer())
-      .get('/api/purchase-orders')
-      .expect(401);
+    return request(app.getHttpServer()).get('/api/purchase-orders').expect(401);
   });
 
   it('POST /api/purchase-orders returns 401 without auth', () => {

From c92515a87189651392b51feef3f8fd8dbe041208 Mon Sep 17 00:00:00 2001
From: Mercy Duru <m-duru@leadway.com>
Date: Sun, 28 Jun 2026 00:54:06 +0100
Subject: [PATCH 3/3] test errors

---
 backend/src/auth/auth.service.spec.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/backend/src/auth/auth.service.spec.ts b/backend/src/auth/auth.service.spec.ts
index 45650cf9c..807d7698f 100644
--- a/backend/src/auth/auth.service.spec.ts
+++ b/backend/src/auth/auth.service.spec.ts
@@ -3,8 +3,10 @@ import { AuthService } from './auth.service';
 import { UsersService } from '../users/users.service';
 import { MailService } from '../mail/mail.service';
 import { ConfigService } from '@nestjs/config';
+import { JwtService } from '@nestjs/jwt';
 import { getRepositoryToken } from '@nestjs/typeorm';
 import { PasswordResetToken } from './entities/password-reset-token.entity';
+import { RefreshToken } from './entities/refresh-token.entity';
 
 const mockRepo = { create: jest.fn(), save: jest.fn(), findOne: jest.fn() };
 const mockUsersService = {
@@ -16,6 +18,10 @@ const mockMailService = { sendPasswordResetEmail: jest.fn() };
 const mockConfig = {
   get: jest.fn((key: string, def?: string) => def ?? 'http://localhost:3000'),
 };
+const mockJwtService = {
+  sign: jest.fn(() => 'mock-jwt-token'),
+  verify: jest.fn(() => ({ sub: 'user-id', email: 'test@example.com' })),
+};
 
 describe('AuthService', () => {
   let service: AuthService;
@@ -27,7 +33,9 @@ describe('AuthService', () => {
         { provide: UsersService, useValue: mockUsersService },
         { provide: MailService, useValue: mockMailService },
         { provide: ConfigService, useValue: mockConfig },
+        { provide: JwtService, useValue: mockJwtService },
         { provide: getRepositoryToken(PasswordResetToken), useValue: mockRepo },
+        { provide: getRepositoryToken(RefreshToken), useValue: mockRepo },
       ],
     }).compile();
     service = module.get<AuthService>(AuthService);