feat: mentor status page pending and success

merge

apps/dimentorin/src/app/auth/login/page.tsx

@@ -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>

apps/dimentorin/src/app/auth/register-mentor/layout.tsx

@@ -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;

apps/dimentorin/src/app/auth/register-mentor/page.tsx

@@ -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;

apps/dimentorin/src/app/auth/register-mentor/pending/layout.tsx

@@ -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;

apps/dimentorin/src/app/auth/register-mentor/success/layout.tsx

@@ -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;

apps/dimentorin/src/app/auth/register-mentor/success/page.tsx

@@ -0,0 +1,57 @@
+import { FC, ReactElement, useEffect } from 'react';
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { ArrowRightOutlined } from '@ant-design/icons';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
+      <div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+        <RegisterResetBanner />
+        <div className="border-2 border-primary-500/50 xl:w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
+          <div className="xl:w-[704px] flex flex-col justify-center items-center">
+            <h2 className="text-4xl text-primary-500 font-semibold">
+              Register Akun Mentor Berhasil
+            </h2>
+            <h4 className="mt-3 text-primary-500 font-medium text-xl">
+              Akun Kamu Telah Berhasil Diverifikasi!
+            </h4>
+            <svg
+              width="198"
+              height="198"
+              viewBox="0 0 198 198"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="mt-10"
+            >
+              <circle cx="99" cy="99" r="99" fill="#BCF8B0" />
+              <rect
+                x="31.1152"
+                y="32.9141"
+                width="133.971"
+                height="133.971"
+                rx="66.9857"
+                fill="#35BA43"
+              />
+              <path
+                d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
+                fill="#E0FBD8"
+              />
+            </svg>
+            <h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
+              Kamu sekarang bisa login dan mulai menggunakan layanan kami. Selamat bergabung! SENPAIIII
+            </h4>
+            <a href="/auth/login">
+              <Button className="gap-3 mt-10" size="lg">
+                Masuk Jalur Mentor Isekai
+                <ArrowRightOutlined />
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/page.tsx

@@ -0,0 +1,12 @@
+import { Navbar } from '@imphnen-frontend-service/ui/organisms';
+import { FC, ReactElement } from 'react';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className='bg-blue-50'>
+      <Navbar />
+    </div>
+  );
+};
+
+export default Components;

apps/dimentorin/src/main.tsx

@@ -6,6 +6,7 @@ import {
   add404PageToRoutesChildren,
   addErrorElementToRoutes,
   convertPagesToRoute,
+  ModalLoginProvider,
   QueryProvider,
 } from '@imphnen-frontend-service/utils';
 import { Toaster } from 'sonner';
@@ -35,8 +36,10 @@ if (!rootElement) throw new Error('Failed to find the root element');
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
+      <ModalLoginProvider>
         <Toaster position="top-right" />
         <RouterProvider router={router} />
+      </ModalLoginProvider>
     </QueryProvider>
   </StrictMode>
 );

apps/dimentorin/src/middleware.ts

@@ -14,6 +14,9 @@ const mappingPublicRoutes = [
   '/auth/register/otp',
   '/auth/register/success',
   '/auth/new-password',
+  '/auth/register-mentor',
+  '/auth/register-mentor/pending',
+  '/auth/register-mentor/success'
 ];
 
 const mappingRoutePermissions = [

libs/ui/src/atoms/index.ts

@@ -1,3 +1,4 @@
 export * from './button';
 export * from './input';
 export * from './textarea';
+export * from './select'

libs/ui/src/atoms/select/index.ts

@@ -0,0 +1 @@
+export * from "./select"

libs/ui/src/atoms/select/select.tsx

@@ -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>
+  );
+};

libs/ui/src/molecules/index.ts

@@ -5,3 +5,5 @@ export * from './pagination';
 export * from './modal/modal';
 export * from './stepper';
 export * from './accordion';
+export * from './register-mentor-step';
+export * from './select-field'

libs/ui/src/molecules/register-mentor-step/index.ts

@@ -0,0 +1 @@
+export * from './register-mentor-step';

libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx

@@ -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>
+  );
+};

libs/ui/src/molecules/select-field/index.ts

@@ -0,0 +1 @@
+export * from './select-field'

libs/ui/src/molecules/select-field/select-field.tsx

@@ -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>
+  );
+};

libs/ui/src/organisms/auth-banner/auth-banner.tsx

@@ -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>