df53130861
- Workforce: Employees register, per-employee dashboards, Attendance table - Plant Clock: scan-only clock, bottom tab bar (Employees / Oil & Diesel / Job cards) - Oil & Diesel stock: diesel tank (650 L, opening 589 L), level overwrite dialog, QR on each card, book-out screen with searchable vehicle picker, filterable "Booked out" table (today/week/month/all/range) Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
26 lines
1.3 KiB
TypeScript
26 lines
1.3 KiB
TypeScript
'use client';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { ClipboardList, Droplets, Users } from 'lucide-react';
|
|
|
|
const TABS = [
|
|
{ href: '/clock', label: 'Employees', Icon: Users },
|
|
{ href: '/clock/stock', label: 'Oil & Diesel', Icon: Droplets },
|
|
{ href: '/clock/job-cards', label: 'Job cards', Icon: ClipboardList },
|
|
];
|
|
|
|
/** Mobile-app style tab bar. Hidden on the sign-in / password screens. */
|
|
export function ClockBottomNav() {
|
|
const path = usePathname();
|
|
if (path.startsWith('/clock/login') || path.startsWith('/clock/change-password')) return null;
|
|
return <nav aria-label="Plant app" className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-surface pb-[env(safe-area-inset-bottom)]">
|
|
<ul className="mx-auto max-w-3xl grid grid-cols-3">
|
|
{TABS.map(({ href, label, Icon }) => {
|
|
const active = href === '/clock' ? path === '/clock' : path.startsWith(href);
|
|
return <li key={href}><Link href={href} aria-current={active ? 'page' : undefined}
|
|
className={`flex min-h-[56px] flex-col items-center justify-center gap-0.5 text-xs font-medium ${active ? 'text-[#30638E]' : 'text-text-muted'}`}>
|
|
<Icon size={22} strokeWidth={active ? 2.4 : 1.8}/>{label}</Link></li>;
|
|
})}
|
|
</ul>
|
|
</nav>;
|
|
}
|