Breadcrumbs.tsx

Go to the documentation of this file.

"use client";
 
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Icon } from '@/contexts/IconContext';
 
// Navigation-based breadcrumb mapping
const breadcrumbMap: Record<string, { section: string; subsection?: string; page: string }> = {
  // Dashboard
  '/pages/home': { section: 'Dashboard', page: 'Home' },
  '/pages/start-here': { section: 'Dashboard', page: 'Start Here' },
  '/advisor': { section: 'Dashboard', page: 'Advisor' },
  
  // Point of Sale
  '/sales': { section: 'Point of Sale', page: 'Sales' },
  '/pages/invoices': { section: 'Point of Sale', page: 'Invoices' },
  '/pages/sales/picking': { section: 'Point of Sale', page: 'Sales Picking' },
  '/pages/sales/end-of-day': { section: 'Point of Sale', page: 'End of Day' },
  '/pages/sales/display': { section: 'Point of Sale', page: 'Customer Display' },
  '/pages/reports/pos-sales-report': { section: 'Point of Sale', page: 'Sales Report' },
  
  // Products
  '/pages/products': { section: 'Products', page: 'Products' },
  '/purchase-orders': { section: 'Products', page: 'Purchase Orders' },
  '/pages/products/price-changes': { section: 'Products', page: 'Price Changes' },
  '/pages/products/signs-labels': { section: 'Products', page: 'Signs and Labels' },
  '/pages/products/stocktake': { section: 'Products', page: 'Stocktake' },
  '/pages/products/stock-levels': { section: 'Products', page: 'Stock Levels' },
  
  // Customers
  '/pages/customers': { section: 'Customers', page: 'Customers' },
  '/pages/customers/loyalty': { section: 'Customers', page: 'Loyalty' },
  '/pages/customers/customer-accounts': { section: 'Customers', page: 'Customer Accounts' },
  
  // Suppliers
  '/pages/suppliers': { section: 'Suppliers', page: 'Suppliers' },
  
  // Reports
  '/pages/reports': { section: 'Reports', page: 'Reports Library' },
  '/pages/reports/analytics': { section: 'Reports', page: 'Analytics Dashboard' },
  '/pages/reports/franchise-report': { section: 'Reports', page: 'Franchise Reports' },
  '/pages/reports/sales-reports': { section: 'Reports', page: 'Sales Reports' },
  
  // Marketing
  '/marketing': { section: 'Marketing', page: 'Marketing Programs' },
  '/prepay': { section: 'Marketing', page: 'Prepay' },
  
  // Operations
  '/pages/settings/operations/sale-processing': { section: 'Operations', page: 'Sale Processing' },
  '/pages/settings/operations/pricing': { section: 'Operations', page: 'Pricing' },
  '/pages/settings/operations/stock-control': { section: 'Operations', page: 'Stock Control' },
  '/pages/settings/operations/accounts': { section: 'Operations', page: 'Customer Accounts' },
  '/pages/settings/operations/loyalty': { section: 'Operations', page: 'Loyalty Programs' },
  '/pages/settings/operations/gift-cards': { section: 'Operations', page: 'Gift Cards' },
  '/pages/settings/operations/end-of-day': { section: 'Operations', page: 'End of Day' },
  
  // Settings
  '/pages/settings': { section: 'Settings', page: 'Settings' },
  '/pages/settings/departments': { section: 'Settings', page: 'Departments' },
  '/pages/settings/printers-cartridges': { section: 'Settings', page: 'Printers & Cartridges' },
  '/pages/settings/staff': { section: 'Settings', page: 'Staff' },
  '/pages/settings/stores': { section: 'Settings', page: 'Stores' },
  '/pages/settings/stores/lanes': { section: 'Settings', subsection: 'Stores', page: 'Lanes' },
  '/pages/settings/stores/topology': { section: 'Settings', subsection: 'Stores', page: 'Network Topology' },
  '/pages/settings/payment-types': { section: 'Settings', page: 'Payment Types' },
  '/pages/settings/your-details': { section: 'Settings', page: 'Your Details' },
  '/pages/settings/media/photos': { section: 'Settings', subsection: 'Media', page: 'Photo Management' },
  '/pages/settings/media/cloud-storage': { section: 'Settings', subsection: 'Media', page: 'Cloud Storage' },
  '/pages/settings/media/receipt-formats': { section: 'Settings', subsection: 'Media', page: 'Receipt Formats' },
  
  // Devices
  '/pages/settings/devices/barcode-scanners': { section: 'Devices', page: 'Barcode Scanners' },
  '/pages/settings/devices/receipt-printers': { section: 'Devices', page: 'Receipt Printers' },
  '/pages/settings/devices/cash-drawers': { section: 'Devices', page: 'Cash Drawers' },
  '/pages/settings/devices/label-formats': { section: 'Devices', page: 'Label Formats' },
  '/pages/settings/devices/eftpos': { section: 'Devices', page: 'EFTPOS Terminals' },
  '/pages/settings/devices/cameras': { section: 'Devices', page: 'Cameras' },
  '/pages/settings/devices/customer-displays': { section: 'Devices', page: 'Customer Displays' },
  '/pages/settings/devices/scales': { section: 'Devices', page: 'Scales' },
  
  // Technical
  '/pages/technical/security': { section: 'Technical', page: 'Security Settings' },
  '/pages/technical/firewall': { section: 'Technical', page: 'Firewall' },
  '/pages/technical/gdpr': { section: 'Technical', page: 'GDPR Compliance' },
  '/pages/technical/pci': { section: 'Technical', page: 'PCI Requirements' },
  '/pages/technical/network-topology': { section: 'Technical', page: 'Network Topology' },
  '/pages/technical/database': { section: 'Technical', page: 'Database' },
  '/pages/technical/api-settings': { section: 'Technical', page: 'API Settings' },
  '/pages/technical/analytics': { section: 'Technical', page: 'Analytics' },
  '/pages/technical/internet-services': { section: 'Technical', page: 'Internet Services' },
  '/pages/technical/code-updates': { section: 'Technical', page: 'Code Updates' },
  '/pages/technical/support-diagnostics': { section: 'Technical', page: 'Support & Diagnostics' },
  '/pages/technical/documentation': { section: 'Technical', page: 'Documentation' },
  '/api': { section: 'Technical', page: 'API' },
  '/audit': { section: 'Technical', page: 'Audit Logs' },
  
  // Account
  '/pages/profile': { section: 'Account', page: 'My Profile' },
};
 
export default function Breadcrumbs() {
  const pathname = usePathname();
  
  // Don't show breadcrumbs on login, landing, or root pages
  if (!pathname || pathname === '/' || pathname === '/login' || pathname === '/pages/login' || pathname === '/pages/landing') {
    return null;
  }
 
  // Get breadcrumb structure from mapping
  const breadcrumbData = breadcrumbMap[pathname];
  
  if (!breadcrumbData) {
    // Fallback: use simple path-based breadcrumbs
    const segments = pathname.split('/').filter(segment => segment);
    const breadcrumbs = segments.map((segment, index) => {
      const path = '/' + segments.slice(0, index + 1).join('/');
      const label = segment
        .split('-')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
      return { path, label };
    });
    
    breadcrumbs.unshift({ path: '/pages/home', label: 'Dashboard' });
    
    return (
      <nav className="flex items-center gap-2 px-6 py-3 text-sm text-muted bg-surface border-b border-border">
        {breadcrumbs.map((crumb, index) => (
          <div key={crumb.path} className="flex items-center gap-2">
            {index > 0 && <Icon name="chevron_right" size={16} className="text-muted/50" />}
            {index === breadcrumbs.length - 1 ? (
              <span className="font-medium text-text">{crumb.label}</span>
            ) : (
              <Link href={crumb.path} className="hover:text-brand transition-colors">
                {crumb.label}
              </Link>
            )}
          </div>
        ))}
      </nav>
    );
  }
 
  // Build breadcrumbs from navigation structure
  const breadcrumbs: Array<{ label: string; path?: string }> = [];
  
  // Add section (not clickable)
  breadcrumbs.push({ label: breadcrumbData.section });
  
  // Add subsection if exists (not clickable)
  if (breadcrumbData.subsection) {
    breadcrumbs.push({ label: breadcrumbData.subsection });
  }
  
  // Add current page (not clickable, shown in bold)
  breadcrumbs.push({ label: breadcrumbData.page });
 
  return (
    <nav className="flex items-center gap-2 px-6 py-3 text-sm text-muted bg-surface border-b border-border">
      {breadcrumbs.map((crumb, index) => (
        <div key={`${crumb.label}-${index}`} className="flex items-center gap-2">
          {index > 0 && <Icon name="chevron_right" size={16} className="text-muted/50" />}
          {index === breadcrumbs.length - 1 ? (
            <span className="font-medium text-text">{crumb.label}</span>
          ) : (
            <span className="text-muted">{crumb.label}</span>
          )}
        </div>
      ))}
    </nav>
  );
}