@campxdev/react-blueprint 1.2.18 → 1.2.19

package/.storybook/preview.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { useDarkMode } from 'storybook-dark-mode';
-import { store } from '../src/state/export';
+import { store } from '../src/redux/export';
 import { MuiThemeProvider } from '../src/themes/MuiThemeProvider';
 
 import { DarkColorTokens } from '../src/themes/colorTokens/darkColorTokens';

package/export.ts

@@ -1,4 +1,4 @@
 export * from './src/components/export';
 export * from './src/hooks/export';
-export * from './src/state/export';
+export * from './src/redux/export';
 export * from './src/themes/export';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -12,7 +12,7 @@
     "@mui/x-data-grid": "^7.5.1",
     "@mui/x-date-pickers": "7.16.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@storybook/addon-backgrounds": "^8.2.6",
+    "@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",
@@ -75,21 +75,21 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^1.6.1",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-interactions": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
-    "@storybook/addon-mdx-gfm": "^8.2.6",
-    "@storybook/addon-onboarding": "^8.2.6",
-    "@storybook/blocks": "^8.2.6",
-    "@storybook/preset-create-react-app": "^8.2.6",
-    "@storybook/react": "^8.2.6",
-    "@storybook/react-webpack5": "^8.2.6",
-    "@storybook/test": "^8.2.6",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-essentials": "^8.3.1",
+    "@storybook/addon-interactions": "^8.3.1",
+    "@storybook/addon-links": "^8.3.1",
+    "@storybook/addon-mdx-gfm": "^8.3.1",
+    "@storybook/addon-onboarding": "^8.3.1",
+    "@storybook/blocks": "^8.3.1",
+    "@storybook/preset-create-react-app": "^8.3.1",
+    "@storybook/react": "^8.3.1",
+    "@storybook/react-webpack5": "^8.3.1",
+    "@storybook/test": "^8.3.1",
     "@types/js-cookie": "^3.0.5",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.2.6",
+    "storybook": "^8.3.1",
     "webpack": "^5.91.0"
   }
 }

package/src/App.tsx

@@ -1,59 +1,94 @@
+import { GridColDef } from '@mui/x-data-grid';
 import { useState } from 'react';
 import './App.css';
-import { AppHeader } from './components/export';
-import { Select } from './components/Input/Select/Select';
+import { EditableDataTable } from './components/export';
+import { usePageHeader } from './hooks/usePageHeader';
+
+interface RowType {
+  lastName: string;
+  firstName: string;
+  age: number;
+}
 
 function App() {
   const [status, setStatus] = useState('green');
 
+  const { uniqueId, density, columnVisibilityModel } = usePageHeader();
+
+  const columns: GridColDef[] = [
+    {
+      field: 'firstName',
+      headerName: 'First name',
+      width: 250,
+      editable: true,
+
+      type: 'string',
+    },
+    {
+      field: 'lastName',
+      headerName: 'Last name',
+      width: 250,
+      editable: true,
+      type: 'string',
+      // renderEditCell: (params) => (
+      //   <TextField
+      //     value={params.value}
+      //     disabled={params.api.getRowMode(params.id) != GridRowModes.Edit}
+      //     onChange={(e) => {
+      //       params.api.setEditCellValue({
+      //         id: params.id,
+      //         field: 'lastName',
+      //         value: e.target.value,
+      //       });
+      //     }}
+      //   />
+      // ),
+    },
+    {
+      field: 'age',
+      headerName: 'Age',
+      width: 110,
+      editable: true,
+      type: 'number',
+    },
+  ];
+
+  const rows1 = [
+    {
+      lastName: 'Snow',
+      firstName: 'Jon',
+      age: 35,
+    },
+    {
+      lastName: 'Lan ter',
+      firstName: 'Cer sei',
+      age: 42,
+    },
+    {
+      lastName: 'Lan Iter',
+      firstName: 'Jaime',
+      age: 45,
+    },
+    {
+      lastName: 'Stark',
+      firstName: 'Arya',
+      age: 16,
+    },
+  ];
+
+  const [rows, setRows] = useState<RowType[]>(rows1 ?? []);
+  const onSave = (rows: RowType[]) => {
+    console.log(rows, 'rrr');
+  };
   return (
     <>
-      <AppHeader
-        clientName="Anurag University"
-        actions={[<p>asdjflsf</p>]}
-        userFullName="Srikanth Yellapragada"
-        collapsed={false}
-        institutionsData={[]}
-      />
-      <Select
-        value={status}
-        onChange={(e) => {
-          setStatus(e.target.value);
+      <EditableDataTable
+        rows={rows}
+        columns={columns}
+        onChange={(newRows) => {
+          setRows(newRows as RowType[]);
         }}
-        options={[
-          {
-            label: 'Green',
-            value: 'green',
-            color: 'green',
-          },
-          {
-            label: 'Red',
-            value: 'red',
-
-            color: 'red',
-          },
-          {
-            label: 'Yellow',
-            value: 'yellow',
-
-            color: 'yellow',
-          },
-          {
-            label: 'PinkPanther',
-            value: 'pink',
-
-            color: 'pink',
-          },
-          {
-            label: 'Blue Boy',
-            value: 'blue',
-            color: 'blue',
-          },
-          {
-            label: 'Simple',
-            value: 'simple',
-          },
-        ]}
+        onSave={onSave}
       />
     </>
   );

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

@@ -0,0 +1,31 @@
+import { useTheme } from '@mui/material';
+
+export const ColumnsIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        fill: theme.palette.primary.main,
+        stroke: theme.palette.primary.main,
+      }}
+    >
+      <path
+        d="M3.13379 2.09934L3.13379 14.0999C3.13281 14.2322 3.07977 14.3588 2.98615 14.4523C2.89253 14.5459 2.76585 14.5988 2.63352 14.5996C2.50129 14.5986 2.37474 14.5457 2.28124 14.4522C2.18773 14.3587 2.13477 14.2321 2.13379 14.0999L2.13379 2.09988C2.13477 1.96764 2.18773 1.8411 2.28124 1.74759C2.37474 1.65409 2.50129 1.60112 2.63352 1.60014C2.76576 1.60098 2.89236 1.65381 2.98597 1.74722C3.07957 1.84062 3.13267 1.96711 3.13379 2.09934Z"
+        stroke-width="1"
+      />
+      <path
+        d="M8.4668 2.09934V14.0999C8.46582 14.2322 8.41278 14.3588 8.31916 14.4523C8.22554 14.5459 8.09886 14.5988 7.96653 14.5996C7.83429 14.5986 7.70775 14.5457 7.61425 14.4522C7.52074 14.3587 7.46777 14.2321 7.4668 14.0999L7.4668 2.09988C7.46777 1.96764 7.52074 1.8411 7.61425 1.74759C7.70775 1.65409 7.83429 1.60112 7.96653 1.60014C8.09877 1.60098 8.22537 1.65381 8.31897 1.74722C8.41258 1.84062 8.46568 1.96711 8.4668 2.09934Z"
+        stroke-width="1"
+      />
+      <path
+        d="M13.7998 2.09934V14.0999C13.7988 14.2322 13.7458 14.3588 13.6522 14.4523C13.5585 14.5459 13.4319 14.5988 13.2995 14.5996C13.1673 14.5986 13.0408 14.5457 12.9473 14.4522C12.8537 14.3587 12.8008 14.2321 12.7998 14.0999V2.09988C12.8008 1.96764 12.8537 1.8411 12.9473 1.74759C13.0408 1.65409 13.1673 1.60112 13.2995 1.60014C13.4318 1.60098 13.5584 1.65381 13.652 1.74722C13.7456 1.84062 13.7987 1.96711 13.7998 2.09934Z"
+        stroke-width="1"
+      />
+    </svg>
+  );
+};

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

@@ -1,8 +1,8 @@
 import { useTheme } from '@mui/material';
 
-export const ComfortableIcon = ({ size = 16, color }: any) => {
+export const ComfortableIcon = ({ size = 16 }: { size: number }) => {
   const theme = useTheme();
-  const updatedColor = color ?? theme.palette.primary.main;
+  const updatedColor = theme.palette.primary.main;
   return (
     <svg
       width={size}
@@ -14,8 +14,8 @@ export const ComfortableIcon = ({ size = 16, color }: any) => {
       }}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect y="0.5" width="20" height="9" />
-      <rect y="11.5" width="20" height="9" />
+      <rect y="3" width="20" height="5" />
+      <rect y="13" width="20" height="5" />
     </svg>
   );
 };

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

@@ -1,8 +1,8 @@
 import { useTheme } from '@mui/material';
 
-export const CompactIcon = ({ size = 16, color }: any) => {
+export const CompactIcon = ({ size = 16 }: { size: number }) => {
   const theme = useTheme();
-  const updatedColor = color ?? theme.palette.primary.main;
+  const updatedColor = theme.palette.primary.main;
   return (
     <svg
       width={size}
@@ -14,10 +14,10 @@ export const CompactIcon = ({ size = 16, color }: any) => {
       }}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect y="0.5" width="20" height="3.5" />
-      <rect y="6" width="20" height="3.5" />
-      <rect y="11.5" width="20" height="3.5" />
-      <rect y="17" width="20" height="3.5" />
+      <rect y="1" width="20" height="2" />
+      <rect y="6.5" width="20" height="2" />
+      <rect y="12" width="20" height="2" />
+      <rect y="17.5" width="20" height="2" />
     </svg>
   );
 };

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

@@ -1,8 +1,8 @@
-export const CompletedStateIcon = () => {
+export const CompletedStateIcon = ({ size = 16 }) => {
   return (
     <svg
-      width="24"
-      height="24"
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

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

@@ -1,65 +1,32 @@
 import { useTheme } from '@mui/material';
-export const FilterIcon = ({
-  sx = {},
-  color,
-  size = 16,
-}: {
-  sx?: any;
-  color?: string;
-  size?: number;
-}) => {
+
+export const FilterIcon = ({ size = 16 }) => {
   const theme = useTheme();
-  color = color ?? theme.palette.text.primary;
+
   return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        id="sort"
-        width={size}
-        height={size}
-        viewBox="0 0 20 20"
-        style={{
-          fill: color,
-          ...sx,
-        }}
-      >
-        <path
-          id="Vector"
-          d="M0,0H15"
-          transform="translate(2.5 5.833)"
-          fill="none"
-          stroke={color}
-          stroke-linecap="round"
-          stroke-width="1.5"
-        />
-        <path
-          id="Vector-2"
-          data-name="Vector"
-          d="M0,0H10"
-          transform="translate(5 10)"
-          fill="none"
-          stroke={color}
-          stroke-linecap="round"
-          stroke-width="1.5"
-        />
-        <path
-          id="Vector-3"
-          data-name="Vector"
-          d="M0,0H3.333"
-          transform="translate(8.333 14.167)"
-          fill="none"
-          stroke={color}
-          stroke-linecap="round"
-          stroke-width="1.5"
-        />
-        <path
-          id="Vector-4"
-          data-name="Vector"
-          d="M0,0H20V20H0Z"
-          fill="none"
-          opacity="0"
-        />
-      </svg>
-    </>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        fill: theme.palette.primary.main,
+        stroke: theme.palette.primary.main,
+      }}
+    >
+      <path
+        d="M14.0008 5.16602H2.00022C1.86789 5.16504 1.74127 5.112 1.64775 5.01838C1.55423 4.92476 1.50133 4.79808 1.50049 4.66575C1.50147 4.53351 1.55443 4.40697 1.64794 4.31346C1.74144 4.21996 1.86799 4.16699 2.00022 4.16602H14.0002C14.1325 4.16699 14.259 4.21996 14.3525 4.31346C14.446 4.40697 14.499 4.53351 14.5 4.66575C14.4991 4.79799 14.4463 4.92458 14.3529 5.01819C14.2595 5.1118 14.133 5.1649 14.0008 5.16602Z"
+        strokeWidth="0.8"
+      />
+      <path
+        d="M12.0002 8.5H4.00022C3.86789 8.49902 3.74127 8.44598 3.64775 8.35236C3.55423 8.25874 3.50133 8.13206 3.50049 7.99973C3.50147 7.8675 3.55443 7.74096 3.64794 7.64745C3.74144 7.55394 3.86799 7.50098 4.00022 7.5H12.0002C12.1326 7.50084 12.2592 7.55374 12.3529 7.64726C12.4465 7.74078 12.4995 7.86741 12.5005 7.99973C12.4997 8.13215 12.4467 8.25891 12.353 8.35255C12.2594 8.44618 12.1326 8.49916 12.0002 8.5Z"
+        strokeWidth="0.8"
+      />
+      <path
+        d="M9.33339 11.834H6.66673C6.5344 11.833 6.40778 11.78 6.31425 11.6863C6.22073 11.5927 6.16783 11.466 6.16699 11.3337C6.16797 11.2015 6.22093 11.0749 6.31444 10.9814C6.40795 10.8879 6.53449 10.835 6.66673 10.834H9.33339C9.46572 10.8348 9.5924 10.8877 9.68602 10.9812C9.77964 11.0748 9.83268 11.2014 9.83366 11.3337C9.83282 11.4661 9.77984 11.5929 9.68621 11.6865C9.59257 11.7802 9.46581 11.8331 9.33339 11.834Z"
+        strokeWidth="0.8"
+      />
+    </svg>
   );
 };

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

@@ -8,31 +8,19 @@ export const InfoFilledIcon = ({
   size?: number;
 }) => {
   const theme = useTheme();
-  const color = theme.palette.highlight.highlightBlue;
+  const color = theme.palette.primary.main;
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 20 21"
+      viewBox="0 0 16 17"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <mask
-        id="mask0_194_1775"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="21"
-      >
-        <path d="M20 0.5H0V20.5H20V0.5Z" fill="white" />
-      </mask>
-      <g mask="url(#mask0_194_1775)">
-        <path
-          d="M10.1517 1.83301C8.40751 1.83301 6.70251 2.35021 5.25229 3.31922C3.80207 4.28823 2.67176 5.66552 2.00429 7.27692C1.33683 8.88832 1.16219 10.6615 1.50246 12.3721C1.84273 14.0828 2.68263 15.6541 3.91594 16.8874C5.14925 18.1207 6.72059 18.9606 8.43124 19.3009C10.1419 19.6412 11.915 19.4665 13.5264 18.7991C15.1378 18.1316 16.5151 17.0013 17.4841 15.5511C18.4531 14.1008 18.9703 12.3958 18.9703 10.6517C18.9703 8.31282 18.0412 6.06976 16.3874 4.41594C14.7336 2.76211 12.4905 1.83301 10.1517 1.83301ZM10.1517 6.24234C10.3698 6.24234 10.583 6.30701 10.7643 6.42817C10.9456 6.54934 11.087 6.72155 11.1704 6.92304C11.2539 7.12452 11.2757 7.34623 11.2332 7.56013C11.1906 7.77402 11.0856 7.9705 10.9314 8.12471C10.7772 8.27892 10.5807 8.38394 10.3668 8.42649C10.1529 8.46903 9.93119 8.4472 9.72971 8.36374C9.52822 8.28028 9.35601 8.13895 9.23484 7.95762C9.11368 7.77628 9.04901 7.56309 9.04901 7.34501C9.04901 7.05256 9.16518 6.7721 9.37197 6.5653C9.57876 6.35851 9.85923 6.24234 10.1517 6.24234ZM11.805 15.061H8.49835C8.35212 15.061 8.21189 15.0029 8.10849 14.8995C8.0051 14.7961 7.94701 14.6559 7.94701 14.5097C7.94701 14.3635 8.0051 14.2232 8.10849 14.1198C8.21189 14.0164 8.35212 13.9583 8.49835 13.9583H9.04968V10.6517H8.49835C8.35212 10.6517 8.21189 10.5936 8.10849 10.4902C8.0051 10.3868 7.94701 10.2466 7.94701 10.1003C7.94701 9.95412 8.0051 9.81389 8.10849 9.71049C8.21189 9.6071 8.35212 9.54901 8.49835 9.54901H10.703C10.8492 9.54901 10.9895 9.6071 11.0929 9.71049C11.1963 9.81389 11.2543 9.95412 11.2543 10.1003V13.9583H11.8057C11.9519 13.9583 12.0921 14.0164 12.1955 14.1198C12.2989 14.2232 12.357 14.3635 12.357 14.5097C12.357 14.6559 12.2989 14.7961 12.1955 14.8995C12.0921 15.0029 11.9512 15.061 11.805 15.061Z"
-          fill={backgroundColor ?? color}
-        />
-      </g>
+      <path
+        d="M8 2.74884C8.36847 2.74884 8.66667 2.45079 8.66667 2.08252V1.16632C8.66667 0.797979 8.36847 0.5 8 0.5C7.63147 0.5 7.33333 0.797979 7.33333 1.16632V2.08252C7.33333 2.45079 7.63147 2.74884 8 2.74884ZM13.6569 3.7841C13.9173 3.52384 13.9173 3.10212 13.6569 2.84186C13.3965 2.58159 12.9746 2.58159 12.7141 2.84186L12.0657 3.48999C11.8053 3.75025 11.8053 4.1719 12.0657 4.43217C12.3261 4.69243 12.748 4.6925 13.0084 4.43217L13.6569 3.7841ZM14.4167 9.16152H15.3333C15.7018 9.16152 16 8.86348 16 8.4952C16 8.12693 15.7018 7.82888 15.3333 7.82888H14.4167C14.0481 7.82888 13.75 8.12693 13.75 8.4952C13.75 8.86348 14.0481 9.16152 14.4167 9.16152ZM0.666667 9.16152H1.58333C1.9518 9.16152 2.25 8.86348 2.25 8.4952C2.25 8.12693 1.9518 7.82888 1.58333 7.82888H0.666667C0.298133 7.82888 0 8.12693 0 8.4952C0 8.86348 0.298133 9.16152 0.666667 9.16152ZM2.99213 4.43217C3.25253 4.69243 3.67447 4.6925 3.93487 4.43217C4.19527 4.1719 4.19527 3.75025 3.93487 3.48999L3.2864 2.84186C3.026 2.58159 2.60413 2.58159 2.34373 2.84186C2.08333 3.10212 2.08333 3.52384 2.34373 3.7841L2.99213 4.43217ZM6.6616 16.5H9.32827C10.0616 16.5 10.6616 15.9004 10.6616 15.1674H5.32827C5.32827 15.9004 5.92833 16.5 6.6616 16.5ZM10.6616 12.289C11.8683 11.4427 12.6549 10.0502 12.6549 8.47095C12.6549 5.58571 10.0417 3.31348 7.055 3.89325C5.22167 4.25306 3.74827 5.73896 3.40827 7.57821C3.04833 9.5238 3.89493 11.3028 5.32827 12.2958V13.8347H10.6616V12.289Z"
+        fill={backgroundColor ?? color}
+      />
     </svg>
   );
 };

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

@@ -2,7 +2,7 @@ import { useTheme } from '@mui/material';
 
 export const SearchIcon = ({ size = 16 }) => {
   const theme = useTheme();
-  const color = theme.palette.text.primary;
+  const color = theme.palette.primary.main;
   return (
     <svg
       width={size}

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

@@ -1,8 +1,8 @@
 import { useTheme } from '@mui/material';
 
-export const StandardIcon = ({ size = 16, color }: any) => {
+export const StandardIcon = ({ size = 16 }: { size: number }) => {
   const theme = useTheme();
-  const updatedColor = color ?? theme.palette.primary.main;
+  const updatedColor = theme.palette.primary.main;
   return (
     <svg
       width={size}
@@ -14,9 +14,9 @@ export const StandardIcon = ({ size = 16, color }: any) => {
       }}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect y="0.5" width="20" height="5.33333" />
-      <rect y="7.83398" width="20" height="5.33333" />
-      <rect y="15.166" width="20" height="5.33333" />
+      <rect y="1" width="20" height="2" />
+      <rect y="8.5" width="20" height="2" />
+      <rect y="15.5" width="20" height="2" />
     </svg>
   );
 };

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

@@ -0,0 +1,35 @@
+import { useTheme } from '@mui/material';
+
+export const ViewsIcon = ({ size = 16 }: { size?: number }) => {
+  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"
+      style={{
+        fill: color,
+        stroke: color,
+      }}
+    >
+      <g clip-path="url(#clip0_2213_7884)">
+        <path
+          d="M14 3.83301H2C1.86766 3.83213 1.74099 3.77918 1.64741 3.6856C1.55383 3.59202 1.50087 3.46535 1.5 3.33301C1.50087 3.20067 1.55383 3.074 1.64741 2.98042C1.74099 2.88684 1.86766 2.83388 2 2.83301H14C14.1323 2.83388 14.259 2.88684 14.3526 2.98042C14.4462 3.074 14.4991 3.20067 14.5 3.33301C14.4991 3.46535 14.4462 3.59202 14.3526 3.6856C14.259 3.77918 14.1323 3.83213 14 3.83301Z"
+          stroke-width="0.4"
+        />
+        <path
+          d="M14 8.5H2C1.86766 8.49913 1.74099 8.44617 1.64741 8.35259C1.55383 8.25901 1.50087 8.13234 1.5 8C1.50087 7.86766 1.55383 7.74099 1.64741 7.64741C1.74099 7.55383 1.86766 7.50087 2 7.5H14C14.1323 7.50087 14.259 7.55383 14.3526 7.64741C14.4462 7.74099 14.4991 7.86766 14.5 8C14.4991 8.13234 14.4462 8.25901 14.3526 8.35259C14.259 8.44617 14.1323 8.49913 14 8.5Z"
+          stroke-width="0.4"
+        />
+        <path
+          d="M14 13.167H2C1.86766 13.1661 1.74099 13.1132 1.64741 13.0196C1.55383 12.926 1.50087 12.7993 1.5 12.667C1.50087 12.5347 1.55383 12.408 1.64741 12.3144C1.74099 12.2208 1.86766 12.1679 2 12.167H14C14.1323 12.1679 14.259 12.2208 14.3526 12.3144C14.4462 12.408 14.4991 12.5347 14.5 12.667C14.4991 12.7993 14.4462 12.926 14.3526 13.0196C14.259 13.1132 14.1323 13.1661 14 13.167Z"
+          stroke-width="0.4"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -19,6 +19,7 @@ import { CheckedCheckboxIcon } from './IconComponents/CheckedCheckBoxIcon';
 import { CheckedRadioIcon } from './IconComponents/CheckedRadioIcon';
 import { ClogWheelIcon } from './IconComponents/ClogWheelIcon';
 import { CollapseIcon } from './IconComponents/CollapseIcon';
+import { ColumnsIcon } from './IconComponents/ColumnsIcon';
 import { ComfortableIcon } from './IconComponents/Comfortable';
 import { CommutexIcon } from './IconComponents/CommutexIcon';
 import { CompactIcon } from './IconComponents/CompactIcon';
@@ -41,7 +42,6 @@ import { ExcelIcon } from './IconComponents/ExcelIcon';
 import { ExpandIcon } from './IconComponents/ExpandIcon';
 import { ExportIcon } from './IconComponents/ExportIcon';
 import { FilterIcon } from './IconComponents/FilterIcon';
-import { FilterViewIcon } from './IconComponents/FilterViewIcon';
 import { HandoutsIcon } from './IconComponents/HandoutsIcon';
 import { HelpIcon } from './IconComponents/HelpIcon';
 import { HomeIcon } from './IconComponents/HomeIcon';
@@ -82,6 +82,7 @@ import { UmsIcon } from './IconComponents/UmsIcon';
 import { UnCheckedCheckboxIcon } from './IconComponents/UncheckCheckBoxIcon';
 import { UnCheckedRadioIcon } from './IconComponents/UncheckedRadioIcon';
 import { ViewIcon } from './IconComponents/ViewIcon';
+import { ViewsIcon } from './IconComponents/ViewsIcon';
 import { VisibilityOffIcon } from './IconComponents/VisibiityOffIcon';
 import { VisibilityIcon } from './IconComponents/VisibilityIcon';
 import { WarningFilledIcon } from './IconComponents/WarningFilledIcon';
@@ -120,12 +121,12 @@ export const Icons = {
   AttachmentIcon,
   PdfIcon,
   DocumentIcon,
-  FilterViewIcon,
   ConfigureIcon,
   ComfortableIcon,
   CompactIcon,
   StandardIcon,
   LogoutIcon,
+  ColumnsIcon,
   AccordionArrow,
   TicketsIcon,
   FilterIcon,
@@ -164,6 +165,7 @@ export const Icons = {
   ViewIcon,
   RedirectIcon,
   AcademicsIcon,
+  ViewsIcon,
   HandoutsIcon,
   StudentsIcon,
   AssessmentsIcon,

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

@@ -139,12 +139,7 @@ const CustomTooltip = ({ active, payload }: any) => {
       <StyledContainer>
         <Typography variant="body2">{`${payload[0].payload.name}`}</Typography>
         <Typography variant="caption">
-          <span>{`${payload[0].payload.name}`}</span>
-          <span
-            style={{ fontWeight: 'bold', color: theme.palette.text.primary }}
-          >
-            {'\xa0\xa0' + `${payload[0].value}`}
-          </span>
+          <span>{`${payload[0].value}`}</span>
         </Typography>
       </StyledContainer>
     );

package/src/components/DataDisplay/EditableDataTable/EditableDataTable.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@mui/material';
+import { Button, useTheme } from '@mui/material';
 import {
   GridActionsCellItem,
   GridColDef,
@@ -47,6 +47,7 @@ export const EditableDataTable = (props: EditableDataTableProps) => {
 };
 
 export const EditableTableCore = (props: EditableDataTableProps) => {
+  const theme = useTheme();
   const { rows, columns } = props;
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
   const processRowUpdate = (newRow: GridRowModel) => {
@@ -98,6 +99,52 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
         onRowEditStop={handleRowEditStop}
         processRowUpdate={processRowUpdate}
         rowModesModel={rowModesModel}
+        sx={{
+          '& .MuiDataGrid-cell:focus-within, & .MuiDataGrid-cell:focus': {
+            outline: 'none !important',
+          },
+          '& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-columnHeader:focus':
+            {
+              outline: 'none !important',
+            },
+          '& .MuiDataGrid-columnHeaders': {
+            marginLeft: '9px',
+            marginRight: '9px',
+          },
+          '& .MuiDataGrid-toolbarContainer': {
+            marginLeft: '9px',
+            marginRight: '9px',
+          },
+
+          '& .MuiDataGrid-row': {
+            boxShadow: 'none',
+            marginLeft: '9px',
+            marginRight: '9px',
+          },
+          '& .MuiDataGrid-row--editing': {
+            boxShadow: 'none',
+          },
+          '& .MuiDataGrid-editInputCell input': {
+            padding: '10px 9px',
+            height: '100%',
+          },
+          '& .MuiDataGrid-cell.MuiDataGrid-cell--editing': {
+            padding: '0px 9px 0px 0px',
+            alignItems: 'center',
+          },
+          '& .MuiDataGrid-cell': {
+            padding: '0px 9px',
+            display: 'flex',
+            alignItems: 'center',
+          },
+          '& .MuiInputBase-input': {
+            border: `1px solid ${theme.palette.border.primary}`,
+            borderRadius: '5px',
+            ':focus-within': {
+              borderColor: theme.palette.primary.main,
+            },
+          },
+        }}
         {...props}
         rows={rows}
         columns={[

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

@@ -47,6 +47,7 @@ export const AppHeader = ({
         </StyledIconButton> */}
         <Button
           variant="outlined"
+          id="jiraIssueCollector"
           className="reportAnIssue"
           onClick={() => {
             window.open(