@umituz/web-dashboard 1.0.7 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BrandLogo.d.ts +18 -0
- package/dist/components/BrandLogo.js +88 -0
- package/dist/components/BrandLogo.js.map +1 -0
- package/dist/components/DashboardHeader.d.ts +36 -0
- package/dist/components/DashboardHeader.js +225 -0
- package/dist/components/DashboardHeader.js.map +1 -0
- package/dist/components/DashboardLayout.d.ts +45 -0
- package/dist/components/DashboardLayout.js +501 -0
- package/dist/components/DashboardLayout.js.map +1 -0
- package/dist/components/DashboardSidebar.d.ts +29 -0
- package/dist/components/DashboardSidebar.js +189 -0
- package/dist/components/DashboardSidebar.js.map +1 -0
- package/dist/components/index.d.ts +10 -0
- package/dist/components/index.js +502 -0
- package/dist/components/index.js.map +1 -0
- package/dist/hooks/dashboard.d.ts +35 -0
- package/dist/hooks/dashboard.js +57 -0
- package/dist/hooks/dashboard.js.map +1 -0
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.js +57 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/index.d.ts +17 -403
- package/dist/index.js +56 -52
- package/dist/index.js.map +1 -1
- package/dist/theme/default.d.ts +18 -0
- package/dist/theme/default.js +52 -0
- package/dist/theme/default.js.map +1 -0
- package/dist/theme/index.d.ts +4 -0
- package/dist/theme/index.js +184 -0
- package/dist/theme/index.js.map +1 -0
- package/dist/theme/presets.d.ts +14 -0
- package/dist/theme/presets.js +137 -0
- package/dist/theme/presets.js.map +1 -0
- package/dist/theme/utils.d.ts +22 -0
- package/dist/theme/utils.js +181 -0
- package/dist/theme/utils.js.map +1 -0
- package/dist/types/index.d.ts +6 -0
- package/dist/types/index.js +2 -0
- package/dist/types/index.js.map +1 -0
- package/dist/types/layout.d.ts +45 -0
- package/dist/types/layout.js +2 -0
- package/dist/types/layout.js.map +1 -0
- package/dist/types/notification.d.ts +20 -0
- package/dist/types/notification.js +2 -0
- package/dist/types/notification.js.map +1 -0
- package/dist/types/sidebar.d.ts +36 -0
- package/dist/types/sidebar.js +2 -0
- package/dist/types/sidebar.js.map +1 -0
- package/dist/types/theme.d.ts +64 -0
- package/dist/types/theme.js +2 -0
- package/dist/types/theme.js.map +1 -0
- package/dist/types/user.d.ts +37 -0
- package/dist/types/user.js +2 -0
- package/dist/types/user.js.map +1 -0
- package/dist/utils/dashboard.d.ts +57 -0
- package/dist/utils/dashboard.js +44 -0
- package/dist/utils/dashboard.js.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +44 -0
- package/dist/utils/index.js.map +1 -0
- package/package.json +19 -23
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/domains/layouts/hooks/dashboard.ts
|
|
4
|
+
import { useState, useCallback } from "react";
|
|
5
|
+
function useNotifications(initialNotifications = []) {
|
|
6
|
+
const [notifications, setNotifications] = useState(initialNotifications);
|
|
7
|
+
const markAllRead = useCallback(() => {
|
|
8
|
+
setNotifications(
|
|
9
|
+
(prev) => prev.map((n) => ({ ...n, read: true }))
|
|
10
|
+
);
|
|
11
|
+
}, []);
|
|
12
|
+
const dismiss = useCallback((id) => {
|
|
13
|
+
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
14
|
+
}, []);
|
|
15
|
+
const add = useCallback((notification) => {
|
|
16
|
+
const newNotification = {
|
|
17
|
+
...notification,
|
|
18
|
+
id: crypto.randomUUID(),
|
|
19
|
+
read: false,
|
|
20
|
+
createdAt: /* @__PURE__ */ new Date()
|
|
21
|
+
};
|
|
22
|
+
setNotifications((prev) => [newNotification, ...prev]);
|
|
23
|
+
}, []);
|
|
24
|
+
return {
|
|
25
|
+
notifications,
|
|
26
|
+
markAllRead,
|
|
27
|
+
dismiss,
|
|
28
|
+
add
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
function useSidebar(initialCollapsed = false) {
|
|
32
|
+
const [collapsed, setCollapsed] = useState(initialCollapsed);
|
|
33
|
+
const [mobileOpen, setMobileOpen] = useState(false);
|
|
34
|
+
const toggle = useCallback(() => {
|
|
35
|
+
setCollapsed((prev) => !prev);
|
|
36
|
+
}, []);
|
|
37
|
+
const openMobile = useCallback(() => {
|
|
38
|
+
setMobileOpen(true);
|
|
39
|
+
}, []);
|
|
40
|
+
const closeMobile = useCallback(() => {
|
|
41
|
+
setMobileOpen(false);
|
|
42
|
+
}, []);
|
|
43
|
+
return {
|
|
44
|
+
collapsed,
|
|
45
|
+
setCollapsed,
|
|
46
|
+
toggle,
|
|
47
|
+
mobileOpen,
|
|
48
|
+
setMobileOpen,
|
|
49
|
+
openMobile,
|
|
50
|
+
closeMobile
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
export {
|
|
54
|
+
useNotifications,
|
|
55
|
+
useSidebar
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=dashboard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/domains/layouts/hooks/dashboard.ts"],"sourcesContent":["/**\n * Dashboard Hooks\n *\n * Custom React hooks for dashboard functionality\n */\n\nimport { useState, useCallback } from \"react\";\nimport type { DashboardNotification } from \"../types/notification\";\n\n/**\n * Use Notifications Hook\n *\n * Manages notification state and actions\n *\n * @param initialNotifications - Initial notification list\n * @returns Notification state and actions\n */\nexport function useNotifications(initialNotifications: DashboardNotification[] = []) {\n const [notifications, setNotifications] = useState<DashboardNotification[]>(initialNotifications);\n\n const markAllRead = useCallback(() => {\n setNotifications((prev) =>\n prev.map((n) => ({ ...n, read: true }))\n );\n }, []);\n\n const dismiss = useCallback((id: string) => {\n setNotifications((prev) => prev.filter((n) => n.id !== id));\n }, []);\n\n const add = useCallback((notification: Omit<DashboardNotification, \"id\">) => {\n const newNotification: DashboardNotification = {\n ...notification,\n id: crypto.randomUUID(),\n read: false,\n createdAt: new Date(),\n };\n setNotifications((prev) => [newNotification, ...prev]);\n }, []);\n\n return {\n notifications,\n markAllRead,\n dismiss,\n add,\n };\n}\n\n/**\n * Use Sidebar Hook\n *\n * Manages sidebar state\n *\n * @returns Sidebar state and actions\n */\nexport function useSidebar(initialCollapsed = false) {\n const [collapsed, setCollapsed] = useState(initialCollapsed);\n const [mobileOpen, setMobileOpen] = useState(false);\n\n const toggle = useCallback(() => {\n setCollapsed((prev) => !prev);\n }, []);\n\n const openMobile = useCallback(() => {\n setMobileOpen(true);\n }, []);\n\n const closeMobile = useCallback(() => {\n setMobileOpen(false);\n }, []);\n\n return {\n collapsed,\n setCollapsed,\n toggle,\n mobileOpen,\n setMobileOpen: setMobileOpen,\n openMobile,\n closeMobile,\n };\n}\n"],"mappings":";;;AAMA,SAAS,UAAU,mBAAmB;AAW/B,SAAS,iBAAiB,uBAAgD,CAAC,GAAG;AACnF,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkC,oBAAoB;AAEhG,QAAM,cAAc,YAAY,MAAM;AACpC;AAAA,MAAiB,CAAC,SAChB,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,KAAK,EAAE;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,OAAe;AAC1C,qBAAiB,CAAC,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AAAA,EAC5D,GAAG,CAAC,CAAC;AAEL,QAAM,MAAM,YAAY,CAAC,iBAAoD;AAC3E,UAAM,kBAAyC;AAAA,MAC7C,GAAG;AAAA,MACH,IAAI,OAAO,WAAW;AAAA,MACtB,MAAM;AAAA,MACN,WAAW,oBAAI,KAAK;AAAA,IACtB;AACA,qBAAiB,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC;AAAA,EACvD,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,WAAW,mBAAmB,OAAO;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,gBAAgB;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,SAAS,YAAY,MAAM;AAC/B,iBAAa,CAAC,SAAS,CAAC,IAAI;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY,MAAM;AACnC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/domains/layouts/hooks/dashboard.ts
|
|
4
|
+
import { useState, useCallback } from "react";
|
|
5
|
+
function useNotifications(initialNotifications = []) {
|
|
6
|
+
const [notifications, setNotifications] = useState(initialNotifications);
|
|
7
|
+
const markAllRead = useCallback(() => {
|
|
8
|
+
setNotifications(
|
|
9
|
+
(prev) => prev.map((n) => ({ ...n, read: true }))
|
|
10
|
+
);
|
|
11
|
+
}, []);
|
|
12
|
+
const dismiss = useCallback((id) => {
|
|
13
|
+
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
14
|
+
}, []);
|
|
15
|
+
const add = useCallback((notification) => {
|
|
16
|
+
const newNotification = {
|
|
17
|
+
...notification,
|
|
18
|
+
id: crypto.randomUUID(),
|
|
19
|
+
read: false,
|
|
20
|
+
createdAt: /* @__PURE__ */ new Date()
|
|
21
|
+
};
|
|
22
|
+
setNotifications((prev) => [newNotification, ...prev]);
|
|
23
|
+
}, []);
|
|
24
|
+
return {
|
|
25
|
+
notifications,
|
|
26
|
+
markAllRead,
|
|
27
|
+
dismiss,
|
|
28
|
+
add
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
function useSidebar(initialCollapsed = false) {
|
|
32
|
+
const [collapsed, setCollapsed] = useState(initialCollapsed);
|
|
33
|
+
const [mobileOpen, setMobileOpen] = useState(false);
|
|
34
|
+
const toggle = useCallback(() => {
|
|
35
|
+
setCollapsed((prev) => !prev);
|
|
36
|
+
}, []);
|
|
37
|
+
const openMobile = useCallback(() => {
|
|
38
|
+
setMobileOpen(true);
|
|
39
|
+
}, []);
|
|
40
|
+
const closeMobile = useCallback(() => {
|
|
41
|
+
setMobileOpen(false);
|
|
42
|
+
}, []);
|
|
43
|
+
return {
|
|
44
|
+
collapsed,
|
|
45
|
+
setCollapsed,
|
|
46
|
+
toggle,
|
|
47
|
+
mobileOpen,
|
|
48
|
+
setMobileOpen,
|
|
49
|
+
openMobile,
|
|
50
|
+
closeMobile
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
export {
|
|
54
|
+
useNotifications,
|
|
55
|
+
useSidebar
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/domains/layouts/hooks/dashboard.ts"],"sourcesContent":["/**\n * Dashboard Hooks\n *\n * Custom React hooks for dashboard functionality\n */\n\nimport { useState, useCallback } from \"react\";\nimport type { DashboardNotification } from \"../types/notification\";\n\n/**\n * Use Notifications Hook\n *\n * Manages notification state and actions\n *\n * @param initialNotifications - Initial notification list\n * @returns Notification state and actions\n */\nexport function useNotifications(initialNotifications: DashboardNotification[] = []) {\n const [notifications, setNotifications] = useState<DashboardNotification[]>(initialNotifications);\n\n const markAllRead = useCallback(() => {\n setNotifications((prev) =>\n prev.map((n) => ({ ...n, read: true }))\n );\n }, []);\n\n const dismiss = useCallback((id: string) => {\n setNotifications((prev) => prev.filter((n) => n.id !== id));\n }, []);\n\n const add = useCallback((notification: Omit<DashboardNotification, \"id\">) => {\n const newNotification: DashboardNotification = {\n ...notification,\n id: crypto.randomUUID(),\n read: false,\n createdAt: new Date(),\n };\n setNotifications((prev) => [newNotification, ...prev]);\n }, []);\n\n return {\n notifications,\n markAllRead,\n dismiss,\n add,\n };\n}\n\n/**\n * Use Sidebar Hook\n *\n * Manages sidebar state\n *\n * @returns Sidebar state and actions\n */\nexport function useSidebar(initialCollapsed = false) {\n const [collapsed, setCollapsed] = useState(initialCollapsed);\n const [mobileOpen, setMobileOpen] = useState(false);\n\n const toggle = useCallback(() => {\n setCollapsed((prev) => !prev);\n }, []);\n\n const openMobile = useCallback(() => {\n setMobileOpen(true);\n }, []);\n\n const closeMobile = useCallback(() => {\n setMobileOpen(false);\n }, []);\n\n return {\n collapsed,\n setCollapsed,\n toggle,\n mobileOpen,\n setMobileOpen: setMobileOpen,\n openMobile,\n closeMobile,\n };\n}\n"],"mappings":";;;AAMA,SAAS,UAAU,mBAAmB;AAW/B,SAAS,iBAAiB,uBAAgD,CAAC,GAAG;AACnF,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkC,oBAAoB;AAEhG,QAAM,cAAc,YAAY,MAAM;AACpC;AAAA,MAAiB,CAAC,SAChB,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,KAAK,EAAE;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,OAAe;AAC1C,qBAAiB,CAAC,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AAAA,EAC5D,GAAG,CAAC,CAAC;AAEL,QAAM,MAAM,YAAY,CAAC,iBAAoD;AAC3E,UAAM,kBAAyC;AAAA,MAC7C,GAAG;AAAA,MACH,IAAI,OAAO,WAAW;AAAA,MACtB,MAAM;AAAA,MACN,WAAW,oBAAI,KAAK;AAAA,IACtB;AACA,qBAAiB,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC;AAAA,EACvD,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,WAAW,mBAAmB,OAAO;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,gBAAgB;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,SAAS,YAAY,MAAM;AAC/B,iBAAa,CAAC,SAAS,CAAC,IAAI;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY,MAAM;AACnC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,403 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
icon: LucideIcon;
|
|
19
|
-
/** Route path */
|
|
20
|
-
path: string;
|
|
21
|
-
/** Filter by app type (optional) */
|
|
22
|
-
requiredApp?: 'mobile' | 'web';
|
|
23
|
-
/** Enable/disable this item (default: true) */
|
|
24
|
-
enabled?: boolean;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Group of sidebar items with a title
|
|
28
|
-
*/
|
|
29
|
-
interface SidebarGroup {
|
|
30
|
-
/** Group title (can be i18n key) */
|
|
31
|
-
title: string;
|
|
32
|
-
/** Items in this group */
|
|
33
|
-
items: SidebarItem[];
|
|
34
|
-
/** Optional: Route to title mapping for page headers */
|
|
35
|
-
titleMap?: Record<string, string>;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Dashboard header props
|
|
39
|
-
*/
|
|
40
|
-
interface DashboardHeaderProps {
|
|
41
|
-
/** Whether sidebar is collapsed */
|
|
42
|
-
collapsed: boolean;
|
|
43
|
-
/** Toggle sidebar collapsed state */
|
|
44
|
-
setCollapsed: (collapsed: boolean) => void;
|
|
45
|
-
/** Toggle mobile menu open state */
|
|
46
|
-
setMobileOpen: (open: boolean) => void;
|
|
47
|
-
/** Current page title */
|
|
48
|
-
title: string;
|
|
49
|
-
}
|
|
50
|
-
/**
|
|
51
|
-
* Dashboard sidebar props
|
|
52
|
-
*/
|
|
53
|
-
interface DashboardSidebarProps {
|
|
54
|
-
/** Whether sidebar is collapsed */
|
|
55
|
-
collapsed: boolean;
|
|
56
|
-
/** Toggle sidebar collapsed state */
|
|
57
|
-
setCollapsed: (collapsed: boolean) => void;
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* Dashboard layout configuration
|
|
61
|
-
*/
|
|
62
|
-
interface DashboardLayoutConfig {
|
|
63
|
-
/** Sidebar groups */
|
|
64
|
-
sidebarGroups: SidebarGroup[];
|
|
65
|
-
/** Extra title mappings for routes */
|
|
66
|
-
extraTitleMap?: Record<string, string>;
|
|
67
|
-
/** Brand name */
|
|
68
|
-
brandName?: string;
|
|
69
|
-
/** Brand tagline */
|
|
70
|
-
brandTagline?: string;
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* Dashboard theme configuration
|
|
74
|
-
* Extends CSS variables for customization
|
|
75
|
-
*/
|
|
76
|
-
interface DashboardTheme {
|
|
77
|
-
/** Primary color (CSS variable compatible) */
|
|
78
|
-
primary?: string;
|
|
79
|
-
/** Secondary color */
|
|
80
|
-
secondary?: string;
|
|
81
|
-
/** Sidebar background */
|
|
82
|
-
sidebarBackground?: string;
|
|
83
|
-
/** Sidebar foreground */
|
|
84
|
-
sidebarForeground?: string;
|
|
85
|
-
/** Sidebar border */
|
|
86
|
-
sidebarBorder?: string;
|
|
87
|
-
/** Header background */
|
|
88
|
-
headerBackground?: string;
|
|
89
|
-
/** Background color */
|
|
90
|
-
background?: string;
|
|
91
|
-
/** Foreground color */
|
|
92
|
-
foreground?: string;
|
|
93
|
-
/** Border color */
|
|
94
|
-
border?: string;
|
|
95
|
-
/** Accent color */
|
|
96
|
-
accent?: string;
|
|
97
|
-
/** Accent foreground */
|
|
98
|
-
accentForeground?: string;
|
|
99
|
-
/** Destructive color */
|
|
100
|
-
destructive?: string;
|
|
101
|
-
/** Destructive foreground */
|
|
102
|
-
destructiveForeground?: string;
|
|
103
|
-
/** Muted background */
|
|
104
|
-
muted?: string;
|
|
105
|
-
/** Muted foreground */
|
|
106
|
-
mutedForeground?: string;
|
|
107
|
-
/** Card background */
|
|
108
|
-
card?: string;
|
|
109
|
-
/** Card foreground */
|
|
110
|
-
cardForeground?: string;
|
|
111
|
-
/** Popover background */
|
|
112
|
-
popover?: string;
|
|
113
|
-
/** Popover foreground */
|
|
114
|
-
popoverForeground?: string;
|
|
115
|
-
/** Radius (border-radius) */
|
|
116
|
-
radius?: string;
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* Theme preset for quick setup
|
|
120
|
-
*/
|
|
121
|
-
interface DashboardThemePreset {
|
|
122
|
-
/** Preset name */
|
|
123
|
-
name: string;
|
|
124
|
-
/** Theme configuration */
|
|
125
|
-
theme: DashboardTheme;
|
|
126
|
-
/** Whether this is a dark theme */
|
|
127
|
-
dark?: boolean;
|
|
128
|
-
}
|
|
129
|
-
/**
|
|
130
|
-
* Notification item
|
|
131
|
-
*/
|
|
132
|
-
interface DashboardNotification {
|
|
133
|
-
/** Unique ID */
|
|
134
|
-
id: string;
|
|
135
|
-
/** Notification text */
|
|
136
|
-
text: string;
|
|
137
|
-
/** Whether notification is read */
|
|
138
|
-
read: boolean;
|
|
139
|
-
/** Creation timestamp */
|
|
140
|
-
createdAt: Date | string | number;
|
|
141
|
-
}
|
|
142
|
-
/**
|
|
143
|
-
* User profile info for header
|
|
144
|
-
*/
|
|
145
|
-
interface DashboardUser {
|
|
146
|
-
/** User ID */
|
|
147
|
-
id: string;
|
|
148
|
-
/** Display name */
|
|
149
|
-
name?: string;
|
|
150
|
-
/** Email address */
|
|
151
|
-
email?: string;
|
|
152
|
-
/** Avatar URL */
|
|
153
|
-
avatar?: string;
|
|
154
|
-
/** Whether user has mobile app access */
|
|
155
|
-
hasMobileApp?: boolean;
|
|
156
|
-
/** Whether user has web app access */
|
|
157
|
-
hasWebApp?: boolean;
|
|
158
|
-
}
|
|
159
|
-
/**
|
|
160
|
-
* Navigation item for user menu
|
|
161
|
-
*/
|
|
162
|
-
interface UserNavMenuItem {
|
|
163
|
-
/** Display label */
|
|
164
|
-
label: string;
|
|
165
|
-
/** Icon component */
|
|
166
|
-
icon: React.ComponentType<{
|
|
167
|
-
className?: string;
|
|
168
|
-
}>;
|
|
169
|
-
/** Route path */
|
|
170
|
-
path: string;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
interface DashboardLayoutProps {
|
|
174
|
-
/** Layout configuration */
|
|
175
|
-
config: DashboardLayoutConfig;
|
|
176
|
-
/** Auth user */
|
|
177
|
-
user?: DashboardUser;
|
|
178
|
-
/** Auth loading state */
|
|
179
|
-
authLoading?: boolean;
|
|
180
|
-
/** Authenticated state */
|
|
181
|
-
isAuthenticated?: boolean;
|
|
182
|
-
/** Notifications */
|
|
183
|
-
notifications?: DashboardNotification[];
|
|
184
|
-
/** Logout function */
|
|
185
|
-
onLogout?: () => Promise<void>;
|
|
186
|
-
/** Mark all as read function */
|
|
187
|
-
onMarkAllRead?: () => void;
|
|
188
|
-
/** Dismiss notification function */
|
|
189
|
-
onDismissNotification?: (id: string) => void;
|
|
190
|
-
/** Login route for redirect */
|
|
191
|
-
loginRoute?: string;
|
|
192
|
-
}
|
|
193
|
-
/**
|
|
194
|
-
* Dashboard Layout Component
|
|
195
|
-
*
|
|
196
|
-
* Main layout wrapper for dashboard pages.
|
|
197
|
-
* Provides sidebar, header, and content area with responsive design.
|
|
198
|
-
*
|
|
199
|
-
* Features:
|
|
200
|
-
* - Collapsible sidebar
|
|
201
|
-
* - Mobile menu overlay
|
|
202
|
-
* - Breadcrumb page titles
|
|
203
|
-
* - Loading skeletons
|
|
204
|
-
* - Auth protection
|
|
205
|
-
*
|
|
206
|
-
* @param props - Dashboard layout props
|
|
207
|
-
*/
|
|
208
|
-
declare const DashboardLayout: ({ config, user, authLoading, isAuthenticated, notifications, onLogout, onMarkAllRead, onDismissNotification, loginRoute, }: DashboardLayoutProps) => react_jsx_runtime.JSX.Element | null;
|
|
209
|
-
|
|
210
|
-
interface DashboardHeaderPropsExtended extends DashboardHeaderProps {
|
|
211
|
-
/** Auth user */
|
|
212
|
-
user?: DashboardUser;
|
|
213
|
-
/** Notifications */
|
|
214
|
-
notifications?: DashboardNotification[];
|
|
215
|
-
/** Logout function */
|
|
216
|
-
onLogout?: () => Promise<void>;
|
|
217
|
-
/** Mark all as read function */
|
|
218
|
-
onMarkAllRead?: () => void;
|
|
219
|
-
/** Dismiss notification function */
|
|
220
|
-
onDismissNotification?: (id: string) => void;
|
|
221
|
-
/** Settings route */
|
|
222
|
-
settingsRoute?: string;
|
|
223
|
-
/** Profile route */
|
|
224
|
-
profileRoute?: string;
|
|
225
|
-
/** Billing route */
|
|
226
|
-
billingRoute?: string;
|
|
227
|
-
}
|
|
228
|
-
/**
|
|
229
|
-
* Dashboard Header Component
|
|
230
|
-
*
|
|
231
|
-
* Displays top navigation bar with theme toggle, notifications,
|
|
232
|
-
* user menu, and organisation selector.
|
|
233
|
-
*
|
|
234
|
-
* @param props - Dashboard header props
|
|
235
|
-
*/
|
|
236
|
-
declare const DashboardHeader: ({ collapsed, setCollapsed, setMobileOpen, title, user, notifications, onLogout, onMarkAllRead, onDismissNotification, settingsRoute, profileRoute, billingRoute, }: DashboardHeaderPropsExtended) => react_jsx_runtime.JSX.Element;
|
|
237
|
-
|
|
238
|
-
interface DashboardSidebarPropsExtended extends DashboardSidebarProps {
|
|
239
|
-
/** Sidebar groups configuration */
|
|
240
|
-
sidebarGroups: SidebarGroup[];
|
|
241
|
-
/** Brand name */
|
|
242
|
-
brandName?: string;
|
|
243
|
-
/** Brand tagline */
|
|
244
|
-
brandTagline?: string;
|
|
245
|
-
/** Create post route */
|
|
246
|
-
createPostRoute?: string;
|
|
247
|
-
/** Auth user */
|
|
248
|
-
user?: DashboardUser;
|
|
249
|
-
}
|
|
250
|
-
/**
|
|
251
|
-
* Dashboard Sidebar Component
|
|
252
|
-
*
|
|
253
|
-
* Displays collapsible sidebar with navigation menu items.
|
|
254
|
-
* Supports app-based filtering (mobile/web) and collapsible groups.
|
|
255
|
-
*
|
|
256
|
-
* @param props - Dashboard sidebar props
|
|
257
|
-
*/
|
|
258
|
-
declare const DashboardSidebar: ({ collapsed, setCollapsed, sidebarGroups, brandName, brandTagline, createPostRoute, user, }: DashboardSidebarPropsExtended) => react_jsx_runtime.JSX.Element;
|
|
259
|
-
|
|
260
|
-
interface BrandLogoProps {
|
|
261
|
-
className?: string;
|
|
262
|
-
size?: number;
|
|
263
|
-
}
|
|
264
|
-
/**
|
|
265
|
-
* BrandLogo Component
|
|
266
|
-
*
|
|
267
|
-
* Displays the application brand logo as an SVG.
|
|
268
|
-
* Supports custom sizing and styling through className.
|
|
269
|
-
*
|
|
270
|
-
* @param className - Optional CSS classes for styling
|
|
271
|
-
* @param size - Width and height in pixels (default: 32)
|
|
272
|
-
*/
|
|
273
|
-
declare const BrandLogo: ({ className, size }: BrandLogoProps) => react_jsx_runtime.JSX.Element;
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* Dashboard Theme System
|
|
277
|
-
*
|
|
278
|
-
* Provides theme configuration and presets for the dashboard layout.
|
|
279
|
-
* Themes are applied via CSS variables, allowing runtime customization.
|
|
280
|
-
*/
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* Default dashboard theme (light mode)
|
|
284
|
-
*/
|
|
285
|
-
declare const DEFAULT_DASHBOARD_THEME: DashboardTheme;
|
|
286
|
-
/**
|
|
287
|
-
* Default dashboard theme (dark mode)
|
|
288
|
-
*/
|
|
289
|
-
declare const DEFAULT_DASHBOARD_THEME_DARK: DashboardTheme;
|
|
290
|
-
/**
|
|
291
|
-
* Available theme presets
|
|
292
|
-
*/
|
|
293
|
-
declare const DASHBOARD_THEME_PRESETS: DashboardThemePreset[];
|
|
294
|
-
/**
|
|
295
|
-
* Apply theme to document root via CSS variables
|
|
296
|
-
*
|
|
297
|
-
* @param theme - Theme configuration to apply
|
|
298
|
-
*/
|
|
299
|
-
declare function applyDashboardTheme(theme: DashboardTheme): void;
|
|
300
|
-
/**
|
|
301
|
-
* Get theme preset by name
|
|
302
|
-
*
|
|
303
|
-
* @param name - Preset name
|
|
304
|
-
* @returns Theme preset or undefined
|
|
305
|
-
*/
|
|
306
|
-
declare function getDashboardThemePreset(name: string): DashboardThemePreset | undefined;
|
|
307
|
-
/**
|
|
308
|
-
* Merge custom theme with default theme
|
|
309
|
-
*
|
|
310
|
-
* @param customTheme - Custom theme configuration
|
|
311
|
-
* @param dark - Whether to use dark mode base
|
|
312
|
-
* @returns Merged theme configuration
|
|
313
|
-
*/
|
|
314
|
-
declare function mergeDashboardTheme(customTheme: Partial<DashboardTheme>, dark?: boolean): DashboardTheme;
|
|
315
|
-
|
|
316
|
-
/**
|
|
317
|
-
* Use Notifications Hook
|
|
318
|
-
*
|
|
319
|
-
* Manages notification state and actions
|
|
320
|
-
*
|
|
321
|
-
* @param initialNotifications - Initial notification list
|
|
322
|
-
* @returns Notification state and actions
|
|
323
|
-
*/
|
|
324
|
-
declare function useNotifications(initialNotifications?: DashboardNotification[]): {
|
|
325
|
-
notifications: DashboardNotification[];
|
|
326
|
-
markAllRead: () => void;
|
|
327
|
-
dismiss: (id: string) => void;
|
|
328
|
-
add: (notification: Omit<DashboardNotification, "id">) => void;
|
|
329
|
-
};
|
|
330
|
-
/**
|
|
331
|
-
* Use Sidebar Hook
|
|
332
|
-
*
|
|
333
|
-
* Manages sidebar state
|
|
334
|
-
*
|
|
335
|
-
* @returns Sidebar state and actions
|
|
336
|
-
*/
|
|
337
|
-
declare function useSidebar(initialCollapsed?: boolean): {
|
|
338
|
-
collapsed: boolean;
|
|
339
|
-
setCollapsed: react.Dispatch<react.SetStateAction<boolean>>;
|
|
340
|
-
toggle: () => void;
|
|
341
|
-
mobileOpen: boolean;
|
|
342
|
-
setMobileOpen: react.Dispatch<react.SetStateAction<boolean>>;
|
|
343
|
-
openMobile: () => void;
|
|
344
|
-
closeMobile: () => void;
|
|
345
|
-
};
|
|
346
|
-
|
|
347
|
-
/**
|
|
348
|
-
* Dashboard Utilities
|
|
349
|
-
*
|
|
350
|
-
* Utility functions for dashboard operations
|
|
351
|
-
*/
|
|
352
|
-
/**
|
|
353
|
-
* Format notification timestamp to relative time
|
|
354
|
-
*
|
|
355
|
-
* @param createdAt - Notification creation timestamp
|
|
356
|
-
* @param t - i18n translation function
|
|
357
|
-
* @returns Formatted time string
|
|
358
|
-
*/
|
|
359
|
-
declare function formatNotificationTime(createdAt: Date | string | number, t: (key: string, params?: Record<string, unknown>) => string): string;
|
|
360
|
-
/**
|
|
361
|
-
* Check if a path is active
|
|
362
|
-
*
|
|
363
|
-
* @param currentPath - Current location pathname
|
|
364
|
-
* @param targetPath - Target path to check
|
|
365
|
-
* @returns True if paths match
|
|
366
|
-
*/
|
|
367
|
-
declare function isPathActive(currentPath: string, targetPath: string): boolean;
|
|
368
|
-
/**
|
|
369
|
-
* Get page title from sidebar configuration
|
|
370
|
-
*
|
|
371
|
-
* @param pathname - Current pathname
|
|
372
|
-
* @param sidebarGroups - Sidebar groups configuration
|
|
373
|
-
* @param extraTitleMap - Extra title mappings
|
|
374
|
-
* @returns Page title or null
|
|
375
|
-
*/
|
|
376
|
-
declare function getPageTitle(pathname: string, sidebarGroups: Array<{
|
|
377
|
-
items: Array<{
|
|
378
|
-
path: string;
|
|
379
|
-
label: string;
|
|
380
|
-
}>;
|
|
381
|
-
}>, extraTitleMap?: Record<string, string>): string | null;
|
|
382
|
-
/**
|
|
383
|
-
* Filter sidebar items by app type and enabled status
|
|
384
|
-
*
|
|
385
|
-
* @param items - Sidebar items to filter
|
|
386
|
-
* @param user - Current user object
|
|
387
|
-
* @returns Filtered items
|
|
388
|
-
*/
|
|
389
|
-
declare function filterSidebarItems<T extends {
|
|
390
|
-
enabled?: boolean;
|
|
391
|
-
requiredApp?: "mobile" | "web";
|
|
392
|
-
}>(items: T[], user?: {
|
|
393
|
-
hasMobileApp?: boolean;
|
|
394
|
-
hasWebApp?: boolean;
|
|
395
|
-
}): T[];
|
|
396
|
-
/**
|
|
397
|
-
* Generate notification ID
|
|
398
|
-
*
|
|
399
|
-
* @returns Unique notification ID
|
|
400
|
-
*/
|
|
401
|
-
declare function generateNotificationId(): string;
|
|
402
|
-
|
|
403
|
-
export { BrandLogo, DASHBOARD_THEME_PRESETS, DEFAULT_DASHBOARD_THEME, DEFAULT_DASHBOARD_THEME_DARK, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutConfig, type DashboardNotification, DashboardSidebar, type DashboardSidebarProps, type DashboardTheme, type DashboardThemePreset, type DashboardUser, type SidebarGroup, type SidebarItem, type UserNavMenuItem, applyDashboardTheme, filterSidebarItems, formatNotificationTime, generateNotificationId, getDashboardThemePreset, getPageTitle, isPathActive, mergeDashboardTheme, useNotifications, useSidebar };
|
|
1
|
+
export { DashboardLayout } from './components/DashboardLayout.js';
|
|
2
|
+
export { DashboardHeader } from './components/DashboardHeader.js';
|
|
3
|
+
export { DashboardSidebar } from './components/DashboardSidebar.js';
|
|
4
|
+
export { BrandLogo } from './components/BrandLogo.js';
|
|
5
|
+
export { useNotifications, useSidebar } from './hooks/dashboard.js';
|
|
6
|
+
export { filterSidebarItems, formatNotificationTime, generateNotificationId, getPageTitle, isPathActive } from './utils/dashboard.js';
|
|
7
|
+
export { SidebarGroup, SidebarItem } from './types/sidebar.js';
|
|
8
|
+
export { DashboardHeaderProps, DashboardLayoutConfig, DashboardSidebarProps } from './types/layout.js';
|
|
9
|
+
export { DashboardTheme, DashboardThemePreset } from './types/theme.js';
|
|
10
|
+
export { DashboardNotification } from './types/notification.js';
|
|
11
|
+
export { DashboardUser, UserNavMenuItem } from './types/user.js';
|
|
12
|
+
export { DEFAULT_DASHBOARD_THEME, DEFAULT_DASHBOARD_THEME_DARK } from './theme/default.js';
|
|
13
|
+
export { DASHBOARD_THEME_PRESETS } from './theme/presets.js';
|
|
14
|
+
export { applyDashboardTheme, getDashboardThemePreset, mergeDashboardTheme } from './theme/utils.js';
|
|
15
|
+
import 'react/jsx-runtime';
|
|
16
|
+
import 'react';
|
|
17
|
+
import 'lucide-react';
|
package/dist/index.js
CHANGED
|
@@ -510,7 +510,58 @@ var DashboardLayout = ({
|
|
|
510
510
|
] });
|
|
511
511
|
};
|
|
512
512
|
|
|
513
|
-
// src/domains/layouts/
|
|
513
|
+
// src/domains/layouts/hooks/dashboard.ts
|
|
514
|
+
import { useState as useState4, useCallback } from "react";
|
|
515
|
+
function useNotifications(initialNotifications = []) {
|
|
516
|
+
const [notifications, setNotifications] = useState4(initialNotifications);
|
|
517
|
+
const markAllRead = useCallback(() => {
|
|
518
|
+
setNotifications(
|
|
519
|
+
(prev) => prev.map((n) => ({ ...n, read: true }))
|
|
520
|
+
);
|
|
521
|
+
}, []);
|
|
522
|
+
const dismiss = useCallback((id) => {
|
|
523
|
+
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
524
|
+
}, []);
|
|
525
|
+
const add = useCallback((notification) => {
|
|
526
|
+
const newNotification = {
|
|
527
|
+
...notification,
|
|
528
|
+
id: crypto.randomUUID(),
|
|
529
|
+
read: false,
|
|
530
|
+
createdAt: /* @__PURE__ */ new Date()
|
|
531
|
+
};
|
|
532
|
+
setNotifications((prev) => [newNotification, ...prev]);
|
|
533
|
+
}, []);
|
|
534
|
+
return {
|
|
535
|
+
notifications,
|
|
536
|
+
markAllRead,
|
|
537
|
+
dismiss,
|
|
538
|
+
add
|
|
539
|
+
};
|
|
540
|
+
}
|
|
541
|
+
function useSidebar(initialCollapsed = false) {
|
|
542
|
+
const [collapsed, setCollapsed] = useState4(initialCollapsed);
|
|
543
|
+
const [mobileOpen, setMobileOpen] = useState4(false);
|
|
544
|
+
const toggle = useCallback(() => {
|
|
545
|
+
setCollapsed((prev) => !prev);
|
|
546
|
+
}, []);
|
|
547
|
+
const openMobile = useCallback(() => {
|
|
548
|
+
setMobileOpen(true);
|
|
549
|
+
}, []);
|
|
550
|
+
const closeMobile = useCallback(() => {
|
|
551
|
+
setMobileOpen(false);
|
|
552
|
+
}, []);
|
|
553
|
+
return {
|
|
554
|
+
collapsed,
|
|
555
|
+
setCollapsed,
|
|
556
|
+
toggle,
|
|
557
|
+
mobileOpen,
|
|
558
|
+
setMobileOpen,
|
|
559
|
+
openMobile,
|
|
560
|
+
closeMobile
|
|
561
|
+
};
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
// src/domains/layouts/theme/default.ts
|
|
514
565
|
var DEFAULT_DASHBOARD_THEME = {
|
|
515
566
|
primary: "hsl(222.2 47.4% 11.2%)",
|
|
516
567
|
secondary: "hsl(217.2 32.6% 17.5%)",
|
|
@@ -555,6 +606,8 @@ var DEFAULT_DASHBOARD_THEME_DARK = {
|
|
|
555
606
|
popoverForeground: "hsl(210 40% 98%)",
|
|
556
607
|
radius: "0.5rem"
|
|
557
608
|
};
|
|
609
|
+
|
|
610
|
+
// src/domains/layouts/theme/presets.ts
|
|
558
611
|
var DASHBOARD_THEME_PRESETS = [
|
|
559
612
|
{
|
|
560
613
|
name: "default",
|
|
@@ -639,6 +692,8 @@ var DASHBOARD_THEME_PRESETS = [
|
|
|
639
692
|
dark: true
|
|
640
693
|
}
|
|
641
694
|
];
|
|
695
|
+
|
|
696
|
+
// src/domains/layouts/theme/utils.ts
|
|
642
697
|
function applyDashboardTheme(theme) {
|
|
643
698
|
if (typeof document === "undefined") return;
|
|
644
699
|
const root = document.documentElement;
|
|
@@ -679,57 +734,6 @@ function mergeDashboardTheme(customTheme, dark = false) {
|
|
|
679
734
|
...customTheme
|
|
680
735
|
};
|
|
681
736
|
}
|
|
682
|
-
|
|
683
|
-
// src/domains/layouts/hooks/dashboard.ts
|
|
684
|
-
import { useState as useState4, useCallback } from "react";
|
|
685
|
-
function useNotifications(initialNotifications = []) {
|
|
686
|
-
const [notifications, setNotifications] = useState4(initialNotifications);
|
|
687
|
-
const markAllRead = useCallback(() => {
|
|
688
|
-
setNotifications(
|
|
689
|
-
(prev) => prev.map((n) => ({ ...n, read: true }))
|
|
690
|
-
);
|
|
691
|
-
}, []);
|
|
692
|
-
const dismiss = useCallback((id) => {
|
|
693
|
-
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
694
|
-
}, []);
|
|
695
|
-
const add = useCallback((notification) => {
|
|
696
|
-
const newNotification = {
|
|
697
|
-
...notification,
|
|
698
|
-
id: crypto.randomUUID(),
|
|
699
|
-
read: false,
|
|
700
|
-
createdAt: /* @__PURE__ */ new Date()
|
|
701
|
-
};
|
|
702
|
-
setNotifications((prev) => [newNotification, ...prev]);
|
|
703
|
-
}, []);
|
|
704
|
-
return {
|
|
705
|
-
notifications,
|
|
706
|
-
markAllRead,
|
|
707
|
-
dismiss,
|
|
708
|
-
add
|
|
709
|
-
};
|
|
710
|
-
}
|
|
711
|
-
function useSidebar(initialCollapsed = false) {
|
|
712
|
-
const [collapsed, setCollapsed] = useState4(initialCollapsed);
|
|
713
|
-
const [mobileOpen, setMobileOpen] = useState4(false);
|
|
714
|
-
const toggle = useCallback(() => {
|
|
715
|
-
setCollapsed((prev) => !prev);
|
|
716
|
-
}, []);
|
|
717
|
-
const openMobile = useCallback(() => {
|
|
718
|
-
setMobileOpen(true);
|
|
719
|
-
}, []);
|
|
720
|
-
const closeMobile = useCallback(() => {
|
|
721
|
-
setMobileOpen(false);
|
|
722
|
-
}, []);
|
|
723
|
-
return {
|
|
724
|
-
collapsed,
|
|
725
|
-
setCollapsed,
|
|
726
|
-
toggle,
|
|
727
|
-
mobileOpen,
|
|
728
|
-
setMobileOpen,
|
|
729
|
-
openMobile,
|
|
730
|
-
closeMobile
|
|
731
|
-
};
|
|
732
|
-
}
|
|
733
737
|
export {
|
|
734
738
|
BrandLogo,
|
|
735
739
|
DASHBOARD_THEME_PRESETS,
|