feat: mentor register pages

2025-07-12 22:15:43 +07:00
parent e1269f4daa
commit eb5ff2e46c
13 changed files with 465 additions and 3 deletions
@@ -51,6 +51,11 @@ export const Components: FC = (): ReactElement => {
                Daftar Disini
              </a>
            </div>
+            <div className='text-center w-full mb-1'>
+              <a href="/auth/register-mentor" className="text-primary-500 font-medium">
+                Daftar Sebagai Mentor
+              </a>
+            </div>
            <div className="flex items-center w-full">
              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
              <span className="px-3 text-blue-400">Or</span>
@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,242 @@
+import { FC, ReactElement, useState } from 'react';
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button, Select } from '@imphnen-frontend-service/ui/atoms';
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules';
+
+export const Components: FC = (): ReactElement => {
+  const [ step, setStep ] = useState(1)
+
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
+      <div className="bg-white xl:min-w-[1130px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+        <RegisterResetBanner />
+        <div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
+          <div className="xl:w-[714px]">
+            <Button
+              className='xl:hidden gap-3'
+              variant='secondary'
+            >
+              <ArrowLeftOutlined />
+              Login
+            </Button>
+            <RegisterMentorStep step={step} />
+            <h3 className="mt-5 text-3xl font-semibold text-primary-500">
+              Register
+            </h3>
+            <h5 className="text-primary-500 font-medium">
+              Welcome to the team, Mentor - powered by IMPHNEN
+            </h5>
+            <form>
+              <div className={`${step !== 1 ? 'hidden' : ''}`}>
+                <div className='mt-7 mb-2'>
+                  <InputField
+                    label="Nama Lengkap"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Nama Lengkap"
+                    name={'fullname'}
+                  />
+                </div>
+                <SelectField
+                  label="Jenis Kelamin"
+                  defaultValue=""
+                  size="lg"
+                  error=""
+                >
+                  <option value="" disabled hidden>
+                    Pilih Jenis Kelamin
+                  </option>
+                  <option value="laki-laki">Laki - Laki</option>
+                  <option value="perempuan">Perempuan</option>
+                </SelectField>
+                <div className='my-2'>
+                  <InputField
+                    label="No Telp/Whatsapp Only"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Nama Lengkap"
+                    name={'fullname'}
+                  />
+                </div>
+                <SelectField
+                  label="Domisili"
+                  defaultValue=""
+                  size="lg"
+                  error=""
+                >
+                  <option value="" disabled hidden>
+                    Pilih Domisili
+                  </option>
+                  <option value="aceh">Aceh</option>
+                  <option value="jawa-selatan">Jawa Selatan</option>
+                </SelectField>
+                <div className='mt-2'>
+                  <SelectField
+                    label="Pendidikan Terakhir"
+                    defaultValue=""
+                    size="lg"
+                    error=""
+                  >
+                    <option value="" disabled hidden>
+                      Apa pendidikan terakhir senpai
+                    </option>
+                    <option value="SMA">SMA</option>
+                    <option value="S1">S1</option>
+                    <option value="S2">S2</option>
+                    <option value="S3">S3</option>
+                  </SelectField>
+                </div>
+              </div>
+              <div className={`${step !== 2 ? 'hidden' : ''}`}>
+                <div className='mt-7 mb-2 gap-2 flex flex-col'>
+                  <InputField
+                    label="Perusahaan Saat Ini"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Masukkan Perusahaan tempat kerja, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
+                    name={'fullname'}
+                  />
+                  <InputField
+                    label="Masukan jabatan senpai di perusahaan"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Masukan jabatan senpai di perusahaan"
+                    name={'fullname'}
+                  />
+                  <SelectField
+                    label="Topik Keahlian Yang Ingin Diajarkan"
+                    defaultValue=""
+                    size="lg"
+                    error=""
+                  >
+                    <option value="" disabled hidden>
+                      Apa yang ingin anda ajarkan senpaii
+                    </option>
+                    <option value="Frontend Developer">Frontend Developer</option>
+                    <option value="Backend Developer">Backend Developer</option>
+                    <option value="Other">Other</option>
+                  </SelectField>
+                  <InputField
+                    label="Jika Mengisi “Other”, Tulis Topik yang Kamu Kuasai"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Tolong isi jika tidak ada di pilihan senpai"
+                    name={'fullname'}
+                  />
+                  <InputField
+                    label="Skill Utama yang Kamu Miliki (boleh lebih dari satu)"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Isi Skill nya dong senpai"
+                    name={'fullname'}
+                  />
+                </div>
+              </div>
+              <div className={`${step !== 3 ? 'hidden' : ''}`}>
+                <div className='mt-7 mb-2 gap-2 flex flex-col'>
+                  <SelectField
+                    label="Durasi Sesi Mentoring"
+                    defaultValue=""
+                    size="lg"
+                    error=""
+                  >
+                    <option value="" disabled hidden>
+                      Placeholder
+                    </option>
+                  </SelectField>
+                  <SelectField
+                    label="Format Pengajaran yang Anda Sediakan"
+                    defaultValue=""
+                    size="lg"
+                    error=""
+                  >
+                    <option value="" disabled hidden>
+                      Placeholder
+                    </option>
+                  </SelectField>
+                  <InputField
+                    type="file"
+                    label="Unggah Curiculum Vitae"
+                    size="lg"
+                    className="w-full"
+                  />
+                  <InputField
+                    label="Unggah Portofolio"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Google Drive, Behance, GitHub, Notion, dan lainnya"
+                  />
+                  <InputField
+                    type='number'
+                    label="Honorarium yang Diharapkan per Sesi (Online) Durasi rata-rata sesi: 2,5–3 jam"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Isi Nominalnya dong senpaiii!!!"
+                  />
+                  <h6 className='text-xs'>Silahkan isi dalam angka (Contoh:500.000)</h6>
+                </div>
+              </div>
+              <div className={`${step !== 4 ? 'hidden' : ''}`}>
+                <div className='mt-7 mb-2 gap-2 flex flex-col'>
+                  <InputField
+                    type='email'
+                    label="Email"
+                    size="lg"
+                    className="w-full"
+                    placeholder="isi emailnya dong senpai!!!"
+                  />
+                  <InputField
+                    type='password'
+                    label="Buat Password"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Buat Password"
+                  />
+                  <InputField
+                    type='password'
+                    label="Buat Password"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Buat Password"
+                  />
+                </div>
+              </div>
+              <div className='flex justify-end mt-4 gap-2'>
+                <Button
+                  variant='secondary'
+                  onClick={() => setStep(step - 1)}
+                  type='button'
+                  className={`${step === 1 ? 'hidden' : ''}`}
+                >
+                  <ArrowLeftOutlined />
+                  Kembali
+                </Button>
+                <Button
+                  variant='primary'
+                  onClick={() => setStep(step + 1)}
+                  type='button'
+                  className={`${step === 4 ? 'hidden' : ''}`}
+                >
+                  Lanjutkan
+                  <ArrowRightOutlined />
+                </Button>
+                <Button
+                  variant='primary'
+                  onClick={() => setStep(step + 1)}
+                  type='button'
+                  className={`${step === 4 ? '' : 'hidden'}`}
+                >
+                  Selesaikan
+                  <ArrowRightOutlined />
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;
@@ -14,6 +14,7 @@ const mappingPublicRoutes = [
  '/auth/register/otp',
  '/auth/register/success',
  '/auth/new-password',
+  '/auth/register-mentor'
 ];

 const mappingRoutePermissions = [
@@ -1,3 +1,4 @@
 export * from './button';
 export * from './input';
 export * from './textarea';
+export * from './select'
@@ -0,0 +1 @@
+export * from "./select"
@@ -0,0 +1,50 @@
+import {
+  FC,
+  ReactElement,
+  SelectHTMLAttributes,
+} from 'react';
+import { cn } from '@imphnen-frontend-service/utils';
+
+type TSelectSize = 'sm' | 'md' | 'lg';
+type Width = 'standard' | 'custom';
+
+type TSelectProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'size'
+> & {
+  size?: TSelectSize;
+  widthform?: Width;
+  disabled?: boolean;
+};
+
+const sizeClasses: Record<TSelectSize, string> = {
+  sm: 'text-[10px] max-h-[34px]',
+  md: 'text-[12px] max-h-[36px]',
+  lg: 'text-[15px] max-h-[38px]',
+};
+
+const disabledClass =
+  'opacity-50 hover:border-neutral-200 cursor-not-allowed';
+
+export const Select: FC<TSelectProps> = ({
+  size = 'md',
+  widthform = 'standard',
+  disabled,
+  className,
+  children,
+  ...rest
+}): ReactElement => {
+  const mergedClassName = cn(
+    `appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md`,
+    sizeClasses[size],
+    widthform === 'standard' && 'min-w-70',
+    disabled && disabledClass,
+    className
+  );
+
+  return (
+    <select className={mergedClassName} disabled={disabled} {...rest}>
+      {children}
+    </select>
+  );
+};
@@ -4,4 +4,6 @@ export * from './input-field';
 export * from './pagination';
 export * from './modal/modal';
 export * from './stepper';
-export * from './accordion';
+export * from './accordion';
+export * from './register-mentor-step';
+export * from './select-field'
@@ -0,0 +1 @@
+export * from './register-mentor-step';
@@ -0,0 +1,53 @@
+import { FC, ReactElement } from "react";
+
+type TRegisterMentorStep = {
+  step: number;
+};
+
+const steps = [
+  "Informasi Personal",
+  "Detail Mentor",
+  "Sesi Mentoring & Dokumen Pendukung",
+  "Informasi Akun Pribadi",
+];
+
+export const RegisterMentorStep: FC<TRegisterMentorStep> = ({ step }): ReactElement => {
+  const progressPercent = ((step - 1) / (steps.length - 1)) * 100;
+
+  return (
+    <div className="relative w-full px-8">
+      {/* Garis dasar (abu/biru muda) */}
+      <div className="absolute top-5 left-8 right-8 h-0.5 bg-blue-100 z-0" />
+
+      {/* Garis progress biru (dinamis) */}
+      <div
+        className="absolute top-5 left-8 h-0.5 bg-blue-500 z-0 transition-all duration-300"
+        style={{ width: `calc(${progressPercent}% - 0.5rem)` }} // -0.5rem agar tidak overlap ke lingkaran
+      />
+
+      <div className="flex justify-between relative z-10">
+        {steps.map((label, index) => {
+          const currentStep = index + 1;
+          const isActive = currentStep === step;
+
+          return (
+            <div key={index} className="flex flex-col items-center flex-1 text-center">
+              {/* Lingkaran angka */}
+              <div
+                className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
+                  isActive
+                    ? "bg-gradient-to-b from-purple-600 to-blue-500 text-white border-transparent"
+                    : "bg-white text-gray-700 border-blue-400"
+                }`}
+              >
+                <span className="font-bold">{currentStep}</span>
+              </div>
+              {/* Label */}
+              <span className="text-xs text-blue-600 mt-2 leading-tight">{label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from './select-field'
@@ -0,0 +1,93 @@
+import {
+  FC,
+  ReactElement,
+  SelectHTMLAttributes,
+  DetailedHTMLProps,
+} from 'react';
+import { Select } from '../../atoms'; // Custom select atom kamu
+import { cn } from '@imphnen-frontend-service/utils';
+
+export type TSelectSize = 'sm' | 'md' | 'lg';
+
+export type TSelectFieldProps = Omit<
+  DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>,
+  'size'
+> & {
+  label: string;
+  size?: TSelectSize;
+  error?: string;
+  helperText?: string;
+  htmlFor?: string;
+  disabled?: boolean;
+};
+
+const sizeClasses: Record<TSelectSize, { label: string; helperText: string }> = {
+  lg: {
+    label: 'text-p3 font-medium',
+    helperText: 'text-label3 font-normal',
+  },
+  md: {
+    label: 'text-label1 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+  sm: {
+    label: 'text-label2 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+};
+
+export const SelectField: FC<TSelectFieldProps> = ({
+  label,
+  size = 'md',
+  error,
+  helperText,
+  htmlFor,
+  disabled,
+  className,
+  children,
+  ...rest
+}): ReactElement => {
+  return (
+    <div className="flex flex-col gap-[8px]">
+      <label
+        htmlFor={htmlFor}
+        className={cn(
+          'items-start justify-item-start text-start !text-neutral-800',
+          sizeClasses[size].label
+        )}
+      >
+        {label}
+      </label>
+
+      <Select
+        {...(htmlFor && { id: htmlFor })}
+        size={size}
+        disabled={disabled}
+        className={cn(
+          error &&
+            'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
+          className,
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+        {...rest}
+      >
+        {children}
+      </Select>
+
+      {error ? (
+        <p className="text-danger-500 text-label1 text-left">{error}</p>
+      ) : (
+        helperText && (
+          <p
+            className={cn(
+              'text-label2 text-left',
+              sizeClasses[size].helperText
+            )}
+          >
+            {helperText}
+          </p>
+        )
+      )}
+    </div>
+  );
+};
@@ -6,14 +6,14 @@ import { FC, ReactElement } from "react";
 function AuthBanner({text, href}: {text: string, href: string}){
    return (
        <div className='hidden xl:block relative rounded-md'>
-          <img src="/image/95319c4f9953dfe6180200e529dfcea5.webp" alt="Banner" className='w-[420px] h-[632px] object-[80%] object-cover rounded-lg' />
+          <img src="/image/95319c4f9953dfe6180200e529dfcea5.webp" alt="Banner" className='w-[420px] min-h-[632px] object-[80%] object-cover rounded-lg' />
          <div className='absolute top-0 bg-gradient-to-b from-primary-500 to-transparent w-full rounded-t-lg h-[163px] py-5 px-5'>
            <Button variant='secondary' className='gap-2' onClick={() => document.location.href = `${href}`}>
              <ArrowLeftOutlined />
              <p>{text}</p>
            </Button>
          </div>
-          <div className='absolute bottom-0 bg-gradient-to-t from-primary-500 to-transparent w-full rounded-b-lg h-[263px] flex flex-col items-center justify-center'>
+          <div className='absolute bottom-0 bg-gradient-to-t from-primary-500 to-transparent w-full rounded-b-lg min-h-[263px] flex flex-col items-center justify-center'>
            <img src="/image/9261045e09137f3fcb925a78c55b6ddb.webp" alt="Logo" width={317} />
          </div>
        </div>