mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit for new panel

Browse Source
This commit is contained in:
AmirReza Jamali
2025-09-09 11:20:26 +03:30
commit 1d4ccb3575
343 changed files with 20031 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/forms/admins/CreateAdmin.tsx
+251
View File
@@ -0,0 +1,251 @@
"use client";
import InputGroup from "@/components/FormElements/InputGroup";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import useCreateAdminPresenter from "./useCreateAdminPresenter";
import { FormErrorMessages } from "@/constants/Texts";
import { ICreateAdminCredentials } from "@/lib/api";
import { FC, useEffect } from "react";
interface IProps {
editMode?: boolean;
defaultValues?: ICreateAdminCredentials;
id?: string;
}
const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
const { errors, handleSubmit, register, router, onSubmit } =
useCreateAdminPresenter({
editMode,
defaultValues,
id,
});
return (
<form
className="grid grid-cols-1 gap-9"
onSubmit={handleSubmit((data) => {
onSubmit(data);
})}
>
<div className="flex flex-col gap-9">
<ShowcaseSection
title="Input Fields"
className="grid grid-cols-2 gap-5"
>
<div>
<InputGroup
{...register("full_name", {
required: { message: FormErrorMessages.required, value: true },
minLength: {
value: 5,
message: FormErrorMessages.minLength(5),
},
maxLength: {
value: 100,
message: FormErrorMessages.maxLength(100),
},
})}
label="Full name"
placeholder="Full name"
type="text"
name="full_name"
/>
{errors.full_name && (
<p className="mt-1 text-sm text-red-500">
{errors.full_name.message}
</p>
)}
</div>
<div>
<InputGroup
label="Username"
placeholder="Username"
type="text"
{...register("username", {
required: {
value: true,
message: FormErrorMessages.required,
},
pattern: {
value: /^[a-zA-Z0-9]+$/,
message: FormErrorMessages.alphaNumeric,
},
minLength: {
value: 3,
message: FormErrorMessages.minLength(3),
},
maxLength: {
value: 30,
message: FormErrorMessages.maxLength(30),
},
})}
name="username"
/>
{errors.username && (
<p className="mt-1 text-sm text-red-500">
{errors.username.message}
</p>
)}
</div>
<div>
<InputGroup
label="Email"
placeholder="Email"
type="email"
{...register("email", {
required: {
value: true,
message: FormErrorMessages.required,
},
pattern: {
value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: FormErrorMessages.invalidEmail,
},
})}
name="email"
/>
{errors.email && (
<p className="mt-1 text-sm text-red-500">
{errors.email.message}
</p>
)}
</div>
<div>
<InputGroup
label="Password"
placeholder="Password"
type="password"
{...register("password", {
required: {
value: true,
message: FormErrorMessages.required,
},
minLength: {
value: 8,
message: FormErrorMessages.minLength(8),
},
maxLength: {
value: 128,
message: FormErrorMessages.maxLength(128),
},
})}
name="password"
/>
{errors.password && (
<p className="mt-1 text-sm text-red-500">
{errors.password.message}
</p>
)}
</div>
<div>
<InputGroup
label="Phone"
placeholder="Phone"
type="text"
{...register("phone", {
minLength: {
value: 10,
message: FormErrorMessages.minLength(10),
},
maxLength: {
value: 20,
message: FormErrorMessages.maxLength(20),
},
})}
name="phone"
/>
{errors.phone && (
<p className="mt-1 text-sm text-red-500">
{errors.phone.message}
</p>
)}
</div>
<div>
<InputGroup
label="Department"
placeholder="Department"
type="text"
{...register("department", {
minLength: {
value: 2,
message: FormErrorMessages.minLength(2),
},
maxLength: {
value: 100,
message: FormErrorMessages.maxLength(100),
},
})}
name="department"
/>
{errors.department && (
<p className="mt-1 text-sm text-red-500">
{errors.department.message}
</p>
)}
</div>
<div>
<InputGroup
label="Position"
placeholder="Position"
type="text"
{...register("position", {
minLength: {
value: 2,
message: FormErrorMessages.minLength(2),
},
maxLength: {
value: 100,
message: FormErrorMessages.maxLength(100),
},
})}
name="position"
/>
{errors.position && (
<p className="mt-1 text-sm text-red-500">
{errors.position.message}
</p>
)}
</div>
<div>
<InputGroup
type="file"
fileStyleVariant="style1"
label="Attach file"
placeholder="Attach file"
register={register}
name="profile_image"
/>
{errors.profile_image && (
<p className="mt-1 text-sm text-red-500">
{errors.profile_image.message as string}
</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>
</div>
</form>
);
};
export default CreateAdminForm;