fix: remove unused icon export from index for cleaner module structure

fix: replace XIcon with LuX in DialogClose for consistency
fix: remove unused icon exports from icons
2025-06-01 11:27:21 +07:00 · 2025-06-01 11:25:12 +07:00 · 2025-06-01 11:25:06 +07:00 · 2025-06-01 11:20:40 +07:00 · 2025-06-01 11:09:52 +07:00 · 2025-06-01 11:09:02 +07:00
220 changed files with 9048 additions and 9213 deletions
@@ -1,14 +0,0 @@
 # API Endpoint
 VITE_API_URL=
 # Payload CMS Secret Key (minimum 32 characters)
 CMS_SECRET=your-very-long-secret-key
 # PostgreSQL Connection String
 CMS_POSTGRES_URL=postgres://user:password@host:port/database
 # S3 Storage Configuration
 CMS_STORAGE_ENDPOINT=https://your-s3-endpoint.com
 CMS_STORAGE_ACCESS_KEY_ID=your-access-key-id
 CMS_STORAGE_SECRET_ACCESS_KEY=your-secret-access-key
 CMS_STORAGE_REGION=ap-southeast-1
@@ -6,9 +6,10 @@
 This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
-1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">gacha website</a>.
+1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
-2. **Backoffice** - Application for internal management.
+2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
-3. **Dimentorin** - Application for mentoring services.
+3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
 4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
 ## How to install
@@ -24,6 +25,15 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The mono
 ## How to run
 ### Setup Environment Variables
 Before running the applications, you need to set up the environment variables. You can do this by copying the `.env.example` file to `.env` and modifying the values according to your needs.
 ```sh
 cd apps/{appname}
 cp .env.example .env
 ```
 ### Development
 Use the following commands to run in development mode:
@@ -40,6 +50,10 @@ Use the following commands to run in development mode:
  ```sh
  npm run dimentorin:dev
  ```
 - **Landing Page**:
  ```sh
  npm run landing:dev
  ```
 ### Build
@@ -57,6 +71,10 @@ Use the following commands to build the applications:
  ```sh
  npm run dimentorin:build
  ```
 - **Landing Page**:
  ```sh
  npm run landing:build
  ```
 ### Production
@@ -74,19 +92,22 @@ Use the following commands to run the applications in production mode:
  ```sh
  npm run dimentorin:prod
  ```
 - **Landing Page**:
  ```sh
  npm run landing:prod
  ```
 ### Storybook
 This repository uses Storybook to develop, test, and document UI components in an isolated and interactive environment. Below are the commands to work with Storybook:
 - **Run Storybook**
-  
+
  This command starts Storybook in development mode, allowing you to view and test UI components interactively.
  ```sh
  npm run ui:storybook
  ```
 - **Run Unit Test**
@@ -0,0 +1 @@
 VITE_API_URL=
@@ -18,7 +18,7 @@ import {
  RowSelectionState,
 } from '@tanstack/react-table';
 import ModalEditAccount from './_components/modal-edit-account';
-import { useQueryState } from '../../hook/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 interface Account {
  id: number;
@@ -166,7 +166,7 @@ export const Components: FC = (): ReactElement => {
              </Button>
              {showFilter && (
                <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                  <Filter onClose={() => setShowFilter(false)} />
+                  <Filter onClose={() => setShowFilter(false)} options={[]} />
                </div>
              )}
            </div>
@@ -10,7 +10,7 @@ import { FC, Fragment, ReactElement, useState } from 'react';
 import ModalAddItem from './_components/modal-add-item';
 import ModalEditItem from './_components/modal-edit-item';
 import ModalDeleteItem from './_components/modal-delete-item';
-import { useQueryState } from '../../hook/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 export const Components: FC = (): ReactElement => {
  const [showModalAddItem, setShowModalAddItem] = useState(false);
@@ -2,24 +2,19 @@ import { useForm } from 'react-hook-form';
 import {
  authLoginSchema,
  TLoginRequest,
  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
+import { useSession } from '@imphnen-frontend-service/utils';
 export const useLogin = () => {
  const postLogin = usePostLogin();
  const form = useForm<TLoginRequest>({
    resolver: zodResolver(authLoginSchema),
    mode: 'all',
  });
-  const onSubmit = form.handleSubmit((data) => {
+  const { signIn } = useSession();
-    postLogin.mutate(data, {
+
-      onSuccess: () => toast.success("Login sukses"),
+  const onSubmit = form.handleSubmit((data) => signIn(data));
      onError: (error) => toast.error(error.message),
    });
  });
  return {
    form,
@@ -32,7 +32,16 @@ export const Components: FC = (): ReactElement => {
            size="lg"
            className="w-full"
          />
-          <Button type="submit" size="md" className="w-full">
+          <Button
            disabled={
              form.formState.isSubmitting ||
              form.formState.isValidating ||
              !form.formState.isValid
            }
            type="submit"
            size="md"
            className="w-full"
          >
            Login
          </Button>
        </form>
@@ -1,18 +0,0 @@
 import { FC, ReactElement } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
  return (
    <div className="bg-primary-50 min-h-screen flex justify-center">
      <div className="bg-primary-50 min-h-screen w-full flex">
        <BackofficeSidebar />
        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
          <Outlet />
        </div>
      </div>
    </div>
  );
 };
 export default AppLayout;
@@ -1,18 +0,0 @@
 import { FC, ReactElement } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
  return (
    <div className="bg-primary-50 min-h-screen flex justify-center">
      <div className="bg-primary-50 min-h-screen w-full flex">
        <BackofficeSidebar />
        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
          <Outlet />
        </div>
      </div>
    </div>
  );
 };
 export default AppLayout;
@@ -1,18 +0,0 @@
 import { FC, ReactElement } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
  return (
    <div className="bg-primary-50 min-h-screen flex justify-center">
      <div className="bg-primary-50 min-h-screen w-full flex">
        <BackofficeSidebar />
        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
          <Outlet />
        </div>
      </div>
    </div>
  );
 };
 export default AppLayout;
@@ -1,18 +0,0 @@
 import { FC, ReactElement } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
  return (
    <div className="bg-primary-50 min-h-screen flex justify-center">
      <div className="bg-primary-50 min-h-screen w-full flex">
        <BackofficeSidebar />
        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
          <Outlet />
        </div>
      </div>
    </div>
  );
 };
 export default AppLayout;
@@ -1,18 +0,0 @@
 import { FC, ReactElement } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
  return (
    <div className="bg-primary-50 min-h-screen flex justify-center">
      <div className="bg-primary-50 min-h-screen w-full flex">
        <BackofficeSidebar />
        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
          <Outlet />
        </div>
      </div>
    </div>
  );
 };
 export default AppLayout;
@@ -1,18 +0,0 @@
 import { FC, ReactElement } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
  return (
    <div className="bg-primary-50 min-h-screen flex justify-center">
      <div className="bg-primary-50 min-h-screen w-full flex">
        <BackofficeSidebar />
        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
          <Outlet />
        </div>
      </div>
    </div>
  );
 };
 export default AppLayout;
@@ -1,11 +1,108 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
  PERMISSIONS,
  SessionToken,
  SessionUser,
 } from '@imphnen-frontend-service/utils';
 import { LoaderFunctionArgs, redirect } from 'react-router';
 const mappingPublicRoutes = [
  '/auth/login',
  '/auth/forgot',
  '/auth/new-password',
 ];
 const mappingRoutePermissions = [
  {
    path: '/dashboard',
    permissions: [],
  },
  {
    path: '/users',
    permissions: [PERMISSIONS.USERS.READ_LIST],
  },
  {
    path: '/users/create',
    permissions: [PERMISSIONS.USERS.CREATE],
  },
  {
    path: '/users/update',
    permissions: [PERMISSIONS.USERS.UPDATE],
  },
  {
    path: '/users/detail',
    permissions: [PERMISSIONS.USERS.READ_DETAIL],
  },
  {
    path: '/roles',
    permissions: [PERMISSIONS.ROLES.READ_LIST],
  },
  {
    path: '/roles/create',
    permissions: [PERMISSIONS.ROLES.CREATE],
  },
  {
    path: '/roles/update',
    permissions: [PERMISSIONS.ROLES.UPDATE],
  },
  {
    path: '/roles/detail',
    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
  },
  {
    path: '/permissions',
    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
  },
  {
    path: '/permissions/create',
    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
  },
  {
    path: '/permissions/update',
    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
  },
  {
    path: '/permissions/detail',
    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
  },
 ];
 //TODO : Fix this later
 // const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
 //   const fallback = mappingRoutePermissions.find((route) =>
 //     route.permissions.some((perm) => userPermissions.includes(perm))
 //   );
 //   return redirect(fallback?.path ?? '/auth/login');
 // };
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const pathname = url.pathname;
  const session = SessionUser.get();
  const session_token = SessionToken.get();
  const token = session_token?.token?.access_token;
  const userPermissions =
    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-  if (pathname) return null;
+  if (mappingPublicRoutes.includes(pathname)) {
    if (token) return redirect('/dashboard');
    return null;
  }
  if (!session) return redirect('/auth/login');
  const matchedRoute = mappingRoutePermissions.find(
    (route) => route.path === pathname
  );
  if (matchedRoute) {
    const hasPermission =
      !matchedRoute.permissions ||
      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
    if (!hasPermission) {
      return '/dashboard';
    }
  }
  return null;
 };
@@ -0,0 +1 @@
 VITE_API_URL=
@@ -2,27 +2,23 @@ import { useForm } from 'react-hook-form';
 import {
  authLoginSchema,
  TLoginRequest,
  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
+import { useSession } from '@imphnen-frontend-service/utils';
 export const useLogin = () => {
  const postLogin = usePostLogin();
  const form = useForm<TLoginRequest>({
    resolver: zodResolver(authLoginSchema),
    mode: 'all',
  });
-  const onSubmit = form.handleSubmit((data) => {
+  const { signIn, isLoading } = useSession();
-    postLogin.mutate(data, {
+
-      onSuccess: () => toast.success("Login sukses"),
+  const onSubmit = form.handleSubmit((data) => signIn(data));
      onError: (error) => toast.error(error.message),
    });
  });
  return {
    form,
    onSubmit,
    isLoading
  };
 };
@@ -0,0 +1,24 @@
 import { useForm } from 'react-hook-form';
 import {
  TVerifyOtpRequest,
  verifyEmailSchema,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useOtp } from '@imphnen-frontend-service/utils';
 export const useOtpHook = () => {
  const form = useForm<TVerifyOtpRequest>({
    resolver: zodResolver(verifyEmailSchema),
    mode: 'all',
  });
  const { otp, isLoading } = useOtp();
  const onSubmit = form.handleSubmit((data) => otp(data));
  return {
    form,
    onSubmit,
    isLoading
  };
 };
@@ -0,0 +1,24 @@
 import { useForm } from 'react-hook-form';
 import {
  authRegisterSchema,
  TRegisterRequest,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRegister } from '@imphnen-frontend-service/utils';
 export const useRegisterHook = () => {
  const form = useForm<TRegisterRequest>({
    resolver: zodResolver(authRegisterSchema),
    mode: 'all',
  });
  const { register, isLoading } = useRegister();
  const onSubmit = form.handleSubmit((data) => register(data));
  return {
    form,
    onSubmit,
    isLoading
  };
 };
@@ -5,7 +5,7 @@ import { useLogin } from '../../_hooks/use-login';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 export const Components: FC = (): ReactElement => {
-  const { form, onSubmit } = useLogin();
+  const { form, onSubmit, isLoading } = useLogin();
  return (
    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
@@ -42,7 +42,7 @@ export const Components: FC = (): ReactElement => {
                  Lupa Password ?
                </a>
              </div>
-              <Button className="w-full" type='submit'>Enter Isekai</Button>
+              <Button className="w-full" type='submit' disabled={(!form.formState.isValid || isLoading)}>Enter Isekai</Button>
            </form>
            <div className="flex my-3 gap-3 justify-center">
@@ -74,6 +74,13 @@ export const Components: FC = (): ReactElement => {
              <ArrowLeftOutlined />
              Kembali Ke Homepage
            </Button>
            <Button
              className='xl:hidden w-full gap-3'
              variant='secondary'
            >
              <ArrowLeftOutlined />
              Kembali Ke Homepage
            </Button>
          </div>
        </div>
      </div>
@@ -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,37 @@
 import { FC, ReactElement } from 'react';
 import { ControlledInputField, RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
 import { useOtpHook } from '../../../_hooks/use-otp';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useSearchParams } from 'react-router-dom';
 export const Components: FC = (): ReactElement => {
  const { form, onSubmit, isLoading } = useOtpHook()
  const [ searchParams ] = useSearchParams()
  return (
    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
        <RegisterResetBanner />
        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Verifikasi Email</h3>
          <h5 className='mt-2 text-xl font-medium text-primary-500'>Yeay~! Pesan dari dunia lain sudah dikirimkan ke {searchParams.get("email")}</h5>
          <form onSubmit={onSubmit} className='mt-7'>
            <ControlledInputField
              label="OTP"
              size="lg"
              className="w-full"
              placeholder="XXXXXX"
              max={6}
              name={'otp'}
              maxLength={6}
              control={form.control}
            />
            <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
          </form>
        </div>
      </div>
    </div>
  );
 };
 export default Components;
@@ -1,96 +1,108 @@
 import { FC, ReactElement } from 'react';
-import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
+import { ArrowLeftOutlined } from '@ant-design/icons';
 import { useRegisterHook } from '../../_hooks/use-register';
 export const Components: FC = (): ReactElement => {
  const { form, onSubmit, isLoading } = useRegisterHook();
  return (
    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
-      <div className="bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <div className="bg-white xl:min-w-[1130px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
        <RegisterResetBanner />
-        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center">
+        <div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
-          <div className="w-[704px]">
+          <div className="xl:w-[714px]">
            <Button
              className='xl:hidden gap-3'
              variant='secondary'
            >
              <ArrowLeftOutlined />
              Login
            </Button>
            <h3 className="mt-5 text-3xl font-semibold text-primary-500">
              Register
            </h3>
            <h5 className="text-primary-500 font-medium">
              Yosha~! Saatnya Bergabung dengan Dimentorin
            </h5>
-            <div className="grid grid-flow-row-dense my-7 grid-cols-2 gap-2">
+            <form onSubmit={onSubmit}>
-              <InputField
+              <div className='my-7'>
-                label="First Name"
+                <ControlledInputField
-                size="lg"
+                  label="Full name"
-                placeholder="Nama Depan"
+                  size="lg"
-              />
+                  className="w-full"
-              <InputField
+                  placeholder="Nama Lengkap"
-                label="Last Name"
+                  name={'fullname'}
-                size="lg"
+                  control={form.control}
-                className="w-full"
+                />
                placeholder="Nama Belakang"
              />
              <InputField
                label="Email"
                size="lg"
                placeholder="Contoh : yourname@mail.com"
              />
              <div className="flex gap-2">
                <div className="flex flex-col gap-2">
                  <h4 className="font-medium">OTP Code</h4>
                  <Input
                    className="w-full"
                    size="lg"
                    placeholder="Kode OTP"
                  />
                </div>
                <div className="flex flex-col">
                  <Button size="sm" className="mt-[30px]">
                    Kirim OTP
                  </Button>
                </div>
              </div>
-            </div>
+              <div className="grid grid-flow-row-dense my-7 lg:grid-cols-2 gap-2">
-            <InputField
+                <ControlledInputField
-              label="Password"
+                  label="Email"
-              className="w-full"
+                  size="lg"
-              size="lg"
+                  className="w-full"
-              type="password"
+                  placeholder="Contoh : yourname@mail.com"
-              placeholder="Buat password sekeren jurus ultimate-mu!"
+                  type='email'
-            />
+                  control={form.control}
-            <h6 className="text-sm text-gray-500 mt-1">
+                  name={'email'}
-              "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
+                />
-            </h6>
+                <ControlledInputField
-            <h6 className="text-sm text-gray-500 mt-2">
+                  label="No Hp"
-              Tips membuat password yang OP:
+                  size="lg"
-            </h6>
+                  className="w-full"
-            <h6 className="text-sm text-gray-500">
+                  placeholder="Contoh : 088877665544"
-              - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
+                  control={form.control}
-              <span role="img" aria-label="emoji">
+                  name={'phone_number'}
-                ⚡
+                />  
-              </span>
+              </div>
-              )
+              <ControlledInputField
-            </h6>
+                label="Password"
-            <h6 className="text-sm text-gray-500">
+                className="w-full"
-              - Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
+                size="lg"
-              ultimate!
+                type="password"
-              <span role="img" aria-label="emoji">
+                placeholder="Buat password sekeren jurus ultimate-mu!"
-                🔥
+                control={form.control}
-              </span>
+                name={'password'}             
-            </h6>
+              />
-            <h6 className="text-sm text-gray-500 mb-2">
+              <h6 className="text-sm text-gray-500 mt-1">
-              - Jangan pakai password yang gampang ditebak, nanti ketahuan
+                "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
-              musuh!
+              </h6>
-              <span role="img" aria-label="emoji">
+              <h6 className="text-sm text-gray-500 mt-2">
-                🚨
+                Tips membuat password yang OP:
-              </span>
+              </h6>
-            </h6>
+              <h6 className="text-sm text-gray-500">
-            <InputField
+                - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
-              label="Repeat Password"
+                <span role="img" aria-label="emoji">
-              className="w-full"
+                  ⚡
-              size="lg"
+                </span>
-              type="password"
+                )
-              placeholder="Ulangi password-mu, Senpai~!"
+              </h6>
-            />
+              <h6 className="text-sm text-gray-500">
-            <Button className="w-full mt-2">Linked Start !!!</Button>
+                - Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
                ultimate!
                <span role="img" aria-label="emoji">
                  🔥
                </span>
              </h6>
              <h6 className="text-sm text-gray-500 mb-2">
                - Jangan pakai password yang gampang ditebak, nanti ketahuan
                musuh!
                <span role="img" aria-label="emoji">
                  🚨
                </span>
              </h6>
              <ControlledInputField
                label="Repeat Password"
                className="w-full"
                size="lg"
                type="password"
                placeholder="Ulangi password-mu, Senpai~!"
                control={form.control}
                name={"confirm_password"}
              />
              <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
            </form>
          </div>
        </div>
      </div>
@@ -1,15 +1,21 @@
-import { FC, ReactElement } from 'react';
+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 => {
  useEffect(() => {
    setTimeout(() => {
      document.location.href = "/auth/login"
    }, 10000)
  }, [])
  return (
    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
-      <div className="bg-white min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <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 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
+        <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="w-[704px] flex flex-col justify-center items-center">
+          <div className="xl:w-[704px] flex flex-col justify-center items-center">
            <h2 className="text-4xl text-primary-500 font-semibold">
              Register Successfull
            </h2>
@@ -41,10 +47,12 @@ export const Components: FC = (): ReactElement => {
            <h4 className="mt-10 text-primary-500 font-medium text-xl">
              Kamu akan memasuki isekai dalam 10 dtk
            </h4>
-            <Button className="gap-3 mt-10" size="lg">
+            <a href="/auth/login">
-              Masuk Isekai
+              <Button className="gap-3 mt-10" size="lg">
-              <ArrowRightOutlined />
+                Masuk Isekai
-            </Button>
+                <ArrowRightOutlined />
              </Button>
            </a>
          </div>
        </div>
      </div>
@@ -1,11 +1,113 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
  PERMISSIONS,
  SessionToken,
  SessionUser,
 } from '@imphnen-frontend-service/utils';
 import { LoaderFunctionArgs, redirect } from 'react-router';
 const mappingPublicRoutes = [
  '/',
  '/auth/login',
  '/auth/forgot',
  '/auth/forgot/otp',
  '/auth/register',
  '/auth/register/otp',
  '/auth/register/success',
  '/auth/new-password',
 ];
 const mappingRoutePermissions = [
  {
    path: '/dashboard',
    permissions: [],
  },
  {
    path: '/users',
    permissions: [PERMISSIONS.USERS.READ_LIST],
  },
  {
    path: '/users/create',
    permissions: [PERMISSIONS.USERS.CREATE],
  },
  {
    path: '/users/update',
    permissions: [PERMISSIONS.USERS.UPDATE],
  },
  {
    path: '/users/detail',
    permissions: [PERMISSIONS.USERS.READ_DETAIL],
  },
  {
    path: '/roles',
    permissions: [PERMISSIONS.ROLES.READ_LIST],
  },
  {
    path: '/roles/create',
    permissions: [PERMISSIONS.ROLES.CREATE],
  },
  {
    path: '/roles/update',
    permissions: [PERMISSIONS.ROLES.UPDATE],
  },
  {
    path: '/roles/detail',
    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
  },
  {
    path: '/permissions',
    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
  },
  {
    path: '/permissions/create',
    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
  },
  {
    path: '/permissions/update',
    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
  },
  {
    path: '/permissions/detail',
    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
  },
 ];
 //TODO : Fix this later
 // const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
 //   const fallback = mappingRoutePermissions.find((route) =>
 //     route.permissions.some((perm) => userPermissions.includes(perm))
 //   );
 //   return redirect(fallback?.path ?? '/auth/login');
 // };
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const pathname = url.pathname;
  const session = SessionUser.get();
  const session_token = SessionToken.get();
  const token = session_token?.token?.access_token;
  const userPermissions =
    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-  if (pathname) return null;
+  if (mappingPublicRoutes.includes(pathname)) {
    if (token) return redirect('/dashboard');
    return null;
  }
  if (!session) return redirect('/auth/login');
  const matchedRoute = mappingRoutePermissions.find(
    (route) => route.path === pathname
  );
  if (matchedRoute) {
    const hasPermission =
      !matchedRoute.permissions ||
      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
    if (!hasPermission) {
      return '/dashboard';
    }
  }
  return null;
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
arraysid	29937c9296	fix: remove unused icon export from index for cleaner module structure	2025-06-01 11:27:21 +07:00
arraysid	dd11bed598	fix: replace XIcon with LuX in DialogClose for consistency	2025-06-01 11:25:12 +07:00
arraysid	09a11b4aec	fix: remove unused icon exports from icons	2025-06-01 11:25:06 +07:00
arraysid	16628168ce	fix: remove DrawerDescription from RequestFeaturePopup for cleaner UI	2025-06-01 11:20:40 +07:00
arraysid	be5e8d4b39	fix: remove DialogDescription from RequestFeaturePopup and update textarea placeholder for clarity	2025-06-01 11:09:52 +07:00
arraysid	ca8d2d702f	fix: update FeatureRequestCTA text for clarity and adjust page layout margins	2025-06-01 11:09:02 +07:00
arraysid	ddca7a5ccf	fix: replace motion span with static span for header underline	2025-06-01 08:49:07 +07:00
arraysid	e871d453a8	refactor: simplify Header component by removing unused scroll handling and improving mobile menu structure	2025-06-01 08:42:59 +07:00
arraysid	07e5bab31f	feat: enhance Header component with mobile menu animations and improved navigation styling	2025-06-01 07:36:40 +07:00
arraysid	98c3c2a326	feat: add Request Feature popup with responsive dialog and drawer components	2025-06-01 07:18:33 +07:00
arraysid	69c934e8c4	fix: correct spelling of 'Certificate' in ProjectsVote component	2025-06-01 05:01:08 +07:00
arraysid	522f283140	feat: add feature request and projects voting components	2025-06-01 04:53:46 +07:00
arraysid	c04ca8a29d	fix: correct link for Roadmap navigation item	2025-06-01 04:53:35 +07:00
Rasyid	791f43986d	feat: landing auth integration & landing ui improvements (#33 ) * feat: setup openapi libs for landing * feat: seperate landing layouts * feat: movee landing providers * feat: add auth layout * feat: implement cookie management for access and refresh tokens * feat: replace Inter font with Bai Jamjuree in layout and add font utility * feat: add signin * feat: add Poppins font to the font utility * feat: expand theme colors in index.css for improved styling options * feat: update dependencies and enhance button and form components with new variants and context * feat: move old components to __old__ dir * feat: add react query support * feat: hide the footer * fix: header style * feat: replace Image component with LogoSimple in Header and update Logo component to accept props * fix: update label for tutorial stat in hero-stats.json * feat: implement EventsPage component with event listing and details * feat: add signup button and page * feat: add HERO_CONTENT data and integrate into Hero component * fix: update navigations import to uppercase and add missing Testimoni entry * feat: implement testimonials display and add submission page * fix: correct link path for testimonial submission * feat: add communites component and integrate social links from JSON data * fix: adjust grid gap in Communities component for better layout * fix: update font imports in layout components for consistency * fix: replace text logo with LogoSimple component in Footer and restore Footer in Layout * feat: add TestimonialSection component and update testimonials data * fix: update section ID from 'komunitas' to 'community' for consistency * feat: add CTASection component with interactive elements and background pattern * fix: update join URL in hero content for consistency * fix: update text in CTASection for improved emphasis and consistency * feat: add CommunitySection component and integrate it into the main page * feat: update Footer component to use dynamic navigation and social links * feat: implement HeroSection component with dynamic content and animations * refactor: replace hardcoded testimonials with dynamic data from JSON * feat: add signup page * feat: integrate Turnstile captcha verification in signup process * feat: implement verification page * feat: add signin link to the signup page * feat: add "Forgot Password?" link to the signin form * refactor: clean up unused ThemeProvider code and CSS variables * feat: add base styles for borders and background to improve UI consistency * feat: implement forgot password functionality with validation and UI components * fix: update password validation rules for clarity and consistency * feat: enable rich colors for Toaster component in layout * feat: implement reset password functionality with validation and UI components * feat: implement Turnstile captcha verification for forgot password and signup actions * refactor: remove console log and enhance error handling in signin and resend OTP actions * feat: add navigation entries for Roadmap and Artikel sections * feat: create initial Page component for articles section * feat: update footer component with additional social media links and icons * feat: remove all unused components in landing * chore: add @radix-ui/react-label deps * feat: wrap VerificationTabs in Suspense * feat: update .env.example to include TURNSTILE_SECRET_KEY and correct NEXT_PUBLIC_TURNSTILE_SITEKEY	2025-05-30 11:57:17 +07:00
Hafid Nur	9f25941a4a	feat: gacha auth integration (#32 ) * feat(gacha): register and login integration * fix: navbar and gacha landing page - display fullname when user authenticated - fix styling and responsive * fix: minor fix UI	2025-05-27 01:41:13 +07:00
Naufal Azmi	aaf5b4262d	Register and OTP (#31 ) * feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading * feat: register and otp integration * Update middleware.ts	2025-05-26 20:49:57 +07:00
Naufal Azmi	0f46244d2b	Fix conflict and add disabled button when invalid input (#30 ) * feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading	2025-05-26 17:07:51 +07:00
Rasyid	dd03b3da85	chore: remove cms and fix some styles (#29 ) * chore: remove all references to PayloadCMS * fix: nextjs landing utils * feat: refactor community, features, hero, learning resources, and testimonials components to use external JSON data * fix:remove hero logo box * fix: remove unused image in public * fix: change logo.png to logo.webp * fix: update button styles for improved visibility * chore: restructure component organization * fix: update import path for global styles in layout component * fix: adjust alignment of hero stats section for better layout * fix: update testimonials placeholder sample data * fix: update header component to use router for navigation and add signin page	2025-05-25 15:13:44 +07:00
Maulana Sodiqin	9a0fee65a5	fixing so much trouble	2025-05-23 00:28:29 +07:00
Maulana Sodiqin	376e646c10	feat: add vercel json	2025-05-22 22:31:04 +07:00
Maulana Sodiqin	f8cd57a1cf	chore: update readme and env example	2025-05-20 11:09:14 +07:00
Rasyid	5618a8e99b	fix: hero section responsiveness (#28 ) * fix: hero section responsiveness * fix: adjust max-width for hero section on smaller screens * fix: increase title font size in hero section	2025-05-17 00:58:23 +07:00
Rasyid Fahim Ardani Maulana Sodiqin	598bd22b5a	feat: make content data dynamic from cms and fix button and badge ui (#27 ) * feat: integrate payload cms to landing page * feat: add payload configuration and update TypeScript target * fix: update TypeScript paths for payload configuration * refactor: update config import paths to use local payload.config * fix: update quotation marks for testimonials to use HTML entities * fix: include withPayload in Next.js plugins for proper configuration * feat: implement HeroSection global configuration and integrate with Hero component * feat: add FeaturesSection global configuration and integrate with Features component * feat: add revalidate constant to control page revalidation interval * refactor: optimize data fetching by using Promise.all * fix: update revalidation interval to 10 seconds * feat: add CommunitiesSection configuration and integrate with Community component * refactor: move global section functions to services directory * feat: add support for s3 bucket for media * feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration * feat: replace Link component with Button for improved button styling in Community component * feat: update FeaturesSection to use Iconify icons and adjust icon properties * feat: add heroImage field to HeroSection and implement image formatting utility * feat: add Learning Resources section with dynamic data fetching and UI integration * feat: enhance LearningResourcesSection with primary and secondary button links * refactor: reorganize layout structure by moving Header and Footer components to RootLayout * feat: implement Testimonials section with dynamic data fetching and UI integration * feat: simplify joinTitle rendering in Testimonials section * feat: implement CallToAction section with dynamic data fetching and UI integration * feat: update CallToActionSection label and wrap Discord button in link * feat: update button components to use onClick for external links and improve styling * feat: wrap logo image in a link to navigate to the homepage * fix: supress scss deps warning * fix: add placeholder to .env.example * chore: add environment placeholder variables for CMS configuration in test build workflow * fix: remove unused environment variables from test build workflow * fix: text color (#26) * chore: update action * feat: integrate payload cms to landing page * feat: add payload configuration and update TypeScript target * fix: update TypeScript paths for payload configuration * refactor: update config import paths to use local payload.config * fix: include withPayload in Next.js plugins for proper configuration * feat: implement HeroSection global configuration and integrate with Hero component * feat: add FeaturesSection global configuration and integrate with Features component * feat: add revalidate constant to control page revalidation interval * refactor: optimize data fetching by using Promise.all * fix: update revalidation interval to 10 seconds * feat: add CommunitiesSection configuration and integrate with Community component * refactor: move global section functions to services directory * feat: add support for s3 bucket for media * feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration * feat: replace Link component with Button for improved button styling in Community component * feat: update FeaturesSection to use Iconify icons and adjust icon properties * feat: add heroImage field to HeroSection and implement image formatting utility * feat: add Learning Resources section with dynamic data fetching and UI integration * feat: enhance LearningResourcesSection with primary and secondary button links * refactor: reorganize layout structure by moving Header and Footer components to RootLayout * feat: implement Testimonials section with dynamic data fetching and UI integration * feat: simplify joinTitle rendering in Testimonials section * feat: implement CallToAction section with dynamic data fetching and UI integration * feat: update CallToActionSection label and wrap Discord button in link * feat: update button components to use onClick for external links and improve styling * feat: wrap logo image in a link to navigate to the homepage * fix: supress scss deps warning * fix: add placeholder to .env.example * chore: add environment placeholder variables for CMS configuration in test build workflow * fix: remove unused environment variables from test build workflow * fix: remove mistakenly added env from test-build workflow --------- Co-authored-by: Fahim Ardani <fahimardani25@gmail.com> Co-authored-by: Maulana Sodiqin <53475078+maulanasdqn@users.noreply.github.com>	2025-05-11 21:55:20 +07:00