@campxdev/react-blueprint 1.4.1 → 1.5.0

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/campx-web-utils": "0.1.5",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^6.1.5",
@@ -12,12 +11,11 @@
     "@mui/x-data-grid": "^7.22.1",
     "@mui/x-date-pickers": "^7.22.1",
     "@reduxjs/toolkit": "^2.2.7",
-    "@storybook/addon-backgrounds": "^8.3.1",
-    "@storybook/addon-designs": "^8.0.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
+    "@types/lodash": "^4.17.13",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.3.0",
@@ -43,8 +41,7 @@
     "redux": "^5.0.1",
     "storybook-dark-mode": "^4.0.1",
     "typescript": "^5.5.2",
-    "web-vitals": "^2.1.0",
-    "yalc": "^1.0.0-pre.53"
+    "web-vitals": "^2.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -76,6 +73,8 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-backgrounds": "^8.3.1",
+    "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-essentials": "^8.3.1",
     "@storybook/addon-interactions": "^8.3.1",
     "@storybook/addon-links": "^8.3.1",

package/src/App.tsx

@@ -2,7 +2,6 @@ import { GridColDef } from '@mui/x-data-grid';
 import { useState } from 'react';
 import './App.css';
 import { EditableDataTable, Select, SingleSelect } from './components/export';
-import { usePageHeader } from './hooks/usePageHeader';
 
 interface RowType {
   lastName: string;
@@ -13,8 +12,6 @@ interface RowType {
 function App() {
   const [status, setStatus] = useState('ok1');
 
-  const { uniqueId, density, columnVisibilityModel } = usePageHeader();
-
   const columns: GridColDef[] = [
     {
       field: 'firstName',

package/src/AppContent.tsx

@@ -1,29 +1,6 @@
-import { axios } from '@campxdev/campx-web-utils';
-import { useQuery } from 'react-query';
 import { AppHeader } from './components/export';
 
-const fetchClubRequests = () => {
-  return axios.get(`/square/clubs`).then((res) => res.data);
-};
-
-function AppContent() {
-  const {
-    data: requests,
-    isLoading,
-    error,
-    refetch,
-  } = useQuery('club-requests', fetchClubRequests);
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (error) {
-    // No need to handle the error locally, it will be caught by ErrorBoundary
-    console.error('Error fetching club requests:', error);
-    throw error; // Re-throw the error to be caught by the ErrorBoundary
-  }
-
+export const AppContent = () => {
   return (
     <AppHeader
       clientName="Anurag University"
@@ -33,6 +10,4 @@ function AppContent() {
       institutionsData={[]}
     />
   );
-}
-
-export default AppContent;
+};

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

@@ -16,7 +16,7 @@ export const AdminIcon = ({ size = 16 }) => {
         transform="translate(-492 -188)"
       >
         <g id="frame" transform="translate(492 188)">
-          <g id="Vector" transform="translate(2.208 1.044)" fill="#121212">
+          <g id="Vector" transform="translate(2.208 1.044)" fill={color}>
             <path
               d="M 7.791670799255371 18.02291679382324 C 6.836270809173584 18.02291679382324 5.921350955963135 17.73477554321289 5.215450763702393 17.21158599853516 L 1.631850838661194 14.53637599945068 C 0.660740852355957 13.81230640411377 -0.09999914467334747 12.29828643798828 -0.09999914467334747 11.08958625793457 L -0.09999914467334747 4.889586448669434 C -0.09999914467334747 3.561296463012695 0.8729908466339111 2.158456325531006 2.115100860595703 1.695876359939575 L 6.27324104309082 0.1376064121723175 C 6.683250904083252 -0.01562358718365431 7.219511032104492 -0.1000035852193832 7.783330917358398 -0.1000035852193832 C 8.347150802612305 -0.1000035852193832 8.883410453796387 -0.01562358718365431 9.293340682983398 0.1375764161348343 L 13.4600305557251 1.695926427841187 C 14.70201110839844 2.158456325531006 15.67500114440918 3.561296463012695 15.67500114440918 4.889586448669434 L 15.67500114440918 11.0812463760376 C 15.67500114440918 12.28994655609131 14.91426086425781 13.80397605895996 13.94310092926025 14.52808666229248 L 10.35982131958008 17.20304679870605 C 9.666180610656738 17.73153686523438 8.753850936889648 18.02291679382324 7.791670799255371 18.02291679382324 Z M 7.802260875701904 1.348946452140808 C 7.412920951843262 1.348946452140808 7.042130947113037 1.403976440429688 6.784960746765137 1.499936461448669 L 2.626760959625244 3.058226346969604 C 1.946520805358887 3.311336517333984 1.350000858306885 4.170966625213623 1.350000858306885 4.897916316986084 L 1.350000858306885 11.08958625793457 C 1.350000858306885 11.83955669403076 1.89487087726593 12.92940616607666 2.493160963058472 13.37611675262451 L 6.076490879058838 16.05111694335938 C 6.516410827636719 16.38009643554688 7.140020847320557 16.56874656677246 7.787500858306885 16.56874656677246 C 8.434980392456055 16.56874656677246 9.058590888977051 16.38009643554688 9.498440742492676 16.05116653442383 L 13.0818510055542 13.37611675262451 C 13.69073104858398 12.91944599151611 14.22500038146973 11.85091686248779 14.22500038146973 11.08958625793457 L 14.22500038146973 4.889586448669434 C 14.22500038146973 4.170546531677246 13.62804126739502 3.310746431350708 12.94750118255615 3.049606323242188 L 8.789911270141602 1.491556406021118 C 8.540990829467773 1.401046395301819 8.180670738220215 1.348946452140808 7.802260875701904 1.348946452140808 Z"
               stroke="none"
@@ -24,14 +24,14 @@ export const AdminIcon = ({ size = 16 }) => {
             <path
               d="M 7.791670799255371 17.92291641235352 C 8.700000762939453 17.92291641235352 9.600000381469727 17.65624618530273 10.30000114440918 17.12291717529297 L 13.88333129882812 14.44791603088379 C 14.83333110809326 13.73958683013916 15.57500076293945 12.26458644866943 15.57500076293945 11.0812463760376 L 15.57500076293945 4.889586448669434 C 15.57500076293945 3.606246471405029 14.63333129882812 2.239586353302002 13.42500114440918 1.789586424827576 L 9.258331298828125 0.2312464118003845 C 8.433330535888672 -0.07708358764648438 7.133330821990967 -0.07708358764648438 6.30833101272583 0.2312464118003845 L 2.150000810623169 1.789586424827576 C 0.941670835018158 2.239586353302002 8.583068620282575e-07 3.606246471405029 8.583068620282575e-07 4.889586448669434 L 8.583068620282575e-07 11.08958625793457 C 8.583068620282575e-07 12.27291679382324 0.7416708469390869 13.74791622161865 1.691670894622803 14.4562463760376 L 5.275001049041748 17.13124656677246 C 5.983330726623535 17.65624618530273 6.883330821990967 17.92291641235352 7.791670799255371 17.92291641235352 M 7.802259922027588 1.248941779136658 C 8.17853832244873 1.248941779136658 8.552820205688477 1.298941850662231 8.825000762939453 1.397916436195374 L 12.98333072662354 2.956246376037598 C 13.70000076293945 3.231246471405029 14.32500076293945 4.131246566772461 14.32500076293945 4.889586448669434 L 14.32500076293945 11.08958625793457 C 14.32500076293945 11.87291622161865 13.77500057220459 12.98124599456787 13.1416711807251 13.4562463760376 L 9.558330535888672 16.13124656677246 C 8.600000381469727 16.8479175567627 6.975000858306885 16.8479175567627 6.016670703887939 16.13124656677246 L 2.433330774307251 13.4562463760376 C 1.808330893516541 12.98958683013916 1.250000834465027 11.88124656677246 1.250000834465027 11.08958625793457 L 1.250000834465027 4.897916316986084 C 1.250000834465027 4.131246566772461 1.875000834465027 3.231246471405029 2.591670751571655 2.964586496353149 L 6.750000953674316 1.406246423721313 C 7.032028198242188 1.301013350486755 7.418185234069824 1.248941779136658 7.802259922027588 1.248941779136658 M 7.791670799255371 18.12291717529297 C 6.814970970153809 18.12291717529297 5.878911018371582 17.82779693603516 5.155910968780518 17.29192733764648 L 1.572030901908875 14.61651611328125 C 0.5784108638763428 13.87565612792969 -0.199999138712883 12.326416015625 -0.199999138712883 11.08958625793457 L -0.199999138712883 4.889586448669434 C -0.199999138712883 3.522346496582031 0.8015808463096619 2.078336477279663 2.080200910568237 1.602166414260864 L 6.238151073455811 0.04396641254425049 C 6.659180641174316 -0.1133835911750793 7.207870960235596 -0.20000359416008 7.783330917358398 -0.20000359416008 C 8.358790397644043 -0.20000359416008 8.90748119354248 -0.1133835911750793 9.328340530395508 0.04390641301870346 L 13.49506092071533 1.602256417274475 C 14.77342128753662 2.078336477279663 15.77500057220459 3.522346496582031 15.77500057220459 4.889586448669434 L 15.77500057220459 11.0812463760376 C 15.77500057220459 12.31808662414551 14.99659061431885 13.8673267364502 14.00288105010986 14.60825634002686 L 10.41964054107666 17.2831859588623 C 9.709470748901367 17.82427597045898 8.775620460510254 18.12291717529297 7.791670799255371 18.12291717529297 Z M 7.802260875701904 1.448946356773376 C 7.424400806427002 1.448946356773376 7.066350936889648 1.501676440238953 6.819921016693115 1.593626379966736 L 2.661850929260254 3.151866436004639 C 2.027400970458984 3.387936353683472 1.450000882148743 4.220086574554443 1.450000882148743 4.897916316986084 L 1.450000882148743 11.08958625793457 C 1.450000882148743 11.81332683563232 1.975720882415771 12.86497688293457 2.552990913391113 13.29598617553711 L 6.136311054229736 15.97097682952881 C 6.559370994567871 16.28735733032227 7.161150932312012 16.46874618530273 7.787500858306885 16.46874618530273 C 8.413861274719238 16.46874618530273 9.015641212463379 16.28735733032227 9.43855094909668 15.97107601165771 L 13.0220308303833 13.29597663879395 C 13.59911060333252 12.86316680908203 14.12500095367432 11.81138610839844 14.12500095367432 11.08958625793457 L 14.12500095367432 4.889586448669434 C 14.12500095367432 4.219136238098145 13.54669094085693 3.38663649559021 12.91168117523193 3.142976522445679 L 8.754820823669434 1.585196375846863 C 8.517340660095215 1.498856425285339 8.16947078704834 1.448946356773376 7.802260875701904 1.448946356773376 Z"
               stroke="none"
-              fill="#121212"
+              fill={color}
             />
           </g>
           <g
             id="Vector-2"
             data-name="Vector"
             transform="translate(7.708 6.458)"
-            fill="#121212"
+            fill={color}
           >
             <path
               d="M 2.291666746139526 4.683336734771729 C 0.9728967547416687 4.683336734771729 -0.100003257393837 3.610436677932739 -0.100003257393837 2.291666746139526 C -0.100003257393837 0.9728967547416687 0.9728967547416687 -0.100003257393837 2.291666746139526 -0.100003257393837 C 3.610436677932739 -0.100003257393837 4.683336734771729 0.9728967547416687 4.683336734771729 2.291666746139526 C 4.683336734771729 3.610436677932739 3.610436677932739 4.683336734771729 2.291666746139526 4.683336734771729 Z M 2.291666746139526 1.34999680519104 C 1.772426724433899 1.34999680519104 1.34999680519104 1.772426724433899 1.34999680519104 2.291666746139526 C 1.34999680519104 2.810906648635864 1.772426724433899 3.233336687088013 2.291666746139526 3.233336687088013 C 2.810906648635864 3.233336687088013 3.233336687088013 2.810906648635864 3.233336687088013 2.291666746139526 C 3.233336687088013 1.772426724433899 2.810906648635864 1.34999680519104 2.291666746139526 1.34999680519104 Z"
@@ -40,14 +40,14 @@ export const AdminIcon = ({ size = 16 }) => {
             <path
               d="M 2.291666746139526 4.58333683013916 C 3.558336734771729 4.58333683013916 4.58333683013916 3.558336734771729 4.58333683013916 2.291666746139526 C 4.58333683013916 1.024996757507324 3.558336734771729 -3.25386054100818e-06 2.291666746139526 -3.25386054100818e-06 C 1.024996757507324 -3.25386054100818e-06 -3.25386054100818e-06 1.024996757507324 -3.25386054100818e-06 2.291666746139526 C -3.25386054100818e-06 3.558336734771729 1.024996757507324 4.58333683013916 2.291666746139526 4.58333683013916 M 2.291666746139526 1.249996781349182 C 2.866666793823242 1.249996781349182 3.33333683013916 1.716666698455811 3.33333683013916 2.291666746139526 C 3.33333683013916 2.866666793823242 2.866666793823242 3.33333683013916 2.291666746139526 3.33333683013916 C 1.716666698455811 3.33333683013916 1.249996781349182 2.866666793823242 1.249996781349182 2.291666746139526 C 1.249996781349182 1.716666698455811 1.716666698455811 1.249996781349182 2.291666746139526 1.249996781349182 M 2.291666746139526 4.783336639404297 C 0.9177567362785339 4.783336639404297 -0.2000032514333725 3.665576696395874 -0.2000032514333725 2.291666746139526 C -0.2000032514333725 0.9177567362785339 0.9177567362785339 -0.2000032514333725 2.291666746139526 -0.2000032514333725 C 3.665576696395874 -0.2000032514333725 4.783336639404297 0.9177567362785339 4.783336639404297 2.291666746139526 C 4.783336639404297 3.665576696395874 3.665576696395874 4.783336639404297 2.291666746139526 4.783336639404297 Z M 2.291666746139526 1.449996709823608 C 1.827566742897034 1.449996709823608 1.449996709823608 1.827566742897034 1.449996709823608 2.291666746139526 C 1.449996709823608 2.755766630172729 1.827566742897034 3.133336782455444 2.291666746139526 3.133336782455444 C 2.755766630172729 3.133336782455444 3.133336782455444 2.755766630172729 3.133336782455444 2.291666746139526 C 3.133336782455444 1.827566742897034 2.755766630172729 1.449996709823608 2.291666746139526 1.449996709823608 Z"
               stroke="none"
-              fill="#121212"
+              fill={color}
             />
           </g>
           <g
             id="Vector-3"
             data-name="Vector"
             transform="translate(9.375 9.792)"
-            fill="#121212"
+            fill={color}
           >
             <path
               d="M 0.625 3.849999904632568 C 0.2252299934625626 3.849999904632568 -0.1000000014901161 3.524770021438599 -0.1000000014901161 3.125 L -0.1000000014901161 0.625 C -0.1000000014901161 0.2252299934625626 0.2252299934625626 -0.1000000014901161 0.625 -0.1000000014901161 C 1.024770021438599 -0.1000000014901161 1.350000023841858 0.2252299934625626 1.350000023841858 0.625 L 1.350000023841858 3.125 C 1.350000023841858 3.524770021438599 1.024770021438599 3.849999904632568 0.625 3.849999904632568 Z"
@@ -56,7 +56,7 @@ export const AdminIcon = ({ size = 16 }) => {
             <path
               d="M 0.625 3.75 C 0.9666699767112732 3.75 1.25 3.466670036315918 1.25 3.125 L 1.25 0.625 C 1.25 0.2833299934864044 0.9666699767112732 -2.220446049250313e-16 0.625 -2.220446049250313e-16 C 0.2833299934864044 -2.220446049250313e-16 0 0.2833299934864044 0 0.625 L 0 3.125 C 0 3.466670036315918 0.2833299934864044 3.75 0.625 3.75 M 0.625 3.950000047683716 C 0.1700900048017502 3.950000047683716 -0.2000000029802322 3.579910039901733 -0.2000000029802322 3.125 L -0.2000000029802322 0.625 C -0.2000000029802322 0.1700900048017502 0.1700900048017502 -0.2000000029802322 0.625 -0.2000000029802322 C 1.079910039901733 -0.2000000029802322 1.450000047683716 0.1700900048017502 1.450000047683716 0.625 L 1.450000047683716 3.125 C 1.450000047683716 3.579910039901733 1.079910039901733 3.950000047683716 0.625 3.950000047683716 Z"
               stroke="none"
-              fill="#121212"
+              fill={color}
             />
           </g>
           <path

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

@@ -1,7 +1,4 @@
-import { useTheme } from '@mui/material';
-
 export const DownloadIcon = ({ size = 16 }) => {
-  const theme = useTheme();
   return (
     <div>
       <svg

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

@@ -0,0 +1,43 @@
+export const ExportMenuIcon = ({ 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_23_490)">
+        <path
+          d="M18.9583 9.99999C18.9578 10.0831 18.9408 10.1652 18.9083 10.2417C18.8616 10.3556 18.7819 10.453 18.6795 10.5213C18.577 10.5896 18.4565 10.6257 18.3333 10.625L12.5 10.625C12.3346 10.6239 12.1762 10.5577 12.0593 10.4407C11.9423 10.3238 11.8761 10.1654 11.875 9.99999C11.8761 9.83457 11.9423 9.67623 12.0593 9.55925C12.1762 9.44228 12.3346 9.37608 12.5 9.37499H16.825L16.225 8.77499C16.1146 8.65651 16.0545 8.4998 16.0574 8.33789C16.0602 8.17597 16.1258 8.02148 16.2403 7.90697C16.3548 7.79246 16.5093 7.72687 16.6712 7.72401C16.8331 7.72115 16.9899 7.78126 17.1083 7.89166L18.775 9.55832C18.8331 9.61628 18.8792 9.68512 18.9106 9.7609C18.9421 9.83669 18.9583 9.91793 18.9583 9.99999Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M18.9607 10.0008C18.961 10.0829 18.9449 10.1643 18.9134 10.2401C18.882 10.3159 18.8357 10.3847 18.7773 10.4425L17.1107 12.1091C16.9935 12.2265 16.8346 12.2925 16.6688 12.2927C16.5029 12.2928 16.3439 12.2271 16.2265 12.11C16.1091 11.9928 16.0431 11.8339 16.043 11.6681C16.0428 11.5023 16.1085 11.3432 16.2257 11.2258L17.8923 9.55915C18.01 9.44291 18.1686 9.37773 18.334 9.37773C18.4994 9.37773 18.6581 9.44291 18.7757 9.55915C18.8343 9.61677 18.8809 9.68551 18.9127 9.76134C18.9444 9.83718 18.9607 9.91859 18.9607 10.0008Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M6.875 5.31664V1.64998C6.87609 1.48456 6.94229 1.32622 7.05927 1.20924C7.17624 1.09227 7.33458 1.02607 7.5 1.02498C7.66542 1.02607 7.82376 1.09227 7.94074 1.20924C8.05771 1.32622 8.12391 1.48456 8.125 1.64998L8.125 18.3333C8.12391 18.4987 8.05771 18.6571 7.94074 18.774C7.82376 18.891 7.66542 18.9572 7.5 18.9583C7.33458 18.9572 7.17624 18.891 7.05927 18.774C6.94229 18.6571 6.87609 18.4987 6.875 18.3333L6.875 5.31664Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M1.04167 12.5V7.5C1.04167 2.97501 2.975 1.04167 7.5 1.04167L10.8333 1.04167C14.7417 1.04167 16.7 2.49167 17.175 5.74167C17.1879 5.82275 17.1844 5.90559 17.1649 5.98533C17.1453 6.06506 17.1101 6.1401 17.0612 6.20606C17.0123 6.27201 16.9508 6.32756 16.8802 6.36945C16.8096 6.41133 16.7313 6.43872 16.65 6.45C16.569 6.46217 16.4864 6.45823 16.4069 6.43842C16.3275 6.4186 16.2527 6.38329 16.1869 6.33452C16.1211 6.28575 16.0655 6.22447 16.0235 6.1542C15.9814 6.08393 15.9536 6.00604 15.9417 5.925C15.5583 3.30834 14.125 2.29167 10.8333 2.29167L7.5 2.29167C3.65833 2.29167 2.29167 3.65834 2.29167 7.5V12.5C2.29167 16.3417 3.65833 17.7083 7.5 17.7083H10.8333C14.125 17.7083 15.5583 16.6917 15.9417 14.075C15.966 13.9115 16.0543 13.7643 16.1871 13.6658C16.3199 13.5673 16.4864 13.5257 16.65 13.55C16.8135 13.5743 16.9607 13.6626 17.0592 13.7954C17.1577 13.9283 17.1993 14.0948 17.175 14.2583C16.7 17.5083 14.7417 18.9583 10.8333 18.9583H7.5C2.975 18.9583 1.04167 17.025 1.04167 12.5Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_23_490">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

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

@@ -0,0 +1,43 @@
+export const ImportIcon = ({ 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_23_486)">
+        <path
+          d="M10 8.125C9.91694 8.1245 9.8348 8.1075 9.75834 8.075C9.6444 8.02831 9.54702 7.94861 9.47871 7.84615C9.4104 7.74369 9.37429 7.62315 9.37501 7.5V1.66667C9.3761 1.50125 9.4423 1.34291 9.55928 1.22594C9.67625 1.10896 9.83459 1.04276 10 1.04167C10.1654 1.04276 10.3238 1.10896 10.4407 1.22594C10.5577 1.34291 10.6239 1.50125 10.625 1.66667V5.99167L11.225 5.39167C11.3435 5.28127 11.5002 5.22117 11.6621 5.22403C11.824 5.22688 11.9785 5.29248 12.093 5.40699C12.2075 5.5215 12.2731 5.67598 12.276 5.8379C12.2788 5.99982 12.2187 6.15653 12.1083 6.275L10.4417 7.94167C10.3837 7.99976 10.3149 8.04585 10.2391 8.07731C10.1633 8.10877 10.0821 8.12498 10 8.125Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M9.99987 8.12749C9.91777 8.12779 9.83643 8.11173 9.7606 8.08025C9.68477 8.04877 9.61597 8.00251 9.55821 7.94416L7.89154 6.27749C7.77418 6.16036 7.70816 6.0014 7.70801 5.83558C7.70785 5.66977 7.77357 5.51069 7.89071 5.39333C8.00785 5.27597 8.16681 5.20995 8.33262 5.20979C8.49843 5.20964 8.65752 5.27536 8.77487 5.39249L10.4415 7.05916C10.5578 7.17678 10.623 7.33547 10.623 7.50083C10.623 7.66619 10.5578 7.82488 10.4415 7.94249C10.3839 8.00115 10.3152 8.04772 10.2393 8.07948C10.1635 8.11125 10.0821 8.12757 9.99987 8.12749Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M5.31657 13.125H1.6499C1.48448 13.1239 1.32614 13.0577 1.20917 12.9407C1.09219 12.8238 1.02599 12.6654 1.0249 12.5C1.02599 12.3346 1.09219 12.1762 1.20917 12.0593C1.32614 11.9423 1.48448 11.8761 1.6499 11.875H18.3332C18.4987 11.8761 18.657 11.9423 18.774 12.0593C18.8909 12.1762 18.9571 12.3346 18.9582 12.5C18.9571 12.6654 18.8909 12.8238 18.774 12.9407C18.657 13.0577 18.4987 13.1239 18.3332 13.125H5.31657Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M12.4998 18.9583H7.49984C2.97484 18.9583 1.0415 17.025 1.0415 12.5V9.16667C1.0415 5.25833 2.4915 3.3 5.7415 2.825C5.82259 2.81215 5.90542 2.81559 5.98516 2.83513C6.0649 2.85466 6.13994 2.88991 6.20589 2.93879C6.27185 2.98767 6.32739 3.04922 6.36928 3.11983C6.41117 3.19043 6.43855 3.26868 6.44984 3.35C6.462 3.431 6.45806 3.5136 6.43825 3.59307C6.41843 3.67255 6.38312 3.74733 6.33435 3.81313C6.28558 3.87893 6.2243 3.93447 6.15403 3.97654C6.08376 4.01862 6.00587 4.04641 5.92484 4.05833C3.30817 4.44167 2.2915 5.875 2.2915 9.16667V12.5C2.2915 16.3417 3.65817 17.7083 7.49984 17.7083H12.4998C16.3415 17.7083 17.7082 16.3417 17.7082 12.5V9.16667C17.7082 5.875 16.6915 4.44167 14.0748 4.05833C13.9113 4.03402 13.7641 3.94574 13.6656 3.8129C13.5672 3.68006 13.5255 3.51355 13.5498 3.35C13.5741 3.18645 13.6624 3.03926 13.7953 2.9408C13.9281 2.84234 14.0946 2.80069 14.2582 2.825C17.5082 3.3 18.9582 5.25833 18.9582 9.16667V12.5C18.9582 17.025 17.0248 18.9583 12.4998 18.9583Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_23_486">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

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

@@ -46,6 +46,7 @@ import { ExamxIcon } from './IconComponents/ExamxIcon';
 import { ExcelIcon } from './IconComponents/ExcelIcon';
 import { ExpandIcon } from './IconComponents/ExpandIcon';
 import { ExportIcon } from './IconComponents/ExportIcon';
+import { ExportMenuIcon } from './IconComponents/ExportMenuIcon';
 import { FeePaymentIcon } from './IconComponents/FeePaymentIcon';
 import { FilterIcon } from './IconComponents/FilterIcon';
 import { HandoutsIcon } from './IconComponents/HandoutsIcon';
@@ -54,6 +55,7 @@ import { HomeIcon } from './IconComponents/HomeIcon';
 import { HostelxIcon } from './IconComponents/HostelxIcon';
 import { HostlerIcon } from './IconComponents/HostlersIcon';
 import { ImageIcon } from './IconComponents/ImageIcon';
+import { ImportIcon } from './IconComponents/ImportIcon';
 import { InfoFilledIcon } from './IconComponents/InfoFilledIcon';
 import { InfoIcon } from './IconComponents/InfoIcon';
 import { InstitutionsIcon } from './IconComponents/InstitutionsIcon';
@@ -208,4 +210,6 @@ export const Icons = {
   RegistrationIcon,
   RouteIcon,
   ManageUserIcon,
+  ImportIcon,
+  ExportMenuIcon,
 };

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

@@ -1,11 +1,4 @@
-import {
-  Box,
-  Stack,
-  styled,
-  SxProps,
-  useTheme,
-  Typography,
-} from '@mui/material';
+import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
 import {
   Bar,
   CartesianGrid,
@@ -16,6 +9,8 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
+import { LayoutType } from 'recharts/types/util/types';
+import { StyledContainer } from '../../export';
 import {
   AxisLabelProps,
   BaseAxisProps,
@@ -25,8 +20,6 @@ import {
   SubTitleProps,
   TitleProps,
 } from '../types/types';
-import { LayoutType } from 'recharts/types/util/types';
-import { StyledContainer } from '../../export';
 
 export type BarChartProps = {
   title?: string;
@@ -135,7 +128,9 @@ export const BarChart = ({
           />
         )}
         {showLegend && <Legend {...legendSx} />}
-        {bars?.map((item, index) => <Bar key={index} {...item} />)}
+        {bars?.map((item, index) => (
+          <Bar key={index} {...item} />
+        ))}
         {isVerticalLayout ? (
           <>
             <XAxis

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

@@ -1,6 +1,5 @@
-import { Box, Stack, SxProps, useTheme } from '@mui/material';
+import { Stack, SxProps, useTheme } from '@mui/material';
 import {
-  Bar,
   CartesianGrid,
   Label,
   Legend,
@@ -10,6 +9,8 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
+import { CurveType } from 'recharts/types/shape/Curve';
+import { Typography } from '../../export';
 import {
   AxisLabelProps,
   BaseAxisProps,
@@ -19,8 +20,6 @@ import {
   SubTitleProps,
   TitleProps,
 } from '../types/types';
-import { CurveType } from 'recharts/types/shape/Curve';
-import { Typography } from '../../export';
 
 export type LineChartProps = {
   title?: string;
@@ -150,7 +149,9 @@ export const LineChart = ({
             />
           )}
         </YAxis>
-        {lines?.map((item, index) => <Line key={index} {...item} />)}
+        {lines?.map((item, index) => (
+          <Line key={index} {...item} />
+        ))}
       </ReLineChart>
     </Stack>
   );

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

@@ -1,8 +1,8 @@
 import { Box, Stack, styled, SxProps, useTheme } from '@mui/material';
 import { Treemap as ReTreeMap, Tooltip } from 'recharts';
 import { AnimationTiming } from 'recharts/types/util/types';
-import { MarginProps, SubTitleProps, TitleProps } from '../types/types';
 import { Typography } from '../../export';
+import { MarginProps, SubTitleProps, TitleProps } from '../types/types';
 
 interface TreeMapProps {
   title?: string;
@@ -87,20 +87,7 @@ export default TreeMap;
 
 const CustomizedContent = (props: any) => {
   const theme = useTheme();
-  const {
-    root,
-    depth,
-    x,
-    y,
-    width,
-    height,
-    index,
-    payload,
-    rank,
-    name,
-    fill,
-    stroke,
-  } = props;
+  const { depth, x, y, width, height, name, fill, stroke } = props;
 
   return (
     <g {...props}>

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -2,7 +2,6 @@ import {
   Avatar as MuiAvatar,
   AvatarProps as MuiAvatarProps,
   styled,
-  useTheme,
 } from '@mui/material';
 import { Typography } from '../Typography/Typography';
 
@@ -19,7 +18,6 @@ export const CircularAvatar = ({ text, ...rest }: CircularAvatarProps) => {
       ?.join('')
       .toUpperCase();
   };
-  const theme = useTheme();
 
   const StyledCircularAvatar = styled(MuiAvatar)(({ theme }) => ({
     height: '42px',

package/src/components/DataDisplay/Card/styles.tsx

@@ -1,11 +1,8 @@
 import {
-  Box,
   Button,
   CardActions,
-  CardContent,
   Divider,
   IconButton,
-  Card as MuiCard,
   Stack,
   styled,
   Typography,

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -1,5 +1,5 @@
-import { axios } from '@campxdev/campx-web-utils';
 import { Box, useTheme } from '@mui/material';
+import axios from 'axios';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import ReactJoyride, { ACTIONS, CallBackProps, Step } from 'react-joyride';
 import { Typography } from '../../DataDisplay/Typography/Typography';
@@ -34,8 +34,7 @@ export const Tutorial = ({
   }, [userTours, tourName, startTour]);
 
   const handleJoyrideCallback = (data: CallBackProps) => {
-    console.log(data);
-    const { action, status, lifecycle, type, size } = data;
+    const { action, lifecycle, type } = data;
     const reqData = {
       tourName: tourName,
       skipped: false,

package/src/components/Input/MultiCheckBox/MultiCheckBox.tsx

@@ -36,7 +36,7 @@ export const MultiCheckBox = ({
       containerProps={containerProps}
     >
       <Stack direction={direction} spacing={4}>
-        {options?.length != 0 &&
+        {options?.length !== 0 &&
           options?.map((item, index) => (
             <SingleCheckBox
               key={index}

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -1,4 +1,3 @@
-import { axios as campxAxios } from '@campxdev/campx-web-utils';
 import {
   AutocompleteCloseReason,
   AutocompleteProps,
@@ -6,7 +5,7 @@ import {
   Autocomplete as MuiAutocomplete,
   Paper,
 } from '@mui/material';
-import axios from 'axios';
+import axios, { AxiosInstance } from 'axios';
 import _, { debounce } from 'lodash';
 import { SyntheticEvent, useEffect, useMemo, useReducer } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
@@ -39,7 +38,7 @@ export type SingleSelectProps = {
   options?: { label: string; subLabel?: string; value: any }[] | any[];
   optionsApiEndPoint?: string;
   optionsApiEndpointParams?: any;
-  useCampxAxios?: boolean;
+  externalAxios?: AxiosInstance;
   required?: boolean;
   label?: string;
   name?: string;
@@ -88,7 +87,7 @@ export const SingleSelect = ({
   options,
   optionsApiEndPoint,
   optionsApiEndpointParams,
-  useCampxAxios = true,
+  externalAxios,
   required = false,
   label,
   name,
@@ -136,7 +135,7 @@ export const SingleSelect = ({
     search,
   } = state;
 
-  const internalAxios = useCampxAxios ? campxAxios : axios;
+  const internalAxios = externalAxios || axios;
 
   const handleOpen = async (event: SyntheticEvent) => {
     dispatch({
@@ -213,11 +212,11 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
         stateChanges: {
           internalOptions: internalOptions.filter((o: any) =>
-            reason != 'selectOption' ? o.value == value : o.value != value,
+            reason !== 'selectOption' ? o.value === value : o.value !== value,
           ),
           internalOptionsMap: generateOptionsMap(
             internalOptions.filter((o: any) =>
-              reason != 'selectOption' ? o.value == value : o.value != value,
+              reason !== 'selectOption' ? o.value === value : o.value !== value,
             ),
           ),
         },
@@ -287,9 +286,11 @@ export const SingleSelect = ({
       dispatch({
         actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
         stateChanges: {
-          internalOptions: internalOptions.filter((o: any) => o.value == value),
+          internalOptions: internalOptions.filter(
+            (o: any) => o.value === value,
+          ),
           internalOptionsMap: generateOptionsMap(
-            internalOptions.filter((o: any) => o.value == value),
+            internalOptions.filter((o: any) => o.value === value),
           ),
         },
       });
@@ -326,11 +327,11 @@ export const SingleSelect = ({
           stateChanges: {
             internalOptions: [
               ...options,
-              ...internalOptions.filter((o: any) => o.value == value),
+              ...internalOptions.filter((o: any) => o.value === value),
             ],
             internalOptionsMap: generateOptionsMap([
               ...options,
-              ...internalOptions.filter((o: any) => o.value == value),
+              ...internalOptions.filter((o: any) => o.value === value),
             ]),
           },
         });

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

@@ -4,8 +4,6 @@ import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
 import UserBox from './AppHeaderActions/UserBox';
 import { StyledHeader } from './styles/styles';
-import { StyledIconButton } from '../../Navigation/DropDownMenu/styles';
-import { HelpIcon } from '../../Assets/Icons/IconComponents/HelpIcon';
 
 export interface AppHeaderProps {
   actions?: ReactNode[];

package/src/components/Navigation/ManageFilters/ManageFilters.tsx

@@ -1,4 +1,4 @@
-import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
+import { MenuListProps, MenuProps, Typography } from '@mui/material';
 import { ReactNode, useState } from 'react';
 import { Button, Icons, SearchBar, SingleCheckBox } from '../../export';
 import { DropdownMenu } from '../export';
@@ -22,7 +22,6 @@ export const ManageFilters = ({
 }: ManageFiltersProps) => {
   const [values, setValues] = useState<Options[]>([]);
   const [search, setSearch] = useState<string>('');
-  const theme = useTheme();
 
   const filteredOptions = options.filter((option) =>
     option.label.toLowerCase().includes(search.toLowerCase()),

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

@@ -54,7 +54,7 @@ export const InternalMenuButton = ({
   icon,
   collapsed,
 }: InternalMenuButtonProps) => {
-  const { StyledListItemButton, StyledListItemIcon, HoverIcon } = useMemo(
+  const { StyledListItemButton, StyledListItemIcon } = useMemo(
     () => createSidebarStyles(collapsed),
     [collapsed],
   );

package/src/stories/Navigation/ManageFilters.stories.tsx

@@ -65,7 +65,6 @@ Default.args = {
       label: 'Option 1',
       value: (
         <SingleSelect
-          useCampxAxios={false}
           onChange={() => {}}
           options={[
             {

package/src/utils/logout.ts

@@ -1,4 +1,4 @@
-import { axios } from '@campxdev/campx-web-utils';
+import axios from 'axios';
 import Cookies from 'js-cookie';
 
 export default function logout() {