58 lines
2.9 KiB
JavaScript
58 lines
2.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { LayoutDashboard, MapPin, Users, TrendingUp, DollarSign, Wallet, Box, Grid, Receipt, BarChart2 } from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ icon: LayoutDashboard, label: 'Dashboard', path: '/owner/dashboard' },
|
|
{ icon: MapPin, label: 'Branches', path: '/owner/branches' },
|
|
{ icon: Users, label: 'Staff', path: '/owner/staff' },
|
|
{ icon: TrendingUp, label: 'Investors', path: '/owner/investors' },
|
|
{ icon: DollarSign, label: 'Collections', path: '/owner/collections' }, // Changed label and added path
|
|
{ icon: Box, label: 'Inventory', path: '/owner/inventory' }, // Added path
|
|
{ icon: Grid, label: 'Masters', path: '/owner/masters' }, // Updated icon and label
|
|
{ icon: Wallet, label: 'Accounts', path: '/owner/accounts' }, // Moved and updated
|
|
{icon: Receipt, label: 'Expenses', path: '/owner/expenses' }, // New item
|
|
{ icon: DollarSign, label: 'POS / Billing', path: '/owner/pos' }, // Added POS
|
|
{ icon: BarChart2, label: 'Reports', path: '/owner/reports' }, // Added path
|
|
];
|
|
|
|
const receptionistNavItems = [
|
|
{ icon: LayoutDashboard, label: 'Dashboard', path: '/receptionist/dashboard' },
|
|
{ icon: DollarSign, label: 'POS / Billing', path: '/receptionist/pos' },
|
|
{ icon: Wallet, label: 'Collections', path: '/receptionist/collections' },
|
|
{ icon: Receipt, label: 'Expenses', path: '/receptionist/expenses' },
|
|
{ icon: Box, label: 'Inventory', path: '/receptionist/inventory' },
|
|
{ icon: Users, label: 'Staff Info', path: '/receptionist/staff' },
|
|
{ icon: BarChart2, label: 'Reports', path: '/receptionist/reports' },
|
|
];
|
|
|
|
export default function SubHeader({ role: propRole }) {
|
|
const currentPath = window.location.pathname;
|
|
const role = propRole?.toLowerCase();
|
|
|
|
if (!role) return null;
|
|
|
|
const items = role === 'receptionist' ? receptionistNavItems : (role === 'owner' ? navItems : []);
|
|
|
|
return (
|
|
<div className="bg-white px-8 border-b border-gray-100 flex items-center gap-8 overflow-x-auto no-scrollbar">
|
|
{items.map((item, index) => {
|
|
const isActive = item.path && (currentPath === item.path || currentPath.startsWith(`${item.path}/`));
|
|
return (
|
|
<button
|
|
key={index}
|
|
onClick={() => item.path && (window.location.href = item.path)}
|
|
className={`flex items-center gap-2 py-4 border-b-2 transition-all whitespace-nowrap ${
|
|
isActive
|
|
? 'border-red-500 text-red-500 font-semibold'
|
|
: 'border-transparent text-gray-500 hover:text-gray-900 font-medium'
|
|
}`}
|
|
>
|
|
<item.icon size={18} />
|
|
<span className="text-sm">{item.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|