- {EDITABLE.map(({ key, label }) => (
+ {EDITABLE.map(({ key, labelKey }) => (
-
+
{role === 'admin' && (
)}
From ca2bdef836d20eba81faa8abe6ca19a2c4328444 Mon Sep 17 00:00:00 2001
From: kidehae <149243635+kidehae@users.noreply.github.com>
Date: Fri, 24 Jul 2026 17:29:29 +0300
Subject: [PATCH 2/2] feat: Add notfication
---
src/app/components/DashboardLayout.tsx | 183 ++++++++++--
src/app/components/ui/button.tsx | 22 +-
src/app/contexts/AppContext.tsx | 399 +++++++++++++++++--------
3 files changed, 452 insertions(+), 152 deletions(-)
diff --git a/src/app/components/DashboardLayout.tsx b/src/app/components/DashboardLayout.tsx
index e41b4fc..64dc338 100644
--- a/src/app/components/DashboardLayout.tsx
+++ b/src/app/components/DashboardLayout.tsx
@@ -1,5 +1,5 @@
import { Outlet, useNavigate, useLocation } from 'react-router';
-import { LayoutDashboard, Car, Users, Wallet, Settings, Bell, User, LogOut, Shield, BarChart3, UserCog, PhoneCall, Moon, Sun } from 'lucide-react';
+import { LayoutDashboard, Car, Users, Wallet, Settings, Bell, User, LogOut, Shield, BarChart3, UserCog, PhoneCall, Moon, Sun, CheckCheck } from 'lucide-react';
import { Button } from '../components/ui/button';
import {
DropdownMenu,
@@ -17,7 +17,7 @@ import {
SelectTrigger,
SelectValue,
} from '../components/ui/select';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
import { toast } from 'sonner';
import { useAppContext } from '../contexts/AppContext';
import { useAuth } from '../contexts/AuthContext';
@@ -43,37 +43,109 @@ const adminNavigation = [
{ nameKey: 'nav.settings', href: '/settings', icon: Settings },
];
+interface NotificationItem {
+ id: string;
+ message: string;
+ time: Date;
+ read: boolean;
+ type: 'info' | 'success' | 'warning';
+}
+
export default function DashboardLayout() {
const navigate = useNavigate();
const location = useLocation();
const { user, role: userRole, logout } = useAuth();
const userName = user?.name ?? 'User';
const { t, language, setLanguage, theme, setTheme } = useAppContext();
- const [notifications, setNotifications] = useState(0);
- // Live dispatch notifications over WebSockets (centralized for the whole dashboard).
+ const [notifItems, setNotifItems] = useState
([
+ // Sample notification so admin can preview the UI
+ {
+ id: 'sample-1',
+ message: 'Welcome! Ride updates and status changes will appear here in real time.',
+ time: new Date(),
+ read: false,
+ type: 'info' as const,
+ },
+ ]);
+ const [notifOpen, setNotifOpen] = useState(false);
+ const notifRef = useRef(null);
+
+ const unreadCount = notifItems.filter((n) => !n.read).length;
+
+ // Close on outside click or Esc
+ useEffect(() => {
+ const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setNotifOpen(false); };
+ const onClick = (e: MouseEvent) => {
+ if (notifRef.current && !notifRef.current.contains(e.target as Node)) setNotifOpen(false);
+ };
+ document.addEventListener('keydown', onKey);
+ document.addEventListener('mousedown', onClick);
+ return () => {
+ document.removeEventListener('keydown', onKey);
+ document.removeEventListener('mousedown', onClick);
+ };
+ }, []);
+
+ // Live dispatch notifications over WebSockets
useEffect(() => {
const socket = getSocket() ?? connectSocket();
const onStatus = (data: any) => {
- setNotifications((n) => n + 1);
const label = data?.statusLabel ?? rideStatusLabel(data?.status);
- toast(`Ride ${String(data?.rideId ?? '').slice(0, 8)} → ${label}`);
+ const msg = `Ride ${String(data?.rideId ?? '').slice(0, 8)} → ${label}`;
+ toast(msg);
+ setNotifItems((prev) => [{
+ id: `${Date.now()}-${Math.random()}`,
+ message: msg,
+ time: new Date(),
+ read: false,
+ type: 'info' as const,
+ }, ...prev].slice(0, 50));
};
+
const onCompleted = (data: any) => {
- setNotifications((n) => n + 1);
- toast.success(`Ride completed · ${data?.fare ?? ''} ${data?.currency ?? 'ETB'}`);
+ const msg = `Ride completed · ${data?.fare ?? ''} ${data?.currency ?? 'ETB'}`;
+ toast.success(msg);
+ setNotifItems((prev) => [{
+ id: `${Date.now()}-${Math.random()}`,
+ message: msg,
+ time: new Date(),
+ read: false,
+ type: 'success' as const,
+ }, ...prev].slice(0, 50));
};
socket.on('ride:status', onStatus);
socket.on('ride:completed', onCompleted);
-
return () => {
socket.off('ride:status', onStatus);
socket.off('ride:completed', onCompleted);
};
}, []);
+ const markRead = (id: string) => {
+ setNotifItems((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
+ };
+
+ const markAllRead = () => {
+ setNotifItems((prev) => prev.map((n) => ({ ...n, read: true })));
+ };
+
+ const formatTime = (d: Date) => {
+ const diff = Math.floor((Date.now() - d.getTime()) / 1000);
+ if (diff < 60) return 'just now';
+ if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+ if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+ return d.toLocaleDateString();
+ };
+
+ const typeColor = (type: NotificationItem['type']) => ({
+ info: 'bg-[#00BDC3]',
+ success: 'bg-[#10B981]',
+ warning: 'bg-[#F59E0B]',
+ })[type];
+
const navigation = userRole === 'admin' ? adminNavigation : operatorNavigation;
const handleLogout = () => {
@@ -85,7 +157,6 @@ export default function DashboardLayout() {
{/* Sidebar */}