feat(user): implement user update functionality and enhance verification page UI ✨

components/user/user-update-form.tsx

@@ -0,0 +1,151 @@
+"use client";
+import { ArrowRightLeft, Loader2, MoveLeft } from "lucide-react";
+import { useActionState, useEffect } from "react";
+import { toast } from "sonner";
+import { type UpdateUserFormState, updateUser } from "@/actions/user-actions";
+import { Button } from "@/components/ui/button";
+import { FloatingLabelInput } from "@/components/ui/floating-label";
+import type { UserProfile } from "@/lib/types/user";
+// import {
+//   Select,
+//   SelectContent,
+//   SelectGroup,
+//   SelectItem,
+//   SelectLabel,
+//   SelectTrigger,
+//   SelectValue,
+// } from "@/components/ui/select";
+
+export default function UserUpdateForm({ user }: { user: UserProfile }) {
+  const initialState: UpdateUserFormState = {
+    message: "",
+    fieldErrors: {},
+    payload: new FormData(),
+  };
+  const [state, formAction, isPending] = useActionState(
+    updateUser,
+    initialState,
+  );
+
+  useEffect(() => {
+    if (state.message) {
+      if (state.fieldErrors) {
+        Object.entries(state.fieldErrors).forEach(([field, errors]) => {
+          errors.forEach((error) => {
+            toast.error(`Error in ${field}: ${error}`);
+          });
+        });
+      } else {
+        toast.success("Success", {
+          description: "User updated successfully",
+          closeButton: true,
+        });
+      }
+    }
+  }, [state]);
+
+  return (
+    <div id="user-update-form">
+      <Button
+        onClick={() => window.history.back()}
+        variant="outline"
+        className="mb-4"
+      >
+        <MoveLeft />
+        Go Back
+      </Button>
+      <form action={formAction}>
+        <h4 className="p-2 rounded font-semibold text-muted-foreground">
+          Update User Information
+        </h4>
+        <div className="border border-dashed border-sarLinkOrange p-4 rounded-lg  max-w-2xl">
+          <fieldset
+            disabled={isPending}
+            className="space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-4"
+          >
+            <input type="hidden" name="userId" value={user.id} />
+            <FloatingLabelInput
+              defaultValue={
+                user?.id_card || (state.payload?.get("id_card") as string)
+              }
+              size={10}
+              name="id_card"
+              label="ID Card"
+            />
+            <FloatingLabelInput
+              defaultValue={
+                user?.first_name || (state.payload?.get("first_name") as string)
+              }
+              name="first_name"
+              label="First Name"
+            />
+            <FloatingLabelInput
+              defaultValue={
+                user?.last_name || (state.payload?.get("last_name") as string)
+              }
+              name="last_name"
+              label="Last Name"
+            />
+            <FloatingLabelInput
+              defaultValue={
+                user?.address || (state.payload?.get("address") as string)
+              }
+              name="address"
+              label="House Name"
+            />
+            {/* <Select>
+              <SelectTrigger>
+                <SelectValue placeholder="Select an island" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Islands</SelectLabel>
+                  <SelectItem value="apple">Apple</SelectItem>
+                  <SelectItem value="banana">Banana</SelectItem>
+                  <SelectItem value="blueberry">Blueberry</SelectItem>
+                  <SelectItem value="grapes">Grapes</SelectItem>
+                  <SelectItem value="pineapple">Pineapple</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Select>
+              <SelectTrigger>
+                <SelectValue placeholder="Select an island" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Islands</SelectLabel>
+                  <SelectItem value="apple">Apple</SelectItem>
+                  <SelectItem value="banana">Banana</SelectItem>
+                  <SelectItem value="blueberry">Blueberry</SelectItem>
+                  <SelectItem value="grapes">Grapes</SelectItem>
+                  <SelectItem value="pineapple">Pineapple</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select> */}
+            <FloatingLabelInput
+              defaultValue={user?.dob}
+              name="dob"
+              type="date"
+              label="DOB"
+            />
+            <FloatingLabelInput
+              defaultValue={user?.mobile}
+              name="mobile"
+              label="Phone Number"
+            />
+          </fieldset>
+
+          <Button
+            disabled={isPending}
+            type="submit"
+            variant={"secondary"}
+            className="col-span-2 w-full"
+          >
+            {isPending ? <Loader2 className="animate-spin" /> : "Update User"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}