@campxdev/react-blueprint 1.1.6 → 1.1.7

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "useTabs": false,
+  "bracketSameLine": false
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -10,6 +10,7 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@mui/x-data-grid": "^7.5.1",
+    "@mui/x-date-pickers": "^7.12.1",
     "@storybook/addon-backgrounds": "^8.2.6",
     "@storybook/addon-designs": "^8.0.3",
     "@testing-library/jest-dom": "^5.14.1",
@@ -21,6 +22,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.2",
+    "date-fns": "^3.6.0",
     "framer-motion": "^11.2.9",
     "global": "^4.4.0",
     "js-cookie": "^3.0.5",
@@ -29,6 +31,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
+    "react-hook-form": "^7.52.0",
     "react-joyride": "^2.8.2",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.24.0",

package/src/App.tsx

@@ -1,30 +1,19 @@
-import { useState } from "react";
-import "./App.css";
-import Chips from "./components/DataDisplay/Chips/Chips";
-import { IconButtons } from "./components/Input/IconButtons/IconButtons";
-import {
-  AppHeader,
-  Button,
-  SearchBar,
-  UnAuthorized,
-} from "./components/export";
-import Providers from "./contexts/Providers";
+import { Button } from '@mui/material';
+import { useState } from 'react';
+import './App.css';
+import Chips from './components/DataDisplay/Chips/Chips';
+import { Tags } from './components/Input/Tags/Tags';
+import { AppHeader, SearchBar, UnAuthorized } from './components/export';
+import Providers from './contexts/Providers';
+
 function App() {
   const [selected, setSelected] = useState<string | number | string[]>([]);
   const sampleChips = [
-    {
-      label: "Chip1",
-      value: 1,
-    },
-    {
-      label: "Chip2",
-      value: 2,
-    },
-    {
-      label: "Chip3",
-      value: 3,
-    },
+    { label: 'Chip1', value: 1 },
+    { label: 'Chip2', value: 2 },
+    { label: 'Chip3', value: 3 },
   ];
+
   return (
     <Providers>
       <AppHeader
@@ -36,34 +25,24 @@ function App() {
       />
       <UnAuthorized
         component={
-          <Button sx={{ marginTop: "20px" }} variant="contained">
+          <Button sx={{ marginTop: '20px' }} variant="contained">
             Click Here to Login
           </Button>
         }
       />
-      <SearchBar onSearch={() => {}} value={""} placeholder="Search by Name" />
+      <SearchBar onSearch={() => {}} value={''} placeholder="Search by Name" />
       <Chips
         list={sampleChips}
         singleSelection={false}
         selected={selected}
         onSelected={(selectedValue) => {
-          console.log(selectedValue, "selectedValue");
-          setSelected(selectedValue);
-        }}
-      />
-      <IconButtons.ViewButton />
-      <IconButtons.EditButton />
-      <IconButtons.DeleteButton />
-      <Chips
-        list={sampleChips}
-        singleSelection={false}
-        selected={selected}
-        onSelected={(selectedValue) => {
-          console.log(selectedValue, "selectedValue");
+          console.log(selectedValue, 'selectedValue');
           setSelected(selectedValue);
         }}
       />
+      <Tags tags={sampleChips} />
     </Providers>
   );
 }
+
 export default App;

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

@@ -0,0 +1,41 @@
+import { useTheme } from '@mui/material';
+
+export const AcademicsIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <>
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10.0001 18.3986C9.75295 18.4012 9.50914 18.3411 9.29147 18.2239C7.39801 17.2642 5.36941 16.5986 3.27547 16.2499L3.03414 16.2166C2.48868 16.133 1.99007 15.8601 1.62581 15.4456C1.26154 15.0311 1.05489 14.5016 1.04214 13.9499V3.88322C1.03855 3.56619 1.10171 3.25195 1.22751 2.96092C1.35332 2.66989 1.53895 2.40859 1.77234 2.194C2.00573 1.9794 2.28167 1.81632 2.58221 1.71534C2.88276 1.61436 3.20118 1.57775 3.5168 1.60789C5.68976 1.86244 7.78803 2.55725 9.68347 3.64989L9.88347 3.76656C9.95755 3.79813 10.0407 3.80098 10.1168 3.77455L10.2501 3.69122C12.1495 2.5944 14.2492 1.88898 16.4255 1.61656H16.5255C16.8345 1.59029 17.1455 1.62937 17.4384 1.73125C17.7313 1.83314 17.9995 1.99553 18.2255 2.20789C18.4599 2.42226 18.6465 2.68374 18.7728 2.97521C18.8992 3.26668 18.9626 3.58156 18.9588 3.89922V13.9579C18.9471 14.5111 18.7397 15.0423 18.3736 15.4572C18.0075 15.8722 17.5063 16.144 16.9588 16.2246L16.6841 16.2579C14.5975 16.6056 12.5766 17.2715 10.6921 18.2326C10.4801 18.3478 10.2414 18.4051 10.0001 18.3986ZM3.3168 2.84989C3.05807 2.84665 2.8078 2.94199 2.6168 3.11655C2.51238 3.21476 2.42957 3.33367 2.37367 3.46567C2.31777 3.59768 2.29 3.73988 2.29214 3.88322V13.9499C2.30335 14.1985 2.39842 14.4359 2.56186 14.6236C2.72529 14.8112 2.94745 14.938 3.19214 14.9832L3.44214 15.0166C5.67583 15.3843 7.83989 16.0925 9.8588 17.1166C9.92936 17.1477 10.0078 17.1564 10.0835 17.1412C12.1066 16.1007 14.2803 15.3838 16.5255 15.0166L16.8088 14.9832C17.0541 14.9392 17.277 14.8128 17.4406 14.6249C17.6043 14.437 17.6989 14.1989 17.7088 13.9499V3.89122C17.711 3.7467 17.6832 3.60329 17.6274 3.46999C17.5715 3.33668 17.4887 3.21636 17.3841 3.11655C17.2752 3.02111 17.1484 2.94835 17.011 2.90256C16.8737 2.85677 16.7285 2.83886 16.5841 2.84989H16.4841C14.5277 3.11065 12.6402 3.74722 10.9255 4.72456L10.7921 4.81656C10.5576 4.95487 10.2905 5.02848 10.0182 5.02988C9.74592 5.03129 9.47812 4.96044 9.24214 4.82456L9.04214 4.70789C7.30552 3.72903 5.3948 3.09794 3.4168 2.84989H3.3168Z"
+          style={{ stroke: color, fill: color }}
+          stroke-width="0.4"
+        />
+        <path
+          d="M10.0003 17.7002C9.83492 17.6991 9.67658 17.633 9.55955 17.5161C9.44252 17.3992 9.37622 17.2409 9.375 17.0755V4.57553C9.37605 4.41 9.44227 4.25156 9.55931 4.13451C9.67636 4.01746 9.83481 3.95124 10.0003 3.9502C10.1659 3.95124 10.3243 4.01746 10.4414 4.13451C10.5584 4.25156 10.6246 4.41 10.6257 4.57553V17.0755C10.6258 17.1576 10.6096 17.239 10.5782 17.3148C10.5468 17.3907 10.5008 17.4596 10.4427 17.5177C10.3846 17.5757 10.3156 17.6217 10.2397 17.653C10.1638 17.6843 10.0824 17.7004 10.0003 17.7002Z"
+          style={{
+            fill: color,
+            stroke: color,
+          }}
+          stroke-width="0.4"
+        />
+        <path
+          d="M6.45898 7.7002H4.58432C4.41891 7.69915 4.26056 7.63302 4.14353 7.51612C4.0265 7.39922 3.96021 7.24094 3.95898 7.07553C3.96003 6.91 4.02625 6.75156 4.1433 6.63451C4.26035 6.51746 4.41879 6.45124 4.58432 6.4502H6.45898C6.62451 6.45124 6.78296 6.51746 6.9 6.63451C7.01705 6.75156 7.08327 6.91 7.08432 7.07553C7.08309 7.24094 7.0168 7.39922 6.89977 7.51612C6.78274 7.63302 6.62439 7.69915 6.45898 7.7002Z"
+          style={{
+            fill: color,
+            stroke: color,
+          }}
+          stroke-width="0.4"
+        />
+        <path
+          d="M7.08432 10.2002H4.58432C4.41891 10.1991 4.26056 10.133 4.14353 10.0161C4.0265 9.89922 3.96021 9.74094 3.95898 9.57553C3.96003 9.41 4.02625 9.25156 4.1433 9.13451C4.26035 9.01746 4.41879 8.95124 4.58432 8.9502H7.08432C7.24984 8.95124 7.40829 9.01746 7.52534 9.13451C7.64238 9.25156 7.7086 9.41 7.70965 9.57553C7.70843 9.74094 7.64213 9.89922 7.5251 10.0161C7.40808 10.133 7.24973 10.1991 7.08432 10.2002Z"
+          style={{
+            fill: color,
+            stroke: color,
+          }}
+          stroke-width="0.4"
+        />
+      </svg>
+    </>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { useTheme } from '@mui/material';
+
+export const AccordionArrow = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      style={{
+        fill: color,
+        stroke: color,
+      }}
+    >
+      <path
+        d="M8.0006 11.9334L7.99752 11.9334C7.81529 11.9321 7.64033 11.8632 7.50626 11.7407L7.49841 11.7359L7.48101 11.7185L1.61434 5.85188L1.61432 5.85186C1.47684 5.71434 1.39961 5.52784 1.39961 5.33339C1.39961 5.13894 1.47684 4.95244 1.61432 4.81492L1.61436 4.81488C1.75188 4.6774 1.93838 4.60017 2.13283 4.60017C2.32728 4.60017 2.51378 4.6774 2.6513 4.81488L2.65132 4.8149L7.99896 10.1625L13.3455 4.81544L13.3456 4.81541C13.4831 4.67794 13.6696 4.6007 13.864 4.6007C14.0585 4.6007 14.245 4.67794 14.3825 4.81541L14.3825 4.81546C14.52 4.95298 14.5972 5.13947 14.5972 5.33392C14.5972 5.52838 14.52 5.71487 14.3825 5.85239L14.3825 5.85241L8.51585 11.7191L8.4929 11.742L8.48332 11.7468C8.35073 11.8653 8.17921 11.9319 8.0006 11.9334Z"
+        stroke-width="0.4"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { useTheme } from '@mui/material';
+
+export const NoteIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.3335 3.83301C5.20116 3.83213 5.07449 3.77918 4.98091 3.6856C4.88733 3.59202 4.83437 3.46535 4.8335 3.33301V1.33301C4.83437 1.20067 4.88733 1.074 4.98091 0.98042C5.07449 0.88684 5.20116 0.833881 5.3335 0.833008C5.46583 0.833881 5.5925 0.88684 5.68608 0.98042C5.77966 1.074 5.83262 1.20067 5.8335 1.33301V3.33301C5.83262 3.46535 5.77966 3.59202 5.68608 3.6856C5.5925 3.77918 5.46583 3.83213 5.3335 3.83301Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+      <path
+        d="M10.6665 3.83301C10.5342 3.83213 10.4075 3.77918 10.3139 3.6856C10.2203 3.59202 10.1674 3.46535 10.1665 3.33301V1.33301C10.1674 1.20067 10.2203 1.074 10.3139 0.98042C10.4075 0.88684 10.5342 0.833881 10.6665 0.833008C10.7988 0.833881 10.9255 0.88684 11.0191 0.98042C11.1127 1.074 11.1656 1.20067 11.1665 1.33301V3.33301C11.1656 3.46535 11.1127 3.59202 11.0191 3.6856C10.9255 3.77918 10.7988 3.83213 10.6665 3.83301Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+      <path
+        d="M9.99984 9.16699H4.6665C4.53417 9.16612 4.4075 9.11316 4.31392 9.01958C4.22034 8.926 4.16738 8.79933 4.1665 8.66699C4.16738 8.53465 4.22034 8.40798 4.31392 8.3144C4.4075 8.22082 4.53417 8.16787 4.6665 8.16699H9.99984C10.1322 8.16787 10.2588 8.22082 10.3524 8.3144C10.446 8.40798 10.499 8.53465 10.4998 8.66699C10.499 8.79933 10.446 8.926 10.3524 9.01958C10.2588 9.11316 10.1322 9.16612 9.99984 9.16699Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+      <path
+        d="M7.99984 11.833H4.6665C4.53417 11.8321 4.4075 11.7792 4.31392 11.6856C4.22034 11.592 4.16738 11.4653 4.1665 11.333C4.16738 11.2007 4.22034 11.074 4.31392 10.9804C4.4075 10.8868 4.53417 10.8339 4.6665 10.833H7.99984C8.13218 10.8339 8.25885 10.8868 8.35243 10.9804C8.446 11.074 8.49896 11.2007 8.49984 11.333C8.49896 11.4653 8.446 11.592 8.35243 11.6856C8.25885 11.7792 8.13218 11.8321 7.99984 11.833Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+      <path
+        d="M10 15.1663H6C2.25333 15.1663 1.5 13.3997 1.5 10.5463V6.43301C1.5 3.27301 2.56667 1.98634 5.30667 1.83301H10.6933C13.4333 1.98634 14.5 3.27301 14.5 6.43301V10.5463C14.5 13.3997 13.7467 15.1663 10 15.1663ZM5.33333 2.83301C3.46667 2.93967 2.5 3.52634 2.5 6.43301V10.5463C2.5 13.0997 2.98667 14.1663 6 14.1663H10C13.0133 14.1663 13.5 13.0997 13.5 10.5463V6.43301C13.5 3.53301 12.54 2.93967 10.6533 2.83301H5.33333Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+    </svg>
+  );
+};

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

@@ -1,62 +1,67 @@
-import { ActiveDevicesIcon } from "./IconComponents/ActiveDevicesIcon";
-import { AdminIcon } from "./IconComponents/AdminIcon";
-import { AdministratorIcon } from "./IconComponents/AdministratorIcon";
-import { ErrorFilledIcon } from "./IconComponents/AlertFilledIcon";
-import { AppsIcon } from "./IconComponents/AppsIcon";
-import { ArrowBackIcon } from "./IconComponents/ArrowBackIcon";
-import { BulbIcon } from "./IconComponents/BulbIcon";
-import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
-import { CampxIcon } from "./IconComponents/CampxIcon";
-import { CareerIcon } from "./IconComponents/CareerIcon";
-import { CheckedCheckboxIcon } from "./IconComponents/CheckedCheckBoxIcon";
-import { CheckedRadioIcon } from "./IconComponents/CheckedRadioIcon";
-import { ClogWheelIcon } from "./IconComponents/ClogWheelIcon";
-import { CollapseIcon } from "./IconComponents/CollapseIcon";
-import { CommutexIcon } from "./IconComponents/CommutexIcon";
-import { CompletedStateIcon } from "./IconComponents/CompletedStateIcon";
-import { CrossIcon } from "./IconComponents/CrossIcon";
-import { CrossIcon2 } from "./IconComponents/CrossIcon2";
-import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
-import { DeleteIcon } from "./IconComponents/DeleteIcon";
-import { DeviceIcon } from "./IconComponents/DeviceIcon";
-import { EditIcon } from "./IconComponents/EditIcon";
-import { EnrollxIcon } from "./IconComponents/EnrollxIcon";
-import { ExamResultIcon } from "./IconComponents/ExamResultIcon";
-import { ExamxIcon } from "./IconComponents/ExamxIcon";
-import { ExpandIcon } from "./IconComponents/ExpandIcon";
-import { ExportIcon } from "./IconComponents/ExportIcon";
-import { FilterIcon } from "./IconComponents/FilterIcon";
-import { HelpIcon } from "./IconComponents/HelpIcon";
-import { HomeIcon } from "./IconComponents/HomeIcon";
-import { HostelxIcon } from "./IconComponents/HostelxIcon";
-import { InfoFilledIcon } from "./IconComponents/InfoFilledIcon";
-import { InfoIcon } from "./IconComponents/InfoIcon";
-import { InstitutionsIcon } from "./IconComponents/InstitutionsIcon";
-import { LeftIcon } from "./IconComponents/LeftIcon";
-import { LocationIcon } from "./IconComponents/LocationIcon";
-import { LogoutIcon } from "./IconComponents/LogoutIcon";
-import { NavigationIcon } from "./IconComponents/NavigationIcon";
-import { NotificationIcon } from "./IconComponents/NotificationIcon";
-import { PayxIcon } from "./IconComponents/PayxIcon";
-import { PeoplexIcon } from "./IconComponents/PeoplexIcon";
-import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
-import { ProfileIcon } from "./IconComponents/ProfileIcon";
-import { RedirectIcon } from "./IconComponents/RedirectIcon";
-import { RedoIcon } from "./IconComponents/RedoIcon";
-import { RightIcon } from "./IconComponents/RightIcon";
-import { SaveIcon } from "./IconComponents/SaveIcon";
-import { SearchIcon } from "./IconComponents/SearchIcon";
-import { ShareIcon } from "./IconComponents/ShareIcon";
-import { SuccessFilledIcon } from "./IconComponents/SuccessFilledIcon";
-import { TicketsIcon } from "./IconComponents/TicketsIcon";
-import { UmsIcon } from "./IconComponents/UmsIcon";
-import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
-import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
-import { ViewIcon } from "./IconComponents/ViewIcon";
-import { VisibilityOffIcon } from "./IconComponents/VisibiityOffIcon";
-import { VisibilityIcon } from "./IconComponents/VisibilityIcon";
-import { WarningFilledIcon } from "./IconComponents/WarningFilledIcon";
+import { AcademicsIcon } from './IconComponents/AcademicIcon';
+import { AccordionArrow } from './IconComponents/AccordionArrow';
+import { ActiveDevicesIcon } from './IconComponents/ActiveDevicesIcon';
+import { AdminIcon } from './IconComponents/AdminIcon';
+import { AdministratorIcon } from './IconComponents/AdministratorIcon';
+import { ErrorFilledIcon } from './IconComponents/AlertFilledIcon';
+import { AppsIcon } from './IconComponents/AppsIcon';
+import { ArrowBackIcon } from './IconComponents/ArrowBackIcon';
+import { BulbIcon } from './IconComponents/BulbIcon';
+import { CampxFullLogoIcon } from './IconComponents/CampxFullLogoIcon';
+import { CampxIcon } from './IconComponents/CampxIcon';
+import { CareerIcon } from './IconComponents/CareerIcon';
+import { CheckedCheckboxIcon } from './IconComponents/CheckedCheckBoxIcon';
+import { CheckedRadioIcon } from './IconComponents/CheckedRadioIcon';
+import { ClogWheelIcon } from './IconComponents/ClogWheelIcon';
+import { CollapseIcon } from './IconComponents/CollapseIcon';
+import { CommutexIcon } from './IconComponents/CommutexIcon';
+import { CompletedStateIcon } from './IconComponents/CompletedStateIcon';
+import { CrossIcon } from './IconComponents/CrossIcon';
+import { CrossIcon2 } from './IconComponents/CrossIcon2';
+import { DashBoardIcon } from './IconComponents/DashBoardIcon';
+import { DeleteIcon } from './IconComponents/DeleteIcon';
+import { DeviceIcon } from './IconComponents/DeviceIcon';
+import { EditIcon } from './IconComponents/EditIcon';
+import { EnrollxIcon } from './IconComponents/EnrollxIcon';
+import { ExamResultIcon } from './IconComponents/ExamResultIcon';
+import { ExamxIcon } from './IconComponents/ExamxIcon';
+import { ExpandIcon } from './IconComponents/ExpandIcon';
+import { ExportIcon } from './IconComponents/ExportIcon';
+import { FilterIcon } from './IconComponents/FilterIcon';
+import { HelpIcon } from './IconComponents/HelpIcon';
+import { HomeIcon } from './IconComponents/HomeIcon';
+import { HostelxIcon } from './IconComponents/HostelxIcon';
+import { InfoFilledIcon } from './IconComponents/InfoFilledIcon';
+import { InfoIcon } from './IconComponents/InfoIcon';
+import { InstitutionsIcon } from './IconComponents/InstitutionsIcon';
+import { LeftIcon } from './IconComponents/LeftIcon';
+import { LocationIcon } from './IconComponents/LocationIcon';
+import { LogoutIcon } from './IconComponents/LogoutIcon';
+import { NavigationIcon } from './IconComponents/NavigationIcon';
+import { NoteIcon } from './IconComponents/NoteIcon';
+import { NotificationIcon } from './IconComponents/NotificationIcon';
+import { PayxIcon } from './IconComponents/PayxIcon';
+import { PeoplexIcon } from './IconComponents/PeoplexIcon';
+import { ProductFeaturesIcon } from './IconComponents/ProductFeaturesIcon';
+import { ProfileIcon } from './IconComponents/ProfileIcon';
+import { RedirectIcon } from './IconComponents/RedirectIcon';
+import { RedoIcon } from './IconComponents/RedoIcon';
+import { RightIcon } from './IconComponents/RightIcon';
+import { SaveIcon } from './IconComponents/SaveIcon';
+import { SearchIcon } from './IconComponents/SearchIcon';
+import { ShareIcon } from './IconComponents/ShareIcon';
+import { SuccessFilledIcon } from './IconComponents/SuccessFilledIcon';
+import { TicketsIcon } from './IconComponents/TicketsIcon';
+import { UmsIcon } from './IconComponents/UmsIcon';
+import { UnCheckedCheckboxIcon } from './IconComponents/UncheckCheckBoxIcon';
+import { UnCheckedRadioIcon } from './IconComponents/UncheckedRadioIcon';
+import { ViewIcon } from './IconComponents/ViewIcon';
+import { VisibilityOffIcon } from './IconComponents/VisibiityOffIcon';
+import { VisibilityIcon } from './IconComponents/VisibilityIcon';
+import { WarningFilledIcon } from './IconComponents/WarningFilledIcon';
+
 export const Icons = {
+  NoteIcon,
   RedoIcon,
   ArrowBackIcon,
   CollapseIcon,
@@ -79,6 +84,7 @@ export const Icons = {
   AlertFilledIcon: ErrorFilledIcon,
   CrossIcon2,
   LogoutIcon,
+  AccordionArrow,
   TicketsIcon,
   FilterIcon,
   ExportIcon,
@@ -115,4 +121,5 @@ export const Icons = {
   EditIcon,
   ViewIcon,
   RedirectIcon,
+  AcademicsIcon,
 };

package/src/components/Charts/BarChart/BarChart.tsx

@@ -11,6 +11,7 @@ import {
 } from "recharts";
 import {
   AxisLabelProps,
+  BaseAxisProps,
   CartesianGridProps,
   LegendProps,
   MarginProps,
@@ -26,12 +27,14 @@ export type BarChartProps = {
   dataKey: string;
   data: any[];
   bars: BarItem[];
-  barGap?: number;
-  barSize?: number;
+  domain?: any[];
+  barGap?: number | string;
+  barSize?: number | string;
   showToolTip?: boolean;
   showLegend?: boolean;
   cartesianGrid?: CartesianGridProps;
   axisLabelProps?: AxisLabelProps;
+  baseAxisProps?: BaseAxisProps;
   legendSx?: LegendProps;
   containerSx?: SxProps;
   margin?: MarginProps;
@@ -51,12 +54,14 @@ export const BarChart = ({
   margin,
   layout = "horizontal",
   dataKey,
+  domain = [0, "auto"],
   data,
   bars,
   barGap = 10,
   barSize = 20,
   showToolTip = true,
   showLegend = true,
+  baseAxisProps,
   cartesianGrid = { showCartesianGrid: false },
   axisLabelProps,
   legendSx,
@@ -68,7 +73,7 @@ export const BarChart = ({
   const theme = useTheme();
 
   return (
-    <Stack alignItems={"center"} sx={{ ...containerSx }}>
+    <Stack alignItems={"center"} sx={{ ...containerSx }} width={"fit-content"}>
       <Typography variant={"h5"} align={"center"} sx={{ ...titleSx }}>
         {title}
       </Typography>
@@ -86,12 +91,14 @@ export const BarChart = ({
         )}
         {showToolTip && (
           <Tooltip
+            cursor={{ fill: theme.palette.secondary.light, fillOpacity: "50%" }}
             itemStyle={{
-              color: theme.palette.text.primary,
+              color: theme.palette.text.secondary,
             }}
             contentStyle={{
-              color: theme.palette.text.secondary,
+              color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
+              borderColor: theme.palette.border.primary,
               borderRadius: "5px",
               padding: "5px 10px",
             }}
@@ -106,7 +113,10 @@ export const BarChart = ({
             <XAxis
               type="category"
               dataKey={dataKey}
-              stroke={theme.palette.primary.dark}
+              stroke={theme.palette.border.primary}
+              tick={{ fill: theme.palette.text.tertiary }}
+              angle={baseAxisProps?.xAxis?.angle}
+              tickMargin={baseAxisProps?.xAxis?.tickMargin}
             >
               <Label
                 {...xLabel}
@@ -114,7 +124,13 @@ export const BarChart = ({
                 style={{ fill: theme.palette.text.primary }}
               />
             </XAxis>
-            <YAxis type="number" stroke={theme.palette.primary.dark}>
+            <YAxis
+              type="number"
+              stroke={theme.palette.border.primary}
+              tick={{ fill: theme.palette.text.tertiary }}
+              tickMargin={baseAxisProps?.yAxis?.tickMargin}
+              domain={domain}
+            >
               {yLabel && (
                 <Label
                   offset={10}
@@ -129,7 +145,13 @@ export const BarChart = ({
           </>
         ) : (
           <>
-            <XAxis type="number" stroke={theme.palette.primary.dark}>
+            <XAxis
+              type="number"
+              stroke={theme.palette.border.primary}
+              tick={{ fill: theme.palette.text.tertiary }}
+              angle={baseAxisProps?.xAxis?.angle}
+              tickMargin={baseAxisProps?.xAxis?.tickMargin}
+            >
               <Label
                 {...xLabel}
                 dy={xLabel?.dy}
@@ -139,7 +161,9 @@ export const BarChart = ({
             <YAxis
               dataKey={dataKey}
               type="category"
-              stroke={theme.palette.primary.dark}
+              stroke={theme.palette.border.primary}
+              tick={{ fill: theme.palette.text.tertiary }}
+              tickMargin={baseAxisProps?.yAxis?.tickMargin}
             >
               {yLabel && (
                 <Label

package/src/components/Charts/LineChart/LineChart.tsx

@@ -74,11 +74,12 @@ export const LineChart = ({
         {showToolTip && (
           <Tooltip
             itemStyle={{
-              color: theme.palette.text.primary,
+              color: theme.palette.text.secondary,
             }}
             contentStyle={{
-              color: theme.palette.text.secondary,
+              color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
+              borderColor: theme.palette.border.primary,
               borderRadius: "5px",
               padding: "5px 10px",
             }}
@@ -90,7 +91,8 @@ export const LineChart = ({
           padding={"gap"}
           type="category"
           dataKey={dataKey}
-          stroke={theme.palette.primary.dark}
+          stroke={theme.palette.border.primary}
+          tick={{ fill: theme.palette.text.tertiary }}
         >
           <Label
             {...xLabel}
@@ -98,7 +100,11 @@ export const LineChart = ({
             style={{ fill: theme.palette.text.primary }}
           />
         </XAxis>
-        <YAxis type="number" stroke={theme.palette.primary.dark}>
+        <YAxis
+          type="number"
+          stroke={theme.palette.border.primary}
+          tick={{ fill: theme.palette.text.tertiary }}
+        >
           {yLabel && (
             <Label
               offset={10}

package/src/components/Charts/PieChart/PieChart.tsx

@@ -52,11 +52,12 @@ export const PieChart = ({
         {showToolTip && (
           <Tooltip
             itemStyle={{
-              color: theme.palette.text.primary,
+              color: theme.palette.text.secondary,
             }}
             contentStyle={{
-              color: theme.palette.text.secondary,
+              color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
+              borderColor: theme.palette.border.primary,
               borderRadius: "5px",
               padding: "5px 10px",
             }}

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -146,6 +146,7 @@ const CustomTooltip = ({ active, payload }: any) => {
 
 export const StyledContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
+  borderColor: theme.palette.border.primary,
   borderRadius: "5px",
   padding: "5px 10px",
 }));

package/src/components/Charts/export.ts

@@ -0,0 +1,4 @@
+export * from "./BarChart/BarChart";
+export * from "./LineChart/LineChart";
+export * from "./TreeMap/TreeMap";
+export * from "./PieChart/PieChart";

package/src/components/Charts/types/types.ts

@@ -30,6 +30,16 @@ export type LabelProps = {
   angle?: number;
 };
 
+export type BaseAxisProps = {
+  xAxis?: TickProps;
+  yAxis?: TickProps;
+};
+
+export type TickProps = {
+  angle?: number;
+  tickMargin?: number;
+};
+
 export type LegendProps = {
   width?: number;
   height?: number;
@@ -38,6 +48,6 @@ export type LegendProps = {
   verticalAlign?: VerticalAlignmentType;
   iconSize?: number;
   iconType?: IconType;
-  margin: MarginProps;
-  className: string;
+  margin?: MarginProps;
+  className?: string;
 };