feat: add SVG icons for navigation and branding, configure Tailwind CSS, and set up TypeScript

2026-07-09 11:10:45 +05:30
parent 961066e958
commit ce12ad426e
64 changed files with 15152 additions and 0 deletions
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/components/Layouts/AppSidebar"
+import { Footer } from "@/components/Layouts/Footer"
+import { Header } from "@/components/Layouts/Header"
+import { Toaster } from "@/components/ui/toast"
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="flex min-h-screen bg-background">
+      <AppSidebar />
+      <main className="flex flex-1 flex-col">
+        <Header />
+        <div className="flex-1 overflow-auto">
+          <div className="p-6 lg:p-8">
+            <div className="rounded-xl bg-card border border-border shadow-sm">
+              <div className="p-6">
+                {children}
+              </div>
+            </div>
+          </div>
+        </div>
+        <Footer className="border-t border-border mt-auto" />
+      </main>
+      <Toaster />
+    </div>
+  )
+}
@@ -0,0 +1,326 @@
+"use client"
+
+import * as React from "react"
+import { CheckCircle2, DollarSign, Package, Plus, ShoppingCart, Users } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { RecentOrdersTable } from "@/components/dashboard/recent-orders-table"
+import { Button } from "@/components/ui/button"
+import { DatePicker, DateRangePicker } from "@/components/ui/date-picker"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+import { StatCard } from "@/components/ui/stat-card"
+import { toast } from "@/components/ui/toast"
+import LineChart from "@/components/ui/line-chart"
+import BarChart from "@/components/ui/bar-chart"
+import PieChart from "@/components/ui/pie-chart"
+
+const indigoButton =
+  "bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/40"
+
+export default function DashboardPage() {
+  const [date, setDate] = React.useState<Date>()
+  const [range, setRange] = React.useState<{ from: Date | undefined; to?: Date | undefined }>()
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-5 rounded-xl bg-card p-6 shadow-sm border border-border">
+        <div>
+          <p className="mb-2 text-sm font-semibold text-muted-foreground">Breadcrumb</p>
+          <div className="flex flex-col gap-3">
+            {/* Basic */}
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="/dashboard">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="/dashboard/products">Products</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Product Detail</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+
+            {/* With ellipsis */}
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="/dashboard">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbEllipsis />
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="/dashboard/products">Products</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Edit</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </div>
+
+        <div>
+          <p className="mb-2 text-sm font-semibold text-muted-foreground">Variants</p>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="default">Default</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="destructive">Destructive</Button>
+            <Button variant="success">Success</Button>
+            <Button variant="warning">Warning</Button>
+            <Button variant="info">Info</Button>
+            <Button variant="link">Link</Button>
+          </div>
+        </div>
+
+        <div>
+          <p className="mb-2 text-sm font-semibold text-muted-foreground">Sizes</p>
+          <div className="flex flex-wrap items-center gap-3">
+            <Button size="xs" className={indigoButton}>
+              Extra Small
+            </Button>
+            <Button size="sm" className={indigoButton}>
+              Small
+            </Button>
+            <Button size="default" className={indigoButton}>
+              Default
+            </Button>
+            <Button size="lg" className={indigoButton}>
+              Large
+            </Button>
+            <Button size="lg" className={cn(indigoButton, "h-12 px-8 text-base")}>
+              Extra Large
+            </Button>
+            <Button size="icon-sm" className={indigoButton} aria-label="Add (small)">
+              <Plus />
+            </Button>
+            <Button size="icon" className={indigoButton} aria-label="Add">
+              <Plus />
+            </Button>
+            <Button size="icon-lg" className={indigoButton} aria-label="Add (large)">
+              <Plus />
+            </Button>
+            <Button
+              size="icon-lg"
+              className={cn(indigoButton, "size-12")}
+              aria-label="Add (extra large)"
+            >
+              <Plus className="size-6" />
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <p className="mb-2 text-sm font-semibold text-muted-foreground">Date Picker</p>
+          <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+            <div className="flex flex-col gap-1">
+              <span className="text-xs text-muted-foreground">Single date</span>
+              <DatePicker
+                value={date}
+                onChange={setDate}
+                placeholder="Select a date"
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <span className="text-xs text-muted-foreground">Date range</span>
+              <DateRangePicker
+                value={range}
+                onChange={setRange}
+                placeholder="Select date range"
+              />
+            </div>
+          </div>
+          {(date || range?.from) && (
+            <p className="mt-2 text-xs text-muted-foreground">
+              {date && <>Selected: <span className="font-medium text-foreground">{date.toLocaleDateString()}</span></>}
+              {range?.from && (
+                <>
+                  {date && " · "}
+                  Range: <span className="font-medium text-foreground">{range.from.toLocaleDateString()}</span>
+                  {range.to && <> – <span className="font-medium text-foreground">{range.to.toLocaleDateString()}</span></>}
+                </>
+              )}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <p className="mb-2 text-sm font-semibold text-muted-foreground">Modal</p>
+          <Dialog>
+            <DialogTrigger render={<Button variant="outline">Open Modal</Button>} />
+            <DialogContent className="w-[calc(100%-2rem)] sm:max-w-md">
+              <DialogHeader className="items-center gap-3 px-2 pt-4 text-center sm:px-4">
+                <div className="flex size-14 items-center justify-center rounded-full bg-success/10">
+                  <CheckCircle2 className="size-7 text-success" />
+                </div>
+                <DialogTitle className="text-lg font-bold">Order confirmed</DialogTitle>
+                <DialogDescription>
+                  Your order has been placed successfully and is now being processed.
+                </DialogDescription>
+              </DialogHeader>
+
+              <div className="flex justify-center px-2 pb-2 sm:px-4">
+                <Button size="lg" className="w-full sm:w-auto sm:px-10">
+                  Continue
+                </Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        <div>
+          <p className="mb-2 text-sm font-semibold text-muted-foreground">Toast</p>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" onClick={() => toast({ title: "Default toast message" })}>
+              Default
+            </Button>
+            <Button variant="success" onClick={() => toast.success("Success!", "Your changes have been saved.")}>
+              Success
+            </Button>
+            <Button variant="destructive" onClick={() => toast.error("Error", "Something went wrong. Please try again.")}>
+              Error
+            </Button>
+            <Button variant="warning" onClick={() => toast.warning("Warning", "This action cannot be undone.")}>
+              Warning
+            </Button>
+            <Button variant="info" onClick={() => toast.info("Info", "Your session will expire in 5 minutes.")}>
+              Info
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={() =>
+                toast({
+                  title: "With Action",
+                  description: "Do you want to undo this change?",
+                  actionLabel: "Undo",
+                  onAction: () => toast.success("Undone!", "Change has been reverted."),
+                })
+              }
+            >
+              With Action
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-5 rounded-xl bg-card p-6 shadow-sm border border-border">
+        <div>
+          <p className="mb-2 text-sm font-semibold text-muted-foreground">Alert Dialogs</p>
+          <div className="flex flex-wrap gap-2">
+            <AlertDialog>
+              <AlertDialogTrigger render={<Button variant="info">Info</Button>} />
+              <AlertDialogContent
+                variant="info"
+                title="Update available"
+                description="A new version is ready. Reload the page to apply the latest changes."
+                confirmLabel="Reload"
+                onConfirm={() => toast.info("Reloading...", "Applying the latest update.")}
+              />
+            </AlertDialog>
+
+            <AlertDialog>
+              <AlertDialogTrigger render={<Button variant="success">Success</Button>} />
+              <AlertDialogContent
+                variant="success"
+                title="Order confirmed"
+                description="Your order has been placed successfully and is now being processed."
+                confirmLabel="Continue"
+                cancelLabel="View order"
+                onConfirm={() => toast.success("Done!", "Redirecting to dashboard.")}
+              />
+            </AlertDialog>
+
+            <AlertDialog>
+              <AlertDialogTrigger render={<Button variant="warning">Warning</Button>} />
+              <AlertDialogContent
+                variant="warning"
+                title="Unsaved changes"
+                description="You have unsaved changes. Leaving this page will discard them."
+                confirmLabel="Leave anyway"
+                onConfirm={() => toast.warning("Changes discarded")}
+              />
+            </AlertDialog>
+
+            <AlertDialog>
+              <AlertDialogTrigger render={<Button variant="destructive">Delete</Button>} />
+              <AlertDialogContent
+                variant="destructive"
+                title="Delete record?"
+                description="This action is permanent and cannot be undone. All associated data will be removed."
+                confirmLabel="Delete"
+                onConfirm={() => toast.error("Deleted", "The record has been permanently removed.")}
+              />
+            </AlertDialog>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <StatCard label="Total Revenue" value={45231.89} icon={DollarSign} />
+        <StatCard label="Orders" value={1284} icon={ShoppingCart} />
+        <StatCard label="Customers" value={892} icon={Users} />
+        <StatCard label="Low Stock Items" value={16} icon={Package} />
+      </div>
+
+      <RecentOrdersTable />
+
+      <div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <div className="rounded-xl bg-card p-6 shadow-sm border border-border">
+          <h3 className="mb-4 text-sm font-semibold text-foreground">Sales (Line)</h3>
+          <div className="h-56">
+            <LineChart
+              labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
+              datasets={[{ label: "Sales", data: [120, 200, 150, 220, 180, 260] }]}
+            />
+          </div>
+        </div>
+
+        <div className="rounded-xl bg-card p-6 shadow-sm border border-border">
+          <h3 className="mb-4 text-sm font-semibold text-foreground">Revenue (Bar)</h3>
+          <div className="h-56">
+            <BarChart
+              labels={["Q1", "Q2", "Q3", "Q4"]}
+              datasets={[{ label: "Revenue", data: [30000, 42000, 36000, 48000], backgroundColor: "var(--color-primary)" }]}
+            />
+          </div>
+        </div>
+
+        <div className="rounded-xl bg-card p-6 shadow-sm border border-border">
+          <h3 className="mb-4 text-sm font-semibold text-foreground">Product Mix (Pie)</h3>
+          <div className="h-56">
+            <PieChart labels={["A","B","C"]} data={[45, 30, 25]} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,7 @@
+export default function ProductsPage() {
+  return (
+    <div className="flex flex-1 items-center justify-center">
+      <h1 className="text-2xl font-semibold tracking-tight">Products</h1>
+    </div>
+  )
+}
@@ -0,0 +1,157 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-error: var(--error);
+  --color-info: var(--info);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(0.98 0 0);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(0.463 0.258 262.881);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.92 0.055 264.901);
+  --secondary-foreground: oklch(0.463 0.258 262.881);
+  --muted: oklch(0.93 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.55 0.15 205.5);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.925 0.01 0);
+  --input: oklch(0.945 0.01 0);
+  --ring: oklch(0.463 0.258 262.881);
+  --success: oklch(0.582 0.183 142.495);
+  --warning: oklch(0.787 0.141 72.031);
+  --error: oklch(0.577 0.245 27.325);
+  --info: oklch(0.631 0.215 259.262);
+  --chart-1: oklch(0.463 0.258 262.881);
+  --chart-2: oklch(0.631 0.215 259.262);
+  --chart-3: oklch(0.582 0.183 142.495);
+  --chart-4: oklch(0.787 0.141 72.031);
+  --chart-5: oklch(0.577 0.245 27.325);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.15 0 0);
+  --sidebar-primary: oklch(0.463 0.258 262.881);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.92 0.055 264.901);
+  --sidebar-accent-foreground: oklch(0.463 0.258 262.881);
+  --sidebar-border: oklch(0.925 0.01 0);
+  --sidebar-ring: oklch(0.463 0.258 262.881);
+}
+
+.dark {
+  --background: oklch(0.125 0 0);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.175 0 0);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.175 0 0);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.68 0.186 265.215);
+  --primary-foreground: oklch(0.125 0 0);
+  --secondary: oklch(0.28 0.04 264.901);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.275 0.02 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.7 0.12 205.5);
+  --accent-foreground: oklch(0.125 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.25 0.01 0);
+  --input: oklch(0.2 0.02 0);
+  --ring: oklch(0.68 0.186 265.215);
+  --success: oklch(0.65 0.15 142.495);
+  --warning: oklch(0.85 0.12 72.031);
+  --error: oklch(0.704 0.191 22.216);
+  --info: oklch(0.75 0.18 259.262);
+  --chart-1: oklch(0.68 0.186 265.215);
+  --chart-2: oklch(0.75 0.18 259.262);
+  --chart-3: oklch(0.65 0.15 142.495);
+  --chart-4: oklch(0.85 0.12 72.031);
+  --chart-5: oklch(0.704 0.191 22.216);
+  --sidebar: oklch(0.125 0 0);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.68 0.186 265.215);
+  --sidebar-primary-foreground: oklch(0.95 0 0);
+  --sidebar-accent: oklch(0.28 0.04 264.901);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.25 0.01 0);
+  --sidebar-ring: oklch(0.68 0.186 265.215);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    @apply font-sans scroll-smooth;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold tracking-tight;
+  }
+  h1 {
+    @apply text-3xl;
+  }
+  h2 {
+    @apply text-2xl;
+  }
+  h3 {
+    @apply text-xl;
+  }
+  h4 {
+    @apply text-lg;
+  }
+}
@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">
+        <TooltipProvider>{children}</TooltipProvider>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,70 @@
+"use client"
+
+import Link from "next/link"
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import OtpInput from "@/components/ui/otp-input"
+import { Mail } from "lucide-react"
+
+export default function ForgotOtpPage() {
+  const [otp, setOtp] = useState("")
+  const [secondsLeft, setSecondsLeft] = useState(60)
+
+  const canResend = secondsLeft <= 0
+
+  useEffect(() => {
+    if (secondsLeft <= 0) return
+    const id = setInterval(() => setSecondsLeft((s) => s - 1), 1000)
+    return () => clearInterval(id)
+  }, [secondsLeft])
+
+  const handleResend = () => {
+    setSecondsLeft(60)
+    setOtp("")
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-background/95 p-4">
+      <div className="w-full max-w-md rounded-xl bg-card p-8 shadow-lg border border-border">
+        <div className="flex flex-col items-center mb-8">
+          <div className="bg-primary/10 rounded-full p-4 mb-4">
+            <Mail className="text-primary size-6" />
+          </div>
+          <h1 className="text-2xl font-bold text-foreground text-center">Verify your email</h1>
+        </div>
+        <p className="text-sm text-muted-foreground text-center mb-8">We've sent a verification code to your email address. Enter it below to continue.</p>
+
+        <div className="space-y-6">
+          <div className="flex justify-center">
+            <OtpInput value={otp} onChange={(v) => setOtp(v)} />
+          </div>
+
+          <div className="text-center">
+            {canResend ? (
+              <button
+                onClick={(e) => {
+                  e.preventDefault()
+                  handleResend()
+                }}
+                className="text-sm font-medium text-primary hover:text-primary/80 transition-colors"
+              >
+                Didn't receive the code? Resend
+              </button>
+            ) : (
+              <p className="text-sm text-muted-foreground">Resend code available in <span className="font-semibold text-foreground">{Math.max(0, secondsLeft)}s</span></p>
+            )}
+          </div>
+
+          <div className="flex gap-3">
+            <Link href="/login" className="flex-1">
+              <Button variant="outline" className="w-full">Back</Button>
+            </Link>
+            <Link href="/login/forgot/reset" className="flex-1">
+              <Button className="w-full">Verify</Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,70 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { validateEmail } from "@/lib/validations"
+
+export default function ForgotEmailPage() {
+  const router = useRouter()
+  const [email, setEmail] = useState("")
+  const [emailError, setEmailError] = useState<string>("")
+
+  const onEmailChange = (value: string) => {
+    setEmail(value)
+    const res = validateEmail(value)
+    setEmailError(res.valid ? "" : (res.error?.issues?.[0]?.message ?? 'Invalid email'))
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-background/95 px-4 py-8">
+      <div className="w-full max-w-md rounded-xl bg-card p-8 shadow-lg border border-border">
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-foreground">Reset your password</h1>
+          <p className="mt-2 text-sm text-muted-foreground">Enter the email address associated with your account and we'll send you a one-time code to verify your identity.</p>
+        </div>
+
+        <div className="space-y-6">
+          <div>
+            <label htmlFor="email" className="block text-sm font-semibold text-foreground mb-2">Email address</label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => onEmailChange((e.target as HTMLInputElement).value)}
+              className="h-11 rounded-lg"
+              placeholder="you@example.com"
+              aria-invalid={emailError !== ""}
+            />
+            {emailError !== "" && <p className="text-sm text-error mt-2 font-medium">{emailError}</p>}
+          </div>
+
+          <Button
+            className="w-full h-11 text-base font-medium"
+            disabled={emailError !== ""}
+            onClick={() => {
+              if (email.length === 0) {
+                setEmailError('Email is required')
+                return
+              }
+              if (emailError === "") router.push('/login/forgot/otp')
+            }}
+          >
+            Send verification code
+          </Button>
+
+          <div className="text-center">
+            <button
+              type="button"
+              onClick={() => router.push('/login')}
+              className="text-sm font-medium text-primary hover:text-primary/80 transition-colors"
+            >
+              Back to sign in
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,142 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog"
+import { Check, Eye, EyeOff } from "lucide-react"
+
+export default function ForgotResetPage() {
+  const router = useRouter()
+  const [password, setPassword] = useState("")
+  const [confirm, setConfirm] = useState("")
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [showSuccess, setShowSuccess] = useState(false)
+
+  const meetsLength = password.length >= 8 && password.length <= 20
+  const hasUpper = /[A-Z]/.test(password)
+  const hasNumber = /[0-9]/.test(password)
+  const hasSpecial = /[^A-Za-z0-9]/.test(password)
+  const passwordsMatch = password === confirm && password.length > 0
+  const allValid = meetsLength && hasUpper && hasNumber && hasSpecial && passwordsMatch
+
+  const PasswordRequirement = ({ met, label }: { met: boolean; label: string }) => (
+    <div className="flex items-center gap-3">
+      <div className={`flex items-center justify-center w-5 h-5 rounded-full shrink-0 text-sm font-semibold ${met ? 'bg-success/10 text-success' : 'bg-muted text-muted-foreground'}`}>
+        {met ? <Check className="size-4" /> : <span>○</span>}
+      </div>
+      <span className={`text-sm ${met ? 'text-foreground font-medium' : 'text-muted-foreground'}`}>{label}</span>
+    </div>
+  )
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-background/95 p-4">
+      <div className="w-full max-w-md rounded-xl bg-card p-8 shadow-lg border border-border">
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-foreground">Create a new password</h1>
+          <p className="mt-2 text-sm text-muted-foreground">Choose a strong password to secure your account.</p>
+        </div>
+
+        <div className="space-y-6">
+          <div>
+            <label htmlFor="password" className="block text-sm font-semibold text-foreground mb-2">New password</label>
+            <div className="relative">
+              <Input
+                id="password"
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword((e.target as HTMLInputElement).value)}
+                className="h-11 pr-11"
+                placeholder="••••••••"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((s) => !s)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {showPassword ? <EyeOff className="size-5" /> : <Eye className="size-5" />}
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="confirm" className="block text-sm font-semibold text-foreground mb-2">Confirm password</label>
+            <div className="relative">
+              <Input
+                id="confirm"
+                type={showConfirm ? 'text' : 'password'}
+                value={confirm}
+                onChange={(e) => setConfirm((e.target as HTMLInputElement).value)}
+                className="h-11 pr-11"
+                placeholder="••••••••"
+              />
+              <button
+                type="button"
+                onClick={() => setShowConfirm((s) => !s)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {showConfirm ? <EyeOff className="size-5" /> : <Eye className="size-5" />}
+              </button>
+            </div>
+          </div>
+
+          <div className="bg-muted/50 rounded-lg p-4 space-y-3">
+            <p className="text-sm font-semibold text-foreground">Password requirements:</p>
+            <PasswordRequirement met={meetsLength} label="Between 8 and 20 characters" />
+            <PasswordRequirement met={hasUpper} label="At least 1 uppercase letter" />
+            <PasswordRequirement met={hasNumber} label="At least 1 number" />
+            <PasswordRequirement met={hasSpecial} label="At least 1 special character" />
+          </div>
+
+          {!passwordsMatch && confirm.length > 0 && (
+            <p className="text-sm text-error font-medium">Passwords don't match.</p>
+          )}
+
+          <div className="flex gap-3">
+            <Button
+              variant="outline"
+              onClick={() => router.back()}
+              className="flex-1 h-11"
+            >
+              Back
+            </Button>
+            <Button
+              disabled={!allValid}
+              onClick={() => setShowSuccess(true)}
+              className="flex-1 h-11"
+            >
+              Change password
+            </Button>
+          </div>
+        </div>
+
+        <Dialog open={showSuccess} onOpenChange={setShowSuccess}>
+          <DialogContent className="w-full max-w-sm">
+            <DialogHeader className="text-center">
+              <div className="flex flex-col items-center gap-4">
+                <div className="flex items-center justify-center w-12 h-12 rounded-full bg-success/10 text-success">
+                  <Check className="size-6" />
+                </div>
+                <div>
+                  <DialogTitle className="text-xl font-bold">Password changed successfully</DialogTitle>
+                  <DialogDescription className="mt-2">Your password has been updated. You can now sign in with your new password.</DialogDescription>
+                </div>
+              </div>
+            </DialogHeader>
+            <Button onClick={() => router.push('/login')} className="w-full mt-6">
+              Return to sign in
+            </Button>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,182 @@
+"use client"
+
+import { useState } from "react"
+import Image from "next/image"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Eye, EyeOff } from "lucide-react"
+import { loginSchema, LoginValues } from "@/lib/validations"
+
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+
+function GoogleIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="size-4">
+      <path
+        fill="#4285F4"
+        d="M23.52 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.89c2.27-2.09 3.56-5.17 3.56-8.82Z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 24c3.24 0 5.95-1.07 7.93-2.91l-3.89-3c-1.08.73-2.46 1.15-4.04 1.15-3.1 0-5.73-2.09-6.67-4.9H1.32v3.09A12 12 0 0 0 12 24Z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.33 14.34a7.2 7.2 0 0 1 0-4.68V6.57H1.32a12 12 0 0 0 0 10.86l4.01-3.09Z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 4.77c1.76 0 3.35.6 4.6 1.79l3.45-3.45C17.94 1.19 15.23 0 12 0A12 12 0 0 0 1.32 6.57l4.01 3.09C6.27 6.86 8.9 4.77 12 4.77Z"
+      />
+    </svg>
+  )
+}
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [showPassword, setShowPassword] = useState(false)
+  const [remember, setRemember] = useState(false)
+
+  const form = useForm<LoginValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { email: "", password: "" },
+  })
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    console.log(values)
+    router.push("/dashboard")
+  })
+
+  return (
+    <div className="relative min-h-screen overflow-hidden">
+      {/* Full-page background photo — right side only */}
+      <div className="absolute inset-y-0 left-[45%] right-0">
+        <Image
+          src="/images/loginerps.png"
+          alt="ERP Illustration"
+          fill
+          className="object-contain object-center bg-white"
+          priority
+        />
+      </div>
+
+      {/* Login panel — overlays left side, no hard border with the photo */}
+      <main className="relative z-10 flex min-h-screen w-full flex-col justify-center bg-white px-6 py-12 sm:px-12 md:w-[45%]">
+        <div className="mb-8 flex justify-center">
+          <Link href="/" className="inline-flex items-center">
+            <Image src="/images/logo%20(2).png" alt="Hexa ERP" width={300} height={150} />
+          </Link>
+        </div>
+
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-foreground">Sign in to your account</h1>
+          <p className="mt-3 text-base text-muted-foreground">Access your ERP dashboard and manage your business</p>
+        </div>
+
+        <form onSubmit={onSubmit} noValidate className="mt-10 space-y-6" aria-describedby="form-errors" aria-live="polite">
+          <FieldGroup className="space-y-5">
+            <Field data-invalid={!!form.formState.errors.email}>
+              <FieldLabel htmlFor="email" className="text-sm font-semibold text-foreground">
+                Email Address
+              </FieldLabel>
+              <Input
+                id="email"
+                type="email"
+                autoComplete="email"
+                className="mt-2 h-11 rounded-lg px-4 text-base"
+                placeholder="you@example.com"
+                aria-invalid={!!form.formState.errors.email}
+                {...form.register("email")}
+              />
+              <FieldError errors={[form.formState.errors.email]} />
+            </Field>
+
+            <Field data-invalid={!!form.formState.errors.password}>
+              <FieldLabel htmlFor="password" className="text-sm font-semibold text-foreground">
+                Password
+              </FieldLabel>
+              <div className="relative mt-2">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  autoComplete="current-password"
+                  className="h-11 rounded-lg px-4 pr-11 text-base"
+                  placeholder="••••••••"
+                  aria-invalid={!!form.formState.errors.password}
+                  {...form.register("password")}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  aria-label={showPassword ? "Hide password" : "Show password"}
+                  className="absolute inset-y-0 right-3 flex items-center text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showPassword ? (
+                    <EyeOff className="size-5" />
+                  ) : (
+                    <Eye className="size-5" />
+                  )}
+                </button>
+              </div>
+              <FieldError errors={[form.formState.errors.password]} />
+              <div className="flex justify-end mt-1">
+                <Link href="/login/forgot" className="text-sm font-medium text-black hover:text-black/70 transition-colors">
+                  Forgot password?
+                </Link>
+              </div>
+            </Field>
+
+            <Field>
+              <label className="flex items-center gap-3">
+                <Checkbox checked={remember} onCheckedChange={(v) => setRemember(v === true)} />
+                <span className="text-sm font-medium text-foreground">Remember me</span>
+              </label>
+            </Field>
+
+            <Button
+              type="submit"
+              className="w-1/2 mx-auto mt-8 h-12 text-sm font-medium rounded-full bg-black text-white hover:bg-black/90"
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? "Signing in…" : "Sign in"}
+            </Button>
+
+          </FieldGroup>
+        </form>
+
+        <div id="form-errors" className="sr-only" aria-live="polite">
+          {Object.values(form.formState.errors).length > 0 && "There are errors in the form."}
+        </div>
+
+        <div className="my-8 flex items-center gap-4">
+          <div className="flex-1 h-px bg-border" />
+          <span className="text-sm text-muted-foreground font-medium">Or continue with</span>
+          <div className="flex-1 h-px bg-border" />
+        </div>
+
+        <Button
+          type="button"
+          className="w-full h-11 text-base font-medium inline-flex items-center justify-center gap-3 bg-black text-white border-0 hover:opacity-90"
+          onClick={() => {
+            alert('Google OAuth flow placeholder')
+          }}
+          aria-label="Continue with Google"
+        >
+          <GoogleIcon />
+          Continue with Google
+        </Button>
+
+        <div className="mt-12 text-center">
+          <p className="text-sm text-muted-foreground">
+            Don&apos;t have an account? <Link href="#" className="font-semibold text-primary hover:text-primary/80 transition-colors">Create an account</Link>
+          </p>
+        </div>
+      </main>
+    </div>
+  )
+}
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation"
+
+export default function Home() {
+  redirect("/dashboard")
+}