Add Deletion Functionality to Locations

public/locale/en.json

@@ -1427,6 +1427,7 @@
   "location_history": "Location History",
   "location_management": "Location Management",
   "location_name": "Location Name",
+  "location_removed_successfully": "Location removed successfully",
   "location_status": "Location Status",
   "location_status__active": "Active",
   "location_status__inactive": "Inactive",
@@ -1901,8 +1902,8 @@
   "preset_name_placeholder": "Specify an identifiable name for the new preset",
   "preset_updated": "Preset updated",
   "prev_sessions": "Prev Sessions",
-  "preview_bed_names": "Preview Bed Names",
   "preview": "Preview",
+  "preview_bed_names": "Preview Bed Names",
   "preview_form": "Preview form",
   "previous": "Previous",
   "primary_ph_no": "Primary Ph No.",

src/pages/Facility/settings/locations/LocationView.tsx

@@ -216,6 +216,7 @@ export default function LocationView({ id, facilityId }: Props) {
                       key={childLocation.id}
                       location={childLocation}
                       onEdit={handleEditLocation}
+                      facilityId={facilityId}
                     />
                   ))
                 ) : (

src/pages/Facility/settings/locations/components/LocationCard.tsx

@@ -1,23 +1,59 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ChevronRight, Folder, FolderOpen, PenLine } from "lucide-react";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
 
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 
+import mutate from "@/Utils/request/mutate";
 import { LocationList, LocationTypeIcons } from "@/types/location/location";
+import locationApi from "@/types/location/locationApi";
 
 interface Props {
   location: LocationList;
   onEdit?: (location: LocationList) => void;
   className?: string;
+  facilityId: string;
 }
 
-export function LocationCard({ location, onEdit, className }: Props) {
+export function LocationCard({
+  location,
+  onEdit,
+  className,
+  facilityId,
+}: Props) {
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const { mutate: removeLocation } = useMutation({
+    mutationFn: mutate(locationApi.delete, {
+      pathParams: { facility_id: facilityId, id: location.id },
+    }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["locations", facilityId],
+      });
+      toast.success(t("location_removed_successfully"));
+    },
+  });
   const Icon =
     LocationTypeIcons[location.form as keyof typeof LocationTypeIcons] ||
     Folder;
@@ -80,16 +116,61 @@ export function LocationCard({ location, onEdit, className }: Props) {
         </div>
 
         <div className="mt-auto border-t border-gray-100 bg-gray-50 p-4">
-          <div className="flex justify-end">
-            <Button variant="outline" asChild>
-              <Link
-                href={`/location/${location.id}`}
-                className="flex items-center gap-2"
-              >
-                {t("view_details")}
-                <ChevronRight className="h-4 w-4" />
-              </Link>
-            </Button>
+          <div className="flex justify-between">
+            {!location.has_children && !location.current_encounter && (
+              <div>
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      className={cn(buttonVariants({ variant: "white" }))}
+                    >
+                      <CareIcon icon="l-trash" />
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>
+                        {t("remove")} {location.name}
+                      </AlertDialogTitle>
+                      <AlertDialogDescription>
+                        {t("are_you_sure_want_to_delete", {
+                          name: location.name,
+                        })}
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                      <AlertDialogAction
+                        onClick={() =>
+                          removeLocation({
+                            pathParams: {
+                              facility_id: facilityId,
+                              id: location.id,
+                            },
+                          })
+                        }
+                        className={cn(
+                          buttonVariants({ variant: "destructive" }),
+                        )}
+                      >
+                        {t("remove")}
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            )}
+            <div className="ml-auto">
+              <Button variant="outline" asChild>
+                <Link
+                  href={`/location/${location.id}`}
+                  className="flex items-center gap-2"
+                >
+                  {t("view_details")}
+                  <ChevronRight className="h-4 w-4" />
+                </Link>
+              </Button>
+            </div>
           </div>
         </div>
       </div>

src/types/location/locationApi.ts

@@ -32,6 +32,11 @@ export default {
     TRes: Type<LocationDetail>(),
     TBody: Type<LocationWrite>(),
   },
+  delete: {
+    path: "/api/v1/facility/{facility_id}/location/{id}/",
+    method: HttpMethod.DELETE,
+    TRes: Type<void>(),
+  },
   getOrganizations: {
     path: "/api/v1/facility/{facility_id}/location/{id}/organizations",
     method: HttpMethod.GET,