Ghassan Yusuf
84cd474bcb
Install admin-lte@4.1.0 (+ bootstrap 5.3.8, bootstrap-icons as peer deps) and rebuild every desktop component against actual AdminLTE markup pulled from its live docs/demo, rather than a Tailwind approximation: - Real app-wrapper/app-header/app-sidebar/app-main/app-footer structure - Working PushMenu (sidebar collapse), Treeview, ColorMode (light/dark/auto) - Navbar: functional search (wired to Users list ?search=), notifications dropdown (MQTT-driven), user menu dropdown - Sidebar: grouped nav-header sections, active-route highlighting - Breadcrumbs, footer, Bootstrap card/table/pagination/progress widgets Tailwind is now imported utilities-only (no preflight) so it coexists with Bootstrap's reset; mobile shell and modals are untouched and still Tailwind.
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { useState } from 'react'
|
|
import { useMqttTopic } from '../../hooks/useMqtt'
|
|
|
|
interface Notification {
|
|
message: string
|
|
}
|
|
|
|
interface UsersEventPayload {
|
|
type: 'UserCreated' | 'UserUpdated' | 'UserDeleted' | 'RoleAssigned'
|
|
user: { name: string }
|
|
}
|
|
|
|
const MESSAGES: Record<UsersEventPayload['type'], (name: string) => string> = {
|
|
UserCreated: (name) => `${name} was added.`,
|
|
UserUpdated: (name) => `${name} was updated.`,
|
|
UserDeleted: (name) => `${name} was removed.`,
|
|
RoleAssigned: (name) => `${name}'s role was changed.`,
|
|
}
|
|
|
|
const MAX_NOTIFICATIONS = 10
|
|
|
|
/** Rolling list of recent Users-module events shown in the navbar bell. */
|
|
export function useNotifications(): Notification[] {
|
|
const [notifications, setNotifications] = useState<Notification[]>([])
|
|
|
|
useMqttTopic('module/users/events', (payload) => {
|
|
const event = payload as UsersEventPayload
|
|
const message = MESSAGES[event.type]?.(event.user.name) ?? 'Users list updated.'
|
|
setNotifications((prev) => [{ message }, ...prev].slice(0, MAX_NOTIFICATIONS))
|
|
})
|
|
|
|
return notifications
|
|
}
|