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
219 changed files with 8957 additions and 9122 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>.
-2. **Backoffice** - Application for internal management.
-3. **Dimentorin** - Application for mentoring services.
+1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
+2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
+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) => {
-    postLogin.mutate(data, {
-      onSuccess: () => toast.success("Login sukses"),
-      onError: (error) => toast.error(error.message),
-    });
-  });
+  const { signIn } = useSession();
+
+  const onSubmit = form.handleSubmit((data) => signIn(data));

  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) => {
-    postLogin.mutate(data, {
-      onSuccess: () => toast.success("Login sukses"),
-      onError: (error) => toast.error(error.message),
-    });
-  });
+  const { signIn, isLoading } = useSession();
+
+  const onSubmit = form.handleSubmit((data) => signIn(data));

  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 { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+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="w-[704px]">
+        <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>
            <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">
-              <InputField
-                label="First Name"
-                size="lg"
-                placeholder="Nama Depan"
-              />
-              <InputField
-                label="Last Name"
-                size="lg"
-                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>
+            <form onSubmit={onSubmit}>
+              <div className='my-7'>
+                <ControlledInputField
+                  label="Full name"
+                  size="lg"
+                  className="w-full"
+                  placeholder="Nama Lengkap"
+                  name={'fullname'}
+                  control={form.control}
+                />
              </div>
-            </div>
-            <InputField
-              label="Password"
-              className="w-full"
-              size="lg"
-              type="password"
-              placeholder="Buat password sekeren jurus ultimate-mu!"
-            />
-            <h6 className="text-sm text-gray-500 mt-1">
-              "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
-            </h6>
-            <h6 className="text-sm text-gray-500 mt-2">
-              Tips membuat password yang OP:
-            </h6>
-            <h6 className="text-sm text-gray-500">
-              - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
-              <span role="img" aria-label="emoji">
-                ⚡
-              </span>
-              )
-            </h6>
-            <h6 className="text-sm text-gray-500">
-              - 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>
-            <InputField
-              label="Repeat Password"
-              className="w-full"
-              size="lg"
-              type="password"
-              placeholder="Ulangi password-mu, Senpai~!"
-            />
-            <Button className="w-full mt-2">Linked Start !!!</Button>
+              <div className="grid grid-flow-row-dense my-7 lg:grid-cols-2 gap-2">
+                <ControlledInputField
+                  label="Email"
+                  size="lg"
+                  className="w-full"
+                  placeholder="Contoh : yourname@mail.com"
+                  type='email'
+                  control={form.control}
+                  name={'email'}
+                />
+                <ControlledInputField
+                  label="No Hp"
+                  size="lg"
+                  className="w-full"
+                  placeholder="Contoh : 088877665544"
+                  control={form.control}
+                  name={'phone_number'}
+                />  
+              </div>
+              <ControlledInputField
+                label="Password"
+                className="w-full"
+                size="lg"
+                type="password"
+                placeholder="Buat password sekeren jurus ultimate-mu!"
+                control={form.control}
+                name={'password'}             
+              />
+              <h6 className="text-sm text-gray-500 mt-1">
+                "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
+              </h6>
+              <h6 className="text-sm text-gray-500 mt-2">
+                Tips membuat password yang OP:
+              </h6>
+              <h6 className="text-sm text-gray-500">
+                - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
+                <span role="img" aria-label="emoji">
+                  ⚡
+                </span>
+                )
+              </h6>
+              <h6 className="text-sm text-gray-500">
+                - 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="w-[704px] flex flex-col justify-center items-center">
+        <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 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">
-              Masuk Isekai
-              <ArrowRightOutlined />
-            </Button>
+            <a href="/auth/login">
+              <Button className="gap-3 mt-10" size="lg">
+                Masuk Isekai
+                <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