fix dashboard

frontend/client-portal/src/sections/dashboard/TableList.tsx

@@ -14,12 +14,14 @@ import {
   IconButton,
   Card,
   Grid,
+  Autocomplete,
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
+import { Add as AddIcon } from '@mui/icons-material';
 /* ---------------------------------- axios --------------------------------- */
 import axios from 'axios';
 /* ---------------------------------- react --------------------------------- */
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 /* -------------------------------- component ------------------------------- */
 import Iconify from '../../components/Iconify';
 import BaseTablePagination from '../../components/BaseTablePagination';
@@ -177,6 +179,14 @@ export default function TableList() {
   };
   /* -------------------------------------------------------------------------- */
 
+  /* ----------------------------- Field Container ---------------------------- */
+
+  /* ----------------------------- division field ----------------------------- */
+  const optionDivisions = ['All'];
+
+  const [value, setValue] = useState<string | null>(optionDivisions[0]);
+  /* -------------------------------------------------------------------------- */
+
   /* ------------------------------ Search field ------------------------------ */
   const [searchText, setSearchText] = useState('');
 
@@ -194,6 +204,89 @@ export default function TableList() {
   };
   /* -------------------------------------------------------------------------- */
 
+  /* ------------------------------ import button ----------------------------- */
+  const [currentImportFileName, setCurrentImportFileName] = useState(null);
+  const importForm = useRef<HTMLInputElement>(null);
+
+  const handleImportChange = (event: any) => {
+    if (event.target.files[0]) {
+      setCurrentImportFileName(event.target.files[0].name);
+    } else {
+      setCurrentImportFileName(null);
+    }
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ create button ----------------------------- */
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  const FieldContainer = () => (
+    <Grid container spacing={2}>
+      <Grid item xs={12} lg={3} xl={2}>
+        <Autocomplete
+          disablePortal
+          options={optionDivisions}
+          value={value}
+          onChange={(event: any, newValue: string | null) => {
+            console.log(newValue);
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} label="Division" />}
+        />
+      </Grid>
+      <Grid item xs={12} lg={5} xl={6}>
+        <form onSubmit={handleSearchSubmit}>
+          <TextField
+            id="search-input"
+            label="Search"
+            variant="outlined"
+            onChange={handleSearch}
+            value={searchText}
+            fullWidth
+          />
+        </form>
+      </Grid>
+      <Grid item xs={12} lg={2} xl={2}>
+        <Button
+          id="import-button"
+          variant="outlined"
+          startIcon={<Iconify icon="material-symbols:download-rounded" />}
+          component="label"
+          fullWidth
+          sx={{ height: '100%' }}
+        >
+          Import
+          <input
+            type="file"
+            id="file"
+            ref={importForm}
+            style={{ display: 'none' }}
+            onChange={handleImportChange}
+            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+          />
+        </Button>
+      </Grid>
+      <Grid item xs={12} lg={2} xl={2}>
+        <Button
+          id="import-button"
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={handleClick}
+          fullWidth
+          sx={{ height: '100%' }}
+        >
+          Add Data
+        </Button>
+      </Grid>
+    </Grid>
+  );
+
+  /* -------------------------------------------------------------------------- */
+
   /* ---------------------------- table pagination ---------------------------- */
 
   /* ------------------------ button change pagination ------------------------ */
@@ -261,16 +354,7 @@ export default function TableList() {
       <Grid container>
         {/* Field 1 */}
         <Grid item xs={12} paddingX="24px" paddingY="20px">
-          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
-            <TextField
-              id="search-input"
-              label="Search"
-              variant="outlined"
-              fullWidth
-              onChange={handleSearch}
-              value={searchText}
-            />
-          </form>
+          <FieldContainer />
         </Grid>
         {/* End Field 1 */}
         {/* Field 2 */}