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>
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { signOut } from "next-auth/react";
|
|
import { Anchor, LogOut } from "lucide-react";
|
|
import { NotificationBell } from "./notification-bell";
|
|
import type { Role } from "@prisma/client";
|
|
|
|
interface NotificationItem {
|
|
id: string;
|
|
body: string;
|
|
link: string | null;
|
|
isRead: boolean;
|
|
sentAt: string;
|
|
poId: string | null;
|
|
}
|
|
|
|
interface MobileHeaderProps {
|
|
user: { name: string; role: Role };
|
|
initialUnreadCount: number;
|
|
initialNotifications: NotificationItem[];
|
|
}
|
|
|
|
export function MobileHeader({ user, initialUnreadCount, initialNotifications }: MobileHeaderProps) {
|
|
return (
|
|
<header className="flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-4 md:hidden">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600">
|
|
<Anchor className="h-3.5 w-3.5 text-white" />
|
|
</div>
|
|
<span className="text-sm font-semibold text-neutral-900">PPMS</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<NotificationBell
|
|
initialUnreadCount={initialUnreadCount}
|
|
initialNotifications={initialNotifications}
|
|
/>
|
|
<button
|
|
onClick={() => signOut({ callbackUrl: "/login" })}
|
|
className="rounded-lg p-2 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 transition-colors"
|
|
title="Sign out"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|