Initial commit for new panel

2025-09-09 11:20:26 +03:30
commit 1d4ccb3575
343 changed files with 20031 additions and 0 deletions
@@ -0,0 +1,193 @@
+"use client";
+
+import { CreateCustomerCredentials } from "@/lib/api";
+import useCreateCustomerPresenter from "./useCreateCustomerPresenter";
+import { ShowcaseSection } from "../../Layouts/showcase-section";
+import InputGroup from "@/components/FormElements/InputGroup";
+import { FormErrorMessages } from "@/constants/Texts";
+import { Select } from "@/components/FormElements/select";
+import MultiSelect from "@/components/FormElements/MultiSelect";
+
+interface IProps {
+  editMode?: boolean;
+  defaultValues?: CreateCustomerCredentials;
+  id?: string;
+}
+
+const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
+  const { errors, handleSubmit, register, onSubmit, companies, router } =
+    useCreateCustomerPresenter({ defaultValues, editMode, id });
+
+  return (
+    <form className="grid grid-cols-1 gap-9" onSubmit={handleSubmit(onSubmit)}>
+      <ShowcaseSection
+        title="Create Customer"
+        className="grid grid-cols-2 gap-5"
+      >
+        <div className="flex flex-col gap-2">
+          <InputGroup
+            {...register("username", {
+              required: { value: true, message: FormErrorMessages.required },
+              minLength: { value: 3, message: FormErrorMessages.minLength(3) },
+              maxLength: {
+                value: 30,
+                message: FormErrorMessages.maxLength(30),
+              },
+              pattern: {
+                value: /^[a-zA-Z0-9]+$/,
+                message: FormErrorMessages.alphaNumeric,
+              },
+            })}
+            name="username"
+            label="Username"
+            type="text"
+            placeholder="Enter username"
+          />
+          {errors.username && (
+            <p className="mt-1 text-sm text-red-500">
+              {errors.username.message}
+            </p>
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          <MultiSelect
+            label="Select companies"
+            items={
+              companies
+                ? companies?.map((item) => ({
+                    value: item.id,
+                    text: item.name,
+                  }))
+                : []
+            }
+            placeholder="Choose your interests..."
+            {...register("company_ids", {
+              required: "Please select at least one interest",
+            })}
+            errors={errors}
+            required
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <InputGroup
+            {...register("email", {
+              required: { value: true, message: FormErrorMessages.required },
+              pattern: {
+                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                message: FormErrorMessages.invalidEmail,
+              },
+            })}
+            name="email"
+            label="Email"
+            type="email"
+            placeholder="Enter email"
+          />
+          {errors.email && (
+            <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          <InputGroup
+            {...register("password", {
+              required: { value: true, message: FormErrorMessages.required },
+              minLength: { value: 8, message: FormErrorMessages.minLength(8) },
+              maxLength: {
+                value: 128,
+                message: FormErrorMessages.maxLength(128),
+              },
+            })}
+            name="password"
+            label="Password"
+            type="password"
+            placeholder="Enter password"
+          />
+          {errors.password && (
+            <p className="mt-1 text-sm text-red-500">
+              {errors.password.message}
+            </p>
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          <InputGroup
+            {...register("full_name", {
+              minLength: { value: 2, message: FormErrorMessages.minLength(2) },
+              maxLength: {
+                value: 100,
+                message: FormErrorMessages.maxLength(100),
+              },
+            })}
+            name="full_name"
+            label="Full name"
+            type="full_name"
+            placeholder="Enter full name"
+          />
+          {errors.full_name && (
+            <p className="mt-1 text-sm text-red-500">
+              {errors.full_name.message}
+            </p>
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          <InputGroup
+            {...register("phone", {
+              minLength: {
+                value: 10,
+                message: FormErrorMessages.minLength(10),
+              },
+              maxLength: {
+                value: 20,
+                message: FormErrorMessages.maxLength(20),
+              },
+            })}
+            name="phone"
+            label="Phone"
+            type="tel"
+            placeholder="Enter phone"
+          />
+          {errors.phone && (
+            <p className="mt-1 text-sm text-red-500">{errors.phone.message}</p>
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          <InputGroup
+            {...register("mobile", {
+              minLength: {
+                value: 10,
+                message: FormErrorMessages.minLength(10),
+              },
+              maxLength: {
+                value: 20,
+                message: FormErrorMessages.maxLength(20),
+              },
+            })}
+            name="mobile"
+            label="Mobile"
+            type="tel"
+            placeholder="Enter mobile"
+          />
+          {errors.mobile && (
+            <p className="mt-1 text-sm text-red-500">{errors.mobile.message}</p>
+          )}
+        </div>
+
+        <div className="col-span-2 flex gap-6">
+          <button
+            type="submit"
+            className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
+          >
+            Submit
+          </button>
+          <button
+            type="button"
+            onClick={router.back}
+            className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
+          >
+            Opt out
+          </button>
+        </div>
+      </ShowcaseSection>
+    </form>
+  );
+};
+
+export default CreateCustomer;