icons

client/src/components/AppShell.tsx

@@ -1,22 +1,161 @@
 import { NavLink, Outlet } from "react-router-dom";
+import type { ReactNode } from "react";
 
 import { useAuth } from "../auth/AuthProvider";
 import { ThemeToggle } from "./ThemeToggle";
 
 const links = [
-  { to: "/", label: "Dashboard" },
-  { to: "/settings/company", label: "Company Settings" },
-  { to: "/crm/customers", label: "Customers" },
-  { to: "/crm/vendors", label: "Vendors" },
-  { to: "/inventory/items", label: "Inventory" },
-  { to: "/inventory/warehouses", label: "Warehouses" },
-  { to: "/sales/quotes", label: "Quotes" },
-  { to: "/sales/orders", label: "Sales Orders" },
-  { to: "/purchasing/orders", label: "Purchase Orders" },
-  { to: "/shipping/shipments", label: "Shipments" },
-  { to: "/planning/gantt", label: "Gantt" },
+  { to: "/", label: "Dashboard", icon: <DashboardIcon /> },
+  { to: "/settings/company", label: "Company Settings", icon: <CompanyIcon /> },
+  { to: "/crm/customers", label: "Customers", icon: <CustomersIcon /> },
+  { to: "/crm/vendors", label: "Vendors", icon: <VendorsIcon /> },
+  { to: "/inventory/items", label: "Inventory", icon: <InventoryIcon /> },
+  { to: "/inventory/warehouses", label: "Warehouses", icon: <WarehouseIcon /> },
+  { to: "/sales/quotes", label: "Quotes", icon: <QuoteIcon /> },
+  { to: "/sales/orders", label: "Sales Orders", icon: <SalesOrderIcon /> },
+  { to: "/purchasing/orders", label: "Purchase Orders", icon: <PurchaseOrderIcon /> },
+  { to: "/shipping/shipments", label: "Shipments", icon: <ShipmentIcon /> },
+  { to: "/planning/gantt", label: "Gantt", icon: <GanttIcon /> },
 ];
 
+function NavIcon({ children }: { children: ReactNode }) {
+  return (
+    <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+        {children}
+      </svg>
+    </span>
+  );
+}
+
+function DashboardIcon() {
+  return (
+    <NavIcon>
+      <path d="M4 4h7v7H4z" />
+      <path d="M13 4h7v4h-7z" />
+      <path d="M13 10h7v10h-7z" />
+      <path d="M4 13h7v7H4z" />
+    </NavIcon>
+  );
+}
+
+function CompanyIcon() {
+  return (
+    <NavIcon>
+      <path d="M4 20h16" />
+      <path d="M6 20V8l6-4 6 4v12" />
+      <path d="M9 12h.01" />
+      <path d="M15 12h.01" />
+      <path d="M12 20v-4" />
+    </NavIcon>
+  );
+}
+
+function CustomersIcon() {
+  return (
+    <NavIcon>
+      <path d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+      <path d="M16 13a2.5 2.5 0 1 0 0-5" />
+      <path d="M3.5 19a4.5 4.5 0 0 1 9 0" />
+      <path d="M14 18a3.5 3.5 0 0 1 6 0" />
+    </NavIcon>
+  );
+}
+
+function VendorsIcon() {
+  return (
+    <NavIcon>
+      <path d="M4 20h16" />
+      <path d="M6 20V7h12v13" />
+      <path d="M9 10h.01" />
+      <path d="M12 10h.01" />
+      <path d="M15 10h.01" />
+      <path d="M9 14h.01" />
+      <path d="M12 14h.01" />
+      <path d="M15 14h.01" />
+    </NavIcon>
+  );
+}
+
+function InventoryIcon() {
+  return (
+    <NavIcon>
+      <path d="M4 8l8-4 8 4-8 4-8-4Z" />
+      <path d="M4 8v8l8 4 8-4V8" />
+      <path d="M12 12v8" />
+    </NavIcon>
+  );
+}
+
+function WarehouseIcon() {
+  return (
+    <NavIcon>
+      <path d="M3 10 12 4l9 6" />
+      <path d="M5 10v10h14V10" />
+      <path d="M9 20v-5h6v5" />
+    </NavIcon>
+  );
+}
+
+function QuoteIcon() {
+  return (
+    <NavIcon>
+      <path d="M7 4h8l4 4v12H7z" />
+      <path d="M15 4v4h4" />
+      <path d="M10 12h6" />
+      <path d="M10 16h4" />
+      <path d="M5 8H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8" />
+    </NavIcon>
+  );
+}
+
+function SalesOrderIcon() {
+  return (
+    <NavIcon>
+      <path d="M7 4h10l3 3v13H7z" />
+      <path d="M17 4v3h3" />
+      <path d="M10 11h7" />
+      <path d="M10 15h7" />
+      <path d="M10 19h5" />
+    </NavIcon>
+  );
+}
+
+function PurchaseOrderIcon() {
+  return (
+    <NavIcon>
+      <path d="M7 4h10l3 3v13H7z" />
+      <path d="M17 4v3h3" />
+      <path d="M10 11h7" />
+      <path d="M10 15h4" />
+      <path d="M15.5 17.5 18 20l3-4" />
+    </NavIcon>
+  );
+}
+
+function ShipmentIcon() {
+  return (
+    <NavIcon>
+      <path d="M3 8h11v8H3z" />
+      <path d="M14 11h3l3 3v2h-6" />
+      <path d="M7 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+      <path d="M17 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+    </NavIcon>
+  );
+}
+
+function GanttIcon() {
+  return (
+    <NavIcon>
+      <path d="M4 6h5" />
+      <path d="M4 12h16" />
+      <path d="M4 18h10" />
+      <rect x="10" y="4" width="7" height="4" rx="1.5" />
+      <rect x="7" y="16" width="9" height="4" rx="1.5" />
+    </NavIcon>
+  );
+}
+
 export function AppShell() {
   const { user, logout } = useAuth();
 
@@ -35,11 +174,12 @@ export function AppShell() {
                 key={link.to}
                 to={link.to}
                 className={({ isActive }) =>
-                  `block rounded-2xl px-2 py-2 text-sm font-semibold transition ${
+                  `flex items-center gap-2 rounded-2xl px-2 py-2 text-sm font-semibold transition ${
                     isActive ? "bg-brand text-white" : "text-text hover:bg-page"
                   }`
                 }
               >
+                {link.icon}
                 {link.label}
               </NavLink>
             ))}
@@ -70,11 +210,12 @@ export function AppShell() {
                 key={link.to}
                 to={link.to}
                 className={({ isActive }) =>
-                  `whitespace-nowrap rounded-2xl px-4 py-2 text-sm font-semibold transition ${
+                  `inline-flex whitespace-nowrap items-center gap-2 rounded-2xl px-4 py-2 text-sm font-semibold transition ${
                     isActive ? "bg-brand text-white" : "bg-page/70 text-text"
                   }`
                 }
               >
+                {link.icon}
                 {link.label}
               </NavLink>
             ))}