lorentz
9658640c04
The soft reset to 77073ba inadvertently staged deletions of all phase 2
and 3 artifacts. This commit restores them from their source commits so
subsequent task commits build on the complete prior-phase foundation:
- components/mobile/{BottomNav,HeaderBar,KpiCardMobile,MoreDrawer,NeedsAttentionStrip,WorkerStatusRow}
- app/mobile/layout.tsx, dashboard/page.tsx, analyzer/page.tsx
- app/api/mobile/dashboard/route.ts
- All .planning/** files from phases 01-04
- CLAUDE.md, app/layout.tsx, app/styles/brand.css, public/manifest.json
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
/* BottomNav — phase 02 (SHELL-06, NAV-01..03, DRAWER-01).
|
|
*
|
|
* Fixed bottom bar with five cells:
|
|
* - Dashboard (LayoutDashboard) -> /mobile/dashboard
|
|
* - Tickets (Ticket) -> /mobile/tickets
|
|
* - Finance (DollarSign) -> /mobile/finance
|
|
* - Analyzer (Sparkles) -> /mobile/analyzer
|
|
* - More (Menu) -> opens the MoreDrawer (parent state)
|
|
*
|
|
* Active tab detected via pathname.startsWith(href). Active = text-primary,
|
|
* inactive = text-muted-foreground. */
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
LayoutDashboard,
|
|
Ticket,
|
|
DollarSign,
|
|
Sparkles,
|
|
Menu,
|
|
} from 'lucide-react';
|
|
|
|
const TABS = [
|
|
{ href: '/mobile/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ href: '/mobile/tickets', label: 'Tickets', icon: Ticket },
|
|
{ href: '/mobile/finance', label: 'Finance', icon: DollarSign },
|
|
{ href: '/mobile/analyzer', label: 'Analyzer', icon: Sparkles },
|
|
] as const;
|
|
|
|
interface BottomNavProps {
|
|
onMoreClick: () => void;
|
|
}
|
|
|
|
export function BottomNav({ onMoreClick }: BottomNavProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav
|
|
aria-label="Primary"
|
|
className="fixed bottom-0 left-0 right-0 z-30 border-t bg-background pb-safe"
|
|
>
|
|
<div className="max-w-lg mx-auto flex h-16">
|
|
{TABS.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname?.startsWith(href) ?? false;
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
aria-current={active ? 'page' : undefined}
|
|
className={`flex-1 flex flex-col items-center justify-center gap-0.5 text-[11px] transition-colors ${
|
|
active
|
|
? 'text-primary'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
<Icon className="w-5 h-5" aria-hidden="true" />
|
|
<span>{label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
<button
|
|
type="button"
|
|
onClick={onMoreClick}
|
|
aria-label="Open menu"
|
|
className="flex-1 flex flex-col items-center justify-center gap-0.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<Menu className="w-5 h-5" aria-hidden="true" />
|
|
<span>More</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|