feat: Next.js 14 web admin scaffold — auth, sidebar, dashboard, placeholders

app/(app)/reports/page.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { BarChart3 } from 'lucide-react';
+
+export default function ReportsPage() {
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-slate-800">Reports</h1>
+        <p className="text-slate-500 text-sm mt-1">Financial and operational reports</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {['Collections Report', 'Subscriber Growth', 'Invoice Aging', 'Technician Performance'].map(
+          (report) => (
+            <Card key={report} className="border shadow-sm hover:shadow-md transition-shadow cursor-pointer">
+              <CardHeader>
+                <CardTitle className="text-base flex items-center gap-2 text-slate-700">
+                  <BarChart3 size={18} style={{ color: '#0891B2' }} />
+                  {report}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-slate-400 text-sm">Coming soon — report generation will be available here.</p>
+              </CardContent>
+            </Card>
+          )
+        )}
+      </div>
+    </div>
+  );
+}