Navigation.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { defaultConfig } from "@/lib/config";
import { useStore } from "@/contexts/StoreContext";
import { Icon } from '@/contexts/IconContext';
 
interface DashboardItem {
  title: string;
  icon: string;
  path?: string;
  items?: { name: string; path: string; description?: string }[];
}
 
// Helper function to get Material Icon name for section
function getIconForSection(title: string): string {
  const iconMap: Record<string, string> = {
    'Point of Sale': 'point_of_sale',
    'Account': 'account_circle',
    'Dashboard': 'dashboard',
    'Products': 'inventory_2',
    'Customers': 'group',
    'Purchasing': 'shopping_bag',
    'Administration': 'admin_panel_settings',
    'Reports': 'assessment',
    'Analytics': 'analytics',
    'Marketing': 'campaign',
    'Tools': 'build',
    'System': 'settings',
    'Help': 'help'
  };
  return iconMap[title] || 'folder';
}
 
export default function Navigation() {
  const { storeName, session, logout } = useStore();
  const [apiKey, setApiKey] = useState<string | null>(null);
  const [config, setConfig] = useState(defaultConfig);
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({});
 
  // Determine if user is in management portal or retail store
  const isManagementPortal = session?.store?.type === 'management';
 
  useEffect(() => {
    const storedApiKey = sessionStorage.getItem("fieldpine_apikey");
    setApiKey(storedApiKey);
 
    const handler = () => setMobileOpen((v) => !v);
    window.addEventListener('toggle-sidebar', handler as EventListener);
    return () => window.removeEventListener('toggle-sidebar', handler as EventListener);
  }, []);
 
  // Simple POS menu for retail stores
  const storePosDashboard: DashboardItem[] = [
    {
      title: "Dashboard",
      icon: "D",
      items: [
        { name: "Home", path: "/pages/home", description: "Dashboard overview" }
      ]
    },
    {
      title: "Point of Sale",
      icon: "💰",
      items: [
        { name: "Sales", path: "/sales", description: "Process sales and returns" },
        { name: "Sales History", path: "/pages/invoices", description: "View customer sales and receipts" },
        { name: "Sales Report", path: "/pages/reports/pos-sales-report", description: "View today's sales" },
        { name: "Monthly Report", path: "/pages/reports/franchise-report", description: "Monthly sales summary" },
        { name: "Products", path: "/pages/products", description: "Edit products" },
        { name: "Stock Levels", path: "/pages/products/stock-levels", description: "Check inventory" }
      ]
    },
    {
      title: "Account",
      icon: "👤",
      items: [
        { name: "My Profile", path: "/pages/profile", description: "View profile" },
        { name: "Settings", path: "/pages/settings", description: "Store settings" }
      ]
    },
    {
      title: "Help",
      icon: "❓",
      items: [
        { name: "POS Help Center", path: "/pages/pos-help", description: "Store POS guide and FAQ" }
      ]
    }
  ];
 
  // Full admin menu for IIG management portal
  const managementDashboard: DashboardItem[] = [
    {
      title: "Dashboard",
      icon: "D",
      items: [
        { name: "Home", path: "/pages/home", description: "Overview" },
        { name: "Start Here", path: "/pages/start-here", description: "Training" },
        { name: "Advisor", path: "/advisor", description: "Insights" }
      ]
    },
    {
      title: "Point of Sale",
      icon: "POS",
      items: [
        { name: "Sales", path: "/sales", description: "Process sales and returns" },
        { name: "Invoices", path: "/pages/invoices", description: "Manage invoices" },
        { name: "Sales Picking", path: "/pages/sales/picking", description: "Pick & ship orders" },
        { name: "End of Day", path: "/pages/sales/end-of-day", description: "Closeout" },
        { name: "Sales Reports", path: "/pages/reports/sales-reports", description: "Analysis" }
      ]
    },
    {
      title: "Products",
      icon: "P",
      items: [
        { name: "Products", path: "/pages/products", description: "Catalog" },
        { name: "Purchase Orders", path: "/purchase-orders", description: "Product POs" },
        { name: "Price Changes", path: "/pages/products/price-changes", description: "Pending Price Changes" },
        { name: "Signs and Labels", path: "/pages/products/signs-labels", description: "Print" },
        { name: "Stocktake", path: "/pages/products/stocktake", description: "New, Existing, Archived" }
      ]
    },
    {
      title: "Customers",
      icon: "C",
      items: [
        { name: "Customers", path: "/pages/customers", description: "CRM" },
        { name: "Loyalty", path: "/pages/customers/loyalty", description: "Retention" },
        { name: "Customer Accounts", path: "/pages/customers/customer-accounts", description: "Customer Credit Management" }
      ]
    },
    {
      title: "Suppliers",
      icon: "S",
      items: [
        { name: "Suppliers", path: "/pages/suppliers", description: "Vendors" }
      ]
    },
    {
      title: "Reports",
      icon: "R",
      items: [
        { name: "Reports Library", path: "/pages/reports", description: "All business reports" },
        { name: "Analytics Dashboard", path: "/pages/reports/analytics", description: "Visual Analytics" },
        { name: "Franchise Reports", path: "/pages/reports/franchise-report", description: "Royalty Reports" },
        { name: "Sales Reports", path: "/pages/reports/sales-reports", description: "Analysis" }
      ]
    },
    {
      title: "Marketing",
      icon: "M",
      items: [
        { name: "Marketing Programs", path: "/marketing", description: "Campaigns" },
        { name: "Prepay", path: "/prepay", description: "Gift cards" }
      ]
    },
    {
      title: "Operations",
      icon: "O",
      items: [
        { name: "Sale Processing", path: "/pages/settings/operations/sale-processing", description: "Sale behavior" },
        { name: "Pricing", path: "/pages/settings/operations/pricing", description: "Price rules" },
        { name: "Stock Control", path: "/pages/settings/operations/stock-control", description: "Inventory" },
        { name: "Customer Accounts", path: "/pages/settings/operations/accounts", description: "Credit management" },
        { name: "Loyalty Programs", path: "/pages/settings/operations/loyalty", description: "Rewards" },
        { name: "Gift Cards", path: "/pages/settings/operations/gift-cards", description: "Prepay cards" },
        { name: "End of Day", path: "/pages/settings/operations/end-of-day", description: "Till closeout" }
      ]
    },
    {
      title: "Settings",
      icon: "S",
      items: [
        { name: "Departments", path: "/pages/settings/departments", description: "Department hierarchy" },
        { name: "Printers & Cartridges", path: "/pages/settings/printers-cartridges", description: "Printer compatibility" },
        { name: "Staff", path: "/pages/settings/staff", description: "Users" },
        { name: "Stores", path: "/pages/settings/stores", description: "Locations" },
        { name: "Lanes", path: "/pages/settings/stores/lanes", description: "POS lanes" },
        { name: "Payment Types", path: "/pages/settings/payment-types", description: "Accepted payment methods" },
        { name: "Your Details", path: "/pages/settings/your-details", description: "Company information" },
        { name: "Photo Management", path: "/pages/settings/media/photos", description: "Product and store photos" },
        { name: "Cloud Storage", path: "/pages/settings/media/cloud-storage", description: "Configure cloud destinations" },
        { name: "Receipt Formats", path: "/pages/settings/media/receipt-formats", description: "Customize receipt layouts" }
      ]
    },
    {
      title: "Devices",
      icon: "D",
      items: [
        { name: "Barcode Scanners", path: "/pages/settings/devices/barcode-scanners", description: "Scanner settings" },
        { name: "Receipt Printers", path: "/pages/settings/devices/receipt-printers", description: "Printer configuration" },
        { name: "Cash Drawers", path: "/pages/settings/devices/cash-drawers", description: "Cash drawer setup" },
        { name: "Label Formats", path: "/pages/settings/devices/label-formats", description: "Price labels and tags" },
        { name: "EFTPOS Terminals", path: "/pages/settings/devices/eftpos", description: "Payment terminals" },
        { name: "Cameras", path: "/pages/settings/devices/cameras", description: "Security and product photos" },
        { name: "Customer Displays", path: "/pages/settings/devices/customer-displays", description: "Pole displays and screens" },
        { name: "Scales", path: "/pages/settings/devices/scales", description: "Weighing products" }
      ]
    },
    {
      title: "Technical",
      icon: "T",
      items: [
        { name: "Security Settings", path: "/pages/technical/security", description: "Access controls and authentication" },
        { name: "Firewall", path: "/pages/technical/firewall", description: "Network security and traffic control" },
        { name: "GDPR Compliance", path: "/pages/technical/gdpr", description: "Data protection and privacy settings" },
        { name: "PCI Requirements", path: "/pages/technical/pci", description: "Payment card industry compliance" },
        { name: "Network Topology", path: "/pages/technical/network-topology", description: "View and manage network infrastructure" },
        { name: "Database", path: "/pages/technical/database", description: "Database configuration and maintenance" },
        { name: "API Settings", path: "/pages/technical/api-settings", description: "External API access and configuration" },
        { name: "Analytics", path: "/pages/technical/analytics", description: "Business intelligence and reporting" },
        { name: "Internet Services", path: "/pages/technical/internet-services", description: "Cloud services and external connections" },
        { name: "Code Updates", path: "/pages/technical/code-updates", description: "Software version management" },
        { name: "Support & Diagnostics", path: "/pages/technical/support-diagnostics", description: "Troubleshooting and system information" },
        { name: "Documentation", path: "/pages/technical/documentation", description: "Dev Guide" },
        { name: "API", path: "/api", description: "Dev" },
        { name: "Audit Logs", path: "/audit", description: "Staff & System Activity" }
      ]
    },
    {
      title: "Account",
      icon: "A",
      items: [
        { name: "My Profile", path: "/pages/profile", description: "View profile" },
        { name: "Settings", path: "/pages/settings", description: "Preferences and theme" }
      ]
    }
  ];
 
  // Determine which dashboard to show based on store type
  const currentDashboard = isManagementPortal ? managementDashboard : storePosDashboard;
 
  const toggleSection = (title: string) => {
    setExpandedSections((prev) => ({ ...prev, [title]: !prev[title] }));
  };
 
  const expandAll = () => {
    const allOpen = currentDashboard.reduce((acc, section) => {
      acc[section.title] = true;
      return acc;
    }, {} as Record<string, boolean>);
    setExpandedSections(allOpen);
  };
 
  const collapseAll = () => {
    setExpandedSections({});
  };
 
  // Hide navigation on landing and login pages
  if (pathname === "/" || pathname === "/login") {
    return null;
  }
  useEffect(() => {
    // close mobile nav when route changes
    setMobileOpen(false);
  }, [pathname]);
 
  return (
    <>
      {/* overlay for mobile when open */}
      {mobileOpen && <div className="fixed inset-0 bg-black/30 z-30 md:hidden" onClick={() => setMobileOpen(false)} aria-hidden="true" />}
 
      <aside className={`fixed md:relative left-0 top-0 h-screen md:h-screen w-[292px] flex-shrink-0 border-r border-border shadow-lg md:shadow-sm transform md:transform-none transition-transform duration-300 ease-in-out z-40 overflow-y-auto ${mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`} style={{ backgroundColor: 'var(--surface)' }}>
      <div className="p-4 border-b" style={{ borderColor: 'var(--border)' }}>
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-md bg-brand-2 text-brand flex items-center justify-center font-bold text-sm">
            <Icon name={isManagementPortal ? 'business' : 'store'} size={24} />
          </div>
          <div>
            <div className="text-sm font-extrabold">{storeName || session?.store?.name || 'EverydayPOS'}</div>
            <div className="text-xs text-muted capitalize">
              {isManagementPortal ? 'Management Portal' : 'Store POS'}
            </div>
          </div>
        </div>
        {apiKey && (
          <div className="text-xs text-brand mt-2">Connected ✓</div>
        )}
      </div>
      
      <nav className="p-4 space-y-2">
        {currentDashboard.map((section, index) => (
          <details key={index} open={expandedSections[section.title] || false} className="rounded-lg overflow-hidden">
            <summary 
              onClick={(e) => {
                e.preventDefault();
                toggleSection(section.title);
              }}
              className="cursor-pointer flex items-center p-2 text-text font-semibold hover:bg-surface-2 rounded-lg list-none transition"
              style={{ color: 'var(--text)' }}
            >
              <div className="w-7 h-7 rounded-md bg-brand-2 text-brand mr-3 flex items-center justify-center text-sm font-bold">
                <Icon name={getIconForSection(section.title)} size={20} />
              </div>
              <span>{section.title}</span>
              <svg className={`ml-auto w-4 h-4 transition-transform ${expandedSections[section.title] ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
              </svg>
            </summary>
            {section.items && (
              <div className="ml-4 mt-1 space-y-1 border-l border-border pl-3">
                {section.items.map((item, itemIndex) => (
                  <Link
                    key={itemIndex}
                    href={item.path}
                    aria-label={item.name}
                    aria-current={pathname === item.path ? 'page' : undefined}
                    className={`block p-2 text-sm rounded transition ${
                      pathname === item.path
                        ? "bg-surface-2 text-brand font-semibold border-l-4 border-brand pl-2"
                        : "text-muted hover:bg-surface-2 hover:text-brand"
                    }`}>
                    <div className="font-medium">{item.name}</div>
                    {item.description && (
                      <div className="text-xs text-muted">{item.description}</div>
                    )}
                  </Link>
                ))}
              </div>
            )}
          </details>
        ))}
      </nav>
 
      <div className="p-4 border-t space-y-3">
        {/* User Session Info */}
        {session && (
          <div className="bg-surface-2 rounded-lg p-3 mb-3">
            <div className="mb-2">
              <div className="text-sm font-semibold text-text">{session.user.name}</div>
              <div className="text-xs text-muted capitalize">{session.user.role}</div>
            </div>
            <button
              onClick={logout}
              className="w-full px-3 py-2 text-sm rounded bg-surface-2 text-danger hover:bg-danger/10 transition font-medium border border-danger"
              title="Logout"
            >
              Logout
            </button>
            {session.store && (
              <div className="mt-2 space-y-1">
                {/* Store Name */}
                <div className="flex items-center gap-2 text-xs">
                  <span>{session.store.type === 'management' ? '🏢' : '🏪'}</span>
                  <span className="font-medium text-text">{session.store.name}</span>
                </div>
                {/* Store Type Badge */}
                {session.store.type === 'management' ? (
                  <div className="inline-flex items-center px-2 py-1 bg-brand-2 text-brand text-xs font-medium rounded">
                    Management Portal
                  </div>
                ) : (
                  <div className="inline-flex items-center px-2 py-1 bg-surface-2 text-text text-xs font-medium rounded border border-border">
                    Retail Store
                  </div>
                )}
              </div>
            )}
          </div>
        )}
 
        <div className="flex gap-2">
          <button
            onClick={expandAll}
            className="flex-1 px-3 py-2 text-xs rounded border border-border bg-surface text-text hover:bg-surface-2 transition font-medium">
            Expand all
          </button>
          <button
            onClick={collapseAll}
            className="flex-1 px-3 py-2 text-xs rounded border border-border bg-surface text-text hover:bg-surface-2 transition font-medium">
            Collapse
          </button>
        </div>
      </div>
    </aside>
    </>
  );
}