hspguard/web/src/pages/Admin/Users/Create/index.tsx

import Breadcrumbs from "@/components/ui/breadcrumbs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useUsers } from "@/store/admin/users";
import { useCallback, type FC } from "react";
import { useForm } from "react-hook-form";
import { Link, useNavigate } from "react-router";

interface FormData {
  fullName: string;
  email: string;
  phoneNumber: string;
  password: string;
  repeatPassword: string;
  isAdmin: boolean;
}

const AdminCreateUserPage: FC = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>();

  const createUser = useUsers((state) => state.createUser);

  const navigate = useNavigate();

  const onSubmit = useCallback(
    async (data: FormData) => {
      console.log("Form submitted:", data);
      const success = await createUser({
        email: data.email,
        full_name: data.fullName,
        password: data.password,
        is_admin: data.isAdmin,
      });
      if (success) {
        navigate("/admin/users");
      }
    },
    [createUser, navigate],
  );

  return (
    <div className="p-4">
      <Breadcrumbs
        items={[
          { href: "/admin", label: "Admin" },
          { href: "/admin/users", label: "Users" },
          { label: "Create new User" },
        ]}
      />
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Personal Information */}
        <div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
          <div className="p-4 border-b dark:border-gray-800 border-gray-300">
            <h2 className="text-gray-800 dark:text-gray-200">
              User Personal Info
            </h2>
          </div>
          <div className="p-4">
            <div className="flex flex-col gap-2 mb-4">
              <p className="text-gray-600 dark:text-gray-400 text-sm">Name</p>
              <Input
                placeholder="Full Name"
                {...register("fullName", { required: "Full Name is required" })}
              />
              {errors.fullName && (
                <span className="text-red-500 text-sm">
                  {errors.fullName.message}
                </span>
              )}
            </div>

            <div className="flex flex-col gap-2 mb-4">
              <p className="text-gray-600 dark:text-gray-400 text-sm">
                Email Address
              </p>
              <Input
                placeholder="user@company.org"
                {...register("email", {
                  required: true,
                  pattern: {
                    value: /\S+@\S+\.\S+/,
                    message: "Invalid email",
                  },
                })}
                className="dark:text-gray-100 border border-gray-300 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              {errors.email && (
                <span className="text-red-500 text-sm">
                  {errors.email.message}
                </span>
              )}
            </div>

            <div className="flex flex-col gap-2 mb-4">
              <p className="text-gray-600 dark:text-gray-400 text-sm">
                Password
              </p>
              <Input
                placeholder="secret"
                {...register("password", {
                  required: true,
                  validate: (password) => {
                    if (password.length < 8) {
                      return "Password must be at least 8 characters long";
                    }
                    if (!password.match(/[a-zA-Z]+/gi)) {
                      return "Password must contain characters";
                    }
                    if (password.split("").every((c) => c.toLowerCase() == c)) {
                      return "Password should contain at least 1 uppercase character";
                    }
                    if (!password.match(/\d+/gi)) {
                      return "Password should contain at least 1 digit";
                    }
                  },
                })}
                className="dark:text-gray-100 border border-gray-300 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              {errors.password && (
                <span className="text-red-500 text-sm">
                  {errors.password.message}
                </span>
              )}
            </div>

            <div className="flex flex-col gap-2 mb-4">
              <p className="text-gray-600 dark:text-gray-400 text-sm">
                Repeat Password
              </p>
              <Input
                placeholder="secret-again"
                {...register("repeatPassword", {
                  required: true,
                  validate: (repeatPassword, { password }) => {
                    if (repeatPassword != password) {
                      return "Password does not match";
                    }
                  },
                })}
                className="dark:text-gray-100 border border-gray-300 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              {errors.repeatPassword && (
                <span className="text-red-500 text-sm">
                  {errors.repeatPassword.message}
                </span>
              )}
            </div>
          </div>
        </div>

        {/* Final Section */}
        <div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
          <div className="p-4 border-b dark:border-gray-800 border-gray-300">
            <h2 className="text-gray-800 dark:text-gray-200">
              Final Customization & Submit
            </h2>
          </div>
          <div className="p-4">
            <label className="inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                className="sr-only peer"
                {...register("isAdmin")}
              />
              <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
              <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
                Is Admin
              </span>
            </label>

            <div className="flex flex-row items-center justify-between gap-2 mt-4">
              <Button type="submit">Create</Button>
              <Link to="/admin/users">
                <Button
                  variant="text"
                  className="text-red-400 hover:text-red-500"
                >
                  Cancel
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};

export default AdminCreateUserPage;