gov-layout 1.0.0

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.
Files changed (8) hide show
  1. package/README.md +210 -0
  2. package/dist/index.d.mts +104 -0
  3. package/dist/index.d.ts +104 -0
  4. package/dist/index.js +1072 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +1065 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +43 -0
package/dist/index.js ADDED
@@ -0,0 +1,1072 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+
6
+ // src/sidebar/SidebarHeader.tsx
7
+ function SidebarHeader({ orgLogo, orgName, orgSubtitle }) {
8
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
9
+ display: "flex",
10
+ alignItems: "center",
11
+ gap: "12px",
12
+ padding: "24px 20px"
13
+ }, children: [
14
+ orgLogo && /* @__PURE__ */ jsxRuntime.jsx(
15
+ "img",
16
+ {
17
+ src: orgLogo,
18
+ alt: orgName,
19
+ style: {
20
+ width: "48px",
21
+ height: "48px",
22
+ borderRadius: "50%",
23
+ objectFit: "cover",
24
+ flexShrink: 0
25
+ }
26
+ }
27
+ ),
28
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
29
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
30
+ fontWeight: 700,
31
+ fontSize: "16px",
32
+ lineHeight: "22px",
33
+ color: "var(--color-alias-color-brand-text-dark, #05010e)",
34
+ margin: 0,
35
+ overflow: "hidden",
36
+ textOverflow: "ellipsis",
37
+ whiteSpace: "nowrap"
38
+ }, children: orgName }),
39
+ orgSubtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
40
+ fontSize: "14px",
41
+ lineHeight: "20px",
42
+ color: "var(--color-alias-text-colors-tertiary, #475272)",
43
+ margin: 0,
44
+ overflow: "hidden",
45
+ textOverflow: "ellipsis",
46
+ whiteSpace: "nowrap"
47
+ }, children: orgSubtitle })
48
+ ] })
49
+ ] });
50
+ }
51
+ function ChevronDownIcon({ isOpen }) {
52
+ return /* @__PURE__ */ jsxRuntime.jsx(
53
+ "svg",
54
+ {
55
+ width: "20",
56
+ height: "20",
57
+ viewBox: "0 0 20 20",
58
+ fill: "none",
59
+ stroke: "currentColor",
60
+ strokeWidth: "2",
61
+ strokeLinecap: "round",
62
+ strokeLinejoin: "round",
63
+ style: {
64
+ transition: "transform 0.2s ease",
65
+ transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
66
+ flexShrink: 0
67
+ },
68
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 7.5L10 12.5L15 7.5" })
69
+ }
70
+ );
71
+ }
72
+ function MenuItemComponent({
73
+ item,
74
+ onItemClick,
75
+ currentPath,
76
+ depth = 0
77
+ }) {
78
+ const [isOpen, setIsOpen] = react.useState(false);
79
+ const hasChildren = item.children && item.children.length > 0;
80
+ const isActive = item.path ? currentPath === item.path : false;
81
+ const isChildActive = hasChildren ? item.children.some((child) => child.path === currentPath) : false;
82
+ const expanded = isOpen || isChildActive;
83
+ const handleClick = () => {
84
+ if (hasChildren) {
85
+ setIsOpen(!isOpen);
86
+ } else if (item.path) {
87
+ onItemClick(item.path);
88
+ }
89
+ };
90
+ const activeColor = "var(--color-alias-color-brand-primary, #1e7d55)";
91
+ const hoverBg = "var(--color-foundations-fuji-pallet-light, #ebedf5)";
92
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
93
+ /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
94
+ "button",
95
+ {
96
+ onClick: handleClick,
97
+ onMouseEnter: (e) => {
98
+ if (!isActive) {
99
+ e.currentTarget.style.backgroundColor = hoverBg;
100
+ }
101
+ },
102
+ onMouseLeave: (e) => {
103
+ if (!isActive) {
104
+ e.currentTarget.style.backgroundColor = "transparent";
105
+ }
106
+ },
107
+ style: {
108
+ width: "100%",
109
+ display: "flex",
110
+ alignItems: "center",
111
+ gap: "12px",
112
+ padding: depth > 0 ? "10px 16px 10px 52px" : "12px 16px",
113
+ borderRadius: "8px",
114
+ border: "none",
115
+ background: isActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
116
+ color: isActive ? activeColor : "var(--color-alias-text-colors-primary, #060d26)",
117
+ cursor: "pointer",
118
+ transition: "background-color 0.15s ease",
119
+ textAlign: "left",
120
+ fontSize: "15px",
121
+ fontWeight: isActive ? 600 : 400,
122
+ lineHeight: "22px"
123
+ },
124
+ children: [
125
+ item.icon && /* @__PURE__ */ jsxRuntime.jsx(
126
+ "span",
127
+ {
128
+ style: {
129
+ width: "24px",
130
+ height: "24px",
131
+ display: "flex",
132
+ alignItems: "center",
133
+ justifyContent: "center",
134
+ flexShrink: 0,
135
+ color: isActive ? activeColor : "var(--color-alias-text-colors-tertiary, #475272)"
136
+ },
137
+ children: item.icon
138
+ }
139
+ ),
140
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: item.title }),
141
+ hasChildren && /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { isOpen: expanded })
142
+ ]
143
+ }
144
+ ) }),
145
+ hasChildren && expanded && /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
146
+ MenuItemComponent,
147
+ {
148
+ item: child,
149
+ onItemClick,
150
+ currentPath,
151
+ depth: depth + 1
152
+ },
153
+ child.id
154
+ )) }),
155
+ item.dividerAfter && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
156
+ "hr",
157
+ {
158
+ style: {
159
+ border: "none",
160
+ borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
161
+ margin: "8px 0"
162
+ }
163
+ }
164
+ ) })
165
+ ] });
166
+ }
167
+ function SidebarMenu({ menuItems, onItemClick, currentPath }) {
168
+ return /* @__PURE__ */ jsxRuntime.jsx("nav", { style: { flex: 1, padding: "8px 12px", overflowY: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "2px" }, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
169
+ MenuItemComponent,
170
+ {
171
+ item,
172
+ onItemClick,
173
+ currentPath
174
+ },
175
+ item.id
176
+ )) }) });
177
+ }
178
+ function LogoutIcon() {
179
+ return /* @__PURE__ */ jsxRuntime.jsxs(
180
+ "svg",
181
+ {
182
+ width: "20",
183
+ height: "20",
184
+ viewBox: "0 0 24 24",
185
+ fill: "none",
186
+ stroke: "currentColor",
187
+ strokeWidth: "2",
188
+ strokeLinecap: "round",
189
+ strokeLinejoin: "round",
190
+ children: [
191
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
192
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 17 21 12 16 7" }),
193
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
194
+ ]
195
+ }
196
+ );
197
+ }
198
+ function SidebarUserProfile({
199
+ user,
200
+ roleLabel,
201
+ onLogout
202
+ }) {
203
+ if (!user) return null;
204
+ const getFullName = () => {
205
+ if (user.firstName && user.lastName) {
206
+ return `${user.firstName} ${user.lastName}`;
207
+ }
208
+ return user.firstName || user.lastName || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
209
+ };
210
+ const getInitial = () => {
211
+ return user.firstName?.charAt(0) || user.lastName?.charAt(0) || "?";
212
+ };
213
+ return /* @__PURE__ */ jsxRuntime.jsxs(
214
+ "div",
215
+ {
216
+ style: {
217
+ padding: "16px 20px",
218
+ borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
219
+ display: "flex",
220
+ alignItems: "center",
221
+ gap: "12px"
222
+ },
223
+ children: [
224
+ user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
225
+ "img",
226
+ {
227
+ src: user.pictureUrl,
228
+ alt: getFullName(),
229
+ style: {
230
+ width: "40px",
231
+ height: "40px",
232
+ borderRadius: "50%",
233
+ objectFit: "cover",
234
+ flexShrink: 0
235
+ }
236
+ }
237
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
238
+ "div",
239
+ {
240
+ style: {
241
+ width: "40px",
242
+ height: "40px",
243
+ borderRadius: "50%",
244
+ background: "var(--color-alias-color-brand-primary, #1e7d55)",
245
+ display: "flex",
246
+ alignItems: "center",
247
+ justifyContent: "center",
248
+ color: "#fff",
249
+ fontWeight: 700,
250
+ fontSize: "16px",
251
+ flexShrink: 0
252
+ },
253
+ children: getInitial()
254
+ }
255
+ ),
256
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
257
+ /* @__PURE__ */ jsxRuntime.jsx(
258
+ "p",
259
+ {
260
+ style: {
261
+ fontWeight: 600,
262
+ fontSize: "14px",
263
+ lineHeight: "20px",
264
+ color: "var(--color-alias-text-colors-primary, #060d26)",
265
+ margin: 0,
266
+ overflow: "hidden",
267
+ textOverflow: "ellipsis",
268
+ whiteSpace: "nowrap"
269
+ },
270
+ children: getFullName()
271
+ }
272
+ ),
273
+ /* @__PURE__ */ jsxRuntime.jsx(
274
+ "p",
275
+ {
276
+ style: {
277
+ fontSize: "12px",
278
+ lineHeight: "16px",
279
+ color: "var(--color-alias-text-colors-tertiary, #475272)",
280
+ margin: 0
281
+ },
282
+ children: roleLabel
283
+ }
284
+ )
285
+ ] }),
286
+ /* @__PURE__ */ jsxRuntime.jsx(
287
+ "button",
288
+ {
289
+ onClick: onLogout,
290
+ title: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A",
291
+ onMouseEnter: (e) => {
292
+ e.currentTarget.style.backgroundColor = "var(--color-foundations-fuan-pallet-light, #ffd2d2)";
293
+ e.currentTarget.style.color = "var(--color-alias-semantic-critical, #f21515)";
294
+ },
295
+ onMouseLeave: (e) => {
296
+ e.currentTarget.style.backgroundColor = "transparent";
297
+ e.currentTarget.style.color = "var(--color-alias-semantic-critical, #f21515)";
298
+ },
299
+ style: {
300
+ width: "36px",
301
+ height: "36px",
302
+ borderRadius: "8px",
303
+ border: "none",
304
+ background: "transparent",
305
+ color: "var(--color-alias-semantic-critical, #f21515)",
306
+ cursor: "pointer",
307
+ display: "flex",
308
+ alignItems: "center",
309
+ justifyContent: "center",
310
+ transition: "background-color 0.15s ease",
311
+ flexShrink: 0
312
+ },
313
+ children: /* @__PURE__ */ jsxRuntime.jsx(LogoutIcon, {})
314
+ }
315
+ )
316
+ ]
317
+ }
318
+ );
319
+ }
320
+ function StaffSidebar({
321
+ orgLogo,
322
+ orgName,
323
+ orgSubtitle,
324
+ menuItems,
325
+ bottomMenuItems,
326
+ user,
327
+ roleLabel,
328
+ onNavigate,
329
+ onLogout,
330
+ currentPath,
331
+ width = "280px",
332
+ className
333
+ }) {
334
+ return /* @__PURE__ */ jsxRuntime.jsxs(
335
+ "aside",
336
+ {
337
+ className,
338
+ style: {
339
+ position: "fixed",
340
+ top: 0,
341
+ left: 0,
342
+ height: "100vh",
343
+ width,
344
+ background: "#fff",
345
+ borderRight: "1px solid var(--color-border-colors-neutral, #c8cedd)",
346
+ display: "flex",
347
+ flexDirection: "column",
348
+ zIndex: 40,
349
+ overflow: "hidden"
350
+ },
351
+ children: [
352
+ /* @__PURE__ */ jsxRuntime.jsx(
353
+ SidebarHeader,
354
+ {
355
+ orgLogo,
356
+ orgName,
357
+ orgSubtitle
358
+ }
359
+ ),
360
+ /* @__PURE__ */ jsxRuntime.jsx(
361
+ SidebarMenu,
362
+ {
363
+ menuItems,
364
+ onItemClick: onNavigate,
365
+ currentPath
366
+ }
367
+ ),
368
+ bottomMenuItems && bottomMenuItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
369
+ SidebarMenu,
370
+ {
371
+ menuItems: bottomMenuItems,
372
+ onItemClick: onNavigate,
373
+ currentPath
374
+ }
375
+ ),
376
+ /* @__PURE__ */ jsxRuntime.jsx(
377
+ SidebarUserProfile,
378
+ {
379
+ user,
380
+ roleLabel,
381
+ onLogout
382
+ }
383
+ )
384
+ ]
385
+ }
386
+ );
387
+ }
388
+ function BellIcon() {
389
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "24", viewBox: "0 0 22 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
390
+ "path",
391
+ {
392
+ d: "M21.2321 13.4463L19.3618 6.71712C18.8136 4.74574 17.6222 3.01418 15.9769 1.79767C14.3316 0.581165 12.3269 -0.0504751 10.2814 0.00315377C8.23593 0.0567826 6.26708 0.792603 4.6878 2.09365C3.10852 3.3947 2.00945 5.18632 1.5653 7.18371L0.11728 13.6954C-0.0426654 14.4149 -0.0389674 15.1611 0.128101 15.879C0.29517 16.5969 0.621344 17.2681 1.08254 17.8431C1.54374 18.418 2.12818 18.8821 2.79272 19.2009C3.45727 19.5198 4.18494 19.6853 4.92202 19.6853H6.01861C6.24454 20.7979 6.84817 21.7982 7.72723 22.5167C8.60629 23.2352 9.70671 23.6277 10.842 23.6277C11.9774 23.6277 13.0778 23.2352 13.9569 22.5167C14.8359 21.7982 15.4396 20.7979 15.6655 19.6853H16.4904C17.2492 19.6853 17.9977 19.5099 18.6774 19.1728C19.3572 18.8357 19.9498 18.346 20.409 17.742C20.8682 17.1379 21.1815 16.4359 21.3245 15.6907C21.4674 14.9455 21.4352 14.1774 21.2321 13.4463ZM10.842 21.654C10.2334 21.6515 9.64049 21.461 9.1443 21.1086C8.6481 20.7562 8.27291 20.2591 8.07005 19.6853H13.614C13.4112 20.2591 13.036 20.7562 12.5398 21.1086C12.0436 21.461 11.4506 21.6515 10.842 21.654ZM18.8411 16.55C18.5668 16.9139 18.2114 17.2088 17.8032 17.4113C17.3949 17.6138 16.9451 17.7183 16.4894 17.7165H4.92202C4.47982 17.7164 4.04328 17.6171 3.64463 17.4257C3.24598 17.2344 2.89539 16.9559 2.61874 16.611C2.34208 16.266 2.14643 15.8633 2.04622 15.4326C1.94602 15.0019 1.94381 14.5542 2.03977 14.1226L3.4868 7.60994C3.83561 6.04105 4.69886 4.63379 5.93932 3.61186C7.17978 2.58992 8.72625 2.01197 10.3329 1.96988C11.9395 1.92779 13.5142 2.42398 14.8064 3.37956C16.0987 4.33515 17.0344 5.69528 17.4649 7.24376L19.3352 13.9729C19.4588 14.4114 19.4785 14.8725 19.3927 15.3199C19.3069 15.7672 19.1181 16.1884 18.8411 16.55Z",
393
+ fill: "var(--color-alias-color-brand-text-dark, #05010e)"
394
+ }
395
+ ) });
396
+ }
397
+ function HamburgerIcon() {
398
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "18", viewBox: "0 0 27 18", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
399
+ "path",
400
+ {
401
+ d: "M1.1875 17.8426C0.851042 17.8426 0.569077 17.7287 0.341604 17.501C0.113868 17.2735 0 16.9914 0 16.6547C0 16.3182 0.113868 16.0363 0.341604 15.8088C0.569077 15.5816 0.851042 15.468 1.1875 15.468H25.7292C26.0656 15.468 26.3476 15.5817 26.5751 15.8092C26.8028 16.0369 26.9167 16.3192 26.9167 16.6559C26.9167 16.9923 26.8028 17.2743 26.5751 17.5018C26.3476 17.729 26.0656 17.8426 25.7292 17.8426H1.1875ZM1.1875 10.1088C0.851042 10.1088 0.569077 9.99492 0.341604 9.76719C0.113868 9.53945 0 9.25735 0 8.9209C0 8.58417 0.113868 8.30221 0.341604 8.075C0.569077 7.84753 0.851042 7.73379 1.1875 7.73379H25.7292C26.0656 7.73379 26.3476 7.84766 26.5751 8.0754C26.8028 8.30313 26.9167 8.58523 26.9167 8.92169C26.9167 9.25841 26.8028 9.54037 26.5751 9.76758C26.3476 9.99506 26.0656 10.1088 25.7292 10.1088H1.1875ZM1.1875 2.3746C0.851042 2.3746 0.569077 2.26087 0.341604 2.0334C0.113868 1.80566 0 1.52343 0 1.18671C0 0.850249 0.113868 0.568284 0.341604 0.340812C0.569077 0.113604 0.851042 0 1.1875 0H25.7292C26.0656 0 26.3476 0.113868 26.5751 0.341604C26.8028 0.569077 26.9167 0.851174 26.9167 1.1879C26.9167 1.52435 26.8028 1.80632 26.5751 2.03379C26.3476 2.261 26.0656 2.3746 25.7292 2.3746H1.1875Z",
402
+ fill: "var(--color-alias-color-brand-text-dark, #05010e)"
403
+ }
404
+ ) });
405
+ }
406
+ function getNotifBg(type) {
407
+ const map = {
408
+ success: "#dcfce7",
409
+ warning: "#fef9c3",
410
+ error: "#fee2e2",
411
+ reminder: "#f3e8ff",
412
+ info: "#dbeafe"
413
+ };
414
+ return map[type] || map.info;
415
+ }
416
+ function getNotifIcon(type) {
417
+ const map = {
418
+ success: "\u2713",
419
+ warning: "!",
420
+ error: "\u2715",
421
+ reminder: "\u23F0",
422
+ info: "i"
423
+ };
424
+ return map[type] || map.info;
425
+ }
426
+ function UserHeader({
427
+ user,
428
+ notifications = [],
429
+ onToggleSidebar,
430
+ notificationBell,
431
+ onMarkAllRead,
432
+ onViewAll,
433
+ className
434
+ }) {
435
+ const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
436
+ const firstChar = user?.firstName?.charAt(0) || "\u0E1C";
437
+ const [isNotifOpen, setIsNotifOpen] = react.useState(false);
438
+ const notifRef = react.useRef(null);
439
+ react.useEffect(() => {
440
+ const handleClickOutside = (e) => {
441
+ if (notifRef.current && !notifRef.current.contains(e.target)) {
442
+ setIsNotifOpen(false);
443
+ }
444
+ };
445
+ document.addEventListener("mousedown", handleClickOutside);
446
+ return () => document.removeEventListener("mousedown", handleClickOutside);
447
+ }, []);
448
+ const unreadCount = notifications.filter((n) => !n.isRead).length;
449
+ return /* @__PURE__ */ jsxRuntime.jsx(
450
+ "header",
451
+ {
452
+ className,
453
+ style: {
454
+ background: "#fff",
455
+ boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
456
+ position: "sticky",
457
+ top: 0,
458
+ zIndex: 10
459
+ },
460
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
461
+ "div",
462
+ {
463
+ style: {
464
+ display: "flex",
465
+ alignItems: "center",
466
+ justifyContent: "space-between",
467
+ padding: "14px 20px"
468
+ },
469
+ children: [
470
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
471
+ user?.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
472
+ "img",
473
+ {
474
+ src: user.pictureUrl,
475
+ alt: displayName,
476
+ style: {
477
+ width: "44px",
478
+ height: "44px",
479
+ borderRadius: "50%",
480
+ objectFit: "cover",
481
+ border: "2px solid var(--color-alias-color-brand-surface, #faf9e5)"
482
+ }
483
+ }
484
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
485
+ "div",
486
+ {
487
+ style: {
488
+ width: "44px",
489
+ height: "44px",
490
+ borderRadius: "50%",
491
+ background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
492
+ display: "flex",
493
+ alignItems: "center",
494
+ justifyContent: "center",
495
+ boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
496
+ },
497
+ children: /* @__PURE__ */ jsxRuntime.jsx(
498
+ "span",
499
+ {
500
+ style: { color: "#fff", fontSize: "18px", fontWeight: 600 },
501
+ children: firstChar
502
+ }
503
+ )
504
+ }
505
+ ),
506
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
507
+ "p",
508
+ {
509
+ style: {
510
+ fontSize: "14px",
511
+ fontWeight: 600,
512
+ color: "var(--color-alias-color-brand-text-dark, #05010e)",
513
+ margin: 0
514
+ },
515
+ children: [
516
+ "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
517
+ " ",
518
+ /* @__PURE__ */ jsxRuntime.jsx(
519
+ "span",
520
+ {
521
+ style: {
522
+ color: "var(--color-alias-color-brand-primary, #1e7d55)"
523
+ },
524
+ children: displayName
525
+ }
526
+ )
527
+ ]
528
+ }
529
+ ) })
530
+ ] }),
531
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
532
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, ref: notifRef, children: [
533
+ notificationBell || /* @__PURE__ */ jsxRuntime.jsxs(
534
+ "button",
535
+ {
536
+ onClick: () => setIsNotifOpen(!isNotifOpen),
537
+ style: {
538
+ padding: "10px",
539
+ borderRadius: "8px",
540
+ border: "none",
541
+ background: "transparent",
542
+ cursor: "pointer",
543
+ position: "relative",
544
+ display: "flex",
545
+ alignItems: "center",
546
+ justifyContent: "center"
547
+ },
548
+ onMouseEnter: (e) => {
549
+ e.currentTarget.style.backgroundColor = "#f3f4f6";
550
+ },
551
+ onMouseLeave: (e) => {
552
+ e.currentTarget.style.backgroundColor = "transparent";
553
+ },
554
+ children: [
555
+ /* @__PURE__ */ jsxRuntime.jsx(BellIcon, {}),
556
+ unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
557
+ "span",
558
+ {
559
+ style: {
560
+ position: "absolute",
561
+ top: "6px",
562
+ right: "6px",
563
+ minWidth: "18px",
564
+ height: "18px",
565
+ background: "var(--color-alias-semantic-critical, #f21515)",
566
+ borderRadius: "50%",
567
+ display: "flex",
568
+ alignItems: "center",
569
+ justifyContent: "center",
570
+ fontSize: "10px",
571
+ fontWeight: 700,
572
+ color: "#fff",
573
+ padding: "0 4px",
574
+ border: "2px solid #fff"
575
+ },
576
+ children: unreadCount
577
+ }
578
+ )
579
+ ]
580
+ }
581
+ ),
582
+ isNotifOpen && /* @__PURE__ */ jsxRuntime.jsxs(
583
+ "div",
584
+ {
585
+ style: {
586
+ position: "absolute",
587
+ right: 0,
588
+ marginTop: "8px",
589
+ width: "360px",
590
+ background: "#fff",
591
+ borderRadius: "12px",
592
+ boxShadow: "0 10px 40px rgba(0,0,0,0.12)",
593
+ zIndex: 50,
594
+ overflow: "hidden",
595
+ border: "1px solid #e5e7eb"
596
+ },
597
+ children: [
598
+ /* @__PURE__ */ jsxRuntime.jsxs(
599
+ "div",
600
+ {
601
+ style: {
602
+ padding: "16px",
603
+ borderBottom: "1px solid #f3f4f6",
604
+ display: "flex",
605
+ alignItems: "center",
606
+ justifyContent: "space-between",
607
+ background: "#fafafa"
608
+ },
609
+ children: [
610
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: "#111" }, children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }),
611
+ onMarkAllRead && /* @__PURE__ */ jsxRuntime.jsx(
612
+ "button",
613
+ {
614
+ onClick: onMarkAllRead,
615
+ style: {
616
+ fontSize: "12px",
617
+ color: "var(--color-alias-color-brand-primary, #1e7d55)",
618
+ background: "none",
619
+ border: "none",
620
+ cursor: "pointer",
621
+ fontWeight: 500
622
+ },
623
+ children: "\u0E2D\u0E48\u0E32\u0E19\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14"
624
+ }
625
+ )
626
+ ]
627
+ }
628
+ ),
629
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxHeight: "60vh", overflowY: "auto" }, children: notifications.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
630
+ "div",
631
+ {
632
+ style: {
633
+ padding: "32px",
634
+ textAlign: "center",
635
+ color: "#9ca3af",
636
+ fontSize: "14px"
637
+ },
638
+ children: "\u{1F514} \u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E43\u0E2B\u0E21\u0E48"
639
+ }
640
+ ) : notifications.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
641
+ "div",
642
+ {
643
+ style: {
644
+ padding: "12px 16px",
645
+ borderBottom: "1px solid #f9fafb",
646
+ cursor: "pointer",
647
+ background: !item.isRead ? "rgba(219,234,254,0.3)" : "transparent",
648
+ position: "relative",
649
+ display: "flex",
650
+ gap: "12px",
651
+ alignItems: "flex-start"
652
+ },
653
+ onMouseEnter: (e) => {
654
+ e.currentTarget.style.backgroundColor = "#f9fafb";
655
+ },
656
+ onMouseLeave: (e) => {
657
+ e.currentTarget.style.backgroundColor = !item.isRead ? "rgba(219,234,254,0.3)" : "transparent";
658
+ },
659
+ children: [
660
+ !item.isRead && /* @__PURE__ */ jsxRuntime.jsx(
661
+ "span",
662
+ {
663
+ style: {
664
+ position: "absolute",
665
+ top: "12px",
666
+ right: "12px",
667
+ width: "8px",
668
+ height: "8px",
669
+ background: "#ef4444",
670
+ borderRadius: "50%"
671
+ }
672
+ }
673
+ ),
674
+ /* @__PURE__ */ jsxRuntime.jsx(
675
+ "div",
676
+ {
677
+ style: {
678
+ width: "32px",
679
+ height: "32px",
680
+ borderRadius: "50%",
681
+ background: getNotifBg(item.type),
682
+ display: "flex",
683
+ alignItems: "center",
684
+ justifyContent: "center",
685
+ fontSize: "13px",
686
+ flexShrink: 0,
687
+ marginTop: "2px"
688
+ },
689
+ children: getNotifIcon(item.type)
690
+ }
691
+ ),
692
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
693
+ /* @__PURE__ */ jsxRuntime.jsx(
694
+ "p",
695
+ {
696
+ style: {
697
+ fontSize: "13px",
698
+ fontWeight: !item.isRead ? 600 : 500,
699
+ color: "#111",
700
+ margin: "0 0 2px"
701
+ },
702
+ children: item.title
703
+ }
704
+ ),
705
+ /* @__PURE__ */ jsxRuntime.jsx(
706
+ "p",
707
+ {
708
+ style: {
709
+ fontSize: "12px",
710
+ color: "#6b7280",
711
+ margin: "0 0 4px",
712
+ lineHeight: "18px"
713
+ },
714
+ children: item.description
715
+ }
716
+ ),
717
+ /* @__PURE__ */ jsxRuntime.jsx(
718
+ "p",
719
+ {
720
+ style: {
721
+ fontSize: "10px",
722
+ color: "#9ca3af",
723
+ margin: 0,
724
+ fontWeight: 500
725
+ },
726
+ children: item.date
727
+ }
728
+ )
729
+ ] })
730
+ ]
731
+ },
732
+ item.id
733
+ )) }),
734
+ onViewAll && /* @__PURE__ */ jsxRuntime.jsx(
735
+ "div",
736
+ {
737
+ style: {
738
+ padding: "10px",
739
+ borderTop: "1px solid #f3f4f6",
740
+ textAlign: "center",
741
+ background: "#fafafa"
742
+ },
743
+ children: /* @__PURE__ */ jsxRuntime.jsx(
744
+ "button",
745
+ {
746
+ onClick: onViewAll,
747
+ style: {
748
+ fontSize: "13px",
749
+ color: "#6b7280",
750
+ background: "none",
751
+ border: "none",
752
+ cursor: "pointer",
753
+ fontWeight: 500,
754
+ width: "100%",
755
+ padding: "4px"
756
+ },
757
+ children: "\u0E14\u0E39\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14"
758
+ }
759
+ )
760
+ }
761
+ )
762
+ ]
763
+ }
764
+ )
765
+ ] }),
766
+ onToggleSidebar && /* @__PURE__ */ jsxRuntime.jsx(
767
+ "button",
768
+ {
769
+ onClick: onToggleSidebar,
770
+ style: {
771
+ padding: "10px",
772
+ borderRadius: "8px",
773
+ border: "none",
774
+ background: "transparent",
775
+ cursor: "pointer",
776
+ display: "flex",
777
+ alignItems: "center",
778
+ justifyContent: "center"
779
+ },
780
+ onMouseEnter: (e) => {
781
+ e.currentTarget.style.backgroundColor = "#f3f4f6";
782
+ },
783
+ onMouseLeave: (e) => {
784
+ e.currentTarget.style.backgroundColor = "transparent";
785
+ },
786
+ children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon, {})
787
+ }
788
+ )
789
+ ] })
790
+ ]
791
+ }
792
+ )
793
+ }
794
+ );
795
+ }
796
+ function LogoutIcon2() {
797
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
798
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
799
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 17 21 12 16 7" }),
800
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
801
+ ] });
802
+ }
803
+ function UserSidebar({
804
+ user,
805
+ roleLabel,
806
+ menuItems,
807
+ onNavigate,
808
+ onLogout,
809
+ isOpen,
810
+ onClose,
811
+ roleColor = "var(--color-alias-semantic-warning, orange)"
812
+ }) {
813
+ react.useEffect(() => {
814
+ if (isOpen) {
815
+ document.body.style.overflow = "hidden";
816
+ } else {
817
+ document.body.style.overflow = "";
818
+ }
819
+ return () => {
820
+ document.body.style.overflow = "";
821
+ };
822
+ }, [isOpen]);
823
+ const getFullName = () => {
824
+ if (!user) return "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
825
+ if (user.firstName && user.lastName) return `${user.firstName} ${user.lastName}`;
826
+ return user.firstName || user.lastName || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
827
+ };
828
+ const getInitial = () => {
829
+ if (!user) return "?";
830
+ return user.firstName?.charAt(0) || user.lastName?.charAt(0) || "?";
831
+ };
832
+ const handleMenuClick = (path) => {
833
+ onNavigate(path);
834
+ onClose();
835
+ };
836
+ const handleLogout = () => {
837
+ onClose();
838
+ onLogout();
839
+ };
840
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
841
+ isOpen && /* @__PURE__ */ jsxRuntime.jsx(
842
+ "div",
843
+ {
844
+ onClick: onClose,
845
+ style: {
846
+ position: "fixed",
847
+ inset: 0,
848
+ background: "rgba(0,0,0,0.5)",
849
+ zIndex: 40,
850
+ transition: "opacity 0.3s ease"
851
+ }
852
+ }
853
+ ),
854
+ /* @__PURE__ */ jsxRuntime.jsxs(
855
+ "aside",
856
+ {
857
+ style: {
858
+ position: "fixed",
859
+ top: 0,
860
+ right: 0,
861
+ height: "100%",
862
+ width: "80vw",
863
+ maxWidth: "320px",
864
+ background: "#fff",
865
+ boxShadow: "-4px 0 24px rgba(0,0,0,0.12)",
866
+ zIndex: 50,
867
+ transform: isOpen ? "translateX(0)" : "translateX(100%)",
868
+ transition: "transform 0.3s ease",
869
+ display: "flex",
870
+ flexDirection: "column"
871
+ },
872
+ children: [
873
+ user && /* @__PURE__ */ jsxRuntime.jsx(
874
+ "div",
875
+ {
876
+ style: {
877
+ padding: "20px",
878
+ borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
879
+ },
880
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
881
+ user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
882
+ "img",
883
+ {
884
+ src: user.pictureUrl,
885
+ alt: getFullName(),
886
+ style: {
887
+ width: "56px",
888
+ height: "56px",
889
+ borderRadius: "50%",
890
+ objectFit: "cover",
891
+ boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
892
+ }
893
+ }
894
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
895
+ "div",
896
+ {
897
+ style: {
898
+ width: "56px",
899
+ height: "56px",
900
+ borderRadius: "50%",
901
+ background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
902
+ display: "flex",
903
+ alignItems: "center",
904
+ justifyContent: "center",
905
+ color: "#fff",
906
+ fontWeight: 700,
907
+ fontSize: "20px",
908
+ boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
909
+ },
910
+ children: getInitial()
911
+ }
912
+ ),
913
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
914
+ /* @__PURE__ */ jsxRuntime.jsx(
915
+ "p",
916
+ {
917
+ style: {
918
+ fontWeight: 700,
919
+ fontSize: "16px",
920
+ color: "var(--color-alias-text-colors-primary, #060d26)",
921
+ margin: 0,
922
+ overflow: "hidden",
923
+ textOverflow: "ellipsis",
924
+ whiteSpace: "nowrap"
925
+ },
926
+ children: getFullName()
927
+ }
928
+ ),
929
+ /* @__PURE__ */ jsxRuntime.jsxs(
930
+ "p",
931
+ {
932
+ style: {
933
+ fontSize: "13px",
934
+ color: "var(--color-alias-text-colors-tertiary, #6b7280)",
935
+ margin: "2px 0 0",
936
+ display: "flex",
937
+ alignItems: "center",
938
+ gap: "6px"
939
+ },
940
+ children: [
941
+ /* @__PURE__ */ jsxRuntime.jsx(
942
+ "span",
943
+ {
944
+ style: {
945
+ width: "8px",
946
+ height: "8px",
947
+ borderRadius: "50%",
948
+ background: roleColor,
949
+ display: "inline-block"
950
+ }
951
+ }
952
+ ),
953
+ roleLabel
954
+ ]
955
+ }
956
+ )
957
+ ] })
958
+ ] })
959
+ }
960
+ ),
961
+ /* @__PURE__ */ jsxRuntime.jsx("nav", { style: { flex: 1, padding: "20px", overflowY: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "4px" }, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
962
+ /* @__PURE__ */ jsxRuntime.jsxs(
963
+ "button",
964
+ {
965
+ onClick: () => item.path && handleMenuClick(item.path),
966
+ onMouseEnter: (e) => {
967
+ e.currentTarget.style.backgroundColor = "#f9fafb";
968
+ },
969
+ onMouseLeave: (e) => {
970
+ e.currentTarget.style.backgroundColor = "transparent";
971
+ },
972
+ style: {
973
+ width: "100%",
974
+ display: "flex",
975
+ alignItems: "center",
976
+ gap: "16px",
977
+ padding: "14px 16px",
978
+ borderRadius: "8px",
979
+ border: "none",
980
+ background: "transparent",
981
+ color: "var(--color-alias-text-colors-primary, #374151)",
982
+ cursor: "pointer",
983
+ transition: "background-color 0.15s ease",
984
+ fontSize: "15px",
985
+ fontWeight: 500,
986
+ textAlign: "left"
987
+ },
988
+ children: [
989
+ item.icon && /* @__PURE__ */ jsxRuntime.jsx(
990
+ "span",
991
+ {
992
+ style: {
993
+ width: "28px",
994
+ height: "28px",
995
+ display: "flex",
996
+ alignItems: "center",
997
+ justifyContent: "center",
998
+ color: "var(--color-alias-text-colors-tertiary, #6b7280)",
999
+ flexShrink: 0
1000
+ },
1001
+ children: item.icon
1002
+ }
1003
+ ),
1004
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: item.title })
1005
+ ]
1006
+ }
1007
+ ),
1008
+ item.dividerAfter && /* @__PURE__ */ jsxRuntime.jsx(
1009
+ "hr",
1010
+ {
1011
+ style: {
1012
+ border: "none",
1013
+ borderTop: "1px solid var(--color-border-colors-neutral, #e5e7eb)",
1014
+ margin: "8px 0"
1015
+ }
1016
+ }
1017
+ )
1018
+ ] }, item.id)) }) }),
1019
+ /* @__PURE__ */ jsxRuntime.jsx(
1020
+ "div",
1021
+ {
1022
+ style: {
1023
+ padding: "20px",
1024
+ borderTop: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
1025
+ },
1026
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1027
+ "button",
1028
+ {
1029
+ onClick: handleLogout,
1030
+ onMouseEnter: (e) => {
1031
+ e.currentTarget.style.backgroundColor = "#fef2f2";
1032
+ },
1033
+ onMouseLeave: (e) => {
1034
+ e.currentTarget.style.backgroundColor = "transparent";
1035
+ },
1036
+ style: {
1037
+ width: "100%",
1038
+ display: "flex",
1039
+ alignItems: "center",
1040
+ gap: "16px",
1041
+ padding: "14px 16px",
1042
+ borderRadius: "8px",
1043
+ border: "none",
1044
+ background: "transparent",
1045
+ color: "var(--color-alias-semantic-critical, #ef4444)",
1046
+ cursor: "pointer",
1047
+ transition: "background-color 0.15s ease",
1048
+ fontSize: "15px",
1049
+ fontWeight: 500
1050
+ },
1051
+ children: [
1052
+ /* @__PURE__ */ jsxRuntime.jsx(LogoutIcon2, {}),
1053
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })
1054
+ ]
1055
+ }
1056
+ )
1057
+ }
1058
+ )
1059
+ ]
1060
+ }
1061
+ )
1062
+ ] });
1063
+ }
1064
+
1065
+ exports.SidebarHeader = SidebarHeader;
1066
+ exports.SidebarMenu = SidebarMenu;
1067
+ exports.SidebarUserProfile = SidebarUserProfile;
1068
+ exports.StaffSidebar = StaffSidebar;
1069
+ exports.UserHeader = UserHeader;
1070
+ exports.UserSidebar = UserSidebar;
1071
+ //# sourceMappingURL=index.js.map
1072
+ //# sourceMappingURL=index.js.map