feat: add an opsional <Dialog> component for handling the create new group form

src/pages/groups/ManageGroups.tsx

@@ -1,5 +1,23 @@
 import { DataTable } from '@/components/ui/DataTable';
 import { columns, Group } from './Column';
+import { Button } from '@/components/ui/button';
+import { Link } from 'react-router-dom';
+import {
+  Dialog,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog';
+import { DialogContent } from '@mui/material';
+import { useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
 
 const dataGroup: Group[] = [
   {
@@ -23,11 +41,120 @@ const dataGroup: Group[] = [
 ];
 
 const ManageGroups = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    groupName: '',
+    description: '',
+    pin_length: '',
+    max_pin_attempts: '',
+    default_notification: ''
+  });
+
+  const openDialog = () => setIsDialogOpen(true);
+  const closeDialog = () => setIsDialogOpen(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Submitted Data', formData);
+    closeDialog();
+  };
+
   return (
     <div>
       <div className="container mx-auto pt-2">
         <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
-        <DataTable data={dataGroup} columns={columns} />
+        <DataTable data={dataGroup} columns={columns} createGroup={openDialog} />
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogContent className="w-[600px]">
+            <DialogHeader>
+              <div className="flex flex-col gap-2">
+                <DialogTitle>Create New Group</DialogTitle>
+                <DialogDescription>Fill out the form to create a new group</DialogDescription>
+              </div>
+            </DialogHeader>
+            <div className="p-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>Description:
+                  </label>
+                  <input
+                    type="text"
+                    name="description"
+                    className="input w-full col-span-3"
+                    value={formData.description}
+                    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>PIN Length:
+                  </label>
+                  <input
+                    type="text"
+                    name="pin_length"
+                    className="input w-full col-span-3"
+                    value={formData.pin_length}
+                    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>Max Pin Attempts:
+                  </label>
+                  <input
+                    type="text"
+                    name="max_pin_attempts"
+                    className="input w-full col-span-3"
+                    value={formData.max_pin_attempts}
+                    onChange={handleChange}
+                  />
+                </div>
+                <div className="grid grid-cols-4 items-center gap-4 w-full mb-5">
+                  <label className="form-label text-sm">Default Notification:</label>
+                  <Select
+                    onValueChange={(e) => setFormData({ ...formData, default_notification: e })}
+                  >
+                    <SelectTrigger className="w-full col-span-3">
+                      <SelectValue placeholder="Select Default Notification" />
+                    </SelectTrigger>
+                    <SelectContent className="w-full">
+                      <SelectItem value="1 - notifSender">1 - notifSender</SelectItem>
+                      <SelectItem value="2 - notifBenefeciary">2 - notifBenefeciary</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {/* <input
+                    type="text"
+                    name="default_notification"
+                    className="input w-full col-span-3"
+                    value={formData.default_notification}
+                    onChange={handleChange}
+                  /> */}
+                </div>
+                <Button type="submit">Submit</Button>
+              </form>
+            </div>
+          </DialogContent>
+        </Dialog>
       </div>
     </div>
   );