@campxdev/react-blueprint 2.3.7 → 2.3.9
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/cjs/index.js +1 -1
- package/dist/cjs/types/src/components/Assets/Icons/IconComponents/AmenitiesIcon.d.ts +2 -0
- package/dist/cjs/types/src/components/Assets/Icons/IconComponents/BoardingPointsIcon.d.ts +3 -0
- package/dist/cjs/types/src/components/Assets/Icons/IconComponents/BusesIcon.d.ts +3 -0
- package/dist/cjs/types/src/components/Assets/Icons/IconComponents/GatePassIcon.d.ts +2 -0
- package/dist/cjs/types/src/components/Assets/Icons/IconComponents/RouteBusAssignmentIcon.d.ts +3 -0
- package/dist/cjs/types/src/components/Assets/Icons/IconComponents/TransportRegistrationsIcon.d.ts +3 -0
- package/dist/cjs/types/src/components/Assets/Icons/IconComponents/TransportRoutesIcon.d.ts +3 -0
- package/dist/cjs/types/src/components/Assets/Icons/Icons.d.ts +7 -0
- package/dist/cjs/types/src/components/Layout/AppLayout/components/AppBar.d.ts +4 -3
- package/dist/cjs/types/src/components/Layout/AppLayout/components/PersistentSidebar.d.ts +14 -0
- package/dist/cjs/types/src/components/Layout/AppLayout/components/Sidebar/interfaces.d.ts +2 -0
- package/dist/cjs/types/src/components/Layout/AppLayout/components/UserProfilePopup.d.ts +3 -2
- package/dist/cjs/types/src/components/Layout/AppLayout/types.d.ts +7 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/types/src/components/Assets/Icons/IconComponents/AmenitiesIcon.d.ts +2 -0
- package/dist/esm/types/src/components/Assets/Icons/IconComponents/BoardingPointsIcon.d.ts +3 -0
- package/dist/esm/types/src/components/Assets/Icons/IconComponents/BusesIcon.d.ts +3 -0
- package/dist/esm/types/src/components/Assets/Icons/IconComponents/GatePassIcon.d.ts +2 -0
- package/dist/esm/types/src/components/Assets/Icons/IconComponents/RouteBusAssignmentIcon.d.ts +3 -0
- package/dist/esm/types/src/components/Assets/Icons/IconComponents/TransportRegistrationsIcon.d.ts +3 -0
- package/dist/esm/types/src/components/Assets/Icons/IconComponents/TransportRoutesIcon.d.ts +3 -0
- package/dist/esm/types/src/components/Assets/Icons/Icons.d.ts +7 -0
- package/dist/esm/types/src/components/Layout/AppLayout/components/AppBar.d.ts +4 -3
- package/dist/esm/types/src/components/Layout/AppLayout/components/PersistentSidebar.d.ts +14 -0
- package/dist/esm/types/src/components/Layout/AppLayout/components/Sidebar/interfaces.d.ts +2 -0
- package/dist/esm/types/src/components/Layout/AppLayout/components/UserProfilePopup.d.ts +3 -2
- package/dist/esm/types/src/components/Layout/AppLayout/types.d.ts +7 -0
- package/dist/index.d.ts +55 -40
- package/package.json +1 -1
- package/src/App.tsx +9 -37
- package/src/components/Assets/Icons/IconComponents/AmenitiesIcon.tsx +50 -0
- package/src/components/Assets/Icons/IconComponents/BoardingPointsIcon.tsx +65 -0
- package/src/components/Assets/Icons/IconComponents/BusesIcon.tsx +58 -0
- package/src/components/Assets/Icons/IconComponents/GatePassIcon.tsx +50 -0
- package/src/components/Assets/Icons/IconComponents/RouteBusAssignmentIcon.tsx +65 -0
- package/src/components/Assets/Icons/IconComponents/TransportRegistrationsIcon.tsx +65 -0
- package/src/components/Assets/Icons/IconComponents/TransportRoutesIcon.tsx +65 -0
- package/src/components/Assets/Icons/Icons.tsx +21 -0
- package/src/components/Layout/AppLayout/AppLayout.tsx +61 -20
- package/src/components/Layout/AppLayout/components/AppBar.tsx +35 -49
- package/src/components/Layout/AppLayout/components/PersistentSidebar.tsx +171 -0
- package/src/components/Layout/AppLayout/components/Sidebar/MenuBar.tsx +8 -4
- package/src/components/Layout/AppLayout/components/Sidebar/MenuItem.tsx +123 -46
- package/src/components/Layout/AppLayout/components/Sidebar/interfaces.ts +2 -0
- package/src/components/Layout/AppLayout/components/Sidebar/styles.ts +0 -2
- package/src/components/Layout/AppLayout/components/UserProfilePopup.tsx +42 -12
- package/src/components/Layout/AppLayout/types.ts +9 -0
- package/src/components/Layout/PageHeader/components/Views/Views.tsx +3 -2
- package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx +1 -1
- package/src/components/Navigation/Sidebar/SidebarV2.tsx +1 -1
- package/src/themes/colorTokens/darkColorTokens.tsx +1 -1
- package/src/themes/colorTokens/lightColorTokens.ts +1 -1
- package/src/themes/commonTheme.ts +1 -1
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IconProps } from '../Icons';
|
|
3
|
+
|
|
4
|
+
export const RouteBusAssignmentIcon: React.FC<IconProps> = ({
|
|
5
|
+
size = 16,
|
|
6
|
+
color = '#121212',
|
|
7
|
+
disabled = false,
|
|
8
|
+
hoverColor,
|
|
9
|
+
backgroundColor,
|
|
10
|
+
onClick,
|
|
11
|
+
}) => {
|
|
12
|
+
return (
|
|
13
|
+
<svg
|
|
14
|
+
width={size}
|
|
15
|
+
height={size}
|
|
16
|
+
viewBox="0 0 24 24"
|
|
17
|
+
fill="none"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
onClick={onClick}
|
|
20
|
+
style={{
|
|
21
|
+
backgroundColor,
|
|
22
|
+
cursor: onClick ? 'pointer' : 'default',
|
|
23
|
+
opacity: disabled ? 0.5 : 1,
|
|
24
|
+
}}
|
|
25
|
+
>
|
|
26
|
+
<g clipPath="url(#clip0_6096_17210)">
|
|
27
|
+
<path
|
|
28
|
+
d="M20.3793 21.1298C20.2808 21.1298 20.1833 21.1102 20.0923 21.0726C20.0014 21.035 19.9188 20.9799 19.8493 20.9098L13.4693 14.5298C13.3298 14.3686 13.2516 14.1582 13.2516 13.9398C13.2516 13.7214 13.3298 13.5109 13.4693 13.3498L21.1993 5.73975C21.2956 5.64669 21.4144 5.58025 21.5442 5.54695C21.6739 5.51364 21.81 5.51461 21.9393 5.54975C22.0664 5.58801 22.1814 5.65891 22.2726 5.75542C22.3638 5.85193 22.4282 5.96906 22.4593 6.09975C22.6625 7.05279 22.7597 8.02534 22.7493 8.99975V14.9998C22.7493 17.7698 22.1693 19.6398 20.9093 20.9098C20.7544 21.0274 20.5719 21.1031 20.3793 21.1298ZM15.0593 13.9998L20.3193 19.2598C20.9294 17.9575 21.1528 16.4795 21.2493 14.9998V8.99975C21.2493 8.58975 21.2413 8.20975 21.2113 7.84975L15.0593 13.9998Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
stroke={color}
|
|
31
|
+
strokeWidth="0.32"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M6.26992 22.48C6.21286 22.4782 6.15597 22.4716 6.09992 22.46C2.78992 21.7 1.24992 19.33 1.24992 14.9999V8.99992C1.24992 3.56992 3.56992 1.24992 8.99992 1.24992H14.9999C19.3299 1.24992 21.6999 2.78992 22.4599 6.09992C22.4885 6.22407 22.4851 6.35334 22.4501 6.47574C22.4151 6.59814 22.3497 6.70969 22.2599 6.79992L6.79992 22.26C6.73045 22.3297 6.64785 22.385 6.5569 22.4228C6.46594 22.4606 6.36846 22.48 6.26992 22.48ZM8.99992 2.74992C4.38992 2.74992 2.74992 4.38992 2.74992 8.99992V14.9999C2.74992 18.4699 3.70992 20.2099 6.03992 20.8999L20.8899 6.04992C20.2099 3.71992 18.4599 2.75992 14.9899 2.75992H8.99992V2.74992Z"
|
|
35
|
+
fill={color}
|
|
36
|
+
stroke={color}
|
|
37
|
+
strokeWidth="0.32"
|
|
38
|
+
/>
|
|
39
|
+
<path
|
|
40
|
+
d="M14.9995 22.7528H8.99947C8.02474 22.7677 7.05175 22.6705 6.09947 22.4628C5.96878 22.4349 5.84722 22.3721 5.74951 22.2799C5.6518 22.1878 5.58061 22.0699 5.54342 21.9388C5.50652 21.8037 5.50467 21.6611 5.53807 21.525C5.57146 21.3889 5.63889 21.2638 5.73542 21.1628L13.4695 13.4708C13.6105 13.3314 13.7976 13.2531 13.9929 13.2511C14.1882 13.2491 14.3769 13.3236 14.5205 13.4598L21.3095 19.8508C21.3792 19.9203 21.4346 20.0029 21.4724 20.0938C21.5102 20.1848 21.5296 20.2823 21.5296 20.3808C21.5296 20.4793 21.5102 20.5768 21.4724 20.6678C21.4346 20.7587 21.3792 20.8413 21.3095 20.9108C19.6395 22.5708 17.7695 23.1528 14.9995 23.1528H14.9995ZM7.84947 21.2128C8.20947 21.2428 8.58947 21.2528 8.99947 21.2528H14.9995C16.4791 21.3563 17.9574 21.0335 19.2595 20.3228L13.9995 15.0628L7.84947 21.2128Z"
|
|
41
|
+
fill={color}
|
|
42
|
+
stroke={color}
|
|
43
|
+
strokeWidth="0.32"
|
|
44
|
+
/>
|
|
45
|
+
<path
|
|
46
|
+
d="M9.11975 13.3098C8.86512 13.3104 8.62319 13.1998 8.15975 12.6098C5.76975 10.2998 5.12975 8.63975 5.50975 7.81975C5.69855 7.41116 6.16109 6.69266 7.21901 5.786C8.11691 4.47937 8.28977 5.03979 9.11975 5.03979C9.94972 5.03979 11.5631 5.47569 12.4608 6.786C13.5187 7.69266 13.8813 8.41116 14.0698 7.81975C14.4598 8.63975 13.8198 10.2998 11.4998 12.6098C11.0364 13.1998 10.7944 13.3104 10.5398 13.3098H9.11975ZM6.96975 8.14975C6.89827 8.78736 7.05662 9.43256 7.23975 10.0231C7.49473 10.6134 7.89397 11.1289 8.40275 11.5198C8.59544 11.7074 8.85374 11.8124 9.12275 11.8124C9.39176 11.8124 9.65006 11.7074 9.84275 11.5198C10.3491 11.1267 10.7463 10.6104 10.9998 10.0198C11.1807 9.42815 11.3419 8.78339 11.2698 8.14975C11.1579 7.67229 10.8806 7.24958 10.4884 6.95404C10.0962 6.6585 9.61344 6.50852 9.12275 6.52975C8.63192 6.50917 8.14897 6.65932 7.75683 6.9547C7.36469 7.25009 7.08717 7.67251 6.97475 8.14975H6.96975Z"
|
|
47
|
+
fill={color}
|
|
48
|
+
stroke={color}
|
|
49
|
+
strokeWidth="0.32"
|
|
50
|
+
/>
|
|
51
|
+
<path
|
|
52
|
+
d="M9.14992 9.48977C8.88479 9.48977 8.63036 9.3844 8.44282 9.19686C8.25529 9.00932 8.14992 8.75489 8.14992 8.48977C8.14992 8.22464 8.25529 7.97021 8.44282 7.78268C8.63036 7.59514 8.88479 7.48977 9.14992 7.48977H9.15992C9.42505 7.48977 9.67948 7.59514 9.86701 7.78268C10.0545 7.97021 10.1599 8.22464 10.1599 8.48977C10.1569 8.75574 10.0491 9.00986 9.86008 9.19686C9.67108 9.38383 9.41589 9.48936 9.14992 9.48977Z"
|
|
53
|
+
fill={color}
|
|
54
|
+
stroke={color}
|
|
55
|
+
strokeWidth="0.32"
|
|
56
|
+
/>
|
|
57
|
+
</g>
|
|
58
|
+
<defs>
|
|
59
|
+
<clipPath id="clip0_6096_17210">
|
|
60
|
+
<rect width="24" height="24" fill="white" />
|
|
61
|
+
</clipPath>
|
|
62
|
+
</defs>
|
|
63
|
+
</svg>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IconProps } from '../Icons';
|
|
3
|
+
|
|
4
|
+
export const TransportRegistrationIcon: React.FC<IconProps> = ({
|
|
5
|
+
size = 16,
|
|
6
|
+
color = '#121212',
|
|
7
|
+
disabled = false,
|
|
8
|
+
hoverColor,
|
|
9
|
+
backgroundColor,
|
|
10
|
+
onClick,
|
|
11
|
+
}) => {
|
|
12
|
+
return (
|
|
13
|
+
<svg
|
|
14
|
+
width={size}
|
|
15
|
+
height={size}
|
|
16
|
+
viewBox="0 0 30 30"
|
|
17
|
+
fill="none"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
onClick={onClick}
|
|
20
|
+
style={{
|
|
21
|
+
backgroundColor,
|
|
22
|
+
cursor: onClick ? 'pointer' : 'default',
|
|
23
|
+
opacity: disabled ? 0.5 : 1,
|
|
24
|
+
}}
|
|
25
|
+
>
|
|
26
|
+
<g clipPath="url(#clip0_6096_17189)">
|
|
27
|
+
<path
|
|
28
|
+
d="M13.1754 27.425C13.0297 27.4261 12.8857 27.3927 12.7554 27.3275C12.625 27.2623 12.512 27.1672 12.4254 27.05L11.1629 25.3625C11.0503 25.2003 10.9035 25.0648 10.7329 24.9655C10.5623 24.8661 10.372 24.8054 10.1754 24.7875C9.97704 24.782 9.77993 24.8206 9.59833 24.9006C9.41674 24.9806 9.25519 25.0999 9.12539 25.25C7.31289 27.1875 5.93789 27.025 5.27539 26.775C4.61289 26.525 3.46289 25.65 3.46289 22.875V8.8C3.46289 3.25 5.06289 1.5625 10.3004 1.5625H19.7379C24.9754 1.5625 26.5754 3.25 26.5754 8.8V14.125C26.5754 14.3736 26.4766 14.6121 26.3008 14.7879C26.125 14.9637 25.8865 15.0625 25.6379 15.0625C25.3892 15.0625 25.1508 14.9637 24.975 14.7879C24.7992 14.6121 24.7004 14.3736 24.7004 14.125V8.8C24.7004 4.2875 23.9129 3.4375 19.7379 3.4375H10.3004C6.12539 3.4375 5.33789 4.2875 5.33789 8.8V22.875C5.33789 24.1875 5.66289 24.9125 5.96289 25.025C6.18789 25.1125 6.80039 24.9875 7.75039 23.975C8.06791 23.624 8.45859 23.3469 8.89487 23.1633C9.33116 22.9797 9.80241 22.8941 10.2754 22.9125C10.7461 22.9452 11.2038 23.0808 11.6164 23.3097C12.0289 23.5387 12.3861 23.8554 12.6629 24.2375L13.9379 25.925C14.0871 26.1239 14.1511 26.3739 14.116 26.6201C14.0808 26.8662 13.9493 27.0883 13.7504 27.2375C13.5841 27.3606 13.3823 27.4264 13.1754 27.425Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
stroke={color}
|
|
31
|
+
strokeWidth="0.4"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M20 9.6875H10C9.75187 9.68586 9.51436 9.58656 9.3389 9.4111C9.16344 9.23564 9.06414 8.99813 9.0625 8.75C9.06414 8.50187 9.16344 8.26436 9.3389 8.0889C9.51436 7.91344 9.75187 7.81414 10 7.8125H20C20.2481 7.81414 20.4856 7.91344 20.6611 8.0889C20.8366 8.26436 20.9359 8.50187 20.9375 8.75C20.9359 8.99813 20.8366 9.23564 20.6611 9.4111C20.4856 9.58656 20.2481 9.68586 20 9.6875Z"
|
|
35
|
+
fill={color}
|
|
36
|
+
stroke={color}
|
|
37
|
+
strokeWidth="0.4"
|
|
38
|
+
/>
|
|
39
|
+
<path
|
|
40
|
+
d="M18.75 14.6875H11.25C11.0019 14.6859 10.7644 14.5866 10.5889 14.4111C10.4134 14.2356 10.3141 13.9981 10.3125 13.75C10.3141 13.5019 10.4134 13.2644 10.5889 13.0889C10.7644 12.9134 11.0019 12.8141 11.25 12.8125H18.75C18.9981 12.8141 19.2356 12.9134 19.4111 13.0889C19.5866 13.2644 19.6859 13.5019 19.6875 13.75C19.6859 13.9981 19.5866 14.2356 19.4111 14.4111C19.2356 14.5866 18.9981 14.6859 18.75 14.6875Z"
|
|
41
|
+
fill={color}
|
|
42
|
+
stroke={color}
|
|
43
|
+
strokeWidth="0.4"
|
|
44
|
+
/>
|
|
45
|
+
<path
|
|
46
|
+
d="M18.5277 27.2255C18.2967 27.2284 18.0674 27.1857 17.8529 27.0999C17.6385 27.0141 17.443 26.8869 17.2777 26.7255C17.0832 26.5251 16.9386 26.2817 16.8557 26.015C16.7727 25.7483 16.7537 25.4659 16.8002 25.1905L17.0377 23.503C17.1207 23.0247 17.3423 22.5813 17.6752 22.228L22.1002 17.8005C22.5724 17.2678 23.2199 16.9219 23.9252 16.8255C24.3535 16.805 24.7809 16.8822 25.175 17.0511C25.5691 17.22 25.9197 17.4762 26.2002 17.8005C26.5253 18.0803 26.7822 18.4308 26.9512 18.8251C27.1202 19.2194 27.1968 19.6471 27.1752 20.0755C27.0708 20.7782 26.7263 21.423 26.2002 21.9005L21.7777 26.3255C21.4244 26.6584 20.981 26.8801 20.5027 26.963L18.8152 27.2005C18.72 27.215 18.624 27.2234 18.5277 27.2255ZM24.1377 18.6905H24.1002C23.8349 18.762 23.5988 18.915 23.4252 19.128L19.0002 23.553C18.9497 23.6144 18.9153 23.6874 18.9002 23.7655L18.6752 25.328L20.2377 25.103C20.3146 25.0781 20.3865 25.04 20.4502 24.9905L24.8752 20.5655C25.0857 20.3897 25.2382 20.1544 25.3127 19.8905C25.3377 19.6405 25.0877 19.3405 24.8752 19.128C24.6873 18.9014 24.4267 18.7468 24.1377 18.6905Z"
|
|
47
|
+
fill={color}
|
|
48
|
+
stroke={color}
|
|
49
|
+
strokeWidth="0.4"
|
|
50
|
+
/>
|
|
51
|
+
<path
|
|
52
|
+
d="M24.9001 22.8111C24.8153 22.8118 24.7309 22.7992 24.6501 22.7736C23.8345 22.5421 23.0917 22.1059 22.4922 21.5065C21.8927 20.907 21.4565 20.1642 21.2251 19.3486C21.1593 19.1083 21.1906 18.8518 21.3122 18.6344C21.4338 18.4169 21.6359 18.2559 21.8751 18.1861C21.9932 18.1529 22.1168 18.1434 22.2387 18.1581C22.3606 18.1728 22.4784 18.2115 22.5853 18.2719C22.6921 18.3323 22.786 18.4133 22.8615 18.5101C22.937 18.6069 22.9926 18.7177 23.0251 18.8361C23.1684 19.3422 23.439 19.8033 23.8109 20.1752C24.1829 20.5472 24.6439 20.8178 25.1501 20.9611C25.3901 21.0295 25.5933 21.1903 25.7151 21.4081C25.8369 21.626 25.8675 21.8833 25.8001 22.1236C25.7461 22.321 25.6288 22.4952 25.4662 22.6194C25.3036 22.7436 25.1047 22.811 24.9001 22.8111Z"
|
|
53
|
+
fill={color}
|
|
54
|
+
stroke={color}
|
|
55
|
+
strokeWidth="0.4"
|
|
56
|
+
/>
|
|
57
|
+
</g>
|
|
58
|
+
<defs>
|
|
59
|
+
<clipPath id="clip0_6096_17189">
|
|
60
|
+
<rect width="30" height="30" fill="white" />
|
|
61
|
+
</clipPath>
|
|
62
|
+
</defs>
|
|
63
|
+
</svg>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IconProps } from '../Icons';
|
|
3
|
+
|
|
4
|
+
export const TransportRoutesIcon: React.FC<IconProps> = ({
|
|
5
|
+
size = 16,
|
|
6
|
+
color = '#121212',
|
|
7
|
+
disabled = false,
|
|
8
|
+
hoverColor,
|
|
9
|
+
backgroundColor,
|
|
10
|
+
onClick,
|
|
11
|
+
}) => {
|
|
12
|
+
return (
|
|
13
|
+
<svg
|
|
14
|
+
width={size}
|
|
15
|
+
height={size}
|
|
16
|
+
viewBox="0 0 30 30"
|
|
17
|
+
fill="none"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
onClick={onClick}
|
|
20
|
+
style={{
|
|
21
|
+
backgroundColor,
|
|
22
|
+
cursor: onClick ? 'pointer' : 'default',
|
|
23
|
+
opacity: disabled ? 0.5 : 1,
|
|
24
|
+
}}
|
|
25
|
+
>
|
|
26
|
+
<g clipPath="url(#clip0_6096_17179)">
|
|
27
|
+
<path
|
|
28
|
+
d="M15.1758 19.775C14.9276 19.7734 14.6901 19.6741 14.5147 19.4986C14.3392 19.3231 14.2399 19.0856 14.2383 18.8375V16.3875C14.2403 14.6256 14.9419 12.9366 16.189 11.6919C17.436 10.4472 19.1264 9.74868 20.8883 9.75H23.3383C23.5864 9.75164 23.8239 9.85094 23.9994 10.0264C24.1748 10.2019 24.2741 10.4394 24.2758 10.6875C24.2741 10.9356 24.1748 11.1731 23.9994 11.3486C23.8239 11.5241 23.5864 11.6234 23.3383 11.625H20.8883C19.6244 11.6263 18.4126 12.1281 17.5177 13.0206C16.6229 13.9131 16.1179 15.1237 16.1133 16.3875V18.8375C16.1134 18.9607 16.0893 19.0826 16.0423 19.1965C15.9952 19.3103 15.9261 19.4137 15.8391 19.5008C15.752 19.5879 15.6486 19.6569 15.5347 19.704C15.4209 19.751 15.2989 19.7752 15.1758 19.775Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
stroke={color}
|
|
31
|
+
strokeWidth="0.4"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M15.1754 22.5002C14.9273 22.4986 14.6897 22.3993 14.5143 22.2238C14.3388 22.0483 14.2395 21.8108 14.2379 21.5627V16.4002C14.2362 15.1376 13.7339 13.9272 12.8412 13.0344C11.9484 12.1416 10.738 11.6393 9.47539 11.6377H7.02539C6.77726 11.6361 6.53975 11.5368 6.36429 11.3613C6.18883 11.1858 6.08953 10.9483 6.08789 10.7002C6.08953 10.4521 6.18883 10.2146 6.36429 10.0391C6.53975 9.86363 6.77726 9.76433 7.02539 9.7627H9.47539C11.2355 9.76369 12.9232 10.4633 14.1677 11.7079C15.4123 12.9524 16.1119 14.6401 16.1129 16.4002V21.5627C16.1113 21.8108 16.012 22.0483 15.8365 22.2238C15.661 22.3993 15.4235 22.4986 15.1754 22.5002Z"
|
|
35
|
+
fill={color}
|
|
36
|
+
stroke={color}
|
|
37
|
+
strokeWidth="0.4"
|
|
38
|
+
/>
|
|
39
|
+
<path
|
|
40
|
+
d="M8.92486 13.879C8.80171 13.8794 8.6797 13.8553 8.56595 13.8081C8.4522 13.7609 8.349 13.6915 8.26236 13.604L6.01236 11.354C5.83801 11.1775 5.74023 10.9395 5.74023 10.6915C5.74023 10.4434 5.83801 10.2054 6.01236 10.029L8.26236 7.77896C8.44008 7.61336 8.67514 7.5232 8.91801 7.52749C9.16089 7.53178 9.39262 7.63017 9.56439 7.80193C9.73615 7.9737 9.83454 8.20543 9.83883 8.44831C9.84312 8.69118 9.75296 8.92624 9.58736 9.10396L7.99986 10.6915L9.58736 12.279C9.76171 12.4554 9.85949 12.6934 9.85949 12.9415C9.85949 13.1895 9.76171 13.4275 9.58736 13.604C9.50072 13.6915 9.39752 13.7609 9.28377 13.8081C9.17003 13.8553 9.04802 13.8794 8.92486 13.879Z"
|
|
41
|
+
fill={color}
|
|
42
|
+
stroke={color}
|
|
43
|
+
strokeWidth="0.4"
|
|
44
|
+
/>
|
|
45
|
+
<path
|
|
46
|
+
d="M21.0733 13.8791C20.9501 13.8796 20.8281 13.8555 20.7144 13.8083C20.6006 13.7611 20.4974 13.6917 20.4108 13.6041C20.2364 13.4277 20.1387 13.1897 20.1387 12.9416C20.1387 12.6936 20.2364 12.4556 20.4108 12.2791L21.9983 10.6916L20.412 9.10039C20.2524 8.92178 20.1672 8.68883 20.1739 8.44936C20.1806 8.20989 20.2787 7.98207 20.4481 7.81267C20.6175 7.64328 20.8453 7.54516 21.0848 7.53845C21.3242 7.53175 21.5572 7.61698 21.7358 7.77664L23.9858 10.0266C24.1601 10.2031 24.2579 10.4411 24.2579 10.6891C24.2579 10.9372 24.1601 11.1752 23.9858 11.3516L21.7358 13.6016C21.6501 13.6905 21.5471 13.761 21.4332 13.8087C21.3193 13.8564 21.1968 13.8804 21.0733 13.8791Z"
|
|
47
|
+
fill={color}
|
|
48
|
+
stroke={color}
|
|
49
|
+
strokeWidth="0.4"
|
|
50
|
+
/>
|
|
51
|
+
<path
|
|
52
|
+
d="M18.75 28.4375H11.25C4.4625 28.4375 1.5625 25.5375 1.5625 18.75V11.25C1.5625 4.4625 4.4625 1.5625 11.25 1.5625H18.75C25.5375 1.5625 28.4375 4.4625 28.4375 11.25V18.75C28.4375 25.5375 25.5375 28.4375 18.75 28.4375ZM11.25 3.4375C5.4875 3.4375 3.4375 5.4875 3.4375 11.25V18.75C3.4375 24.5125 5.4875 26.5625 11.25 26.5625H18.75C24.5125 26.5625 26.5625 24.5125 26.5625 18.75V11.25C26.5625 5.4875 24.5125 3.4375 18.75 3.4375H11.25Z"
|
|
53
|
+
fill={color}
|
|
54
|
+
stroke={color}
|
|
55
|
+
strokeWidth="0.4"
|
|
56
|
+
/>
|
|
57
|
+
</g>
|
|
58
|
+
<defs>
|
|
59
|
+
<clipPath id="clip0_6096_17179">
|
|
60
|
+
<rect width="30" height="30" fill="white" />
|
|
61
|
+
</clipPath>
|
|
62
|
+
</defs>
|
|
63
|
+
</svg>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
@@ -18,8 +18,10 @@ import { AssignmentIcon } from './IconComponents/AssignmentIcon';
|
|
|
18
18
|
import { AttachmentIcon } from './IconComponents/AttachmentIcon';
|
|
19
19
|
import { AttendanceIcon } from './IconComponents/AttendanceIcon';
|
|
20
20
|
import { BarChartIcon } from './IconComponents/BarChartIcon';
|
|
21
|
+
import { BoardingPointIcon } from './IconComponents/BoardingPointsIcon';
|
|
21
22
|
import { BookletIcon } from './IconComponents/BookletIcon';
|
|
22
23
|
import { BulbIcon } from './IconComponents/BulbIcon';
|
|
24
|
+
import { BusesIcon } from './IconComponents/BusesIcon';
|
|
23
25
|
import { CalendarIcon } from './IconComponents/CalendarIcon';
|
|
24
26
|
import { CampxFullLogoIcon } from './IconComponents/CampxFullLogoIcon';
|
|
25
27
|
import { CampxFullLogoIconV2 } from './IconComponents/CampxFullLogoIconV2';
|
|
@@ -137,6 +139,7 @@ import { ResourcesIcon } from './IconComponents/ResourcesIcon';
|
|
|
137
139
|
import { RevaluationIcon } from './IconComponents/RevaluationIcon';
|
|
138
140
|
import { RightIcon } from './IconComponents/RightIcon';
|
|
139
141
|
import { RoomsIcon } from './IconComponents/RoomsIcon';
|
|
142
|
+
import { RouteBusAssignmentIcon } from './IconComponents/RouteBusAssignmentIcon';
|
|
140
143
|
import { RouteIcon } from './IconComponents/RoutesIcon';
|
|
141
144
|
import { SalaryIcon } from './IconComponents/SalaryIcon';
|
|
142
145
|
import { SaveIcon } from './IconComponents/SaveIcon';
|
|
@@ -160,6 +163,8 @@ import { TicketsIcon } from './IconComponents/TicketsIcon';
|
|
|
160
163
|
import { TimeTableIcon } from './IconComponents/TimeTableIcon';
|
|
161
164
|
import TimerIcon from './IconComponents/TimerIcon';
|
|
162
165
|
import { TransactionCardIcon } from './IconComponents/TransactionCardIcon';
|
|
166
|
+
import { TransportRegistrationIcon } from './IconComponents/TransportRegistrationsIcon';
|
|
167
|
+
import { TransportRoutesIcon } from './IconComponents/TransportRoutesIcon';
|
|
163
168
|
import { UmsIcon } from './IconComponents/UmsIcon';
|
|
164
169
|
import { UnCheckedCheckboxIcon } from './IconComponents/UncheckCheckBoxIcon';
|
|
165
170
|
import { UnCheckedRadioIcon } from './IconComponents/UncheckedRadioIcon';
|
|
@@ -173,7 +178,9 @@ import { WhatsappIcon } from './IconComponents/WhatsappIcon';
|
|
|
173
178
|
import { WorkFlowDocsIcon } from './IconComponents/WorkflowdocsIcon';
|
|
174
179
|
|
|
175
180
|
import { FC, MouseEvent } from 'react';
|
|
181
|
+
import { AmenitiesIcon } from './IconComponents/AmenitiesIcon';
|
|
176
182
|
import { ChallansIcon } from './IconComponents/ChallansIcon';
|
|
183
|
+
import { GatePassIcon } from './IconComponents/GatePassIcon';
|
|
177
184
|
|
|
178
185
|
export interface IconProps {
|
|
179
186
|
size?: number;
|
|
@@ -187,7 +194,11 @@ export interface IconProps {
|
|
|
187
194
|
export type IconComponent = FC<IconProps>;
|
|
188
195
|
// Type for the entire Icons object
|
|
189
196
|
export type IconsType = {
|
|
197
|
+
GatePassIcon: IconComponent;
|
|
198
|
+
AmenitiesIcon: IconComponent;
|
|
190
199
|
AcademicFeesIcon: IconComponent;
|
|
200
|
+
BoardingPointIcon: IconComponent;
|
|
201
|
+
RouteBusAssignmentIcon: IconComponent;
|
|
191
202
|
ChallansIcon: IconComponent;
|
|
192
203
|
AcademicsIcon: IconComponent;
|
|
193
204
|
ActivitiesIcon: IconComponent;
|
|
@@ -216,6 +227,8 @@ export type IconsType = {
|
|
|
216
227
|
CareerIcon: IconComponent;
|
|
217
228
|
CareersIcon: IconComponent;
|
|
218
229
|
CautionIcon: IconComponent;
|
|
230
|
+
BusesIcon: IconComponent;
|
|
231
|
+
TransportRoutesIcon: IconComponent;
|
|
219
232
|
CertificateIcon: IconComponent;
|
|
220
233
|
CetIcon: IconComponent;
|
|
221
234
|
CheckedCheckboxIcon: IconComponent;
|
|
@@ -244,6 +257,7 @@ export type IconsType = {
|
|
|
244
257
|
DeviceIcon: IconComponent;
|
|
245
258
|
DocumentIcon: IconComponent;
|
|
246
259
|
DoneSquare: IconComponent;
|
|
260
|
+
TransportRegistrationIcon: IconComponent;
|
|
247
261
|
DownArrow: IconComponent;
|
|
248
262
|
UpArrow: IconComponent;
|
|
249
263
|
DownloadIcon: IconComponent;
|
|
@@ -364,12 +378,15 @@ export type IconsType = {
|
|
|
364
378
|
};
|
|
365
379
|
|
|
366
380
|
export const Icons: IconsType = {
|
|
381
|
+
GatePassIcon,
|
|
382
|
+
AmenitiesIcon,
|
|
367
383
|
AcademicFeesIcon,
|
|
368
384
|
AcademicsIcon,
|
|
369
385
|
ActivitiesIcon,
|
|
370
386
|
ChallansIcon,
|
|
371
387
|
AccordionArrow,
|
|
372
388
|
ActiveDevicesIcon,
|
|
389
|
+
TransportRoutesIcon,
|
|
373
390
|
ActivitylogsIcon,
|
|
374
391
|
AddSquare,
|
|
375
392
|
AdminIcon,
|
|
@@ -390,6 +407,9 @@ export const Icons: IconsType = {
|
|
|
390
407
|
AttendanceIcon,
|
|
391
408
|
BarChartIcon,
|
|
392
409
|
BookletIcon,
|
|
410
|
+
BoardingPointIcon,
|
|
411
|
+
TransportRegistrationIcon,
|
|
412
|
+
RouteBusAssignmentIcon,
|
|
393
413
|
BulbIcon,
|
|
394
414
|
CalendarIcon,
|
|
395
415
|
CampxFullLogoIcon,
|
|
@@ -434,6 +454,7 @@ export const Icons: IconsType = {
|
|
|
434
454
|
EmailNewIcon,
|
|
435
455
|
EnrollxIcon,
|
|
436
456
|
EvaluationIcon,
|
|
457
|
+
BusesIcon,
|
|
437
458
|
ExamConfigurationIcon,
|
|
438
459
|
ExamDetailsIcon,
|
|
439
460
|
ExamResultIcon,
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { Box, Stack, styled, useTheme } from '@mui/material';
|
|
2
|
-
import
|
|
1
|
+
import { Box, Stack, styled, useMediaQuery, useTheme } from '@mui/material';
|
|
2
|
+
import { motion } from 'framer-motion';
|
|
3
|
+
import React, { useState } from 'react';
|
|
3
4
|
import { AppBar } from './components/AppBar';
|
|
4
5
|
import { FloatingHelpDocs } from './components/FloatingHelpDocs';
|
|
6
|
+
import { PersistentSidebar } from './components/PersistentSidebar';
|
|
5
7
|
import { AppLayoutProps } from './types';
|
|
6
8
|
|
|
7
9
|
export const AppLayout: React.FC<AppLayoutProps> = ({
|
|
@@ -11,8 +13,14 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
|
|
|
11
13
|
centerSection,
|
|
12
14
|
mainContainerSx = {},
|
|
13
15
|
helpDocsConfig,
|
|
16
|
+
initialCollapsed,
|
|
17
|
+
userProfileParams,
|
|
14
18
|
}) => {
|
|
15
19
|
const theme = useTheme();
|
|
20
|
+
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
|
|
21
|
+
|
|
22
|
+
// State for persistent sidebar
|
|
23
|
+
const [collapsed, setCollapsed] = useState(isSmallScreen ?? initialCollapsed);
|
|
16
24
|
|
|
17
25
|
// Get help docs actions for current route
|
|
18
26
|
const getCurrentRouteHelpActions = () => {
|
|
@@ -28,41 +36,74 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
|
|
|
28
36
|
|
|
29
37
|
const helpDocsActions = getCurrentRouteHelpActions();
|
|
30
38
|
|
|
39
|
+
const toggleSidebar = () => {
|
|
40
|
+
setCollapsed(!collapsed);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
// Calculate main content width for persistent sidebar
|
|
44
|
+
const getMainWidth = () => {
|
|
45
|
+
if (isSmallScreen) return '100%';
|
|
46
|
+
return collapsed ? 'calc(100% - 64px)' : 'calc(100% - 250px)';
|
|
47
|
+
};
|
|
48
|
+
|
|
31
49
|
return (
|
|
32
50
|
<AppLayoutContainer>
|
|
33
|
-
{/*
|
|
34
|
-
<
|
|
35
|
-
rightSection={rightSection}
|
|
36
|
-
centerSection={centerSection}
|
|
51
|
+
{/* Persistent Sidebar */}
|
|
52
|
+
<PersistentSidebar
|
|
37
53
|
menu={menu}
|
|
54
|
+
collapsed={collapsed}
|
|
55
|
+
onToggle={toggleSidebar}
|
|
56
|
+
userProfileParams={userProfileParams}
|
|
38
57
|
/>
|
|
39
58
|
|
|
40
|
-
{/* Main Content
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
59
|
+
{/* Main Content Area with dynamic width */}
|
|
60
|
+
<motion.div
|
|
61
|
+
animate={{
|
|
62
|
+
width: getMainWidth(),
|
|
63
|
+
}}
|
|
64
|
+
transition={{ duration: 0.3, ease: [0.32, 0.72, 0, 1] }}
|
|
65
|
+
style={{
|
|
66
|
+
flexDirection: 'column',
|
|
67
|
+
height: '100vh',
|
|
68
|
+
overflow: 'hidden',
|
|
44
69
|
}}
|
|
45
70
|
>
|
|
46
|
-
{
|
|
47
|
-
|
|
71
|
+
{/* AppBar - Top of main content area */}
|
|
72
|
+
<AppBar
|
|
73
|
+
rightSection={rightSection}
|
|
74
|
+
centerSection={centerSection}
|
|
75
|
+
hideHamburger={!isSmallScreen}
|
|
76
|
+
onToggleSidebar={toggleSidebar}
|
|
77
|
+
/>
|
|
48
78
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
79
|
+
{/* Main Content */}
|
|
80
|
+
<MainContent
|
|
81
|
+
sx={{
|
|
82
|
+
...mainContainerSx,
|
|
83
|
+
height: `calc(100vh - 90px)`,
|
|
84
|
+
overflow: 'scroll',
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
{children}
|
|
88
|
+
</MainContent>
|
|
89
|
+
|
|
90
|
+
{/* Floating Help Docs - Route-aware contextual help */}
|
|
91
|
+
{helpDocsActions.length > 0 && (
|
|
92
|
+
<FloatingHelpDocs actions={helpDocsActions} />
|
|
93
|
+
)}
|
|
94
|
+
</motion.div>
|
|
53
95
|
</AppLayoutContainer>
|
|
54
96
|
);
|
|
55
97
|
};
|
|
56
98
|
|
|
57
99
|
const AppLayoutContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
|
|
58
|
-
flexDirection: '
|
|
59
|
-
backgroundColor: theme.palette.surface.
|
|
100
|
+
flexDirection: 'row',
|
|
101
|
+
backgroundColor: theme.palette.surface.paperBackground,
|
|
60
102
|
height: '100vh',
|
|
61
|
-
overflow: '
|
|
103
|
+
overflow: 'hidden',
|
|
62
104
|
}));
|
|
63
105
|
|
|
64
106
|
const MainContent = styled(Box)(({ theme }: { theme?: any }) => ({
|
|
65
|
-
borderRadius: '8px',
|
|
66
107
|
flex: 1,
|
|
67
108
|
maxWidth: '1440px', // Max width for content
|
|
68
109
|
width: '100%',
|
|
@@ -1,16 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
Stack,
|
|
4
|
-
styled,
|
|
5
|
-
useMediaQuery,
|
|
6
|
-
useTheme,
|
|
7
|
-
} from '@mui/material';
|
|
8
|
-
import React, { useState } from 'react';
|
|
9
|
-
import { CampxFullLogoIconV2 } from '../../../Assets/Icons/IconComponents/CampxFullLogoIconV2';
|
|
1
|
+
import { IconButton, Stack, styled, useTheme } from '@mui/material';
|
|
2
|
+
import React from 'react';
|
|
10
3
|
import { CampxIconV2 } from '../../../Assets/Icons/IconComponents/CampxIconV2';
|
|
11
4
|
import { HamburgerMenuIcon } from '../../../Assets/Icons/IconComponents/HamburgerMenuIcon';
|
|
12
|
-
import { SideDrawer } from './SideDrawer';
|
|
13
|
-
import { SideMenuItemProps } from './Sidebar/interfaces';
|
|
14
5
|
|
|
15
6
|
const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
|
|
16
7
|
display: 'flex',
|
|
@@ -19,12 +10,12 @@ const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
|
|
|
19
10
|
justifyContent: 'space-between',
|
|
20
11
|
position: 'relative', // Add relative positioning for absolute center positioning
|
|
21
12
|
width: '100%',
|
|
22
|
-
height: '
|
|
23
|
-
minHeight: '
|
|
13
|
+
height: '54px',
|
|
14
|
+
minHeight: '54px',
|
|
24
15
|
backgroundColor: theme.palette.surface.paperBackground,
|
|
25
16
|
padding: '0 24px 0 0',
|
|
26
17
|
flexShrink: 0, // Prevent AppBar from shrinking
|
|
27
|
-
|
|
18
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
28
19
|
[theme.breakpoints.down('md')]: {
|
|
29
20
|
height: '54px',
|
|
30
21
|
minHeight: '54px',
|
|
@@ -43,49 +34,51 @@ interface AppBarProps {
|
|
|
43
34
|
rightSection?: React.ReactNode;
|
|
44
35
|
/** Center section component (workspace switcher, etc.) */
|
|
45
36
|
centerSection?: React.ReactNode;
|
|
46
|
-
/** Menu items for mobile drawer */
|
|
47
|
-
menu?: SideMenuItemProps[];
|
|
48
37
|
/** Custom className for the AppBar */
|
|
49
38
|
className?: string;
|
|
50
39
|
/** Custom styles for the AppBar */
|
|
51
40
|
sx?: any;
|
|
41
|
+
/** Hide hamburger menu (for persistent sidebar mode) */
|
|
42
|
+
hideHamburger?: boolean;
|
|
43
|
+
/** Callback to toggle sidebar (for persistent sidebar mode on mobile) */
|
|
44
|
+
onToggleSidebar?: () => void;
|
|
52
45
|
}
|
|
53
46
|
|
|
54
47
|
export const AppBar: React.FC<AppBarProps> = ({
|
|
55
48
|
rightSection,
|
|
56
49
|
centerSection,
|
|
57
|
-
menu = [],
|
|
58
50
|
className = 'appHeaderV2',
|
|
59
51
|
sx = {},
|
|
52
|
+
hideHamburger = false,
|
|
53
|
+
onToggleSidebar = () => {},
|
|
60
54
|
}) => {
|
|
61
55
|
const theme = useTheme();
|
|
62
|
-
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
63
|
-
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
64
|
-
|
|
65
|
-
const toggleDrawer = () => {
|
|
66
|
-
setDrawerOpen(!drawerOpen);
|
|
67
|
-
};
|
|
68
56
|
|
|
69
57
|
return (
|
|
70
|
-
<AppBarContainer
|
|
71
|
-
{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
58
|
+
<AppBarContainer
|
|
59
|
+
className={className}
|
|
60
|
+
sx={{
|
|
61
|
+
...sx,
|
|
62
|
+
justifyContent: hideHamburger ? 'flex-end' : 'space-between',
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
{/* Left section - Hamburger + Logo (only show if not hidden) */}
|
|
66
|
+
{!hideHamburger && (
|
|
67
|
+
<Stack gap={'4px'} direction={'row'} alignItems={'center'}>
|
|
68
|
+
<IconButton
|
|
69
|
+
onClick={onToggleSidebar}
|
|
70
|
+
sx={{
|
|
71
|
+
padding: '24px',
|
|
72
|
+
[theme.breakpoints.down('md')]: {
|
|
73
|
+
padding: '20px',
|
|
74
|
+
},
|
|
75
|
+
}}
|
|
76
|
+
>
|
|
77
|
+
<HamburgerMenuIcon />
|
|
78
|
+
</IconButton>
|
|
79
|
+
<CampxIconV2 />
|
|
80
|
+
</Stack>
|
|
81
|
+
)}
|
|
89
82
|
|
|
90
83
|
{/* Center section - Custom content from props */}
|
|
91
84
|
{centerSection && (
|
|
@@ -115,13 +108,6 @@ export const AppBar: React.FC<AppBarProps> = ({
|
|
|
115
108
|
{rightSection}
|
|
116
109
|
</Stack>
|
|
117
110
|
)}
|
|
118
|
-
|
|
119
|
-
{/* Side Drawer */}
|
|
120
|
-
<SideDrawer
|
|
121
|
-
open={drawerOpen}
|
|
122
|
-
onClose={() => setDrawerOpen(false)}
|
|
123
|
-
menu={menu}
|
|
124
|
-
/>
|
|
125
111
|
</AppBarContainer>
|
|
126
112
|
);
|
|
127
113
|
};
|