diff --git a/src/app/dashboard/(admin)/admin/(overview)/users/component/dialogue/delete-successful.tsx b/src/app/dashboard/(admin)/admin/(overview)/users/component/dialogue/delete-successful.tsx
new file mode 100644
index 000000000..d5a42ea7d
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default DeleteSuccessfulDialog;
diff --git a/src/app/dashboard/(admin)/admin/(overview)/users/component/userTable.tsx b/src/app/dashboard/(admin)/admin/(overview)/users/component/userTable.tsx
index 29d93ca78..c9aed5500 100644
--- a/src/app/dashboard/(admin)/admin/(overview)/users/component/userTable.tsx
+++ b/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>;
+ setIsSuccessDeleteDialogOpen: React.Dispatch>;
}
const UserTable: React.FC = ({
@@ -21,24 +23,32 @@ const UserTable: React.FC = ({
loading,
isDialogOpen,
setIsDialogOpen,
+ isSuccessDeleteDialogOpen,
+ setIsSuccessDeleteDialogOpen,
}) => {
return (
<>
{loading ? (
-
+
Fetching user data...{" "}
- ) : (
+ ) : data.length > 0 ? (
+ ) : (
+
+ No user data
+
)}
>
diff --git a/src/app/dashboard/(admin)/admin/(overview)/users/component/userTableBody.tsx b/src/app/dashboard/(admin)/admin/(overview)/users/component/userTableBody.tsx
index ca6f77925..039e884cf 100644
--- a/src/app/dashboard/(admin)/admin/(overview)/users/component/userTableBody.tsx
+++ b/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>;
+ setIsSuccessDeleteDialogOpen: React.Dispatch>;
}
const UserTableBody: React.FC = ({
@@ -27,6 +30,8 @@ const UserTableBody: React.FC = ({
isDeleting,
isDialogOpen,
setIsDialogOpen,
+ isSuccessDeleteDialogOpen,
+ setIsSuccessDeleteDialogOpen,
}) => {
const [userId, setUserId] = useState("");
@@ -35,6 +40,8 @@ const UserTableBody: React.FC = ({
setUserId(id);
};
const handleCloseDialog = () => setIsDialogOpen(false);
+ const handleCloseDeleteSuccessDialog = () =>
+ setIsSuccessDeleteDialogOpen(false);
return (
<>
@@ -133,6 +140,9 @@ const UserTableBody: React.FC = ({
onDelete={() => onDelete(userId)}
/>
)}
+ {isSuccessDeleteDialogOpen && (
+
+ )}
>
);
};
diff --git a/src/app/dashboard/(admin)/admin/(overview)/users/page.tsx b/src/app/dashboard/(admin)/admin/(overview)/users/page.tsx
index 8144482e7..b16a64166 100644
--- a/src/app/dashboard/(admin)/admin/(overview)/users/page.tsx
+++ b/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({
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,7 +176,7 @@ const UserPage = () => {
} finally {
setLoading(false);
}
- }, [page, toast]);
+ }, [deletedUser, page, toast]);
useEffect(() => {
fetchData();
@@ -184,40 +184,49 @@ const UserPage = () => {
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) {
-
- No data
-
;
- }
-
return (
<>
@@ -303,6 +312,8 @@ const UserPage = () => {
loading={loading}
isDialogOpen={isDialogOpen}
setIsDialogOpen={setIsDialogOpen}
+ isSuccessDeleteDialogOpen={isSuccessDeleteDialogOpen}
+ setIsSuccessDeleteDialogOpen={setIsSuccessDeleteDialogOpen}
/>