Build the Solaire inventory intelligence MVP

Add the tenant-ready dashboard, freshness and pricing analytics, mock integration adapters, persistence schema, and verification tooling needed for the initial pilot.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/dashboard-shell.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  Bell,
+  Boxes,
+  ChartNoAxesCombined,
+  ChevronDown,
+  CircleDollarSign,
+  LayoutDashboard,
+  Leaf,
+  Search,
+  Settings,
+  Store,
+  Users,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+const navigation = [
+  { href: "/", label: "Overview", icon: LayoutDashboard },
+  { href: "/inventory", label: "Inventory", icon: Boxes },
+  { href: "/branches", label: "Branches", icon: Store },
+  { href: "/sales-team", label: "Sales team", icon: Users },
+  { href: "/recommendations", label: "Recommendations", icon: CircleDollarSign },
+  { href: "/alerts", label: "Alerts", icon: Bell },
+];
+
+export function DashboardShell({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+
+  if (pathname === "/login") {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--surface)] text-slate-950">
+      <aside className="fixed inset-y-0 left-0 z-40 hidden w-64 flex-col border-r border-slate-200/80 bg-white px-4 py-5 lg:flex">
+        <Link href="/" className="flex items-center gap-3 px-3">
+          <span className="grid size-10 place-items-center rounded-xl bg-emerald-600 text-white shadow-sm shadow-emerald-200">
+            <Leaf className="size-5" />
+          </span>
+          <span>
+            <span className="block text-lg font-bold tracking-tight">Solaire</span>
+            <span className="block text-[11px] font-medium text-slate-400">Inventory intelligence</span>
+          </span>
+        </Link>
+
+        <nav className="mt-9 space-y-1">
+          <p className="mb-2 px-3 text-[10px] font-bold uppercase tracking-[0.18em] text-slate-400">
+            Workspace
+          </p>
+          {navigation.map((item) => {
+            const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition",
+                  active
+                    ? "bg-emerald-50 text-emerald-800"
+                    : "text-slate-600 hover:bg-slate-50 hover:text-slate-950",
+                )}
+              >
+                <item.icon className="size-[18px]" strokeWidth={active ? 2.3 : 1.8} />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="mt-auto">
+          <Link
+            href="/settings/integrations"
+            className={cn(
+              "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium",
+              pathname.startsWith("/settings")
+                ? "bg-emerald-50 text-emerald-800"
+                : "text-slate-600 hover:bg-slate-50",
+            )}
+          >
+            <Settings className="size-[18px]" />
+            Settings & integrations
+          </Link>
+          <div className="mt-4 rounded-2xl border border-emerald-100 bg-emerald-50/70 p-4">
+            <div className="flex items-center gap-2 text-xs font-semibold text-emerald-800">
+              <ChartNoAxesCombined className="size-4" />
+              Demo workspace
+            </div>
+            <p className="mt-2 text-xs leading-5 text-emerald-700">
+              Sample data refreshes with the current date.
+            </p>
+          </div>
+        </div>
+      </aside>
+
+      <div className="lg:pl-64">
+        <header className="sticky top-0 z-30 flex h-16 items-center border-b border-slate-200/80 bg-white/90 px-4 backdrop-blur-md sm:px-6 lg:px-8">
+          <Link href="/" className="mr-4 flex items-center gap-2 lg:hidden">
+            <span className="grid size-8 place-items-center rounded-lg bg-emerald-600 text-white">
+              <Leaf className="size-4" />
+            </span>
+            <span className="font-bold">Solaire</span>
+          </Link>
+          <div className="relative hidden max-w-md flex-1 md:block">
+            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+            <input
+              aria-label="Search products, branches, or people"
+              placeholder="Search products, branches, or people..."
+              className="h-10 w-full rounded-xl border border-slate-200 bg-slate-50/80 pl-10 pr-3 text-sm outline-none transition focus:border-emerald-400 focus:bg-white focus:ring-4 focus:ring-emerald-50"
+            />
+          </div>
+          <div className="ml-auto flex items-center gap-2 sm:gap-4">
+            <Link
+              href="/alerts"
+              aria-label="View alerts"
+              className="relative grid size-10 place-items-center rounded-xl text-slate-500 hover:bg-slate-100"
+            >
+              <Bell className="size-5" />
+              <span className="absolute right-2 top-2 size-2 rounded-full border-2 border-white bg-amber-500" />
+            </Link>
+            <button className="flex items-center gap-2 rounded-xl p-1.5 pr-2 hover:bg-slate-50">
+              <span className="grid size-8 place-items-center rounded-lg bg-slate-900 text-xs font-bold text-white">
+                NC
+              </span>
+              <span className="hidden text-left sm:block">
+                <span className="block text-xs font-semibold">Nora Clarke</span>
+                <span className="block text-[10px] text-slate-400">Operations manager</span>
+              </span>
+              <ChevronDown className="hidden size-4 text-slate-400 sm:block" />
+            </button>
+          </div>
+        </header>
+
+        <nav className="flex gap-1 overflow-x-auto border-b border-slate-200 bg-white px-3 py-2 lg:hidden">
+          {navigation.slice(0, 5).map((item) => {
+            const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "whitespace-nowrap rounded-lg px-3 py-2 text-xs font-semibold",
+                  active ? "bg-emerald-50 text-emerald-800" : "text-slate-500",
+                )}
+              >
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+        <main className="mx-auto max-w-[1600px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}