Hardik
cfb16600d7
Adds a responsive mobile experience scoped to MANAGER and SUPERUSER roles: Layout: - Sidebar hidden on small screens (md: breakpoint) - New MobileHeader (logo + notification bell + sign out) visible on mobile - New MobileBottomNav (Approvals + Profile tabs) pinned to bottom on mobile - New DesktopRequired overlay shown to all other roles on small screens — a fixed full-screen message directing them to use a desktop browser Approvals queue: - Desktop: existing table layout (hidden md:block) - Mobile: tap-to-review card stack (md:hidden) — shows PO number, title, submitter, cost centre, amount, and a full-width Review button PO approval detail: - ManagerEditPoForm (direct field editing) hidden on mobile; still available on desktop (direct edits not required per spec) - ApprovalActions buttons stack full-width on mobile, row on sm+ - Paddings reduced on small screens throughout PO detail component: - Order Details and Vendor grids switch from grid-cols-2 → grid-cols-1 on small screens (sm:grid-cols-2 restores two columns at 640px+) - Section padding reduced on mobile (p-3 md:p-6, p-4 md:p-6) - Line items table already had overflow-x-auto — no change needed Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { CheckSquare, UserCircle } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const TABS = [
|
|
{ href: "/approvals", label: "Approvals", icon: CheckSquare },
|
|
{ href: "/profile", label: "Profile", icon: UserCircle },
|
|
];
|
|
|
|
export function MobileBottomNav() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="md:hidden flex h-16 shrink-0 items-stretch border-t border-neutral-200 bg-white">
|
|
{TABS.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname === href || pathname.startsWith(href + "/");
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"flex flex-1 flex-col items-center justify-center gap-0.5 text-xs font-medium transition-colors",
|
|
active ? "text-primary-600" : "text-neutral-500 hover:text-neutral-700"
|
|
)}
|
|
>
|
|
<Icon className={cn("h-5 w-5", active ? "stroke-[2.5]" : "")} />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|