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,189 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  ChevronRight,
+  HelpCircle,
+  LayoutGrid,
+  Menu,
+  Package,
+  Settings,
+  ShoppingCart,
+  X,
+  type LucideIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const navItems: { title: string; href: string; icon: LucideIcon; chevron?: boolean }[] = [
+  { title: "Dashboard", href: "/dashboard", icon: LayoutGrid },
+  { title: "Products", href: "/dashboard/products", icon: Package, chevron: true },
+  { title: "Orders", href: "/dashboard/orders", icon: ShoppingCart, chevron: true },
+  { title: "Settings", href: "/dashboard/settings", icon: Settings, chevron: true },
+  { title: "Help", href: "/dashboard/help", icon: HelpCircle },
+]
+
+function SidebarContent({
+  collapsed,
+  onCollapse,
+  onClose,
+  pathname,
+  isMobile,
+}: {
+  collapsed: boolean
+  onCollapse: () => void
+  onClose?: () => void
+  pathname: string
+  isMobile: boolean
+}) {
+  return (
+    <nav
+      className={cn(
+        "flex h-full flex-col rounded-3xl bg-white p-3 shadow-sm ring-1 ring-black/5 transition-[width] duration-200",
+        !isMobile && (collapsed ? "w-20" : "w-64")
+      )}
+    >
+      {/* Header */}
+      <div
+        className={cn(
+          "mb-10 flex items-center gap-2.5 px-4 py-3",
+          !isMobile && collapsed ? "flex-col-reverse justify-center gap-3 px-0" : "justify-between"
+        )}
+      >
+        <Link href="/dashboard" className="flex items-center gap-2.5" onClick={onClose}>
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-xl bg-indigo-50">
+            <svg viewBox="0 0 48 32" className="h-3.5 w-5 fill-indigo-600">
+              <path d="M24 16c-3-8-11-12-16-8s-3 14 6 14c5 0 8.5-2.5 10-6 1.5 3.5 5 6 10 6 9 0 11-10 6-14s-13 0-16 8Z" />
+            </svg>
+          </div>
+          {(!collapsed || isMobile) && (
+            <span className="text-lg font-bold tracking-tight text-slate-900">Hexa ERP</span>
+          )}
+        </Link>
+
+        <button
+          type="button"
+          onClick={isMobile ? onClose : onCollapse}
+          aria-label={isMobile ? "Close menu" : collapsed ? "Expand sidebar" : "Minimize sidebar"}
+          className="flex size-8 shrink-0 items-center justify-center rounded-xl text-slate-400 hover:bg-slate-50 hover:text-slate-600"
+        >
+          {isMobile ? <X className="size-4" /> : <Menu className="size-4" />}
+        </button>
+      </div>
+
+      {/* Nav items */}
+      <ul className="flex flex-col gap-1">
+        {navItems.map((item) => {
+          const isActive =
+            item.href === "/dashboard" ? pathname === item.href : pathname.startsWith(item.href)
+
+          return (
+            <li key={item.href}>
+              <Link
+                href={item.href}
+                title={!isMobile && collapsed ? item.title : undefined}
+                onClick={onClose}
+                className={cn(
+                  "flex items-center gap-3 rounded-2xl px-4 py-3 text-base font-semibold transition-colors",
+                  !isMobile && collapsed && "justify-center px-0",
+                  isActive
+                    ? "bg-indigo-50 text-indigo-600"
+                    : "text-slate-700 hover:bg-slate-50"
+                )}
+              >
+                <item.icon
+                  className={cn("size-5 shrink-0", isActive ? "text-indigo-600" : "text-slate-400")}
+                />
+                {(!collapsed || isMobile) && (
+                  <>
+                    <span className="flex-1">{item.title}</span>
+                    {item.chevron && !isActive && (
+                      <ChevronRight className="size-4 shrink-0 text-slate-300" />
+                    )}
+                  </>
+                )}
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+
+      <div className="mt-auto flex items-center justify-center pt-6">
+        <div className="flex size-12 items-center justify-center rounded-2xl bg-slate-50 ring-1 ring-black/5">
+          <svg viewBox="0 0 48 32" className="h-4 w-6 fill-slate-400">
+            <path d="M24 16c-3-8-11-12-16-8s-3 14 6 14c5 0 8.5-2.5 10-6 1.5 3.5 5 6 10 6 9 0 11-10 6-14s-13 0-16 8Z" />
+          </svg>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export function AppSidebar() {
+  const pathname = usePathname() || "/"
+  const [collapsed, setCollapsed] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    const timeout = setTimeout(() => setMobileOpen(false), 0)
+    return () => clearTimeout(timeout)
+  }, [pathname])
+
+  // Prevent body scroll when mobile menu is open
+  useEffect(() => {
+    document.body.style.overflow = mobileOpen ? "hidden" : ""
+    return () => { document.body.style.overflow = "" }
+  }, [mobileOpen])
+
+  return (
+    <>
+      {/* ── Desktop sidebar ─────────────────────────────── */}
+      <div className="hidden lg:flex">
+        <SidebarContent
+          collapsed={collapsed}
+          onCollapse={() => setCollapsed((v) => !v)}
+          pathname={pathname}
+          isMobile={false}
+        />
+      </div>
+
+      {/* ── Mobile hamburger trigger ─────────────────────── */}
+      <button
+        type="button"
+        onClick={() => setMobileOpen(true)}
+        aria-label="Open menu"
+        className="fixed top-5 left-5 z-40 flex size-10 items-center justify-center rounded-2xl bg-white shadow-sm ring-1 ring-black/5 text-slate-600 hover:bg-slate-50 lg:hidden"
+      >
+        <Menu className="size-5" />
+      </button>
+
+      {/* ── Mobile overlay backdrop ──────────────────────── */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/30 backdrop-blur-xs lg:hidden"
+          onClick={() => setMobileOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* ── Mobile drawer ────────────────────────────────── */}
+      <div
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 w-72 p-3 transition-transform duration-200 lg:hidden",
+          mobileOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        <SidebarContent
+          collapsed={false}
+          onCollapse={() => {}}
+          onClose={() => setMobileOpen(false)}
+          pathname={pathname}
+          isMobile={true}
+        />
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils"
+
+export function Footer({ className }: { className?: string }) {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer
+      className={cn(
+        "w-full rounded-3xl bg-white shadow-sm ring-1 ring-black/5",
+        className
+      )}
+    >
+      <div className="flex flex-col items-center gap-3 p-5">
+        {/* Logo + name */}
+        <div className="flex items-center gap-2">
+          <div className="flex size-7 items-center justify-center rounded-lg bg-indigo-600">
+            <span className="text-xs font-bold text-white">H</span>
+          </div>
+          <span className="text-sm font-bold text-slate-900">HexDive ERP</span>
+        </div>
+
+        {/* Copyright */}
+        <p className="text-xs text-slate-400">
+          © {year} HexDive ERP. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,203 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname, useRouter } from "next/navigation"
+import { ArrowLeft, Bell, LogOut, Settings, User } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+
+function titleFromPath(pathname: string) {
+  const segment = pathname.split("/").filter(Boolean).pop() ?? "dashboard"
+  return segment.charAt(0).toUpperCase() + segment.slice(1)
+}
+
+interface Notification {
+  id: string
+  title: string
+  description: string
+  time: string
+  unread: boolean
+}
+
+const initialNotifications: Notification[] = [
+  {
+    id: "1",
+    title: "New order received",
+    description: "Order #3210 placed by John Martinez",
+    time: "2m ago",
+    unread: true,
+  },
+  {
+    id: "2",
+    title: "Low stock alert",
+    description: "SKU-2291 has dropped below its reorder threshold",
+    time: "1h ago",
+    unread: true,
+  },
+  {
+    id: "3",
+    title: "Payment failed",
+    description: "Order #3207 payment was declined",
+    time: "3h ago",
+    unread: false,
+  },
+  {
+    id: "4",
+    title: "New customer",
+    description: "Grace Kim just created an account",
+    time: "1d ago",
+    unread: false,
+  },
+]
+
+export function Header() {
+  const pathname = usePathname() || "/"
+  const router = useRouter()
+  const title = titleFromPath(pathname)
+  const showBackButton = pathname !== "/dashboard"
+  const [notifications, setNotifications] = useState(initialNotifications)
+  const unreadCount = notifications.filter((n) => n.unread).length
+
+  const markAllAsRead = () =>
+    setNotifications((prev) => prev.map((n) => ({ ...n, unread: false })))
+
+  return (
+    <header className="mb-6 flex items-center justify-between gap-2 rounded-3xl bg-white py-4 pr-4 pl-14 shadow-sm ring-1 ring-black/5 lg:gap-4 lg:p-4">
+      <div className="flex items-center gap-3">
+        {showBackButton && (
+          <button
+            type="button"
+            onClick={() => router.back()}
+            aria-label="Go back"
+            className="flex size-9 shrink-0 items-center justify-center rounded-full text-slate-500 hover:bg-slate-50 hover:text-slate-700"
+          >
+            <ArrowLeft className="size-5" />
+          </button>
+        )}
+        <h1 className="text-base font-bold tracking-tight text-slate-900 sm:text-xl">{title}</h1>
+      </div>
+
+      <div className="flex items-center gap-2 sm:gap-3">
+        <Popover>
+          <PopoverTrigger
+            render={
+              <button
+                type="button"
+                aria-label="Notifications"
+                className="relative flex size-10 shrink-0 items-center justify-center rounded-full text-slate-500 hover:bg-slate-50 hover:text-slate-700"
+              />
+            }
+          >
+            <Bell className="size-5" />
+            {unreadCount > 0 && (
+              <Badge className="absolute top-1.5 right-1.5 size-2 rounded-full bg-indigo-600 p-0" />
+            )}
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="w-[calc(100vw-2rem)] max-w-sm sm:w-96"
+          >
+            <div className="flex items-center justify-between border-b border-black/5 px-4 py-3">
+              <p className="text-sm font-semibold text-slate-900">Notifications</p>
+              {unreadCount > 0 && (
+                <button
+                  type="button"
+                  onClick={markAllAsRead}
+                  className="text-xs font-medium text-indigo-600 hover:underline"
+                >
+                  Mark all as read
+                </button>
+              )}
+            </div>
+
+            <div className="max-h-80 overflow-y-auto">
+              {notifications.length === 0 ? (
+                <p className="p-6 text-center text-sm text-muted-foreground">
+                  You&apos;re all caught up.
+                </p>
+              ) : (
+                notifications.map((notification) => (
+                  <div
+                    key={notification.id}
+                    className={cn(
+                      "flex gap-3 border-b border-black/5 px-4 py-3 last:border-0",
+                      notification.unread && "bg-indigo-50/50"
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        "mt-1.5 size-2 shrink-0 rounded-full",
+                        notification.unread ? "bg-indigo-600" : "bg-transparent"
+                      )}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-medium text-slate-900">{notification.title}</p>
+                      <p className="truncate text-sm text-muted-foreground">
+                        {notification.description}
+                      </p>
+                      <p className="mt-1 text-xs text-slate-400">{notification.time}</p>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger className="flex items-center gap-2 rounded-full py-1 pr-2 pl-1 outline-none hover:bg-slate-50">
+            <Avatar>
+              <AvatarFallback className="bg-indigo-50 font-semibold text-indigo-600">
+                JM
+              </AvatarFallback>
+            </Avatar>
+            <span className="hidden text-sm font-semibold text-slate-700 sm:block">
+              John Martinez
+            </span>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-80 p-2">
+            <div className="px-2 py-2.5">
+              <p className="text-base font-semibold text-slate-900">John Martinez</p>
+              <p className="text-sm font-normal text-muted-foreground">john52martinez@gmail.com</p>
+            </div>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              render={<Link href="/dashboard/profile" />}
+              className="gap-3 px-3 py-2.5 text-base [&_svg:not([class*='size-'])]:size-5"
+            >
+              <User />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              render={<Link href="/dashboard/settings" />}
+              className="gap-3 px-3 py-2.5 text-base [&_svg:not([class*='size-'])]:size-5"
+            >
+              <Settings />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              variant="destructive"
+              render={<Link href="/login" />}
+              className="gap-3 px-3 py-2.5 text-base [&_svg:not([class*='size-'])]:size-5"
+            >
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+}