feat: simplify joinTitle rendering in Testimonials section

.env.example

@@ -0,0 +1,9 @@
+VITE_API_URL=
+
+CMS_SECRET=
+CMS_POSTGRES_URL=
+
+CMS_STORAGE_ENDPOINT=
+CMS_STORAGE_ACCESS_KEY_ID=
+CMS_STORAGE_SECRET_ACCESS_KEY=
+CMS_STORAGE_REGION=ap-southeast-1

README.md

@@ -6,10 +6,9 @@
 
 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 <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>.
+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.
 
 ## How to install
 
@@ -25,15 +24,6 @@ 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:
@@ -50,10 +40,6 @@ Use the following commands to run in development mode:
   ```sh
   npm run dimentorin:dev
   ```
-- **Landing Page**:
-  ```sh
-  npm run landing:dev
-  ```
 
 ### Build
 
@@ -71,10 +57,6 @@ Use the following commands to build the applications:
   ```sh
   npm run dimentorin:build
   ```
-- **Landing Page**:
-  ```sh
-  npm run landing:build
-  ```
 
 ### Production
 
@@ -92,22 +74,19 @@ 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**
 

apps/backoffice/.env.example

@@ -1 +0,0 @@
-VITE_API_URL=

apps/backoffice/src/app/_hooks/use-login.ts

@@ -2,19 +2,24 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
+  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useSession } from '@imphnen-frontend-service/utils';
+import { toast } from 'sonner';
 
 export const useLogin = () => {
+  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const { signIn } = useSession();
-
-  const onSubmit = form.handleSubmit((data) => signIn(data));
+  const onSubmit = form.handleSubmit((data) => {
+    postLogin.mutate(data, {
+      onSuccess: () => toast.success("Login sukses"),
+      onError: (error) => toast.error(error.message),
+    });
+  });
 
   return {
     form,

apps/backoffice/src/app/accounts/page.tsx

@@ -18,7 +18,7 @@ import {
   RowSelectionState,
 } from '@tanstack/react-table';
 import ModalEditAccount from './_components/modal-edit-account';
-import { useQueryState } from '@imphnen-frontend-service/utils';
+import { useQueryState } from '../../hook/use-query-state';
 
 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)} options={[]} />
+                  <Filter onClose={() => setShowFilter(false)} />
                 </div>
               )}
             </div>

apps/backoffice/src/app/dashboard/layout.tsx

@@ -0,0 +1,18 @@
+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;

apps/backoffice/src/app/dashboard/page.tsx

@@ -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 '@imphnen-frontend-service/utils';
+import { useQueryState } from '../../hook/use-query-state';
 
 export const Components: FC = (): ReactElement => {
   const [showModalAddItem, setShowModalAddItem] = useState(false);

apps/backoffice/src/app/gacha-roll/layout.tsx

@@ -0,0 +1,18 @@
+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;

apps/backoffice/src/app/page.tsx

@@ -32,16 +32,7 @@ export const Components: FC = (): ReactElement => {
             size="lg"
             className="w-full"
           />
-          <Button
-            disabled={
-              form.formState.isSubmitting ||
-              form.formState.isValidating ||
-              !form.formState.isValid
-            }
-            type="submit"
-            size="md"
-            className="w-full"
-          >
+          <Button type="submit" size="md" className="w-full">
             Login
           </Button>
         </form>

apps/backoffice/src/app/permissions/layout.tsx

@@ -0,0 +1,18 @@
+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;

apps/backoffice/src/app/prizes/layout.tsx

@@ -0,0 +1,18 @@
+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;

apps/backoffice/src/app/roles/layout.tsx

@@ -0,0 +1,18 @@
+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;

apps/backoffice/src/app/transactions/layout.tsx

@@ -0,0 +1,18 @@
+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;

apps/backoffice/src/middleware.ts

@@ -1,108 +1,11 @@
-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');
-// };
+import { LoaderFunctionArgs } from 'react-router-dom';
 
 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 (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';
-    }
-  }
+  if (pathname) return null;
 
   return null;
 };

apps/dimentorin/.env.example

@@ -1 +0,0 @@
-VITE_API_URL=

apps/dimentorin/src/app/_hooks/use-login.ts

@@ -2,19 +2,24 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
+  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useSession } from '@imphnen-frontend-service/utils';
+import { toast } from 'sonner';
 
 export const useLogin = () => {
+  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const { signIn } = useSession();
-
-  const onSubmit = form.handleSubmit((data) => signIn(data));
+  const onSubmit = form.handleSubmit((data) => {
+    postLogin.mutate(data, {
+      onSuccess: () => toast.success("Login sukses"),
+      onError: (error) => toast.error(error.message),
+    });
+  });
 
   return {
     form,

apps/dimentorin/src/middleware.ts

@@ -1,109 +1,11 @@
-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');
-// };
+import { LoaderFunctionArgs } from 'react-router-dom';
 
 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 (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';
-    }
-  }
+  if (pathname) return null;
 
   return null;
 };

apps/gacha/.env.example

@@ -1 +0,0 @@
-VITE_API_URL=

apps/gacha/src/app/_hooks/use-login.ts

@@ -2,19 +2,22 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
+  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
+  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const { signIn } = useSession();
-
-  const onSubmit = form.handleSubmit((data) => signIn(data));
+  const onSubmit = form.handleSubmit((data) => {
+    postLogin.mutate(data, {
+      onSuccess: () => console.log('Success Login'),
+    });
+  });
 
   return {
     form,

apps/gacha/src/app/_hooks/use-register.ts

@@ -1,11 +1,14 @@
 import { useForm } from 'react-hook-form';
 import {
   authRegisterSchema,
+  stepOneRegisterSchema,
   TRegisterRequest,
   usePostRegister,
 } from '@imphnen-frontend-service/service';
+import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
+import { useEffect, useState } from 'react';
 
 export const useRegister = () => {
   const postRegister = usePostRegister();
@@ -18,12 +21,31 @@ export const useRegister = () => {
       password: '',
       confirm_password: '',
       phone_number: '',
+      referral_code: '',
+      referred_by: '',
+      student_type: '',
     },
   });
 
+  const [stepValid, setStepValid] = useState(false);
+
+  useEffect(() => {
+    const subscription = form.watch(() => {
+      const { fullname, email, password, confirm_password } = form.getValues();
+      const valid = stepOneRegisterSchema.safeParse({
+        fullname,
+        email,
+        password,
+        confirm_password,
+      }).success;
+      setStepValid(valid);
+    });
+    return () => subscription.unsubscribe();
+  }, [form]);
+
   const onSubmit = form.handleSubmit((data) => {
     postRegister.mutate(data, {
-      onSuccess: () => toast.success('Registrasi sukses'),
+      onSuccess: (data) => toast.success(data.message),
       onError: (error) => toast.error(error.message),
     });
   });
@@ -31,5 +53,6 @@ export const useRegister = () => {
   return {
     form,
     onSubmit,
+    isStepOneValid: stepValid,
   };
 };

apps/gacha/src/middleware.ts

@@ -1,109 +1,11 @@
-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');
-// };
+import { LoaderFunctionArgs } from 'react-router-dom';
 
 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 (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';
-    }
-  }
+  if (pathname) return null;
 
   return null;
 };

apps/landing/.env.example

@@ -1,6 +0,0 @@
-CMS_SECRET=your-very-long-secret-key
-CMS_POSTGRES_URL=postgres://user:password@host:port/database
-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

apps/landing/next.config.js

@@ -1,15 +1,20 @@
+//@ts-check
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { composePlugins, withNx } = require('@nx/next');
 const { withPayload } = require('@payloadcms/next/withPayload');
 
-/** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
 const nextConfig = {
-  nx: { svgr: false },
-  sassOptions: {
-    quietDeps: true,
-    logger: {
-      warn: () => {},
-    },
+  nx: {
+    // Set this to true if you would like to to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: false,
   },
 };
 
-module.exports = composePlugins(withNx, withPayload)(nextConfig);
+const plugins = [withNx, withPayload];
+
+module.exports = composePlugins(...plugins)(nextConfig);

apps/landing/src/app/(frontend)/_components/call-to-action.tsx

@@ -1,21 +1,10 @@
 'use client';
 
 import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
-import { CallToActionSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-export function CallToAction(props: CallToActionSection) {
-  const {
-    title,
-    highlightedTitle,
-    subtitle,
-    primaryButtonLabel,
-    primaryButtonLink,
-    secondaryButtonLabel,
-    secondaryButtonLink,
-  } = props;
-
+export function CallToAction() {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -39,30 +28,30 @@ export function CallToAction(props: CallToActionSection) {
 
             <div className="relative z-10 text-center">
               <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
-                {title}{' '}
+                Siap Menjadi{' '}
                 <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-                  {highlightedTitle}
+                  Programmer Handal?
                 </span>
               </h2>
               <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-                {subtitle}
+                Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
+                perjalanan programming mu dengan cara yang menyenangkan!
               </p>
 
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <Button
                   size="lg"
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
-                  onClick={() => window.open(primaryButtonLink, '_blank')}
+                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 
+font-bold text-black hover:text-white cursor-pointer"
                 >
-                  {primaryButtonLabel}
+                  Gabung Discord
                 </Button>
                 <Button
                   size="lg"
                   variant="outline"
                   className="border-primary hover:bg-primary/10"
-                  onClick={() => window.open(secondaryButtonLink, '_blank')}
                 >
-                  {secondaryButtonLabel}
+                  Join Facebook Group
                 </Button>
               </div>
             </div>

apps/landing/src/app/(frontend)/_components/community.tsx

@@ -77,13 +77,14 @@ export function Community(props: CommunitiesSection) {
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{c.title}</h3>
                 <p className="mb-6 text-muted-foreground">{c.description}</p>
-                <Button
-                  variant="outline"
-                  className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
-                  onClick={() => window.open(c.buttonLink, '_blank')}
-                >
-                  {c.buttonText}
-                </Button>
+                <a href={c.buttonLink} target="_blank">
+                  <Button
+                    variant="outline"
+                    className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
+                  >
+                    {c.buttonText}
+                  </Button>
+                </a>
               </div>
               <div className="absolute -bottom-1 -right-1 w-20 h-20 bg-gradient-to-tl from-primary/20 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
             </motion.div>

apps/landing/src/app/(frontend)/_components/header.tsx

@@ -35,15 +35,13 @@ export function Header() {
       <div className="container flex h-16 items-center justify-between">
         <div className="flex items-center gap-2">
           <div className="relative overflow-hidden rounded">
-            <Link href="/">
-              <Image
-                src="/logo.png"
-                alt="IMPHNEN"
-                width={64}
-                height={64}
-                className="object-cover"
-              />
-            </Link>
+            <Image
+              src="/logo.png"
+              alt="IMPHNEN Logo"
+              width={64}
+              height={64}
+              className="object-cover cursor-pointer"
+            />
           </div>
         </div>
 
@@ -84,13 +82,7 @@ export function Header() {
 
         <div className="flex items-center gap-4">
           <SimpleThemeToggle />
-
-          <Button
-            className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
-            onClick={() =>
-              window.open('https://discord.com/invite/imphnen', '_blank')
-            }
-          >
+          <Button className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer">
             Gabung Discord
           </Button>
 

apps/landing/src/app/(frontend)/_components/hero.tsx

@@ -69,7 +69,7 @@ export function Hero(props: HeroSection) {
             </div>
 
             <div className="space-y-4">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
                 {title} <br />
                 <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
                   {highlight}
@@ -80,26 +80,29 @@ export function Hero(props: HeroSection) {
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
-              <Button
-                size="lg"
-                className="w-full sm:w-auto bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
-                onClick={() => window.open(buttons.primaryUrl, '_blank')}
-              >
-                {buttons.primaryLabel}
-              </Button>
-              <Button
-                size="lg"
-                variant="outline"
-                className="w-full sm:w-auto group relative overflow-hidden border-primary"
-                onClick={() => window.open(buttons.secondaryUrl, '_blank')}
-              >
-                <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
-                <span className="relative">{buttons.secondaryLabel}</span>
-              </Button>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <a href={buttons.primaryUrl} target="_blank">
+                <Button
+                  size="lg"
+                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 
+font-bold text-black hover:text-white cursor-pointer"
+                >
+                  {buttons.primaryLabel}
+                </Button>
+              </a>
+              <a href={buttons.secondaryUrl} target="_blank">
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="group relative overflow-hidden border-primary"
+                >
+                  <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                  <span className="relative">{buttons.secondaryLabel}</span>
+                </Button>
+              </a>
             </div>
 
-            <div className="flex flex-wrap justify-center gap-6 sm:gap-8">
+            <div className="flex items-center gap-8">
               {stats?.map(({ value, label }, i) => (
                 <Fragment key={i}>
                   <div className="flex flex-col items-center">
@@ -109,7 +112,7 @@ export function Hero(props: HeroSection) {
                     <div className="text-xs text-muted-foreground">{label}</div>
                   </div>
                   {i < stats.length - 1 && (
-                    <div className="hidden sm:block h-10 border-r border-border mx-4" />
+                    <div className="h-10 border-r border-border mx-4" />
                   )}
                 </Fragment>
               ))}
@@ -117,7 +120,7 @@ export function Hero(props: HeroSection) {
           </motion.div>
 
           <motion.div
-            className="relative w-full lg:w-auto mx-auto lg:ml-auto"
+            className="relative mx-auto lg:ml-auto"
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.5, delay: 0.2 }}

apps/landing/src/app/(frontend)/_components/learning-resources.tsx

@@ -78,15 +78,15 @@ export function LearningResources(props: LearningResourcesSection) {
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{r.title}</h3>
                 <p className="mb-6 text-muted-foreground">{r.description}</p>
-
-                <Button
-                  variant="link"
-                  className="p-0 h-auto font-medium text-primary hover:text-primary/80"
-                  onClick={() => window.open(r.buttonLink, '_blank')}
-                >
-                  {r.buttonText}
-                  <Icon icon="tabler:arrow-right" className="h-6 w-6" />
-                </Button>
+                <a href={r.buttonLink} target="_blank">
+                  <Button
+                    variant="link"
+                    className="p-0 h-auto font-medium text-primary hover:text-primary/80"
+                  >
+                    {r.buttonText}
+                    <Icon icon="tabler:arrow-right" className="h-6 w-6" />
+                  </Button>
+                </a>
               </div>
               <div className="absolute -bottom-32 -right-32 w-64 h-64 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-10 group-hover:-translate-x-10" />
             </motion.div>
@@ -110,22 +110,16 @@ export function LearningResources(props: LearningResourcesSection) {
                 {featured.description}
               </p>
               <div className="flex flex-wrap gap-4">
-                <Button
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
-                  onClick={() =>
-                    window.open(featured.primaryButtonLink, '_blank')
-                  }
-                >
-                  {featured.primaryButtonText}
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={() =>
-                    window.open(featured.secondaryButtonLink, '_blank')
-                  }
-                >
-                  {featured.secondaryButtonText}
-                </Button>
+                <a href={featured.primaryButtonLink} target="_blank">
+                  <Button className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer">
+                    {featured.primaryButtonText}
+                  </Button>
+                </a>
+                <a href={featured.secondaryButtonLink} target="_blank">
+                  <Button variant="outline">
+                    {featured.secondaryButtonText}
+                  </Button>
+                </a>
               </div>
             </div>
             <div className="relative h-64 md:h-auto">

apps/landing/src/app/(frontend)/page.tsx

@@ -1,4 +1,3 @@
-import { getGlobalsCallToActionSection } from '../../services/get-globals-call-to-action-section';
 import { getGlobalsCommunitiesSection } from '../../services/get-globals-communitues-section';
 import { getGlobalsFeaturesSection } from '../../services/get-globals-features-section';
 import { getGlobalsHeroSection } from '../../services/get-globals-hero-section';
@@ -20,14 +19,12 @@ export default async function Page() {
     communitiesData,
     learningResourcesData,
     testimonialsData,
-    callToActionData,
   ] = await Promise.all([
     getGlobalsHeroSection(),
     getGlobalsFeaturesSection(),
     getGlobalsCommunitiesSection(),
     getGlobalsLearningResourcesSection(),
     getGlobalsTestimonialsSection(),
-    getGlobalsCallToActionSection(),
   ]);
 
   return (
@@ -37,7 +34,7 @@ export default async function Page() {
       <Community {...communitiesData} />
       <LearningResources {...learningResourcesData} />
       <Testimonials {...testimonialsData} />
-      <CallToAction {...callToActionData} />
+      <CallToAction />
     </>
   );
 }

apps/landing/src/collections/CallToActionSection.ts

@@ -1,51 +0,0 @@
-import { GlobalConfig } from 'payload';
-
-export const CallToActionSection: GlobalConfig = {
-  slug: 'call-to-action-section',
-  label: 'Call To Action Section',
-  fields: [
-    {
-      name: 'title',
-      type: 'text',
-      required: true,
-      defaultValue: 'Siap Menjadi',
-    },
-    {
-      name: 'highlightedTitle',
-      type: 'text',
-      required: true,
-      defaultValue: 'Programmer Handal?',
-    },
-    {
-      name: 'subtitle',
-      type: 'textarea',
-      required: true,
-      defaultValue:
-        'Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai perjalanan programming mu dengan cara yang menyenangkan!',
-    },
-    {
-      name: 'primaryButtonLabel',
-      type: 'text',
-      required: true,
-      defaultValue: 'Gabung Discord',
-    },
-    {
-      name: 'primaryButtonLink',
-      type: 'text',
-      required: true,
-      defaultValue: 'https://discord.gg/imphnen',
-    },
-    {
-      name: 'secondaryButtonLabel',
-      type: 'text',
-      required: true,
-      defaultValue: 'Join Facebook Group',
-    },
-    {
-      name: 'secondaryButtonLink',
-      type: 'text',
-      required: true,
-      defaultValue: 'https://facebook.com/groups/programmerhandal',
-    },
-  ],
-};

apps/landing/src/collections/CommunitiesSection.ts

@@ -15,7 +15,7 @@ export const CommunitiesSection: GlobalConfig = {
           description:
             'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
           buttonText: 'Gabung Sekarang',
-          buttonLink: 'https://facebook.com/groups/programmerhandal',
+          buttonLink: 'https://facebook.com/groups/1032515944638255',
         },
         {
           iconName: 'tabler:brand-instagram',

apps/landing/src/collections/HeroSection.ts

@@ -57,7 +57,7 @@ export const HeroSection: GlobalConfig = {
           label: 'Primary Button URL',
           type: 'text',
           required: true,
-          defaultValue: 'https://facebook.com/groups/programmerhandal',
+          defaultValue: 'https://web.facebook.com/groups/1032515944638255',
         },
         {
           name: 'secondaryLabel',

apps/landing/src/payload-types.ts

@@ -90,7 +90,6 @@ export interface Config {
     'communities-section': CommunitiesSection;
     'learning-resources-section': LearningResourcesSection;
     'testimonials-section': TestimonialsSection;
-    'call-to-action-section': CallToActionSection;
   };
   globalsSelect: {
     'hero-section': HeroSectionSelect<false> | HeroSectionSelect<true>;
@@ -98,7 +97,6 @@ export interface Config {
     'communities-section': CommunitiesSectionSelect<false> | CommunitiesSectionSelect<true>;
     'learning-resources-section': LearningResourcesSectionSelect<false> | LearningResourcesSectionSelect<true>;
     'testimonials-section': TestimonialsSectionSelect<false> | TestimonialsSectionSelect<true>;
-    'call-to-action-section': CallToActionSectionSelect<false> | CallToActionSectionSelect<true>;
   };
   locale: null;
   user: User & {
@@ -410,22 +408,6 @@ export interface TestimonialsSection {
   updatedAt?: string | null;
   createdAt?: string | null;
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "call-to-action-section".
- */
-export interface CallToActionSection {
-  id: number;
-  title: string;
-  highlightedTitle: string;
-  subtitle: string;
-  primaryButtonLabel: string;
-  primaryButtonLink: string;
-  secondaryButtonLabel: string;
-  secondaryButtonLink: string;
-  updatedAt?: string | null;
-  createdAt?: string | null;
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "hero-section_select".
@@ -561,22 +543,6 @@ export interface TestimonialsSectionSelect<T extends boolean = true> {
   createdAt?: T;
   globalType?: T;
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "call-to-action-section_select".
- */
-export interface CallToActionSectionSelect<T extends boolean = true> {
-  title?: T;
-  highlightedTitle?: T;
-  subtitle?: T;
-  primaryButtonLabel?: T;
-  primaryButtonLink?: T;
-  secondaryButtonLabel?: T;
-  secondaryButtonLink?: T;
-  updatedAt?: T;
-  createdAt?: T;
-  globalType?: T;
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "auth".

apps/landing/src/payload.config.ts

@@ -8,7 +8,6 @@ import { buildConfig } from 'payload';
 import sharp from 'sharp';
 import { fileURLToPath } from 'url';
 
-import { CallToActionSection } from './collections/CallToActionSection';
 import { CommunitiesSection } from './collections/CommunitiesSection';
 import { FeaturesSection } from './collections/FeaturesSection';
 import { HeroSection } from './collections/HeroSection';
@@ -40,7 +39,6 @@ export default buildConfig({
     CommunitiesSection,
     LearningResourcesSection,
     TestimonialsSection,
-    CallToActionSection,
   ],
   editor: lexicalEditor(),
   secret: process.env.CMS_SECRET || '',

apps/landing/src/services/get-globals-call-to-action-section.ts

@@ -1,7 +0,0 @@
-import { payload } from '../lib/payload';
-
-export async function getGlobalsCallToActionSection() {
-  return await payload.findGlobal({
-    slug: 'call-to-action-section',
-  });
-}

libs/service/src/hooks/auth/index.ts

@@ -6,6 +6,7 @@ import {
   TRegisterRequest,
   TVerifyEmailRequest,
 } from '../../types/auth';
+import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
 
 import { TResponseError, TResponseMessage } from '../../types/common';
 
@@ -18,6 +19,11 @@ export const usePostLogin = (): UseMutationResult<
   return useMutation({
     mutationKey: ['post-login'],
     mutationFn: async (payload) => await postLogin(payload),
+    onSuccess: (res) => {
+      SessionUser.set(res.data.user);
+      SessionToken.set(res.data.token);
+      window.location.reload();
+    },
   });
 };
 

libs/service/src/schemas/auth/index.ts

@@ -16,7 +16,7 @@ export const authLoginSchema = z.object({
     .min(1, 'Password tidak boleh kosong'),
 });
 
-export const authRegisterSchema = z
+export const stepOneRegisterSchema = z
   .object({
     email: z
       .string({
@@ -25,12 +25,6 @@ export const authRegisterSchema = z
       })
       .min(1, 'Email tidak boleh kosong')
       .email('Email harus valid'),
-    phone_number: z
-      .string({
-        required_error: 'Nomor telepon tidak boleh kosong',
-      })
-      .min(1, 'Nomor telepon tidak boleh kosong')
-      .max(15, 'Nomor telepon tidak boleh lebih dari 15 digit'),
     fullname: z
       .string({
         required_error: 'Nama tidak boleh kosong',
@@ -57,3 +51,28 @@ export const authRegisterSchema = z
     message: 'Password dan Konfirmasi Password harus sama',
     path: ['confirm_password'],
   });
+
+const stepTwoRegisterSchema = z.object({
+  phone_number: z
+    .string({
+      required_error: 'Nomor telepon tidak boleh kosong',
+      invalid_type_error: 'Nomor telepon harus berupa string',
+    })
+    .min(1, 'Nomor telepon tidak boleh kosong')
+    .max(15, 'Nomor telepon tidak boleh lebih dari 15 karakter'),
+  referral_code: z
+    .string()
+    .min(1, 'Kode referral tidak boleh kosong')
+    .max(4, 'Kode referral tidak boleh lebih dari 4 karakter')
+    .optional(),
+  referred_by: z
+    .string()
+    .min(1, 'Kode referral tidak boleh kosong')
+    .max(50, 'Kode referral tidak boleh lebih dari 50 karakter')
+    .optional(),
+  student_type: z.string(),
+});
+
+export const authRegisterSchema = stepOneRegisterSchema.and(
+  stepTwoRegisterSchema
+);

libs/service/src/types/auth/index.ts

@@ -1,26 +1,29 @@
-import { z } from 'zod';
-import { authLoginSchema, authRegisterSchema } from '../../schemas';
-import { TResponseDetail, TResponseMessage } from '../common';
 import { TUserItem } from '../users';
 
-export type TTokenItem = {
-  access_token: string;
-  refresh_token: string;
+export type TLoginRequest = {
+  email: string;
+  password: string;
 };
 
-export type TLoginItem = {
-  token?: TTokenItem;
-  user?: TUserItem;
+export type TLoginResponse = {
+  data: {
+    token: {
+      access_token: string;
+      refresh_token: string;
+    };
+    user: TUserItem;
+  };
 };
 
-export type TLoginRequest = z.infer<typeof authLoginSchema>;
-export type TLoginResponse = TResponseDetail<TLoginItem>;
-
-export type TRegisterRequest = z.infer<typeof authRegisterSchema>;
-export type TRegisterResponse = TResponseDetail<TResponseMessage>;
-
-export type TVerifyOtpRequest = {
-  otp: number;
+export type TRegisterRequest = {
+  email: string;
+  fullname: string;
+  password: string;
+  phone_number: string;
+  referral_code?: string;
+  referred_by?: string;
+  student_type: string;
+  confirm_password: string;
 };
 
 export type TVerifyEmailRequest = {

libs/service/src/types/common/index.ts

@@ -1,19 +1,7 @@
 import { AxiosError } from 'axios';
 
-export type TMetaResponse = {
-  page: number;
-  per_page: number;
-  total: number;
-};
-
-export type TResponseDetail<T = unknown> = {
+export type TResponse<T = unknown> = {
   data: T;
-  message: string;
-};
-
-export type TResponseList<T = unknown> = {
-  data: T[];
-  meta: TMetaResponse;
 };
 
 export type TResponseMessage = {

libs/service/src/types/roles/index.ts

@@ -1,17 +1,9 @@
 import { TPermissionItem } from '../permissions';
 
-export type TRoleDetailItem = {
+export type TRoleItem = {
   id: string;
   name: string;
+  created_at: string;
+  updated_at: string;
   permissions: TPermissionItem[];
-  created_at: string;
-  updated_at: string;
-};
-
-export type TRolesListItem = {
-  id: string;
-  name: string;
-  permissions_count: number;
-  created_at: string;
-  updated_at: string;
 };

libs/service/src/types/users/index.ts

@@ -1,4 +1,4 @@
-import { TRoleDetailItem } from '../roles';
+import { TRoleItem } from '../roles';
 
 export type TUserItem = {
   id: string;
@@ -7,7 +7,13 @@ export type TUserItem = {
   email: string;
   fullname: string;
   gender: string;
+  identity_number: string;
   is_active: boolean;
+  is_profile_completed: boolean;
   phone_number: string;
-  role: TRoleDetailItem;
+  referral_code: string;
+  referred_by: string;
+  religion: string;
+  student_type: string;
+  role: TRoleItem;
 };

libs/utils/src/constants/index.ts

@@ -1 +0,0 @@
-export * from './permissions';

libs/utils/src/constants/permissions.ts

@@ -1,40 +0,0 @@
-export const PERMISSIONS = {
-  USERS: {
-    READ_LIST: 'Read List Users',
-    READ_DETAIL: 'Read Detail Users',
-    CREATE: 'Create Users',
-    UPDATE: 'Update Users',
-    DELETE: 'Delete Users',
-    ACTIVATE: 'Activate Users',
-  },
-  ROLES: {
-    READ_LIST: 'Read List Roles',
-    READ_DETAIL: 'Read Detail Roles',
-    CREATE: 'Create Roles',
-    UPDATE: 'Update Roles',
-    DELETE: 'Delete Roles',
-  },
-  PERMISSIONS: {
-    READ_LIST: 'Read List Permissions',
-    READ_DETAIL: 'Read Detail Permissions',
-    CREATE: 'Create Permissions',
-    UPDATE: 'Update Permissions',
-    DELETE: 'Delete Permissions',
-  },
-  GACHA_CLAIMS: {
-    CREATE: 'Create Gacha Claims',
-    READ_DETAIL: 'Read Detail Gacha Claims',
-  },
-  GACHA_ITEMS: {
-    READ_LIST: 'Read List Gacha Items',
-    READ_DETAIL: 'Read Detail Gacha Items',
-    CREATE: 'Create Gacha Items',
-    UPDATE: 'Update Gacha Items',
-    DELETE: 'Delete Gacha Items',
-  },
-  GACHA_ROLLS: {
-    READ_DETAIL: 'Read Detail Gacha Rolls',
-    CREATE: 'Create Gacha Rolls',
-    EXECUTE: 'Execute Gacha Rolls',
-  },
-};

libs/utils/src/cookies/index.ts

@@ -1,36 +0,0 @@
-import Cookies from 'js-cookie';
-
-type TTokenItem = {
-  access_token: string;
-  refresh_token: string;
-};
-
-const TOKEN_KEY = 'token';
-
-type TStoredToken =
-  | {
-      token?: TTokenItem;
-    }
-  | undefined;
-
-export const SessionToken = {
-  set: (val: TStoredToken) => {
-    Cookies.set(TOKEN_KEY, JSON.stringify(val), {
-      secure: true,
-      sameSite: 'Strict',
-      expires: 7,
-    });
-  },
-  get: (): TStoredToken => {
-    const token = Cookies.get(TOKEN_KEY);
-    if (!token) return undefined;
-    try {
-      return JSON.parse(token);
-    } catch {
-      return undefined;
-    }
-  },
-  remove: () => {
-    Cookies.remove(TOKEN_KEY);
-  },
-};

libs/utils/src/hooks/index.ts

@@ -1,4 +1,3 @@
 export * from './use-query-state';
-export * from './use-auth-store';
-export * from './use-modal-login';
 export * from './use-session';
+export * from './use-modal-login';

libs/utils/src/hooks/use-auth-store.ts

@@ -1,47 +0,0 @@
-import { create } from 'zustand';
-import { TLoginItem } from '@imphnen-frontend-service/service';
-import { SessionToken } from '../cookies';
-import { SessionUser } from '../local-storage';
-
-export enum ESessionStatus {
-  Authenticated = 'authenticated',
-  Authenticating = 'authenticating',
-  Unauthenticated = 'unauthenticated',
-}
-
-type SessionState = {
-  isLoading: boolean;
-  session?: TLoginItem;
-  status?: ESessionStatus;
-  setLoading: (val: boolean) => void;
-  setSession: (payload: TLoginItem) => void;
-  clearSession: () => void;
-};
-
-export const useAuthStore = create<SessionState>((set) => {
-  const session = SessionToken.get();
-  const user = SessionUser.get();
-  const isAuthenticated = !!session;
-
-  return {
-    isLoading: false,
-    session: isAuthenticated ? { ...session, ...user } : undefined,
-    status: isAuthenticated
-      ? ESessionStatus.Authenticated
-      : ESessionStatus.Unauthenticated,
-    setLoading: (val) => set({ isLoading: val }),
-    setSession: (data) => {
-      SessionToken.set({ token: data.token });
-      SessionUser.set(data.user);
-      set({
-        session: data,
-        status: ESessionStatus.Authenticated,
-      });
-    },
-    clearSession: () => {
-      SessionToken.remove();
-      SessionUser.remove();
-      set({ session: undefined, status: ESessionStatus.Unauthenticated });
-    },
-  };
-});

libs/utils/src/hooks/use-session.ts

@@ -1,37 +1,22 @@
-import { TLoginRequest, usePostLogin } from '@imphnen-frontend-service/service';
-import { useAuthStore } from './';
-import { toast } from 'sonner';
-import { useNavigate } from 'react-router';
+import { SessionToken, SessionUser } from '../local-storage';
 
 export const useSession = () => {
-  const navigate = useNavigate();
-  const { mutate, isPending } = usePostLogin();
-  const { setLoading, setSession, clearSession, session } = useAuthStore();
-  const signIn = (payload: TLoginRequest) => {
-    setLoading(true);
-    mutate(payload, {
-      onSuccess: (data) => {
-        toast.success('Login sukses');
-        setSession(data.data);
-        navigate(0);
-      },
-      onError: (err) => {
-        toast.error(
-          err?.response?.data?.message ??
-            'Terjadi Kesalahan yang tidak diketahui'
-        );
-        clearSession();
-      },
-    });
+  const session = {
+    user: SessionUser.get(),
+    token: SessionToken.get(),
   };
+
+  const isAuthenticated = !!session.token?.access_token;
+
   const signOut = () => {
-    clearSession();
-    navigate(0);
+    SessionUser.remove();
+    SessionToken.remove();
+    window.location.reload();
   };
+
   return {
+    isAuthenticated,
     session,
-    signIn,
     signOut,
-    isLoading: isPending,
   };
 };

libs/utils/src/index.ts

@@ -3,6 +3,3 @@ export * from './react-router';
 export * from './tailwind-merge';
 export * from './hooks';
 export * from './local-storage';
-export * from './cookies';
-export * from './session';
-export * from './constants';

libs/utils/src/local-storage/index.ts

@@ -20,16 +20,41 @@ type TUserItem = {
   email: string;
   fullname: string;
   gender: string;
+  identity_number: string;
   is_active: boolean;
+  is_profile_completed: boolean;
   phone_number: string;
+  referral_code: string;
+  referred_by: string;
+  religion: string;
+  student_type: string;
   role: TRoleItem;
 };
 
 export const SessionUser = {
-  set: (val?: TUserItem) => localStorage.setItem('users', JSON.stringify(val)),
+  set: (val: TUserItem) => localStorage.setItem('users', JSON.stringify(val)),
   get: (): TUserItem | undefined => {
     const users = localStorage.getItem('users');
     return users ? JSON.parse(users) : undefined;
   },
   remove: () => localStorage.removeItem('users'),
 };
+
+export const SessionToken = {
+  set: (val: { access_token: string; refresh_token: string }) => {
+    localStorage.setItem('access_token', val.access_token);
+    localStorage.setItem('refresh_token', val.refresh_token);
+  },
+  get: ():
+    | { access_token?: string | null; refresh_token?: string | null }
+    | undefined => {
+    return {
+      access_token: localStorage.getItem('access_token'),
+      refresh_token: localStorage.getItem('refresh_token'),
+    };
+  },
+  remove: () => {
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+  },
+};

libs/utils/src/react-router/file-based-routing.tsx

@@ -1,22 +1,15 @@
-import { lazy, LazyExoticComponent, ReactNode } from 'react';
+import { lazy, LazyExoticComponent, ReactElement } from 'react';
 import { ActionFunction, LoaderFunction, RouteObject } from 'react-router';
 
-type TPermissionItem = {
-  id: string;
-  name: string;
-  created_at: string;
-  updated_at: string;
-};
-
 interface PageModuleExports {
-  default: () => ReactNode;
+  default: () => ReactElement;
   loader?: LoaderFunction;
   action?: ActionFunction;
   permissions?: Array<string>;
 }
 
 interface LoadingModuleExports {
-  default: () => ReactNode;
+  default: () => ReactElement;
 }
 
 interface RouteHandle {
@@ -45,6 +38,7 @@ export function convertPagesToRoute(
       filePath,
       loadingFiles
     );
+
     const route = createRoute({
       PageComponent: page,
       LoadingComponent: loadingComponent,
@@ -57,20 +51,6 @@ export function convertPagesToRoute(
         const result = (await importer()) as PageModuleExports;
         return 'loader' in result ? result.loader?.(args) : null;
       },
-      async guard() {
-        const result = (await importer()) as PageModuleExports;
-        const localStoragePermission = localStorage.getItem('permissions');
-        const permissions: TPermissionItem[] | undefined =
-          localStoragePermission
-            ? JSON.parse(localStoragePermission)
-            : undefined;
-        return 'permissions' in result
-          ? result.permissions?.every(
-              (permission) =>
-                permissions?.some((item) => permission === item.name) || false
-            ) || false
-          : true;
-      },
     });
     routes = mergeRoutes(routes, route);
   });
@@ -82,14 +62,19 @@ function findMatchingLoadingComponent(
   loadingFiles: Record<string, () => Promise<unknown>>
 ) {
   const loadingPath = filePath.replace(/(page|layout)\.tsx$/, 'loading.tsx');
+
   const groupMatch = filePath.match(/\([^/]+\//);
   const groupLoadingPath = groupMatch ? `/${groupMatch[0]}loading.tsx` : null;
+
   const globalLoadingPath = './app/loading.tsx';
+
   const loader =
     loadingFiles[loadingPath] ||
     (groupLoadingPath && loadingFiles[groupLoadingPath]) ||
     loadingFiles[globalLoadingPath];
+
   if (!loader) return undefined;
+
   return lazy(loader as () => Promise<LoadingModuleExports>);
 }
 
@@ -101,110 +86,68 @@ function mergeRoutes(
     throw new Error(
       `Paths do not match: "${target.path}" and "${source.path}"`
     );
-  target.children = target.children || [];
-  if (source.handle?.pageType === 'layout') {
-    return handleLayoutMerge(target, source);
-  }
-  if (source.handle?.pageType === 'page') {
-    return handlePageMerge(target, source);
-  }
-  if (source.children && source.children.length > 0) {
-    if (target.handle?.pageType === 'page') {
-      if (!target.children?.some((child) => child.index)) {
-        target.children = target.children || [];
-        target.children.unshift({
-          index: true,
-          element: target.element,
-          HydrateFallback: target.HydrateFallback,
-          action: target.action,
-          loader: target.loader,
-          handle: target.handle,
-          errorElement: target.errorElement,
-        });
-      }
-      delete target.element;
-      delete target.action;
-      delete target.loader;
-      delete target.handle;
-    }
-    mergeChildRoutes(target, source);
-  }
-  return target;
-}
 
-export function mergeChildRoutes(
-  target: ExtendedRouteObject,
-  source: ExtendedRouteObject
-): void {
-  if (!source.children) return;
   if (!target.children) {
     target.children = [];
   }
-  source.children.forEach((sourceChild) => {
-    const matchingChild = target.children!.find(
-      (targetChild) => targetChild.path === sourceChild.path
-    );
 
-    if (matchingChild) {
-      mergeRoutes(matchingChild, sourceChild);
-    } else {
-      target.children!.push(sourceChild);
+  if (source.handle?.pageType === 'layout') {
+    if (!target.element) {
+      target.element = source.element;
+      target.HydrateFallback = source.HydrateFallback;
+      target.action = source.action;
+      target.loader = source.loader;
+      target.handle = source.handle;
+      target.errorElement = source.errorElement;
+      target.children = target.children ?? [];
+    } else if (target.handle?.pageType === 'page') {
+      target = swapTargetRouteAsIndexRouteAndUpdateWithRoute(target, source);
     }
-  });
-}
+    return target;
+  }
 
-export function handleLayoutMerge(
-  target: ExtendedRouteObject,
-  source: ExtendedRouteObject
-): ExtendedRouteObject {
-  if (!target.element) {
-    Object.assign(target, {
+  if (
+    source.handle?.pageType === 'page' &&
+    !target.children.some((child) => child.index)
+  ) {
+    target.children.unshift({
+      index: true,
       element: source.element,
       HydrateFallback: source.HydrateFallback,
       action: source.action,
       loader: source.loader,
       handle: source.handle,
-      errorElement: source.errorElement,
     });
-  } else if (target.handle?.pageType === 'page') {
-    target = swapTargetRouteAsIndexRouteAndUpdateWithRoute(target, source);
+    return target;
   }
-  return target;
-}
 
-export function handlePageMerge(
-  target: ExtendedRouteObject,
-  source: ExtendedRouteObject
-): ExtendedRouteObject {
-  if (!target.children) {
-    target.children = [];
-  }
   if (
-    !target.children.some((child) => child.index) ||
-    target.handle?.pageType === 'layout'
+    target.handle?.pageType === 'layout' &&
+    source.handle?.pageType === 'page'
   ) {
-    if (target.handle?.pageType === 'layout') {
-      addRouteAsIndexRouteForTargetRoute(target, source);
-    } else {
-      target.children.unshift({
-        index: true,
-        element: source.element,
-        HydrateFallback: source.HydrateFallback,
-        action: source.action,
-        loader: source.loader,
-        handle: source.handle,
-        errorElement: source.errorElement,
-      });
-    }
+    target = addRouteAsIndexRouteForTargetRoute(target, source);
+    return target;
   }
+
+  if (source.children) {
+    target.children = target.children ?? [];
+    source.children.forEach((sourceChild) => {
+      const matchingChild = target.children?.find(
+        (targetChild) => targetChild.path === sourceChild.path
+      );
+      if (matchingChild) mergeRoutes(matchingChild, sourceChild);
+      else target.children?.push(sourceChild);
+    });
+  }
+
   return target;
 }
 
-export function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
+function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
   target: ExtendedRouteObject,
-  layout: ExtendedRouteObject
+  route: ExtendedRouteObject
 ): ExtendedRouteObject {
-  target.children = target.children || [];
+  target.children = target.children ?? [];
   target.children.push({
     index: true,
     element: target.element,
@@ -214,38 +157,38 @@ export function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
     handle: target.handle,
     errorElement: target.errorElement,
   });
-  Object.assign(target, {
-    element: layout.element,
-    HydrateFallback: layout.HydrateFallback,
-    action: layout.action,
-    loader: layout.loader,
-    handle: layout.handle,
-    errorElement: layout.errorElement,
-  });
+
+  target.element = route.element;
+  target.HydrateFallback = route.HydrateFallback;
+  target.action = route.action;
+  target.loader = route.loader;
+  target.handle = route.handle;
+  target.errorElement = route.errorElement;
+
   return target;
 }
 
-export function addRouteAsIndexRouteForTargetRoute(
+function addRouteAsIndexRouteForTargetRoute(
   target: ExtendedRouteObject,
-  page: ExtendedRouteObject
+  route: ExtendedRouteObject
 ): ExtendedRouteObject {
-  target.children = target.children || [];
+  target.children = target.children ?? [];
   target.children.push({
     index: true,
-    element: page.element,
-    HydrateFallback: page.HydrateFallback,
-    action: page.action,
-    loader: page.loader,
-    handle: page.handle,
-    errorElement: page.errorElement,
+    element: route.element,
+    HydrateFallback: route.HydrateFallback,
+    action: route.action,
+    loader: route.loader,
+    handle: route.handle,
+    errorElement: route.errorElement,
   });
   return target;
 }
 
 function createRoute(args: {
   segments: string[];
-  PageComponent: LazyExoticComponent<() => ReactNode>;
-  LoadingComponent?: LazyExoticComponent<() => ReactNode>;
+  PageComponent: LazyExoticComponent<() => ReactElement>;
+  LoadingComponent?: LazyExoticComponent<() => ReactElement>;
   loader?: LoaderFunction;
   action?: ActionFunction;
   guard?: () => Promise<boolean>;
@@ -253,24 +196,21 @@ function createRoute(args: {
   const [current, ...rest] = args.segments;
   const [cleanPath, pageType] = current.split(separator);
   const route: ExtendedRouteObject = { path: cleanPath };
+
   if (pageType === 'page' || pageType === 'layout') {
     route.element = <args.PageComponent />;
     route.HydrateFallback =
       args.LoadingComponent ?? (() => <div>Loading...</div>);
     route.action = args.action;
     route.loader = async (...props) => {
-      if (!(await args.guard?.())) {
-        throw new Response('Forbidden', {
-          status: 403,
-          statusText: 'Forbidden',
-        });
-      }
       return args.loader?.(...props);
     };
     route.handle = { pageType: pageType as 'layout' | 'page' };
   }
+
   if (rest.length > 0) {
     const nextSegment = rest[0].split(separator)[0];
+
     if (nextSegment === 'update' || nextSegment === 'edit') {
       return {
         path: `${cleanPath}/${nextSegment}`,
@@ -281,16 +221,20 @@ function createRoute(args: {
         handle: { pageType: pageType as 'layout' | 'page' },
       };
     }
+
     const childRoute = createRoute({ ...args, segments: rest });
+
     if (!route.children) {
       route.children = [];
     }
+
     if (cleanPath.startsWith(':')) {
       route.children.unshift(childRoute);
     } else {
       route.children.push(childRoute);
     }
   }
+
   return route;
 }
 
@@ -314,6 +258,7 @@ export function getRouteSegmentsFromFilePath(
       if (segment.startsWith('[')) return getParamFromSegment(segment);
       return segment;
     });
+
   return getRouteSegments(segments[0], segments, transformer);
 }
 
@@ -361,7 +306,7 @@ export function addErrorElementToRoutes(
       (_, prevSegment) => prevSegment
     );
     const ErrorBoundary = lazy(
-      importer as () => Promise<{ default: () => ReactNode }>
+      importer as () => Promise<{ default: () => ReactElement }>
     );
     setRoute(segments, routes, (route) => {
       route.errorElement = <ErrorBoundary />;
@@ -380,7 +325,7 @@ export function add404PageToRoutesChildren(
       (_, prevSegment) => prevSegment
     );
     const NotFound = lazy(
-      importer as () => Promise<{ default: () => ReactNode }>
+      importer as () => Promise<{ default: () => ReactElement }>
     );
     setRoute(segments, routes, (route) => {
       if (route.children) {
@@ -395,7 +340,9 @@ export function add404PageToRoutesChildren(
           action: tempRoute.action,
           loader: tempRoute.loader,
         });
+
         route.children.push({ path: '*', element: <NotFound /> });
+
         delete route.element;
         delete route.action;
         delete route.loader;
@@ -405,7 +352,7 @@ export function add404PageToRoutesChildren(
   });
 }
 
-function set404NonPage(routes: RouteObject, notFoundElement: ReactNode) {
+function set404NonPage(routes: RouteObject, notFoundElement: ReactElement) {
   if (
     routes.path &&
     routes.children?.length &&
@@ -430,6 +377,7 @@ function setRoute(
   segments.forEach((_segment, i) => {
     const isLastSegment = i === segments.length - 1;
     if (isLastSegment) return (temp = updater(temp));
+
     if (!isLastSegment) {
       const nextSegment = segments[i + 1];
       const index = temp.children?.findIndex(

libs/utils/src/session/guard/index.tsx

@@ -1,27 +0,0 @@
-import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
-import { useSession } from '../../hooks/use-session';
-
-type TProps = PropsWithChildren<{
-  permissions: Array<string>;
-  fallback?: ReactNode;
-}>;
-
-export const Guard: FC<TProps> = (props): ReactNode => {
-  const { session } = useSession();
-
-  const permissionKeys = useMemo(() => {
-    return session?.user?.role?.permissions.map((perm) => perm.name) ?? [];
-  }, [session?.user?.role]);
-
-  const allowed = useMemo(() => {
-    return props.permissions.every((permission) =>
-      permissionKeys.includes(permission)
-    );
-  }, [permissionKeys, props.permissions]);
-
-  if (allowed) {
-    return props.children;
-  }
-
-  return props.fallback ?? null;
-};

libs/utils/src/session/index.ts

@@ -1 +0,0 @@
-export * from './guard';

package-lock.json

@@ -38,8 +38,7 @@
         "sharp": "^0.34.1",
         "sonner": "^2.0.3",
         "tailwind-merge": "^3.0.2",
-        "zod": "^3.24.2",
-        "zustand": "^5.0.5"
+        "zod": "^3.24.2"
       },
       "devDependencies": {
         "@babel/core": "^7.14.5",
@@ -40388,35 +40387,6 @@
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
-    "node_modules/zustand": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.5.tgz",
-      "integrity": "sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.20.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=18.0.0",
-        "immer": ">=9.0.6",
-        "react": ">=18.0.0",
-        "use-sync-external-store": ">=1.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "use-sync-external-store": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

package.json

@@ -3,15 +3,15 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "gacha:dev": "nx dev gacha",
+    "gacha:dev": "nx serve gacha",
     "gacha:build": "nx build gacha",
     "gacha:test": "nx test gacha",
     "gacha:prod": "serve ./dist/apps/gacha",
-    "backoffice:dev": "nx dev backoffice",
+    "backoffice:dev": "nx serve backoffice",
     "backoffice:build": "nx build backoffice",
     "backoffice:test": "nx test backoffice",
     "backoffice:prod": "serve ./dist/apps/backoffice",
-    "dimentorin:dev": "nx dev dimentorin",
+    "dimentorin:dev": "nx serve dimentorin",
     "dimentorin:test": "nx test dimentorin",
     "dimentorin:build": "nx build dimentorin",
     "dimentorin:prod": "serve ./dist/apps/dimentorin",
@@ -55,8 +55,7 @@
     "sharp": "^0.34.1",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.0.2",
-    "zod": "^3.24.2",
-    "zustand": "^5.0.5"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",

vercel.json

@@ -1,8 +0,0 @@
-{
-  "routes": [
-    {
-      "src": "/[^.]+",
-      "dest": "/"
-    }
-  ]
-}