sarlink-portal/components/user/user-agreement-form.tsx

"use client";
import { Loader2, MoveLeft } from "lucide-react";
import { useActionState, useEffect } from "react";
import { toast } from "sonner";
import { type UpdateUserFormState, updateUserAgreement } from "@/actions/user-actions";
import { Button } from "@/components/ui/button";
import { FloatingLabelInput } from "@/components/ui/floating-label";
import type { UserProfile } from "@/lib/types/user";

export default function UserAgreementForm({ user }: { user: UserProfile }) {
  const initialState: UpdateUserFormState = {
    message: "",
    fieldErrors: {},
    payload: new FormData(),
  };
  const [state, formAction, isPending] = useActionState(
    updateUserAgreement,
    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 agreement 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">
          Upload User agreement
        </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
              type="file"
              size={10}
              name="agreement"
              label="Agreement Document"
              accept=".pdf"
            />
          </fieldset>

          <Button
            disabled={isPending}
            type="submit"
            variant={"secondary"}
            className=""
          >
            {isPending ? <Loader2 className="animate-spin" /> : "Update Agreement"}
          </Button>
        </div>
      </form>
    </div>
  );
}