fix: nextjs landing utils

* fix: hero section responsiveness

* fix: adjust max-width for hero section on smaller screens

* fix: increase title font size in hero section

.env.example

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

README.md

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

apps/backoffice/.env.example

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

apps/backoffice/src/app/(protected)/accounts/page.tsx

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

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

apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts

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

apps/backoffice/src/app/(public)/auth/login/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/backoffice/src/middleware.ts

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

apps/dimentorin/.env.example

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

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

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

apps/dimentorin/src/middleware.ts

@@ -1,11 +1,109 @@
-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;
 };

apps/gacha/.env.example

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

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

@@ -2,22 +2,19 @@ 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 onSubmit = form.handleSubmit((data) => {
-    postLogin.mutate(data, {
-      onSuccess: () => console.log('Success Login'),
-    });
-  });
+  const { signIn } = useSession();
+
+  const onSubmit = form.handleSubmit((data) => signIn(data));
 
   return {
     form,

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

@@ -1,14 +1,11 @@
 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();
@@ -21,31 +18,12 @@ 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: (data) => toast.success(data.message),
+      onSuccess: () => toast.success('Registrasi sukses'),
       onError: (error) => toast.error(error.message),
     });
   });
@@ -53,6 +31,5 @@ export const useRegister = () => {
   return {
     form,
     onSubmit,
-    isStepOneValid: stepValid,
   };
 };

apps/gacha/src/middleware.ts

@@ -1,11 +1,109 @@
-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;
 };

apps/landing/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=

apps/landing/next.config.js

@@ -1,15 +1,8 @@
 const { composePlugins, withNx } = require('@nx/next');
-const { withPayload } = require('@payloadcms/next/withPayload');
 
 /** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
 const nextConfig = {
   nx: { svgr: false },
-  sassOptions: {
-    quietDeps: true,
-    logger: {
-      warn: () => {},
-    },
-  },
 };
 
-module.exports = composePlugins(withNx, withPayload)(nextConfig);
+module.exports = composePlugins(withNx)(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 { Button } from '@components';
 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,38 @@ 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')}
+                  onClick={() =>
+                    window.open('https://discord.gg/imphnen', '_blank')
+                  }
                 >
-                  {primaryButtonLabel}
+                  Gabung Discord
                 </Button>
                 <Button
                   size="lg"
                   variant="outline"
                   className="border-primary hover:bg-primary/10"
-                  onClick={() => window.open(secondaryButtonLink, '_blank')}
+                  onClick={() =>
+                    window.open(
+                      'https://facebook.com/groups/programmerhandal',
+                      '_blank'
+                    )
+                  }
                 >
-                  {secondaryButtonLabel}
+                  Join Facebook Group
                 </Button>
               </div>
             </div>

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

@@ -1,13 +1,45 @@
 'use client';
 
+import { Button } from '@components';
 import { Icon } from '@iconify/react';
-import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
-import { CommunitiesSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-export function Community(props: CommunitiesSection) {
-  const { items, stats } = props;
+export function Community() {
+  const items = [
+    {
+      iconName: 'tabler:brand-facebook',
+      title: 'Facebook Group',
+      description:
+        'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
+      buttonText: 'Gabung Sekarang',
+      buttonLink: 'https://facebook.com/groups/programmerhandal',
+    },
+    {
+      iconName: 'tabler:brand-instagram',
+      title: 'Instagram',
+      description:
+        'Ikuti kami di Instagram untuk tips programming, konten inspiratif, dan info event terbaru.',
+      buttonText: 'Follow Kami',
+      buttonLink: 'https://www.instagram.com/imphnen.dev',
+    },
+    {
+      iconName: 'tabler:brand-discord-filled',
+      title: 'Discord Server',
+      description:
+        'Diskusikan langsung dengan sesama programmer dan dapatkan bantuan langsung dari para ahli.',
+      buttonText: 'Join Server',
+      buttonLink: 'https://discord.com/invite/imphnen',
+    },
+  ];
+
+  const stats = [
+    { value: '100K+', label: 'Member Aktif' },
+    { value: '50+', label: 'Event Bulanan' },
+    { value: '100+', label: 'Mentor Profesional' },
+    { value: '5K+', label: 'Diskusi Mingguan' },
+  ];
+
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -61,7 +93,7 @@ export function Community(props: CommunitiesSection) {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {items?.map((c, i) => (
+          {items.map((c, i) => (
             <motion.div
               key={i}
               className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-xl"
@@ -95,7 +127,7 @@ export function Community(props: CommunitiesSection) {
           animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.5, delay: 0.3 }}
         >
-          {stats?.map((s, i) => (
+          {stats.map((s, i) => (
             <div key={i} className="space-y-2">
               <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
                 {s.value}

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

@@ -1,12 +1,36 @@
 'use client';
 
 import { Icon } from '@iconify/react';
-import { FeaturesSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-export function Features(props: FeaturesSection) {
-  const { heading, subheading, features } = props;
+export function Features() {
+  const features = [
+    {
+      iconName: 'tabler:device-laptop',
+      title: 'Belajar Tanpa Koding',
+      description:
+        'Pelajari konsep programming dengan cara yang mudah dipahami tanpa harus menulis kode yang rumit.',
+    },
+    {
+      iconName: 'tabler:users',
+      title: 'Komunitas Supportif',
+      description:
+        'Bergabunglah dengan komunitas programmer Indonesia yang siap membantu dan berbagi pengalaman.',
+    },
+    {
+      iconName: 'tabler:book',
+      title: 'Tutorial Interaktif',
+      description:
+        'Akses tutorial interaktif yang membuat konsep programming lebih mudah untuk dipahami.',
+    },
+    {
+      iconName: 'tabler:code',
+      title: 'Proyek Praktis',
+      description:
+        'Terapkan pengetahuan Anda dalam proyek nyata dengan panduan langkah demi langkah.',
+    },
+  ];
 
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
@@ -52,10 +76,11 @@ export function Features(props: FeaturesSection) {
               Fitur Unggulan
             </div>
             <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
-              {heading}
+              Belajar programming dengan cara yang lebih baik
             </h2>
             <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
-              {subheading}
+              IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi
+              programmer handal tanpa harus pusing dengan coding.
             </p>
           </motion.div>
         </div>
@@ -66,7 +91,7 @@ export function Features(props: FeaturesSection) {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {features?.map((feature, index) => (
+          {features.map((feature, index) => (
             <motion.div
               key={index}
               className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"

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

@@ -188,8 +188,10 @@ export default function Footer() {
                   placeholder="Email Anda"
                   className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                 />
-                <button className="inline-flex items-center justify-center rounded-md bg-primary px-3 py-1 text-sm shadow hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 
-font-bold text-black hover:text-white cursor-pointer">
+                <button
+                  className="inline-flex items-center justify-center rounded-md bg-primary px-3 py-1 text-sm shadow hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 
+font-bold text-black hover:text-white cursor-pointer"
+                >
                   Daftar
                 </button>
               </div>

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

@@ -1,11 +1,7 @@
 'use client';
 
-import {
-  Button,
-  MenuIcon,
-  XIcon,
-} from '@imphnen-frontend-service/shadcn-ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
+import { Button, MenuIcon, XIcon } from '@components';
+import { cn } from '@utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';

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

@@ -1,27 +1,16 @@
 'use client';
 
-import {
-  Button,
-  CodeIcon,
-  SparklesIcon,
-  UsersIcon,
-} from '@imphnen-frontend-service/shadcn-ui/atoms';
-import { formatCMSImageDataToMedia } from 'apps/landing/src/lib/format';
-import { HeroSection } from 'apps/landing/src/payload-types';
+import { Button, CodeIcon, SparklesIcon, UsersIcon } from '@components';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import { Fragment, useEffect, useState } from 'react';
 
-export function Hero(props: HeroSection) {
-  const {
-    badgeText,
-    buttons,
-    description,
-    highlight,
-    title,
-    stats,
-    heroImage,
-  } = props;
+export function Hero() {
+  const stats = [
+    { value: '180K+', label: 'Member' },
+    { value: '500+', label: 'Tutorial' },
+    { value: '24/7', label: 'Yapping' },
+  ];
 
   const [scrollY, setScrollY] = useState(0);
 
@@ -65,42 +54,51 @@ export function Hero(props: HeroSection) {
           >
             <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
               <SparklesIcon className="mr-1 h-3.5 w-3.5 text-primary" />
-              <span>{badgeText}</span>
+              <span>Komunitas Programmer Indonesia</span>
             </div>
 
             <div className="space-y-4">
-              <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 />
+              <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">
+                Programmer Handal, <br />
                 <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-                  {highlight}
+                  Tanpa Ribet
                 </span>
               </h1>
               <p className="max-w-[600px] text-muted-foreground md:text-xl">
-                {description}
+                Temukan potensi programming Anda bersama komunitas yang
+                mendukung, tutorial interaktif, dan sumber daya berkualitas
+                tinggi.
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row gap-4">
+            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
               <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"
-                onClick={() => window.open(buttons.primaryUrl, '_blank')}
+                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(
+                    'https://facebook.com/groups/programmerhandal',
+                    '_blank'
+                  )
+                }
               >
-                {buttons.primaryLabel}
+                Mulai Belajar
               </Button>
               <Button
                 size="lg"
                 variant="outline"
-                className="group relative overflow-hidden border-primary"
-                onClick={() => window.open(buttons.secondaryUrl, '_blank')}
+                className="w-full sm:w-auto group relative overflow-hidden border-primary"
+                onClick={() =>
+                  window.open('https://discord.com/invite/imphnen', '_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>
+                <span className="relative">Gabung Discord</span>
               </Button>
             </div>
 
-            <div className="flex items-center gap-8">
-              {stats?.map(({ value, label }, i) => (
+            <div className="flex flex-wrap justify-center gap-6 sm:gap-8">
+              {stats.map(({ value, label }, i) => (
                 <Fragment key={i}>
                   <div className="flex flex-col items-center">
                     <div className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
@@ -109,7 +107,7 @@ export function Hero(props: HeroSection) {
                     <div className="text-xs text-muted-foreground">{label}</div>
                   </div>
                   {i < stats.length - 1 && (
-                    <div className="h-10 border-r border-border mx-4" />
+                    <div className="hidden sm:block h-10 border-r border-border mx-4" />
                   )}
                 </Fragment>
               ))}
@@ -117,7 +115,7 @@ export function Hero(props: HeroSection) {
           </motion.div>
 
           <motion.div
-            className="relative mx-auto lg:ml-auto"
+            className="relative w-full lg:w-auto mx-auto lg:ml-auto"
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.5, delay: 0.2 }}
@@ -131,19 +129,13 @@ export function Hero(props: HeroSection) {
               </div>
               <div className="relative z-10 rounded-2xl overflow-hidden border shadow-2xl">
                 <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-blue-400/10" />
-                {(() => {
-                  const media = formatCMSImageDataToMedia(heroImage);
-                  if (!media) return null;
-                  return (
-                    <Image
-                      src={media.url!}
-                      alt={media.alt}
-                      width={600}
-                      height={500}
-                      className="w-full h-auto object-cover"
-                    />
-                  );
-                })()}
+                <Image
+                  src="/logo.webp"
+                  alt="logo"
+                  width={600}
+                  height={500}
+                  className="w-full h-auto object-cover"
+                />
               </div>
             </div>
           </motion.div>

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

@@ -1,13 +1,45 @@
 'use client';
 
+import { Button } from '@components';
 import { Icon } from '@iconify/react';
-import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
-import { LearningResourcesSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-export function LearningResources(props: LearningResourcesSection) {
-  const { resources, featured, title, description } = props;
+export function LearningResources() {
+  const resources = [
+    {
+      icon: 'tabler:video',
+      title: 'Video Tutorial',
+      description:
+        'Belajar melalui tutorial video dari langkah awal hingga mahir.',
+      buttonText: 'Lihat Semua Video',
+      buttonLink: '#',
+    },
+    {
+      icon: 'tabler:article',
+      title: 'Artikel & Tutorial',
+      description:
+        'Pelajari konsep programming melalui artikel yang disusun secara terstruktur.',
+      buttonText: 'Baca Artikel',
+      buttonLink: '#',
+    },
+    {
+      icon: 'tabler:brand-vscode',
+      title: 'Tantangan Koding',
+      description:
+        'Uji kemampuan koding kamu dengan tantangan yang menyenangkan dan menantang.',
+      buttonText: 'Mulai Tantangan',
+      buttonLink: '#',
+    },
+    {
+      icon: 'tabler:device-desktop-share',
+      title: 'Sharing Session',
+      description:
+        'Ikuti sesi berbagi pengalaman dari programmer berpengalaman dan belajar dari pengalaman mereka.',
+      buttonText: 'Jadwal Session',
+      buttonLink: '#',
+    },
+  ];
 
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
@@ -49,10 +81,11 @@ export function LearningResources(props: LearningResourcesSection) {
             transition={{ duration: 0.5 }}
           >
             <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
-              {title}
+              Sumber Belajar
             </h2>
             <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
-              {description}
+              Akses berbagai materi belajar yang akan membantu kamu menguasai
+              konsep programming dengan cara yang menyenangkan.
             </p>
           </motion.div>
         </div>
@@ -101,30 +134,28 @@ export function LearningResources(props: LearningResourcesSection) {
           <div className="grid md:grid-cols-2 gap-0">
             <div className="p-8 md:p-12 flex flex-col justify-center">
               <div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary mb-4 w-fit">
-                {featured.label}
+                Rekomendasi Terbaik
               </div>
               <h3 className="text-2xl md:text-3xl font-bold mb-4">
-                {featured.title}
+                Kursus Lengkap Web Development
               </h3>
               <p className="text-muted-foreground mb-6">
-                {featured.description}
+                Pelajari HTML, CSS, JavaScript, React, dan Node.js dalam satu
+                kursus komprehensif yang dirancang untuk pemula hingga tingkat
+                menengah.
               </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')
-                  }
+                  onClick={() => window.open('/', '_blank')}
                 >
-                  {featured.primaryButtonText}
+                  Mulai Kursus
                 </Button>
                 <Button
                   variant="outline"
-                  onClick={() =>
-                    window.open(featured.secondaryButtonLink, '_blank')
-                  }
+                  onClick={() => window.open('/', '_blank')}
                 >
-                  {featured.secondaryButtonText}
+                  Lihat Silabus
                 </Button>
               </div>
             </div>

apps/landing/src/app/(frontend)/_components/simple-theme-toggle.tsx

@@ -1,10 +1,6 @@
 'use client';
 
-import {
-  Button,
-  MoonIcon,
-  SunIcon,
-} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { Button, MoonIcon, SunIcon } from '@components';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 

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

@@ -1,14 +1,41 @@
 'use client';
 
-import { QuoteIcon } from '@imphnen-frontend-service/shadcn-ui/atoms';
-import { formatCMSImageDataToMedia } from 'apps/landing/src/lib/format';
-import { TestimonialsSection } from 'apps/landing/src/payload-types';
+import { QuoteIcon } from '@components';
 import { motion, useInView } from 'framer-motion';
 import Image from 'next/image';
 import { useRef } from 'react';
 
-export function Testimonials(props: TestimonialsSection) {
-  const { title, subtitle, items, stats, joinTitle, joinText } = props;
+export function Testimonials() {
+  const items = [
+    {
+      quote:
+        'Saya yang tadinya tidak mengerti apa-apa tentang programming, sekarang bisa membuat website sendiri dengan mudah. Terima kasih IMPHNEN!',
+      name: 'Budi Santoso',
+      role: 'Web Developer Pemula',
+      avatar: '',
+    },
+    {
+      quote:
+        'Komunitas yang sangat supportif! Setiap pertanyaan selalu dijawab dengan cepat dan jelas. Diskusi programnya mudah dipahami.',
+      name: 'Anita Ratna',
+      role: 'Mobile App Developer',
+      avatar: '',
+    },
+    {
+      quote:
+        'Server Discord IMPHNEN adalah tempat belajar terbaik untuk programmer pemula seperti saya. Materinya lengkap dan komunitasnya sangat membantu!',
+      name: 'Dedi Permana',
+      role: 'Data Scientist',
+      avatar: '',
+    },
+  ];
+
+  const stats = [
+    { value: '98%', label: 'Tingkat Kemalasan' },
+    { value: '4.9/5', label: 'Rating Drama' },
+    { value: '85%', label: 'Mendapat Pekerjaan' },
+    { value: '24/7', label: 'Yapping' },
+  ];
 
   const ref = useRef<HTMLDivElement>(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
@@ -42,21 +69,13 @@ export function Testimonials(props: TestimonialsSection) {
           transition={{ duration: 0.5 }}
         >
           <h2 className="text-3xl font-bold tracking-tighter md:text-4xl lg:text-5xl">
-            {title.split(' ').map((word, i) =>
-              i === title.split(' ').length - 1 ? (
-                <span
-                  key={i}
-                  className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400"
-                >
-                  {word}
-                </span>
-              ) : (
-                <span key={i}>{word} </span>
-              )
-            )}
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              Testimoni
+            </span>
+            <span> Member</span>
           </h2>
           <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
-            {subtitle}
+            Apa kata mereka yang telah bergabung dengan komunitas IMPHNEN?
           </p>
         </motion.div>
 
@@ -66,7 +85,7 @@ export function Testimonials(props: TestimonialsSection) {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {items?.map((t, idx) => (
+          {items.map((t, idx) => (
             <motion.div
               key={idx}
               className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
@@ -81,19 +100,13 @@ export function Testimonials(props: TestimonialsSection) {
                 </p>
                 <div className="flex items-center gap-4">
                   <div className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-primary/20">
-                    {(() => {
-                      const media = formatCMSImageDataToMedia(t.avatar);
-                      if (!media) return null;
-                      return (
-                        <Image
-                          src={media.url!}
-                          alt={media.alt}
-                          width={600}
-                          height={500}
-                          className="object-cover"
-                        />
-                      );
-                    })()}
+                    <Image
+                      src={t.avatar}
+                      alt={t.name}
+                      width={600}
+                      height={500}
+                      className="object-cover"
+                    />
                   </div>
                   <div>
                     <h4 className="font-bold">{t.name}</h4>
@@ -115,12 +128,16 @@ export function Testimonials(props: TestimonialsSection) {
           <div className="grid md:grid-cols-2 gap-8 items-center">
             <div>
               <h3 className="text-2xl md:text-3xl font-bold mb-4">
-                {joinTitle}
+                Bergabunglah dengan 10,000+ programmer Indonesia lainnya
               </h3>
-              <p className="text-muted-foreground">{joinText}</p>
+              <p className="text-muted-foreground">
+                Komunitas kami terus berkembang dengan programmer dari berbagai
+                latar belakang dan tingkat keahlian. Bersama-sama, kita belajar,
+                berbagi, dan tumbuh sebagai profesional.
+              </p>
             </div>
             <div className="grid grid-cols-2 gap-4">
-              {stats?.map((s, idx) => (
+              {stats.map((s, idx) => (
                 <div key={idx} className="rounded-lg border p-4 text-center">
                   <div className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
                     {s.value}

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

@@ -1,9 +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';
-import { getGlobalsLearningResourcesSection } from '../../services/get-globals-learning-resources-section';
-import { getGlobalsTestimonialsSection } from '../../services/get-globals-testimonials-section';
 import { CallToAction } from './_components/call-to-action';
 import { Community } from './_components/community';
 import { Features } from './_components/features';
@@ -11,33 +5,15 @@ import { Hero } from './_components/hero';
 import { LearningResources } from './_components/learning-resources';
 import { Testimonials } from './_components/testimonials';
 
-export const revalidate = 10; // Seconds
-
-export default async function Page() {
-  const [
-    heroData,
-    featuresData,
-    communitiesData,
-    learningResourcesData,
-    testimonialsData,
-    callToActionData,
-  ] = await Promise.all([
-    getGlobalsHeroSection(),
-    getGlobalsFeaturesSection(),
-    getGlobalsCommunitiesSection(),
-    getGlobalsLearningResourcesSection(),
-    getGlobalsTestimonialsSection(),
-    getGlobalsCallToActionSection(),
-  ]);
-
+export default function Page() {
   return (
     <>
-      <Hero {...heroData} />
-      <Features {...featuresData} />
-      <Community {...communitiesData} />
-      <LearningResources {...learningResourcesData} />
-      <Testimonials {...testimonialsData} />
-      <CallToAction {...callToActionData} />
+      <Hero />
+      <Features />
+      <Community />
+      <LearningResources />
+      <Testimonials />
+      <CallToAction />
     </>
   );
 }

apps/landing/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,27 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import type { Metadata } from 'next';
-
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views';
-import config from '../../../../payload.config';
-import { importMap } from '../importMap';
-
-type Args = {
-  params: Promise<{
-    segments: string[];
-  }>;
-  searchParams: Promise<{
-    [key: string]: string | string[];
-  }>;
-};
-
-export const generateMetadata = ({
-  params,
-  searchParams,
-}: Args): Promise<Metadata> =>
-  generatePageMetadata({ config, params, searchParams });
-
-const NotFound = ({ params, searchParams }: Args) =>
-  NotFoundPage({ config, params, searchParams, importMap });
-
-export default NotFound;

apps/landing/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,27 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import type { Metadata } from 'next';
-
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views';
-import config from '../../../../payload.config';
-import { importMap } from '../importMap';
-
-type Args = {
-  params: Promise<{
-    segments: string[];
-  }>;
-  searchParams: Promise<{
-    [key: string]: string | string[];
-  }>;
-};
-
-export const generateMetadata = ({
-  params,
-  searchParams,
-}: Args): Promise<Metadata> =>
-  generatePageMetadata({ config, params, searchParams });
-
-const Page = ({ params, searchParams }: Args) =>
-  RootPage({ config, params, searchParams, importMap });
-
-export default Page;

apps/landing/src/app/(payload)/admin/importMap.js

@@ -1,5 +0,0 @@
-import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
-
-export const importMap = {
-  "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24
-}

apps/landing/src/app/(payload)/api/[...slug]/route.ts

@@ -1,19 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import '@payloadcms/next/css';
-import {
-  REST_DELETE,
-  REST_GET,
-  REST_OPTIONS,
-  REST_PATCH,
-  REST_POST,
-  REST_PUT,
-} from '@payloadcms/next/routes';
-import config from '../../../../payload.config';
-
-export const GET = REST_GET(config);
-export const POST = REST_POST(config);
-export const DELETE = REST_DELETE(config);
-export const PATCH = REST_PATCH(config);
-export const PUT = REST_PUT(config);
-export const OPTIONS = REST_OPTIONS(config);

apps/landing/src/app/(payload)/api/graphql-playground/route.ts

@@ -1,7 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import '@payloadcms/next/css';
-import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes';
-import config from '../../../../payload.config';
-
-export const GET = GRAPHQL_PLAYGROUND_GET(config);

apps/landing/src/app/(payload)/api/graphql/route.ts

@@ -1,8 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes';
-import config from '../../../../payload.config';
-
-export const POST = GRAPHQL_POST(config);
-
-export const OPTIONS = REST_OPTIONS(config);

apps/landing/src/app/(payload)/layout.tsx

@@ -1,35 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import '@payloadcms/next/css';
-import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts';
-import type { ServerFunctionClient } from 'payload';
-import React from 'react';
-import config from '../../payload.config';
-
-import { importMap } from './admin/importMap.js';
-import './custom.scss';
-
-type Args = {
-  children: React.ReactNode;
-};
-
-const serverFunction: ServerFunctionClient = async function (args) {
-  'use server';
-  return handleServerFunctions({
-    ...args,
-    config,
-    importMap,
-  });
-};
-
-const Layout = ({ children }: Args) => (
-  <RootLayout
-    config={config}
-    importMap={importMap}
-    serverFunction={serverFunction}
-  >
-    {children}
-  </RootLayout>
-);
-
-export default Layout;

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

@@ -1,65 +0,0 @@
-import { GlobalConfig } from 'payload';
-
-export const CommunitiesSection: GlobalConfig = {
-  slug: 'communities-section',
-  label: 'Communities Section',
-  fields: [
-    {
-      name: 'items',
-      type: 'array',
-      required: true,
-      defaultValue: [
-        {
-          iconName: 'tabler:brand-facebook',
-          title: 'Facebook Group',
-          description:
-            'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
-          buttonText: 'Gabung Sekarang',
-          buttonLink: 'https://facebook.com/groups/programmerhandal',
-        },
-        {
-          iconName: 'tabler:brand-instagram',
-          title: 'Instagram',
-          description:
-            'Ikuti kami di Instagram untuk tips programming, konten inspiratif, dan info event terbaru.',
-          buttonText: 'Follow Kami',
-          buttonLink: 'https://www.instagram.com/imphnen.dev',
-        },
-        {
-          iconName: 'tabler:brand-discord-filled',
-          title: 'Discord Server',
-          description:
-            'Diskusikan langsung dengan sesama programmer dan dapatkan bantuan langsung dari para ahli.',
-          buttonText: 'Join Server',
-          buttonLink: 'https://discord.com/invite/imphnen',
-        },
-      ],
-      fields: [
-        {
-          name: 'iconName',
-          type: 'text',
-          required: true,
-        },
-        { name: 'title', type: 'text', required: true },
-        { name: 'description', type: 'textarea', required: true },
-        { name: 'buttonText', type: 'text', required: true },
-        { name: 'buttonLink', type: 'text', required: true },
-      ],
-    },
-    {
-      name: 'stats',
-      type: 'array',
-      required: true,
-      defaultValue: [
-        { value: '100K+', label: 'Member Aktif' },
-        { value: '50+', label: 'Event Bulanan' },
-        { value: '100+', label: 'Mentor Profesional' },
-        { value: '5K+', label: 'Diskusi Mingguan' },
-      ],
-      fields: [
-        { name: 'value', type: 'text', required: true },
-        { name: 'label', type: 'text', required: true },
-      ],
-    },
-  ],
-};

apps/landing/src/collections/FeaturesSection.ts

@@ -1,65 +0,0 @@
-import { GlobalConfig } from 'payload';
-
-export const FeaturesSection: GlobalConfig = {
-  slug: 'features-section',
-  label: 'Features Section',
-  fields: [
-    {
-      name: 'heading',
-      type: 'text',
-      defaultValue: 'Belajar programming dengan cara yang lebih baik',
-    },
-    {
-      name: 'subheading',
-      type: 'text',
-      defaultValue:
-        'IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi programmer handal tanpa harus pusing dengan coding.',
-    },
-    {
-      name: 'features',
-      type: 'array',
-      defaultValue: [
-        {
-          iconName: 'tabler:device-laptop',
-          title: 'Belajar Tanpa Koding',
-          description:
-            'Pelajari konsep programming dengan cara yang mudah dipahami tanpa harus menulis kode yang rumit.',
-        },
-        {
-          iconName: 'tabler:users',
-          title: 'Komunitas Supportif',
-          description:
-            'Bergabunglah dengan komunitas programmer Indonesia yang siap membantu dan berbagi pengalaman.',
-        },
-        {
-          iconName: 'tabler:book',
-          title: 'Tutorial Interaktif',
-          description:
-            'Akses tutorial interaktif yang membuat konsep programming lebih mudah untuk dipahami.',
-        },
-        {
-          iconName: 'tabler:code',
-          title: 'Proyek Praktis',
-          description:
-            'Terapkan pengetahuan Anda dalam proyek nyata dengan panduan langkah demi langkah.',
-        },
-      ],
-      fields: [
-        {
-          name: 'iconName',
-          type: 'text',
-          required: true,
-        },
-        {
-          name: 'title',
-          type: 'text',
-          required: true,
-        },
-        {
-          name: 'description',
-          type: 'textarea',
-        },
-      ],
-    },
-  ],
-};

apps/landing/src/collections/HeroSection.ts

@@ -1,104 +0,0 @@
-import type { GlobalConfig } from 'payload';
-
-export const HeroSection: GlobalConfig = {
-  slug: 'hero-section',
-  label: 'Hero Section',
-  fields: [
-    {
-      name: 'heroImage',
-      label: 'Hero Image',
-      type: 'upload',
-      relationTo: 'media',
-      required: true,
-    },
-    {
-      name: 'badgeText',
-      label: 'Badge Text',
-      type: 'text',
-      required: true,
-      defaultValue: 'Komunitas Programmer Indonesia',
-    },
-    {
-      name: 'title',
-      label: 'Main Title',
-      type: 'text',
-      required: true,
-      defaultValue: 'Programmer Handal,',
-    },
-    {
-      name: 'highlight',
-      label: 'Highlight Text',
-      type: 'text',
-      required: true,
-      defaultValue: 'Tanpa Ribet',
-    },
-    {
-      name: 'description',
-      label: 'Description',
-      type: 'textarea',
-      required: true,
-      defaultValue:
-        'Temukan potensi programming Anda bersama komunitas yang mendukung, tutorial interaktif, dan sumber daya berkualitas tinggi.',
-    },
-    {
-      type: 'group',
-      name: 'buttons',
-      label: 'Buttons',
-      fields: [
-        {
-          name: 'primaryLabel',
-          label: 'Primary Button Label',
-          type: 'text',
-          required: true,
-          defaultValue: 'Mulai Belajar',
-        },
-        {
-          name: 'primaryUrl',
-          label: 'Primary Button URL',
-          type: 'text',
-          required: true,
-          defaultValue: 'https://facebook.com/groups/programmerhandal',
-        },
-        {
-          name: 'secondaryLabel',
-          label: 'Secondary Button Label',
-          type: 'text',
-          required: true,
-          defaultValue: 'Gabung Discord',
-        },
-        {
-          name: 'secondaryUrl',
-          label: 'Secondary Button URL',
-          type: 'text',
-          required: true,
-          defaultValue: 'https://discord.com/invite/imphnen',
-        },
-      ],
-    },
-    {
-      name: 'stats',
-      label: 'Statistics',
-      type: 'array',
-      minRows: 1,
-      fields: [
-        {
-          name: 'value',
-          label: 'Value',
-          type: 'text',
-          required: true,
-        },
-        {
-          name: 'label',
-          label: 'Label',
-          type: 'text',
-          required: true,
-        },
-      ],
-      defaultValue: [
-        { value: '180K+', label: 'Member' },
-        { value: '500+', label: 'Tutorial' },
-        { value: '24/7', label: 'Yapping' },
-      ],
-    },
-  ],
-};

apps/landing/src/collections/LearningResourcesSection.ts

@@ -1,117 +0,0 @@
-// payload config
-import { GlobalConfig } from 'payload';
-
-export const LearningResourcesSection: GlobalConfig = {
-  slug: 'learning-resources-section',
-  label: 'Learning Resources Section',
-  fields: [
-    {
-      name: 'title',
-      type: 'text',
-      required: true,
-      defaultValue: 'Sumber Belajar',
-    },
-    {
-      name: 'description',
-      type: 'textarea',
-      required: true,
-      defaultValue:
-        'Akses berbagai materi belajar yang akan membantu kamu menguasai konsep programming dengan cara yang menyenangkan.',
-    },
-    {
-      name: 'resources',
-      type: 'array',
-      required: true,
-      fields: [
-        { name: 'icon', type: 'text', required: true },
-        { name: 'title', type: 'text', required: true },
-        { name: 'description', type: 'textarea', required: true },
-        { name: 'buttonText', type: 'text', required: true },
-        { name: 'buttonLink', type: 'text', required: true },
-      ],
-      defaultValue: [
-        {
-          icon: 'tabler:video',
-          title: 'Video Tutorial',
-          description:
-            'Belajar melalui tutorial video dari langkah awal hingga mahir.',
-          buttonText: 'Lihat Semua Video',
-          buttonLink: '#',
-        },
-        {
-          icon: 'tabler:article',
-          title: 'Artikel & Tutorial',
-          description:
-            'Pelajari konsep programming melalui artikel yang disusun secara terstruktur.',
-          buttonText: 'Baca Artikel',
-          buttonLink: '#',
-        },
-        {
-          icon: 'tabler:brand-vscode',
-          title: 'Tantangan Koding',
-          description:
-            'Uji kemampuan koding kamu dengan tantangan yang menyenangkan dan menantang.',
-          buttonText: 'Mulai Tantangan',
-          buttonLink: '#',
-        },
-        {
-          icon: 'tabler:device-desktop-share',
-          title: 'Sharing Session',
-          description:
-            'Ikuti sesi berbagi pengalaman dari programmer berpengalaman dan belajar dari pengalaman mereka.',
-          buttonText: 'Jadwal Session',
-          buttonLink: '#',
-        },
-      ],
-    },
-    {
-      name: 'featured',
-      type: 'group',
-      fields: [
-        {
-          name: 'label',
-          type: 'text',
-          required: true,
-          defaultValue: 'Rekomendasi Terbaik',
-        },
-        {
-          name: 'title',
-          type: 'text',
-          required: true,
-          defaultValue: 'Kursus Lengkap Web Development',
-        },
-        {
-          name: 'description',
-          type: 'textarea',
-          required: true,
-          defaultValue:
-            'Pelajari HTML, CSS, JavaScript, React, dan Node.js dalam satu kursus komprehensif yang dirancang untuk pemula hingga tingkat menengah.',
-        },
-        {
-          name: 'primaryButtonText',
-          type: 'text',
-          required: true,
-          defaultValue: 'Mulai Kursus',
-        },
-        {
-          name: 'primaryButtonLink',
-          type: 'text',
-          required: true,
-          defaultValue: '#',
-        },
-        {
-          name: 'secondaryButtonText',
-          type: 'text',
-          required: true,
-          defaultValue: 'Lihat Silabus',
-        },
-        {
-          name: 'secondaryButtonLink',
-          type: 'text',
-          required: true,
-          defaultValue: '#',
-        },
-      ],
-    },
-  ],
-};

apps/landing/src/collections/Media.ts

@@ -1,16 +0,0 @@
-import type { CollectionConfig } from 'payload';
-
-export const Media: CollectionConfig = {
-  slug: 'media',
-  access: {
-    read: () => true,
-  },
-  fields: [
-    {
-      name: 'alt',
-      type: 'text',
-      required: true,
-    },
-  ],
-  upload: true,
-};

apps/landing/src/collections/TestimonialsSection.ts

@@ -1,93 +0,0 @@
-import { GlobalConfig } from 'payload';
-
-export const TestimonialsSection: GlobalConfig = {
-  slug: 'testimonials-section',
-  label: 'Testimonials Section',
-  fields: [
-    {
-      name: 'title',
-      label: 'Section Title',
-      type: 'text',
-      defaultValue: 'Testimoni Member',
-      required: true,
-    },
-    {
-      name: 'subtitle',
-      label: 'Section Subtitle',
-      type: 'textarea',
-      defaultValue:
-        'Apa kata mereka yang telah bergabung dengan komunitas IMPHNEN?',
-      required: true,
-    },
-    {
-      name: 'items',
-      label: 'Testimonials Items',
-      type: 'array',
-      fields: [
-        { name: 'quote', type: 'textarea', label: 'Quote', required: true },
-        { name: 'name', type: 'text', label: 'Name', required: true },
-        { name: 'role', type: 'text', label: 'Role', required: true },
-        {
-          name: 'avatar',
-          type: 'upload',
-          label: 'Avatar',
-          relationTo: 'media',
-          required: true,
-        },
-      ],
-      defaultValue: [
-        {
-          quote:
-            'Saya yang tadinya tidak mengerti apa-apa tentang programming, sekarang bisa membuat website sendiri dengan mudah. Terima kasih IMPHNEN!',
-          name: 'Budi Santoso',
-          role: 'Web Developer Pemula',
-          avatar: { id: '', relationTo: 'media' },
-        },
-        {
-          quote:
-            'Komunitas yang sangat supportif! Setiap pertanyaan selalu dijawab dengan cepat dan jelas. Diskusi programnya mudah dipahami.',
-          name: 'Anita Ratna',
-          role: 'Mobile App Developer',
-          avatar: { id: '', relationTo: 'media' },
-        },
-        {
-          quote:
-            'Server Discord IMPHNEN adalah tempat belajar terbaik untuk programmer pemula seperti saya. Materinya lengkap dan komunitasnya sangat membantu!',
-          name: 'Dedi Permana',
-          role: 'Data Scientist',
-          avatar: { id: '', relationTo: 'media' },
-        },
-      ],
-    },
-    {
-      name: 'stats',
-      label: 'Statistics',
-      type: 'array',
-      fields: [
-        { name: 'value', type: 'text', label: 'Value', required: true },
-        { name: 'label', type: 'text', label: 'Label', required: true },
-      ],
-      defaultValue: [
-        { value: '98%', label: 'Tingkat Kemalasan' },
-        { value: '4.9/5', label: 'Rating Drama' },
-        { value: '85%', label: 'Mendapat Pekerjaan' },
-        { value: '24/7', label: 'Yapping' },
-      ],
-    },
-    {
-      name: 'joinTitle',
-      label: 'Join Section Title',
-      type: 'text',
-      defaultValue: 'Bergabunglah dengan 10,000+ programmer Indonesia lainnya',
-      required: true,
-    },
-    {
-      name: 'joinText',
-      label: 'Join Section Text',
-      type: 'textarea',
-      defaultValue:
-        'Komunitas kami terus berkembang dengan programmer dari berbagai latar belakang dan tingkat keahlian. Bersama-sama, kita belajar, berbagi, dan tumbuh sebagai profesional.',
-      required: true,
-    },
-  ],
-};

apps/landing/src/collections/Users.ts

@@ -1,13 +0,0 @@
-import type { CollectionConfig } from 'payload';
-
-export const Users: CollectionConfig = {
-  slug: 'users',
-  admin: {
-    useAsTitle: 'email',
-  },
-  auth: true,
-  fields: [
-    // Email added by default
-    // Add more fields as needed
-  ],
-};

apps/landing/src/lib/format.ts

@@ -1,10 +0,0 @@
-import { Media } from '../payload-types';
-
-export function formatCMSImageDataToMedia(
-  image: number | Media | null | undefined
-): Media | null {
-  if (image && typeof image === 'object' && 'url' in image) {
-    return image as Media;
-  }
-  return null;
-}

apps/landing/src/lib/payload.ts

@@ -1,4 +0,0 @@
-import { getPayload } from 'payload';
-import config from '../payload.config';
-
-export const payload = await getPayload({ config });

apps/landing/src/payload-types.ts

@@ -1,591 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * This file was automatically generated by Payload.
- * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
- * and re-run `payload generate:types` to regenerate this file.
- */
-
-/**
- * Supported timezones in IANA format.
- *
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "supportedTimezones".
- */
-export type SupportedTimezones =
-  | 'Pacific/Midway'
-  | 'Pacific/Niue'
-  | 'Pacific/Honolulu'
-  | 'Pacific/Rarotonga'
-  | 'America/Anchorage'
-  | 'Pacific/Gambier'
-  | 'America/Los_Angeles'
-  | 'America/Tijuana'
-  | 'America/Denver'
-  | 'America/Phoenix'
-  | 'America/Chicago'
-  | 'America/Guatemala'
-  | 'America/New_York'
-  | 'America/Bogota'
-  | 'America/Caracas'
-  | 'America/Santiago'
-  | 'America/Buenos_Aires'
-  | 'America/Sao_Paulo'
-  | 'Atlantic/South_Georgia'
-  | 'Atlantic/Azores'
-  | 'Atlantic/Cape_Verde'
-  | 'Europe/London'
-  | 'Europe/Berlin'
-  | 'Africa/Lagos'
-  | 'Europe/Athens'
-  | 'Africa/Cairo'
-  | 'Europe/Moscow'
-  | 'Asia/Riyadh'
-  | 'Asia/Dubai'
-  | 'Asia/Baku'
-  | 'Asia/Karachi'
-  | 'Asia/Tashkent'
-  | 'Asia/Calcutta'
-  | 'Asia/Dhaka'
-  | 'Asia/Almaty'
-  | 'Asia/Jakarta'
-  | 'Asia/Bangkok'
-  | 'Asia/Shanghai'
-  | 'Asia/Singapore'
-  | 'Asia/Tokyo'
-  | 'Asia/Seoul'
-  | 'Australia/Brisbane'
-  | 'Australia/Sydney'
-  | 'Pacific/Guam'
-  | 'Pacific/Noumea'
-  | 'Pacific/Auckland'
-  | 'Pacific/Fiji';
-
-export interface Config {
-  auth: {
-    users: UserAuthOperations;
-  };
-  blocks: {};
-  collections: {
-    users: User;
-    media: Media;
-    'payload-locked-documents': PayloadLockedDocument;
-    'payload-preferences': PayloadPreference;
-    'payload-migrations': PayloadMigration;
-  };
-  collectionsJoins: {};
-  collectionsSelect: {
-    users: UsersSelect<false> | UsersSelect<true>;
-    media: MediaSelect<false> | MediaSelect<true>;
-    'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
-    'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
-    'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
-  };
-  db: {
-    defaultIDType: number;
-  };
-  globals: {
-    'hero-section': HeroSection;
-    'features-section': FeaturesSection;
-    'communities-section': CommunitiesSection;
-    'learning-resources-section': LearningResourcesSection;
-    'testimonials-section': TestimonialsSection;
-    'call-to-action-section': CallToActionSection;
-  };
-  globalsSelect: {
-    'hero-section': HeroSectionSelect<false> | HeroSectionSelect<true>;
-    'features-section': FeaturesSectionSelect<false> | FeaturesSectionSelect<true>;
-    '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 & {
-    collection: 'users';
-  };
-  jobs: {
-    tasks: unknown;
-    workflows: unknown;
-  };
-}
-export interface UserAuthOperations {
-  forgotPassword: {
-    email: string;
-    password: string;
-  };
-  login: {
-    email: string;
-    password: string;
-  };
-  registerFirstUser: {
-    email: string;
-    password: string;
-  };
-  unlock: {
-    email: string;
-    password: string;
-  };
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "users".
- */
-export interface User {
-  id: number;
-  updatedAt: string;
-  createdAt: string;
-  email: string;
-  resetPasswordToken?: string | null;
-  resetPasswordExpiration?: string | null;
-  salt?: string | null;
-  hash?: string | null;
-  loginAttempts?: number | null;
-  lockUntil?: string | null;
-  password?: string | null;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "media".
- */
-export interface Media {
-  id: number;
-  alt: string;
-  updatedAt: string;
-  createdAt: string;
-  url?: string | null;
-  thumbnailURL?: string | null;
-  filename?: string | null;
-  mimeType?: string | null;
-  filesize?: number | null;
-  width?: number | null;
-  height?: number | null;
-  focalX?: number | null;
-  focalY?: number | null;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "payload-locked-documents".
- */
-export interface PayloadLockedDocument {
-  id: number;
-  document?:
-    | ({
-        relationTo: 'users';
-        value: number | User;
-      } | null)
-    | ({
-        relationTo: 'media';
-        value: number | Media;
-      } | null);
-  globalSlug?: string | null;
-  user: {
-    relationTo: 'users';
-    value: number | User;
-  };
-  updatedAt: string;
-  createdAt: string;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "payload-preferences".
- */
-export interface PayloadPreference {
-  id: number;
-  user: {
-    relationTo: 'users';
-    value: number | User;
-  };
-  key?: string | null;
-  value?:
-    | {
-        [k: string]: unknown;
-      }
-    | unknown[]
-    | string
-    | number
-    | boolean
-    | null;
-  updatedAt: string;
-  createdAt: string;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "payload-migrations".
- */
-export interface PayloadMigration {
-  id: number;
-  name?: string | null;
-  batch?: number | null;
-  updatedAt: string;
-  createdAt: string;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "users_select".
- */
-export interface UsersSelect<T extends boolean = true> {
-  updatedAt?: T;
-  createdAt?: T;
-  email?: T;
-  resetPasswordToken?: T;
-  resetPasswordExpiration?: T;
-  salt?: T;
-  hash?: T;
-  loginAttempts?: T;
-  lockUntil?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "media_select".
- */
-export interface MediaSelect<T extends boolean = true> {
-  alt?: T;
-  updatedAt?: T;
-  createdAt?: T;
-  url?: T;
-  thumbnailURL?: T;
-  filename?: T;
-  mimeType?: T;
-  filesize?: T;
-  width?: T;
-  height?: T;
-  focalX?: T;
-  focalY?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "payload-locked-documents_select".
- */
-export interface PayloadLockedDocumentsSelect<T extends boolean = true> {
-  document?: T;
-  globalSlug?: T;
-  user?: T;
-  updatedAt?: T;
-  createdAt?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "payload-preferences_select".
- */
-export interface PayloadPreferencesSelect<T extends boolean = true> {
-  user?: T;
-  key?: T;
-  value?: T;
-  updatedAt?: T;
-  createdAt?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "payload-migrations_select".
- */
-export interface PayloadMigrationsSelect<T extends boolean = true> {
-  name?: T;
-  batch?: T;
-  updatedAt?: T;
-  createdAt?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "hero-section".
- */
-export interface HeroSection {
-  id: number;
-  heroImage: number | Media;
-  badgeText: string;
-  title: string;
-  highlight: string;
-  description: string;
-  buttons: {
-    primaryLabel: string;
-    primaryUrl: string;
-    secondaryLabel: string;
-    secondaryUrl: string;
-  };
-  stats?:
-    | {
-        value: string;
-        label: string;
-        id?: string | null;
-      }[]
-    | null;
-  updatedAt?: string | null;
-  createdAt?: string | null;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "features-section".
- */
-export interface FeaturesSection {
-  id: number;
-  heading?: string | null;
-  subheading?: string | null;
-  features?:
-    | {
-        iconName: string;
-        title: string;
-        description?: string | null;
-        id?: string | null;
-      }[]
-    | null;
-  updatedAt?: string | null;
-  createdAt?: string | null;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "communities-section".
- */
-export interface CommunitiesSection {
-  id: number;
-  items: {
-    iconName: string;
-    title: string;
-    description: string;
-    buttonText: string;
-    buttonLink: string;
-    id?: string | null;
-  }[];
-  stats: {
-    value: string;
-    label: string;
-    id?: string | null;
-  }[];
-  updatedAt?: string | null;
-  createdAt?: string | null;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "learning-resources-section".
- */
-export interface LearningResourcesSection {
-  id: number;
-  title: string;
-  description: string;
-  resources: {
-    icon: string;
-    title: string;
-    description: string;
-    buttonText: string;
-    buttonLink: string;
-    id?: string | null;
-  }[];
-  featured: {
-    label: string;
-    title: string;
-    description: string;
-    primaryButtonText: string;
-    primaryButtonLink: string;
-    secondaryButtonText: string;
-    secondaryButtonLink: string;
-  };
-  updatedAt?: string | null;
-  createdAt?: string | null;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "testimonials-section".
- */
-export interface TestimonialsSection {
-  id: number;
-  title: string;
-  subtitle: string;
-  items?:
-    | {
-        quote: string;
-        name: string;
-        role: string;
-        avatar: number | Media;
-        id?: string | null;
-      }[]
-    | null;
-  stats?:
-    | {
-        value: string;
-        label: string;
-        id?: string | null;
-      }[]
-    | null;
-  joinTitle: string;
-  joinText: string;
-  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".
- */
-export interface HeroSectionSelect<T extends boolean = true> {
-  heroImage?: T;
-  badgeText?: T;
-  title?: T;
-  highlight?: T;
-  description?: T;
-  buttons?:
-    | T
-    | {
-        primaryLabel?: T;
-        primaryUrl?: T;
-        secondaryLabel?: T;
-        secondaryUrl?: T;
-      };
-  stats?:
-    | T
-    | {
-        value?: T;
-        label?: T;
-        id?: T;
-      };
-  updatedAt?: T;
-  createdAt?: T;
-  globalType?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "features-section_select".
- */
-export interface FeaturesSectionSelect<T extends boolean = true> {
-  heading?: T;
-  subheading?: T;
-  features?:
-    | T
-    | {
-        iconName?: T;
-        title?: T;
-        description?: T;
-        id?: T;
-      };
-  updatedAt?: T;
-  createdAt?: T;
-  globalType?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "communities-section_select".
- */
-export interface CommunitiesSectionSelect<T extends boolean = true> {
-  items?:
-    | T
-    | {
-        iconName?: T;
-        title?: T;
-        description?: T;
-        buttonText?: T;
-        buttonLink?: T;
-        id?: T;
-      };
-  stats?:
-    | T
-    | {
-        value?: T;
-        label?: T;
-        id?: T;
-      };
-  updatedAt?: T;
-  createdAt?: T;
-  globalType?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "learning-resources-section_select".
- */
-export interface LearningResourcesSectionSelect<T extends boolean = true> {
-  title?: T;
-  description?: T;
-  resources?:
-    | T
-    | {
-        icon?: T;
-        title?: T;
-        description?: T;
-        buttonText?: T;
-        buttonLink?: T;
-        id?: T;
-      };
-  featured?:
-    | T
-    | {
-        label?: T;
-        title?: T;
-        description?: T;
-        primaryButtonText?: T;
-        primaryButtonLink?: T;
-        secondaryButtonText?: T;
-        secondaryButtonLink?: T;
-      };
-  updatedAt?: T;
-  createdAt?: T;
-  globalType?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "testimonials-section_select".
- */
-export interface TestimonialsSectionSelect<T extends boolean = true> {
-  title?: T;
-  subtitle?: T;
-  items?:
-    | T
-    | {
-        quote?: T;
-        name?: T;
-        role?: T;
-        avatar?: T;
-        id?: T;
-      };
-  stats?:
-    | T
-    | {
-        value?: T;
-        label?: T;
-        id?: T;
-      };
-  joinTitle?: T;
-  joinText?: T;
-  updatedAt?: T;
-  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".
- */
-export interface Auth {
-  [k: string]: unknown;
-}
-
-
-declare module 'payload' {
-  export interface GeneratedTypes extends Config {}
-}

apps/landing/src/payload.config.ts

@@ -1,78 +0,0 @@
-import { postgresAdapter } from '@payloadcms/db-postgres';
-import { lexicalEditor } from '@payloadcms/richtext-lexical';
-import { s3Storage } from '@payloadcms/storage-s3';
-import { NodeHttpHandler } from '@smithy/node-http-handler';
-import https from 'https';
-import path from 'path';
-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';
-import { LearningResourcesSection } from './collections/LearningResourcesSection';
-import { Media } from './collections/Media';
-import { TestimonialsSection } from './collections/TestimonialsSection';
-import { Users } from './collections/Users';
-
-const filename = fileURLToPath(import.meta.url);
-const dirname = path.dirname(filename);
-
-export default buildConfig({
-  admin: {
-    user: Users.slug,
-    importMap: {
-      importMapFile: path.resolve(
-        __dirname,
-        'app',
-        '(payload)',
-        'admin',
-        'importMap.js'
-      ),
-    },
-  },
-  collections: [Users, Media],
-  globals: [
-    HeroSection,
-    FeaturesSection,
-    CommunitiesSection,
-    LearningResourcesSection,
-    TestimonialsSection,
-    CallToActionSection,
-  ],
-  editor: lexicalEditor(),
-  secret: process.env.CMS_SECRET || '',
-  typescript: {
-    outputFile: path.resolve(dirname, 'payload-types.ts'),
-  },
-  db: postgresAdapter({
-    pool: {
-      connectionString: process.env.CMS_POSTGRES_URL || '',
-    },
-  }),
-  sharp,
-  plugins: [
-    s3Storage({
-      collections: {
-        media: {
-          disableLocalStorage: true,
-        },
-      },
-      bucket: 'landing-cms',
-      config: {
-        endpoint: process.env.CMS_STORAGE_ENDPOINT,
-        credentials: {
-          accessKeyId: process.env.CMS_STORAGE_ACCESS_KEY_ID!,
-          secretAccessKey: process.env.CMS_STORAGE_SECRET_ACCESS_KEY!,
-        },
-        region: process.env.CMS_STORAGE_REGION!,
-        forcePathStyle: true,
-        requestHandler: new NodeHttpHandler({
-          httpsAgent: new https.Agent({ rejectUnauthorized: false }),
-        }),
-      },
-    }),
-  ],
-});

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',
-  });
-}

apps/landing/src/services/get-globals-communitues-section.ts

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

apps/landing/src/services/get-globals-features-section.ts

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

apps/landing/src/services/get-globals-hero-section.ts

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

apps/landing/src/services/get-globals-learning-resources-section.ts

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

apps/landing/src/services/get-globals-testimonials-section.ts

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

apps/landing/tsconfig.json

@@ -11,11 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
@@ -24,7 +20,14 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@components": ["../../libs/shadcn-ui/src/atoms/index.ts"],
+      "@utils": ["../../libs/shadcn-ui/src/lib/index.ts"],
+      "@schemas": ["../../libs/service/src/schemas/index.ts"],
+      "@/*": ["src/*"]
+    }
   },
   "include": [
     "**/*.js",
@@ -36,10 +39,5 @@
     "next-env.d.ts",
     ".next/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules",
-    "jest.config.ts",
-    "**/*.spec.ts",
-    "**/*.test.ts"
-  ]
+  "exclude": ["node_modules", "jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]
 }

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

@@ -6,7 +6,6 @@ import {
   TRegisterRequest,
   TVerifyEmailRequest,
 } from '../../types/auth';
-import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
 
 import { TResponseError, TResponseMessage } from '../../types/common';
 
@@ -19,11 +18,6 @@ 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 stepOneRegisterSchema = z
+export const authRegisterSchema = z
   .object({
     email: z
       .string({
@@ -25,6 +25,12 @@ export const stepOneRegisterSchema = 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',
@@ -51,28 +57,3 @@ export const stepOneRegisterSchema = 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,29 +1,26 @@
+import { z } from 'zod';
+import { authLoginSchema, authRegisterSchema } from '../../schemas';
+import { TResponseDetail, TResponseMessage } from '../common';
 import { TUserItem } from '../users';
 
-export type TLoginRequest = {
-  email: string;
-  password: string;
+export type TTokenItem = {
+  access_token: string;
+  refresh_token: string;
 };
 
-export type TLoginResponse = {
-  data: {
-    token: {
-      access_token: string;
-      refresh_token: string;
-    };
-    user: TUserItem;
-  };
+export type TLoginItem = {
+  token?: TTokenItem;
+  user?: TUserItem;
 };
 
-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 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 TVerifyEmailRequest = {

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

@@ -1,7 +1,19 @@
 import { AxiosError } from 'axios';
 
-export type TResponse<T = unknown> = {
+export type TMetaResponse = {
+  page: number;
+  per_page: number;
+  total: number;
+};
+
+export type TResponseDetail<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,9 +1,17 @@
 import { TPermissionItem } from '../permissions';
 
-export type TRoleItem = {
+export type TRoleDetailItem = {
   id: string;
   name: 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;
-  permissions: TPermissionItem[];
 };

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

@@ -1,4 +1,4 @@
-import { TRoleItem } from '../roles';
+import { TRoleDetailItem } from '../roles';
 
 export type TUserItem = {
   id: string;
@@ -7,13 +7,7 @@ export 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;
+  role: TRoleDetailItem;
 };

libs/shadcn-ui/src/atoms/button.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { cn } from '@imphnen-frontend-service/utils';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+import { cn } from '../lib/cn';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',

libs/shadcn-ui/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

libs/shadcn-ui/src/lib/index.ts

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

libs/utils/src/constants/index.ts

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

libs/utils/src/constants/permissions.ts

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

@@ -0,0 +1,36 @@
+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,3 +1,4 @@
 export * from './use-query-state';
-export * from './use-session';
+export * from './use-auth-store';
 export * from './use-modal-login';
+export * from './use-session';

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

@@ -0,0 +1,47 @@
+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 });
+    },
+  };
+});