@campxdev/react-blueprint 1.5.4 → 1.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/Assets/Icons/IconComponents/NoticeBoardIcon.tsx

@@ -0,0 +1,31 @@
+export const NoticeBoardIcon = ({ size = 16 }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_6271_26757)">
+        <path
+          d="M11.6641 5.62533H8.33073C7.53073 5.62533 6.03906 5.62533 6.03906 3.33366C6.03906 1.04199 7.53073 1.04199 8.33073 1.04199H11.6641C12.4641 1.04199 13.9557 1.04199 13.9557 3.33366C13.9557 4.13366 13.9557 5.62533 11.6641 5.62533ZM8.33073 2.29199C7.50573 2.29199 7.28906 2.29199 7.28906 3.33366C7.28906 4.37533 7.50573 4.37533 8.33073 4.37533H11.6641C12.7057 4.37533 12.7057 4.15866 12.7057 3.33366C12.7057 2.29199 12.4891 2.29199 11.6641 2.29199H8.33073Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M12.5 18.9587H7.5C2.81667 18.9587 1.875 16.8079 1.875 13.3337V8.33369C1.875 4.53369 3.25 2.90869 6.63333 2.73369C6.71544 2.72919 6.79762 2.74094 6.87517 2.76826C6.95273 2.79558 7.02413 2.83794 7.08528 2.8929C7.14644 2.94787 7.19615 3.01436 7.23157 3.08856C7.26698 3.16277 7.2874 3.24324 7.29167 3.32535C7.29592 3.40698 7.28396 3.48864 7.25645 3.56562C7.22895 3.64259 7.18646 3.71334 7.13144 3.77379C7.07642 3.83423 7.00996 3.88317 6.9359 3.91777C6.86185 3.95237 6.78167 3.97194 6.7 3.97535C4.33333 4.10869 3.125 4.81702 3.125 8.33369V13.3337C3.125 16.417 3.73333 17.7087 7.5 17.7087H12.5C16.2667 17.7087 16.875 16.417 16.875 13.3337V8.33369C16.875 4.81702 15.6667 4.10869 13.3 3.97535C13.1341 3.96651 12.9786 3.89214 12.8675 3.7686C12.7565 3.64506 12.6991 3.48248 12.7079 3.3166C12.7168 3.15073 12.7911 2.99517 12.9147 2.88413C13.0382 2.77309 13.2008 2.71568 13.3667 2.72452C16.75 2.90785 18.125 4.53285 18.125 8.32452V13.3245C18.125 16.8079 17.1833 18.9587 12.5 18.9587Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_6271_26757">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/QuizIcon.tsx

@@ -1,36 +1,32 @@
 import { useTheme } from '@mui/material';
 
-const QuizIcon = ({ size = 16 }) => {
+const QuizIcon = ({ color, size = 16 }: { color?: string; size?: number }) => {
   const theme = useTheme();
-  const color = theme.palette.text.black;
+  color = color ?? theme.palette.text.black;
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 20 20"
-      style={{
-        fill: color,
-        stroke: color,
-      }}
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clip-path="url(#clip0_1305_893)">
         <path
           d="M12.3096 16.4603H7.7179C7.51336 16.479 7.30713 16.457 7.11116 16.3955C6.91519 16.334 6.73337 16.2342 6.57624 16.1019C6.46443 15.9727 6.38135 15.8211 6.3325 15.6574C6.28366 15.4936 6.27016 15.3213 6.2929 15.1519V14.4103C5.26513 13.736 4.41298 12.8263 3.80717 11.7567C3.20136 10.6871 2.85937 9.48848 2.80957 8.26026C2.81002 7.1756 3.05511 6.10501 3.52659 5.12818C3.99806 4.15135 4.68378 3.29344 5.53271 2.6183C6.38164 1.94316 7.37191 1.46819 8.4298 1.22873C9.4877 0.98928 10.586 0.991511 11.6429 1.23526C12.6713 1.46117 13.6368 1.91246 14.4697 2.55661C15.3027 3.20076 15.9823 4.02171 16.4596 4.96026C17.223 6.59945 17.3686 8.45929 16.8694 10.1973C16.3702 11.9353 15.2599 13.4344 13.7429 14.4186V15.0436C13.7641 15.229 13.7461 15.4168 13.6901 15.5948C13.6341 15.7728 13.5414 15.937 13.4179 16.0769C13.2675 16.2107 13.0922 16.3134 12.902 16.3791C12.7118 16.4449 12.5105 16.4725 12.3096 16.4603ZM7.53457 15.2019C7.57624 15.2019 7.63457 15.2103 7.70957 15.2103H12.3096C12.3684 15.2115 12.4271 15.2059 12.4846 15.1936V14.0578C12.4847 13.9506 12.5124 13.8453 12.5649 13.7519C12.6175 13.6585 12.6931 13.5802 12.7846 13.5244C14.1296 12.7417 15.135 11.4862 15.6048 10.0027C16.0747 8.51911 15.9754 6.91375 15.3262 5.49943C14.9332 4.72743 14.3734 4.05251 13.6873 3.52356C13.0013 2.9946 12.2061 2.62486 11.3596 2.4411C10.4778 2.24003 9.56198 2.24051 8.6804 2.44251C7.79882 2.64451 6.97418 3.04281 6.2679 3.60776C5.5715 4.16587 5.00982 4.87375 4.62461 5.67878C4.23941 6.48382 4.04058 7.36532 4.0429 8.25776C4.09807 9.33118 4.41752 10.3743 4.97286 11.2946C5.52821 12.2148 6.30226 12.9837 7.22624 13.5328C7.31821 13.588 7.39424 13.6662 7.44684 13.7597C7.49943 13.8532 7.5268 13.9588 7.52624 14.0661V15.1911C7.53457 15.1936 7.53457 15.1936 7.53457 15.2019Z"
-          fill="white"
-          stroke="white"
+          fill={color}
+          stroke={color}
           stroke-width="0.4"
         />
         <path
           d="M12.9178 18.9614C12.8586 18.9613 12.7997 18.9529 12.7428 18.9364C10.9487 18.4198 9.04522 18.4198 7.25112 18.9364C7.09092 18.9803 6.91992 18.9594 6.77496 18.8783C6.63 18.7973 6.52268 18.6625 6.47612 18.5031C6.45352 18.4238 6.44681 18.3407 6.45637 18.2588C6.46594 18.1769 6.49158 18.0976 6.53184 18.0256C6.5721 17.9536 6.62619 17.8903 6.69098 17.8392C6.75578 17.7882 6.83002 17.7504 6.90945 17.7281C8.92763 17.1531 11.0663 17.1531 13.0844 17.7281C13.2445 17.7737 13.3799 17.8809 13.4612 18.0261C13.5424 18.1714 13.5627 18.3429 13.5178 18.5031C13.4832 18.6355 13.4054 18.7525 13.2967 18.8355C13.1879 18.9186 13.0546 18.9629 12.9178 18.9614Z"
-          fill="white"
-          stroke="white"
+          fill={color}
+          stroke={color}
           stroke-width="0.4"
         />
         <path
           d="M11.774 7.21543C11.8342 7.56943 11.784 7.93337 11.6304 8.25791C11.4767 8.58245 11.2268 8.85188 10.9148 9.02959C10.4631 9.32709 10.3648 9.50959 10.344 9.57209C10.3196 9.64324 10.2737 9.705 10.2126 9.74889C10.1515 9.79279 10.0783 9.81661 10.0031 9.81705C9.96395 9.81763 9.925 9.81118 9.88813 9.79792C9.79778 9.76736 9.72325 9.70222 9.68091 9.61675C9.63857 9.53129 9.63188 9.43249 9.6623 9.34209C9.83981 8.9528 10.1402 8.63253 10.5173 8.43043C10.7126 8.33072 10.871 8.17136 10.9696 7.97552C11.0682 7.77967 11.1018 7.55751 11.0656 7.34126C11.0104 7.08191 10.8619 6.85181 10.6484 6.69459C10.4349 6.53737 10.1711 6.46395 9.90705 6.48819C9.64299 6.51243 9.39701 6.63266 9.21567 6.82612C9.03434 7.01959 8.93025 7.27283 8.92314 7.53789C8.92314 7.63337 8.88521 7.725 8.8177 7.79251C8.75019 7.86003 8.65861 7.8979 8.56313 7.8979C8.46765 7.8979 8.37608 7.86003 8.30856 7.79251C8.24105 7.725 8.20313 7.63337 8.20312 7.53789C8.20355 7.27426 8.2618 7.01394 8.37377 6.77526C8.48574 6.53658 8.6487 6.32532 8.85117 6.15647C9.05363 5.98761 9.29066 5.86527 9.54557 5.79799C9.80047 5.7307 10.067 5.72014 10.3265 5.76706C10.6858 5.8341 11.0163 6.00832 11.2747 6.26684C11.5331 6.52536 11.7071 6.85609 11.774 7.21543ZM10.4963 11.348C10.4963 11.4429 10.4682 11.5357 10.4154 11.6146C10.3627 11.6935 10.2877 11.7551 10.2 11.7914C10.1123 11.8277 10.0158 11.8373 9.92269 11.8188C9.82958 11.8003 9.74405 11.7545 9.67692 11.6873C9.60979 11.6202 9.56409 11.5347 9.54557 11.4416C9.52705 11.3485 9.53655 11.252 9.57288 11.1643C9.60921 11.0766 9.67072 11.0016 9.74965 10.9488C9.82859 10.8961 9.92139 10.8679 10.0163 10.8679C10.1436 10.8682 10.2655 10.9189 10.3555 11.0088C10.4455 11.0988 10.4961 11.2208 10.4963 11.348Z"
-          fill="white"
-          stroke="white"
+          fill={color}
+          stroke={color}
           stroke-width="0.8"
         />
       </g>
@@ -39,7 +35,7 @@ const QuizIcon = ({ size = 16 }) => {
           <rect
             width="20"
             height="20"
-            fill="white"
+            fill={color}
             transform="translate(0.000976562)"
           />
         </clipPath>

package/src/components/Assets/Icons/Icons.tsx

@@ -66,13 +66,13 @@ import { LogoutIcon } from './IconComponents/LogoutIcon';
 import { ManageUserIcon } from './IconComponents/ManageUsersIcon';
 import { NavigationIcon } from './IconComponents/NavigationIcon';
 import { NoteIcon } from './IconComponents/NoteIcon';
+import { NoticeBoardIcon } from './IconComponents/NoticeBoardIcon';
 import { NotificationIcon } from './IconComponents/NotificationIcon';
 import { PayxIcon } from './IconComponents/PayxIcon';
 import { PdfIcon } from './IconComponents/PdfIcon';
 import { PeoplexIcon } from './IconComponents/PeoplexIcon';
 import { ProductFeaturesIcon } from './IconComponents/ProductFeaturesIcon';
 import { ProfileIcon } from './IconComponents/ProfileIcon';
-import { QuestionsIcon } from './IconComponents/QuestionsIcon';
 import QuizIcon from './IconComponents/QuizIcon';
 import { RedirectIcon } from './IconComponents/RedirectIcon';
 import { RedoIcon } from './IconComponents/RedoIcon';
@@ -191,7 +191,6 @@ export const Icons = {
   CourseInfoIcon,
   StatisticsIcon,
   CalendarIcon,
-  QuestionsIcon,
   AttendanceIcon,
   ResourcesIcon,
   TimeTableIcon,
@@ -212,4 +211,5 @@ export const Icons = {
   ManageUserIcon,
   ImportIcon,
   ExportMenuIcon,
+  NoticeBoardIcon,
 };

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -15,6 +15,7 @@ export interface AppHeaderProps {
   collapsed: boolean;
   institutionsData?: any[];
   profileSx?: any;
+  onLogoutClick?: any;
   showActiveDevices?: boolean;
 }
 
@@ -22,6 +23,7 @@ export const AppHeader = ({
   actions = [],
   profileSx = {},
   clientLogoUrl,
+  onLogoutClick,
   designation = '',
   clientName,
   userFullName,
@@ -69,6 +71,7 @@ export const AppHeader = ({
           profileSx={profileSx}
           designation={designation}
           showActiveDevices={showActiveDevices}
+          onLogoutClick={onLogoutClick}
         />
       </Stack>
     </StyledHeader>

package/src/components/Layout/AppHeader/AppHeaderActions/UserBox.tsx

@@ -1,6 +1,5 @@
 import { Avatar, Box, Stack, Typography, useTheme } from '@mui/material';
 import { ReactNode } from 'react';
-import logout from '../../../../utils/logout';
 import DialogButton from '../../../Navigation/DialogButton/DialogButton';
 import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
 import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
@@ -18,6 +17,7 @@ const getStartingLetters = (text: string) => {
 
 export default function UserBox({
   fullName,
+  onLogoutClick,
   designation = '',
   actions,
   profileUrl,
@@ -35,7 +35,7 @@ export default function UserBox({
     icon?: ReactNode;
     onClick: any;
   }[];
-
+  onLogoutClick?: any;
   profileUrl?: string;
   profileSx?: any;
   avatar?: boolean; // Define avatar as optional
@@ -137,7 +137,7 @@ export default function UserBox({
                 />
               </Stack>
             }
-            onClick={logout}
+            onClick={onLogoutClick}
           />,
         ]}
       />

package/src/components/Navigation/Sidebar/styles.tsx

@@ -35,6 +35,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
     borderRadius: '8px',
     backgroundColor: theme.palette.surface.paperBackground,
     overflowY: 'auto',
+    overflowX: 'hidden',
     '&::-webkit-scrollbar': {
       width: '0.3em',
       height: '0.2em',

package/src/components/Assets/Icons/IconComponents/QuestionsIcon.tsx

@@ -1,37 +0,0 @@
-export const QuestionsIcon = ({ size = 30 }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 30 30"
-      fill="none"
-    >
-      <g clipPath="url(#clip0_1535_6345)">
-        <path
-          d="M13.5136 21.191C13.3905 21.1915 13.2685 21.1674 13.1547 21.1202C13.041 21.073 12.9378 21.0036 12.8511 20.916L10.9761 19.041C10.884 18.9552 10.8101 18.8517 10.7589 18.7367C10.7077 18.6217 10.6801 18.4976 10.6779 18.3717C10.6757 18.2458 10.6988 18.1208 10.746 18.004C10.7931 17.8873 10.8633 17.7813 10.9523 17.6922C11.0413 17.6032 11.1474 17.533 11.2641 17.4859C11.3809 17.4387 11.5059 17.4156 11.6318 17.4178C11.7577 17.42 11.8818 17.4476 11.9968 17.4988C12.1118 17.55 12.2153 17.6239 12.3011 17.716L13.5136 18.9285L17.8511 14.5885C18.0288 14.4229 18.2639 14.3328 18.5068 14.3371C18.7496 14.3413 18.9814 14.4397 19.1531 14.6115C19.3249 14.7833 19.4233 15.015 19.4276 15.2579C19.4319 15.5008 19.3417 15.7358 19.1761 15.9135L14.1761 20.9135C14.0904 21.0025 13.9875 21.073 13.8735 21.1207C13.7596 21.1684 13.6371 21.1924 13.5136 21.191Z"
-          fill="#121212"
-          stroke="#121212"
-          strokeWidth="0.4"
-        />
-        <path
-          d="M17.5 8.4375H12.5C11.3 8.4375 9.0625 8.4375 9.0625 5C9.0625 1.5625 11.3 1.5625 12.5 1.5625H17.5C18.7 1.5625 20.9375 1.5625 20.9375 5C20.9375 6.2 20.9375 8.4375 17.5 8.4375ZM12.5 3.4375C11.2625 3.4375 10.9375 3.4375 10.9375 5C10.9375 6.5625 11.2625 6.5625 12.5 6.5625H17.5C19.0625 6.5625 19.0625 6.2375 19.0625 5C19.0625 3.4375 18.7375 3.4375 17.5 3.4375H12.5Z"
-          fill="#121212"
-          stroke="#121212"
-          strokeWidth="0.4"
-        />
-        <path
-          d="M18.75 28.4375H11.25C4.225 28.4375 2.8125 25.2113 2.8125 20V12.5C2.8125 6.80004 4.875 4.36254 9.95 4.10004C10.0732 4.0933 10.1964 4.11092 10.3128 4.1519C10.4291 4.19289 10.5362 4.25642 10.6279 4.33886C10.7197 4.42131 10.7942 4.52105 10.8473 4.63236C10.9005 4.74367 10.9311 4.86437 10.9375 4.98754C10.9439 5.10998 10.9259 5.23248 10.8847 5.34793C10.8434 5.46339 10.7797 5.56953 10.6972 5.66019C10.6146 5.75086 10.5149 5.82427 10.4039 5.87617C10.2928 5.92806 10.1725 5.95742 10.05 5.96254C6.5 6.16254 4.6875 7.22504 4.6875 12.5V20C4.6875 24.625 5.6 26.5625 11.25 26.5625H18.75C24.4 26.5625 25.3125 24.625 25.3125 20V12.5C25.3125 7.22504 23.5 6.16254 19.95 5.96254C19.7012 5.94928 19.4678 5.83773 19.3013 5.65242C19.1347 5.46711 19.0486 5.22322 19.0619 4.97442C19.0751 4.72561 19.1867 4.49226 19.372 4.32571C19.5573 4.15915 19.8012 4.07303 20.05 4.08629C25.125 4.36129 27.1875 6.79879 27.1875 12.4863V19.9863C27.1875 25.2113 25.775 28.4375 18.75 28.4375Z"
-          fill="#121212"
-          stroke="#121212"
-          strokeWidth="0.4"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_1535_6345">
-          <rect width="30" height="30" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};

package/src/components/Layout/AppHeader/AppHeaderActions/HeaderActions.tsx

@@ -1,72 +0,0 @@
-// HeaderActions.tsx
-
-import { Divider, Stack } from '@mui/material';
-import { ReactNode } from 'react';
-import CogWheelMenu from './CogWheelMenu';
-import UserBox from './UserBox';
-
-export interface HeaderActionsProps {
-  cogWheelMenu: ReactNode[];
-  fullName?: string;
-  designation?: string;
-  userBoxActions?: {
-    label: ReactNode;
-    icon?: ReactNode;
-    onClick: any;
-  }[];
-  profileUrl?: string;
-  actions?: ReactNode[];
-  profileSx?: any;
-  avatar?: any;
-  navigationIcon: any;
-  showActiveDevices: any;
-}
-
-const HeaderActions = ({
-  cogWheelMenu,
-  fullName,
-  designation,
-  userBoxActions = [],
-  profileUrl = '',
-  actions = [],
-  profileSx = {},
-  avatar = {},
-  navigationIcon = {},
-  showActiveDevices = {},
-}: HeaderActionsProps) => {
-  return (
-    <Stack direction="row" gap={1} alignItems="center">
-      {/* Render other actions */}
-      {actions.map((action, index) => (
-        <>
-          {action}
-          <Divider
-            orientation="vertical"
-            variant="middle"
-            flexItem
-            sx={{ height: '20px' }}
-          />
-        </>
-      ))}
-
-      {/* Render cogWheelMenu if provided */}
-      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-
-      {/* Render UserBox */}
-      {fullName && (
-        <UserBox
-          fullName={fullName}
-          designation={designation}
-          actions={userBoxActions}
-          profileUrl={profileUrl}
-          profileSx={profileSx}
-          avatar={avatar}
-          navigationIcon={navigationIcon}
-          showActiveDevices={showActiveDevices}
-        />
-      )}
-    </Stack>
-  );
-};
-
-export default HeaderActions;