chore: remove old files and add new ones related to users

components/filters/data-filters.ts

@@ -51,3 +51,11 @@ export const filterFindings = [
   },
   // Add more filter categories as needed
 ];
+
+export const filterUsers = [
+  {
+    key: "is_active",
+    labelCheckboxGroup: "Status",
+    values: ["true", "false"],
+  },
+];

components/users/AddUserModal.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { Button, Input } from "@nextui-org/react";
-import { useRef, useState } from "react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui";
-
-import { ButtonAddUser } from "./ButtonAddUser";
-import { CustomSelectUser } from "./CustomSelectUser";
-
-export const AddUserModal = () => {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLFormElement>(null);
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button aria-label="Add User" variant="ghost">
-          Add User
-        </Button>
-      </DialogTrigger>
-      <DialogContent
-        aria-describedby={undefined}
-        className="flex flex-col sm:max-w-md md:max-w-lg"
-      >
-        <DialogHeader className="mb-6 space-y-3">
-          <DialogTitle className="text-center text-2xl">Add User</DialogTitle>
-        </DialogHeader>
-        <form ref={ref} onSubmit={() => setOpen(false)}>
-          <div className="col-span-1 my-auto flex flex-col gap-y-2">
-            <Input
-              type="text"
-              name="email"
-              label="Email"
-              labelPlacement="outside"
-              placeholder="Email"
-              aria-label="Enter Email"
-              size="md"
-              radius="md"
-              isRequired
-              fullWidth
-              classNames={{
-                base: "h-12 mb-4",
-                inputWrapper: "h-full",
-              }}
-            />
-            <CustomSelectUser />
-          </div>
-          <div className="col-span-2 mt-4 flex justify-center">
-            <ButtonAddUser />
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};

components/users/ButtonAddUser.tsx

@@ -1,14 +0,0 @@
-"use client";
-
-import { Button } from "@nextui-org/react";
-import React from "react";
-import { useFormStatus } from "react-dom";
-
-export const ButtonAddUser = () => {
-  const { pending } = useFormStatus();
-  return (
-    <Button type="submit" area-disabled={pending}>
-      {pending ? "Adding..." : "Invite user"}
-    </Button>
-  );
-};

components/users/ButtonEditUser.tsx

@@ -1,14 +0,0 @@
-"use client";
-
-import { Button } from "@nextui-org/react";
-import React from "react";
-import { useFormStatus } from "react-dom";
-
-export const ButtonEditUser = () => {
-  const { pending } = useFormStatus();
-  return (
-    <Button type="submit" area-disabled={pending}>
-      {pending ? "Saving..." : "Edit user"}
-    </Button>
-  );
-};

components/users/CustomSelectUser.tsx

@@ -1,39 +0,0 @@
-import {
-  Label,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui";
-import { UserProps } from "@/types";
-
-interface CustomSelectUserProps {
-  userData?: UserProps;
-}
-
-export const CustomSelectUser: React.FC<CustomSelectUserProps> = ({
-  userData,
-}) => {
-  return (
-    <>
-      <Label htmlFor="role">
-        Select a role<span className="text-red-500">*</span>
-      </Label>
-      <Select>
-        <SelectTrigger className="h-12 rounded-xl border-transparent bg-zinc-100 text-foreground-500 shadow-none ring-0 hover:bg-zinc-200 focus:border-2 focus:border-white focus:ring-2 focus:ring-blue-600">
-          <SelectValue
-            placeholder={(userData && userData?.role) || "Select a role"}
-          />
-        </SelectTrigger>
-        <SelectContent className="rounded-xl">
-          <SelectGroup className="[&>[data-highlighted]]:bg-transparent">
-            <SelectItem value="user">User</SelectItem>
-            <SelectItem value="admin">Admin</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </>
-  );
-};

components/users/EditUserModal.tsx

@@ -1,82 +0,0 @@
-"use client";
-
-import { Input } from "@nextui-org/react";
-import { useRef } from "react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui";
-import { UserProps } from "@/types";
-
-import { ButtonEditUser } from "./ButtonEditUser";
-import { CustomSelectUser } from "./CustomSelectUser";
-
-interface EditUserModalProps {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  userData: UserProps;
-}
-
-export const EditUserModal: React.FC<EditUserModalProps> = ({
-  isOpen,
-  setIsOpen,
-  userData,
-}) => {
-  const ref = useRef<HTMLFormElement>(null);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogContent
-        aria-describedby={undefined}
-        className="flex flex-col sm:max-w-md md:max-w-lg"
-      >
-        <DialogHeader className="mb-6 space-y-3">
-          <DialogTitle className="text-center text-2xl">Edit User</DialogTitle>
-        </DialogHeader>
-        <form ref={ref} onSubmit={() => setIsOpen(false)}>
-          <div className="col-span-1 my-auto flex flex-col gap-y-2">
-            <Input
-              type="name"
-              name="name"
-              label="Name"
-              labelPlacement="outside"
-              placeholder={userData?.name}
-              aria-label="Enter Name"
-              size="md"
-              radius="md"
-              isRequired
-              fullWidth
-              classNames={{
-                base: "h-12 mb-4",
-                inputWrapper: "h-full",
-              }}
-            />
-            <Input
-              type="text"
-              name="email"
-              label="Email"
-              labelPlacement="outside"
-              placeholder={userData?.email}
-              aria-label="Enter Email"
-              size="md"
-              radius="md"
-              isRequired
-              fullWidth
-              classNames={{
-                base: "h-12 mb-4",
-                inputWrapper: "h-full",
-              }}
-            />
-            <CustomSelectUser userData={userData} />
-          </div>
-          <div className="col-span-2 mt-4 flex justify-center">
-            <ButtonEditUser />
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};

components/users/forms/delete-form.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { deleteUser } from "@/actions/users/users";
+import { DeleteIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+
+const formSchema = z.object({
+  userId: z.string(),
+});
+
+export const DeleteForm = ({
+  userId,
+  setIsOpen,
+}: {
+  userId: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      userId,
+    },
+  });
+  const { toast } = useToast();
+  const isLoading = form.formState.isSubmitting;
+
+  async function onSubmitClient(values: z.infer<typeof formSchema>) {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+
+    console.log(formData);
+    // client-side validation
+    const data = await deleteUser(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The user was removed successfully.",
+      });
+    }
+    setIsOpen(false); // Close the modal on success
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmitClient)}>
+        <input type="hidden" name="id" value={userId} />
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Delete"
+            className="w-full"
+            variant="solid"
+            color="danger"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <DeleteIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Delete</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/users/forms/edit-form.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { updateUser } from "@/actions/users/users";
+import { SaveIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { editUserFormSchema } from "@/types";
+
+export const EditForm = ({
+  userId,
+  userName,
+  userEmail,
+  userCompanyName,
+  setIsOpen,
+}: {
+  userId: string;
+  userName?: string;
+  userEmail?: string;
+  userCompanyName?: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const formSchema = editUserFormSchema(
+    userName ?? "",
+    userEmail ?? "",
+    userCompanyName ?? "",
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      userId: userId,
+      name: userName,
+      email: userEmail,
+      company_name: userCompanyName,
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+
+    const data = await updateUser(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The user was updated successfully.",
+      });
+      setIsOpen(false); // Close the modal on success
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        <div className="text-md">
+          Current name: <span className="font-bold">{userName}</span>
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="name"
+            type="text"
+            label="Name"
+            labelPlacement="outside"
+            placeholder={userName}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.name}
+          />
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="email"
+            type="email"
+            label="Email"
+            labelPlacement="outside"
+            placeholder={userEmail}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.email}
+          />
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="company_name"
+            type="text"
+            label="Company Name"
+            labelPlacement="outside"
+            placeholder={userCompanyName}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.company_name}
+          />
+        </div>
+        <input type="hidden" name="userId" value={userId} />
+
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Save"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Save</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/users/forms/index.ts

@@ -0,0 +1,2 @@
+export * from "./delete-form";
+export * from "./edit-form";

components/users/index.ts

@@ -1,11 +0,0 @@
-export * from "./AddUserModal";
-export * from "./ButtonAddUser";
-export * from "./ButtonEditUser";
-export * from "./CustomSelectUser";
-export * from "./EditUserModal";
-export * from "./table/ColumnsUser";
-export * from "./table/DataTableColumnHeader";
-export * from "./table/DataTablePagination";
-export * from "./table/DataTableUser";
-export * from "./table/SkeletonTableUser";
-export * from "./table/UserActions";

dataUsers.json

@@ -1,98 +0,0 @@
-{
-  "links": {
-    "first": "http://localhost:8080/api/v1/users?page%5Bnumber%5D=1",
-    "last": "http://localhost:8080/api/v1/users?page%5Bnumber%5D=1",
-    "next": null,
-    "prev": null
-  },
-  "data": [
-    {
-      "id": "001",
-      "email": "john.doe@example.com",
-      "name": "John Doe",
-      "role": "Admin",
-      "dateAdded": "2024-08-14T10:00:00.000000Z",
-      "status": "active"
-    },
-    {
-      "id": "002",
-      "email": "jane.smith@example.com",
-      "name": "Jane Smith",
-      "role": "User",
-      "dateAdded": "2024-08-15T11:30:00.000000Z",
-      "status": "inactive"
-    },
-    {
-      "id": "003",
-      "email": "will.johnson@example.com",
-      "name": "Will Johnson",
-      "role": "Admin",
-      "dateAdded": "2024-08-16T09:15:00.000000Z",
-      "status": "active"
-    },
-    {
-      "id": "004",
-      "email": "emily.davis@example.com",
-      "name": "Emily Davis",
-      "role": "User",
-      "dateAdded": "2024-08-17T14:00:00.000000Z",
-      "status": "active"
-    },
-    {
-      "id": "005",
-      "email": "michael.brown@example.com",
-      "name": "Michael Brown",
-      "role": "User",
-      "dateAdded": "2024-08-18T08:45:00.000000Z",
-      "status": "inactive"
-    },
-    {
-      "id": "006",
-      "email": "sarah.miller@example.com",
-      "name": "Sarah Miller",
-      "role": "Admin",
-      "dateAdded": "2024-08-19T13:25:00.000000Z",
-      "status": "active"
-    },
-    {
-      "id": "007",
-      "email": "david.wilson@example.com",
-      "name": "David Wilson",
-      "role": "User",
-      "dateAdded": "2024-08-20T10:50:00.000000Z",
-      "status": "active"
-    },
-    {
-      "id": "008",
-      "email": "lisa.moore@example.com",
-      "name": "Lisa Moore",
-      "role": "Admin",
-      "dateAdded": "2024-08-21T07:30:00.000000Z",
-      "status": "inactive"
-    },
-    {
-      "id": "009",
-      "email": "james.taylor@example.com",
-      "name": "James Taylor",
-      "role": "User",
-      "dateAdded": "2024-08-22T12:10:00.000000Z",
-      "status": "active"
-    },
-    {
-      "id": "010",
-      "email": "anna.anderson@example.com",
-      "name": "Anna Anderson",
-      "role": "User",
-      "dateAdded": "2024-08-23T11:00:00.000000Z",
-      "status": "inactive"
-    }
-  ],
-  "meta": {
-    "pagination": {
-      "page": 1,
-      "pages": 1,
-      "count": 10
-    },
-    "version": "v1"
-  }
-}