Add dashboard, layout components, and CRM scaffolding

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -8,9 +8,12 @@
       "name": "lynkeduppro-crm",
       "version": "0.1.0",
       "dependencies": {
+        "clsx": "^2.1.1",
+        "lucide-react": "^1.21.0",
         "next": "16.2.9",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "tailwind-merge": "^3.6.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -2680,6 +2683,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4970,6 +4982,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.21.0.tgz",
+      "integrity": "sha512-reEZMXq8Qdd5jg5XYkQ5TR1fB/GiQ7ih4vcrthYDtgjSDwh0i6/YLiGjsWsIwgN49gpAnd4J2elSNzncMEEUUQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -6181,6 +6202,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz",

package.json

@@ -9,9 +9,12 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.21.0",
     "next": "16.2.9",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/dashboard/layout.tsx

@@ -0,0 +1,14 @@
+import { Sidebar } from "@/components/layout/sidebar";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <div className="flex-1 flex flex-col">{children}</div>
+    </div>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { Header } from "@/components/layout/header";
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+};
+
+const stats = [
+  { label: "Total Leads", value: "0" },
+  { label: "Open Deals", value: "0" },
+  { label: "Contacts", value: "0" },
+  { label: "Revenue", value: "$0" },
+];
+
+export default function DashboardPage() {
+  return (
+    <>
+      <Header title="Dashboard" />
+      <main className="flex-1 p-6 bg-neutral-50 dark:bg-neutral-900">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {stats.map((stat) => (
+            <div
+              key={stat.label}
+              className="rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-950 p-5"
+            >
+              <p className="text-sm text-neutral-500">{stat.label}</p>
+              <p className="mt-2 text-2xl font-semibold">{stat.value}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-6 rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-950 p-6">
+          <p className="text-neutral-500 text-sm">
+            Yahan pages add karenge — Leads, Contacts, Deals, Tasks. Aap batao
+            kaunsa page pehle banana hai.
+          </p>
+        </div>
+      </main>
+    </>
+  );
+}

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { siteConfig } from "@/config/site";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -13,8 +14,11 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: {
-  description: "Generated by create next app",
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.shortName}`,
+  },
+  description: siteConfig.description,
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,65 +1,24 @@
-import Image from "next/image";
+import Link from "next/link";
+import { siteConfig } from "@/config/site";
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <main className="flex-1 flex flex-col items-center justify-center text-center px-6 py-24">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <span className="text-sm font-medium text-neutral-500">
-        <Image
+        {siteConfig.shortName}
-          className="dark:invert"
+      </span>
-          src="/next.svg"
+      <h1 className="mt-3 text-4xl sm:text-5xl font-bold tracking-tight">
-          alt="Next.js logo"
+        {siteConfig.name}
-          width={100}
+      </h1>
-          height={20}
+      <p className="mt-4 max-w-xl text-neutral-500">
-          priority
+        {siteConfig.description}
-        />
+      </p>
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+      <Link
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+        href="/dashboard"
-            To get started, edit the page.tsx file.
+        className="mt-8 inline-flex items-center rounded-full bg-neutral-900 text-white dark:bg-white dark:text-neutral-900 px-6 py-3 text-sm font-medium hover:opacity-90 transition-opacity"
-          </h1>
+      >
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+        Go to Dashboard →
-            Looking for a starting point or more instructions? Head over to{" "}
+      </Link>
-            <a
+    </main>
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
   );
 }

src/components/layout/header.tsx

@@ -0,0 +1,10 @@
+export function Header({ title }: { title: string }) {
+  return (
+    <header className="h-16 flex items-center justify-between px-6 border-b border-black/10 dark:border-white/10 bg-white dark:bg-neutral-950">
+      <h1 className="text-lg font-semibold">{title}</h1>
+      <div className="flex items-center gap-3">
+        <div className="h-8 w-8 rounded-full bg-neutral-200 dark:bg-neutral-800" />
+      </div>
+    </header>
+  );
+}

src/components/layout/sidebar.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { siteConfig, navItems } from "@/config/site";
+import { cn } from "@/lib/utils";
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="hidden md:flex md:w-60 md:flex-col border-r border-black/10 dark:border-white/10 bg-white dark:bg-neutral-950">
+      <div className="h-16 flex items-center px-6 font-semibold text-lg border-b border-black/10 dark:border-white/10">
+        {siteConfig.shortName}
+      </div>
+      <nav className="flex-1 p-3 space-y-1">
+        {navItems.map((item) => {
+          const active =
+            pathname === item.href || pathname.startsWith(item.href + "/");
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "block rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                active
+                  ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
+                  : "text-neutral-600 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-900"
+              )}
+            >
+              {item.title}
+            </Link>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}

src/config/site.ts

@@ -0,0 +1,18 @@
+export const siteConfig = {
+  name: "LynkedUpPro CRM",
+  shortName: "LynkedUpPro",
+  description: "CRM to manage leads, contacts, deals and your sales pipeline.",
+  url: "https://lynkeduppro.com",
+};
+
+export type NavItem = {
+  title: string;
+  href: string;
+  icon?: string;
+};
+
+/** Sidebar / main navigation. Add page routes here as we build them. */
+export const navItems: NavItem[] = [
+  { title: "Dashboard", href: "/dashboard", icon: "LayoutDashboard" },
+  // pages aayenge yahan: Leads, Contacts, Deals, Tasks, Settings ...
+];

src/lib/utils.ts

@@ -0,0 +1,26 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merge Tailwind class names safely (handles conditional + conflicting classes).
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/** Format a number as currency (default: USD). */
+export function formatCurrency(value: number, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+  }).format(value);
+}
+
+/** Format a date into a readable short form. */
+export function formatDate(date: Date | string) {
+  return new Intl.DateTimeFormat("en-US", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  }).format(new Date(date));
+}

src/types/index.ts

@@ -0,0 +1,30 @@
+/** Shared domain types for the CRM. Extend as features are added. */
+
+export type ID = string;
+
+export type Lead = {
+  id: ID;
+  name: string;
+  email: string;
+  phone?: string;
+  company?: string;
+  status: "new" | "contacted" | "qualified" | "lost" | "won";
+  createdAt: string;
+};
+
+export type Contact = {
+  id: ID;
+  name: string;
+  email: string;
+  phone?: string;
+  company?: string;
+};
+
+export type Deal = {
+  id: ID;
+  title: string;
+  amount: number;
+  stage: "prospect" | "negotiation" | "proposal" | "closed-won" | "closed-lost";
+  contactId?: ID;
+  createdAt: string;
+};