Merge pull request #1013 from harjibbolar26/fix/superadmin-user-overv…

…iew-update

fix: update user overview in use rmanagement

src/app/dashboard/(admin)/admin/(overview)/users/component/dialogue/delete-successful.tsx

@@ -0,0 +1,36 @@
+import { Button } from "~/components/common/common-button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+
+const DeleteSuccessfulDialog = ({ onClose }: { onClose: () => void }) => {
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="text-lg font-semibold leading-7 text-slate-900">
+            User Deleted Successfully!
+          </DialogTitle>
+          <DialogDescription className="text-sm font-normal leading-tight text-slate-500">
+            Their account has been deleted, and they will no longer be able to
+            access the platform.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex w-full items-center justify-end">
+          <Button
+            className="ml-2 flex items-center justify-end gap-2.5 rounded-md bg-primary px-4 py-2 text-sm font-medium leading-normal text-white"
+            onClick={onClose}
+          >
+            Done
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteSuccessfulDialog;

src/app/dashboard/(admin)/admin/(overview)/users/component/userTable.tsx

@@ -11,7 +11,9 @@ interface UserTableProperties {
   isDeleting: boolean;
   loading: boolean;
   isDialogOpen: boolean;
+  isSuccessDeleteDialogOpen: boolean;
   setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsSuccessDeleteDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const UserTable: React.FC<UserTableProperties> = ({
@@ -21,24 +23,32 @@ const UserTable: React.FC<UserTableProperties> = ({
   loading,
   isDialogOpen,
   setIsDialogOpen,
+  isSuccessDeleteDialogOpen,
+  setIsSuccessDeleteDialogOpen,
 }) => {
   return (
     <>
       <table className="user-table h-full w-full overflow-hidden">
         <UserTableHead />
         {loading ? (
-          <span className="mx-auto flex w-full items-center justify-center gap-x-2">
+          <span className="mx-auto mt-4 flex w-full items-center justify-center gap-x-2">
             <span className="animate-pulse">Fetching user data...</span>{" "}
             <LoadingSpinner className="size-4 animate-spin sm:size-5" />
           </span>
-        ) : (
+        ) : data.length > 0 ? (
           <UserTableBody
             data={data}
             onDelete={onDelete}
             isDeleting={isDeleting}
             isDialogOpen={isDialogOpen}
             setIsDialogOpen={setIsDialogOpen}
+            isSuccessDeleteDialogOpen={isSuccessDeleteDialogOpen}
+            setIsSuccessDeleteDialogOpen={setIsSuccessDeleteDialogOpen}
           />
+        ) : (
+          <div className="w-full pb-5 pt-10 text-center text-neutral-dark-2">
+            No user data
+          </div>
         )}
       </table>
     </>

src/app/dashboard/(admin)/admin/(overview)/users/component/userTableBody.tsx

@@ -12,13 +12,16 @@ import {
 } from "~/components/ui/dropdown-menu";
 import { UserData } from "../page";
 import DeleteDialog from "./dialogue/delete-dialog";
+import DeleteSuccessfulDialog from "./dialogue/delete-successful";
 
 interface UserTableProperties {
   data: UserData[];
   onDelete: (userId: string) => void;
   isDeleting: boolean;
   isDialogOpen: boolean;
+  isSuccessDeleteDialogOpen: boolean;
   setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsSuccessDeleteDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const UserTableBody: React.FC<UserTableProperties> = ({
@@ -27,6 +30,8 @@ const UserTableBody: React.FC<UserTableProperties> = ({
   isDeleting,
   isDialogOpen,
   setIsDialogOpen,
+  isSuccessDeleteDialogOpen,
+  setIsSuccessDeleteDialogOpen,
 }) => {
   const [userId, setUserId] = useState("");
 
@@ -35,6 +40,8 @@ const UserTableBody: React.FC<UserTableProperties> = ({
     setUserId(id);
   };
   const handleCloseDialog = () => setIsDialogOpen(false);
+  const handleCloseDeleteSuccessDialog = () =>
+    setIsSuccessDeleteDialogOpen(false);
   return (
     <>
       <tbody className="user-table z-10">
@@ -133,6 +140,9 @@ const UserTableBody: React.FC<UserTableProperties> = ({
           onDelete={() => onDelete(userId)}
         />
       )}
+      {isSuccessDeleteDialogOpen && (
+        <DeleteSuccessfulDialog onClose={handleCloseDeleteSuccessDialog} />
+      )}
     </>
   );
 };

src/app/dashboard/(admin)/admin/(overview)/users/page.tsx

@@ -73,8 +73,9 @@ const UserPage = () => {
   const [loading, setLoading] = useState(false);
 
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isSuccessDeleteDialogOpen, setIsSuccessDeleteDialogOpen] =
+    useState(false);
   const { toast } = useToast();
-  // const { data: session } = useSession();
 
   const [totalUserOverview, setTotalUserOverview] = useState<UserCardData>({
     title: "Total Users",
@@ -104,6 +105,8 @@ const UserPage = () => {
     FilterDataProperties | undefined
   >();
 
+  const deletedUser = 0;
+
   const filterActionsHandler = (title: string) => {
     if (title === "Active") {
       const _data = data?.filter((item) => item.is_active);
@@ -137,10 +140,7 @@ const UserPage = () => {
       const usersData: UserData[] = response.data.data?.users || [];
       setData(usersData);
       setFilterData(usersData);
-      const totalUser = response.data.data.total || 0;
-      const deletedUser = usersData.filter(
-        (user) => user.deleted_at !== null,
-      ).length;
+      const totalUser = response.data.data.pagination.total || 0;
 
       setTotalUserOverview((previous) => ({
         ...previous,
@@ -176,48 +176,57 @@ const UserPage = () => {
     } finally {
       setLoading(false);
     }
-  }, [page, toast]);
+  }, [deletedUser, page, toast]);
 
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
   const deleteUser = async (userId: string) => {
     try {
+      const session = await getSession();
       const baseUrl = await getApiUrl();
       const API_URL = `${baseUrl}/api/v1/users/${userId}`;
       setIsDeleting(true);
-      await axios.delete(API_URL);
-      fetchData();
+      await axios.delete(API_URL, {
+        headers: {
+          Authorization: `Bearer ${session?.access_token}`,
+        },
+      });
+
+      // Update data without calling fetchData
       const updatedUser = data.filter((user) => user.id !== userId);
       setData(updatedUser);
       setFilterData(updatedUser);
-      const deletedCount = updatedUser.filter(
-        (user) => user.deleted_at !== null,
-      ).length;
+
+      // Update overviews
       setdeletedUserOverview((previous) => ({
         ...previous,
-        value: deletedCount,
+        value: previous.value + 1, // Increment the count
       }));
       const activeCount = updatedUser.filter((user) => user.is_active).length;
       setActiveUserOverview((previous) => ({
         ...previous,
         value: activeCount,
       }));
-    } catch {
-      setIsDeleting(false);
+      setTotalUserOverview((previous) => ({
+        ...previous,
+        value: previous.value - 1,
+      }));
+      setIsSuccessDeleteDialogOpen(true);
+    } catch (error) {
+      toast({
+        title: `Error deleting user`,
+        description:
+          error instanceof Error ? error.message : "An unknown error occurred",
+        variant: "destructive",
+      });
     } finally {
       setIsDeleting(false);
       setIsDialogOpen(false);
     }
   };
 
-  if (!data) {
-    <div className="w-full pb-5 pt-10 text-center text-neutral-dark-2">
-      No data
-    </div>;
-  }
-
   return (
     <>
       <section>
@@ -303,6 +312,8 @@ const UserPage = () => {
               loading={loading}
               isDialogOpen={isDialogOpen}
               setIsDialogOpen={setIsDialogOpen}
+              isSuccessDeleteDialogOpen={isSuccessDeleteDialogOpen}
+              setIsSuccessDeleteDialogOpen={setIsSuccessDeleteDialogOpen}
             />
           </div>