done (#422)

apps/web-admin/src/components/DataDisplay.jsx

@@ -1,42 +1,85 @@
-import { DataGrid, GridToolbar, LinearProgress } from '@mui/x-data-grid';
-import { ThemeProvider, createTheme } from '@mui/material';
-
-const MuiTheme = createTheme({
-  palette: {
+import {
+  ChakraProvider,
+  Box,
+  Spinner,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Checkbox,
+} from '@chakra-ui/react';
+import { useState } from 'react';
+import { extendTheme } from '@chakra-ui/react';
+const chakraTheme = extendTheme({
+  colors: {
     primary: {
-      main: '#319795',
+      500: '#319795',
     },
   },
 });
-
 export default function DataDisplay({ loading, rows, columns, onRowClick }) {
+  const [selectedRows, setSelectedRows] = useState([]);
+  const handleRowClick = (row) => {
+    onRowClick(row);
+  };
+
+  const handleCheckboxChange = (rowId) => {
+    setSelectedRows((prevSelectedRows) =>
+      prevSelectedRows.includes(rowId)
+        ? prevSelectedRows.filter((id) => id !== rowId)
+        : [...prevSelectedRows, rowId],
+    );
+  };
   return (
-    <ThemeProvider theme={MuiTheme}>
-      <DataGrid
-        rows={rows}
-        columns={columns}
-        slots={{
-          toolbar: GridToolbar,
-          loadingOverlay: LinearProgress,
-        }}
-        slotProps={{
-          toolbar: {
-            showQuickFilter: true,
-            quickFilterProps: { debounceMs: 500 },
-          },
-        }}
-        loading={loading}
-        getRowId={(row) => row.id}
-        sx={{
-          '& .MuiDataGrid-row:hover': {
-            cursor: 'pointer',
-          },
-        }}
-        editMode="row"
-        checkboxSelection
-        disableRowSelectionOnClick
-        onRowClick={onRowClick}
-      />
-    </ThemeProvider>
+    <ChakraProvider theme={chakraTheme}>
+      <Box p={4}>
+        {loading ? (
+          <Spinner size="xl" color="primary.500" />
+        ) : (
+          <TableContainer>
+            <Table variant="simple">
+              <Thead>
+                <Tr>
+                  <Th>
+                    <Checkbox
+                      isChecked={selectedRows.length === rows.length}
+                      isIndeterminate={selectedRows.length > 0 && selectedRows.length < rows.length}
+                      onChange={(e) =>
+                        setSelectedRows(e.target.checked ? rows.map((row) => row.id) : [])
+                      }
+                    />
+                  </Th>
+                  {columns.map((column) => (
+                    <Th key={column.field}>{column.headerName}</Th>
+                  ))}
+                </Tr>
+              </Thead>
+              <Tbody>
+                {rows.map((row) => (
+                  <Tr
+                    key={row.id}
+                    onClick={() => handleRowClick(row)}
+                    _hover={{ bg: 'gray.100', cursor: 'pointer' }}
+                  >
+                    <Td>
+                      <Checkbox
+                        isChecked={selectedRows.includes(row.id)}
+                        onChange={() => handleCheckboxChange(row.id)}
+                      />
+                    </Td>
+                    {columns.map((column) => (
+                      <Td key={column.field}>{row[column.field]}</Td>
+                    ))}
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+        )}
+      </Box>
+    </ChakraProvider>
   );
 }