Update tampilan

src/pages/groups/ManageGroups.tsx

@@ -2,6 +2,7 @@ import { DataTable } from '@/components/ui/DataTable';
 import { columns, Group } from './Column';
 import { apiConfig } from '@/config/api.config';
 import axios, { AxiosResponse } from 'axios';
+import { Helmet } from 'react-helmet';
 import {
   DialogContent,
   MenuItem,
@@ -153,20 +154,23 @@ const ManageGroups = () => {
   };
 
   return (
-    <div>
-      <div className="container mx-auto">
-        <ConfirmDialog
-          open={dialogOpen}
-          onClose={() => setDialogOpen(false)}
-          title="Confirm Action"
-          content={
-            `Are you sure you want to ` +
-            (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
-          }
-          onYes={handleYes}
-          onNo={() => setDialogOpen(false)}
-        />
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Groups</h1>
+    <>
+      <Helmet>
+        <title>TPAY | Manage Group</title>
+      </Helmet>
+      <ConfirmDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        title="Confirm Action"
+        content={
+          `Are you sure you want to ` +
+          (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
+        }
+        onYes={handleYes}
+        onNo={() => setDialogOpen(false)}
+      />
+      <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Groups</h1>
+      <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
         <Breadcrumbs>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
@@ -180,6 +184,8 @@ const ManageGroups = () => {
             <span className="text-sm">Manage Groups</span>
           </Link>
         </Breadcrumbs>
+      </div>
+      <div className="w-full overflow-x-auto px-4">
         <DataTable
           data={dataGroup}
           columns={columns}
@@ -187,75 +193,76 @@ const ManageGroups = () => {
           onUpdate={handleUpdate}
           onDelete={null}
         />
-        <Dialog open={isDialogOpen} onClose={closeDialog}>
-          <DialogContent className="w-full">
-            <div className="flex justify-between">
-              <DialogTitle>Create New Group</DialogTitle>
-              <Box display="flex" justifyContent="flex-end">
-                <Button
-                  variant="outlined"
-                  sx={{ borderColor: 'white', color: 'grey' }}
-                  onClick={closeDialog}
-                >
-                  <CloseIcon />
-                </Button>
-              </Box>
-            </div>
-            <Divider />
-            <div className="p-5 mt-5">
-              <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
-                <div className="grid grid-cols-4 items-center gap-4 w-full">
-                  <label className="form-label text-sm">
-                    <span className="text-red-500">*</span>Group Name:
-                  </label>
-                  <input
-                    type="text"
-                    name="groupName"
-                    className="input w-full col-span-3"
-                    value={formData.groupName}
-                    onChange={handleChange}
-                  />
-                </div>
-                <div className="grid grid-cols-4 items-center gap-4 w-full">
-                  <label className="form-label text-sm">
-                    <span className="text-red-500">*</span>Active Status:
-                  </label>
-                  <FormControl>
-                    <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
-                      <FormControlLabel
-                        value="Y"
-                        checked={formData.status === 'Y'}
-                        control={<Radio />}
-                        label="Yes"
-                      />
-                      <FormControlLabel
-                        value="N"
-                        checked={formData.status === 'N'}
-                        control={<Radio />}
-                        label="No"
-                      />
-                    </RadioGroup>
-                  </FormControl>
-                </div>
-                <div className="grid grid-cols-4 items-center gap-4 w-full">
-                  <label className="form-label text-sm">
-                    <span className="text-red-500">*</span>Description:
-                  </label>
-                  <input
-                    type="text"
-                    name="description"
-                    className="input w-full col-span-3"
-                    value={formData.description}
-                    onChange={handleChange}
-                  />
-                </div>
-                <Button type="submit">Submit</Button>
-              </form>
-            </div>
-          </DialogContent>
-        </Dialog>
       </div>
-    </div>
+
+      <Dialog open={isDialogOpen} onClose={closeDialog}>
+        <DialogContent className="w-full">
+          <div className="flex justify-between">
+            <DialogTitle>Create New Group</DialogTitle>
+            <Box display="flex" justifyContent="flex-end">
+              <Button
+                variant="outlined"
+                sx={{ borderColor: 'white', color: 'grey' }}
+                onClick={closeDialog}
+              >
+                <CloseIcon />
+              </Button>
+            </Box>
+          </div>
+          <Divider />
+          <div className="p-5 mt-5">
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
+              <div className="grid grid-cols-4 items-center gap-4 w-full">
+                <label className="form-label text-sm">
+                  <span className="text-red-500">*</span>Group Name:
+                </label>
+                <input
+                  type="text"
+                  name="groupName"
+                  className="input w-full col-span-3"
+                  value={formData.groupName}
+                  onChange={handleChange}
+                />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4 w-full">
+                <label className="form-label text-sm">
+                  <span className="text-red-500">*</span>Active Status:
+                </label>
+                <FormControl>
+                  <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
+                    <FormControlLabel
+                      value="Y"
+                      checked={formData.status === 'Y'}
+                      control={<Radio />}
+                      label="Yes"
+                    />
+                    <FormControlLabel
+                      value="N"
+                      checked={formData.status === 'N'}
+                      control={<Radio />}
+                      label="No"
+                    />
+                  </RadioGroup>
+                </FormControl>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4 w-full">
+                <label className="form-label text-sm">
+                  <span className="text-red-500">*</span>Description:
+                </label>
+                <input
+                  type="text"
+                  name="description"
+                  className="input w-full col-span-3"
+                  value={formData.description}
+                  onChange={handleChange}
+                />
+              </div>
+              <Button type="submit">Submit</Button>
+            </form>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };