savenschedule working and delete issue in pateint page, add patint issue on dashboard and patient page

apps/Frontend/src/components/patients/patient-table.tsx

@@ -14,7 +14,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
-import { Edit, Eye, MoreVertical } from "lucide-react";
+import { Delete, Edit, Eye, MoreVertical } from "lucide-react";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -39,9 +39,10 @@ interface PatientTableProps {
   patients: Patient[];
   onEdit: (patient: Patient) => void;
   onView: (patient: Patient) => void;
+  onDelete: (patient: Patient) => void;
 }
 
-export function PatientTable({ patients, onEdit, onView }: PatientTableProps) {
+export function PatientTable({ patients, onEdit, onView, onDelete }: PatientTableProps) {
   const [currentPage, setCurrentPage] = useState(1);
   const patientsPerPage = 5;
   
@@ -167,6 +168,17 @@ export function PatientTable({ patients, onEdit, onView }: PatientTableProps) {
                   </TableCell>
                   <TableCell className="text-right">
                     <div className="flex justify-end space-x-2">
+                      <Button
+                        onClick={() =>
+                          onDelete(patient)
+                        }
+                        className="text-red-600 hover:text-red-900"
+                        aria-label="Delete Staff"
+                        variant="ghost"
+                        size="icon"
+                      >
+                        <Delete/>
+                      </Button>
                       <Button
                         variant="ghost"
                         size="icon"

apps/Frontend/src/components/staffs/staff-table.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { z } from "zod";
 import { StaffUncheckedCreateInputObjectSchema } from "@repo/db/shared/schemas";
+import { Button } from "../ui/button";
+import { Delete, Edit } from "lucide-react";
 
 type Staff = z.infer<typeof StaffUncheckedCreateInputObjectSchema>;
 
@@ -15,7 +17,7 @@ interface StaffTableProps {
   isError?: boolean;
   onAdd: () => void;
   onEdit: (staff: Staff) => void;
-  onDelete: (id: number) => void;
+  onDelete: (staff: Staff) => void;
   onView: (staff: Staff) => void;
 }
 
@@ -148,22 +150,27 @@ export function StaffTable({
                       {formattedDate}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
-                      <button
-                        onClick={() => staff.id !== undefined && onEdit(staff)}
-                        className="text-blue-600 hover:text-blue-900"
-                        aria-label="Edit Staff"
-                      >
-                        Edit
-                      </button>
-                      <button
+                      <Button
                         onClick={() =>
-                          staff.id !== undefined && onDelete(staff.id)
+                          staff !== undefined && onDelete(staff)
                         }
                         className="text-red-600 hover:text-red-900"
                         aria-label="Delete Staff"
+                        variant="ghost"
+                        size="icon"
                       >
-                        Delete
-                      </button>
+                        <Delete/>
+                      </Button>
+                      <Button
+                        onClick={() => staff.id !== undefined && onEdit(staff)}
+                        className="text-blue-600 hover:text-blue-900"
+                        aria-label="Edit Staff"
+                        variant="ghost"
+                        size="icon"
+                      >
+                        <Edit className="h-4 w-4" />
+                      </Button>
+                      
                     </td>
                   </tr>
                 );

apps/Frontend/src/components/ui/deleteDialog.tsx

@@ -0,0 +1,36 @@
+export const DeleteConfirmationDialog = ({
+  isOpen,
+  onConfirm,
+  onCancel,
+  patientName,
+}: {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  patientName?: string;
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+      <div className="bg-white p-6 rounded-md shadow-md w-[90%] max-w-md">
+        <h2 className="text-xl font-semibold mb-4">Confirm Deletion</h2>
+        <p>Are you sure you want to delete <strong>{patientName}</strong>?</p>
+        <div className="mt-6 flex justify-end space-x-4">
+          <button
+            className="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300"
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700"
+            onClick={onConfirm}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};