import React, { useState, useEffect, useCallback, useRef, PropsWithChildren } from 'react'; import { Head, Link, usePage, router } from '@inertiajs/react'; import { PageProps } from '@/types'; import { PosNotification } from '@/types/notifications'; import { ShoppingCart, FileText, Clock, Trash2, DollarSign, Package, User, BarChart3, Tag, Store, SlidersHorizontal, Heart, LogOut, PanelLeftClose, PanelLeftOpen, ChevronDown, Bell, ShoppingBag, CheckCircle2, AlertTriangle, Info, AlertCircle, CheckCheck, Loader2 } from '@/Components/AnimatedIcons'; import { usePosContext } from '@/Contexts/PosContext'; import axios from 'axios'; export default function PosLayout({ children }: PropsWithChildren) { const { auth } = usePage().props; const user = (auth as any)?.user; const { sidebarCollapsed, setSidebarCollapsed, cart, setShowCart } = usePosContext(); // Real-time Clock const [currentTime, setCurrentTime] = useState(''); const [currentDate, setCurrentDate] = useState(''); // Notification bell — badge comes from Inertia share; list is fetched on-demand const [showNotifications, setShowNotifications] = useState(false); const [notificationsLoading, setNotificationsLoading] = useState(false); const [notifications, setNotifications] = useState([]); // Local unread count — starts from Inertia shared value, decrements on client mark-read const [unreadCount, setUnreadCount] = useState(user?.unread_notifications_count ?? 0); const bellRef = useRef(null); const fetchNotifications = useCallback(async () => { setNotificationsLoading(true); try { const res = await axios.get('/api/v1/notifications', { params: { per_page: 10 }, headers: { Accept: 'application/json' }, }); setNotifications(res.data?.data?.data ?? []); } catch { // Silently fail — bell opens but shows empty state } finally { setNotificationsLoading(false); } }, []); const openBell = () => { setShowNotifications(true); fetchNotifications(); }; const closeBell = () => setShowNotifications(false); const markAsRead = async (id: string) => { try { await axios.post(`/api/v1/notifications/${id}/read`, {}, { headers: { Accept: 'application/json' } }); setNotifications(prev => prev.map(n => n.id === id ? { ...n, read_at: new Date().toISOString() } : n)); setUnreadCount(prev => Math.max(0, prev - 1)); } catch { /* Silently ignore */ } }; const markAllAsRead = async () => { try { await axios.post('/api/v1/notifications/read-all', {}, { headers: { Accept: 'application/json' } }); setNotifications(prev => prev.map(n => ({ ...n, read_at: n.read_at ?? new Date().toISOString() }))); setUnreadCount(0); } catch { /* Silently ignore */ } }; // Close bell on Escape key useEffect(() => { if (!showNotifications) return; const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') closeBell(); }; document.addEventListener('keydown', handler); return () => document.removeEventListener('keydown', handler); }, [showNotifications]); // Update unread count when Inertia navigates (badge refreshes from server) useEffect(() => { setUnreadCount(user?.unread_notifications_count ?? 0); }, [user?.unread_notifications_count]); const severityIcon = (severity: string) => { switch (severity) { case 'SUCCESS': return