From ad09e98bba2ab682d77a84316da9ed64b2a2c687 Mon Sep 17 00:00:00 2001
From: LandaMm <qwer.009771@gmail.com>
Date: Thu, 5 Jun 2025 20:50:27 +0200
Subject: [PATCH] feat: `create user` page

---
 web/src/App.tsx                            |   3 +-
 web/src/pages/Admin/Users/Create/index.tsx | 188 +++++++++++++++++++++
 2 files changed, 190 insertions(+), 1 deletion(-)
 create mode 100644 web/src/pages/Admin/Users/Create/index.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index ff7d637..ece59e1 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -18,6 +18,7 @@ import NotFoundPage from "./pages/NotFound";
 import ApiServiceEditPage from "./pages/Admin/ApiServices/Update";
 import AdminUsersPage from "./pages/Admin/Users";
 import AdminViewUserPage from "./pages/Admin/Users/View";
+import AdminCreateUserPage from "./pages/Admin/Users/Create";
 
 const router = createBrowserRouter([
   {
@@ -59,7 +60,7 @@ const router = createBrowserRouter([
                 path: "users",
                 children: [
                   { index: true, element: <AdminUsersPage /> },
-                  // { path: "create", element: <ApiServiceCreatePage /> },
+                  { path: "create", element: <AdminCreateUserPage /> },
                   {
                     path: "view/:userId",
                     element: <AdminViewUserPage />,
diff --git a/web/src/pages/Admin/Users/Create/index.tsx b/web/src/pages/Admin/Users/Create/index.tsx
new file mode 100644
index 0000000..d9d496c
--- /dev/null
+++ b/web/src/pages/Admin/Users/Create/index.tsx
@@ -0,0 +1,188 @@
+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 } 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 onSubmit = useCallback(
+    (data: FormData) => {
+      console.log("Form submitted:", data);
+      createUser({
+        email: data.email,
+        full_name: data.fullName,
+        password: data.password,
+        is_admin: data.isAdmin,
+      });
+    },
+    [createUser],
+  );
+
+  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;