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

src/components/ui/DataTable.tsx

@@ -19,13 +19,26 @@ import {
 } from '@/components/ui/table';
 import { useState } from 'react';
 import { Input } from './input';
+import { Button } from './button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from './dialog';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
 }
 
-export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  createGroup
+}: DataTableProps<TData, TValue> & { createGroup?: () => void }) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const table = useReactTable({
     data,
@@ -40,13 +53,19 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
 
   return (
     <div>
-      <div className="flex items-center py-4">
+      <div className="flex items-center py-4 justify-between">
         <Input
           placeholder="Search"
           value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
           onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
           className="max-w-sm"
         />
+
+        {createGroup && (
+          <Button variant="outline" onClick={createGroup}>
+            Create Group
+          </Button>
+        )}
       </div>
       <div className="rounded-md border">
         <Table>

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>
   );