gov-layout 1.2.4 → 1.2.6
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/README.md +8 -0
- package/dist/index.d.mts +12 -4
- package/dist/index.d.ts +12 -4
- package/dist/index.js +400 -202
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +400 -202
- package/dist/index.mjs.map +1 -1
- package/package.json +43 -43
package/dist/index.mjs
CHANGED
|
@@ -59,7 +59,7 @@ function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
|
|
|
59
59
|
fontWeight: 700,
|
|
60
60
|
fontSize: "16px",
|
|
61
61
|
lineHeight: "22px",
|
|
62
|
-
color: "var(--
|
|
62
|
+
color: "var(--color-alias-color-brand-text-dark, #05010e)",
|
|
63
63
|
margin: 0,
|
|
64
64
|
overflow: "hidden",
|
|
65
65
|
textOverflow: "ellipsis",
|
|
@@ -586,11 +586,31 @@ function LogoutIcon() {
|
|
|
586
586
|
}
|
|
587
587
|
);
|
|
588
588
|
}
|
|
589
|
+
function ProfileIcon() {
|
|
590
|
+
return /* @__PURE__ */ jsxs(
|
|
591
|
+
"svg",
|
|
592
|
+
{
|
|
593
|
+
width: "18",
|
|
594
|
+
height: "18",
|
|
595
|
+
viewBox: "0 0 24 24",
|
|
596
|
+
fill: "none",
|
|
597
|
+
stroke: "currentColor",
|
|
598
|
+
strokeWidth: "2",
|
|
599
|
+
strokeLinecap: "round",
|
|
600
|
+
strokeLinejoin: "round",
|
|
601
|
+
children: [
|
|
602
|
+
/* @__PURE__ */ jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
603
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
|
|
604
|
+
]
|
|
605
|
+
}
|
|
606
|
+
);
|
|
607
|
+
}
|
|
589
608
|
function SidebarUserProfile({
|
|
590
609
|
user,
|
|
591
610
|
roleLabel,
|
|
592
611
|
onLogout,
|
|
593
|
-
collapsed
|
|
612
|
+
collapsed,
|
|
613
|
+
onProfile
|
|
594
614
|
}) {
|
|
595
615
|
if (!user) return null;
|
|
596
616
|
const getFullName = () => {
|
|
@@ -611,36 +631,69 @@ function SidebarUserProfile({
|
|
|
611
631
|
alignItems: "center",
|
|
612
632
|
gap: "12px"
|
|
613
633
|
}, children: [
|
|
614
|
-
|
|
615
|
-
"
|
|
634
|
+
/* @__PURE__ */ jsx(
|
|
635
|
+
"div",
|
|
616
636
|
{
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
637
|
+
onClick: onProfile,
|
|
638
|
+
title: onProfile ? "\u0E14\u0E39\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C" : getFullName(),
|
|
639
|
+
style: { cursor: onProfile ? "pointer" : "default" },
|
|
640
|
+
children: user.pictureUrl ? /* @__PURE__ */ jsx(
|
|
641
|
+
"img",
|
|
642
|
+
{
|
|
643
|
+
src: user.pictureUrl,
|
|
644
|
+
alt: getFullName(),
|
|
645
|
+
style: {
|
|
646
|
+
width: "36px",
|
|
647
|
+
height: "36px",
|
|
648
|
+
borderRadius: "50%",
|
|
649
|
+
objectFit: "cover"
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
) : /* @__PURE__ */ jsx(
|
|
653
|
+
"div",
|
|
654
|
+
{
|
|
655
|
+
style: {
|
|
656
|
+
width: "36px",
|
|
657
|
+
height: "36px",
|
|
658
|
+
borderRadius: "50%",
|
|
659
|
+
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
660
|
+
display: "flex",
|
|
661
|
+
alignItems: "center",
|
|
662
|
+
justifyContent: "center",
|
|
663
|
+
color: "#fff",
|
|
664
|
+
fontWeight: 700,
|
|
665
|
+
fontSize: "14px"
|
|
666
|
+
},
|
|
667
|
+
children: getInitial()
|
|
668
|
+
}
|
|
669
|
+
)
|
|
626
670
|
}
|
|
627
|
-
)
|
|
628
|
-
|
|
671
|
+
),
|
|
672
|
+
onProfile && /* @__PURE__ */ jsx(
|
|
673
|
+
"button",
|
|
629
674
|
{
|
|
630
|
-
|
|
675
|
+
onClick: onProfile,
|
|
676
|
+
title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
|
|
677
|
+
onMouseEnter: (e) => {
|
|
678
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
679
|
+
},
|
|
680
|
+
onMouseLeave: (e) => {
|
|
681
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
682
|
+
},
|
|
631
683
|
style: {
|
|
632
684
|
width: "36px",
|
|
633
685
|
height: "36px",
|
|
634
|
-
borderRadius: "
|
|
635
|
-
|
|
686
|
+
borderRadius: "8px",
|
|
687
|
+
border: "none",
|
|
688
|
+
background: "transparent",
|
|
689
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
690
|
+
cursor: "pointer",
|
|
636
691
|
display: "flex",
|
|
637
692
|
alignItems: "center",
|
|
638
693
|
justifyContent: "center",
|
|
639
|
-
|
|
640
|
-
fontWeight: 700,
|
|
641
|
-
fontSize: "14px"
|
|
694
|
+
transition: "background-color 0.15s ease"
|
|
642
695
|
},
|
|
643
|
-
children:
|
|
696
|
+
children: /* @__PURE__ */ jsx(ProfileIcon, {})
|
|
644
697
|
}
|
|
645
698
|
),
|
|
646
699
|
/* @__PURE__ */ jsx(
|
|
@@ -683,56 +736,107 @@ function SidebarUserProfile({
|
|
|
683
736
|
gap: "12px"
|
|
684
737
|
},
|
|
685
738
|
children: [
|
|
686
|
-
|
|
687
|
-
"
|
|
739
|
+
/* @__PURE__ */ jsxs(
|
|
740
|
+
"div",
|
|
688
741
|
{
|
|
689
|
-
|
|
690
|
-
|
|
742
|
+
onClick: onProfile,
|
|
743
|
+
onMouseEnter: (e) => {
|
|
744
|
+
if (onProfile) e.currentTarget.style.opacity = "0.8";
|
|
745
|
+
},
|
|
746
|
+
onMouseLeave: (e) => {
|
|
747
|
+
if (onProfile) e.currentTarget.style.opacity = "1";
|
|
748
|
+
},
|
|
691
749
|
style: {
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
750
|
+
display: "flex",
|
|
751
|
+
alignItems: "center",
|
|
752
|
+
gap: "12px",
|
|
753
|
+
flex: 1,
|
|
754
|
+
minWidth: 0,
|
|
755
|
+
cursor: onProfile ? "pointer" : "default",
|
|
756
|
+
transition: "opacity 0.15s ease"
|
|
757
|
+
},
|
|
758
|
+
children: [
|
|
759
|
+
user.pictureUrl ? /* @__PURE__ */ jsx(
|
|
760
|
+
"img",
|
|
761
|
+
{
|
|
762
|
+
src: user.pictureUrl,
|
|
763
|
+
alt: getFullName(),
|
|
764
|
+
style: {
|
|
765
|
+
width: "40px",
|
|
766
|
+
height: "40px",
|
|
767
|
+
borderRadius: "50%",
|
|
768
|
+
objectFit: "cover",
|
|
769
|
+
flexShrink: 0
|
|
770
|
+
}
|
|
771
|
+
}
|
|
772
|
+
) : /* @__PURE__ */ jsx(
|
|
773
|
+
"div",
|
|
774
|
+
{
|
|
775
|
+
style: {
|
|
776
|
+
width: "40px",
|
|
777
|
+
height: "40px",
|
|
778
|
+
borderRadius: "50%",
|
|
779
|
+
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
780
|
+
display: "flex",
|
|
781
|
+
alignItems: "center",
|
|
782
|
+
justifyContent: "center",
|
|
783
|
+
color: "#fff",
|
|
784
|
+
fontWeight: 700,
|
|
785
|
+
fontSize: "16px",
|
|
786
|
+
flexShrink: 0
|
|
787
|
+
},
|
|
788
|
+
children: getInitial()
|
|
789
|
+
}
|
|
790
|
+
),
|
|
791
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
792
|
+
/* @__PURE__ */ jsx("p", { style: {
|
|
793
|
+
fontWeight: 600,
|
|
794
|
+
fontSize: "14px",
|
|
795
|
+
lineHeight: "20px",
|
|
796
|
+
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
797
|
+
margin: 0,
|
|
798
|
+
overflow: "hidden",
|
|
799
|
+
textOverflow: "ellipsis",
|
|
800
|
+
whiteSpace: "nowrap"
|
|
801
|
+
}, children: getFullName() }),
|
|
802
|
+
/* @__PURE__ */ jsx("p", { style: {
|
|
803
|
+
fontSize: "12px",
|
|
804
|
+
lineHeight: "16px",
|
|
805
|
+
color: "var(--color-alias-text-colors-tertiary, #475272)",
|
|
806
|
+
margin: 0
|
|
807
|
+
}, children: roleLabel })
|
|
808
|
+
] })
|
|
809
|
+
]
|
|
698
810
|
}
|
|
699
|
-
)
|
|
700
|
-
|
|
811
|
+
),
|
|
812
|
+
onProfile && /* @__PURE__ */ jsx(
|
|
813
|
+
"button",
|
|
701
814
|
{
|
|
815
|
+
onClick: onProfile,
|
|
816
|
+
title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
|
|
817
|
+
onMouseEnter: (e) => {
|
|
818
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
819
|
+
},
|
|
820
|
+
onMouseLeave: (e) => {
|
|
821
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
822
|
+
},
|
|
702
823
|
style: {
|
|
703
|
-
width: "
|
|
704
|
-
height: "
|
|
705
|
-
borderRadius: "
|
|
706
|
-
|
|
824
|
+
width: "36px",
|
|
825
|
+
height: "36px",
|
|
826
|
+
borderRadius: "8px",
|
|
827
|
+
border: "none",
|
|
828
|
+
background: "transparent",
|
|
829
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
830
|
+
cursor: "pointer",
|
|
707
831
|
display: "flex",
|
|
708
832
|
alignItems: "center",
|
|
709
833
|
justifyContent: "center",
|
|
710
|
-
|
|
711
|
-
fontWeight: 700,
|
|
712
|
-
fontSize: "16px",
|
|
834
|
+
transition: "background-color 0.15s ease",
|
|
713
835
|
flexShrink: 0
|
|
714
836
|
},
|
|
715
|
-
children:
|
|
837
|
+
children: /* @__PURE__ */ jsx(ProfileIcon, {})
|
|
716
838
|
}
|
|
717
839
|
),
|
|
718
|
-
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
719
|
-
/* @__PURE__ */ jsx("p", { style: {
|
|
720
|
-
fontWeight: 600,
|
|
721
|
-
fontSize: "14px",
|
|
722
|
-
lineHeight: "20px",
|
|
723
|
-
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
724
|
-
margin: 0,
|
|
725
|
-
overflow: "hidden",
|
|
726
|
-
textOverflow: "ellipsis",
|
|
727
|
-
whiteSpace: "nowrap"
|
|
728
|
-
}, children: getFullName() }),
|
|
729
|
-
/* @__PURE__ */ jsx("p", { style: {
|
|
730
|
-
fontSize: "12px",
|
|
731
|
-
lineHeight: "16px",
|
|
732
|
-
color: "var(--color-alias-text-colors-tertiary, #475272)",
|
|
733
|
-
margin: 0
|
|
734
|
-
}, children: roleLabel })
|
|
735
|
-
] }),
|
|
736
840
|
/* @__PURE__ */ jsx(
|
|
737
841
|
"button",
|
|
738
842
|
{
|
|
@@ -814,6 +918,7 @@ function StaffSidebar({
|
|
|
814
918
|
roleLabel,
|
|
815
919
|
onNavigate,
|
|
816
920
|
onLogout,
|
|
921
|
+
onProfile,
|
|
817
922
|
currentPath,
|
|
818
923
|
width = "280px",
|
|
819
924
|
className,
|
|
@@ -857,7 +962,7 @@ function StaffSidebar({
|
|
|
857
962
|
left: 0,
|
|
858
963
|
height: "100vh",
|
|
859
964
|
width: currentWidth,
|
|
860
|
-
background: "
|
|
965
|
+
background: "#fff",
|
|
861
966
|
borderRight: "1px solid var(--color-border-colors-neutral, #c8cedd)",
|
|
862
967
|
display: "flex",
|
|
863
968
|
flexDirection: "column",
|
|
@@ -909,6 +1014,7 @@ function StaffSidebar({
|
|
|
909
1014
|
user,
|
|
910
1015
|
roleLabel,
|
|
911
1016
|
onLogout,
|
|
1017
|
+
onProfile,
|
|
912
1018
|
collapsed
|
|
913
1019
|
}
|
|
914
1020
|
)
|
|
@@ -925,7 +1031,7 @@ function StaffSidebar({
|
|
|
925
1031
|
e.currentTarget.style.backgroundColor = "#f3f4f6";
|
|
926
1032
|
},
|
|
927
1033
|
onMouseLeave: (e) => {
|
|
928
|
-
e.currentTarget.style.backgroundColor = "";
|
|
1034
|
+
e.currentTarget.style.backgroundColor = "#fff";
|
|
929
1035
|
},
|
|
930
1036
|
style: {
|
|
931
1037
|
position: "fixed",
|
|
@@ -937,7 +1043,7 @@ function StaffSidebar({
|
|
|
937
1043
|
borderRadius: "0 6px 6px 0",
|
|
938
1044
|
border: "1px solid var(--color-border-colors-neutral, #c8cedd)",
|
|
939
1045
|
borderLeft: "none",
|
|
940
|
-
background: "
|
|
1046
|
+
background: "#fff",
|
|
941
1047
|
cursor: "pointer",
|
|
942
1048
|
display: "flex",
|
|
943
1049
|
alignItems: "center",
|
|
@@ -956,7 +1062,7 @@ function BellIcon2() {
|
|
|
956
1062
|
"path",
|
|
957
1063
|
{
|
|
958
1064
|
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",
|
|
959
|
-
fill: "var(--
|
|
1065
|
+
fill: "var(--color-alias-color-brand-text-dark, #05010e)"
|
|
960
1066
|
}
|
|
961
1067
|
) });
|
|
962
1068
|
}
|
|
@@ -965,7 +1071,7 @@ function HamburgerIcon() {
|
|
|
965
1071
|
"path",
|
|
966
1072
|
{
|
|
967
1073
|
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",
|
|
968
|
-
fill: "var(--
|
|
1074
|
+
fill: "var(--color-alias-color-brand-text-dark, #05010e)"
|
|
969
1075
|
}
|
|
970
1076
|
) });
|
|
971
1077
|
}
|
|
@@ -996,6 +1102,7 @@ function UserHeader({
|
|
|
996
1102
|
notificationBell,
|
|
997
1103
|
onMarkAllRead,
|
|
998
1104
|
onViewAll,
|
|
1105
|
+
onProfile,
|
|
999
1106
|
className
|
|
1000
1107
|
}) {
|
|
1001
1108
|
const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
|
|
@@ -1017,7 +1124,7 @@ function UserHeader({
|
|
|
1017
1124
|
{
|
|
1018
1125
|
className,
|
|
1019
1126
|
style: {
|
|
1020
|
-
background: "
|
|
1127
|
+
background: "#fff",
|
|
1021
1128
|
boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
|
|
1022
1129
|
position: "sticky",
|
|
1023
1130
|
top: 0,
|
|
@@ -1033,67 +1140,88 @@ function UserHeader({
|
|
|
1033
1140
|
padding: "14px 20px"
|
|
1034
1141
|
},
|
|
1035
1142
|
children: [
|
|
1036
|
-
/* @__PURE__ */ jsxs(
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
display: "flex",
|
|
1059
|
-
alignItems: "center",
|
|
1060
|
-
justifyContent: "center",
|
|
1061
|
-
boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
|
|
1062
|
-
},
|
|
1063
|
-
children: /* @__PURE__ */ jsx(
|
|
1064
|
-
"span",
|
|
1143
|
+
/* @__PURE__ */ jsxs(
|
|
1144
|
+
"div",
|
|
1145
|
+
{
|
|
1146
|
+
onClick: onProfile,
|
|
1147
|
+
onMouseEnter: (e) => {
|
|
1148
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1149
|
+
},
|
|
1150
|
+
onMouseLeave: (e) => {
|
|
1151
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
|
|
1152
|
+
},
|
|
1153
|
+
style: {
|
|
1154
|
+
display: "flex",
|
|
1155
|
+
alignItems: "center",
|
|
1156
|
+
gap: "12px",
|
|
1157
|
+
cursor: onProfile ? "pointer" : "default",
|
|
1158
|
+
padding: "4px 8px",
|
|
1159
|
+
borderRadius: "10px",
|
|
1160
|
+
transition: "background-color 0.15s ease"
|
|
1161
|
+
},
|
|
1162
|
+
children: [
|
|
1163
|
+
user?.pictureUrl ? /* @__PURE__ */ jsx(
|
|
1164
|
+
"img",
|
|
1065
1165
|
{
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
{
|
|
1075
|
-
style: {
|
|
1076
|
-
fontSize: "14px",
|
|
1077
|
-
fontWeight: 600,
|
|
1078
|
-
color: "var(--gov-text-primary, #05010e)",
|
|
1079
|
-
margin: 0
|
|
1080
|
-
},
|
|
1081
|
-
children: [
|
|
1082
|
-
"\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
|
|
1083
|
-
" ",
|
|
1084
|
-
/* @__PURE__ */ jsx(
|
|
1085
|
-
"span",
|
|
1086
|
-
{
|
|
1087
|
-
style: {
|
|
1088
|
-
color: "var(--color-alias-color-brand-primary, #1e7d55)"
|
|
1089
|
-
},
|
|
1090
|
-
children: displayName
|
|
1166
|
+
src: user.pictureUrl,
|
|
1167
|
+
alt: displayName,
|
|
1168
|
+
style: {
|
|
1169
|
+
width: "44px",
|
|
1170
|
+
height: "44px",
|
|
1171
|
+
borderRadius: "50%",
|
|
1172
|
+
objectFit: "cover",
|
|
1173
|
+
border: "2px solid var(--color-alias-color-brand-surface, #faf9e5)"
|
|
1091
1174
|
}
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1175
|
+
}
|
|
1176
|
+
) : /* @__PURE__ */ jsx(
|
|
1177
|
+
"div",
|
|
1178
|
+
{
|
|
1179
|
+
style: {
|
|
1180
|
+
width: "44px",
|
|
1181
|
+
height: "44px",
|
|
1182
|
+
borderRadius: "50%",
|
|
1183
|
+
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1184
|
+
display: "flex",
|
|
1185
|
+
alignItems: "center",
|
|
1186
|
+
justifyContent: "center",
|
|
1187
|
+
boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
|
|
1188
|
+
},
|
|
1189
|
+
children: /* @__PURE__ */ jsx(
|
|
1190
|
+
"span",
|
|
1191
|
+
{
|
|
1192
|
+
style: { color: "#fff", fontSize: "18px", fontWeight: 600 },
|
|
1193
|
+
children: firstChar
|
|
1194
|
+
}
|
|
1195
|
+
)
|
|
1196
|
+
}
|
|
1197
|
+
),
|
|
1198
|
+
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
|
|
1199
|
+
"p",
|
|
1200
|
+
{
|
|
1201
|
+
style: {
|
|
1202
|
+
fontSize: "14px",
|
|
1203
|
+
fontWeight: 600,
|
|
1204
|
+
color: "var(--color-alias-color-brand-text-dark, #05010e)",
|
|
1205
|
+
margin: 0
|
|
1206
|
+
},
|
|
1207
|
+
children: [
|
|
1208
|
+
"\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
|
|
1209
|
+
" ",
|
|
1210
|
+
/* @__PURE__ */ jsx(
|
|
1211
|
+
"span",
|
|
1212
|
+
{
|
|
1213
|
+
style: {
|
|
1214
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)"
|
|
1215
|
+
},
|
|
1216
|
+
children: displayName
|
|
1217
|
+
}
|
|
1218
|
+
)
|
|
1219
|
+
]
|
|
1220
|
+
}
|
|
1221
|
+
) })
|
|
1222
|
+
]
|
|
1223
|
+
}
|
|
1224
|
+
),
|
|
1097
1225
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
|
|
1098
1226
|
/* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: notifRef, children: [
|
|
1099
1227
|
notificationBell || /* @__PURE__ */ jsxs(
|
|
@@ -1147,12 +1275,12 @@ function UserHeader({
|
|
|
1147
1275
|
right: 0,
|
|
1148
1276
|
marginTop: "8px",
|
|
1149
1277
|
width: "360px",
|
|
1150
|
-
background: "
|
|
1278
|
+
background: "#fff",
|
|
1151
1279
|
borderRadius: "12px",
|
|
1152
1280
|
boxShadow: "0 10px 40px rgba(0,0,0,0.12)",
|
|
1153
1281
|
zIndex: 50,
|
|
1154
1282
|
overflow: "hidden",
|
|
1155
|
-
border: "1px solid
|
|
1283
|
+
border: "1px solid #e5e7eb"
|
|
1156
1284
|
},
|
|
1157
1285
|
children: [
|
|
1158
1286
|
/* @__PURE__ */ jsxs(
|
|
@@ -1164,10 +1292,10 @@ function UserHeader({
|
|
|
1164
1292
|
display: "flex",
|
|
1165
1293
|
alignItems: "center",
|
|
1166
1294
|
justifyContent: "space-between",
|
|
1167
|
-
background: "
|
|
1295
|
+
background: "#fafafa"
|
|
1168
1296
|
},
|
|
1169
1297
|
children: [
|
|
1170
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: "
|
|
1298
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: "#111" }, children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }),
|
|
1171
1299
|
onMarkAllRead && /* @__PURE__ */ jsx(
|
|
1172
1300
|
"button",
|
|
1173
1301
|
{
|
|
@@ -1256,7 +1384,7 @@ function UserHeader({
|
|
|
1256
1384
|
style: {
|
|
1257
1385
|
fontSize: "13px",
|
|
1258
1386
|
fontWeight: !item.isRead ? 600 : 500,
|
|
1259
|
-
color: "
|
|
1387
|
+
color: "#111",
|
|
1260
1388
|
margin: "0 0 2px"
|
|
1261
1389
|
},
|
|
1262
1390
|
children: item.title
|
|
@@ -1298,7 +1426,7 @@ function UserHeader({
|
|
|
1298
1426
|
padding: "10px",
|
|
1299
1427
|
borderTop: "1px solid #f3f4f6",
|
|
1300
1428
|
textAlign: "center",
|
|
1301
|
-
background: "
|
|
1429
|
+
background: "#fafafa"
|
|
1302
1430
|
},
|
|
1303
1431
|
children: /* @__PURE__ */ jsx(
|
|
1304
1432
|
"button",
|
|
@@ -1360,6 +1488,12 @@ function LogoutIcon2() {
|
|
|
1360
1488
|
/* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
|
|
1361
1489
|
] });
|
|
1362
1490
|
}
|
|
1491
|
+
function ProfileIcon2() {
|
|
1492
|
+
return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1493
|
+
/* @__PURE__ */ jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
1494
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
|
|
1495
|
+
] });
|
|
1496
|
+
}
|
|
1363
1497
|
function UserSidebar({
|
|
1364
1498
|
user,
|
|
1365
1499
|
roleLabel,
|
|
@@ -1368,7 +1502,8 @@ function UserSidebar({
|
|
|
1368
1502
|
onLogout,
|
|
1369
1503
|
isOpen,
|
|
1370
1504
|
onClose,
|
|
1371
|
-
roleColor = "var(--color-alias-semantic-warning, orange)"
|
|
1505
|
+
roleColor = "var(--color-alias-semantic-warning, orange)",
|
|
1506
|
+
onProfile
|
|
1372
1507
|
}) {
|
|
1373
1508
|
useEffect(() => {
|
|
1374
1509
|
if (isOpen) {
|
|
@@ -1421,7 +1556,7 @@ function UserSidebar({
|
|
|
1421
1556
|
height: "100%",
|
|
1422
1557
|
width: "80vw",
|
|
1423
1558
|
maxWidth: "320px",
|
|
1424
|
-
background: "
|
|
1559
|
+
background: "#fff",
|
|
1425
1560
|
boxShadow: "-4px 0 24px rgba(0,0,0,0.12)",
|
|
1426
1561
|
zIndex: 50,
|
|
1427
1562
|
transform: isOpen ? "translateX(0)" : "translateX(100%)",
|
|
@@ -1430,92 +1565,155 @@ function UserSidebar({
|
|
|
1430
1565
|
flexDirection: "column"
|
|
1431
1566
|
},
|
|
1432
1567
|
children: [
|
|
1433
|
-
user && /* @__PURE__ */
|
|
1568
|
+
user && /* @__PURE__ */ jsxs(
|
|
1434
1569
|
"div",
|
|
1435
1570
|
{
|
|
1436
1571
|
style: {
|
|
1437
1572
|
padding: "20px",
|
|
1438
1573
|
borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
|
|
1439
1574
|
},
|
|
1440
|
-
children:
|
|
1441
|
-
|
|
1442
|
-
"img",
|
|
1443
|
-
{
|
|
1444
|
-
src: user.pictureUrl,
|
|
1445
|
-
alt: getFullName(),
|
|
1446
|
-
style: {
|
|
1447
|
-
width: "56px",
|
|
1448
|
-
height: "56px",
|
|
1449
|
-
borderRadius: "50%",
|
|
1450
|
-
objectFit: "cover",
|
|
1451
|
-
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1452
|
-
}
|
|
1453
|
-
}
|
|
1454
|
-
) : /* @__PURE__ */ jsx(
|
|
1575
|
+
children: [
|
|
1576
|
+
/* @__PURE__ */ jsxs(
|
|
1455
1577
|
"div",
|
|
1456
1578
|
{
|
|
1579
|
+
onClick: () => {
|
|
1580
|
+
if (onProfile) {
|
|
1581
|
+
onProfile();
|
|
1582
|
+
onClose();
|
|
1583
|
+
}
|
|
1584
|
+
},
|
|
1585
|
+
onMouseEnter: (e) => {
|
|
1586
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1587
|
+
},
|
|
1588
|
+
onMouseLeave: (e) => {
|
|
1589
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
|
|
1590
|
+
},
|
|
1457
1591
|
style: {
|
|
1458
|
-
width: "56px",
|
|
1459
|
-
height: "56px",
|
|
1460
|
-
borderRadius: "50%",
|
|
1461
|
-
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1462
1592
|
display: "flex",
|
|
1463
1593
|
alignItems: "center",
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1594
|
+
gap: "12px",
|
|
1595
|
+
cursor: onProfile ? "pointer" : "default",
|
|
1596
|
+
padding: "8px",
|
|
1597
|
+
borderRadius: "12px",
|
|
1598
|
+
transition: "background-color 0.15s ease"
|
|
1469
1599
|
},
|
|
1470
|
-
children:
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1600
|
+
children: [
|
|
1601
|
+
user.pictureUrl ? /* @__PURE__ */ jsx(
|
|
1602
|
+
"img",
|
|
1603
|
+
{
|
|
1604
|
+
src: user.pictureUrl,
|
|
1605
|
+
alt: getFullName(),
|
|
1606
|
+
style: {
|
|
1607
|
+
width: "56px",
|
|
1608
|
+
height: "56px",
|
|
1609
|
+
borderRadius: "50%",
|
|
1610
|
+
objectFit: "cover",
|
|
1611
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1612
|
+
}
|
|
1613
|
+
}
|
|
1614
|
+
) : /* @__PURE__ */ jsx(
|
|
1615
|
+
"div",
|
|
1616
|
+
{
|
|
1617
|
+
style: {
|
|
1618
|
+
width: "56px",
|
|
1619
|
+
height: "56px",
|
|
1620
|
+
borderRadius: "50%",
|
|
1621
|
+
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1622
|
+
display: "flex",
|
|
1623
|
+
alignItems: "center",
|
|
1624
|
+
justifyContent: "center",
|
|
1625
|
+
color: "#fff",
|
|
1626
|
+
fontWeight: 700,
|
|
1627
|
+
fontSize: "20px",
|
|
1628
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1629
|
+
},
|
|
1630
|
+
children: getInitial()
|
|
1631
|
+
}
|
|
1632
|
+
),
|
|
1633
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1501
1634
|
/* @__PURE__ */ jsx(
|
|
1502
|
-
"
|
|
1635
|
+
"p",
|
|
1503
1636
|
{
|
|
1504
1637
|
style: {
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1638
|
+
fontWeight: 700,
|
|
1639
|
+
fontSize: "16px",
|
|
1640
|
+
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
1641
|
+
margin: 0,
|
|
1642
|
+
overflow: "hidden",
|
|
1643
|
+
textOverflow: "ellipsis",
|
|
1644
|
+
whiteSpace: "nowrap"
|
|
1645
|
+
},
|
|
1646
|
+
children: getFullName()
|
|
1511
1647
|
}
|
|
1512
1648
|
),
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1649
|
+
/* @__PURE__ */ jsxs(
|
|
1650
|
+
"p",
|
|
1651
|
+
{
|
|
1652
|
+
style: {
|
|
1653
|
+
fontSize: "13px",
|
|
1654
|
+
color: "var(--color-alias-text-colors-tertiary, #6b7280)",
|
|
1655
|
+
margin: "2px 0 0",
|
|
1656
|
+
display: "flex",
|
|
1657
|
+
alignItems: "center",
|
|
1658
|
+
gap: "6px"
|
|
1659
|
+
},
|
|
1660
|
+
children: [
|
|
1661
|
+
/* @__PURE__ */ jsx(
|
|
1662
|
+
"span",
|
|
1663
|
+
{
|
|
1664
|
+
style: {
|
|
1665
|
+
width: "8px",
|
|
1666
|
+
height: "8px",
|
|
1667
|
+
borderRadius: "50%",
|
|
1668
|
+
background: roleColor,
|
|
1669
|
+
display: "inline-block"
|
|
1670
|
+
}
|
|
1671
|
+
}
|
|
1672
|
+
),
|
|
1673
|
+
roleLabel
|
|
1674
|
+
]
|
|
1675
|
+
}
|
|
1676
|
+
)
|
|
1677
|
+
] })
|
|
1678
|
+
]
|
|
1679
|
+
}
|
|
1680
|
+
),
|
|
1681
|
+
onProfile && /* @__PURE__ */ jsxs(
|
|
1682
|
+
"button",
|
|
1683
|
+
{
|
|
1684
|
+
onClick: () => {
|
|
1685
|
+
onProfile();
|
|
1686
|
+
onClose();
|
|
1687
|
+
},
|
|
1688
|
+
onMouseEnter: (e) => {
|
|
1689
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1690
|
+
},
|
|
1691
|
+
onMouseLeave: (e) => {
|
|
1692
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
1693
|
+
},
|
|
1694
|
+
style: {
|
|
1695
|
+
width: "100%",
|
|
1696
|
+
display: "flex",
|
|
1697
|
+
alignItems: "center",
|
|
1698
|
+
gap: "12px",
|
|
1699
|
+
padding: "10px 12px",
|
|
1700
|
+
marginTop: "8px",
|
|
1701
|
+
borderRadius: "8px",
|
|
1702
|
+
border: "none",
|
|
1703
|
+
background: "transparent",
|
|
1704
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
1705
|
+
cursor: "pointer",
|
|
1706
|
+
transition: "background-color 0.15s ease",
|
|
1707
|
+
fontSize: "14px",
|
|
1708
|
+
fontWeight: 500
|
|
1709
|
+
},
|
|
1710
|
+
children: [
|
|
1711
|
+
/* @__PURE__ */ jsx(ProfileIcon2, {}),
|
|
1712
|
+
/* @__PURE__ */ jsx("span", { children: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19" })
|
|
1713
|
+
]
|
|
1714
|
+
}
|
|
1715
|
+
)
|
|
1716
|
+
]
|
|
1519
1717
|
}
|
|
1520
1718
|
),
|
|
1521
1719
|
/* @__PURE__ */ jsx(
|