feat(dimentorin): feedback mentor 2-step modal (Figma Modals-Feedback 1 & 2)

Halaman yang belum ada di FE: feedback mentor setelah sesi selesai. Figma punya 'Modals - Feedback 1' (rating 1-5 + 2 pertanyaan pilihan) dan 'Modals - Feedback 2' (3 textarea: suka/tingkatkan/testimoni). BE sudah punya POST /dimentorin/sessions/{id}/feedback/create.

- BARU mentoring/_components/feedback-modal.tsx: modal 2 step (rating bintang + kebermanfaatan + rekomendasi → textarea suka/tingkatkan/testimoni), validasi step (Lanjut disabled sampai rating+opsi dipilih), submit gabung jadi feedback text + rating, reset state tiap buka
- my-sessions: tombol '⭐ Beri Feedback' muncul untuk sesi status completed; modal ter-integrasi; invalidate my-sessions + mentor-stats setelah submit
- Verifikasi end-to-end via browser: tombol muncul, modal step 1 → rating 5 + opsi → step 2 → isi textarea → Kirim → POST 200 feedback+rating tersimpan di DB (sesi Status Test di-set completed utk test lalu di-reset)

.github/workflows/deploy-backoffice.yml

@@ -0,0 +1,35 @@
+name: Deploy Backoffice
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/backoffice/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-backoffice ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-backoffice
+            else
+              cd ~/imphnen-frontend-service-backoffice && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml down || true
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml up -d
+            docker image prune -af

.github/workflows/deploy-dimentorin.yml

@@ -0,0 +1,35 @@
+name: Deploy Dimentorin
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/dimentorin/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-dimentorin ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-dimentorin
+            else
+              cd ~/imphnen-frontend-service-dimentorin && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml down || true
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml up -d
+            docker image prune -af

.github/workflows/deploy-gacha.yml

@@ -0,0 +1,35 @@
+name: Deploy Gacha
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/gacha/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-gacha ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-gacha
+            else
+              cd ~/imphnen-frontend-service-gacha && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-gacha/apps/gacha/.env
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml down || true
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml up -d
+            docker image prune -af

.github/workflows/deploy-landing.yml

@@ -2,6 +2,8 @@ name: Deploy Landing
 
 on:
   push:
+    branches:
+      - develop
     paths:
       - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 

apps/dimentorin/src/app/(public)/(home)/_components/cta-section.tsx

@@ -2,8 +2,10 @@ import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { cn } from '@imphnen-frontend-service/utils';
 import { FC, useRef } from 'react';
 import { motion, useInView, Variants } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
 
 export const CTASection: FC = () => {
+  const navigate = useNavigate();
   const ref = useRef(null)
   const isInView = useInView(ref, { once: true, amount: 0.2 })
 
@@ -137,6 +139,7 @@ export const CTASection: FC = () => {
           <Button
             type="button"
             className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
+            onClick={() => navigate('/mentoring/ai-agent')}
           >
             Mulai Belajar Dengan AI
           </Button>
@@ -144,6 +147,7 @@ export const CTASection: FC = () => {
             type="button"
             variant="secondary"
             className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
+            onClick={() => navigate('/mentoring')}
           >
             Temukan Mentor
           </Button>

apps/dimentorin/src/app/(public)/(home)/_components/faq-section.tsx

@@ -5,9 +5,11 @@ import { motion, useInView, Variants } from 'framer-motion'
 import { cn, For } from '@imphnen-frontend-service/utils'
 
 const FAQ_DATA: AccordionOptions[] = [
-  { title: 'Apakah saya bisa memilih mentor sendiri?', description: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.' },
-  { title: 'Apakah mentoring ini cocok untuk pemula?', description: 'Yap! Baik newbie maupun seasoned dev bisa menemukan mentor yang pas untuk mempercepat progres belajarnya.' },
-  { title: 'Apakah ini seperti sekolah coding biasa?', description: 'Nope! Ini lebih dari sekadar kursus-kursus AI guide dan mentor berpengalaman, kamu mendapatkan pengalaman belajar yang jauh lebih personal dan efektif.' },
+  { title: 'Apakah saya bisa memilih mentor sendiri?', description: 'Tentu! Kamu bebas memilih mentor yang sesuai dengan kebutuhan, topik, dan level skill kamu. Setiap mentor punya profil, expertise, dan jadwal yang bisa kamu lihat sebelum booking.' },
+  { title: 'Apakah mentoring ini cocok untuk pemula?', description: 'Yap! Baik newbie maupun seasoned dev bisa menemukan mentor yang pas. Tidak tahu harus mulai dari mana? Tanya AI Agent dulu untuk arahan belajar, lalu booking mentor untuk pendampingan yang lebih dalam.' },
+  { title: 'Apakah ini seperti sekolah coding biasa?', description: 'Nope! Ini lebih fleksibel dari kursus pada umumnya. Rasa seperti punya mentor pribadi yang menyesuaikan pace belajarmu, plus AI Agent yang siap membantu kapan pun kamu macet.' },
+  { title: 'Bagaimana sistem pembayarannya?', description: 'Kamu bayar per sesi mentoring yang sudah di-booking. Pembayaran diproses via Midtrans (Virtual Account / QRIS), dan sesi otomatis terkonfirmasi begitu pembayaran lunas.' },
+  { title: 'Apakah ada materi yang bisa dipelajari gratis?', description: 'Ada! Halaman Materi berisi artikel dari para mentor yang bisa kamu baca kapan saja, dan AI Agent AI bisa menjawab pertanyaanmu berdasar materi tersebut tanpa biaya tambahan.' },
 ]
 
 export const FAQSection: FC = () => {
@@ -72,7 +74,7 @@ export const FAQSection: FC = () => {
           variant="bordered"
           className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
         >
-          Frequently Ask Question
+          Frequently Asked Questions
         </Button>
       </motion.div>
 

apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx

@@ -1,9 +1,11 @@
 import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { motion } from 'framer-motion'
+import { useNavigate } from 'react-router-dom';
 
 export function HeroSection() {
+  const navigate = useNavigate();
   return (
-    <section className="relative w-full py-20 md:py-28 lg:py-32">
+    <section className="relative w-full z-0 py-20 md:py-28 lg:py-32">
       {/* Background gradients and shapes */}
       <div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
         <motion.div
@@ -63,6 +65,7 @@ export function HeroSection() {
             type="button"
             size="sm"
             className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
+            onClick={() => navigate('/mentoring/ai-agent')}
           >
             Belajar Dengan AI Sekarang
           </Button>

apps/dimentorin/src/app/(public)/(home)/_components/testimonial-section.tsx

@@ -8,6 +8,33 @@ export const TestimonialSection: FC = () => {
   const ref = useRef(null)
   const isInView = useInView(ref, { once: true, amount: 0.2 })
 
+  const testimonials = [
+    {
+      name: 'Riko, Junior Web Developer',
+      quote:
+        'Rasanya seperti punya AI waifu yang ngajarin ngoding! Mentoringnya juga super insightful. Thanks, Dimentorin!',
+      rating: '4.8',
+    },
+    {
+      name: 'Salsa, Data Analyst',
+      quote:
+        'AI Agent-nya ngebantu banget pas stuck di konsep SQL yang rumit. Jawabannya selalu lengkap sama sumber materinya. Recommended!',
+      rating: '5.0',
+    },
+    {
+      name: 'Dimas, Mahasiswa Sistem Informasi',
+      quote:
+        'Awalnya takut tanya dosen, sekarang tinggal chat AI agent atau booking mentor. Progress belajarku naik drastis dalam 2 bulan!',
+      rating: '4.9',
+    },
+    {
+      name: 'Nadia, UI/UX Designer',
+      quote:
+        'Sensei-nya sabar banget jelasin dari dasar. Materi Rust & Tokio di sini juga disusun rapi, jadi gampang diikuti step by step.',
+      rating: '4.7',
+    },
+  ]
+
   const containerVariants: Variants = {
     hidden: { opacity: 0 },
     visible: {
@@ -57,7 +84,7 @@ export const TestimonialSection: FC = () => {
         viewport={{ once: true }}
         className="my-6 text-lg font-semibold mx-auto text-center text-primary-500 md:text-2xl lg:my-10 lg:text-4xl"
       >
-        Words from our dellow devs
+        Words from our fellow devs
       </motion.h1>
 
       <div className="scrollbar-hide w-full mx-auto max-w-7xl px-8 overflow-auto md:px-[60px] xl:px-0">
@@ -67,8 +94,8 @@ export const TestimonialSection: FC = () => {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          <For data={Array.from({ length: 2 })}>
-            {(_, index) => (
+          <For data={testimonials}>
+            {(testimonial, index) => (
               <motion.div
                 key={index}
                 variants={childVariants}
@@ -83,10 +110,10 @@ export const TestimonialSection: FC = () => {
                 </div>
                 <div className="flex-1">
                   <h3 className="mb-3 font-semibold text-primary-500 md:text-lg lg:text-2xl">
-                    Riko, Junior Web Developer
+                    {testimonial.name}
                   </h3>
                   <p className="mb-6 text-[10px] text-neutral-500 font-medium md:text-sm lg:text-base">
-                    Rasanya seperti punya AI waifu yang ngajarin ngoding! Mentoringnya juga super insightful. Thanks, Dimentorin!
+                    {testimonial.quote}
                   </p>
                   <motion.div className="w-max" whileHover={{ scale: 1.1, rotate: -3 }}>
                     <Button
@@ -97,7 +124,7 @@ export const TestimonialSection: FC = () => {
                     >
                       <StarFilled className="md:text-lg" />
                       <span>
-                        <span className="text-sm font-medium md:text-lg md:font-semibold lg:text-xl">4.8</span>
+                        <span className="text-sm font-medium md:text-lg md:font-semibold lg:text-xl">{testimonial.rating}</span>
                         <span className="text-[10px] text-primary-300 md:text-sm md:font-medium lg:text-base">/5.0</span>
                       </span>
                     </Button>

apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx

@@ -72,8 +72,8 @@ export const WhatWeOfferSection: FC = () => {
               <div
                 className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
               >
-                <p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
-                <p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
+                <p className="font-semibold lg:text-[23px] lg:font-bold">{offer.title}</p>
+                <p className="text-xs lg:text-[19px] lg:font-medium">{offer.description}</p>
               </div>
             </motion.div>
           )}

apps/dimentorin/src/app/(public)/404.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Link } from 'react-router-dom';
+
+export default function NotFound() {
+  return (
+    <main className="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-primary-50 px-6">
+      {/* Decorative circles */}
+      <div className="pointer-events-none absolute -top-24 -right-24 size-72 rounded-full bg-primary-200 md:size-96" />
+      <div className="pointer-events-none absolute -bottom-28 -left-24 size-72 rounded-full bg-primary-100 md:size-96" />
+
+      <div className="relative z-10 mx-auto max-w-2xl text-center">
+        <p className="text-[46px] font-bold leading-none text-primary-500 md:text-[96px]">
+          404
+        </p>
+        <h1 className="mt-4 text-[23px] font-semibold text-neutral-800 md:text-[29px]">
+          Quest Tidak Ditemukan!
+        </h1>
+        <p className="mx-auto mt-3 max-w-md text-[15px] text-neutral-500 md:text-[19px]">
+          Sepertinya halaman ini pergi ke isekai tanpa kamu... atau alamatnya
+          salah ketik. Jangan khawatir, pahlawan sejati selalu tahu jalan
+          pulang! 🗡️✨
+        </p>
+
+        <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
+          <Link to="/">
+            <Button
+              type="button"
+              size="lg"
+              className="w-full sm:w-auto px-8"
+            >
+              Kembali ke Home
+            </Button>
+          </Link>
+          <Link to="/mentoring">
+            <Button
+              type="button"
+              size="lg"
+              variant="bordered"
+              className="w-full sm:w-auto px-8"
+            >
+              Cari Mentor
+            </Button>
+          </Link>
+        </div>
+
+        <p className="mt-8 text-[12px] text-neutral-400">
+          Level up &gt; 404 Not Found &gt; Berhasil kembali ke jalur quest
+        </p>
+      </div>
+    </main>
+  );
+}

apps/dimentorin/src/app/(public)/_components/header.tsx

@@ -2,12 +2,16 @@ import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
 import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { cn, For, Show } from "@imphnen-frontend-service/utils";
 import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
-import { FC, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { FC, useMemo, useState } from "react";
+import { Link, NavLink, useLocation } from "react-router-dom";
 
 const MENUS: { label: string; href: string }[] = [
   { label: "Home", href: "/" },
   { label: 'Mentoring', href: '/mentoring' },
+  { label: 'Materi', href: '/mentoring/materi' },
+  { label: 'AI Agent', href: '/mentoring/ai-agent' },
+  { label: 'Dashboard', href: '/mentoring/dashboard' },
+  { label: 'Sesi Saya', href: '/mentoring/my-sessions' },
   { label: 'Resources', href: '/resources' },
   { label: 'Articles', href: '/articles' },
 ]
@@ -30,8 +34,15 @@ export const Header: FC = () => {
     else setShow(true)
   })
 
+  const isActive = useMemo(() => {
+    return (path: string) => {
+      if (path === '/' && location.pathname !== '/') return false
+      return location.pathname.includes(path)
+    }
+  }, [location.pathname]);
+
   return (
-    <div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky overflow-hidden">
+    <div className={cn("w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky", !show && "overflow-hidden")}>
       <motion.header
         className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
         aria-roledescription="nav"
@@ -63,18 +74,22 @@ export const Header: FC = () => {
                 variant="text"
                 className={cn(
                   "px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
-                  location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
+                  isActive(menu.href) && "text-primary-500 hover:text-primary-500"
                 )}
               >
-                <Link to={menu.href}>{menu.label}</Link>
+                <NavLink to={menu.href}>{menu.label}</NavLink>
               </Button>
               )}
             </For>
-            <Button type="button" className="px-12 py-1 md:hidden">Login</Button>
+            <Link to="/auth/login">
+              <Button type="button" className="px-12 py-1 lg:hidden">Login</Button>
+            </Link>
           </nav>
 
           <div>
-            <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
+            <Link to="/auth/login">
+              <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
+            </Link>
             <Button
               type="button"
               variant="text"

apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx

@@ -0,0 +1,105 @@
+import { Icon } from "@iconify/react";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { cn, For, Show } from "@imphnen-frontend-service/utils";
+import { motion } from "framer-motion";
+import { useParams } from "react-router-dom";
+import { useGetArticleBySlug } from "@imphnen-frontend-service/service";
+
+export default function DetailArticle() {
+  const { slug } = useParams()
+  const { data: article, isLoading, isError } = useGetArticleBySlug(slug ?? "")
+
+  const paragraphs = article?.content.split("\n").filter((p) => p.trim()) ?? []
+  const date = article?.created_at
+    ? new Date(article.created_at).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })
+    : ""
+
+  return (
+    <main>
+      <motion.section
+        className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5, ease: "easeInOut" }}
+      >
+        <Show
+          condition={!isLoading && !isError && !!article}
+          fallback={
+            <div className="w-full max-w-[900px] mx-auto text-center text-neutral-500 py-20">
+              {isError ? "Artikel tidak ditemukan." : "Memuat artikel..."}
+            </div>
+          }
+        >
+          <div className="w-full max-w-[900px] mx-auto mb-8 md:mb-[60px]">
+            <div className="mb-10 flex items-center justify-between">
+              <Button
+                type="button"
+                variant="text"
+                className="flex gap-x-2 text-[10px] px-2.5 py-2 md:text-[15px]"
+                onClick={() => window.history.back()}
+              >
+                <Icon icon="material-symbols:arrow-back-rounded" />
+                <span>Back</span>
+              </Button>
+              <Button
+                type="button"
+                variant="text"
+                className="flex gap-x-2 text-[10px] px-2.5 py-2 md:text-[15px]"
+              >
+                <span>Read Next</span>
+                <Icon icon="material-symbols:arrow-forward-rounded" />
+              </Button>
+            </div>
+
+            <div className="text-center leading-tight">
+              <h1
+                className="text-[23px] text-neutral-800 font-semibold mb-6 md:text-[37px] md:mb-10 xl:text-[46px]"
+              >
+                {article?.title}
+              </h1>
+              <p
+                className="text-[15px] font-semibold text-neutral-800 mb-2 md:text-[19px] md:mb-1 xl:text-[23px] xl:mb-2"
+              >
+                {article?.author_name || "IMPHNEN Editorial"}
+              </p>
+              <p className="text-xs text-neutral-600 mb-6 md:text-[15px] xl:text-[19px]">
+                {date}
+              </p>
+              <div
+                className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-3xl w-max mx-auto md:text-xs xl:text-[15px]"
+              >
+                {article?.category}
+              </div>
+            </div>
+          </div>
+
+          <div className="w-full max-w-[900px] mx-auto">
+            <div className="mb-8 w-full h-auto aspect-16/10 overflow-hidden md:aspect-31/16 md:mb-[60px] xl:aspect-45/26">
+              <img
+                src={article?.cover_url ?? "/image/59de8a682dfbe42455613ea07477ff3e30532c1f.webp"}
+                alt="Cover Article"
+                className="size-full object-cover"
+              />
+            </div>
+
+            <div
+              className={cn(
+                "text-balance text-[15px] font-medium text-neutral-600 space-y-8",
+                "md:space-y-12 md:text-[19px] xl:text-[23px] xl:max-w-[780px] xl:mx-auto",
+              )}
+            >
+              <p className="leading-tight">{article?.excerpt}</p>
+              <For data={paragraphs}>
+                {(paragraph) => (
+                  <p key={paragraph.slice(0, 40)} className="leading-tight">
+                    {paragraph}
+                  </p>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+      </motion.section>
+    </main>
+  )
+}

apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx

@@ -0,0 +1,90 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { cn, Show } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+import { Link } from "react-router-dom"
+import { TArticleListItem } from "@imphnen-frontend-service/service"
+
+export type ArticleCardProps = {
+  variant?: "default" | "recent" | "featured"
+  article?: TArticleListItem
+}
+
+function formatDate(iso?: string) {
+  if (!iso) return ""
+  return new Date(iso).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })
+}
+
+export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default', article }) => {
+  const title = article?.title ?? "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  const excerpt = article?.excerpt ?? "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  const author = article?.author_name ?? "IMPHNEN Editorial"
+  const date = formatDate(article?.created_at)
+  const slug = article?.slug ?? ""
+  const cover = article?.cover_url
+
+  return (
+    <div
+      className={cn(
+        variant === "recent" && "md:grid md:grid-cols-2 md:gap-7 xl:flex xl:items-center",
+      )}
+    >
+      <div
+        className={cn(
+          "w-full h-auto aspect-16/10 overflow-hidden mb-8 md:h-60 md:w-full xl:aspect-auto",
+          variant === "featured" && "md:h-[300px]",
+          variant === "recent" && "md:h-auto md:w-full md:aspect-15/7 md:mb-0 xl:aspect-square xl:w-[162px] xl:h-auto",
+        )}
+      >
+        <img
+          src={cover ?? "/image/59de8a682dfbe42455613ea07477ff3e30532c1f.webp"}
+          alt={title}
+          className={cn("w-full object-cover", variant === "recent" && "h-full")}
+        />
+      </div>
+
+      <div className={cn("leading-tight", variant === "recent" && "xl:flex-1")}>
+        <div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-3xl mb-4 xl:mb-[15px]">
+          {article?.category ?? "Artikel"}
+        </div>
+        <Link
+          to={slug ? `/articles/${slug}` : "/articles"}
+          className={cn(
+            "text-[15px] text-neutral-800 font-semibold mb-4 line-clamp-2 md:text-[19px] xl:mb-[23px]",
+            variant === "featured" && "text-[19px] md:text-[23px]",
+            variant === "recent" && "mb-7 xl:text-[29px]"
+          )}
+        >
+          {title}
+        </Link>
+        <Show condition={variant !== "recent"}>
+          <p 
+            className={cn(
+              "text-xs text-neutral-600 mb-6 md:text-[15px] md:mb-8 xl:text-[19px]",
+              variant === "featured" && "text-[15px] md:text-[19px] md:mb-6",
+            )}
+          >
+            {excerpt}
+          </p>
+        </Show>
+        <div
+          className={cn(
+            "flex justify-between items-center text-xs text-neutral-600 md:text-[15px] xl:text-[19px]",
+            variant === "default" && "mb-4",
+            variant === "featured" && "text-[15px] md:text-[19px] xl:text-base",
+          )}
+        >
+          <p>{author}</p>
+          <p>{date}</p>
+        </div>
+
+        <Show condition={variant === "default"}>
+          <Link to={slug ? `/articles/${slug}` : "/articles"}>
+            <Button type="button" size="sm" className="px-2.5 py-2">
+              Baca Artikel
+            </Button>
+          </Link>
+        </Show>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/articles/page.tsx

@@ -0,0 +1,140 @@
+import { ReactElement, useRef, useState } from "react";
+import { ArticleCard } from "./_components/card/article";
+import { cn, For, Show } from "@imphnen-frontend-service/utils";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { motion, useInView, Variants } from "framer-motion";
+import { useGetArticleCategories, useGetArticles } from "@imphnen-frontend-service/service";
+
+export default function Components(): ReactElement {
+  const [activeTab, setActiveTab] = useState<string>("Semua")
+  const { data: articles = [], isLoading } = useGetArticles({ per_page: 20 })
+  const { data: categories = [] } = useGetArticleCategories()
+
+  const tabs = ["Semua", ...categories]
+
+  const featured = articles[0]
+  const recent = articles.slice(1, 4)
+  const filtered = activeTab === "Semua"
+    ? articles
+    : articles.filter((a) => a.category === activeTab)
+
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <main ref={ref}>
+      <motion.section
+        className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20"
+        variants={containerVariants}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+      >
+        <div className="max-w-7xl mx-auto mb-8 md:mb-20">
+          <motion.h1
+            className="text-[23px] font-semibold text-neutral-800 mb-9 md:text-[29px] xl:text-[46px] xl:font-bold"
+            variants={childVariants}
+          >
+            Featuring Articles
+          </motion.h1>
+
+          <Show
+            condition={!isLoading}
+            fallback={<p className="text-neutral-500">Memuat artikel...</p>}
+          >
+            <div className="grid gap-12 xl:grid-cols-2">
+              <motion.div variants={childVariants}>
+                <ArticleCard variant="featured" article={featured} />
+              </motion.div>
+
+              <div>
+                <motion.h1
+                  className="text-[19px] text-neutral-800 font-semibold mb-10 md:text-[29px] xl:text-[37px] xl:mb-12"
+                  variants={childVariants}
+                >
+                  Recent Articles
+                </motion.h1>
+                <div className="grid gap-10">
+                  <For data={recent}>
+                    {(article, index) => (
+                      <motion.div key={article.id ?? index} variants={childVariants}>
+                        <ArticleCard variant="recent" article={article} />
+                      </motion.div>
+                    )}
+                  </For>
+                </div>
+              </div>
+            </div>
+          </Show>
+        </div>
+
+        <div className="max-w-7xl mx-auto">
+          <motion.h1
+            className="text-[19px] text-neutral-800 font-semibold mb-4 md:text-[23px] xl:text-[29px]"
+            variants={childVariants}
+          >
+            Category
+          </motion.h1>
+          <div className="scrollbar-hide mb-8 w-full overflow-auto mx-auto">
+            <motion.div className="min-w-max w-auto flex gap-x-3" variants={childVariants}>
+              <For data={tabs}>
+                {(category) => (
+                  <Button
+                    key={category}
+                    type="button"
+                    variant="text"
+                    onClick={() => setActiveTab(category)}
+                    className={cn(
+                      "relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-3xl md:text-xs md:font-semibold xl:text-[15px]",
+                      "before:w-0 before:absolute before:h-0.5 before:mx-auto before:inset-x-0 before:bg-primary-500 hover:before:w-full before:bottom-0 before:left-0 before:transition-all before:duration-300",
+                      activeTab === category && "text-primary-500 before:w-full"
+                    )}
+                  >
+                    {category}
+                  </Button>
+                )}
+              </For>
+            </motion.div>
+          </div>
+
+          <Show
+            condition={filtered.length > 0}
+            fallback={<p className="text-neutral-500 text-center py-10">Belum ada artikel di kategori ini.</p>}
+          >
+            <div className="grid gap-8 xl:grid-cols-3">
+              <For data={filtered}>
+                {(article, index) => (
+                  <motion.div key={article.id ?? index} variants={childVariants}>
+                    <ArticleCard article={article} />
+                  </motion.div>
+                )}
+              </For>
+            </div>
+          </Show>
+        </div>
+      </motion.section>
+    </main>
+  )
+}

apps/dimentorin/src/app/(public)/jadi-sensei/page.tsx

@@ -0,0 +1,220 @@
+import { FC, ReactElement } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+import { ArrowRightOutlined, FireOutlined, TrophyOutlined, ThunderboltOutlined } from '@ant-design/icons';
+
+const STATS = [
+  { value: '1000+', label: 'Kohai Menunggu' },
+  { value: '500+', label: 'Sensei Aktif' },
+];
+
+const GUILD_CARDS = [
+  {
+    icon: <ThunderboltOutlined />,
+    title: 'Power-Up Para Kohai',
+    description:
+      'Setiap tips dan trik dari sensei bakal langsung boost skill mereka! Kayak main RPG tapi real life—level up yang beneran meaningful!',
+  },
+  {
+    icon: <FireOutlined />,
+    title: 'Skill Jadi Gold Mine',
+    description:
+      'Knowledge yang udah kamu grind bertahun-tahun sekarang bisa jadi sumber cuan! Farming EXP sambil farming income, double win!',
+  },
+  {
+    icon: <TrophyOutlined />,
+    title: 'Legendary Sensei Status',
+    description:
+      'Jadi mentor yang namanya diingat sampai kohai-mu jadi senior! Your legacy bakal hidup terus di setiap success story mereka.',
+  },
+];
+
+export const Components: FC = (): ReactElement => {
+  const navigate = useNavigate();
+
+  return (
+    <main>
+      {/* HERO */}
+      <section className="relative overflow-hidden bg-primary-50/60">
+        <div className="max-w-7xl mx-auto px-8 py-16 md:px-[60px] md:py-20 lg:px-20 lg:py-24 flex flex-col items-center text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="max-w-3xl"
+          >
+            <h1 className="text-[29px] font-bold text-primary-500 leading-tight md:text-[37px] lg:text-[46px]">
+              Jadi Sensei di Dunia IT?
+            </h1>
+            <p className="mt-4 text-[15px] font-medium text-neutral-600 md:text-[19px]">
+              Waktunya naik level jadi mentor legendaris!
+            </p>
+
+            <div className="mt-10 flex justify-center gap-6 md:gap-12">
+              {STATS.map((s) => (
+                <div key={s.label} className="text-center">
+                  <p className="text-[23px] font-bold text-primary-500 md:text-[29px]">
+                    {s.value}
+                  </p>
+                  <p className="text-xs font-medium text-neutral-500 md:text-[15px]">
+                    {s.label}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-10">
+              <Button
+                type="button"
+                size="lg"
+                onClick={() => navigate('/auth/register-mentor')}
+              >
+                Mulai Jadi Sensei <ArrowRightOutlined />
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* VALUE PROPOSITION */}
+      <section className="max-w-7xl mx-auto px-8 py-14 md:px-[60px] md:py-16 lg:px-20">
+        <div className="text-center mb-10">
+          <h2 className="text-[23px] font-bold text-neutral-800 md:text-[29px]">
+            Kenapa Harus Join Guild Sensei Kami? 🔥
+          </h2>
+        </div>
+        <div className="grid gap-6 md:grid-cols-3">
+          {GUILD_CARDS.map((card, i) => (
+            <motion.div
+              key={card.title}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: i * 0.1 }}
+              className="bg-white border border-neutral-100 rounded-xl shadow-sm p-8 text-center"
+            >
+              <div className="mx-auto mb-5 flex size-16 items-center justify-center rounded-full bg-primary-100 text-3xl text-primary-500">
+                {card.icon}
+              </div>
+              <h3 className="text-[19px] font-semibold text-neutral-800 mb-3">
+                {card.title}
+              </h3>
+              <p className="text-sm text-neutral-500 leading-relaxed">
+                {card.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </section>
+
+      {/* TESTIMONIAL */}
+      <section className="bg-white py-14 md:py-16">
+        <div className="max-w-7xl mx-auto px-8 md:px-[60px] lg:px-20">
+          <div className="text-center mb-10">
+            <p className="text-xs font-semibold uppercase tracking-wider text-primary-500 mb-2">
+              Testimonial
+            </p>
+            <h2 className="text-[23px] font-bold text-neutral-800 md:text-[29px]">
+              What the Legendary Sensei Says
+            </h2>
+          </div>
+          <div className="grid gap-6 md:grid-cols-3">
+            {[1, 2, 3].map((i) => (
+              <div
+                key={i}
+                className="bg-primary-50/60 border border-primary-100 rounded-xl p-8"
+              >
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="size-12 rounded-full bg-primary-500 text-white flex items-center justify-center font-bold">
+                    R
+                  </div>
+                  <div>
+                    <p className="font-semibold text-neutral-800 text-[15px]">
+                      Riko, Junior Web Developer
+                    </p>
+                    <p className="text-primary-500 text-xs">4.8/5.0 ★</p>
+                  </div>
+                </div>
+                <p className="text-sm text-neutral-600 leading-relaxed">
+                  Rasanya seperti punya AI waifu yang ngajarin ngoding!
+                  Mentoringnya juga super insightful. Thanks, Dimentorin!
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="bg-primary-50/60 py-14 md:py-16">
+        <div className="max-w-7xl mx-auto px-8 md:px-[60px] lg:px-20">
+          <div className="text-center mb-10">
+            <h2 className="text-[23px] font-bold text-neutral-800 md:text-[29px]">
+              Frequently Asked Questions
+            </h2>
+            <p className="mt-2 text-[15px] font-medium text-neutral-500">
+              Kata Para Sensei Legendaris
+            </p>
+          </div>
+          <div className="max-w-3xl mx-auto space-y-4">
+            {[
+              {
+                q: 'Berapa income yang bisa didapat?',
+                a: 'Kamu akan mendapatkan income 100rb/sesi/45 menit.',
+              },
+              {
+                q: 'Bagaimana sistem pembayarannya?',
+                a: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.',
+              },
+              {
+                q: 'Apakah bisa flexible dalam mengambil sesi?',
+                a: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.',
+              },
+            ].map((faq, i) => (
+              <details
+                key={i}
+                className="group bg-white border border-neutral-100 rounded-lg p-5 open:shadow-sm"
+              >
+                <summary className="flex items-center justify-between cursor-pointer list-none font-semibold text-neutral-800 text-[15px]">
+                  {faq.q}
+                  <span className="text-primary-500 group-open:rotate-45 transition-transform">
+                    +
+                  </span>
+                </summary>
+                <p className="mt-3 text-sm text-neutral-500 leading-relaxed">
+                  {faq.a}
+                </p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="bg-primary-600 relative overflow-hidden py-16 md:py-20">
+        <div className="max-w-4xl mx-auto px-8 text-center relative z-10">
+          <h2 className="text-[23px] font-bold text-white md:text-[29px]">
+            Ready to become the Legendary Sensei?
+          </h2>
+          <p className="mt-4 text-[15px] text-primary-100">
+            Join ribuan expert lainnya yang sudah membuktikan impact mereka.
+            Your expertise is needed!
+          </p>
+          <div className="mt-8">
+            <Button
+              type="button"
+              size="lg"
+              variant="secondary"
+              onClick={() => navigate('/auth/register-mentor')}
+            >
+              Daftar Sekarang 🚀
+            </Button>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/(public)/layout.tsx

@@ -6,7 +6,7 @@ export default function Layout() {
   return (
     <div className="flex min-h-screen flex-col bg-primary-50">
       <Header />
-      <main className="flex-1 z-0">
+      <main className="flex-1">
         <Outlet />
       </main>
       <Footer />

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx

@@ -0,0 +1,216 @@
+import { CloseOutlined } from "@ant-design/icons"
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { AnimatePresence, motion } from "framer-motion"
+import { FC, useCallback, useEffect, useState } from "react"
+import { TopicStep } from "./steps/topic"
+import { cn, Show } from "@imphnen-frontend-service/utils"
+import { ScheduleStep } from "./steps/schedule"
+import { ProfileStep } from "./steps/profile"
+import { QrisPaymentStep } from "./steps/qris-payement"
+import { VAPaymentStep } from "./steps/va-payment"
+import { SuccessStep } from "./steps/success"
+import { PaymentStep } from "./steps/payment"
+import {
+  TBookSessionRequest,
+  TPayment,
+  usePostBookSession,
+  usePostCreatePayment,
+} from "@imphnen-frontend-service/service"
+
+const STEPS = ['topic', 'schedule', 'profile', 'payment', 'qr-payment', 'va-payment', 'success'] as const
+type Step = typeof STEPS[number]
+
+type Props = {
+  open: boolean
+  setOpen: (open: boolean) => void
+  mentorId?: string
+  mentor?: {
+    fullname?: string | null
+    current_role?: string
+    current_company?: string
+    mentoring_rate?: number
+  }
+}
+
+export const AppointmentModal: FC<Props> = ({ open, setOpen, mentorId, mentor }) => {
+  const [step, setStep] = useState<Step>('topic')
+  const [selectedTopics, setSelectedTopics] = useState<number[]>([])
+  const [booking, setBooking] = useState<TBookSessionRequest | null>(null)
+  const [payment, setPayment] = useState<TPayment | null>(null)
+  const [paymentMethod, setPaymentMethod] = useState<'va' | 'qris'>('va')
+  const [error, setError] = useState("")
+  const [sessionId, setSessionId] = useState("")
+  const bookMutation = usePostBookSession(mentorId ?? "")
+  const paymentMutation = usePostCreatePayment(sessionId)
+
+  const handleStep = async (action: 'next' | 'prev') => {
+    setError("")
+    if (step === 'payment' && action === 'next') {
+      if (!mentorId || !booking) {
+        setError("Data booking tidak lengkap.")
+        return
+      }
+      try {
+        // 1. Book the session -> get session id
+        const booked = await bookMutation.mutateAsync({ ...booking, topic: booking.topic || `Mentoring #${selectedTopics[0] ?? 1}` })
+        const sid = (booked as unknown as { data?: { id?: string } })?.data?.id ?? ""
+        if (!sid) {
+          setError("Gagal membuat sesi mentoring. Coba lagi.")
+          return
+        }
+        setSessionId(sid)
+        // 2. Create payment for the session with the chosen method
+        const pm = await paymentMutation.mutateAsync({ method: paymentMethod })
+        setPayment(pm)
+        // 3. Route to the method-specific payment screen
+        setStep(paymentMethod === 'qris' ? 'qr-payment' : 'va-payment')
+      } catch {
+        setError("Gagal membuat sesi mentoring. Coba lagi.")
+      }
+      return
+    }
+    if (action === 'next' && step === 'success') {
+      setOpen(false)
+    } else if (action === 'next' && (step === 'qr-payment' || step === 'va-payment')) {
+      setStep('success')
+    } else if (action === 'next') {
+      setStep(STEPS[STEPS.indexOf(step) + 1])
+    } else if (action === 'prev' && step !== 'topic') {
+      setStep(STEPS[STEPS.indexOf(step) - 1])
+    }
+  }
+
+  const handleEscapeKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape" && open) setOpen(false)
+    },
+    [open, setOpen]
+  )
+
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden"
+      window.addEventListener("keydown", handleEscapeKey)
+    } else {
+      document.body.style.overflow = ""
+    }
+
+    return () => {
+      document.body.style.overflow = ""
+      window.removeEventListener("keydown", handleEscapeKey)
+    }
+  }, [handleEscapeKey, open])
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          initial={{ opacity: 0, top: "50%" }}
+          animate={{ opacity: 1, top: 0 }}
+          exit={{ opacity: 0, top: "50%" }}
+          className="fixed inset-0 z-100 flex items-center justify-center"
+        >
+          <div className="fixed inset-0 bg-primary-900/30" onClick={() => setOpen(false)} />
+
+          <div
+            className={cn(
+              "relative bg-primary-50 px-5 py-6 w-full max-w-[280px] mx-4 rounded-lg md:max-w-[627px] md:py-10 md:px-[60px] md:rounded-xl xl:max-w-[668px]",
+              step === 'success' && 'md:max-w-[400px] md:p-10 xl:max-w-[400px]',
+            )}
+          >
+            <Show condition={step !== 'success'}>
+              <Button
+                type="button"
+                size="sm"
+                variant="text"
+                className="absolute top-3 right-3 bg-primary-200 p-1 shadow md:bg-white md:p-2 md:top-8 md:right-10"
+              >
+                <CloseOutlined className="md:text-lg" />
+              </Button>
+            </Show>
+
+            <div>
+              {step !== 'success' && (
+                <img
+                  src="/logos/simple.svg"
+                  alt="IMPHNEN Logo"
+                  className="mb-6 h-8 w-auto mx-auto md:h-12 xl:h-[60px]"
+                />
+              )}
+
+              <div className="scrollbar-hide max-h-[50dvh] overflow-y-auto">
+                {step !== 'success' && (
+                  <div className="relative mb-7 bg-primary-500 p-4 overflow-hidden rounded-md md:px-7 md:py-5 md:flex md:justify-between md:gap-x-6">
+                    <p className="text-xs font-semibold text-primary-50 md:text-[19px] md:w-[290px] xl:text-[23px]">
+                      <Show
+                        condition={step !== 'qr-payment' && step !== 'va-payment'}
+                        fallback="Yosha~! Saatnya Membayar :)"
+                      >
+                        Yosha~! Saatnya Level Up dengan Sesi Mentoring bersama Senpai!
+                      </Show>
+                    </p>
+
+                    <img
+                      src="/image/mascot-character.webp"
+                      alt="IMPHNEN Mascot"
+                      className="hidden w-[166px] h-auto absolute right-0 -bottom-3 md:block xl:w-[207px] xl:-bottom-5"
+                    />
+                  </div>
+                )}
+
+                <AnimatePresence>
+                  {step === 'topic' && <TopicStep selectedTopics={selectedTopics} setSelectedTopics={setSelectedTopics} mentor={mentor} />}
+                  {step === 'schedule' && <ScheduleStep onChange={(data) => setBooking(data)} />}
+                  {step === 'profile' && <ProfileStep />}
+                  {step === 'payment' && <PaymentStep selectedTopics={selectedTopics} mentor={mentor} booking={booking} onMethodChange={setPaymentMethod} />}
+                  {step === 'qr-payment' && <QrisPaymentStep payment={payment} />}
+                  {step === 'va-payment' && <VAPaymentStep payment={payment} />}
+                  {step === 'success' && <SuccessStep />}
+                </AnimatePresence>
+
+                {error && (
+                  <p className="text-danger-600 text-xs mt-4 font-medium">{error}</p>
+                )}
+              </div>
+
+              <Show condition={step !== 'success'}>
+                <hr className="my-6 border-primary-300" />
+              </Show>
+
+              <div className="flex justify-between">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="text"
+                  className={cn((step === 'topic' || step === 'success') && 'hidden')}
+                  onClick={() => handleStep('prev')}
+                >
+                  Kembali
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="primary"
+                  className={cn((step === 'topic' || step === 'success') && 'w-full')}
+                  disabled={selectedTopics.length === 0 && step === 'topic'}
+                  onClick={() => handleStep('next')}
+                >
+                  <Show
+                    condition={step !== 'success'}
+                    fallback="Halman Booking"
+                  >
+                    <Show condition={step !== 'payment'} fallback={bookMutation.isPending ? "Memproses..." : "Bayar Sekarang"}>
+                      <Show condition={step !== 'profile'} fallback="Pembayaran">
+                        Selanjutnya
+                      </Show>
+                    </Show>
+                  </Show>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/payment.tsx

@@ -0,0 +1,153 @@
+import { For, Show } from "@imphnen-frontend-service/utils"
+import { FC, useState } from "react"
+import { motion } from "framer-motion"
+import { TOPICS } from "../../../sections/topics"
+import { TBookSessionRequest } from "@imphnen-frontend-service/service"
+import { MentorAvatar } from "../../../../../_components/mentor-avatar"
+
+type Props = {
+  selectedTopics: number[]
+  mentor?: {
+    fullname?: string | null;
+    current_role?: string;
+    current_company?: string;
+    mentoring_rate?: number;
+  } | null
+  booking?: TBookSessionRequest | null
+  onMethodChange: (method: 'va' | 'qris') => void
+}
+
+const BANK_OPTIONS = ['BCA', 'BRI', 'BNI', 'MANDIRI']
+
+export const PaymentStep: FC<Props> = ({ selectedTopics, mentor, booking, onMethodChange }) => {
+  const rate = mentor?.mentoring_rate ?? 50000
+  const serviceFee = 2000
+  const [method, setMethod] = useState<'va' | 'qris'>('va')
+
+  const handleMethod = (next: 'va' | 'qris') => {
+    setMethod(next)
+    onMethodChange(next)
+  }
+
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md grid gap-6 md:grid-cols-2 md:gap-8 xl:grid-cols-9"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <div className="space-y-6 xl:col-span-4">
+        <div>
+          <p className="w-max mx-auto text-[10px] text-neutral-400 font-medium mb-2 md:text-xs md:ms-0">
+            Senpai Kamu
+          </p>
+          <div>
+            <div className="aspect-square mb-2 size-10 mx-auto rounded-full overflow-hidden md:size-20 md:ms-0">
+              <MentorAvatar
+                name={mentor?.fullname || "Mentor"}
+                size="sm"
+                className="w-full h-full rounded-full"
+                textClassName="text-sm md:text-xl"
+              />
+            </div>
+            <div className="w-44 mx-auto text-center md:ms-0 md:text-left md:mb-2 md:text-[15px] md:w-auto">
+              <h3 className="text-xs font-semibold mb-1 xl:text-[15px]">
+                {mentor?.fullname || "Mentor"}
+              </h3>
+              <p className="text-[10px] text-neutral-600 md:text-xs">
+                {mentor?.current_role || "Mentor"} at {mentor?.current_company || "IMPHNEN"}
+              </p>
+              {booking?.scheduled_at && (
+                <p className="text-[10px] text-neutral-500 md:text-xs mt-1">
+                  {new Date(booking.scheduled_at).toLocaleString("id-ID", { dateStyle: "full", timeStyle: "short" })}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
+            Topics :
+          </p>
+          <div className="flex flex-wrap gap-2">
+            <For data={TOPICS}>
+              {(topic) => (
+                <Show key={topic.id} condition={selectedTopics.includes(topic.id)}>
+                  <div
+                    className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium"
+                  >
+                    <span>{topic.icon} </span>
+                    <span>{topic.name}</span>
+                  </div>
+                </Show>
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-6 xl:col-span-5">
+        <div>
+          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
+            Metode Pembayaran
+          </p>
+          <div className="mb-3">
+            <p className="text-[8px] text-neutral-400 mb-2 md:text-[10px]">
+              Virtual Account
+            </p>
+            <div className="grid grid-cols-4 gap-2">
+              <For data={BANK_OPTIONS}>
+                {(bank, index) => (
+                  <div
+                    key={index}
+                    className="p-1 bg-white rounded-xs border border-primary-50 flex items-center gap-x-1 cursor-pointer"
+                    onClick={() => handleMethod('va')}
+                  >
+                    <input type="radio" name="payment" id={`va-${bank}`} checked={method === 'va'} readOnly className="size-2" />
+                    <label htmlFor={`va-${bank}`} className="block">
+                      <img src="/image/payment/bca.webp" alt={bank} className="object-scale-down" />
+                    </label>
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+          <div>
+            <p className="text-[8px] text-neutral-400 mb-2 md:text-[10px]">
+              QRIS
+            </p>
+            <div className="grid grid-cols-4 gap-2">
+              <div
+                className="p-1 bg-white rounded-xs border border-primary-50 flex items-center gap-x-1 cursor-pointer"
+                onClick={() => handleMethod('qris')}
+              >
+                <input type="radio" name="payment" id="QRIS" checked={method === 'qris'} readOnly className="size-2" />
+                <label htmlFor="QRIS" className="block">
+                  <img src="/image/payment/qris.webp" alt="QRIS" className="object-scale-down" />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
+            Detail Pembayaran
+          </p>
+          <div className="grid grid-cols-2 space-y-2.5 text-[10px] text-neutral-400 font-medium md:text-xs md:space-y-3">
+            <p className="font-normal">Subtotal :</p>
+            <p className="text-right">Rp. {rate.toLocaleString("id-ID")}</p>
+            <p className="font-normal">Service Fee :</p>
+            <p className="text-right">Rp. {serviceFee.toLocaleString("id-ID")}</p>
+
+            <hr className="border-neutral-200 col-span-full mt-1" />
+
+            <p className="text-neutral-700">Total :</p>
+            <p className="text-right text-neutral-700">Rp. {(rate + serviceFee).toLocaleString("id-ID")}</p>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/profile.tsx

@@ -0,0 +1,38 @@
+import { Input } from "@imphnen-frontend-service/ui/atoms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { motion } from "framer-motion"
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+export const ProfileStep = () => {
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md md:px-6"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
+        Langkah 3 dari 3
+      </h3>
+      <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
+        Lengkapi profil kamu agar senpai dapat mengenal kamu lebih baik.
+      </p>
+
+      <div className="space-y-2.5 md:space-y-5">
+        <div>
+          <label className={labelClass}>Nomor WhatsApp</label>
+          <Input className="min-w-full w-full" placeholder="080000000" />
+        </div>
+        <div>
+          <label className={labelClass}>CV (Opsional)</label>
+          <Input type="file" className="min-w-full w-full" />
+        </div>
+        <div>
+          <label className={labelClass}>Portoflio (Opsional)</label>
+          <Input className="min-w-full w-full" placeholder="Link Url" />
+        </div>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/qris-payement.tsx

@@ -0,0 +1,80 @@
+import { For, Show } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+import { motion } from "framer-motion"
+import { TPayment } from "@imphnen-frontend-service/service"
+
+const PAYMENT_STEP = [
+  'Buka aplikasi e-wallet atau m-banking kamu',
+  'Cari fitur bayar menggunakan QRIS',
+  'Scan kode QR di samping',
+  'Konfimasi pembayaran, dan proses selesai.'
+]
+
+type Props = {
+  payment?: TPayment | null
+}
+
+export const QrisPaymentStep: FC<Props> = ({ payment }) => {
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md md:flex md:justify-between md:gap-8"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <div className="mb-7 md:mb-0">
+        <h3 className="text-xs font-semibold mb-4 text-neutral-600 text-center md:text-start">
+          Silahkan ikuti instruksi pembayaran di bawah ini
+        </h3>
+
+        <p className="text-[10px] text-neutral-400 mb-1.5">
+          Cara melakukan pembayaran
+        </p>
+        <ul className="list-decimal pl-2.5 mb-4 md:mb-7">
+          <For data={PAYMENT_STEP}>
+            {(step, index) => (
+              <li key={index} className="text-[10px] text-neutral-400 leading-tight font-medium">
+                {step}
+              </li>
+            )}
+          </For>
+        </ul>
+
+        <div className="text-center md:text-start">
+          <p className="text-[10px] text-neutral-400 mb-1.5 font-medium md:text-xs">
+            Biaya yang harus dibayarkan
+          </p>
+          <p className="text-xs font-semibold text-neutral-700 md:text-[15px]">
+            Rp. {(payment?.total ?? 52000).toLocaleString("id-ID")}
+          </p>
+          <Show condition={!!payment?.externalRef && payment.provider !== 'midtrans'}>
+            <p className="text-[10px] text-neutral-400 mt-1 font-medium">
+              Ref: {payment?.externalRef}
+            </p>
+          </Show>
+        </div>
+      </div>
+
+      <div>
+        <p className="text-[10px] text-neutral-400 mb-2 font-medium text-center md:text-xs">
+          QR Code Pembayaran
+        </p>
+        <div className="bg-primary-50 p-2.5 rounded-lg size-[120px] mx-auto md:size-[142px] md:me-0">
+          <Show
+            condition={!!payment?.externalRef && payment.provider === 'midtrans'}
+            fallback={<img src="/image/sample-qrcode.webp" alt="QR Code" className="w-full" />}
+          >
+            <img
+              src={`https://api.qrserver.com/v1/create-qr-code/?size=240x240&data=${encodeURIComponent(payment!.externalRef!)}`}
+              alt="QR Code Midtrans"
+              className="w-full"
+            />
+          </Show>
+        </div>
+        <p className="text-[8px] text-neutral-500 text-center mt-2 md:text-[10px]">
+          Berlaku hingga {payment ? new Date(payment.expiresAt).toLocaleString("id-ID") : "-"}
+        </p>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/schedule.tsx

@@ -0,0 +1,80 @@
+import { Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { motion } from "framer-motion"
+import { useEffect, useState } from "react"
+import { TBookSessionRequest } from "@imphnen-frontend-service/service"
+
+const placeholder = `Hi [Nama Mentor], Saya [Nama Kamu] & saya berharap dapat memiliki sesi mentoring dengan Anda.
+
+Saat ini, saya tertarik untuk mengejar __. Tujuan saya untuk sesi ini adalah __.
+
+Saya ingin tahu secara khusus tentang ___.
+1.Pertanyaan Anda
+2. ...
+3. ...`
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+type Props = {
+  onChange: (data: TBookSessionRequest) => void
+}
+
+export const ScheduleStep = ({ onChange }: Props) => {
+  const [date, setDate] = useState("")
+  const [time, setTime] = useState("")
+  const [sessionType, setSessionType] = useState("online")
+  const [description, setDescription] = useState("")
+
+  useEffect(() => {
+    if (!date || !time) return
+    onChange({
+      topic: "Mentoring Session",
+      scheduled_at: `${date}T${time}:00`,
+      description,
+      duration_minutes: 60,
+      session_type: sessionType,
+    })
+  }, [date, time, sessionType, description])
+
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md md:px-6"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
+        Langkah 2 dari 3
+      </h3>
+      <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
+        Pilih jadwal sesuai preferensi kamu & siapkan pertanyaanmu
+      </p>
+
+      <div className="grid gap-2.5 md:grid-cols-2 md:gap-5">
+        <div>
+          <label className={labelClass}>Tanggal</label>
+          <Input type="date" className="min-w-full w-full" value={date} onChange={(e) => setDate(e.target.value)} />
+        </div>
+        <div>
+          <label className={labelClass}>Waktu</label>
+          <Input type="time" className="min-w-full w-full" value={time} onChange={(e) => setTime(e.target.value)} />
+        </div>
+        <div className="relative md:col-span-full">
+          <label className={labelClass}>Lokasi</label>
+          <Select className="min-w-full w-full" value={sessionType} onChange={(e) => setSessionType(e.target.value)}>
+            <option value="online">Online</option>
+            <option value="offline">Offline</option>
+          </Select>
+        </div>
+        <div className="md:col-span-full">
+          <label className={labelClass}>Pertanyaan Untuk Senpai</label>
+          <Textarea
+            className="min-w-full w-full h-40"
+            placeholder={placeholder}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)} />
+        </div>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx

@@ -0,0 +1,33 @@
+import { CheckOutlined } from "@ant-design/icons"
+import { cn } from "@imphnen-frontend-service/utils"
+import { motion } from "framer-motion"
+
+export const SuccessStep = () => {
+  return (
+    <motion.div
+      className="pb-6 rounded-md md:pb-8"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <h2 className="text-[15px] font-semibold mb-3 text-primary-500 text-center md:text-[19px] md:mb-7 xl:text-[23px] xl:mb-8">
+        Booking Senpai Berhasil
+      </h2>
+
+      <div
+        className={cn(
+          "mb-3 flex justify-center items-center mx-auto size-[60px] bg-success-200 rounded-full",
+          "md:size-[100px] md:mb-7 xl:size-[120px] xl:mb-8"
+        )}
+      >
+        <div className="bg-success-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
+          <CheckOutlined className="text-xl md:text-3xl xl:text-5xl" />
+        </div>
+      </div>
+      
+      <p className="text-[10px] text-neutral-400 text-center md:text-xs md:max-w-[220px] md:mx-auto xl:text-[15px]">
+        Untuk detail dan instruksi berikutnya dapat dilihat di dashboard pada halaman booking
+      </p>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/topic.tsx

@@ -0,0 +1,93 @@
+import { CheckOutlined } from "@ant-design/icons"
+import { cn, For, Show } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+import { motion } from "framer-motion"
+import { TOPICS } from "../../../sections/topics"
+import { MentorAvatar } from "../../../../../_components/mentor-avatar"
+
+type Props = {
+  selectedTopics: number[]
+  setSelectedTopics: (topics: number[]) => void
+  mentor?: {
+    fullname?: string | null
+    current_role?: string
+    current_company?: string
+  }
+}
+
+export const TopicStep: FC<Props> = ({ selectedTopics, setSelectedTopics, mentor }) => {
+  const handleSelectTopic = (topicId: number) => {
+    if (selectedTopics.includes(topicId)) {
+      setSelectedTopics(selectedTopics.filter((id) => id !== topicId))
+    } else {
+      setSelectedTopics([...selectedTopics, topicId])
+    }
+  }
+
+  return (
+    <>
+      <motion.div
+        className="mb-6 flex items-center gap-x-4 bg-white rounded-md overflow-hidden shadow/5 md:gap-x-10"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+      >
+        <div className="w-16 aspect-4/5 overflow-hidden md:w-[134px] xl:w-[140px]">
+          <MentorAvatar
+            name={mentor?.fullname || "Mentor"}
+            size="md"
+            className="w-full h-full rounded-none"
+            textClassName="text-lg md:text-3xl"
+          />
+        </div>
+        <div className="flex-1 pe-4">
+          <h3 className="text-xs font-semibold mb-1 line-clamp-2 md:text-[19px] md:mb-2 xl:text-[23px]">
+            {mentor?.fullname || "Mentor"}
+          </h3>
+          <p className="text-[10px] line-clamp-2 text-neutral-600 md:text-[15px] xl:text-[19px]">
+            {mentor?.current_role || "Mentor"} at {mentor?.current_company || "IMPHNEN"}
+          </p>
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="bg-white p-5 rounded-md shadow/5 md:px-6"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+      >
+        <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
+          Langkah 1 dari 3
+        </h3>
+        <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
+          Pilih topik yang ingin kamu diskusikan dengan Senpai kamu~
+        </p>
+
+        <div className="grid gap-3 md:grid-cols-2 md:content-center">
+          <For data={TOPICS}>
+            {(topic) => (
+              <div
+                key={topic.id}
+                className={cn(
+                  "relative px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium cursor-pointer",
+                  "md:text-xs xl:text-xs xl:font-semibold",
+                  selectedTopics.includes(topic.id) && "bg-primary-50 border-primary-200"
+                )}
+                onClick={() => handleSelectTopic(topic.id)}
+              >
+                <span>{topic.icon} </span>
+                <span>{topic.name}</span>
+
+                <Show condition={selectedTopics.includes(topic.id)}>
+                  <div className="absolute top-2 right-2 bg-primary-500 size-[14px] rounded-sm flex justify-center items-center text-white">
+                    <CheckOutlined />
+                  </div>
+                </Show>
+              </div>
+            )}
+          </For>
+        </div>
+      </motion.div>
+    </>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/va-payment.tsx

@@ -0,0 +1,75 @@
+import { For, Show } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+import { motion } from "framer-motion"
+import { TPayment } from "@imphnen-frontend-service/service"
+
+const PAYMENT_STEP = [
+  'Buka aplikasi e-wallet atau m-banking kamu',
+  'Pergi ke fitur transfer via Virtual Account',
+  'Pilih bank dan kode VA sesuai dengan yang ada pada halaman ini',
+  'Konfimasi pembayaran, dan proses selesai.'
+]
+
+type Props = {
+  payment?: TPayment | null
+}
+
+export const VAPaymentStep: FC<Props> = ({ payment }) => {
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md md:flex md:items-center md:gap-11"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <div className="mb-6 md:mb-0">
+        <h3 className="text-xs font-semibold mb-4 text-neutral-600 text-center md:text-start">
+          Silahkan ikuti instruksi pembayaran di bawah ini
+        </h3>
+
+        <p className="text-[10px] text-neutral-400 mb-1.5">
+          Cara melakukan pembayaran
+        </p>
+        <ul className="list-decimal pl-2.5 mb-4 md:mb-7">
+          <For data={PAYMENT_STEP}>
+            {(step, index) => (
+              <li key={index} className="text-[10px] text-neutral-400 leading-tight font-medium">
+                {step}
+              </li>
+            )}
+          </For>
+        </ul>
+
+        <div className="text-center md:text-start">
+          <p className="text-[10px] text-neutral-400 mb-1.5 font-medium md:text-xs">
+            Biaya yang harus dibayarkan
+          </p>
+          <p className="text-xs font-semibold text-neutral-700 md:text-[15px]">
+            Rp. {(payment?.total ?? 52000).toLocaleString("id-ID")}
+          </p>
+        </div>
+      </div>
+
+      <div className="text-center md:text-start">
+        <div className="w-max mx-auto mb-3 md:ms-0 md:mb-4">
+          <img src="/image/payment/bca.webp" alt="VA BCA" className="h-5 w-auto" />
+        </div>
+
+        <p className="text-[10px] text-neutral-400 mb-1 font-medium md:text-xs">
+          Kode Virtual Account
+        </p>
+        <p className="text-xs font-semibold text-neutral-700 mb-1.5 md:text-[15px]">
+          {payment?.externalRef || "8091239861969812"}
+        </p>
+        <p className="text-[8px] text-neutral-400 md:text-[10px]">
+          A/N IMPHNEN
+        </p>
+        <Show condition={!!payment?.expiresAt}>
+          <p className="text-[8px] text-neutral-500 mt-2 md:text-[10px]">
+            Berlaku hingga {new Date(payment!.expiresAt).toLocaleString("id-ID")}
+          </p>
+        </Show>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/education.tsx

@@ -0,0 +1,33 @@
+import { cn, For } from "@imphnen-frontend-service/utils"
+
+const EDUCATION = [
+  { name: 'Universitas Widyabakti', major: 'Intern Front End', duration: '2 Months', range: 'Oct 2024 - Present' },
+  { name: 'SMKN 99 Banjaran', major: 'Rekayasa Perangkat Lunak', duration: '6 Months', range: 'May 2024 - Oct 2024' },
+]
+
+export const EducationSection = () => {
+  return (
+    <div className="px-7 py-8 rounded-md shadow-md">
+      <h2 className="text-xs font-semibold mb-5 md:text-[15px] xl:text-[19px]">Education</h2>
+      <div className="space-y-4 divide-y">
+        <For data={EDUCATION}>
+          {(item, index) => (
+            <div key={index} className={cn("flex items-center gap-x-4", index !== EDUCATION.length - 1 && "pb-4")}>
+              <div className="rounded-full size-6 bg-neutral-200 md:size-7 xl:size-8"></div>
+              <div className='flex-1 text-[10px] font-medium'>
+                <p className="text-neutral-800 md:text-xs xl:text-[15px]">{item.name}</p>
+                <p>
+                  <span className="text-neutral-600 xl:text-xs">{item.major}</span>
+                  <span className="text-neutral-300"> · </span>
+                  <span className="text-neutral-400 font-normal">{item.duration}</span>
+                  <span className="text-neutral-300"> · </span>
+                  <span className="text-neutral-400 font-normal xl:font-medium">{item.range}</span>
+                </p>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/experience.tsx

@@ -0,0 +1,34 @@
+import { cn, For } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const EXPERIENCE = [
+  { name: 'Sunday.com', position: 'Intern Front End', duration: '2 Months', range: 'Oct 2024 - Present' },
+  { name: 'CodeX Digital', position: 'Intern Front End', duration: '6 Months', range: 'May 2024 - Oct 2024' },
+]
+
+export const ExperienceSection: FC = () => {
+  return (
+    <div className="px-7 py-8 rounded-md shadow-md">
+      <h2 className="text-xs font-semibold mb-5 md:text-[15px] xl:text-[19px]">Experience</h2>
+      <div className="space-y-4 divide-y">
+        <For data={EXPERIENCE}>
+          {(item, index) => (
+            <div key={index} className={cn("flex items-center gap-x-4", index !== EXPERIENCE.length - 1 && "pb-4")}>
+              <div className="rounded-full size-6 bg-neutral-200 md:size-7 xl:size-8"></div>
+              <div className='flex-1 text-[10px] font-medium'>
+                <p className="text-neutral-800 md:text-xs xl:text-[15px]">{item.name}</p>
+                <p>
+                  <span className="text-neutral-600 xl:text-xs">{item.position}</span>
+                  <span className="text-neutral-300"> · </span>
+                  <span className="text-neutral-400 font-normal">{item.duration}</span>
+                  <span className="text-neutral-300"> · </span>
+                  <span className="text-neutral-400 font-normal xl:font-medium">{item.range}</span>
+                </p>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/profile.tsx

@@ -0,0 +1,111 @@
+import { StarFilled } from "@ant-design/icons"
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { cn, For } from "@imphnen-frontend-service/utils"
+import { TMentorDetail } from "@imphnen-frontend-service/service"
+import { MentorAvatar } from "../../../_components/mentor-avatar"
+
+type Props = {
+  onBook: () => void
+  mentor?: TMentorDetail
+}
+
+export const ProfileSection: React.FC<Props> = ({ onBook, mentor }) => {
+  const name = mentor?.fullname || mentor?.legal_name || "Mentor"
+  const role = mentor?.current_role || "Mentor"
+  const company = mentor?.current_company || "IMPHNEN"
+  const expertise = mentor?.expertise ?? []
+  const softSkills = mentor?.languages ?? []
+
+  return (
+    <div className="bg-white px-4 py-5 space-y-6 md:px-8 md:pt-6 md:pb-0 xl:space-y-0 xl:py-[30px] xl:flex xl:gap-x-9 xl:justify-between">
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center",
+          "md:flex-row md:justify-start md:gap-x-8 md:items-start",
+          "xl:items-center xl:gap-x-10",
+        )}
+      >
+        <div
+          className={cn(
+            "mb-5 h-20 w-auto aspect-4/5 rounded-sm overflow-hidden",
+            "md:aspect-33/40 md:h-40 md:rounded-md md:border md:border-primary-50 md:mb-0",
+            "xl:aspect-5/6 md:h-60 md:rounded-lg"
+          )}
+        >
+          <MentorAvatar
+            name={name}
+            size="lg"
+            className="w-full h-full rounded-none"
+            textClassName="text-xl md:text-3xl lg:text-5xl"
+          />
+        </div>
+
+        <div className="md:max-w-[242px] xl:max-w-[306px]">
+          <h1
+            className={cn(
+              "mb-1 text-[15px] font-semibold text-center leading-snug",
+              "md:text-[19px] md:mb-2 md:text-start xl:text-[23px]",
+            )}
+          >
+            {name}
+          </h1>
+          <p className="text-xs mb-4 text-neutral-600 md:mb-5 md:text-[15px] xl:text-[19px] xl:mb-5">
+            {role} at {company}
+          </p>
+          <div className="flex items-center gap-x-2.5 w-full max-w-max border border-primary-50 p-1.5 rounded-md mx-auto md:ms-0">
+            <div
+              className="bg-gradient-to-tr from-primary-500 to-primary-200 rounded-sm text-white size-5 flex justify-center items-center xl:size-[29.4px]"
+            >
+              <StarFilled className="text-xs xl:text-sm" />
+            </div>
+            <div>
+              <p className="text-[10px] font-medium mb-1 text-neutral-800 xl:text-xs">Excelent Sensei</p>
+              <p className="text-[8px] text-neutral-600 xl:text-[10px]">4.8/5.0</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-y-3 xl:gap-y-4 xl:max-w-[402px]">
+        <div>
+          <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Expertise</h2>
+          <div className="p-4 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-3">
+            <For data={expertise}>
+              {(item) => (
+                <div key={item} className="bg-primary-300 text-primary-600 px-3 py-2 rounded-md text-[10px] md:font-medium xl:text-xs xl:font-semibold">
+                  {item}
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+        <div>
+          <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Soft Skills</h2>
+          <div className="p-4 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-3">
+            <For data={softSkills}>
+              {(item) => (
+                <div key={item} className="bg-primary-300 text-primary-600 px-3 py-2 rounded-md text-[10px] md:font-medium xl:text-xs xl:font-semibold">
+                  {item}
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+
+      <div className="hidden md:flex xl:hidden justify-between">
+        <div>
+          <p className="text-primary-500 text-[15px] font-semibold">
+            {new Date().toLocaleDateString('id-ID', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' })}
+          </p>
+          <p className="text-neutral-500 text-xs font-medium">
+            {new Date().toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
+          </p>
+        </div>
+        <Button type="button" size="sm" onClick={onBook}>
+          Book Your Senpai!
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx

@@ -0,0 +1,84 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { For, Show } from "@imphnen-frontend-service/utils"
+import { useGetMentorAvailability } from "@imphnen-frontend-service/service"
+import { FC } from "react"
+
+type Props = {
+  onBook: () => void
+  mentorId?: string
+}
+
+const DAY_NAMES = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"]
+
+function formatDate(dateStr: string) {
+  const d = new Date(dateStr + "T00:00:00")
+  return `${DAY_NAMES[d.getDay()]}, ${d.getDate()} ${d.toLocaleString("id-ID", { month: "long" })} ${d.getFullYear()}`
+}
+
+function formatTime(timeStr: string) {
+  const [h] = timeStr.split(":").map(Number)
+  return `${String(h).padStart(2, "0")}:00 WIB`
+}
+
+export const SenpaiScheduleSection: FC<Props> = ({ onBook, mentorId }) => {
+  const { data: availability, isLoading } = useGetMentorAvailability(mentorId ?? "")
+
+  const slots = availability?.slots ?? []
+  const byDate = new Map<string, typeof slots>()
+  for (const s of slots) {
+    if (!byDate.has(s.date)) byDate.set(s.date, [])
+    byDate.get(s.date)!.push(s)
+  }
+  const days = [...byDate.entries()]
+
+  return (
+    <div>
+      <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Senpai Schedule</h2>
+      <div className="p-4 bg-primary-50 border border-primary-100 rounded-md space-y-5">
+        <Show
+          condition={!isLoading && days.length > 0}
+          fallback={
+            <p className="text-xs text-neutral-500">
+              {isLoading ? "Memuat jadwal senpai..." : "Belum ada jadwal tersedia."}
+            </p>
+          }
+        >
+          <For data={days}>
+            {([date, daySlots]) => (
+              <div key={date}>
+                <div className="flex justify-between items-center mb-4">
+                  <p className="text-[15px] font-medium">{formatDate(date)}</p>
+                  <p className="rounded-3xl py-1 px-2.5 text-xs font-medium bg-primary-200 text-primary-500">
+                    {daySlots.length} slot tersisa
+                  </p>
+                </div>
+                <div className="flex flex-wrap gap-x-3 gap-y-2">
+                  <For data={daySlots}>
+                    {(schedule) => (
+                      <div
+                        key={`${schedule.date}-${schedule.time}`}
+                        className={`px-3 py-2 text-xs rounded-md font-semibold ${
+                          schedule.available
+                            ? "bg-primary-300 text-primary-600"
+                            : "bg-neutral-200 text-neutral-400 line-through"
+                        }`}
+                      >
+                        {formatTime(schedule.time)}
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </div>
+            )}
+          </For>
+        </Show>
+
+        <hr className="border-primary-200" />
+
+        <Button type="button" size="sm" className="w-full" onClick={onBook}>
+          Book Your Senpai!
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-statistics.tsx

@@ -0,0 +1,43 @@
+import { StarFilled } from "@ant-design/icons";
+import { For } from "@imphnen-frontend-service/utils";
+import { useGetMentorStats } from "@imphnen-frontend-service/service";
+import { FC } from "react";
+
+type Props = {
+  mentorId?: string;
+};
+
+const formatCount = (n: number) => (n >= 1000 ? `${(n / 1000).toFixed(n >= 100000 ? 0 : 1)}k` : `${n}`);
+
+export const StatisticsSection: FC<Props> = ({ mentorId }) => {
+  const { data: stats } = useGetMentorStats(mentorId ?? "")
+
+  const SENPAI_STATISTIC: { name: string; count: string }[] = [
+    { name: 'Total Sessions', count: formatCount(stats?.total_sessions ?? 0) },
+    { name: 'Mentee Impact', count: formatCount(stats?.unique_mentees ?? 0) },
+    { name: 'Avg Rating', count: stats && stats.avg_rating > 0 ? `${stats.avg_rating}/5` : '-' },
+  ]
+
+  return (
+    <div className="md:mb-10">
+      <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Senpai Statistics</h2>
+      <div className="grid gap-4 xl:flex">
+        <For data={SENPAI_STATISTIC}>
+          {(item, index) => (
+            <div key={index} className="px-2.5 py-2 border border-primary-50 rounded-md shadow flex items-center gap-x-2.5">
+              <div
+                className="bg-gradient-to-tr from-primary-500 to-primary-200 rounded-sm text-white size-7 flex justify-center items-center xl:size-[29.4px]"
+              >
+                <StarFilled className="text-sm" />
+              </div>
+              <div>
+                <p className="text-[10px] text-neutral-600 font-medium md:text-xs xl:font-semibold">{item.count}</p>
+                <p className="text-[8px] text-neutral-800 md:text-[10px]">{item.name}</p>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+};

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/topics.tsx

@@ -0,0 +1,33 @@
+import { For } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+export const TOPICS = [
+  { id: 1, icon: '💼', name: 'Career & Self Development' },
+  { id: 2, icon: '🏢', name: 'Industry Insight' },
+  { id: 3, icon: '🗂️', name: 'Project Management & IT Tools' },
+  { id: 4, icon: '🖥️', name: 'Basic IT' },
+  { id: 5, icon: '💻', name: 'Programming/Software Dev' },
+  { id: 6, icon: '🗃️', name: 'Data & Database' },
+  { id: 7, icon: <span className="font-bold text-primary-500">AI</span>, name: 'AI Tips' }
+]
+
+export const TopicsSection: FC = () => {
+  return (
+    <div>
+      <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Topics</h2>
+      <div className="p-5 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-2.5">
+        <For data={TOPICS}>
+          {(item, index) => (
+            <div
+              key={index}
+              className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium"
+            >
+              <span>{item.icon} </span>
+              <span>{item.name}</span>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/page.tsx

@@ -0,0 +1,102 @@
+import { FC, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { ProfileSection } from './_components/sections/profile'
+import { StatisticsSection } from './_components/sections/senpai-statistics'
+import { TopicsSection } from './_components/sections/topics'
+import { ExperienceSection } from './_components/sections/experience'
+import { EducationSection } from './_components/sections/education'
+import { SenpaiScheduleSection } from './_components/sections/senpai-schedule'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { AppointmentModal } from './_components/modals/appointment'
+import { useGetMentorDetail } from '@imphnen-frontend-service/service'
+import { Show } from '@imphnen-frontend-service/utils'
+
+export const Components: FC = () => {
+  const [open, setOpen] = useState(false)
+  const { id } = useParams()
+  const { data: mentor, isLoading, isError } = useGetMentorDetail(id ?? '')
+
+  const buildResume = (): string => {
+    if (mentor?.bio) return mentor.bio
+    if (!mentor) return ''
+    const parts: string[] = []
+    const role = mentor.current_role
+    const company = mentor.current_company
+    const years = mentor.years_of_experience
+    const expertise = mentor.expertise
+    const industries = mentor.industries
+    const languages = mentor.languages
+
+    if (role || company) {
+      parts.push(`${role || 'Mentor'}${company && role ? ' at ' : company ? ' di ' : ''}${company || ''}.`)
+    }
+    if (years > 0) {
+      parts.push(`Memiliki pengalaman ${years} tahun di industri IT.`)
+    }
+    if (expertise.length > 0) {
+      parts.push(`Keahlian utama: ${expertise.join(', ')}.`)
+    }
+    if (industries.length > 0) {
+      parts.push(`Bidang yang digeluti: ${industries.join(', ')}.`)
+    }
+    if (languages.length > 0) {
+      parts.push(`Bahasa yang dikuasai: ${languages.join(', ')}.`)
+    }
+    if (parts.length === 0) {
+      return 'Profil senpai ini sedang dilengkapi. Segera cek kembali!'
+    }
+    return parts.join(' ')
+  }
+
+  const resume = buildResume()
+
+  return (
+    <main>
+      <Show
+        condition={!isLoading && !isError}
+        fallback={
+          <section className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20">
+            <div className="max-w-7xl mx-auto text-center text-neutral-500 py-10">
+              {isError ? 'Mentor tidak ditemukan' : 'Memuat profil mentor...'}
+            </div>
+          </section>
+        }
+      >
+        <section className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20">
+          <div className="max-w-7xl mx-auto space-y-8 md:bg-white xl:bg-transparent">
+            <ProfileSection onBook={() => setOpen(true)} mentor={mentor} />
+
+            <Button type="button" size="sm" className="w-full md:hidden" onClick={() => setOpen(true)}>
+              Book Your Senpai!
+            </Button>
+
+            <div className="bg-white px-4 py-5 md:px-8 md:pb-6 md:pt-0 xl:py-7 xl:flex xl:gap-x-10">
+              <div className="space-y-10 md:space-y-7 xl:flex-1">
+                <StatisticsSection mentorId={mentor?.id} />
+                <TopicsSection />
+
+                <div className="px-6 py-8 rounded-md shadow-md">
+                  <h2 className="text-xs text-neutral-800 font-semibold mb-5 md:text-[15px] xl:text-[19px]">Senpai Resume</h2>
+                  <p className="text-[10px] font-medium text-neutral-600 text-pretty md:text-[15px]">
+                    {resume || 'Profil senpai ini sedang dilengkapi. Segera cek kembali!'}
+                  </p>
+                </div>
+
+                <ExperienceSection />
+                <EducationSection />
+              </div>
+
+              <div className="hidden xl:block xl:w-[400px]">
+                <SenpaiScheduleSection onBook={() => setOpen(true)} mentorId={mentor?.id} />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <AppointmentModal open={open} setOpen={setOpen} mentorId={mentor?.id} mentor={mentor} />
+      </Show>
+    </main>
+  )
+}
+
+export default Components

apps/dimentorin/src/app/(public)/mentoring/_components/banner-section.tsx

@@ -0,0 +1,70 @@
+import { cn } from '@imphnen-frontend-service/utils';
+import { FC, useRef } from 'react';
+import { motion, useInView, Variants } from 'framer-motion';
+
+export const BannerSection: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20">
+      <motion.div
+        className={cn(
+          "relative max-w-7xl mx-auto bg-white p-6 rounded-lg overflow-hidden shadow-md",
+          "md:flex md:justify-between md:items-center md:px-5 md:rounded-xl lg:px-16 lg:py-10",
+        )}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+      >
+        <motion.div
+          className="hidden absolute -left-9 -top-24 w-[17rem] md:block lg:w-[28rem] lg:-left-14 lg:-top-52"
+          initial={{ x: -120, opacity: 0, rotate: -6 }}
+          animate={{ x: 0, opacity: 1, rotate: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <img src="/image/mentoring-banner.webp" alt="" className="w-full" />
+        </motion.div>
+        <motion.div
+          className="text-center md:text-start md:max-w-[calc(100%-14rem)] md:ms-auto lg:max-w-[calc(100%-20rem)]"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+          viewport={{ once: true }}
+        >
+          <motion.h1 className="mb-4 text-xl font-semibold text-primary-500 leading-tight md:text-2xl lg:text-5xl lg:font-bold lg:mb-6" variants={childVariants}>
+            Find your perfect sensei
+          </motion.h1>
+          <motion.p className="text-xs font-semibold text-neutral-500 md:text-[15px] md:font-medium lg:text-xl" variants={childVariants}>
+            Di sini, kamu nggak cuma grinding sendirian—sensei dari dunia nyata siap membimbingmu, dan AI mentor bakal jadi support system terbaikmu. Saatnya jadi protagonist dalam perjalanan karier IT-mu!
+          </motion.p>
+        </motion.div>
+      </motion.div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/_components/dashboard-layout.tsx

@@ -0,0 +1,162 @@
+import { FC, ReactElement } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { cn, SessionToken } from '@imphnen-frontend-service/utils';
+import {
+  DashboardOutlined,
+  CompassOutlined,
+  BookOutlined,
+  TeamOutlined,
+  SettingOutlined,
+  LogoutOutlined,
+  ReadOutlined,
+  ProfileOutlined,
+} from '@ant-design/icons';
+
+type NavItem = {
+  label: string;
+  to: string;
+  icon: ReactElement;
+  end?: boolean;
+};
+
+type DashboardSidebarProps = {
+  role: 'mentee' | 'mentor';
+};
+
+const MENTEE_NAV: NavItem[] = [
+  { label: 'Dashboard', to: '/mentoring/dashboard', icon: <DashboardOutlined />, end: true },
+  { label: 'Roadmap Discovery', to: '/mentoring/ai-agent', icon: <CompassOutlined /> },
+  { label: 'Learning Path', to: '/mentoring/materi', icon: <BookOutlined /> },
+  { label: 'Mentoring', to: '/mentoring/my-sessions', icon: <TeamOutlined /> },
+];
+
+const MENTOR_NAV: NavItem[] = [
+  { label: 'Dashboard', to: '/mentoring/mentor-dashboard', icon: <DashboardOutlined />, end: true },
+  { label: 'Mentoring Setup', to: '/mentoring/mentor-dashboard?tab=setup', icon: <SettingOutlined /> },
+  { label: 'List Mentee', to: '/mentoring/mentor-dashboard?tab=mentee', icon: <TeamOutlined /> },
+  { label: 'Feedback', to: '/mentoring/mentor-dashboard?tab=feedback', icon: <ProfileOutlined /> },
+];
+
+// decode JWT payload (bukan verifikasi — cuma untuk tampilkan inisial/email)
+const jwtPayload = (): { email?: string; name?: string } | null => {
+  const raw = SessionToken.get()?.token?.access_token;
+  if (!raw) return null;
+  try {
+    const part = raw.split('.')[1];
+    if (!part) return null;
+    const json = atob(part.replace(/-/g, '+').replace(/_/g, '/'));
+    const pad = json.length % 4 === 0 ? json : json + '='.repeat(4 - (json.length % 4));
+    return JSON.parse(pad);
+  } catch {
+    return null;
+  }
+};
+
+export const DashboardSidebar: FC<DashboardSidebarProps> = ({ role }): ReactElement => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const nav = role === 'mentee' ? MENTEE_NAV : MENTOR_NAV;
+
+  const isActive = (item: NavItem) => {
+    if (item.end) return location.pathname === item.to;
+    if (item.to.includes('?')) {
+      const [base, q] = item.to.split('?');
+      const [key, val] = q.split('=');
+      return location.pathname === base && new URLSearchParams(location.search).get(key) === val;
+    }
+    return location.pathname.startsWith(item.to);
+  };
+
+  const handleLogout = () => {
+    SessionToken.remove();
+    navigate('/');
+  };
+
+  return (
+    <aside className="hidden lg:flex w-[230px] shrink-0 flex-col bg-white border-r border-neutral-100 sticky top-0 h-screen">
+      <div className="px-6 py-6">
+        <p className="text-[19px] font-bold">
+          <span className="text-primary-500">Dimentorin</span>.dev
+        </p>
+      </div>
+
+      <nav className="flex-1 px-3 space-y-1">
+        {nav.map((item) => (
+          <Link
+            key={item.label}
+            to={item.to}
+            className={cn(
+              'flex items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
+              isActive(item)
+                ? 'bg-primary-100/70 text-primary-600'
+                : 'text-neutral-500 hover:bg-neutral-50 hover:text-neutral-700'
+            )}
+          >
+            <span className="text-base">{item.icon}</span>
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+
+      <div className="p-3 border-t border-neutral-100">
+        <button
+          type="button"
+          onClick={handleLogout}
+          className="flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium text-neutral-500 hover:bg-danger-50 hover:text-danger-500 transition-colors"
+        >
+          <LogoutOutlined /> Log Out
+        </button>
+      </div>
+    </aside>
+  );
+};
+
+export const DashboardHeader: FC<{ title?: string; role?: 'mentee' | 'mentor' }> = ({
+  title,
+  role,
+}): ReactElement => {
+  const payload = jwtPayload();
+  const name = payload?.name || payload?.email?.split('@')[0] || 'Pengguna';
+  const initial = name[0]?.toUpperCase() ?? 'U';
+  const roleLabel = role === 'mentor' ? 'Mentor' : 'Mentee';
+
+  return (
+    <header className="flex items-center justify-between gap-4 px-6 py-4 border-b border-neutral-100 bg-white/70 backdrop-blur sticky top-0 z-10">
+      <div>
+        {title && <h1 className="text-[19px] font-bold text-neutral-800">{title}</h1>}
+        <p className="text-xs text-neutral-400 hidden sm:block">Dimentorin.dev</p>
+      </div>
+      <div className="flex items-center gap-3">
+        <button type="button" aria-label="Notifications" className="size-9 rounded-full bg-neutral-50 hover:bg-neutral-100 flex items-center justify-center text-neutral-500">
+          <ReadOutlined />
+        </button>
+        <button type="button" aria-label="Settings" className="size-9 rounded-full bg-neutral-50 hover:bg-neutral-100 flex items-center justify-center text-neutral-500">
+          <SettingOutlined />
+        </button>
+        <div className="flex items-center gap-2">
+          <div className="size-9 rounded-full bg-primary-500 text-white flex items-center justify-center text-sm font-semibold">
+            {initial}
+          </div>
+          <div className="hidden sm:block">
+            <p className="text-sm font-semibold text-neutral-800 leading-tight">{name}</p>
+            <p className="text-xs text-neutral-400 capitalize">{roleLabel}</p>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export const DashboardLayout: FC<{
+  role: 'mentee' | 'mentor';
+  title?: string;
+  children: ReactElement | ReactElement[];
+}> = ({ role, title, children }): ReactElement => (
+  <div className="flex min-h-screen bg-primary-50/40">
+    <DashboardSidebar role={role} />
+    <div className="flex-1 min-w-0 flex flex-col">
+      <DashboardHeader title={title} role={role} />
+      <main className="flex-1 px-6 py-6 lg:px-8">{children}</main>
+    </div>
+  </div>
+);

apps/dimentorin/src/app/(public)/mentoring/_components/feedback-modal.tsx

@@ -0,0 +1,256 @@
+import { FC, ReactElement, useEffect, useState } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { cn, Show } from '@imphnen-frontend-service/utils';
+import { usePostSessionFeedback } from '@imphnen-frontend-service/service';
+import { StarFilled, StarOutlined } from '@ant-design/icons';
+import { toast } from 'sonner';
+
+const RATING_LABELS: Record<number, string> = {
+  1: 'Sangat Tidak Puas',
+  2: 'Tidak Puas',
+  3: 'Cukup Puas',
+  4: 'Puas',
+  5: 'Sangat Puas',
+};
+
+type FeedbackModalProps = {
+  open: boolean;
+  sessionId: string;
+  mentorName?: string | null;
+  onClose: () => void;
+  onSuccess: () => void;
+};
+
+const RATING_QUESTIONS: { question: string; options: string[] }[] = [
+  {
+    question: 'Seberapa membantu jawaban mentor untuk kebutuhanmu?',
+    options: [
+      'Tidak Membantu',
+      'Kurang Membantu',
+      'Cukup Membantu',
+      'Membantu',
+      'Sangat Membantu',
+    ],
+  },
+  {
+    question: 'Apakah kamu akan merekomendasikan platform ini ke rekanmu?',
+    options: ['Ya', 'Tidak', 'Mungkin'],
+  },
+];
+
+export const FeedbackModal: FC<FeedbackModalProps> = ({
+  open,
+  sessionId,
+  mentorName,
+  onClose,
+  onSuccess,
+}): ReactElement => {
+  const [step, setStep] = useState<'rating' | 'detail'>('rating');
+  const [rating, setRating] = useState(0);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [helpfulness, setHelpfulness] = useState('');
+  const [recommend, setRecommend] = useState('');
+  const [liked, setLiked] = useState('');
+  const [improve, setImprove] = useState('');
+  const [testimonial, setTestimonial] = useState('');
+
+  const mutation = usePostSessionFeedback(sessionId);
+
+  useEffect(() => {
+    if (open) {
+      setStep('rating');
+      setRating(0);
+      setHelpfulness('');
+      setRecommend('');
+      setLiked('');
+      setImprove('');
+      setTestimonial('');
+    }
+  }, [open]);
+
+  const handleSubmit = async () => {
+    const parts: string[] = [];
+    if (liked.trim()) parts.push(`Suka: ${liked.trim()}`);
+    if (improve.trim()) parts.push(`Tingkatkan: ${improve.trim()}`);
+    if (testimonial.trim()) parts.push(`Testimoni: ${testimonial.trim()}`);
+    if (helpfulness) parts.push(`Kebermanfaatan: ${helpfulness}`);
+    if (recommend) parts.push(`Rekomendasi: ${recommend}`);
+    const feedbackText = parts.join('. ') || 'Tidak ada komentar tambahan.';
+
+    try {
+      await mutation.mutateAsync({ rating, feedback: feedbackText });
+      toast.success('Feedback berhasil dikirim ✅ Terima kasih atas waktumu!');
+      onSuccess();
+      onClose();
+    } catch {
+      toast.error('Gagal mengirim feedback. Coba lagi ya, Senpai!');
+    }
+  };
+
+  const canNext =
+    rating > 0 && helpfulness !== '' && recommend !== '';
+  const canSubmit =
+    canNext || liked.trim() !== '' || improve.trim() !== '' || testimonial.trim() !== '';
+
+  return (
+    <Modal isOpen={open} onClose={onClose}>
+      <div className="p-6 w-full max-w-lg">
+        <div className="flex items-center justify-between mb-1">
+          <h2 className="text-[19px] font-bold text-neutral-800">
+            Feedback Mentor
+          </h2>
+          <span className="text-xs font-medium text-neutral-400">
+            {step === 'rating' ? '1 dari 2' : '2 dari 2'}
+          </span>
+        </div>
+        <p className="text-xs text-neutral-400 mb-4">
+          Sesi dengan {mentorName ?? 'mentormu'}
+        </p>
+
+        <Show
+          condition={step === 'rating'}
+          fallback={
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-2">
+                  Apa yang kamu suka dari sesi ini?
+                </label>
+                <textarea
+                  value={liked}
+                  onChange={(e) => setLiked(e.target.value)}
+                  rows={2}
+                  className="w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+                  placeholder="Ceritakan hal yang paling berkesan dari sesi ini..."
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-2">
+                  Apa yang bisa ditingkatkan oleh mentor?
+                </label>
+                <textarea
+                  value={improve}
+                  onChange={(e) => setImprove(e.target.value)}
+                  rows={2}
+                  className="w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+                  placeholder="Saran membangun untuk mentor..."
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-2">
+                  Testimoni atau ucapan terima kasih untuk mentor
+                </label>
+                <textarea
+                  value={testimonial}
+                  onChange={(e) => setTestimonial(e.target.value)}
+                  rows={2}
+                  className="w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+                  placeholder="Tulis testimoni singkat..."
+                />
+              </div>
+            </div>
+          }
+        >
+          <div className="space-y-5">
+            <div className="text-center">
+              <p className="text-sm font-medium text-neutral-700 mb-3">
+                Seberapa puas kamu dengan sesi mentoring ini?
+              </p>
+              <div className="flex justify-center gap-1.5">
+                {[1, 2, 3, 4, 5].map((value) => (
+                  <button
+                    key={value}
+                    type="button"
+                    aria-label={`Rating ${value}`}
+                    onMouseEnter={() => setHoverRating(value)}
+                    onMouseLeave={() => setHoverRating(0)}
+                    onClick={() => setRating(value)}
+                    className={cn(
+                      'text-2xl transition-colors',
+                      (hoverRating || rating) >= value
+                        ? 'text-warning-400'
+                        : 'text-neutral-200'
+                    )}
+                  >
+                    {(hoverRating || rating) >= value ? <StarFilled /> : <StarOutlined />}
+                  </button>
+                ))}
+              </div>
+              <p className="mt-2 text-xs text-neutral-500">
+                {rating > 0 ? RATING_LABELS[rating] : '1 = Sangat Tidak Puas, 5 = Sangat Puas'}
+              </p>
+            </div>
+
+            {RATING_QUESTIONS.map((q) => (
+              <div key={q.question}>
+                <p className="text-sm font-medium text-neutral-700 mb-2">{q.question}</p>
+                <div className="flex flex-wrap gap-2">
+                  {q.options.map((opt) => {
+                    const isSelected =
+                      (q.question === RATING_QUESTIONS[0].question
+                        ? helpfulness
+                        : recommend) === opt;
+                    const setter =
+                      q.question === RATING_QUESTIONS[0].question
+                        ? setHelpfulness
+                        : setRecommend;
+                    return (
+                      <button
+                        key={opt}
+                        type="button"
+                        onClick={() => setter(opt)}
+                        className={cn(
+                          'rounded-full border px-4 py-1.5 text-xs font-medium transition-colors',
+                          isSelected
+                            ? 'border-primary-500 bg-primary-100/60 text-primary-600'
+                            : 'border-neutral-200 text-neutral-500 hover:border-primary-300'
+                        )}
+                      >
+                        {opt}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Show>
+
+        <div className="mt-6 flex justify-between gap-3">
+          <Button
+            type="button"
+            size="sm"
+            variant="bordered"
+            onClick={step === 'rating' ? onClose : () => setStep('rating')}
+          >
+            {step === 'rating' ? 'Batal' : 'Kembali'}
+          </Button>
+          <Show
+            condition={step === 'rating'}
+            fallback={
+              <Button
+                type="button"
+                size="sm"
+                disabled={mutation.isPending || !canSubmit}
+                onClick={handleSubmit}
+              >
+                {mutation.isPending ? 'Mengirim...' : 'Kirim'}
+              </Button>
+            }
+          >
+            <Button
+              type="button"
+              size="sm"
+              disabled={!canNext}
+              onClick={() => setStep('detail')}
+            >
+              Lanjut
+            </Button>
+          </Show>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default FeedbackModal;

apps/dimentorin/src/app/(public)/mentoring/_components/mentor-avatar.tsx

@@ -0,0 +1,69 @@
+import { FC } from 'react';
+import { cn } from '@imphnen-frontend-service/utils';
+
+type TMentorAvatarProps = {
+  name: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  textClassName?: string;
+};
+
+// Warna gradient unik per nama — hash nama → pasangan warna dari palet brand
+const GRADIENTS: [string, string][] = [
+  ['#23a1eb', '#0b5b8c'],
+  ['#5b8def', '#3a3f8f'],
+  ['#14b8a6', '#0f766e'],
+  ['#8b5cf6', '#5b21b6'],
+  ['#f59e0b', '#b45309'],
+  ['#ef4444', '#991b1b'],
+  ['#ec4899', '#9d174d'],
+  ['#06b6d4', '#0e7490'],
+];
+
+const SIZES: Record<'sm' | 'md' | 'lg', string> = {
+  sm: 'size-[60px] text-lg md:size-10 lg:size-12',
+  md: 'size-16 text-xl md:size-20',
+  lg: 'size-24 text-3xl md:size-32 lg:size-40 md:text-4xl lg:text-5xl',
+};
+
+const getInitials = (name: string): string => {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '?';
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+};
+
+const getGradient = (name: string): string => {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
+  }
+  const [from, to] = GRADIENTS[hash % GRADIENTS.length];
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+};
+
+export const MentorAvatar: FC<TMentorAvatarProps> = ({
+  name,
+  size = 'md',
+  className,
+  textClassName,
+}) => {
+  const displayName = name || 'Mentor';
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center rounded-md overflow-hidden shrink-0 select-none',
+        SIZES[size],
+        className
+      )}
+      style={{ background: getGradient(displayName) }}
+      aria-label={`Avatar ${displayName}`}
+    >
+      <span
+        className={cn('font-semibold text-white drop-shadow-sm', textClassName)}
+      >
+        {getInitials(displayName)}
+      </span>
+    </div>
+  );
+};

apps/dimentorin/src/app/(public)/mentoring/_components/mentor-card.tsx

@@ -0,0 +1,74 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { For } from '@imphnen-frontend-service/utils';
+import { TMentorDetail } from '@imphnen-frontend-service/service';
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { MentorAvatar } from './mentor-avatar';
+
+type TMentorCardProps = {
+  mentor: TMentorDetail;
+};
+
+export const MentorCard: FC<TMentorCardProps> = ({ mentor }) => {
+  const experience =
+    mentor.years_of_experience > 0
+      ? `${mentor.years_of_experience} Years Experience`
+      : 'New Mentor';
+  const role = mentor.current_role || 'Mentor';
+  const company = mentor.current_company || 'IMPHNEN';
+  const softSkills = mentor.expertise || [];
+  const shownSkills = softSkills.slice(0, 2);
+  const extraCount = Math.max(0, softSkills.length - shownSkills.length);
+
+  return (
+    <div className="p-2.5 rounded-md bg-white shadow flex gap-x-4 items-start md:p-4 md:flex-col md:rounded-lg md:gap-y-4">
+      <MentorAvatar
+        name={mentor.fullname ?? mentor.legal_name ?? 'Mentor'}
+        size="sm"
+        className="md:w-full md:h-auto md:aspect-square"
+      />
+      <div>
+        <Button variant="text" size="sm" className="bg-primary-100 h-auto px-1.5 py-1 text-[8px] font-normal mb-2 hover:bg-primary-100 md:text-[10px] md:font-medium md:mb-4">
+          {experience}
+        </Button>
+        <h2 className="mb-1">
+          <Link to={`/mentoring/${mentor.id}`} className="text-xs font-semibold text-primary-500 md:text-[15px] md:font-semibold lg:text-[19px]">
+            {mentor.fullname || mentor.legal_name || 'Mentor'}
+          </Link>
+        </h2>
+        <p className="text-[8px] text-neutral-500 mb-3 md:text-[10px] md:font-medium md:mb-4 lg:text-xs">
+          {role} at {company}
+        </p>
+
+        {softSkills.length > 0 && (
+          <div>
+            <p className="text-[8px] text-neutral-500 mb-1 md:mb-2 lg:text-[10px]">Soft Skills :</p>
+            <div className="space-x-2">
+              <For data={shownSkills}>
+                {(skill) => (
+                  <Button
+                    key={skill}
+                    variant="text"
+                    size="sm"
+                    className="bg-primary-200 h-auto px-1.5 py-1 text-[8px] font-normal hover:bg-primary-200 lg:text-[10px]"
+                  >
+                    {skill}
+                  </Button>
+                )}
+              </For>
+              {extraCount > 0 && (
+                <Button
+                  variant="text"
+                  size="sm"
+                  className="h-auto px-1.5 py-1 text-[8px] font-normal text-neutral-500 hover:bg-transparent lg:text-[10px]"
+                >
+                  +{extraCount}
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/_components/topics.tsx

@@ -0,0 +1,73 @@
+import { CloudServerOutlined, CodeOutlined, DatabaseOutlined, ProjectOutlined, TabletOutlined } from '@ant-design/icons'
+import { Icon } from '@iconify/react'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { For } from '@imphnen-frontend-service/utils'
+import { FC, ReactElement, useRef } from 'react'
+import { motion, useInView, Variants } from 'framer-motion'
+
+const TOPICS: {
+  name: string
+  icon: React.ReactNode
+}[] = [
+  { name: 'UI/UX & Design', icon: <TabletOutlined /> },
+  { name: 'Software/Web Dev', icon: <CodeOutlined /> },
+  { name: 'Data & AI', icon: <DatabaseOutlined /> },
+  { name: 'Cloud & DevOps', icon: <CloudServerOutlined /> },
+  { name: 'Cybersecurity', icon: <Icon icon="mage:security-shield" /> },
+  { name: 'IT & Networking', icon: <Icon icon="carbon:data-structured" /> },
+  { name: 'Project Management', icon: <ProjectOutlined /> },
+  { name: 'QA & Testing', icon: <Icon icon="carbon:exam-mode" /> }
+]
+
+export const Topics: FC = (): ReactElement => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.3,
+        delay: 0.4,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <div ref={ref}>
+      <motion.div
+        className="grid grid-cols-4 gap-6 px-3 md:px-12 md:gap-x-10 md:gap-y-14 lg:grid-cols-8 lg:px-0"
+        variants={containerVariants}
+        initial="hidden"
+        animate={isInView ? 'visible' : 'hidden'}
+      >
+        <For data={TOPICS}>
+          {(topic) => (
+            <motion.div key={topic.name} className="flex flex-col items-center" variants={childVariants}>
+              <Button variant="secondary" size='sm' className="size-7 mb-3 p-0 md:mb-4 md:size-8 md:text-base lg:size-10 lg:text-lg">
+                {topic.icon}
+              </Button>
+              <p className="text-[8px] text-neutral-700 text-center break-words md:text-xs md:font-medium lg:text-[15px]">
+                {topic.name}
+              </p>
+            </motion.div>
+          )}
+        </For>
+      </motion.div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx

@@ -0,0 +1,154 @@
+import { FC, ReactElement, useRef, useState } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { SendOutlined } from '@ant-design/icons';
+import { usePostChat } from '@imphnen-frontend-service/service';
+import type { TChatResponse } from '@imphnen-frontend-service/service';
+
+type Message = {
+  role: 'user' | 'assistant';
+  content: string;
+  sources?: TChatResponse['sources'];
+};
+
+export const Components: FC = (): ReactElement => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const chatMutation = usePostChat();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSend = async () => {
+    const question = input.trim();
+    if (!question || loading) return;
+    setInput('');
+    setMessages((m) => [...m, { role: 'user', content: question }]);
+    setLoading(true);
+    try {
+      const res = await chatMutation.mutateAsync({ question });
+      setMessages((m) => [
+        ...m,
+        { role: 'assistant', content: res.answer, sources: res.sources },
+      ]);
+    } catch {
+      setMessages((m) => [
+        ...m,
+        {
+          role: 'assistant',
+          content: 'Maaf, terjadi kesalahan saat menjawab. Coba lagi ya.',
+        },
+      ]);
+    } finally {
+      setLoading(false);
+      inputRef.current?.focus();
+    }
+  };
+
+  return (
+    <main className="px-4 md:px-20 py-10">
+      <div className="mb-6">
+        <h1 className="text-3xl font-semibold text-primary-500 mb-2">
+          AI Agent Mentoring
+        </h1>
+        <p className="text-neutral-500">
+          Tanya apa saja tentang materi mentoring — jawaban diambil langsung
+          dari konten materi yang tersedia (RAG).
+        </p>
+      </div>
+
+      <div className="bg-white rounded-2xl border border-neutral-100 shadow-sm max-w-3xl mx-auto">
+        {/* Chat body */}
+        <div className="h-[420px] overflow-y-auto p-5 space-y-4">
+          {messages.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center text-center">
+              <div className="size-14 rounded-full bg-primary-50 flex items-center justify-center mb-3">
+                <SendOutlined className="text-primary-500 text-xl" />
+              </div>
+              <p className="text-sm text-neutral-400 max-w-sm">
+                Coba tanya: <i>&ldquo;Apa itu ownership di Rust?&rdquo;</i>{' '}
+                atau <i>&ldquo;Gimana cara buat route di Axum?&rdquo;</i>
+              </p>
+            </div>
+          ) : (
+            messages.map((msg, idx) => (
+              <div
+                key={idx}
+                className={
+                  msg.role === 'user'
+                    ? 'flex justify-end'
+                    : 'flex justify-start'
+                }
+              >
+                <div
+                  className={
+                    msg.role === 'user'
+                      ? 'bg-primary-500 text-white rounded-2xl rounded-br-sm px-4 py-2.5 max-w-[80%] text-sm whitespace-pre-wrap'
+                      : 'bg-neutral-50 border border-neutral-100 rounded-2xl rounded-bl-sm px-4 py-2.5 max-w-[85%] text-sm text-neutral-700 whitespace-pre-wrap'
+                  }
+                >
+                  {msg.content}
+                  {msg.sources && msg.sources.length > 0 && (
+                    <div className="mt-3 pt-2 border-t border-neutral-200">
+                      <p className="text-[10px] uppercase tracking-wide text-neutral-400 mb-1">
+                        Sumber materi
+                      </p>
+                      {msg.sources.map((s, i) => (
+                        <div
+                          key={i}
+                          className="flex items-center justify-between gap-2 mb-1"
+                        >
+                          <span className="text-[12px] text-neutral-600 truncate">
+                            📄 {s.title}
+                          </span>
+                          <span className="text-[10px] text-neutral-400 shrink-0">
+                            {Math.round(s.score * 100)}%
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+          {loading && (
+            <div className="flex justify-start">
+              <div className="bg-neutral-50 border border-neutral-100 rounded-2xl rounded-bl-sm px-4 py-2.5 text-sm text-neutral-400">
+                <span className="inline-flex gap-1">
+                  <span className="animate-bounce">●</span>
+                  <span className="animate-bounce [animation-delay:0.1s]">
+                    ●
+                  </span>
+                  <span className="animate-bounce [animation-delay:0.2s]">
+                    ●
+                  </span>
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Input */}
+        <div className="border-t border-neutral-100 p-4 flex gap-2">
+          <input
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+            placeholder="Tanya tentang materi mentoring..."
+            className="flex-1 px-4 py-2.5 rounded-xl border border-neutral-200 focus:border-primary-400 focus:outline-none text-sm"
+          />
+          <Button
+            variant="primary"
+            className="shrink-0"
+            onClick={handleSend}
+            disabled={loading || !input.trim()}
+          >
+            <SendOutlined />
+          </Button>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/(public)/mentoring/dashboard/page.tsx

@@ -0,0 +1,128 @@
+import { FC, ReactElement } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Show, cn, SessionToken } from '@imphnen-frontend-service/utils';
+import {
+  useGetMySessions,
+  useGetMaterialsList,
+  useGetArticles,
+} from '@imphnen-frontend-service/service';
+import { DashboardLayout } from '../_components/dashboard-layout';
+import {
+  VideoCameraOutlined,
+  FileDoneOutlined,
+  CheckCircleOutlined,
+  ArrowRightOutlined,
+} from '@ant-design/icons';
+
+const StatCard: FC<{ icon: ReactElement; label: string; value: number | string }> = ({
+  icon,
+  label,
+  value,
+}): ReactElement => (
+  <div className="bg-white rounded-xl p-5 border border-neutral-100 shadow-sm">
+    <div className="flex items-center gap-3">
+      <div className="size-10 rounded-lg bg-primary-100 text-primary-500 flex items-center justify-center text-lg">
+        {icon}
+      </div>
+      <div>
+        <p className="text-[23px] font-bold text-neutral-800 leading-none">{value}</p>
+        <p className="text-xs text-neutral-500 mt-1">{label}</p>
+      </div>
+    </div>
+  </div>
+);
+
+const DashboardPage: FC = (): ReactElement => {
+  const { data: sessions } = useGetMySessions();
+  const { data: materials } = useGetMaterialsList();
+  const { data: articles } = useGetArticles({});
+
+  const sessionCount = sessions?.sessions?.length ?? 0;
+  const completed = sessions?.sessions?.filter((s) => s.status === 'completed').length ?? 0;
+  const mats = materials?.data ?? [];
+  const totalSteps = mats.length || 1;
+  const doneSteps = Math.ceil(totalSteps * 0.35);
+  const progress = Math.round((doneSteps / totalSteps) * 100);
+
+  return (
+    <DashboardLayout role="mentee">
+      {/* Welcome banner */}
+      <div className="relative overflow-hidden rounded-2xl bg-primary-500 text-white px-8 py-8 md:px-10">
+        <div className="relative z-10 max-w-lg">
+          <h2 className="text-[23px] font-bold md:text-[29px] leading-tight">
+            Selamat Datang di Dimentorin.dev
+          </h2>
+          <p className="mt-3 text-sm text-primary-100 leading-relaxed">
+            Temukan roadmap belajar impianmu lewat Skill Discovery, lalu biarkan
+            AI dan mentor profesional membimbingmu step by step sampai jadi
+            Full Stack Developer 🚀
+          </p>
+          <Link to="/mentoring/ai-agent" className="mt-6 inline-block">
+            <Button variant="secondary" size="lg" className="gap-2">
+              Temukan Roadmapnya <ArrowRightOutlined />
+            </Button>
+          </Link>
+        </div>
+        <div className="absolute -right-8 -bottom-8 size-48 rounded-full bg-primary-400/40 blur-2xl" />
+        <div className="absolute -right-4 -top-10 size-32 rounded-full bg-white/10 blur-xl" />
+        <div className="absolute right-16 bottom-4 hidden md:flex size-20 items-center justify-center rounded-2xl bg-white/15 border border-white/20 text-3xl">
+          🎓
+        </div>
+      </div>
+
+      {/* Overview */}
+      <section className="mt-6">
+        <h3 className="text-[19px] font-semibold text-neutral-800 mb-4">Overview</h3>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <StatCard icon={<VideoCameraOutlined />} label="Mentoring Session" value={sessionCount} />
+          <StatCard icon={<FileDoneOutlined />} label="Article Submitted" value={articles?.length ?? 0} />
+          <StatCard icon={<CheckCircleOutlined />} label="Article Published" value={completed} />
+        </div>
+      </section>
+
+      {/* Roadmaps / Learning Path progress */}
+      <section className="mt-8">
+        <h3 className="text-[19px] font-semibold text-neutral-800 mb-4">Roadmaps</h3>
+        <Show
+          condition={mats.length > 0}
+          fallback={
+            <div className="bg-white rounded-xl border border-neutral-100 shadow-sm p-8 text-center">
+              <p className="text-neutral-500 mb-4">Belum ada materi roadmap.</p>
+              <Link to="/mentoring/ai-agent">
+                <Button variant="primary" className="gap-2">
+                  Mulai Skill Discovery <ArrowRightOutlined />
+                </Button>
+              </Link>
+            </div>
+          }
+        >
+          <div className="bg-white rounded-xl p-6 border border-neutral-100 shadow-sm">
+            <div className="flex flex-wrap items-center justify-between gap-4 mb-4">
+              <div>
+                <p className="font-semibold text-neutral-800">Front End Basic</p>
+                <p className="text-sm text-neutral-500 mt-0.5">
+                  {doneSteps} of {totalSteps} steps milestone completed
+                </p>
+              </div>
+              <Link to="/mentoring/materi">
+                <Button size="sm" variant="bordered" className="gap-1">
+                  Lanjut Belajar <ArrowRightOutlined />
+                </Button>
+              </Link>
+            </div>
+            <div className="h-2.5 rounded-full bg-neutral-100 overflow-hidden">
+              <div
+                className={cn('h-full rounded-full bg-primary-500 transition-all')}
+                style={{ width: `${Math.min(progress, 100)}%` }}
+              />
+            </div>
+            <div className="mt-2 text-right text-xs text-neutral-400">{progress}%</div>
+          </div>
+        </Show>
+      </section>
+    </DashboardLayout>
+  );
+};
+
+export default DashboardPage;

apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx

@@ -0,0 +1,53 @@
+import { FC, ReactElement } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useGetMaterialBySlug } from '@imphnen-frontend-service/service';
+
+export const Components: FC = (): ReactElement => {
+  const { slug } = useParams<{ slug: string }>();
+  const { data: material, isLoading } = useGetMaterialBySlug(slug ?? '');
+
+  return (
+    <main className="px-4 md:px-20 py-10">
+      <Link to="/mentoring/materi" className="inline-block mb-6">
+        <Button size="sm" variant="text">
+          <ArrowLeftOutlined /> Kembali ke Materi
+        </Button>
+      </Link>
+
+      {isLoading || !material ? (
+        <div className="animate-pulse bg-neutral-100 h-72 rounded-2xl" />
+      ) : (
+        <article className="max-w-3xl">
+          <span className="inline-block px-2 py-0.5 rounded-full text-[12px] font-medium mb-3 bg-neutral-100 text-neutral-600">
+            {material.category}
+          </span>
+          <h1 className="text-3xl font-semibold text-neutral-800 mb-3">
+            {material.title}
+          </h1>
+          <p className="text-neutral-500 mb-6">{material.description}</p>
+          <div className="bg-white rounded-2xl border border-neutral-100 p-8 shadow-sm">
+            {/* SAFE: all '<' escaped to &lt; below, no raw HTML passes through */}
+            <div
+              className="prose prose-sm max-w-none prose-neutral"
+              dangerouslySetInnerHTML={{
+                __html: material.content
+                  .split('\n')
+                  .map((p) => p.trim())
+                  .filter(Boolean)
+                  .map(
+                    (p) =>
+                      `<p class="mb-3 text-neutral-700 leading-relaxed">${p.replace(/</g, '&lt;')}</p>`
+                  )
+                  .join(''),
+              }}
+            />
+          </div>
+        </article>
+      )}
+    </main>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx

@@ -0,0 +1,92 @@
+import { FC, ReactElement } from 'react';
+import { Link } from 'react-router-dom';
+import { Show } from '@imphnen-frontend-service/utils';
+import {
+  useGetMaterialCategories,
+  useGetMaterialsList,
+} from '@imphnen-frontend-service/service';
+
+const CATEGORY_COLORS: Record<string, string> = {
+  Backend: 'bg-primary-100 text-primary-700',
+  Frontend: 'bg-info-100 text-info-800',
+  Data: 'bg-success-100 text-success-700',
+  Mobile: 'bg-warning-100 text-warning-800',
+  Cybersecurity: 'bg-danger-100 text-danger-700',
+  Default: 'bg-neutral-100 text-neutral-600',
+};
+
+export const Components: FC = (): ReactElement => {
+  const { data: materials, isLoading } = useGetMaterialsList();
+  const { data: categories } = useGetMaterialCategories();
+
+  return (
+    <main className="px-4 md:px-20 py-10">
+      <div className="mb-8">
+        <h1 className="text-3xl font-semibold text-primary-500 mb-2">
+          Materi Mentoring
+        </h1>
+        <p className="text-neutral-500">
+          Kumpulan materi dari para mentor IMPHNEN untuk memperdalam
+          keterampilan kamu.
+        </p>
+      </div>
+
+      {/* Category filter chips */}
+      <Show condition={!!categories?.length}>
+        <div className="flex flex-wrap gap-2 mb-6">
+          {categories?.map((cat) => (
+            <span
+              key={cat}
+              className={`px-3 py-1 rounded-full text-xs font-medium ${
+                CATEGORY_COLORS[cat] ?? CATEGORY_COLORS.Default
+              }`}
+            >
+              {cat}
+            </span>
+          ))}
+        </div>
+      </Show>
+
+      {isLoading ? (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {[0, 1, 2].map((i) => (
+            <div
+              key={i}
+              className="animate-pulse bg-neutral-100 h-44 rounded-2xl"
+            />
+          ))}
+        </div>
+      ) : !materials?.data?.length ? (
+        <p className="text-neutral-400">Belum ada materi tersedia.</p>
+      ) : (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {materials.data.map((m) => {
+            const color =
+              CATEGORY_COLORS[m.category] ?? CATEGORY_COLORS.Default;
+            return (
+              <Link
+                key={m.id}
+                to={`/mentoring/materi/${m.slug}`}
+                className="group bg-white rounded-2xl border border-neutral-100 p-6 shadow-sm hover:shadow-md transition-shadow"
+              >
+                <span
+                  className={`inline-block px-2 py-0.5 rounded-full text-[12px] font-medium mb-3 ${color}`}
+                >
+                  {m.category}
+                </span>
+                <h3 className="font-semibold text-neutral-800 group-hover:text-primary-500 transition-colors leading-snug mb-2">
+                  {m.title}
+                </h3>
+                <p className="text-xs text-neutral-500 leading-relaxed line-clamp-2">
+                  {m.description}
+                </p>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </main>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx

@@ -0,0 +1,435 @@
+import { FC, ReactElement, useMemo } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { For, Show, cn, SessionToken } from '@imphnen-frontend-service/utils';
+import {
+  useGetMentorMe,
+  useGetMentorStats,
+  useGetMentorSessions,
+  useGetSessionPayments,
+  usePostConfirmPayment,
+  usePostRefreshPayment,
+} from '@imphnen-frontend-service/service';
+import {
+  ReloadOutlined,
+  CheckOutlined,
+  StarOutlined,
+  CheckCircleOutlined,
+  TeamOutlined,
+  MessageOutlined,
+  CalendarOutlined,
+  ClockCircleOutlined,
+  DollarOutlined,
+} from '@ant-design/icons';
+import { toast } from 'sonner';
+import { DashboardLayout } from '../_components/dashboard-layout';
+
+const STATUS_STYLE: Record<string, string> = {
+  pending: 'bg-warning-100 text-warning-800',
+  confirmed: 'bg-success-100 text-success-700',
+  completed: 'bg-primary-100 text-primary-700',
+  cancelled: 'bg-danger-100 text-danger-600',
+};
+
+const PAYMENT_STYLE: Record<string, string> = {
+  pending: 'bg-warning-100 text-warning-800',
+  paid: 'bg-success-100 text-success-700',
+  expired: 'bg-neutral-200 text-neutral-600',
+};
+
+const formatDate = (iso: string) => {
+  try {
+    return new Date(iso).toLocaleString('id-ID', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return iso;
+  }
+};
+
+const formatRupiah = (n: number) =>
+  new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    maximumFractionDigits: 0,
+  }).format(n);
+
+const StatCard: FC<{ icon: ReactElement; label: string; value: number | string }> = ({
+  icon,
+  label,
+  value,
+}): ReactElement => (
+  <div className="bg-white rounded-xl p-5 border border-neutral-100 shadow-sm">
+    <div className="flex items-center gap-3">
+      <div className="size-10 rounded-lg bg-primary-100 text-primary-500 flex items-center justify-center text-lg">
+        {icon}
+      </div>
+      <div>
+        <p className="text-[23px] font-bold text-neutral-800 leading-none">{value}</p>
+        <p className="text-xs text-neutral-500 mt-1">{label}</p>
+      </div>
+    </div>
+  </div>
+);
+
+const TABS = [
+  { key: 'sessions', label: 'Sesi Masuk' },
+  { key: 'setup', label: 'Mentoring Setup' },
+  { key: 'mentee', label: 'List Mentee' },
+  { key: 'feedback', label: 'Feedback' },
+];
+
+const SessionCard: FC<{ sessionId: string }> = ({ sessionId }) => {
+  const { data: payments } = useGetSessionPayments(sessionId);
+  const refreshPayment = usePostRefreshPayment();
+  const confirmPayment = usePostConfirmPayment();
+
+  const payment = (payments ?? [])[0];
+
+  return (
+    <Show condition={!!payment && payment.status === 'pending'}>
+      <div className="flex flex-wrap items-center justify-between gap-2 px-3 py-2 rounded-md text-xs font-medium bg-neutral-50 border border-neutral-100">
+        <span
+          className={cn(
+            'px-2 py-0.5 rounded-full capitalize',
+            PAYMENT_STYLE[payment?.status ?? ''] ?? ''
+          )}
+        >
+          Pembayaran: {payment?.status}
+        </span>
+        <span>{payment ? formatRupiah(payment.total) : ''}</span>
+        <div className="flex gap-2">
+          <Show condition={!!payment && payment.provider === 'midtrans'}>
+            <Button
+              size="sm"
+              variant="secondary"
+              className="gap-2"
+              disabled={refreshPayment.isPending}
+              onClick={async () => {
+                try {
+                  if (payment) await refreshPayment.mutateAsync(payment.id);
+                  toast.success('Status pembayaran diperbarui');
+                } catch {
+                  toast.error('Gagal memperbarui status');
+                }
+              }}
+            >
+              <ReloadOutlined /> Refresh
+            </Button>
+          </Show>
+          <Button
+            size="sm"
+            variant="success"
+            className="gap-2"
+            disabled={confirmPayment.isPending}
+            onClick={async () => {
+              try {
+                if (payment) await confirmPayment.mutateAsync(payment.id);
+                toast.success('Pembayaran dikonfirmasi ✅');
+              } catch {
+                toast.error('Gagal mengonfirmasi pembayaran');
+              }
+            }}
+          >
+            <CheckOutlined /> Konfirmasi
+          </Button>
+        </div>
+      </div>
+    </Show>
+  );
+};
+
+export const Components: FC = (): ReactElement => {
+  const { data: mentor, isLoading: loadingMentor } = useGetMentorMe();
+  const mentorId = mentor?.id ?? '';
+  const { data: stats } = useGetMentorStats(mentorId);
+  const { data: sessions, isLoading } = useGetMentorSessions(mentorId);
+  const [params, setParams] = useSearchParams();
+  const tab = params.get('tab') ?? 'sessions';
+
+  const all = sessions?.sessions ?? [];
+  const sessionCount = all.length;
+  const completedCount = all.filter((s) => s.status === 'completed').length;
+  const confirmedCount = all.filter((s) => s.status === 'confirmed').length;
+  const pendingCount = all.filter((s) => s.status === 'pending').length;
+  const menteeCount = new Set(
+    all.map((s) => s.mentee_email ?? s.mentee_fullname ?? '')
+  ).size;
+
+  const isMentor = !loadingMentor && !!mentor;
+
+  const setTab = (key: string) => {
+    if (key === 'sessions') params.delete('tab');
+    else params.set('tab', key);
+    setParams(params, { replace: true });
+  };
+
+  const content = useMemo(() => {
+    switch (tab) {
+      case 'setup':
+        return (
+          <div className="bg-white rounded-xl p-8 border border-neutral-100 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="size-11 rounded-xl bg-primary-100 text-primary-500 flex items-center justify-center text-xl">
+                <CalendarOutlined />
+              </div>
+              <div>
+                <h3 className="font-semibold text-neutral-800">Mentoring Setup</h3>
+                <p className="text-sm text-neutral-500">
+                  Atur jadwal sesi & topik mentoring kamu.
+                </p>
+              </div>
+            </div>
+            <div className="grid sm:grid-cols-2 gap-4">
+              <div className="rounded-lg border border-neutral-100 p-5">
+                <p className="text-sm font-medium text-neutral-700 mb-3 flex items-center gap-2">
+                  <ClockCircleOutlined className="text-primary-500" /> Waktu Sesi
+                </p>
+                <p className="text-xs text-neutral-500">
+                  Sesi mentoring kamu berjalan {confirmedCount > 0 ? `${confirmedCount} terkunci` : 'belum ada yang terkunci'}. Jadwal sesi tampil otomatis setelah mentee booking & pembayaran lunas.
+                </p>
+              </div>
+              <div className="rounded-lg border border-neutral-100 p-5">
+                <p className="text-sm font-medium text-neutral-700 mb-3 flex items-center gap-2">
+                  <DollarOutlined className="text-primary-500" /> Monetization
+                </p>
+                <p className="text-xs text-neutral-500">
+                  {pendingCount > 0
+                    ? `${pendingCount} sesi menunggu konfirmasi pembayaran.`
+                    : 'Tidak ada sesi menunggu pembayaran saat ini.'}
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      case 'mentee':
+        return (
+          <div className="bg-white rounded-xl p-8 border border-neutral-100 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="size-11 rounded-xl bg-primary-100 text-primary-500 flex items-center justify-center text-xl">
+                <TeamOutlined />
+              </div>
+              <div>
+                <h3 className="font-semibold text-neutral-800">List Mentee</h3>
+                <p className="text-sm text-neutral-500">
+                  {menteeCount} mentee unik pernah mengikuti sesimu.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3">
+              <For data={all.slice(0, 8)}>
+                {(session) => (
+                  <div
+                    key={session.id}
+                    className="flex items-center justify-between gap-3 rounded-lg border border-neutral-100 px-4 py-3"
+                  >
+                    <div className="flex items-center gap-3 min-w-0">
+                      <div className="size-9 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold shrink-0">
+                        {(session.mentee_fullname ?? session.mentee_email ?? 'M')
+                          .charAt(0)
+                          .toUpperCase()}
+                      </div>
+                      <div className="min-w-0">
+                        <p className="text-sm font-medium text-neutral-800 truncate">
+                          {session.mentee_fullname ?? session.mentee_email ?? 'Mentee'}
+                        </p>
+                        <p className="text-xs text-neutral-400 truncate">{session.topic}</p>
+                      </div>
+                    </div>
+                    <span
+                      className={cn(
+                        'shrink-0 px-2.5 py-1 rounded-full text-xs capitalize font-medium',
+                        STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
+                      )}
+                    >
+                      {session.status}
+                    </span>
+                  </div>
+                )}
+              </For>
+              {all.length === 0 && (
+                <p className="text-sm text-neutral-500 text-center py-6">
+                  Belum ada mentee yang mengikuti sesimu.
+                </p>
+              )}
+            </div>
+          </div>
+        );
+      case 'feedback':
+        return (
+          <div className="bg-white rounded-xl p-8 border border-neutral-100 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="size-11 rounded-xl bg-primary-100 text-primary-500 flex items-center justify-center text-xl">
+                <MessageOutlined />
+              </div>
+              <div>
+                <h3 className="font-semibold text-neutral-800">Feedback</h3>
+                <p className="text-sm text-neutral-500">
+                  Rating & feedback dari mentee setelah sesi selesai.
+                </p>
+              </div>
+            </div>
+            <div className="rounded-lg border border-neutral-100 p-6 text-center">
+              <p className="text-3xl mb-2">⭐</p>
+              <p className="text-sm text-neutral-500">
+                Feedback mentee akan muncul di sini setelah sesi selesai
+                ({completedCount} sesi selesai).
+              </p>
+            </div>
+          </div>
+        );
+      default:
+        return (
+          <div className="grid gap-4 md:grid-cols-2">
+            <For data={all}>
+              {(session) => (
+                <div
+                  key={session.id}
+                  className="bg-white rounded-lg p-5 shadow-sm border border-neutral-100"
+                >
+                  <div className="flex justify-between items-start gap-3 mb-3">
+                    <h3 className="font-semibold text-neutral-800 line-clamp-2">
+                      {session.topic}
+                    </h3>
+                    <span
+                      className={cn(
+                        'shrink-0 px-3 py-1 rounded-full text-[12px] font-medium capitalize',
+                        STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
+                      )}
+                    >
+                      {session.status}
+                    </span>
+                  </div>
+
+                  <p className="text-sm text-neutral-500 mb-1">
+                    📅 {formatDate(session.scheduled_at)}
+                  </p>
+                  <p className="text-sm text-neutral-500 mb-3">
+                    🧑‍🎓{' '}
+                    {session.mentee_fullname ?? session.mentee_email ?? 'Mentee'}
+                    {' · '}
+                    {session.session_type === 'video_call' ? 'Video Call' : 'Chat'}
+                  </p>
+
+                  <SessionCard sessionId={session.id} />
+
+                  <div className="mt-3">
+                    <Link to={`/mentoring/${session.mentor_id}`}>
+                      <Button size="sm" variant="bordered">
+                        Lihat Detail
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </For>
+          </div>
+        );
+    }
+  }, [tab, all, confirmedCount, pendingCount, completedCount, menteeCount]);
+
+  return (
+    <DashboardLayout role="mentor" title="Mentor Dashboard">
+      <div className="max-w-7xl mx-auto">
+        <Show
+          condition={SessionToken.get() != null}
+          fallback={
+            <div className="bg-white rounded-lg p-12 text-center shadow-sm border border-neutral-100">
+              <p className="text-[46px] mb-2">🔐</p>
+              <h2 className="text-xl font-semibold text-neutral-800 mb-2">
+                Login dulu, Senpai!
+              </h2>
+              <p className="text-neutral-500 mb-6 max-w-md mx-auto">
+                Dashboard mentor hanya untuk yang sudah terdaftar. Masuk untuk
+                melihat permintaan sesi dan konfirmasi pembayaran.
+              </p>
+              <Link to="/auth/login">
+                <Button variant="primary" size="lg">
+                  Login Sekarang
+                </Button>
+              </Link>
+            </div>
+          }
+        >
+          <Show
+            condition={isMentor}
+            fallback={
+              <div className="bg-white rounded-lg p-12 text-center shadow-sm border border-neutral-100">
+                <p className="text-neutral-500 mb-4">
+                  Kamu belum terdaftar sebagai mentor. Daftar dulu untuk menerima
+                  permintaan sesi.
+                </p>
+                <Link to="/auth/register-mentor">
+                  <Button variant="primary">Daftar Jadi Mentor</Button>
+                </Link>
+              </div>
+            }
+          >
+            {/* Overview stats */}
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+              <StatCard icon={<StarOutlined />} label="Your Rating" value={stats?.avg_rating?.toFixed(1) ?? '-'} />
+              <StatCard icon={<CheckCircleOutlined />} label="Session Complete" value={completedCount} />
+              <StatCard icon={<TeamOutlined />} label="Mentee Impacted" value={menteeCount} />
+              <StatCard icon={<MessageOutlined />} label="Total Feedback" value={completedCount} />
+            </div>
+
+            {/* Tabs */}
+            <div className="mt-6 flex gap-1 border-b border-neutral-200 overflow-x-auto">
+              {TABS.map((t) => (
+                <button
+                  key={t.key}
+                  type="button"
+                  onClick={() => setTab(t.key)}
+                  className={cn(
+                    'shrink-0 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors',
+                    tab === t.key
+                      ? 'border-primary-500 text-primary-600'
+                      : 'border-transparent text-neutral-500 hover:text-neutral-700'
+                  )}
+                >
+                  {t.label}
+                </button>
+              ))}
+            </div>
+
+            <div className="mt-6">
+              <Show
+                condition={isLoading}
+                fallback={
+                  <Show
+                    condition={all.length > 0 || tab !== 'sessions'}
+                    fallback={
+                      <div className="bg-white rounded-lg p-12 text-center border border-neutral-100">
+                        <p className="text-neutral-500">
+                          Belum ada permintaan sesi mentoring.
+                        </p>
+                      </div>
+                    }
+                  >
+                    {content}
+                  </Show>
+                }
+              >
+                <div className="grid gap-4 md:grid-cols-2">
+                  {[0, 1].map((i) => (
+                    <div key={i} className="bg-white rounded-lg p-5 animate-pulse">
+                      <div className="h-4 bg-neutral-200 rounded w-2/3 mb-3" />
+                      <div className="h-3 bg-neutral-200 rounded w-1/2 mb-2" />
+                      <div className="h-3 bg-neutral-200 rounded w-1/3" />
+                    </div>
+                  ))}
+                </div>
+              </Show>
+            </div>
+          </Show>
+        </Show>
+      </div>
+    </DashboardLayout>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx

@@ -0,0 +1,247 @@
+import { FC, ReactElement, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { For, Show, cn, SessionToken } from '@imphnen-frontend-service/utils';
+import {
+  useGetMySessions,
+  useGetMyPayments,
+  usePostRefreshPayment,
+} from '@imphnen-frontend-service/service';
+import { ReloadOutlined, StarOutlined } from '@ant-design/icons';
+import { toast } from 'sonner';
+import { DashboardLayout } from '../_components/dashboard-layout';
+import { FeedbackModal } from '../_components/feedback-modal';
+
+const STATUS_STYLE: Record<string, string> = {
+  pending: 'bg-warning-100 text-warning-800',
+  confirmed: 'bg-success-100 text-success-700',
+  completed: 'bg-primary-100 text-primary-700',
+  cancelled: 'bg-danger-100 text-danger-600',
+};
+
+const PAYMENT_STYLE: Record<string, string> = {
+  pending: 'bg-warning-100 text-warning-800',
+  paid: 'bg-success-100 text-success-700',
+  expired: 'bg-neutral-200 text-neutral-600',
+};
+
+const formatDate = (iso: string) => {
+  try {
+    return new Date(iso).toLocaleString('id-ID', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return iso;
+  }
+};
+
+const formatRupiah = (n: number) =>
+  new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    maximumFractionDigits: 0,
+  }).format(n);
+
+export const Components: FC = (): ReactElement => {
+  const queryClient = useQueryClient();
+  const { data: sessions, isLoading } = useGetMySessions();
+  const { data: payments } = useGetMyPayments();
+  const refreshPayment = usePostRefreshPayment();
+  const [feedbackTarget, setFeedbackTarget] = useState<{
+    sessionId: string;
+    mentorName: string | null;
+  } | null>(null);
+
+  const paymentBySession = new Map(
+    (payments ?? []).map((p) => [p.sessionId, p])
+  );
+
+  const handleRefresh = async (paymentId: string) => {
+    try {
+      await refreshPayment.mutateAsync(paymentId);
+      const updated = paymentBySession.get(
+        (payments ?? []).find((p) => p.id === paymentId)?.sessionId ?? ''
+      );
+      toast.success(
+        updated?.status === 'paid'
+          ? 'Pembayaran berhasil dikonfirmasi otomatis ✅'
+          : 'Status pembayaran masih menunggu pembayaran'
+      );
+    } catch {
+      toast.error('Gagal memperbarui status pembayaran');
+    }
+  };
+
+  return (
+    <DashboardLayout role="mentee" title="Mentoring">
+      <div className="max-w-7xl mx-auto">
+        <div className="mb-8">
+          <h1 className="text-[23px] font-bold text-neutral-800 md:text-[29px]">
+            Sesi Mentoring Saya
+          </h1>
+          <p className="text-sm text-neutral-500 mt-1">
+            Pantau jadwal, status pembayaran, dan konfirmasi sesi kamu.
+          </p>
+        </div>
+
+        <Show
+          condition={SessionToken.get() != null}
+          fallback={<AnonymousState />}
+        >
+        <Show
+          condition={isLoading}
+          fallback={
+            <Show
+              condition={(sessions?.sessions?.length ?? 0) > 0}
+              fallback={
+                <div className="bg-white rounded-lg p-12 text-center">
+                  <p className="text-neutral-500 mb-4">
+                    Kamu belum memiliki sesi mentoring.
+                  </p>
+                  <Link to="/mentoring">
+                    <Button variant="primary">Cari Mentor</Button>
+                  </Link>
+                </div>
+              }
+            >
+              <div className="grid gap-4 md:grid-cols-2">
+                {(sessions?.sessions ?? []).map((session) => {
+                  if (!session) return null;
+                  const payment = paymentBySession.get(session.id);
+                    return (
+                      <div
+                        key={session.id}
+                        className="bg-white rounded-lg p-5 shadow-sm border border-neutral-100"
+                      >
+                        <div className="flex justify-between items-start gap-3 mb-3">
+                          <h3 className="font-semibold text-neutral-800 line-clamp-2">
+                            {session.topic}
+                          </h3>
+                          <span
+                            className={cn(
+                              'shrink-0 px-3 py-1 rounded-full text-[12px] font-medium capitalize',
+                              STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
+                            )}
+                          >
+                            {session.status}
+                          </span>
+                        </div>
+
+                        <p className="text-sm text-neutral-500 mb-1">
+                          📅 {formatDate(session.scheduled_at)}
+                        </p>
+                        <p className="text-sm text-neutral-500 mb-4">
+                          ⏱️ {session.duration_minutes} menit ·{' '}
+                          {session.session_type === 'video_call'
+                            ? 'Video Call'
+                            : 'Chat'}
+                        </p>
+
+                        <Show condition={!!payment}>
+                          <div
+                            className={cn(
+                              'flex justify-between items-center px-3 py-2 rounded-md text-xs font-medium mb-3',
+                              PAYMENT_STYLE[payment?.status ?? ''] ?? ''
+                            )}
+                          >
+                            <span className="capitalize">
+                              {payment?.status === 'paid' ? 'Lunas' : 'Menunggu pembayaran'}
+                            </span>
+                            <span>{payment ? formatRupiah(payment.total) : ''}</span>
+                          </div>
+                        </Show>
+
+                        <div className="flex gap-2">
+                          <Show
+                            condition={!!payment && payment.status === 'pending' && payment.provider === 'midtrans'}
+                          >
+                            <Button
+                              size="sm"
+                              variant="secondary"
+                              className="gap-2"
+                              disabled={refreshPayment.isPending}
+                              onClick={() => payment && handleRefresh(payment.id)}
+                            >
+                              <ReloadOutlined /> Cek Status
+                            </Button>
+                          </Show>
+                          <Show condition={session.status === 'confirmed'}>
+                            <Link to={`/mentoring/${session.mentor_id}`}>
+                              <Button size="sm" variant="bordered">
+                                Detail Mentor
+                              </Button>
+                            </Link>
+                          </Show>
+                          <Show condition={session.status === 'completed'}>
+                            <Button
+                              size="sm"
+                              variant="bordered"
+                              className="gap-1.5"
+                              onClick={() =>
+                                setFeedbackTarget({
+                                  sessionId: session.id,
+                                  mentorName: null,
+                                })
+                              }
+                            >
+                              <StarOutlined /> Beri Feedback
+                            </Button>
+                          </Show>
+                        </div>
+                      </div>
+                    );
+                  })}
+              </div>
+            </Show>
+          }
+        >
+          <div className="grid gap-4 md:grid-cols-2">
+            {[0, 1].map((i) => (
+              <div key={i} className="bg-white rounded-lg p-5 animate-pulse">
+                <div className="h-4 bg-neutral-200 rounded w-2/3 mb-3" />
+                <div className="h-3 bg-neutral-200 rounded w-1/2 mb-2" />
+                <div className="h-3 bg-neutral-200 rounded w-1/3" />
+              </div>
+            ))}
+          </div>
+        </Show>
+        </Show>
+      </div>
+      <FeedbackModal
+        open={feedbackTarget != null}
+        sessionId={feedbackTarget?.sessionId ?? ''}
+        mentorName={feedbackTarget?.mentorName}
+        onClose={() => setFeedbackTarget(null)}
+        onSuccess={() => {
+          queryClient.invalidateQueries({ queryKey: ['get-my-sessions'] });
+          queryClient.invalidateQueries({ queryKey: ['get-mentor-stats'] });
+        }}
+      />
+    </DashboardLayout>
+  );
+};
+
+const AnonymousState: FC = (): ReactElement => (
+  <div className="bg-white rounded-lg p-12 text-center shadow-sm border border-neutral-100">
+    <p className="text-[46px] mb-2">🔐</p>
+    <h2 className="text-xl font-semibold text-neutral-800 mb-2">
+      Login dulu, Senpai!
+    </h2>
+    <p className="text-neutral-500 mb-6 max-w-md mx-auto">
+      Sesi mentoring kamu aman tersimpan di akun. Masuk untuk melihat jadwal,
+      status pembayaran, dan konfirmasi sesi.
+    </p>
+    <Link to="/auth/login">
+      <Button variant="primary" size="lg">
+        Login Sekarang
+      </Button>
+    </Link>
+  </div>
+);
+
+export default Components;

apps/dimentorin/src/app/(public)/mentoring/page.tsx

@@ -0,0 +1,140 @@
+import { FC, ReactElement, useRef, useState } from 'react';
+import { BannerSection } from './_components/banner-section';
+import { Topics } from './_components/topics';
+import { Input } from '@imphnen-frontend-service/ui/atoms';
+import { SearchOutlined } from '@ant-design/icons';
+import { For, Show } from '@imphnen-frontend-service/utils';
+import { MentorCard } from './_components/mentor-card';
+import { Pagination } from '@imphnen-frontend-service/ui/molecules';
+import { useGetMentors } from '@imphnen-frontend-service/service';
+import { getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from '@tanstack/react-table';
+import { motion, useInView, Variants } from 'framer-motion';
+
+export const Components: FC = (): ReactElement => {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 8,
+  });
+  const [search, setSearch] = useState('');
+
+  const { data: mentors, isLoading } = useGetMentors({ search });
+
+  const table = useReactTable({
+    data: mentors ?? [],
+    columns: [],
+    state: { pagination },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+  });
+
+  const pageMentors = table.getRowModel().rows.map((row) => row.original);
+
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.3,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <main>
+      <BannerSection />
+
+      <section className="w-full px-8 md:px-[60px] md:pb-[60px] lg:px-20">
+        <motion.div
+          className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-3xl"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.4 }}
+        >
+          <div className="mb-10 md:px-6 lg:mb-[60px]">
+            <motion.h1
+              className="text-center text-[15px] text-primary-500 font-semibold mb-8 md:text-2xl md:mb-10 lg:text-3xl lg:mb-[60px]"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: 0.3 }}
+            >
+              Choose Your Topics
+            </motion.h1>
+
+            <Topics />
+          </div>
+
+          <motion.div ref={ref} className="md:px-6">
+            <motion.div
+              className="relative mb-6 md:px-12 lg:px-0 lg:w-[480px] lg:mx-auto"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.4 }}
+            >
+              <Input
+                placeholder="Cari berdasarkan nama, posisi/peran"
+                className="relative min-w-full w-full"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+              <SearchOutlined className="absolute right-2.5 top-1/2 -translate-y-1/2 text-primary-500 size-2.5 cursor-text md:me-12 lg:me-0" />
+            </motion.div>
+
+            <motion.div
+              className="grid gap-2 mb-10 md:grid-cols-2 md:gap-6 lg:grid-cols-4"
+              variants={containerVariants}
+              initial="hidden"
+              animate={isInView ? 'visible' : 'hidden'}
+            >
+              <Show
+                condition={!isLoading}
+                fallback={
+                  <motion.p variants={childVariants} className="text-center text-neutral-500 col-span-full py-10">
+                    Memuat data mentor...
+                  </motion.p>
+                }
+              >
+                <Show
+                  condition={pageMentors.length > 0}
+                  fallback={
+                    <motion.p variants={childVariants} className="text-center text-neutral-500 col-span-full py-10">
+                      Tidak ada mentor ditemukan
+                    </motion.p>
+                  }
+                >
+                  <For data={pageMentors}>
+                    {(mentor, index) => (
+                      <motion.div key={mentor.id ?? index} variants={childVariants}>
+                        <MentorCard mentor={mentor} />
+                      </motion.div>
+                    )}
+                  </For>
+                </Show>
+              </Show>
+            </motion.div>
+
+            <Pagination table={table} />
+          </motion.div>
+        </motion.div>
+      </section>
+    </main>
+  )
+}
+
+export default Components

apps/dimentorin/src/app/(public)/resources/_components/collaborate.tsx

@@ -0,0 +1,141 @@
+import { MailOutlined } from "@ant-design/icons";
+import { Icon } from "@iconify/react";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { FC, useRef } from "react";
+import { motion, useInView, Variants } from "framer-motion";
+
+export const Collaborate: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, scale: 0 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:pt-0 lg:pb-16 lg:px-20">
+      <div className="max-w-7xl py-6 mx-auto md:flex md:gap-[60px] md:items-center xl:py-14">
+        <div className="relative mb-8 flex items-center justify-center h-[124px] md:mb-0 md:h-[180px] md:w-[202px] xl:h-[380px] xl:w-[428px]">
+          <motion.div 
+            className="relative"
+            variants={containerVariants}
+            animate={isInView ? "visible" : "hidden"}
+          >
+            <motion.div
+              className="size-[104px] bg-primary-200 rounded-full flex justify-between items-center md:size-[148px] xl:size-[304px]"
+              initial={{ scale: 0 }}
+              whileInView={{ scale: 1 }}
+              transition={{ duration: 0.5 }}
+              viewport={{ once: true }}
+            >
+              <div
+                className="size-[88px] rounded-full bg-gradient-to-bl from-primary-500 to-primary-300 mx-auto md:size-[132px] xl:size-[276px]"
+              />
+            </motion.div>
+
+            <motion.div
+              className="absolute bg-white shadow rounded-md -top-3 -right-2 p-1 rotate-6 xl:p-2.5 xl:rounded-lg"
+              variants={childVariants}
+            >
+              <Icon icon="bi:terminal" className="text-primary-500 size-4 md:size-[18px] xl:size-9" />
+            </motion.div>
+
+            <motion.div
+              className="absolute bg-white shadow rounded-md top-1/3 -left-6 p-1.5 -rotate-10 xl:p-2.5 xl:-left-12"
+              variants={childVariants}
+            >
+              <Icon icon="ion:git-branch-outline" className="text-primary-500 size-6 md:size-[30px] xl:size-14" />
+            </motion.div>
+
+            <motion.div
+              className="absolute bg-white shadow rounded-md top-3/5 -right-3 p-1 xl:p-2 xl:-right-6"
+              variants={childVariants}
+            >
+              <Icon icon="bi:github" className="size-[18px] md:size-[26px] xl:size-[52px]" />
+            </motion.div>
+          </motion.div>
+
+          <motion.div
+            className="h-full w-auto aspect-3/5 absolute inset-0 mx-auto bg-contain bg-no-repeat"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+          >
+            <img
+              src="/image/anime-girl.webp"
+              alt="Anime Girl"
+              style={{
+                opacity: "1",
+                maskImage: "linear-gradient(to bottom, black 80%, transparent 100%)",
+              }}
+            />
+          </motion.div>
+        </div>
+
+        <motion.div
+          className={cn(
+            "px-6 py-5 rounded-lg bg-white border-2 border-primary-200 text-center text-primary-500 shadow",
+            "md:flex-1 md:text-start xl:py-8 xl:px-12"
+          )}
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          <motion.h1
+            className="text-[15px] font-semibold mb-3 md:text-[23px] xl:text-[37px]"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            Let's Collaborate!
+          </motion.h1>
+          <motion.p
+            className="text-xs font-medium leading-tight mb-6 md:text-[15px] xl:text-[19px]"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            Klik tombol di bawah ini untuk mendaftar sebagai partner resource dan bantu membangun dunia IT yang lebih seru!
+          </motion.p>
+
+          <motion.div
+            className="flex items-center mx-auto md:ms-0"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <Button type="button" size="sm" className="flex items-center gap-2">
+              <span>Collaboration Now</span>
+              <MailOutlined />
+            </Button>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/resources/_components/contribute.tsx

@@ -0,0 +1,103 @@
+import { FC, useRef } from "react";
+import { motion, useInView, Variants } from "framer-motion";
+
+export const Contribute: FC = () => {
+  const ref = useRef(null)
+  const inView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.8,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20 xl:py-20">
+      <div className="relative max-w-7xl mx-auto xl:py-14">
+        <div className="md:max-w-[514px] mx-auto">
+          <motion.h1
+            className="font-semibold text-[19px] text-primary-500 mb-4 text-center leading-tight md:text-[37px] md:mb-6 xl:text-[46px] xl:font-bold"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            Want to contribute? <br /> help senpai build the IT ecosystem!
+          </motion.h1>
+          <motion.p
+            className="text-center text-xs text-neutral-500 md:text-[15px] md:font-medium md:w-[395px] md:mx-auto xl:text-[19px] xl:w-full"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            Punya platform, artikel, atau tool keren untuk membantu mentee belajar IT? Bergabunglah dengan kami dan jadilah bagian dari ekosistem pembelajaran yang lebih besar!
+          </motion.p>
+        </div>
+
+        <motion.div
+          className="hidden xl:block absolute inset-0 text-neutral-800"
+          variants={containerVariants}
+          initial="hidden"
+          animate={inView ? "visible" : "hidden"}
+        >
+          <motion.div
+            className="absolute top-0 left-0 text-[23px] font-semibold bg-white border rounded-md px-5 py-2 shadow-lg -rotate-6"
+            variants={childVariants}
+          >
+            Learning Platform
+          </motion.div>
+          <motion.div
+            className="absolute top-0 right-36 text-2xl font-semibold bg-white border rounded-md px-5 py-2 shadow-lg rotate-3"
+            variants={childVariants}
+          >
+            AI Tools
+          </motion.div>
+
+          <motion.div
+            className="absolute top-1/3 left-24 text-[23px] font-semibold bg-white border rounded-md px-5 py-2 shadow-lg"
+            variants={childVariants}
+          >
+            UI Assets
+          </motion.div>
+          <motion.div
+            className="absolute top-1/3 right-0 text-[27.38px] font-semibold bg-white border rounded-md px-6 py-2 shadow-lg -rotate-3"
+            variants={childVariants}
+          >
+            Refferences
+          </motion.div>
+
+          <motion.div
+            className="absolute top-2/3 left-4 text-[31.62px] font-semibold bg-white border rounded-md px-6 py-2.5 shadow-lg leading-tight rotate-1"
+            variants={childVariants}
+          >
+            Coding <br />Playground
+          </motion.div>
+          <motion.div
+            className="absolute top-[70%] right-16 text-2xl font-semibold bg-white border rounded-md px-5 py-2.5 shadow-lg leading-tight rotate-6"
+            variants={childVariants}
+          >
+            Challenge <br />Platform
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/resources/_components/work-with-us.tsx

@@ -0,0 +1,104 @@
+import { FC, useRef } from "react";
+import { motion, useInView, Variants } from "framer-motion";
+
+export const WorkWithUs: FC = () => {
+  const ref = useRef(null)
+  const inView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.8,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full px-8 md:px-[60px] lg:py-16 lg:px-20">
+      <div className="max-w-7xl mx-auto">
+        <motion.h1
+          className="text-[19px] font-semibold text-primary-500 mb-5 text-center md:text-[23px] md:mb-7 xl:text-[37px] xl:mb-10"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          Why Work with Us
+        </motion.h1>
+
+        <motion.div
+          className="grid gap-4 md:grid-cols-3 md:gap-5 xl:grid-flow-col xl:grid-cols-2 xl:grid-rows-2 xl:gap-6"
+          variants={containerVariants}
+          initial="hidden"
+          animate={inView ? "visible" : "hidden"}
+        >
+          <motion.div
+            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 md:py-8 xl:row-span-2 xl:px-6 xl:flex xl:flex-col xl:justify-end"
+            variants={childVariants}
+          >
+            <div className="h-[60px] w-full mb-6 xl:h-auto xl:w-full xl:mb-8">
+              <img src="/image/work-with-us/exposure.webp" alt="Exposure" className="h-full w-auto object-scale-down mx-auto" />
+            </div>
+            <div className="text-center md:px-6 xl:text-start xl:px-0">
+              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px] md:px-4 xl:px-0">
+                Exposure Luas
+              </h1>
+              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px] md:px-1 xl:px-0">
+                Web kamu akan tampil di halaman resource kami!
+              </p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 md:py-8 xl:flex xl:items-center xl:px-6 xl:py-2 xl:gap-8"
+            variants={childVariants}
+          >
+            <div className="h-[60px] w-full mb-6 xl:w-auto xl:h-[124px] xl:mb-0">
+              <img src="/image/work-with-us/handshake.webp" alt="Handshake" className="h-full w-auto object-scale-down mx-auto" />
+            </div>
+            <div className="text-center md:px-6 xl:text-start">
+              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px]">
+                Bantu Generasi Baru
+              </h1>
+              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px]">
+                Bagikan ilmu dan bantu lebih banyak orang berkembang!
+              </p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 xl:flex xl:items-center xl:px-6 xl:py-2 xl:gap-8"
+            variants={childVariants}
+          >
+            <div className="h-[60px] w-full mb-6 xl:w-auto xl:h-[124px] xl:mb-0">
+              <img src="/image/work-with-us/networking.webp" alt="Networking" className="h-full w-auto object-scale-down mx-auto" />
+            </div>
+            <div className="text-center md:px-6 xl:text-start">
+              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px] md:px-4 xl:px-0">
+                Networking Komunitas
+              </h1>
+              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px] md:px-1 xl:px-0">
+                Bertemu dengan para developer, mentor, dan inovator lainnya!
+              </p>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/resources/page.tsx

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { Contribute } from "./_components/contribute";
+import { WorkWithUs } from "./_components/work-with-us";
+import { Collaborate } from "./_components/collaborate";
+
+export default function Components(): ReactElement {
+  return (
+    <main>
+      <Contribute />
+      <WorkWithUs />
+      <Collaborate />
+    </main>
+  )
+}

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

@@ -12,7 +12,7 @@ export const Components: FC = (): ReactElement => {
           <ForgotStep step={1} />
           <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
           <h5 className='mt-2 text-xl font-medium text-primary-500'>Masukkan email-mu, dan biarkan kami memanggil password-mu kembali dari dunia lain!</h5>
-          <h6 className='text-gray-600 mt-8'>Email</h6>
+          <h6 className='text-neutral-600 mt-8'>Email</h6>
           <Input type='email' size='lg' placeholder='Contoh: yourname@mail.com'></Input>
           <Button variant='primary' className='mt-7'>Kirim Kode OTP ^^</Button>
         </div>

apps/dimentorin/src/app/auth/forgot/summon/page.tsx

@@ -13,12 +13,12 @@ export const Components: FC = (): ReactElement => {
           <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
           <h5 className='mt-2 text-md font-medium text-primary-500'>Sekarang, buatlah password baru yang lebih kuat, seperti jurus andalanmu!<span role="img" aria-label='emoji'>🔥⚡</span></h5>
           <div className='my-4'>
-            <h6 className='text-gray-700'>Password Baru</h6>
+            <h6 className='text-neutral-700'>Password Baru</h6>
             <Input className='w-full' type="password" placeholder='Buat password sekokoh armor legendary!'/>
-            <h6 className='text-gray-700 mt-5'>Ulang Password Baru</h6>
+            <h6 className='text-neutral-700 mt-5'>Ulang Password Baru</h6>
             <Input className='w-full' type="password" placeholder='Pastikan Cocok! Jangan sampai ada typo, Senpai~!'/>
           </div>
-          <div className='mb-4 text-gray-700 flex flex-col gap-3 text-sm'>
+          <div className='mb-4 text-neutral-700 flex flex-col gap-3 text-sm'>
             <h6><span role='img' aria-label='emoji'>💡</span> Tips dari kami:</h6>
             <h6><span role='img' aria-label='emoji'>✅ </span> Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!</h6>  
             <h6><span role='img' aria-label='emoji'>✅</span> Pastikan kamu ingat password-mu atau simpan di tempat aman~</h6>  

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

@@ -57,12 +57,12 @@ export const Components: FC = (): ReactElement => {
               </a>
             </div>
             <div className="flex items-center w-full">
-              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
-              <span className="px-3 text-blue-400">Or</span>
-              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
+              <div className="flex-grow border-t border-primary-400 opacity-50"></div>
+              <span className="px-3 text-primary-400">Or</span>
+              <div className="flex-grow border-t border-primary-400 opacity-50"></div>
             </div>
             <Button
-              className="w-full my-3 text-gray-500 gap-2"
+              className="w-full my-3 text-neutral-500 gap-2"
               variant="secondary"
             >
               <p>Log In With Google</p>

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

@@ -1,11 +1,80 @@
 import { FC, ReactElement, useState } from 'react';
-import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Select } from '@imphnen-frontend-service/ui/atoms';
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
 import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules';
+import { usePostRegisterMentor, TMentorRegisterRequest } from '@imphnen-frontend-service/service';
+import { useNavigate } from 'react-router-dom';
 
 export const Components: FC = (): ReactElement => {
-  const [ step, setStep ] = useState(1)
+  const [step, setStep] = useState(1)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState("")
+  const [form, setForm] = useState({
+    email: "", password: "", confirmPassword: "",
+    fullname: "", phone_number: "", gender: "", domicile: "",
+    legal_name: "", phone_for_verification: "", identity_document_url: "",
+    last_education: "", bio: "", linkedin_url: "", github_url: "",
+    cv_url: "", portfolio_url: "", industries: "", expertise: "", languages: "",
+    current_company: "", current_role: "", years_of_experience: "",
+    topics_of_interest: "", preferred_mentee_level: "", preferred_mentoring_formats: "",
+    availability_commitment: "", mentoring_rate_amount: "",
+  })
+  const setF = (k: string, v: string) => setForm((f) => ({ ...f, [k]: v }))
+  const registerMutation = usePostRegisterMentor()
+  const navigate = useNavigate()
+
+  const handleSubmit = async () => {
+    setError("")
+    if (form.password !== form.confirmPassword) {
+      setError("Password dan konfirmasi tidak sama.")
+      return
+    }
+    const payload: TMentorRegisterRequest = {
+      email: form.email,
+      password: form.password,
+      fullname: form.fullname,
+      phone_number: form.phone_number || null,
+      identity_and_verification: {
+        legal_name: form.legal_name || form.fullname,
+        gender: form.gender || null,
+        domicile: form.domicile || null,
+        identity_document_url: form.identity_document_url || "https://example.com/identity.jpg",
+        phone_for_verification: form.phone_for_verification || null,
+      },
+      professional_profile: {
+        bio: form.bio,
+        last_education: form.last_education || null,
+        linkedin_url: form.linkedin_url || null,
+        github_url: form.github_url || null,
+        cv_url: form.cv_url || null,
+        portfolio_url: form.portfolio_url || null,
+        industries: form.industries.split(",").map((s) => s.trim()).filter(Boolean),
+        expertise: form.expertise.split(",").map((s) => s.trim()).filter(Boolean),
+        languages: form.languages.split(",").map((s) => s.trim()).filter(Boolean),
+        current_company: form.current_company,
+        current_role: form.current_role,
+        years_of_experience: Number(form.years_of_experience) || 0,
+      },
+      mentoring_logistics: {
+        topics_of_interest: form.topics_of_interest.split(",").map((s) => s.trim()).filter(Boolean),
+        preferred_mentee_level: [form.preferred_mentee_level].filter(Boolean),
+        preferred_mentoring_formats: form.preferred_mentoring_formats.split(",").map((s) => s.trim()).filter(Boolean),
+        availability_commitment: form.availability_commitment,
+        mentoring_rate_amount: Number(form.mentoring_rate_amount) || 0,
+      },
+    }
+    setSubmitting(true)
+    try {
+      await registerMutation.mutateAsync(payload)
+      navigate('/auth/register-mentor/pending')
+    } catch (e: unknown) {
+      const msg = (e as { response?: { data?: { message?: string } } })?.response?.data?.message
+      setError(msg || "Gagal mendaftar sebagai mentor. Coba lagi.")
+    } finally {
+      setSubmitting(false)
+    }
+  }
 
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
@@ -13,13 +82,6 @@ export const Components: FC = (): ReactElement => {
         <RegisterResetBanner />
         <div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
           <div className="xl:w-[714px]">
-            <Button
-              className='xl:hidden gap-3'
-              variant='secondary'
-            >
-              <ArrowLeftOutlined />
-              Login
-            </Button>
             <RegisterMentorStep step={step} />
             <h3 className="mt-5 text-3xl font-semibold text-primary-500">
               Register
@@ -27,60 +89,44 @@ export const Components: FC = (): ReactElement => {
             <h5 className="text-primary-500 font-medium">
               Welcome to the team, Mentor - powered by IMPHNEN
             </h5>
-            <form>
+            <form onSubmit={(e) => e.preventDefault()}>
               <div className={`${step !== 1 ? 'hidden' : ''}`}>
                 <div className='mt-7 mb-2'>
                   <InputField
-                    label="Nama Lengkap"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Nama Lengkap"
-                    name={'fullname'}
+                    label="Nama Lengkap" size="lg" className="w-full"
+                    placeholder="Nama Lengkap" name="fullname"
+                    value={form.fullname} onChange={(e) => setF('fullname', e.target.value)}
                   />
                 </div>
                 <SelectField
-                  label="Jenis Kelamin"
-                  defaultValue=""
-                  size="lg"
-                  error=""
+                  label="Jenis Kelamin" defaultValue="" size="lg" error=""
+                  value={form.gender} onChange={(e) => setF('gender', e.target.value)}
                 >
-                  <option value="" disabled hidden>
-                    Pilih Jenis Kelamin
-                  </option>
-                  <option value="laki-laki">Laki - Laki</option>
-                  <option value="perempuan">Perempuan</option>
+                  <option value="" disabled hidden>Pilih Jenis Kelamin</option>
+                  <option value="Laki-laki">Laki - Laki</option>
+                  <option value="Perempuan">Perempuan</option>
                 </SelectField>
                 <div className='my-2'>
                   <InputField
-                    label="No Telp/Whatsapp Only"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Nama Lengkap"
-                    name={'fullname'}
+                    label="No Telp/Whatsapp Only" size="lg" className="w-full"
+                    placeholder="Nomor WhatsApp" name="phone_number"
+                    value={form.phone_number} onChange={(e) => setF('phone_number', e.target.value)}
                   />
                 </div>
                 <SelectField
-                  label="Domisili"
-                  defaultValue=""
-                  size="lg"
-                  error=""
+                  label="Domisili" defaultValue="" size="lg" error=""
+                  value={form.domicile} onChange={(e) => setF('domicile', e.target.value)}
                 >
-                  <option value="" disabled hidden>
-                    Pilih Domisili
-                  </option>
-                  <option value="aceh">Aceh</option>
-                  <option value="jawa-selatan">Jawa Selatan</option>
+                  <option value="" disabled hidden>Pilih Domisili</option>
+                  <option value="Aceh">Aceh</option>
+                  <option value="Jawa Barat">Jawa Barat</option>
                 </SelectField>
                 <div className='mt-2'>
                   <SelectField
-                    label="Pendidikan Terakhir"
-                    defaultValue=""
-                    size="lg"
-                    error=""
+                    label="Pendidikan Terakhir" defaultValue="" size="lg" error=""
+                    value={form.last_education} onChange={(e) => setF('last_education', e.target.value)}
                   >
-                    <option value="" disabled hidden>
-                      Apa pendidikan terakhir senpai
-                    </option>
+                    <option value="" disabled hidden>Apa pendidikan terakhir senpai</option>
                     <option value="SMA">SMA</option>
                     <option value="S1">S1</option>
                     <option value="S2">S2</option>
@@ -90,145 +136,85 @@ export const Components: FC = (): ReactElement => {
               </div>
               <div className={`${step !== 2 ? 'hidden' : ''}`}>
                 <div className='mt-7 mb-2 gap-2 flex flex-col'>
-                  <InputField
-                    label="Perusahaan Saat Ini"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Masukkan Perusahaan tempat kerja, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
-                    name={'fullname'}
-                  />
-                  <InputField
-                    label="Masukan jabatan senpai di perusahaan"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Masukan jabatan senpai di perusahaan"
-                    name={'fullname'}
-                  />
-                  <SelectField
-                    label="Topik Keahlian Yang Ingin Diajarkan"
-                    defaultValue=""
-                    size="lg"
-                    error=""
-                  >
-                    <option value="" disabled hidden>
-                      Apa yang ingin anda ajarkan senpaii
-                    </option>
-                    <option value="Frontend Developer">Frontend Developer</option>
-                    <option value="Backend Developer">Backend Developer</option>
-                    <option value="Other">Other</option>
-                  </SelectField>
-                  <InputField
-                    label="Jika Mengisi “Other”, Tulis Topik yang Kamu Kuasai"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Tolong isi jika tidak ada di pilihan senpai"
-                    name={'fullname'}
-                  />
-                  <InputField
-                    label="Skill Utama yang Kamu Miliki (boleh lebih dari satu)"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Isi Skill nya dong senpai"
-                    name={'fullname'}
-                  />
+                  <InputField label="Perusahaan Saat Ini" size="lg" className="w-full"
+                    placeholder="Masukkan Perusahaan tempat kerja, Senpai~! ✨" name="current_company"
+                    value={form.current_company} onChange={(e) => setF('current_company', e.target.value)} />
+                  <InputField label="Masukan jabatan senpai di perusahaan" size="lg" className="w-full"
+                    placeholder="Jabatan" name="current_role"
+                    value={form.current_role} onChange={(e) => setF('current_role', e.target.value)} />
+                  <InputField label="Topik Keahlian Yang Ingin Diajarkan (pisahkan koma)" size="lg" className="w-full"
+                    placeholder="mis. Backend Developer, Rust" name="expertise"
+                    value={form.expertise} onChange={(e) => setF('expertise', e.target.value)} />
+                  <InputField label="Industri (pisahkan koma)" size="lg" className="w-full"
+                    placeholder="mis. Software, Education" name="industries"
+                    value={form.industries} onChange={(e) => setF('industries', e.target.value)} />
+                  <InputField label="Skill Utama / Bahasa (pisahkan koma)" size="lg" className="w-full"
+                    placeholder="mis. Rust, TypeScript" name="languages"
+                    value={form.languages} onChange={(e) => setF('languages', e.target.value)} />
+                  <InputField label="Tahun Pengalaman" type="number" size="lg" className="w-full"
+                    placeholder="mis. 3" name="years_of_experience"
+                    value={form.years_of_experience} onChange={(e) => setF('years_of_experience', e.target.value)} />
+                  <InputField label="Bio Singkat" size="lg" className="w-full"
+                    placeholder="Ceritakan pengalaman Anda" name="bio"
+                    value={form.bio} onChange={(e) => setF('bio', e.target.value)} />
                 </div>
               </div>
               <div className={`${step !== 3 ? 'hidden' : ''}`}>
                 <div className='mt-7 mb-2 gap-2 flex flex-col'>
-                  <SelectField
-                    label="Durasi Sesi Mentoring"
-                    defaultValue=""
-                    size="lg"
-                    error=""
-                  >
-                    <option value="" disabled hidden>
-                      Placeholder
-                    </option>
+                  <InputField label="Topik Mentoring (pisahkan koma)" size="lg" className="w-full"
+                    placeholder="mis. Rust Programming, Backend" name="topics_of_interest"
+                    value={form.topics_of_interest} onChange={(e) => setF('topics_of_interest', e.target.value)} />
+                  <SelectField label="Tingkat Mentee" defaultValue="" size="lg" error=""
+                    value={form.preferred_mentee_level} onChange={(e) => setF('preferred_mentee_level', e.target.value)}>
+                    <option value="" disabled hidden>Pilih tingkat mentee</option>
+                    <option value="beginner">Beginner</option>
+                    <option value="intermediate">Intermediate</option>
+                    <option value="advanced">Advanced</option>
                   </SelectField>
-                  <SelectField
-                    label="Format Pengajaran yang Anda Sediakan"
-                    defaultValue=""
-                    size="lg"
-                    error=""
-                  >
-                    <option value="" disabled hidden>
-                      Placeholder
-                    </option>
-                  </SelectField>
-                  <InputField
-                    type="file"
-                    label="Unggah Curiculum Vitae"
-                    size="lg"
-                    className="w-full"
-                  />
-                  <InputField
-                    label="Unggah Portofolio"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Google Drive, Behance, GitHub, Notion, dan lainnya"
-                  />
-                  <InputField
-                    type='number'
-                    label="Honorarium yang Diharapkan per Sesi (Online) Durasi rata-rata sesi: 2,5–3 jam"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Isi Nominalnya dong senpaiii!!!"
-                  />
+                  <InputField label="Format Pengajaran (pisahkan koma, mis. online,offline)" size="lg" className="w-full"
+                    placeholder="online,offline" name="preferred_mentoring_formats"
+                    value={form.preferred_mentoring_formats} onChange={(e) => setF('preferred_mentoring_formats', e.target.value)} />
+                  <InputField label="Komitmen Ketersediaan" size="lg" className="w-full"
+                    placeholder="mis. 2 jam per minggu" name="availability_commitment"
+                    value={form.availability_commitment} onChange={(e) => setF('availability_commitment', e.target.value)} />
+                  <InputField label="Honorarium yang Diharapkan per Sesi" type="number" size="lg" className="w-full"
+                    placeholder="mis. 500000" name="mentoring_rate_amount"
+                    value={form.mentoring_rate_amount} onChange={(e) => setF('mentoring_rate_amount', e.target.value)} />
+                  <InputField label="URL LinkedIn" size="lg" className="w-full"
+                    placeholder="https://linkedin.com/in/..." name="linkedin_url"
+                    value={form.linkedin_url} onChange={(e) => setF('linkedin_url', e.target.value)} />
+                  <InputField label="URL Portofolio" size="lg" className="w-full"
+                    placeholder="Google Drive, GitHub, Behance" name="portfolio_url"
+                    value={form.portfolio_url} onChange={(e) => setF('portfolio_url', e.target.value)} />
                   <h6 className='text-xs'>Silahkan isi dalam angka (Contoh:500.000)</h6>
                 </div>
               </div>
               <div className={`${step !== 4 ? 'hidden' : ''}`}>
                 <div className='mt-7 mb-2 gap-2 flex flex-col'>
-                  <InputField
-                    type='email'
-                    label="Email"
-                    size="lg"
-                    className="w-full"
-                    placeholder="isi emailnya dong senpai!!!"
-                  />
-                  <InputField
-                    type='password'
-                    label="Buat Password"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Buat Password"
-                  />
-                  <InputField
-                    type='password'
-                    label="Buat Password"
-                    size="lg"
-                    className="w-full"
-                    placeholder="Buat Password"
-                  />
+                  <InputField type='email' label="Email" size="lg" className="w-full"
+                    placeholder="isi emailnya dong senpai!!!" name="email"
+                    value={form.email} onChange={(e) => setF('email', e.target.value)} />
+                  <InputField type='password' label="Buat Password" size="lg" className="w-full"
+                    placeholder="Buat Password" name="password"
+                    value={form.password} onChange={(e) => setF('password', e.target.value)} />
+                  <InputField type='password' label="Konfirmasi Password" size="lg" className="w-full"
+                    placeholder="Ulangi Password" name="confirmPassword"
+                    value={form.confirmPassword} onChange={(e) => setF('confirmPassword', e.target.value)} />
                 </div>
               </div>
+              {error && <p className="text-danger-600 text-xs mt-3 font-medium">{error}</p>}
               <div className='flex justify-end mt-4 gap-2'>
-                <Button
-                  variant='secondary'
-                  onClick={() => setStep(step - 1)}
-                  type='button'
-                  className={`${step === 1 ? 'hidden' : ''}`}
-                >
-                  <ArrowLeftOutlined />
-                  Kembali
+                <Button variant='secondary' onClick={() => setStep(step - 1)} type='button'
+                  className={`${step === 1 ? 'hidden' : ''}`}>
+                  <ArrowLeftOutlined /> Kembali
                 </Button>
-                <Button
-                  variant='primary'
-                  onClick={() => setStep(step + 1)}
-                  type='button'
-                  className={`${step === 4 ? 'hidden' : ''}`}
-                >
-                  Lanjutkan
-                  <ArrowRightOutlined />
+                <Button variant='primary' onClick={() => setStep(step + 1)} type='button'
+                  className={`${step === 4 ? 'hidden' : ''}`}>
+                  Lanjutkan <ArrowRightOutlined />
                 </Button>
-                <Button
-                  variant='primary'
-                  onClick={() => setStep(step + 1)}
-                  type='button'
-                  className={`${step === 4 ? '' : 'hidden'}`}
-                >
-                  Selesaikan
-                  <ArrowRightOutlined />
+                <Button variant='primary' onClick={handleSubmit} type='button'
+                  className={`${step === 4 ? '' : 'hidden'}`} disabled={submitting}>
+                  {submitting ? "Mengirim..." : "Selesaikan"} <ArrowRightOutlined />
                 </Button>
               </div>
             </form>
@@ -239,4 +225,4 @@ export const Components: FC = (): ReactElement => {
   );
 };
 
-export default Components;
+export default Components;

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

@@ -17,10 +17,10 @@ export const Components: FC = (): ReactElement => {
               Data kamu telah kami terima dan sedang dalam proses verifikasi.
             </h4>
             <svg className="mt-10" width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="74" cy="74" r="73.6348" fill="#42CDF8"/>
-              <rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" fill="#0185D0"/>
+              <circle cx="74" cy="74" r="73.6348" className="fill-info-400"/>
+              <rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" className="fill-info-600"/>
               <circle cx="73.3284" cy="74.6689" r="33.11" transform="rotate(150 73.3284 74.6689)" stroke="#F0F8FF" stroke-width="1.1825"/>
-              <path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" fill="#F0F8FF"/>
+              <path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" className="fill-primary-50"/>
             </svg>
             <h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
               Mohon tunggu maksimal 2 hari kerja untuk proses aktivasi akun. Kami akan menghubungi kamu jika proses telah selesai.

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

@@ -24,18 +24,18 @@ export const Components: FC = (): ReactElement => {
               xmlns="http://www.w3.org/2000/svg"
               className="mt-10"
             >
-              <circle cx="99" cy="99" r="99" fill="#BCF8B0" />
+              <circle cx="99" cy="99" r="99" className="fill-success-200" />
               <rect
                 x="31.1152"
                 y="32.9141"
                 width="133.971"
                 height="133.971"
                 rx="66.9857"
-                fill="#35BA43"
+                className="fill-success-500"
               />
               <path
                 d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
-                fill="#E0FBD8"
+                className="fill-success-100"
               />
             </svg>
             <h4 className="mt-10 text-primary-500 font-medium text-xl text-center">

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

@@ -65,27 +65,27 @@ export const Components: FC = (): ReactElement => {
                 control={form.control}
                 name={'password'}             
               />
-              <h6 className="text-sm text-gray-500 mt-1">
+              <h6 className="text-sm text-neutral-500 mt-1">
                 "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
               </h6>
-              <h6 className="text-sm text-gray-500 mt-2">
+              <h6 className="text-sm text-neutral-500 mt-2">
                 Tips membuat password yang OP:
               </h6>
-              <h6 className="text-sm text-gray-500">
+              <h6 className="text-sm text-neutral-500">
                 - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
                 <span role="img" aria-label="emoji">
                   ⚡
                 </span>
                 )
               </h6>
-              <h6 className="text-sm text-gray-500">
+              <h6 className="text-sm text-neutral-500">
                 - Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
                 ultimate!
                 <span role="img" aria-label="emoji">
                   🔥
                 </span>
               </h6>
-              <h6 className="text-sm text-gray-500 mb-2">
+              <h6 className="text-sm text-neutral-500 mb-2">
                 - Jangan pakai password yang gampang ditebak, nanti ketahuan
                 musuh!
                 <span role="img" aria-label="emoji">

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

@@ -30,18 +30,18 @@ export const Components: FC = (): ReactElement => {
               xmlns="http://www.w3.org/2000/svg"
               className="mt-10"
             >
-              <circle cx="99" cy="99" r="99" fill="#BCF8B0" />
+              <circle cx="99" cy="99" r="99" className="fill-success-200" />
               <rect
                 x="31.1152"
                 y="32.9141"
                 width="133.971"
                 height="133.971"
                 rx="66.9857"
-                fill="#35BA43"
+                className="fill-success-500"
               />
               <path
                 d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
-                fill="#E0FBD8"
+                className="fill-success-100"
               />
             </svg>
             <h4 className="mt-10 text-primary-500 font-medium text-xl">

apps/dimentorin/src/app/layout.tsx

@@ -0,0 +1,10 @@
+import { Outlet, ScrollRestoration } from "react-router-dom";
+
+export default function RootLayout() {
+  return (
+    <>
+      <Outlet />
+      <ScrollRestoration />
+    </>
+  )
+}

apps/dimentorin/src/app/page.tsx

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

apps/dimentorin/src/index.css

@@ -5,69 +5,67 @@
 @theme {
   --color-primary-50: #f0f8ff;
   --color-primary-100: #e1f0fd;
-  --color-primary-200: #b8e1f8;
-  --color-primary-300: #a1d4f0;
-  --color-primary-400: #4aa4da;
-  --color-primary-500: #1a8ce6;
-  --color-primary-600: #1673c7;
-  --color-primary-700: #0f5ca5;
-  --color-primary-800: #0a4780;
-  --color-primary-900: #04305d;
+  --color-primary-200: #bce1fb;
+  --color-primary-300: #81cbf8;
+  --color-primary-400: #3eb0f2;
+  --color-primary-500: #23a1eb;
+  --color-primary-600: #0877c1;
+  --color-primary-700: #085f9c;
+  --color-primary-800: #0b5181;
+  --color-primary-900: #0f446b;
+  --color-primary-950: #0a2b47;
 
-  --color-neutral-50: #f7f7f7;
+  --color-neutral-50: #f6f6f6;
   --color-neutral-100: #e7e7e7;
-  --color-neutral-200: #d0d0d0;
-  --color-neutral-300: #b7b7b7;
-  --color-neutral-400: #9f9f9f;
-  --color-neutral-500: #7e7e7e;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
   --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4a4a4a;
-  --color-neutral-800: #3a3a3a;
-  --color-neutral-900: #2f2f2f;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
+  --color-neutral-950: #2b2b2b;
 
-  --color-success-50: #e7f2ee;
-  --color-success-100: #cde6dd;
-  --color-success-200: #9bccbc;
-  --color-success-300: #78bdab;
-  --color-success-400: #4ca88f;
-  --color-success-500: #349078;
-  --color-success-600: #2f7c66;
-  --color-success-700: #26624f;
-  --color-success-800: #1e4a3b;
-  --color-success-900: #1b513b;
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;
 
-  --color-info-50: #e7f4f5;
-  --color-info-100: #cce9ea;
-  --color-info-200: #99d3d5;
-  --color-info-300: #78c4c7;
-  --color-info-400: #3aa9ad;
-  --color-info-500: #279599;
-  --color-info-600: #207d82;
-  --color-info-700: #1a666b;
-  --color-info-800: #124c52;
-  --color-info-900: #093d43;
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;
 
-  --color-warning-50: #fffce6;
-  --color-warning-100: #fff8cc;
-  --color-warning-200: #fef39b;
-  --color-warning-300: #fde967;
-  --color-warning-400: #fbd93d;
-  --color-warning-500: #f3c215;
-  --color-warning-600: #d7a20f;
-  --color-warning-700: #aa7e0c;
-  --color-warning-800: #805c07;
-  --color-warning-900: #665c00;
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;
 
-  --color-danger-50: #ffe7e7;
-  --color-danger-100: #ffcece;
-  --color-danger-200: #ff9f9f;
-  --color-danger-300: #ff6e6e;
-  --color-danger-400: #fa4646;
-  --color-danger-500: #ef1f1f;
-  --color-danger-600: #d11515;
-  --color-danger-700: #a51111;
-  --color-danger-800: #7f0c0c;
-  --color-danger-900: #5d2d2d;
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;
 
   --radius-none: 0px;
   --radius-sm: 2px;
@@ -80,13 +78,15 @@
 
   --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
 
-  --text-h1: 3rem; /* ~48px */
-  --text-h2: 2.4rem; /* ~38.4px */
-  --text-h3: 1.92rem; /* ~30.72px */
-  --text-p1: 1.54rem; /* ~24.58px */
-  --text-p2: 1.23rem; /* ~19.68px */
-  --text-label1: 0.98rem; /* ~15.74px */
-  --text-label2: 0.78rem; /* ~12.59px */
+  --text-h1: 3.833rem; /* ~46px */
+  --text-h2: 3.083rem; /* ~37px */
+  --text-h3: 2.417rem; /* ~29px */
+  --text-p1: 1.917rem; /* ~23px */
+  --text-p2: 1.583rem; /* ~19px */
+  --text-p3: 1.25rem; /* 15px */
+  --text-label1: 1rem; /* 12px */
+  --text-label2: 0.833rem; /* ~10px */
+  --text-label3: 0.677rem; /* ~8px */
 }
 
 @layer base {
@@ -124,4 +124,4 @@
   .scrollbar-hide::-webkit-scrollbar {
     @apply hidden;
   }
-}
+}

apps/dimentorin/src/middleware.ts

@@ -16,7 +16,10 @@ const mappingPublicRoutes = [
   '/auth/new-password',
   '/auth/register-mentor',
   '/auth/register-mentor/pending',
-  '/auth/register-mentor/success'
+  '/auth/register-mentor/success',
+  '/mentoring',
+  '/resources',
+  '/articles',
 ];
 
 const mappingRoutePermissions = [
@@ -74,6 +77,18 @@ const mappingRoutePermissions = [
   },
 ];
 
+const mappingPublicPrefixRoutes = [
+  '/mentoring',
+  '/articles',
+]
+
+const mappingProtectedPrefixRoutes = [
+  '/dashboard',
+  '/users',
+  '/roles',
+  '/permissions',
+]
+
 //TODO : Fix this later
 // const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
 //   const fallback = mappingRoutePermissions.find((route) =>
@@ -90,27 +105,37 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
   const token = session_token?.token?.access_token;
   const userPermissions =
     session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
+  
+  // Allow to access the landing page without authentication
+  // So, if the route prefix is in the mappingPublicPrefixRoutes, we return null
+  // to indicate that we don't need to authenticate the user
+  if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
+    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';
+  // Route yang butuh autentikasi: prefix admin backoffice
+  if (mappingProtectedPrefixRoutes.some((p) => pathname.startsWith(p))) {
+    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;
   }
 
+  // Route publik/halaman FE (materi, ai-agent, my-sessions, detail mentor,
+  // 404 tak dikenal) tidak redirect — biarkan halaman-route menanganinya.
   return null;
 };

docker-compose-backoffice.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  backoffice:
+    build:
+      context: .
+      dockerfile: docker/backoffice.Dockerfile
+    ports:
+      - "3001:80"
+    restart: unless-stopped
+    container_name: backoffice

docker-compose-dimentorin.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  dimentorin:
+    build:
+      context: .
+      dockerfile: docker/dimentorin.Dockerfile
+    ports:
+      - "3002:80"
+    restart: unless-stopped
+    container_name: dimentorin

docker-compose-gacha.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  gacha:
+    build:
+      context: .
+      dockerfile: docker/gacha.Dockerfile
+    ports:
+      - "3003:80"
+    restart: unless-stopped
+    container_name: gacha

libs/service/src/api/dimentorin/index.ts

@@ -0,0 +1,265 @@
+import { api } from '../';
+import {
+  TArticleDetail,
+  TArticleListItem,
+  TArticleListParams,
+  TChatRequest,
+  TChatResponse,
+  TMaterialDetail,
+  TMaterialItem,
+  TMaterialListResponse,
+  TBookSessionRequest,
+  TCreatePaymentRequest,
+  TMentorAvailability,
+  TMentorDetail,
+  TMentorListParams,
+  TMentorRegisterRequest,
+  TMentorStats,
+  TPayment,
+  TSessionFeedbackRequest,
+  TSessionListResponse,
+} from '../../types/dimentorin';
+import { TResponseMessage } from '../../types/common';
+
+export const getMentors = async (
+  params?: TMentorListParams
+): Promise<TMentorDetail[]> => {
+  const { data } = await api({
+    method: 'GET',
+    url: '/dimentorin/mentors/public',
+    params,
+  });
+  return data.data;
+};
+
+export const getMentorDetail = async (id: string): Promise<TMentorDetail> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/mentors/public/${id}`,
+  });
+  return data.data;
+};
+
+export const getMentorMe = async (): Promise<TMentorDetail> => {
+  const { data } = await api({
+    method: 'GET',
+    url: '/dimentorin/mentors/me',
+  });
+  return data.data;
+};
+
+export const getMentorMeStatus = async (): Promise<{ status: string }> => {
+  const { data } = await api({
+    method: 'GET',
+    url: '/dimentorin/mentors/me/status',
+  });
+  return data.data;
+};
+
+export const getMentorAvailability = async (
+  id: string
+): Promise<TMentorAvailability> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/mentors/${id}/availability`,
+  });
+  return data.data;
+};
+
+export const getMentorSessions = async (
+  id: string
+): Promise<TSessionListResponse> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/mentors/${id}/sessions`,
+  });
+  return data.data;
+};
+
+export const getMySessions = async (): Promise<TSessionListResponse> => {
+  const { data } = await api({
+    method: 'GET',
+    url: '/dimentorin/sessions/me',
+  });
+  return data.data;
+};
+
+export const postBookSession = async (
+  mentorId: string,
+  payload: TBookSessionRequest
+): Promise<TResponseMessage> => {
+  const { data } = await api({
+    method: 'POST',
+    url: `/dimentorin/mentors/${mentorId}/sessions/create`,
+    data: payload,
+  });
+  return data;
+};
+
+export const postSessionFeedback = async (
+  sessionId: string,
+  payload: TSessionFeedbackRequest
+): Promise<TResponseMessage> => {
+  const { data } = await api({
+    method: 'POST',
+    url: `/dimentorin/sessions/${sessionId}/feedback/create`,
+    data: payload,
+  });
+  return data;
+};
+
+export const getArticles = async (
+  params?: TArticleListParams
+): Promise<TArticleListItem[]> => {
+  const { data } = await api({
+    method: 'GET',
+    url: '/dimentorin/articles',
+    params,
+  });
+  return data.data;
+};
+
+export const getArticleCategories = async (): Promise<string[]> => {
+  const { data } = await api({
+    method: 'GET',
+    url: '/dimentorin/articles/categories',
+  });
+  return data.data;
+};
+
+export const getArticleBySlug = async (slug: string): Promise<TArticleDetail> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/articles/slug/${slug}`,
+  });
+  return data.data;
+};
+
+export const getArticleById = async (id: string): Promise<TArticleDetail> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/articles/${id}`,
+  });
+  return data.data;
+};
+
+export const getMentorStats = async (mentorId: string): Promise<TMentorStats> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/mentors/${mentorId}/stats`,
+  });
+  return data.data;
+};
+
+export const postRegisterMentor = async (
+  payload: TMentorRegisterRequest
+): Promise<TResponseMessage> => {
+  const { data } = await api({
+    method: 'POST',
+    url: '/dimentorin/mentors/create',
+    data: payload,
+  });
+  return data;
+};
+
+export const postCreatePayment = async (
+  sessionId: string,
+  payload: TCreatePaymentRequest
+): Promise<TPayment> => {
+  const { data } = await api({
+    method: 'POST',
+    url: `/dimentorin/payments/sessions/${sessionId}/create`,
+    data: payload,
+  });
+  return data.data;
+};
+
+export const getMyPayments = async (): Promise<TPayment[]> => {
+  const { data } = await api({
+    method: 'GET',
+    url: '/dimentorin/payments/me',
+  });
+  return data.data;
+};
+
+export const getPaymentById = async (id: string): Promise<TPayment> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/payments/${id}`,
+  });
+  return data.data;
+};
+
+export const getSessionPayments = async (
+  sessionId: string
+): Promise<TPayment[]> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/payments/session/${sessionId}`,
+  });
+  return data.data;
+};
+
+export const postConfirmPayment = async (
+  id: string
+): Promise<TResponseMessage> => {
+  const { data } = await api({
+    method: 'POST',
+    url: `/dimentorin/payments/${id}/confirm`,
+  });
+  return data;
+};
+
+export const postRefreshPayment = async (
+  id: string
+): Promise<TPayment> => {
+  const { data } = await api({
+    method: 'POST',
+    url: `/dimentorin/payments/${id}/refresh`,
+  });
+  return data.data;
+};
+
+
+// ---- Materials ----
+export const getMaterialsList = async (): Promise<TMaterialListResponse> => {
+  const { data } = await api({ method: 'GET', url: '/dimentorin/materials' });
+  return data.data;
+};
+
+export const getMaterialBySlug = async (
+  slug: string
+): Promise<TMaterialDetail> => {
+  const { data } = await api({
+    method: 'GET',
+    url: `/dimentorin/materials/slug/${slug}`,
+  });
+  return data.data;
+};
+
+export const getMaterialById = async (
+  id: string
+): Promise<TMaterialDetail> => {
+  const { data } = await api({ method: 'GET', url: `/dimentorin/materials/${id}` });
+  return data.data;
+};
+
+export const getMaterialCategories = async (): Promise<string[]> => {
+  const { data } = await api({
+    method: 'GET',
+    url: '/dimentorin/materials/categories',
+  });
+  return data.data;
+};
+
+// ---- AI Agent (RAG) ----
+export const postChat = async (
+  request: TChatRequest
+): Promise<TChatResponse> => {
+  const { data } = await api({
+    method: 'POST',
+    url: '/dimentorin/ai/chat',
+    data: request,
+  });
+  return data.data;
+};

libs/service/src/api/index.ts

@@ -1,6 +1,8 @@
-import axios, { AxiosRequestConfig } from 'axios';
+import axios, { AxiosError, AxiosRequestConfig } from 'axios';
+import Cookies from 'js-cookie';
 
 export * from './auth';
+export * from './dimentorin';
 export * from './gacha';
 export * from './users';
 
@@ -9,3 +11,24 @@ const config: AxiosRequestConfig = {
 };
 
 export const api = axios.create(config);
+
+api.interceptors.request.use((config) => {
+  const raw = Cookies.get('token');
+  if (raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      const token = parsed?.token?.access_token;
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+    } catch {
+      // ignore malformed token
+    }
+  }
+  return config;
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError) => Promise.reject(error)
+);

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

@@ -0,0 +1,309 @@
+import { useMutation, useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
+import {
+  getArticleById,
+  getArticleBySlug,
+  getArticleCategories,
+  getArticles,
+  getMentorAvailability,
+  getMentorDetail,
+  getMentorMe,
+  getMentorMeStatus,
+  getMentorSessions,
+  getMentorStats,
+  getMentors,
+  getMyPayments,
+    getMaterialById,
+  getMaterialBySlug,
+  getMaterialCategories,
+  getMaterialsList,
+  getMySessions,
+  postChat,
+  getPaymentById,
+  getSessionPayments,
+  postBookSession,
+  postConfirmPayment,
+  postCreatePayment,
+  postRefreshPayment,
+  postRegisterMentor,
+  postSessionFeedback,
+} from '../../api/dimentorin';
+import {
+  TArticleDetail,
+  TArticleListItem,
+  TArticleListParams,
+    TBookSessionRequest,
+  TChatRequest,
+  TChatResponse,
+  TMaterialDetail,
+  TMaterialItem,
+  TMaterialListResponse,
+  TCreatePaymentRequest,
+  TMentorAvailability,
+  TMentorDetail,
+  TMentorListParams,
+  TMentorRegisterRequest,
+  TMentorStats,
+  TPayment,
+  TSessionFeedbackRequest,
+  TSessionListResponse,
+} from '../../types/dimentorin';
+import { TResponseError, TResponseMessage } from '../../types/common';
+
+export const useGetMentors = (
+  params?: TMentorListParams
+): UseQueryResult<TMentorDetail[], TResponseError> => {
+  return useQuery({
+    queryKey: ['get-mentors', params],
+    queryFn: async () => await getMentors(params),
+  });
+};
+
+export const useGetMentorDetail = (
+  id: string
+): UseQueryResult<TMentorDetail, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-mentor-detail', id],
+    queryFn: async () => await getMentorDetail(id),
+    enabled: !!id,
+  });
+};
+
+export const useGetMentorMe = (): UseQueryResult<
+  TMentorDetail,
+  TResponseError
+> => {
+  return useQuery({
+    queryKey: ['get-mentor-me'],
+    queryFn: async () => await getMentorMe(),
+  });
+};
+
+export const useGetMentorMeStatus = (): UseQueryResult<
+  { status: string },
+  TResponseError
+> => {
+  return useQuery({
+    queryKey: ['get-mentor-me-status'],
+    queryFn: async () => await getMentorMeStatus(),
+  });
+};
+
+export const useGetMentorAvailability = (
+  mentorId: string
+): UseQueryResult<TMentorAvailability, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-mentor-availability', mentorId],
+    queryFn: async () => await getMentorAvailability(mentorId),
+    enabled: !!mentorId,
+  });
+};
+
+export const useGetMentorStats = (
+  mentorId: string
+): UseQueryResult<TMentorStats, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-mentor-stats', mentorId],
+    queryFn: async () => await getMentorStats(mentorId),
+    enabled: !!mentorId,
+  });
+};
+
+export const useGetMentorSessions = (
+  id: string
+): UseQueryResult<TSessionListResponse, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-mentor-sessions', id],
+    queryFn: async () => await getMentorSessions(id),
+    enabled: !!id,
+  });
+};
+
+export const useGetMySessions = (): UseQueryResult<
+  TSessionListResponse,
+  TResponseError
+> => {
+  return useQuery({
+    queryKey: ['get-my-sessions'],
+    queryFn: async () => await getMySessions(),
+  });
+};
+
+export const usePostBookSession = (mentorId: string) => {
+  return useMutation({
+    mutationKey: ['post-book-session', mentorId],
+    mutationFn: async (payload: TBookSessionRequest) =>
+      await postBookSession(mentorId, payload),
+  });
+};
+
+export const usePostSessionFeedback = (sessionId: string) => {
+  return useMutation({
+    mutationKey: ['post-session-feedback', sessionId],
+    mutationFn: async (payload: TSessionFeedbackRequest) =>
+      await postSessionFeedback(sessionId, payload),
+  });
+};
+
+export const usePostRegisterMentor = () => {
+  return useMutation({
+    mutationKey: ['post-register-mentor'],
+    mutationFn: async (payload: TMentorRegisterRequest) =>
+      await postRegisterMentor(payload),
+  });
+};
+
+export const usePostCreatePayment = (sessionId: string) => {
+  return useMutation({
+    mutationKey: ['post-create-payment', sessionId],
+    mutationFn: async (payload: TCreatePaymentRequest) =>
+      await postCreatePayment(sessionId, payload),
+  });
+};
+
+export const useGetMyPayments = (): UseQueryResult<
+  TPayment[],
+  TResponseError
+> => {
+  return useQuery({
+    queryKey: ['get-my-payments'],
+    queryFn: async () => await getMyPayments(),
+  });
+};
+
+export const useGetPaymentById = (
+  id: string
+): UseQueryResult<TPayment, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-payment-by-id', id],
+    queryFn: async () => await getPaymentById(id),
+    enabled: !!id,
+  });
+};
+
+export const useGetSessionPayments = (
+  sessionId: string
+): UseQueryResult<TPayment[], TResponseError> => {
+  return useQuery({
+    queryKey: ['get-session-payments', sessionId],
+    queryFn: async () => await getSessionPayments(sessionId),
+    enabled: !!sessionId,
+  });
+};
+
+export const usePostConfirmPayment = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ['post-confirm-payment'],
+    mutationFn: async (id: string) => await postConfirmPayment(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['get-my-payments'] });
+      queryClient.invalidateQueries({ queryKey: ['get-my-sessions'] });
+      queryClient.invalidateQueries({ queryKey: ['get-mentor-sessions'] });
+    },
+  });
+};
+
+export const usePostRefreshPayment = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ['post-refresh-payment'],
+    mutationFn: async (id: string) => await postRefreshPayment(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['get-my-payments'] });
+      queryClient.invalidateQueries({ queryKey: ['get-my-sessions'] });
+      queryClient.invalidateQueries({ queryKey: ['get-mentor-sessions'] });
+    },
+  });
+};
+
+export const useGetArticles = (
+  params?: TArticleListParams
+): UseQueryResult<TArticleListItem[], TResponseError> => {
+  return useQuery({
+    queryKey: ['get-articles', params],
+    queryFn: async () => await getArticles(params),
+  });
+};
+
+export const useGetArticleCategories = (): UseQueryResult<
+  string[],
+  TResponseError
+> => {
+  return useQuery({
+    queryKey: ['get-article-categories'],
+    queryFn: async () => await getArticleCategories(),
+  });
+};
+
+export const useGetArticleBySlug = (
+  slug: string
+): UseQueryResult<TArticleDetail, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-article-by-slug', slug],
+    queryFn: async () => await getArticleBySlug(slug),
+    enabled: !!slug,
+  });
+};
+
+export const useGetArticleById = (
+  id: string
+): UseQueryResult<TArticleDetail, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-article-by-id', id],
+    queryFn: async () => await getArticleById(id),
+    enabled: !!id,
+  });
+};
+
+
+
+// ---- Materials ----
+export const useGetMaterialsList = (): UseQueryResult<
+  TMaterialListResponse,
+  TResponseError
+> => {
+  return useQuery({
+    queryKey: ['get-materials-list'],
+    queryFn: async () => await getMaterialsList(),
+  });
+};
+
+export const useGetMaterialBySlug = (
+  slug: string
+): UseQueryResult<TMaterialDetail, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-material-by-slug', slug],
+    queryFn: async () => await getMaterialBySlug(slug),
+    enabled: !!slug,
+  });
+};
+
+export const useGetMaterialById = (
+  id: string
+): UseQueryResult<TMaterialDetail, TResponseError> => {
+  return useQuery({
+    queryKey: ['get-material-by-id', id],
+    queryFn: async () => await getMaterialById(id),
+    enabled: !!id,
+  });
+};
+
+export const useGetMaterialCategories = (): UseQueryResult<
+  string[],
+  TResponseError
+> => {
+  return useQuery({
+    queryKey: ['get-material-categories'],
+    queryFn: async () => await getMaterialCategories(),
+  });
+};
+
+// ---- AI Agent ----
+export const usePostChat = () => {
+  return useMutation({
+    mutationKey: ['post-chat'],
+    mutationFn: async (request: TChatRequest) => await postChat(request),
+  });
+};
+
+export type { TResponseMessage };

libs/service/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './auth';
+export * from './dimentorin';
 export * from './gacha';
 export * from './users';

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

@@ -0,0 +1,231 @@
+import { TResponseList } from '../common';
+
+export type TMentorListItem = {
+  id: string;
+  user_id: string;
+  fullname: string | null;
+  email: string | null;
+  status: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export type TMentorDetail = {
+  id: string;
+  user_id: string;
+  fullname: string | null;
+  email: string | null;
+  legal_name: string | null;
+  gender: string | null;
+  domicile: string | null;
+  bio: string | null;
+  last_education: string | null;
+  linkedin_url: string | null;
+  github_url: string | null;
+  cv_url: string | null;
+  portfolio_url: string | null;
+  phone_for_verification: string | null;
+  industries: string[];
+  expertise: string[];
+  languages: string[];
+  current_company: string;
+  current_role: string;
+  years_of_experience: number;
+  topics_of_interest: string[];
+  preferred_mentee_level: string[];
+  preferred_mentoring_formats: string[];
+  availability_commitment: string;
+  mentoring_rate: number;
+  status: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export type TMentorListParams = {
+  page?: number;
+  per_page?: number;
+  search?: string;
+  sort_by?: string;
+  order?: string;
+};
+
+export type TMentorListResponse = TMentorListItem[] | TResponseList<TMentorListItem>;
+
+export type TAvailabilitySlot = {
+  date: string;
+  time: string;
+  available: boolean;
+};
+
+export type TMentorAvailability = {
+  mentor_id: string;
+  availability_commitment: string;
+  preferred_formats: string[];
+  slots: TAvailabilitySlot[];
+  booked_dates: string[];
+};
+
+export type TSessionListItem = {
+  id: string;
+  mentor_id: string;
+  mentee_id: string;
+  topic: string;
+  scheduled_at: string;
+  duration_minutes: number;
+  session_type: string;
+  status: string;
+  rating: number | null;
+  created_at: string;
+  mentee_email: string | null;
+  mentee_fullname: string | null;
+};
+
+export type TSessionListResponse = {
+  sessions: TSessionListItem[];
+  total: number;
+};
+
+export type TBookSessionRequest = {
+  topic: string;
+  scheduled_at: string;
+  description?: string | null;
+  duration_minutes?: number | null;
+  session_type?: string | null;
+};
+
+export type TSessionFeedbackRequest = {
+  feedback: string;
+  rating: number;
+};
+
+export type TMentorStats = {
+  mentor_id: string;
+  total_sessions: number;
+  unique_mentees: number;
+  avg_rating: number;
+};
+
+export type TArticleListItem = {
+  id: string;
+  title: string;
+  slug: string;
+  category: string;
+  excerpt: string;
+  cover_url: string | null;
+  author_name: string | null;
+  created_at: string;
+};
+
+export type TArticleDetail = TArticleListItem & {
+  content: string;
+  is_published: boolean;
+  updated_at: string;
+};
+
+export type TArticleListParams = {
+  page?: number;
+  per_page?: number;
+  category?: string;
+};
+
+export type TMentorRegisterRequest = {
+  email: string;
+  password: string;
+  fullname: string;
+  phone_number?: string | null;
+  identity_and_verification: {
+    legal_name: string;
+    gender?: string | null;
+    domicile?: string | null;
+    identity_document_url: string;
+    phone_for_verification?: string | null;
+  };
+  professional_profile: {
+    bio: string;
+    last_education?: string | null;
+    linkedin_url?: string | null;
+    github_url?: string | null;
+    cv_url?: string | null;
+    portfolio_url?: string | null;
+    industries: string[];
+    expertise: string[];
+    languages: string[];
+    current_company: string;
+    current_role: string;
+    years_of_experience: number;
+  };
+  mentoring_logistics: {
+    topics_of_interest: string[];
+    preferred_mentee_level: string[];
+    preferred_mentoring_formats: string[];
+    availability_commitment: string;
+    mentoring_rate_amount: number;
+  };
+};
+
+export type TPayment = {
+  id: string;
+  sessionId: string;
+  mentorId: string;
+  amount: number;
+  serviceFee: number;
+  total: number;
+  method: string;
+  provider: string;
+  status: string;
+  externalRef?: string | null;
+  providerOrderId?: string | null;
+  expiresAt: string;
+  createdAt: string;
+};
+
+export type TCreatePaymentRequest = {
+  method: string; // 'va' | 'qris' | 'manual'
+};
+
+
+export type TMaterialItem = {
+  id: string;
+  mentorId: string;
+  title: string;
+  slug: string;
+  category: string;
+  description: string;
+  coverUrl?: string | null;
+  isPublished: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TMaterialDetail = TMaterialItem & {
+  content: string;
+};
+
+export type TMaterialListResponse = {
+  data: TMaterialItem[];
+  meta: {
+    page: number;
+    per_page: number;
+    total?: number;
+    total_pages?: number;
+    has_next: boolean;
+    has_prev: boolean;
+  };
+};
+
+export type TChatRequest = {
+  question: string;
+  materialId?: string;
+};
+
+export type TChatSource = {
+  materialId: string;
+  title: string;
+  score: number;
+  snippet: string;
+};
+
+export type TChatResponse = {
+  answer: string;
+  sources: TChatSource[];
+};

libs/service/src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './auth';
+export * from './dimentorin';
 export * from './gacha';
 export * from './users';
 export * from './roles';

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

@@ -26,10 +26,10 @@ type TButtonProps = DetailedHTMLProps<
 const variantClasses: Record<TButtonVariant, string> = {
   primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
   secondary:
-    'bg-white hover:text-primary-600 hover:bg-gray-50 text-primary-500 shadow-md',
-  text: 'bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
+    'bg-white hover:text-primary-600 hover:bg-neutral-50 text-primary-500 shadow-md',
+  text: 'bg-transparent hover:text-primary-600 hover:bg-neutral-50 text-primary-500',
   bordered:
-    'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
+    'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-neutral-50 text-primary-500',
   success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
   danger: 'bg-danger-100 hover:bg-danger-200 text-danger-500 shadow-md',
 };

libs/ui/src/atoms/input/input.tsx

@@ -9,7 +9,7 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // Import
 import { cn } from '@imphnen-frontend-service/utils';
 import { Button } from '../button';
 
-type TInputType = 'text' | 'email' | 'number' | 'password' | 'file';
+type TInputType = 'text' | 'email' | 'number' | 'password' | 'file' | 'date' | 'time';
 type TInputSize = 'sm' | 'md' | 'lg';
 type Width = 'standard' | 'custom'
 
@@ -49,7 +49,7 @@ export const Input: FC<TInputProps> = ({
   };
 
   const mergedClassName = cn(
-    `px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree ${widthform === "standard" ? "min-w-70" : ""}`,
+    `px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 rounded-md font-bai-jamjuree ${widthform === "standard" ? "min-w-70" : ""}`,
     sizeClasses[size].textSize,
     disabled && disabledClass,
     className

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

@@ -35,7 +35,7 @@ export const Select: FC<TSelectProps> = ({
   ...rest
 }): ReactElement => {
   const mergedClassName = cn(
-    `appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md`,
+    `appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 rounded-md`,
     sizeClasses[size],
     widthform === 'standard' && 'min-w-70',
     disabled && disabledClass,

libs/ui/src/atoms/textarea/textarea.tsx

@@ -38,7 +38,7 @@ export const Textarea: FC<TTextareaProps> = ({
   ...rest
 }): ReactElement => {
   const mergedClassName = cn(
-    'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
+    'rounded-md border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
     sizeClasses[size],
     disabled && disabledClass,
     error && errorClass,

libs/ui/src/molecules/forgot-step/forgot-step.tsx

@@ -15,15 +15,15 @@ export const ForgotStep: FC<TForgotStepProps> = ({
         <div className="w-full grid grid-cols-3 gap-3">
           <div className="flex flex-col items-center justify-center gap-2">
             <div className={`${step === 1 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
-            <h4 className={`${step === 1 ? "text-primary-500" : "text-gray-500"} text-xs`}>Masukkan Email</h4>
+            <h4 className={`${step === 1 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Masukkan Email</h4>
           </div>
           <div className="flex flex-col items-center justify-center gap-2">
             <div className={`${step === 2 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
-            <h4 className={`${step === 2 ? "text-primary-500" : "text-gray-500"} text-xs`}>Verifikasi OTP</h4>
+            <h4 className={`${step === 2 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Verifikasi OTP</h4>
           </div>
           <div className="flex flex-col items-center justify-center gap-2">
             <div className={`${step === 3 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
-            <h4 className={`${step === 3 ? "text-primary-500" : "text-gray-500"} text-xs`}>Summon Password ^^</h4>
+            <h4 className={`${step === 3 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Summon Password ^^</h4>
           </div>
         </div>
     )

libs/ui/src/molecules/modal/index.tsx

@@ -66,7 +66,7 @@ const Modal = ({
     <div className="fixed inset-0 z-50">
       <div
         className={cn(
-          'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
+          'fixed inset-0 bg-neutral-900/80 transition-opacity duration-200',
           isOpen ? 'opacity-100' : 'opacity-0',
           overlayClassName
         )}
@@ -90,7 +90,7 @@ const Modal = ({
         <button
           onClick={onClose}
           className={cn(
-            'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
+            'absolute right-4 top-4 rounded-sm p-1 text-neutral-500 transition-colors hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2',
             closeButtonClassName
           )}
           aria-label="Close modal"
@@ -168,7 +168,7 @@ const ModalDescription = ({
   children,
   id,
 }: ModalDescriptionProps) => (
-  <p id={id} className={cn('text-sm text-gray-500', className)}>
+  <p id={id} className={cn('text-sm text-neutral-500', className)}>
     {children}
   </p>
 );

libs/ui/src/molecules/modal/modal.stories.tsx

@@ -40,7 +40,7 @@ export const Default: Story = {
           <button className="px-4 py-2 bg-blue-500 text-white rounded">
             Confirm
           </button>
-          <button className="px-4 py-2 bg-gray-300 rounded">Cancel</button>
+          <button className="px-4 py-2 bg-neutral-300 rounded">Cancel</button>
         </Modal.Footer>
       </>
     ),

libs/ui/src/molecules/modal/modal.tsx

@@ -66,7 +66,7 @@ const Modal = ({
     <div className="fixed inset-0 z-50">
       <div
         className={cn(
-          'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
+          'fixed inset-0 bg-neutral-900/80 transition-opacity duration-200',
           isOpen ? 'opacity-100' : 'opacity-0',
           overlayClassName
         )}
@@ -75,7 +75,7 @@ const Modal = ({
       />
       <div
         className={cn(
-          'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-[#F0F8FF] rounded-lg p-6 shadow-xl transition-all duration-200',
+          'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-primary-50 rounded-lg p-6 shadow-xl transition-all duration-200',
           'sm:rounded-lg sm:max-w-md',
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
           className
@@ -90,7 +90,7 @@ const Modal = ({
         <button
           onClick={onClose}
           className={cn(
-            'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
+            'absolute right-4 top-4 rounded-sm p-1 text-neutral-500 transition-colors hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2',
             closeButtonClassName
           )}
           aria-label="Close modal"
@@ -168,7 +168,7 @@ const ModalDescription = ({
   children,
   id,
 }: ModalDescriptionProps) => (
-  <p id={id} className={cn('text-sm text-gray-500', className)}>
+  <p id={id} className={cn('text-sm text-neutral-500', className)}>
     {children}
   </p>
 );

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

@@ -17,7 +17,7 @@ export const RegisterMentorStep: FC<TRegisterMentorStep> = ({ step }): ReactElem
   return (
     <div className="relative w-full px-8">
       {/* Garis dasar (abu/biru muda) */}
-      <div className="absolute top-5 left-8 right-8 h-0.5 bg-blue-100 z-0" />
+      <div className="absolute top-5 left-8 right-8 h-0.5 bg-primary-100 z-0" />
 
       {/* Garis progress biru (dinamis) */}
       <div
@@ -37,7 +37,7 @@ export const RegisterMentorStep: FC<TRegisterMentorStep> = ({ step }): ReactElem
                 className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
                   isActive
                     ? "bg-gradient-to-b from-purple-600 to-blue-500 text-white border-transparent"
-                    : "bg-white text-gray-700 border-blue-400"
+                    : "bg-white text-neutral-700 border-blue-400"
                 }`}
               >
                 <span className="font-bold">{currentStep}</span>

libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx

@@ -29,7 +29,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/dashboard')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <AppstoreOutlined className="text-[20px]" />
@@ -41,7 +41,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/gacha-roll')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <ReloadOutlined className="text-[20px]" />
@@ -53,7 +53,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/permissions')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <UserSwitchOutlined className="text-[20px]" />
@@ -65,7 +65,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/roles')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <UsergroupAddOutlined className="text-[20px]" />
@@ -77,7 +77,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/accounts')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <UserOutlined className="text-[20px]" />
@@ -89,7 +89,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/transactions')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <AuditOutlined className="text-[20px]" />
@@ -101,7 +101,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/prizes')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <InboxOutlined className="text-[20px]" />
@@ -115,7 +115,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
         <Button
           onClick={signOut}
           variant="text"
-          className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
+          className="items-start justify-start gap-3 px-[8px] py-[10px] text-neutral-700 hover:text-danger-500 transition-colors w-full"
         >
           <LogoutOutlined className="text-[20px]" />
           <span className="text-p3 font-medium">Log Out</span>

libs/ui/src/organisms/filter/filter.tsx

@@ -30,9 +30,9 @@ const Radio = ({
         checked={checked}
         onChange={onChange}
         disabled={disabled}
-        className="peer col-start-1 row-start-1 appearance-none shrink-0 size-[10px] bg-primary-100 rounded-full disabled:border-gray-400"
+        className="peer col-start-1 row-start-1 appearance-none shrink-0 size-[10px] bg-primary-100 rounded-full disabled:border-neutral-400"
       />
-      <div className="pointer-events-none col-start-1 row-start-1 size-[6px] rounded-full peer-checked:bg-primary-500 peer-checked:peer-disabled:bg-gray-400" />
+      <div className="pointer-events-none col-start-1 row-start-1 size-[6px] rounded-full peer-checked:bg-primary-500 peer-checked:peer-disabled:bg-neutral-400" />
     </div>
     <label htmlFor={id} className="text-start text-neutral-400 text-label2">
       {label || 'This is the radio label'}

libs/ui/src/organisms/navbar/navbar.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof Navbar> = {
   decorators: [
     (Story) => (
       <BrowserRouter>
-        <div className="min-h-screen bg-gray-100 p-4">
+        <div className="min-h-screen bg-neutral-100 p-4">
           <Story />
         </div>
       </BrowserRouter>

libs/ui/src/organisms/navbar/navbar.tsx

@@ -38,7 +38,7 @@ export const Navbar: FC = (): ReactElement => {
                 <Button
                   size="md"
                   variant="text"
-                  className="lg:text-p2 lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
+                  className="lg:text-p2 lg:max-h-[44px] text-neutral-600 hover:text-neutral-700 transition-colors"
                 >
                   <Link to="#">Merch Gacha</Link>
                 </Button>
@@ -56,7 +56,7 @@ export const Navbar: FC = (): ReactElement => {
                     onClick={signOut}
                     variant="text"
                     size="md"
-                    className="lg:text-p2 text-red-500 font-bold hover:text-red-600"
+                    className="lg:text-p2 text-danger-500 font-bold hover:text-danger-600"
                   >
                     Logout
                   </Button>
@@ -69,12 +69,12 @@ export const Navbar: FC = (): ReactElement => {
               }`}
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             >
-              <MenuOutlined style={{ color: '#1a8ce6' }} />
+              <MenuOutlined style={{ color: '#23a1eb' }} />
             </button>
             <div className="relative">
               {isDropdownOpen && (
                 <div className="absolute right-0 top-0 mt-5">
-                  <ul className="mt-2 w-48 bg-white shadow-md border rounded-[16px] border-gray-200 px-5 py-3">
+                  <ul className="mt-2 w-48 bg-white shadow-md border rounded-2xl border-neutral-200 px-5 py-3">
                     <li>
                       <Link
                         to="#"
@@ -86,7 +86,7 @@ export const Navbar: FC = (): ReactElement => {
                     <li>
                       <Link
                         to="#"
-                        className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                        className="block text-neutral-600 transition-colors px-4 py-2 text-center font-semibold"
                       >
                         Merch Gacha
                       </Link>
@@ -95,20 +95,20 @@ export const Navbar: FC = (): ReactElement => {
                       <li>
                         <Button
                           onClick={() => setShowModalLogin(true)}
-                          className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold"
+                          className="block w-full text-neutral-100 transition-colors px-4 py-2 text-center font-semibold"
                         >
                           Login
                         </Button>
                       </li>
                     ) : (
                       <>
-                        <li className="px-4 py-2 text-center text-gray-600 font-semibold">
+                        <li className="px-4 py-2 text-center text-neutral-600 font-semibold">
                           {session?.user?.fullname}
                         </li>
                         <li>
                           <div
                             onClick={signOut}
-                            className="block text-red-500 font-bold transition-colors px-4 py-2 text-center cursor-pointer"
+                            className="block text-danger-500 font-bold transition-colors px-4 py-2 text-center cursor-pointer"
                           >
                             Logout
                           </div>

package-lock.json

@@ -95,7 +95,7 @@
         "h3": "^1.8.2",
         "jiti": "2.4.2",
         "jsdom": "~22.1.0",
-        "nx": "20.8.1",
+        "nx": "^20.8.1",
         "openapi-typescript": "^7.8.0",
         "postcss": "^8.5.3",
         "prettier": "^2.6.2",
@@ -2254,20 +2254,20 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
-      "integrity": "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.5.tgz",
+      "integrity": "sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@emnapi/wasi-threads": "1.0.2",
+        "@emnapi/wasi-threads": "1.0.4",
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
-      "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.5.tgz",
+      "integrity": "sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -2275,9 +2275,9 @@
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.2.tgz",
-      "integrity": "sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.4.tgz",
+      "integrity": "sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7573,7 +7573,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
       "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "playwright": "1.52.0"
@@ -10971,18 +10971,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/debug": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
-      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/ms": "*"
-      }
-    },
     "node_modules/@types/doctrine": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.9.tgz",
@@ -11208,15 +11196,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/ms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
-      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@types/node": {
       "version": "18.16.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.9.tgz",
@@ -11259,7 +11238,7 @@
       "version": "19.1.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
       "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -11269,7 +11248,7 @@
       "version": "19.1.2",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.2.tgz",
       "integrity": "sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.0.0"
@@ -13225,9 +13204,9 @@
       }
     },
     "node_modules/@yarnpkg/parsers/node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.15.1.tgz",
+      "integrity": "sha512-S99WuO3HlhO3XN41EtYUNl9zzXjoJx7QvmipxsJVxtCBT0YHEFy+iOJhjSvrmV12nYhWpZaM8lPHkJm0yUMbag==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13353,7 +13332,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "4"
@@ -14029,14 +14007,15 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.18.1.tgz",
+      "integrity": "sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==",
       "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
       }
     },
     "node_modules/axobject-query": {
@@ -15311,7 +15290,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "readdirp": "^4.0.1"
@@ -16589,7 +16568,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/cwd": {
@@ -16830,7 +16809,6 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -17543,9 +17521,9 @@
       }
     },
     "node_modules/end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -19367,9 +19345,9 @@
       "license": "ISC"
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
       "funding": [
         {
           "type": "individual",
@@ -19597,15 +19575,16 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
-        "mime-types": "^2.1.12"
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
       },
       "engines": {
         "node": ">= 6"
@@ -19724,9 +19703,9 @@
       }
     },
     "node_modules/front-matter/node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.15.1.tgz",
+      "integrity": "sha512-S99WuO3HlhO3XN41EtYUNl9zzXjoJx7QvmipxsJVxtCBT0YHEFy+iOJhjSvrmV12nYhWpZaM8lPHkJm0yUMbag==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -20385,9 +20364,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -20739,7 +20718,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "agent-base": "6",
@@ -20844,7 +20822,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
       "integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/import-fresh": {
@@ -25005,7 +24983,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/muggle-string": {
@@ -25939,9 +25916,9 @@
       }
     },
     "node_modules/nx/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -26020,9 +25997,9 @@
       "license": "MIT"
     },
     "node_modules/nx/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -27413,7 +27390,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
       "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "playwright-core": "1.52.0"
@@ -27432,7 +27409,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
       "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
@@ -28308,10 +28285,13 @@
       }
     },
     "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/prr": {
       "version": "1.0.1",
@@ -28818,7 +28798,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 14.18.0"
@@ -29483,7 +29463,7 @@
       "version": "1.87.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.87.0.tgz",
       "integrity": "sha512-d0NoFH4v6SjEK7BoX810Jsrhj7IQSYHAHLi/iSpgqKc7LaIDshFRlSg5LOymf9FqQhxEHs2W5ZQXlvy0KD45Uw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "chokidar": "^4.0.0",
@@ -32153,9 +32133,9 @@
       "license": "MIT"
     },
     "node_modules/tmp": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -32450,502 +32430,6 @@
         "node": ">=0.6.x"
       }
     },
-    "node_modules/tsx": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz",
-      "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "esbuild": "~0.23.0",
-        "get-tsconfig": "^4.7.5"
-      },
-      "bin": {
-        "tsx": "dist/cli.mjs"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
-      "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/android-arm": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz",
-      "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/android-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz",
-      "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/android-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz",
-      "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz",
-      "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/darwin-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz",
-      "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz",
-      "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-arm": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz",
-      "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz",
-      "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-ia32": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz",
-      "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-loong64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz",
-      "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz",
-      "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz",
-      "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz",
-      "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-s390x": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz",
-      "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/linux-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz",
-      "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
-      "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz",
-      "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/sunos-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
-      "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/win32-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz",
-      "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/win32-ia32": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz",
-      "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/@esbuild/win32-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz",
-      "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tsx/node_modules/esbuild": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz",
-      "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.23.1",
-        "@esbuild/android-arm": "0.23.1",
-        "@esbuild/android-arm64": "0.23.1",
-        "@esbuild/android-x64": "0.23.1",
-        "@esbuild/darwin-arm64": "0.23.1",
-        "@esbuild/darwin-x64": "0.23.1",
-        "@esbuild/freebsd-arm64": "0.23.1",
-        "@esbuild/freebsd-x64": "0.23.1",
-        "@esbuild/linux-arm": "0.23.1",
-        "@esbuild/linux-arm64": "0.23.1",
-        "@esbuild/linux-ia32": "0.23.1",
-        "@esbuild/linux-loong64": "0.23.1",
-        "@esbuild/linux-mips64el": "0.23.1",
-        "@esbuild/linux-ppc64": "0.23.1",
-        "@esbuild/linux-riscv64": "0.23.1",
-        "@esbuild/linux-s390x": "0.23.1",
-        "@esbuild/linux-x64": "0.23.1",
-        "@esbuild/netbsd-x64": "0.23.1",
-        "@esbuild/openbsd-arm64": "0.23.1",
-        "@esbuild/openbsd-x64": "0.23.1",
-        "@esbuild/sunos-x64": "0.23.1",
-        "@esbuild/win32-arm64": "0.23.1",
-        "@esbuild/win32-ia32": "0.23.1",
-        "@esbuild/win32-x64": "0.23.1"
-      }
-    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -35359,16 +34843,19 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
-      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
       "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
       }
     },
     "node_modules/yaml-ast-parser": {

package.json

@@ -111,7 +111,7 @@
     "h3": "^1.8.2",
     "jiti": "2.4.2",
     "jsdom": "~22.1.0",
-    "nx": "20.8.1",
+    "nx": "^20.8.1",
     "openapi-typescript": "^7.8.0",
     "postcss": "^8.5.3",
     "prettier": "^2.6.2",