feat: add Check-in/Check-out and Notification Preferences pages [FE-11, FE-29]

frontend/app/(dashboard)/check-in-out/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+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 }
+
+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 },
+];
+
+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));
+
+  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>
+      <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>
+          <tbody>
+            {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>
+                  <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>}
+                  </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>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+const EVENTS = [
+  { key:'asset_checkout', label:'Asset Checked Out' },
+  { key:'asset_return', label:'Asset Returned' },
+  { key:'maintenance_due', label:'Maintenance Due' },
+  { key:'low_stock', label:'Low Stock Alert' },
+  { key:'asset_assigned', label:'Asset Assigned to Me' },
+  { key:'work_order', label:'Work Order Update' },
+];
+
+const CHANNELS = ['Email', 'In-App', 'Push'];
+
+type Prefs = Record<string, Record<string, boolean>>;
+
+export default function NotificationPreferencesPage() {
+  const [prefs, setPrefs] = useState<Prefs>(() => {
+    const init: Prefs = {};
+    EVENTS.forEach(e => { init[e.key] = { Email: true, 'In-App': true, Push: false }; });
+    return init;
+  });
+
+  const toggle = (event: string, channel: string) =>
+    setPrefs(prev => ({ ...prev, [event]: { ...prev[event], [channel]: !prev[event][channel] } }));
+
+  return (
+    <div>
+      <div className="mb-6"><h1 className="text-2xl font-bold text-gray-900">Notification Preferences</h1><p className="text-sm text-gray-500 mt-1">Per-event channel toggles</p></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="text-left px-4 py-3 font-medium text-gray-500">Event</th>
+            {CHANNELS.map(c => <th key={c} className="text-center px-4 py-3 font-medium text-gray-500">{c}</th>)}
+          </tr></thead>
+          <tbody>
+            {EVENTS.map(ev => (
+              <tr key={ev.key} className="border-b border-gray-100">
+                <td className="px-4 py-3 font-medium text-gray-900">{ev.label}</td>
+                {CHANNELS.map(ch => (
+                  <td key={ch} className="px-4 py-3 text-center">
+                    <input type="checkbox" checked={prefs[ev.key][ch]} onChange={() => toggle(ev.key, ch)} className="rounded cursor-pointer" />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="mt-4"><Button>Save Preferences</Button></div>
+    </div>
+  );
+}