fix(dimentorin): For util React key + backoffice dashboard stats akurat

- For(): bungkus item dalam Fragment dgn key=idx — hilangkan warning 'Each child in a list should have a unique key prop' di semua list backoffice - Dashboard backoffice: fetch per_page=100 (bukan 5/1) supaya stat total akurat; Mentor Terdaftar dihitung dari user list role=Mentor (bukan unique mentor_id dalam 5 sesi pertama)
feat(dimentorin): backoffice admin panel (dashboard, user mgmt, session mgmt, content/roadmap, feedback, settings)
2026-08-06 08:33:11 +07:00 · 2026-08-06 01:03:50 +07:00 · 2026-08-05 23:18:51 +07:00 · 2026-08-05 22:40:56 +07:00 · 2026-08-05 21:43:50 +07:00 · 2026-08-05 20:59:56 +07:00
170 changed files with 5842 additions and 11075 deletions
@@ -1,52 +0,0 @@
-import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"
-import { PieLabelProps } from "recharts/types/polar/Pie"
-
-type ChartProps = {
-  name: string
-  value: number
-  color: string
-}
-
-const chartData: ChartProps[] = [
-  { name: "Active", value: 49, color: "#23A1EB" },
-  { name: "Done", value: 24, color: "#81CBF8" },
-  { name: "Canceled", value: 27, color: "#BCE1FB" },
-]
-
-const RADIAN = Math.PI / 180;
-const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: PieLabelProps) => {
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-  const x = cx + radius * Math.cos(-(midAngle ?? 0) * RADIAN);
-  const y = cy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
-
-  return (
-    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
-      {`${((percent ?? 1) * 100).toFixed(0)}%`}
-    </text>
-  );
-};
-
-export const SessionStatusChart = () => {
-  return (
-    <ResponsiveContainer width="100%" height={320}>
-      <PieChart width={500} height={320}>
-        <Pie
-          data={chartData}
-          dataKey="value"
-          nameKey="name"
-          cx="50%"
-          cy="50%"
-          innerRadius={40}
-          outerRadius={100}
-          labelLine={false}
-          label={renderCustomizedLabel}
-        >
-          {chartData.map((entry, index) => (
-            <Cell key={`cell-${index}`} fill={entry.color} />
-          ))}
-        </Pie>
-        <Tooltip />
-      </PieChart>
-    </ResponsiveContainer>
-  )
-}
@@ -1,36 +0,0 @@
-import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
-
-type ChartProps = {
-  name: string
-  activeUser: number
-  activeSession: number
-}
-
-const chartData: ChartProps[] = [
-  { name: "2014", activeUser: 0, activeSession: 0 },
-  { name: "2015", activeUser: 15, activeSession: 25 },
-  { name: "2016", activeUser: 30, activeSession: 40 },
-  { name: "2017", activeUser: 45, activeSession: 55 },
-  { name: "2018", activeUser: 60, activeSession: 70 },
-  { name: "2019", activeUser: 75, activeSession: 85 },
-  { name: "2020", activeUser: 90, activeSession: 95 },
-  { name: "2021", activeUser: 85, activeSession: 80 },
-  { name: "2022", activeUser: 95, activeSession: 90 },
-  { name: "2023", activeUser: 100, activeSession: 100 },
-]
-
-export const UserGrowthChart = () => {
-  return (
-    <ResponsiveContainer width="100%" height={320}>
-      <LineChart data={chartData} width={500} height={320} margin={{ left: -32 }}>
-        <CartesianGrid />
-        <XAxis dataKey="name" />
-        <YAxis tickCount={10} />
-        <Tooltip />
-        <Legend />
-        <Line dataKey="activeUser" stroke="#23A1EB" />
-        <Line dataKey="activeSession" stroke="#0877C1" />
-      </LineChart>
-    </ResponsiveContainer>
-  )
-}
@@ -1,115 +0,0 @@
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms";
-import { For } from "@imphnen-frontend-service/utils";
-import { ReactElement } from "react";
-import { UserGrowthChart } from "./_components/chart/user-growth";
-import { SessionStatusChart } from "./_components/chart/session-status";
-
-const Overview = () => {
-  return (
-    <div className="bg-white px-6 py-4 rounded-md shadow">
-      <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
-      <p className="text-neutral-400 text-p3">Total Users</p>
-    </div>
-  )
-}
-
-export default function Components(): ReactElement {
-  return (
-    <BackofficeWrapper title="Dimentorin.dev">
-      <h1 className="text-p1 font-semibold text-neutral-700 mb-5">Overview</h1>
-
-      <div className="space-y-14">
-        <div>
-          <Button type="button" size="sm" variant="bordered" className="bg-white text-md text-neutral-900 mb-5 border-primary-200">
-            Overview
-          </Button>
-
-          <div className="grid grid-cols-5 gap-5">
-            <For data={Array.from({ length: 5 })}>
-              {(_, index) => <Overview key={index} />}
-            </For>
-          </div>
-        </div>
-
-        <div>
-          <Button type="button" size="sm" variant="bordered" className="bg-white text-md text-neutral-900 mb-5 border-primary-200">
-            Trends & Analytics
-          </Button>
-
-          <div className="grid grid-cols-7 gap-x-5">
-            <div className="bg-white px-6 py-4 rounded-lg col-span-5">
-              <div className="flex items-center justify-between mb-7">
-                <h2 className="font-semibold text-p3 text-neutral-700">User Growth</h2>
-                <div></div>
-              </div>
-              <UserGrowthChart />
-            </div>
-            <div className="bg-white px-6 py-4 rounded-lg col-span-2">
-              <h2 className="font-semibold text-p3 text-neutral-700 mb-7">Session Status</h2>
-              <SessionStatusChart />
-            </div>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 gap-x-5">
-          <div className="bg-white px-7 py-4 rounded-lg">
-            <h2 className="font-semibold text-p3 text-neutral-700 mb-5">Top 5 Mentors</h2>
-
-            <div>
-              <table className="w-full">
-                <thead>
-                  <tr className="text-label1 bg-primary-50 text-left rounded-full">
-                    <th className="font-medium py-4 px-5 w-[10%] rounded-l-lg">No.</th>
-                    <th className="font-medium py-4 px-5 w-3/5">Nama Lengkap</th>
-                    <th className="font-medium py-4 px-5 rounded-r-lg">Avg Rating</th>
-                  </tr>
-                </thead>
-
-                <tbody>
-                  <For data={Array.from({ length: 5 })}>
-                    {(_, index) => (
-                      <tr key={index} className="shadow rounded-lg">
-                        <td className="py-4 px-5">{index + 1}</td>
-                        <td className="py-4 px-5">Mursid Al-Catraz</td>
-                        <td className="py-4 px-5">4.9</td>
-                      </tr>
-                    )}
-                  </For>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <div className="bg-white px-6 py-4 rounded-lg">
-            <h2 className="font-semibold text-p3 text-neutral-700 mb-5">Top Booked Mentoring Topics</h2>
-
-            <div>
-              <table className="w-full">
-                <thead>
-                  <tr className="text-label1 bg-primary-50 text-left font-medium">
-                    <th className="font-medium py-4 px-5 w-[10%] rounded-l-lg">No.</th>
-                    <th className="font-medium py-4 px-5 w-3/5">Nama Lengkap</th>
-                    <th className="font-medium py-4 px-5 rounded-r-lg">Total Sesi</th>
-                  </tr>
-                </thead>
-
-                <tbody>
-                  <For data={Array.from({ length: 5 })}>
-                    {(_, index) => (
-                      <tr key={index} className="shadow rounded-lg">
-                        <td className="py-4 px-5">{index + 1}</td>
-                        <td className="py-4 px-5">Mursid Al-Catraz</td>
-                        <td className="py-4 px-5">1000</td>
-                      </tr>
-                    )}
-                  </For>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </BackofficeWrapper>
-  )
-}
@@ -1,181 +0,0 @@
-import { SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn, For } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { ReactElement, useState } from "react"
-
-const TABS = {
-  MENTORING: 'Mentoring',
-  PLATFORM: 'Platform'
-} as const
-type Tabs = typeof TABS[keyof typeof TABS]
-
-type FeedbackStatus = 'done' | 'todo';
-
-interface FeedbackType {
-  id: number
-  name: string
-  email: string
-  rating: number
-  status: FeedbackStatus
-}
-
-const mockData: FeedbackType[] = Array.from({ length: 90 }, (_, i) => ({
-  id: i + 1,
-  name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
-  email: 'fullname23@gmail.com',
-  rating: 4.5,
-  status: i % 2 === 0 ? 'done' : 'todo',
-}))
-
-export default function Components(): ReactElement {
-  const [activeTab, setActiveTab] = useState<Tabs>(TABS.MENTORING)
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  });
-
-  const columns: ColumnDef<FeedbackType>[] = [
-    {
-      id: 'select',
-      meta: { cellClassName: cn("w-20") },
-      header: ({ table }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={table.getIsAllRowsSelected()}
-          onChange={table.getToggleAllRowsSelectedHandler()}
-        />
-      ),
-      cell: ({ row }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={row.getIsSelected()}
-          onChange={row.getToggleSelectedHandler()}
-        />
-      ),
-    },
-    {
-      id: 'name',
-      header: 'Name',
-      accessorKey: 'name',
-    },
-    {
-      id: 'email',
-      header: 'Email',
-      accessorKey: 'email',
-    },
-    {
-      id: 'rating',
-      header: 'Rating',
-      accessorKey: 'rating',
-    },
-    {
-      id: 'status',
-      header: 'Status',
-      accessorKey: 'status',
-      cell: ({ row }) => {
-        const status = row.original.status;
-        const statusColors: Record<FeedbackStatus, string> = {
-          done: 'bg-success-200 text-success-500',
-          todo: 'bg-primary-200 text-primary-500',
-        };
-        const statusText: Record<FeedbackStatus, string> = {
-          done: 'Done',
-          todo: 'To Do',
-        };
-        return (
-          <div
-            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-          >
-            {statusText[status]}
-          </div>
-        );
-      },
-    },
-    {
-      header: 'Action',
-      meta: { cellClassName: cn("w-72") },
-      cell: ({ row }) => (
-        <Button
-          variant="primary"
-          size="sm"
-          onClick={(e) => {
-            e.stopPropagation()
-          }}
-          className="flex items-center gap-2 w-max"
-        >
-          <SearchOutlined className="text-[16px]" /> Lihat Feedback
-        </Button>
-      ),
-    },
-  ]
-
-  const table = useReactTable({
-    data: mockData,
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-    manualPagination: false,
-  });
-
-  return (
-    <BackofficeWrapper title="Dimentorin.dev">
-      <div className="mb-8 flex justify-between items-center">
-        <h1 className="text-p1 font-semibold text-neutral-700">Feedback</h1>
-        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
-          <For data={Object.values(TABS)}>
-            {(tab) => (
-              <Button
-                key={tab}
-                variant="text"
-                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
-                onClick={() => setActiveTab(tab)}
-              >
-                {tab}
-              </Button>
-            )}
-          </For>
-        </div>
-      </div>
-
-      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
-        <div className="flex justify-between items-center gap-5 mb-2">
-          <div className="relative w-full">
-            <Input
-              placeholder="Cari berdasarkan nama mentor/mentee"
-              className="pl-12 w-full max-h-full"
-            />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-              <SearchOutlined />
-            </div>
-          </div>
-          <Select>
-            <option selected disabled>Rating</option>
-            <option value="4.5">4.5</option>
-            <option value="5">5</option>
-          </Select>
-          <Select>
-            <option selected disabled>Status</option>
-            <option value="active">Active</option>
-            <option value="inactive">Inactive</option>
-          </Select>
-        </div>
-
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-    </BackofficeWrapper>
-  );
-}
@@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
    <div className="bg-primary-50 min-h-screen flex justify-center">
      <div className="bg-primary-50 min-h-screen w-full flex">
        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
          <Outlet />
        </div>
      </div>
@@ -1,85 +0,0 @@
-import { ArrowRightOutlined } from "@ant-design/icons";
-import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
-import { Accordion, Modal, ModalProps } from "@imphnen-frontend-service/ui/molecules";
-import { cn, For } from "@imphnen-frontend-service/utils";
-import { FC } from "react";
-
-const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
-
-export const ModalCreateRoadmap: FC<Omit<ModalProps, 'children'>> = ({ isOpen, onClose }) => {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      className="xl:max-w-[64rem] bg-white px-10 py-9"
-      closeButtonClassName="hidden"
-    >
-      <div className="overflow-y-auto max-h-[80vh]">
-        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
-          Create Roadmaps
-        </h1>
-
-        <div className="grid grid-cols-5 gap-6 mb-12">
-          <div className="col-span-3">
-            <label className={labelClass}>Prompt</label>
-            <Textarea
-              className="min-w-full w-full h-[calc(100%-2rem)]"
-              placeholder="Create a learning roadmap for (subject) at the (level) level. Include topics, estimated duration, and logical progression."
-            />
-          </div>
-          <div className="col-span-2 space-y-8">
-            <div>
-              <label className={labelClass}>Roadmap Name</label>
-              <Input type="text" className="min-w-full w-full" placeholder="Nama Roadmap" />
-            </div>
-            <div>
-              <label className={labelClass}>Roadmap Name</label>
-              <Select className="w-full">
-                <option value="pemula">Pemula</option>
-                <option value="menengah">Menengah</option>
-              </Select>
-            </div>
-            <div>
-              <label className={labelClass}>Model</label>
-              <Select className="w-full">
-                <option value="gpt-3.5-turbo">GPT 3.5 Turbo</option>
-                <option value="gpt-4">GPT 4</option>
-                <option value="gpt-4-32k">GPT 4 32k</option>
-              </Select>
-            </div>
-          </div>
-          
-          <div className="col-span-full">
-            <Button>
-              Generate Roadmap
-            </Button>
-          </div>
-        </div>
-
-        <div>
-          <h2 className="text-neutral-600 text-p2 font-semibold mb-8">
-            Roadmap Preview
-          </h2>
-          <div className="space-y-2.5">
-            <For data={Array.from({ length: 3 })}>
-              {(_, index) => (
-                <Accordion
-                  key={index}
-                  title={`Day ${index + 1}`}
-                  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tincidunt nisl, id consequat mi malesuada vel. Nulla facilisi. Nam in turpis ligula."
-                />
-              )}
-            </For>
-          </div>
-        </div>
-
-        <div className="flex justify-end mt-12">
-          <Button type="button" className="flex items-center gap-5">
-            Submit Roadmap
-            <ArrowRightOutlined />
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  )
-}
@@ -1,174 +0,0 @@
-import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { useState } from "react";
-import { ModalCreateRoadmap } from "./_components/modal/create-roadmap";
-
-type LearningStatus = 'active' | 'inactive'
-
-type RoadmapType = {
-  id: number
-  name: string
-  learningLevel: string
-  status: LearningStatus
-}
-
-const mockData: RoadmapType[] = Array.from({ length: 90 }, (_, i) => ({
-  id: i + 1,
-  name: i === 0 ? 'Ahmad Wijuana' : 'Anna Wiguana',
-  learningLevel: ['Pemula', 'Menengah'][Math.floor(Math.random() * 2)],
-  status: i % 2 === 0 ? 'active' : 'inactive',
-}))
-
-export default function Components(): React.ReactElement {
-  const [openCreateModal, setOpenCreateModal] = useState(false)
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  });
-
-  const columns: ColumnDef<RoadmapType>[] = [
-    {
-      id: 'select',
-      meta: { cellClassName: cn("w-20") },
-      header: ({ table }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={table.getIsAllRowsSelected()}
-          onChange={table.getToggleAllRowsSelectedHandler()}
-        />
-      ),
-      cell: ({ row }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={row.getIsSelected()}
-          onChange={row.getToggleSelectedHandler()}
-        />
-      ),
-    },
-    {
-      id: 'id',
-      header: 'No',
-      accessorKey: 'id',
-    },
-    {
-      id: 'name',
-      header: 'Nama Roadmap',
-      accessorKey: 'name',
-    },
-    {
-      id: 'learningLevel',
-      header: 'Tingkat Belajar',
-      accessorKey: 'learningLevel',
-    },
-    {
-      id: 'status',
-      header: 'Status',
-      accessorKey: 'status',
-      cell: ({ row }) => {
-        const status = row.original.status;
-        const statusColors: Record<LearningStatus, string> = {
-          inactive: 'bg-danger-200 text-danger-700',
-          active: 'bg-success-200 text-success-500',
-        };
-        const statusText: Record<LearningStatus, string> = {
-          inactive: 'Inactive',
-          active: 'Active',
-        };
-        return (
-          <div
-            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-          >
-            {statusText[status]}
-          </div>
-        );
-      },
-    },
-    {
-      header: 'Action',
-      meta: { cellClassName: cn("w-72") },
-      cell: ({ row }) => (
-        <div className="flex gap-[8px]">
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            className="flex items-center gap-2"
-          >
-            <EditOutlined /> Action
-          </Button>
-          <Button
-            variant="danger"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            className="flex items-center gap-2"
-          >
-            <DeleteOutlined /> Delete
-          </Button>
-        </div>
-      ),
-    },
-  ]
-
-  const table = useReactTable({
-    data: mockData,
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-    manualPagination: false,
-  });
-
-  return (
-    <BackofficeWrapper title="Dimentorin.dev">
-      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Content & Roadmap</h1>
-
-      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
-        <div className="flex items-center justify-between mb-9">
-          <h2 className="text-p2 font-semibold text-neutral-600">AI Roadmaps</h2>
-          <Button type="button" variant="primary" className="flex items-center gap-2" onClick={() => setOpenCreateModal(true)}>
-            <PlusOutlined /> Buat Roadmap
-          </Button>
-        </div>
-
-        <div className="flex justify-between items-center gap-5 mb-2">
-          <div className="relative w-full">
-            <Input
-              placeholder="Cari berdasarkan nama roadmap"
-              className="pl-12 w-full max-h-full"
-            />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-              <SearchOutlined />
-            </div>
-          </div>
-          <Select>
-            <option selected disabled>Tingkat Belajar</option>
-            <option value="pemula">Pemula</option>
-            <option value="menengah">Menengah</option>
-          </Select>
-        </div>
-
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-
-      <ModalCreateRoadmap isOpen={openCreateModal} onClose={() => setOpenCreateModal(false)} />
-    </BackofficeWrapper>
-  )
-}
@@ -1,114 +0,0 @@
-import { Icon } from "@iconify/react";
-import { Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
-import { Modal } from "@imphnen-frontend-service/ui/molecules";
-import { cn, For } from "@imphnen-frontend-service/utils";
-import { FC } from "react";
-
-const TOPICS = [
-  { id: 2, icon: '🏢', name: 'Industry Insight' },
-  { id: 4, icon: '🖥️', name: 'Basic IT' },
-]
-
-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 ModalProps = {
-  open: boolean
-  setOpen: (open: boolean) => void
-}
-
-export const ModalDetailSession: FC<ModalProps> = ({ open, setOpen }) => {
-  return (
-    <Modal
-      isOpen={open}
-      onClose={() => setOpen(false)}
-      className="xl:max-w-[64rem] bg-white px-10 py-9"
-      closeButtonClassName="hidden"
-    >
-      <div>
-        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
-          Detail Sesi
-        </h1>
-
-        <div className="grid grid-cols-9 px-9 py-7 border rounded-md gap-12 mb-10">
-          <div className="col-span-4 flex items-center gap-x-12">
-            <div>
-              <h2 className="text-p2 font-semibold text-primary-500 mb-4">Mentor</h2>
-              <div>
-                <p className="text-p3 font-semibold mb-2.5">Muhammad Firdaus Oi Oi Oi, S.H., M.H.</p>
-                <p className="text-neutral-600">UI Designer at Oray orayan Studios</p>
-              </div>
-            </div>
-            <Icon icon="ph:arrow-right" className="text-9xl text-primary-500" />
-          </div>
-
-          <div className="col-span-5 flex items-center gap-12">
-            <div>
-              <h2 className="text-p2 font-semibold text-primary-500 mb-4">Mentee</h2>
-              <div>
-                <p className="text-p3 font-semibold mb-2.5">Muhammad Firdaus Oi Oi Oi, S.H., M.H.</p>
-                <p className="text-neutral-600">UI Designer at Oray orayan Studios</p>
-              </div>
-            </div>
-            <div>
-              <h2 className="text-p2 font-semibold text-neutral-700 mb-4">Status</h2>
-              <div className="py-2 px-6 rounded-md text-center bg-success-200 text-success-500 font-semibold">
-                Finished
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <h1 className="text-p3 font-medium mb-2.5">Topics</h1>
-          <div className="p-5 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-2.5 mb-8">
-            <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 font-medium"
-                >
-                  <span>{item.icon} </span>
-                  <span>{item.name}</span>
-                </div>
-              )}
-            </For>
-          </div>
-
-          <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" />
-            </div>
-            <div>
-              <label className={labelClass}>Waktu</label>
-              <Input type="time" className="min-w-full w-full" />
-            </div>
-            <div className="relative md:col-span-full">
-              <label className={labelClass}>Lokasi</label>
-              <Select className="min-w-full w-full">
-                <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}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </Modal>
-  )
-}
@@ -1,168 +0,0 @@
-import { SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { ReactElement, useState } from "react";
-import { ModalDetailSession } from "./_components/modal/detail";
-
-type SessionStatus = 'ongoing' | 'finished';
-
-interface SessionType {
-  id: string
-  mentorName: string
-  menteeName: string
-  datetime: number
-  status: SessionStatus
-}
-
-const mockData: SessionType[] = Array.from({ length: 90 }, (_, i) => ({
-  id: `DS-${i + 1}`,
-  mentorName: 'Ahmad Wijuana',
-  menteeName: 'Sofia Wijuana',
-  datetime: new Date().getTime(),
-  status: i % 2 === 0 ? 'ongoing' : 'finished',
-}))
-
-export default function Components(): ReactElement {
-  const [openDetail, setOpenDetail] = useState(false);
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  });
-
-  const columns: ColumnDef<SessionType>[] = [
-    {
-      id: 'select',
-      meta: { cellClassName: cn("w-20") },
-      header: ({ table }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={table.getIsAllRowsSelected()}
-          onChange={table.getToggleAllRowsSelectedHandler()}
-        />
-      ),
-      cell: ({ row }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={row.getIsSelected()}
-          onChange={row.getToggleSelectedHandler()}
-        />
-      ),
-    },
-    {
-      id: 'id',
-      header: 'ID Sesi',
-      accessorKey: 'id',
-    },
-    {
-      id: 'mentorName',
-      header: 'Nama Mentor',
-      accessorKey: 'name',
-    },
-    {
-      id: 'menteeName',
-      header: 'Nama Mentee',
-      accessorKey: 'name',
-    },
-    {
-      id: 'datetime',
-      header: 'Waktu',
-      accessorKey: 'datetime',
-    },
-    {
-      id: 'status',
-      header: 'Status',
-      accessorKey: 'status',
-      cell: ({ row }) => {
-        const status = row.original.status;
-        const statusColors: Record<SessionStatus, string> = {
-          ongoing: 'bg-warning-200 text-warning-700',
-          finished: 'bg-success-200 text-success-500',
-        };
-        const statusText: Record<SessionStatus, string> = {
-          ongoing: 'On Going',
-          finished: 'Finished',
-        };
-        return (
-          <div
-            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-          >
-            {statusText[status]}
-          </div>
-        );
-      },
-    },
-    {
-      header: 'Action',
-      meta: { cellClassName: cn("w-52") },
-      cell: ({ row }) => (
-        <Button
-          variant="primary"
-          size="sm"
-          onClick={(e) => {
-            e.stopPropagation();
-            setOpenDetail(true);
-          }}
-          className="flex items-center gap-2 w-max"
-        >
-          <SearchOutlined className="text-[16px]" /> Cek Detail
-        </Button>
-      ),
-    },
-  ]
-
-  const table = useReactTable({
-    data: mockData,
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-    manualPagination: false,
-  });
-
-  return (
-    <BackofficeWrapper title="Dimentorin.dev">
-      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Session Management</h1>
-
-      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
-        <div className="flex justify-between items-center gap-5 mb-2">
-          <div className="relative w-full">
-            <Input
-              placeholder="Cari berdasarkan nama lengkap"
-              className="pl-12 w-full max-h-full"
-            />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-              <SearchOutlined />
-            </div>
-          </div>
-          <Select>
-            <option selected disabled>Rating</option>
-            <option value="4.5">4.5</option>
-            <option value="5">5</option>
-          </Select>
-          <Select>
-            <option selected disabled>Status</option>
-            <option value="finished">Finished</option>
-            <option value="ongoing">On Going</option>
-          </Select>
-        </div>
-
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-
-      <ModalDetailSession open={openDetail} setOpen={setOpenDetail} />
-    </BackofficeWrapper>
-  )
-}
@@ -1,61 +0,0 @@
-import { Button, Input, Select, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
-import { cn } from "@imphnen-frontend-service/utils"
-import { FC } from "react"
-
-const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
-
-export const GeneralSettings: FC = () => {
-  return (
-    <div>
-      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">General Settings</h1>
-
-      <div>
-        <ToggleInput label="Mode Maintenance" />
-
-        <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Platform Settings</h2>
-        <div className="grid grid-cols-2 gap-x-8 gap-y-5 mb-8">
-          <div>
-            <label className={labelClass}>Nama Platform</label>
-            <Input type="text" className="min-w-full w-full" />
-          </div>
-          <div>
-            <label className={labelClass}>Bahasa</label>
-            <Select defaultValue="id" className="w-full">
-              <option value="id">Indonesia</option>
-              <option value="en">English</option>
-            </Select>
-          </div>
-          <div>
-            <label className={labelClass}>Logo Platform</label>
-            <Input type="file" className="min-w-full w-full" />
-          </div>
-          <div>
-            <label className={labelClass}>Favicon</label>
-            <Input type="file" className="min-w-full w-full" />
-          </div>
-        </div>
-
-        <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Legal Settings</h2>
-        <div className="grid gap-x-8 gap-y-5 mb-20">
-          <div>
-            <label className={labelClass}>URL Syarat & Ketentuan</label>
-            <Input type="text" className="min-w-full w-full" />
-          </div>
-          <div>
-            <label className={labelClass}>URL Kebijakan Privasi</label>
-            <Input type="text" className="min-w-full w-full" />
-          </div>
-        </div>
-
-        <div className="flex justify-end gap-5">
-          <Button type="button" variant="bordered">
-            Batal
-          </Button>
-          <Button type="button">
-            Simpan
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -1,34 +0,0 @@
-import { Button, Textarea, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
-import { FC } from "react"
-
-export const NotificationSettings: FC = () => {
-  return (
-    <div>
-      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Notification Settings</h1>
-
-      <div>
-        <div className="flex items-center gap-8 flex-wrap">
-          <ToggleInput label="Nyalakan Notifikasi Email" />
-          <ToggleInput label="Beritahu mentor ketika ada request" />
-          <ToggleInput label="Beritahu mentee untuk update sesi " />
-        </div>
-
-        <div className="mb-20">
-          <label className="text-neutral-800 font-medium inline-block mb-2 text-p3">
-            API Integrasi Notifikasi (URL)
-          </label>
-          <Textarea placeholder="Masukkan url API notifikasi yang akan digunakan" className="w-full h-40" />
-        </div>
-
-        <div className="flex justify-end gap-5">
-          <Button type="button" variant="bordered">
-            Batal
-          </Button>
-          <Button type="button">
-            Simpan
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -1,50 +0,0 @@
-import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
-import { cn } from "@imphnen-frontend-service/utils"
-import { FC } from "react"
-
-const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
-
-export const PaymentSettings: FC = () => {
-  return (
-    <div>
-      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Payment</h1>
-
-      <div className="grid grid-cols-2 gap-x-8 gap-y-5 mb-8">
-        <div>
-          <label className={labelClass}>Integrasi Payment Gateway</label>
-          <Textarea className="min-w-full w-full h-20" placeholder="Durasi dalam menit" />
-        </div>
-        <div>
-          <label className={labelClass}>Mata Uang</label>
-          <Select defaultValue="idr">
-            <option value="idr">Rupiah (IDR)</option>
-            <option value="usd">Dollar (USD)</option>
-          </Select>
-        </div>
-        <div>
-          <label className={labelClass}>Harga sesi mentoring <span className="text-neutral-600">(default)</span></label>
-          <Input type="text" className="min-w-full w-full" placeholder="Masukkan harga sesi mentoring" />
-        </div>
-        <div>
-          <label className={labelClass}>Tarif Komisi untuk Platform</label>
-          <Input type="text" className="min-w-full w-full" placeholder="Masukkan persentase komisi" />
-        </div>
-      </div>
-
-      <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Invoice</h2>
-      <div className="mb-32">
-        <label className={labelClass}>Masukkan Format Invoice</label>
-        <Input type="file" className="min-w-full w-full" placeholder="InvoiceDimentorin.png" />
-      </div>
-
-      <div className="flex justify-end gap-5">
-        <Button type="button" variant="bordered">
-          Batal
-        </Button>
-        <Button type="button">
-          Simpan
-        </Button>
-      </div>
-    </div>
-  )
-}
@@ -1,35 +0,0 @@
-import { Button, Input } from "@imphnen-frontend-service/ui/atoms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { FC } from "react";
-
-const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
-
-export const SecuritySettings: FC = () => {
-  return (
-    <div>
-      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Security Settings</h1>
-
-      <div className="grid grid-cols-2 gap-8 mb-20">
-        <div>
-          <label className={labelClass}>Durasi Session Timeout</label>
-          <Input type="text" className="min-w-full w-full" placeholder="Durasi dalam menit" />
-          <p className="text-[10px] text-neutral-800">Auto logout setelah X menit tidak aktif</p>
-        </div>
-        <div>
-          <label className={labelClass}>Blokir Setelah Upaya Gagal</label>
-          <Input type="text" className="min-w-full w-full" placeholder="x kali perobaan login" />
-          <p className="text-[10px] text-neutral-800">Misal: 5 kali salah login = lock akun</p>
-        </div>
-      </div>
-
-      <div className="flex justify-end gap-5">
-        <Button type="button" variant="bordered">
-          Batal
-        </Button>
-        <Button type="button">
-          Simpan
-        </Button>
-      </div>
-    </div>
-  )
-}
@@ -1,118 +0,0 @@
-import { DeleteOutlined, UserSwitchOutlined } from "@ant-design/icons";
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { FC, useState } from "react";
-
-type UserRolesPermissionType = {
-  id: number
-  role: string
-  totalUser: number
-}
-
-const mockData: UserRolesPermissionType[] = Array.from({ length: 90 }, (_, i) => ({
-  id: i + 1,
-  role: ['Admin', 'Super Admin', 'Mentee', 'Mentor'][Math.floor(Math.random() * 4)],
-  totalUser: 10
-}))
-
-export const UserRolesPermission: FC = () => {
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  });
-
-  const columns: ColumnDef<UserRolesPermissionType>[] = [
-    {
-      id: 'select',
-      meta: { cellClassName: cn("w-20") },
-      header: ({ table }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={table.getIsAllRowsSelected()}
-          onChange={table.getToggleAllRowsSelectedHandler()}
-        />
-      ),
-      cell: ({ row }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={row.getIsSelected()}
-          onChange={row.getToggleSelectedHandler()}
-        />
-      ),
-    },
-    {
-      id: 'role',
-      header: 'Role',
-      accessorKey: 'role',
-    },
-    {
-      id: 'totalUser',
-      header: 'Total User',
-      accessorKey: 'totalUser',
-    },
-    {
-      header: 'Action',
-      meta: { cellClassName: cn("w-96") },
-      cell: ({ row }) => (
-        <div className="flex items-center gap-4">
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            className="flex items-center gap-2 w-max"
-          >
-            <UserSwitchOutlined className="text-[16px]" /> Manage Permissions
-          </Button>
-          <Button
-            variant="danger"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            className="flex items-center gap-2 w-max"
-          >
-            <DeleteOutlined className="text-[16px]" /> Delete Role
-          </Button>
-        </div>
-      ),
-    },
-  ]
-
-  const table = useReactTable({
-    data: mockData,
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-    manualPagination: false,
-  });
-
-  return (
-    <div>
-      <div className="mb-8 flex items-center justify-between">
-        <h1 className="text-p2 font-semibold text-neutral-700">User Roles & Permissions</h1>
-        <Button type="button">
-          Add Rols
-        </Button>
-      </div>
-
-      <div className="bg-white shadow p-8 rounded-lg">
-        <DataTable data={mockData} columns={columns} table={table} />
-      </div>
-    </div>
-  )
-}
@@ -1,53 +0,0 @@
-import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms"
-import { cn, For } from "@imphnen-frontend-service/utils"
-import { useState } from "react"
-import { GeneralSettings } from "./_components/general"
-import { UserRolesPermission } from "./_components/user-roles-permission"
-import { NotificationSettings } from "./_components/notification"
-import { SecuritySettings } from "./_components/security"
-import { PaymentSettings } from "./_components/payment"
-
-const TABS = {
-  general: "General Settings",
-  userRolePermissions: "User Roles & Permissions",
-  notification: "Notification Settings",
-  security: "Security",
-  payment: "Payment",
-} as const
-type Tabs = typeof TABS[keyof typeof TABS]
-
-export default function Components(): React.ReactElement {
-  const [activeTab, setActiveTab] = useState<Tabs>(TABS.general)
-
-  return (
-    <BackofficeWrapper title="Dimentorin.dev">
-      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Settings</h1>
-
-      <div className="flex items-start gap-x-8">
-        <div className="w-64 bg-white p-2.5 shadow space-y-2 rounded-md">
-          <For data={Object.values(TABS)}>
-            {(tab) => (
-              <button
-                key={tab}
-                className={cn(
-                  "px-4 py-3 w-full text-left font-medium rounded-md text-neutral-400 cursor-pointer select-none hover:bg-primary-100",
-                  activeTab === tab && "bg-primary-500 text-white hover:bg-primary-600"
-                )}
-                onClick={() => setActiveTab(tab)}
-              >
-                {tab}
-              </button>
-            )}
-          </For>
-        </div>
-        <div className="bg-white px-8 py-6 shadow space-y-2 rounded-md flex-1">
-          {activeTab === TABS.general && <GeneralSettings />}
-          {activeTab === TABS.userRolePermissions && <UserRolesPermission />}
-          {activeTab === TABS.notification && <NotificationSettings />}
-          {activeTab === TABS.security && <SecuritySettings />}
-          {activeTab === TABS.payment && <PaymentSettings />}
-        </div>
-      </div>
-    </BackofficeWrapper>
-  )
-}
@@ -1,55 +0,0 @@
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { Modal } from "@imphnen-frontend-service/ui/molecules";
-import { FC } from "react";
-
-type ModalDeleteProps = {
-  open: boolean
-  setOpen: (open: boolean) => void
-  hadnleDelete?: () => void
-}
-
-export const ModalDelete: FC<ModalDeleteProps> = ({ open, setOpen, hadnleDelete }) => {
-  return (
-    <Modal
-      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
-      isOpen={open}
-      onClose={() => setOpen(false)}
-      closeButtonClassName="hidden"
-    >
-      <Modal.Header className="gap-8">
-        <img
-          src="/chibi-delete.webp"
-          alt="Delete item?"
-          width={148}
-          className="self-center"
-        />
-        <div className="text-center">
-          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
-            Hapus Akun
-          </h2>
-          <p className="text-p3 text-neutral-400">
-            Apakah kamu yakin untuk menghapus akun ini?
-          </p>
-        </div>
-      </Modal.Header>
-      <Modal.Content className="flex gap-4">
-        <Button
-          variant="bordered"
-          size="lg"
-          className="w-full border-danger-500 text-danger-500 hover:bg-danger-50 hover:text-danger-600 hover:border-danger-600"
-          onClick={() => setOpen(false)}
-        >
-          Batal
-        </Button>
-        <Button
-          variant="danger"
-          size="lg"
-          className="w-full"
-          onClick={() => hadnleDelete?.()}
-        >
-          Hapus Akun
-        </Button>
-      </Modal.Content>
-    </Modal>
-  )
-}
@@ -1,86 +0,0 @@
-import { Button, Input } from "@imphnen-frontend-service/ui/atoms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { FC, useState } from "react";
-import { ModalDelete } from "../delete";
-import { ModalProps } from "../type";
-import { ModalSuspendOrBan } from "../suspend-or-ban";
-
-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 AccountProfile: FC<ModalProps> = ({ setOpen }) => {
-  const [openDelete, setOpenDelete] = useState(false)
-  const [openSuspendOrBan, setOpenSuspendOrBan] = useState(false)
-
-  return (
-    <div>
-      <div className="flex items-center gap-x-8 mb-8">
-        <div className="size-[100px] rounded-full overflow-hidden">
-          <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="w-full object-cover" />
-        </div>
-        <div>
-          <Button type="button" size="sm" variant="bordered" className="mb-4">
-            Upload Foto
-          </Button>
-          <p className="text-neutral-400 font-medium">
-            Setidaknya rekomendasi ukuran 240x240 px. <br />
-            .jpg, .jpeg, .png diperbolehkan
-          </p>
-        </div>
-      </div>
-
-      <div>
-        <div className="mb-8">
-          <h1 className="mb-7 text-p2 font-semibold">Informasi Pribadi</h1>
-          <div className="grid grid-cols-2 gap-8">
-            <div>
-              <label className={labelClass}>Nama Depan</label>
-              <Input type="text" className="min-w-full w-full" placeholder="Nama Depan" />
-            </div>
-            <div>
-              <label className={labelClass}>Nama Belakang</label>
-              <Input type="text" className="min-w-full w-full" placeholder="Nama Belakang" />
-            </div>
-            <div>
-              <label className={labelClass}>Email</label>
-              <Input type="email" className="min-w-full w-full" placeholder="Email" />
-            </div>
-            <div>
-              <label className={labelClass}>Nomor Telepon</label>
-              <Input type="text" className="min-w-full w-full" placeholder="+62 81234567890" />
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <h1 className="mb-7 text-p2 font-semibold">Status Akun</h1>
-          <div className="flex items-center gap-5">
-            <Button
-              type="button"
-              size="sm"
-              variant="bordered"
-              className="border-danger-500 text-danger-500"
-              onClick={() => setOpenSuspendOrBan(true)}
-            >
-              Suspend/Ban
-            </Button>
-            <Button type="button" size="sm" variant="danger" onClick={() => setOpenDelete(true)}>
-              Delete Akun
-            </Button>
-          </div>
-        </div>
-
-        <div className="flex justify-end gap-x-5">
-          <Button type="button" variant="bordered" onClick={() => setOpen(false)}>
-            Batal
-          </Button>
-          <Button type="button" disabled>
-            Simpan
-          </Button>
-        </div>
-      </div>
-
-      <ModalDelete open={openDelete} setOpen={setOpenDelete} />
-      <ModalSuspendOrBan open={openSuspendOrBan} setOpen={setOpenSuspendOrBan} />
-    </div>
-  )
-}
@@ -1,110 +0,0 @@
-import { SearchOutlined } from "@ant-design/icons"
-import { Input, Select } from "@imphnen-frontend-service/ui/atoms"
-import { DataTable } from "@imphnen-frontend-service/ui/organisms"
-import { cn } from "@imphnen-frontend-service/utils"
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table"
-import { FC, useState } from "react"
-import dayjs from "dayjs"
-
-interface ActivityLogType {
-  id: number
-  date: string
-  menu: string
-  activity: string
-}
-
-const mockData: ActivityLogType[] = Array.from({ length: 90 }, (_, i) => ({
-  id: i + 1,
-  date: new Date().toISOString(),
-  menu: 'Mentoring',
-  activity: 'Mentoring Session',
-}))
-
-export const ActivityLog: FC = () => {
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  })
-
-  const columns: ColumnDef<ActivityLogType>[] = [
-    {
-      id: 'select',
-      meta: { cellClassName: cn("w-16") },
-      header: ({ table }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={table.getIsAllRowsSelected()}
-          onChange={table.getToggleAllRowsSelectedHandler()}
-        />
-      ),
-      cell: ({ row }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={row.getIsSelected()}
-          onChange={row.getToggleSelectedHandler()}
-        />
-      ),
-    },
-    {
-      id: 'date',
-      header: 'Waktu',
-      accessorKey: 'date',
-      cell: (info) => dayjs(info.row.original.date).format('DD MMMM YYYY, HH:mm WIB'),
-    },
-    {
-      id: 'menu',
-      header: 'Menu',
-      accessorKey: 'menu',
-    },
-    {
-      id: 'activity',
-      header: 'Activity',
-      accessorKey: 'activity',
-    }
-  ]
-
-  const table = useReactTable({
-    data: mockData,
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-    manualPagination: false,
-  });
-
-  return (
-    <div className="p-8 shadow rounded-lg">
-      <div className="flex justify-between items-center gap-5 mb-9">
-        <div className="relative w-1/2">
-          <Input
-            placeholder="Cari aktivitas"
-            className="pl-12 w-full max-h-full"
-          />
-          <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-            <SearchOutlined />
-          </div>
-        </div>
-        <div className="w-1/4">
-          <Input type="date" className="min-w-full w-full" />
-        </div>
-        <Select>
-          <option selected disabled>Menu</option>
-          <option value="profle">Profile</option>
-          <option value="profle-2">Profile</option>
-        </Select>
-      </div>
-
-      <DataTable data={mockData} columns={columns} table={table} />
-    </div>
-  )
-}
@@ -1,68 +0,0 @@
-import { Button } from "@imphnen-frontend-service/ui/atoms"
-import { Modal } from "@imphnen-frontend-service/ui/molecules"
-import { cn, For, Show } from "@imphnen-frontend-service/utils"
-import { FC, useEffect, useState } from "react"
-import { AccountProfile } from "./account-profile"
-import { DetailProfile } from "./detail-profile"
-import { ActivityLog } from "./activity-log"
-import { ModalDetailUserProps } from "./type"
-
-const TABS = {
-  account: 'account profile',
-  detail: 'detail profile',
-  activity: 'activity logs',
-} as const
-type TabType = typeof TABS[keyof typeof TABS]
-
-export const ModalDetailUser: FC<ModalDetailUserProps> = ({
-  open,
-  setOpen,
-}) => {
-  const [activeTab, setActiveTab] = useState<TabType>(TABS.account)
-
-  useEffect(() => {
-    if (!open) setActiveTab(TABS.account)
-  }, [open])
-
-  return (
-    <Modal
-      isOpen={open}
-      onClose={() => setOpen(false)}
-      className="xl:max-w-[84rem] bg-white px-10 py-9"
-      closeButtonClassName="hidden"
-    >
-      <div>
-        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
-          Detail - Muhammad Firdaus Oiwobo
-        </h1>
-
-        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md w-max mb-8">
-          <For data={Object.values(TABS)}>
-            {(tab) => (
-              <Button
-                key={tab}
-                variant="text"
-                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
-                onClick={() => setActiveTab(tab)}
-              >
-                {tab}
-              </Button>
-            )}
-          </For>
-        </div>
-
-        <div>
-          <Show condition={activeTab === TABS.account}>
-            <AccountProfile open={open} setOpen={setOpen} />
-          </Show>
-          <Show condition={activeTab === TABS.detail}>
-            <DetailProfile />
-          </Show>
-          <Show condition={activeTab === TABS.activity}>
-            <ActivityLog />
-          </Show>
-        </div>
-      </div>
-    </Modal>
-  )
-}
@@ -1,5 +0,0 @@
-import { ModalProps } from "../type";
-
-export interface ModalDetailUserProps extends ModalProps {
-  userId?: number | null
-}
@@ -1,42 +0,0 @@
-import { FC } from "react";
-import { ModalProps } from "../type";
-import { Modal } from "@imphnen-frontend-service/ui/molecules";
-import { cn } from "@imphnen-frontend-service/utils";
-import { Button, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
-
-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 ModalSuspendOrBan: FC<ModalProps> = ({ open, setOpen }) => {
-  return (
-    <Modal
-      isOpen={open}
-      onClose={() => setOpen(false)}
-      className="bg-white px-10 py-9 xl:max-w-[32rem]"
-      closeButtonClassName="hidden"
-    >
-      <div>
-        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
-          Suspend/Ban
-        </h1>
-
-        <div className="space-y-6">
-          <div>
-            <label className={labelClass}>Suspend/Ban</label>
-            <Select defaultValue="suspend" className="w-full">
-              <option value="suspend">Suspend</option>
-              <option value="banned">Banned</option>
-            </Select>
-          </div>
-          <div>
-            <label className={labelClass}>Alasan</label>
-            <Textarea placeholder="Masukkan alasan suspend/ban" className="w-full h-40" />
-          </div>
-
-          <Button type="button" className="w-full">
-            Selesai
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  )
-}
@@ -1,4 +0,0 @@
-export interface ModalProps {
-  open: boolean
-  setOpen: (open: boolean) => void
-}
@@ -1,187 +0,0 @@
-import { SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn, For } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { ReactElement, useState } from "react";
-import { ModalDetailUser } from "./_components/modal/detail";
-
-type UserStatus = 'active' | 'inactive';
-
-interface UserType {
-  id: number
-  name: string
-  email: string
-  rating: number
-  status: UserStatus
-}
-
-const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
-  id: i + 1,
-  name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
-  email: 'fullname23@gmail.com',
-  rating: 4.5,
-  status: i % 2 === 0 ? 'active' : 'inactive',
-}))
-
-export default function Components(): ReactElement {
-  const TABS = ['mentor', 'mentee'] as const
-  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor')
-  const [showDetail, setShowDetail] = useState(false)
-  const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  });
-
-  const columns: ColumnDef<UserType>[] = [
-    {
-      id: 'select',
-      meta: { cellClassName: cn("w-20") },
-      header: ({ table }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={table.getIsAllRowsSelected()}
-          onChange={table.getToggleAllRowsSelectedHandler()}
-        />
-      ),
-      cell: ({ row }) => (
-        <input
-          type="checkbox"
-          className="rounded"
-          checked={row.getIsSelected()}
-          onChange={row.getToggleSelectedHandler()}
-        />
-      ),
-    },
-    {
-      id: 'name',
-      header: 'Name',
-      accessorKey: 'name',
-    },
-    {
-      id: 'email',
-      header: 'Email',
-      accessorKey: 'email',
-    },
-    {
-      id: 'rating',
-      header: 'Rating',
-      accessorKey: 'rating',
-    },
-    {
-      id: 'status',
-      header: 'Status',
-      accessorKey: 'status',
-      cell: ({ row }) => {
-        const status = row.original.status;
-        const statusColors: Record<UserStatus, string> = {
-          active: 'bg-success-200 text-success-500',
-          inactive: 'bg-danger-200 text-danger-500',
-        };
-        const statusText: Record<UserStatus, string> = {
-          active: 'Active',
-          inactive: 'Inactive',
-        };
-        return (
-          <div
-            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-          >
-            {statusText[status]}
-          </div>
-        );
-      },
-    },
-    {
-      header: 'Action',
-      meta: { cellClassName: cn("w-72") },
-      cell: ({ row }) => (
-        <Button
-          variant="primary"
-          size="sm"
-          onClick={(e) => {
-            e.stopPropagation();
-            setSelectedUserId(row.original.id);
-            setShowDetail(true);
-          }}
-          className="flex items-center gap-2 w-max"
-        >
-          <SearchOutlined className="text-[16px]" /> Lihat Detail & Action
-        </Button>
-      ),
-    },
-  ]
-
-  const table = useReactTable({
-    data: mockData,
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-    manualPagination: false,
-  });
-
-  return (
-    <BackofficeWrapper title="Dimentorin.dev">
-      <div className="mb-8 flex justify-between items-center">
-        <h1 className="text-p1 font-semibold text-neutral-700">User Management</h1>
-        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
-          <For data={TABS}>
-            {(tab) => (
-              <Button
-                key={tab}
-                variant="text"
-                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
-                onClick={() => setActiveTab(tab)}
-              >
-                {tab}
-              </Button>
-            )}
-          </For>
-        </div>
-      </div>
-
-      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
-        <div className="flex justify-between items-center gap-5 mb-2">
-          <div className="relative w-full">
-            <Input
-              placeholder="Cari berdasarkan nama lengkap"
-              className="pl-12 w-full max-h-full"
-            />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-              <SearchOutlined />
-            </div>
-          </div>
-          <Select>
-            <option selected disabled>Rating</option>
-            <option value="4.5">4.5</option>
-            <option value="5">5</option>
-          </Select>
-          <Select>
-            <option selected disabled>Status</option>
-            <option value="active">Active</option>
-            <option value="inactive">Inactive</option>
-          </Select>
-        </div>
-
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-
-      <ModalDetailUser
-        open={showDetail}
-        setOpen={setShowDetail}
-        userId={selectedUserId}
-      />
-    </BackofficeWrapper>
-  );
-}
@@ -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>
@@ -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>

@@ -1,7 +1,9 @@
 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 z-0 py-20 md:py-28 lg:py-32">
      {/* Background gradients and shapes */}
@@ -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>
@@ -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>
@@ -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>
          )}
@@ -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>
+  );
+}
@@ -8,6 +8,10 @@ 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' },
 ]
@@ -2,12 +2,26 @@ 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
 }

-export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default' }) => {
+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(
@@ -22,25 +36,25 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default' }) => {
        )}
      >
        <img
-          src="/image/59de8a682dfbe42455613ea07477ff3e30532c1f.webp"
-          alt="Cover's Article"
+          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-4xl mb-4 xl:mb-[15px]">
-          5 min read
+        <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="/articles/detail"
+          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-[27px]"
+            variant === "recent" && "mb-7 xl:text-[29px]"
          )}
        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          {title}
        </Link>
        <Show condition={variant !== "recent"}>
          <p 
@@ -49,7 +63,7 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default' }) => {
              variant === "featured" && "text-[15px] md:text-[19px] md:mb-6",
            )}
          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris.
+            {excerpt}
          </p>
        </Show>
        <div
@@ -59,14 +73,16 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default' }) => {
            variant === "featured" && "text-[15px] md:text-[19px] xl:text-base",
          )}
        >
-          <p>Writer’s Name</p>
-          <p>14 March 2025</p>
+          <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>
@@ -1,14 +1,22 @@
 import { ReactElement, useRef, useState } from "react";
 import { ArticleCard } from "./_components/card/article";
-import { cn, For } from "@imphnen-frontend-service/utils";
+import { cn, For, Show } from "@imphnen-frontend-service/utils";
 import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { motion, useInView, Variants } from "framer-motion";
-
-const CATEGORIES = ['UI/UX Design', 'Software/Web Dev', 'Data & AI', 'Cloud & DevOps', 'Cybersecurity', 'IT & Network', 'Project Management', 'QA & Testing'] as const
-type Category = typeof CATEGORIES[number]
+import { useGetArticleCategories, useGetArticles } from "@imphnen-frontend-service/service";

 export default function Components(): ReactElement {
-  const [activeTab, setActiveTab] = useState<Category>('UI/UX Design')
+  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 })
@@ -52,9 +60,13 @@ export default function Components(): ReactElement {
            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" />
+                <ArticleCard variant="featured" article={featured} />
              </motion.div>

              <div>
@@ -65,16 +77,17 @@ export default function Components(): ReactElement {
                  Recent Articles
                </motion.h1>
                <div className="grid gap-10">
-                <For data={Array.from({ length: 3 })}>
-                  {(_, index) => (
-                    <motion.div key={index} variants={childVariants}>
-                      <ArticleCard variant="recent" />
+                  <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">
@@ -86,7 +99,7 @@ export default function Components(): ReactElement {
          </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={CATEGORIES}>
+              <For data={tabs}>
                {(category) => (
                  <Button
                    key={category}
@@ -94,7 +107,7 @@ export default function Components(): ReactElement {
                    variant="text"
                    onClick={() => setActiveTab(category)}
                    className={cn(
-                      "relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-4xl md:text-xs md:font-semibold xl:text-[15px]",
+                      "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"
                    )}
@@ -106,15 +119,20 @@ export default function Components(): ReactElement {
            </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={Array.from({ length: 3 })}>
-              {(_, index) => (
-                <motion.div key={index} variants={childVariants}>
-                  <ArticleCard />
+              <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>
@@ -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;
@@ -10,6 +10,12 @@ 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]
@@ -17,15 +23,56 @@ 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 }) => {
+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 = (action: 'next' | 'prev') => {
+  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') {
@@ -112,14 +159,18 @@ export const AppointmentModal: FC<Props> = ({ open, setOpen }) => {
                )}

                <AnimatePresence>
-                  {step === 'topic' && <TopicStep selectedTopics={selectedTopics} setSelectedTopics={setSelectedTopics} />}
-                  {step === 'schedule' && <ScheduleStep />}
+                  {step === 'topic' && <TopicStep selectedTopics={selectedTopics} setSelectedTopics={setSelectedTopics} mentor={mentor} />}
+                  {step === 'schedule' && <ScheduleStep onChange={(data) => setBooking(data)} />}
                  {step === 'profile' && <ProfileStep />}
-                  {step === 'payment' && <PaymentStep selectedTopics={selectedTopics} />}
-                  {step === 'qr-payment' && <QrisPaymentStep />}
-                  {step === 'va-payment' && <VAPaymentStep />}
+                  {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'}>
@@ -148,10 +199,12 @@ export const AppointmentModal: FC<Props> = ({ open, setOpen }) => {
                    condition={step !== 'success'}
                    fallback="Halman Booking"
                  >
-                    <Show condition={step !== 'payment'} fallback="Bayar Sekarang">
+                    <Show condition={step !== 'payment'} fallback={bookMutation.isPending ? "Memproses..." : "Bayar Sekarang"}>
+                      <Show condition={step !== 'profile'} fallback="Pembayaran">
                        Selanjutnya
                      </Show>
                    </Show>
+                  </Show>
                </Button>
              </div>
            </div>
@@ -1,13 +1,34 @@
 import { For, Show } from "@imphnen-frontend-service/utils"
-import { FC } from "react"
+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)
  }

-export const PaymentStep: FC<Props> = ({ selectedTopics }) => {
  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"
@@ -22,15 +43,25 @@ export const PaymentStep: FC<Props> = ({ selectedTopics }) => {
          </p>
          <div>
            <div className="aspect-square mb-2 size-10 mx-auto rounded-full overflow-hidden md:size-20 md:ms-0">
-              <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
+              <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]">
-                Muhammad Firdaus Oi Oi Oi, S.H., M.H.
+                {mentor?.fullname || "Mentor"}
              </h3>
              <p className="text-[10px] text-neutral-600 md:text-xs">
-                UI Designer at Oray orayan Studios
+                {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>
@@ -65,15 +96,16 @@ export const PaymentStep: FC<Props> = ({ selectedTopics }) => {
            <p className="text-[8px] text-neutral-400 mb-2 md:text-[10px]">
              Virtual Account
            </p>
-            <div className="grid grid-cols-3 gap-2 md:grid-cols-4">
-              <For data={['BCA', 'BRI', 'BNI', 'MANDIRI', 'BCA-Virtual', 'BNI-Virtual', 'MANDIRI-Virtual']}>
+            <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"
+                    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={bank} className="size-2" />
-                    <label htmlFor={bank} className="block">
+                    <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>
@@ -85,11 +117,12 @@ export const PaymentStep: FC<Props> = ({ selectedTopics }) => {
            <p className="text-[8px] text-neutral-400 mb-2 md:text-[10px]">
              QRIS
            </p>
-            <div className="grid grid-cols-3 gap-2 md:grid-cols-4">
+            <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"
+                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" className="size-2" />
+                <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>
@@ -104,14 +137,14 @@ export const PaymentStep: FC<Props> = ({ selectedTopics }) => {
          </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. 50.000</p>
+            <p className="text-right">Rp. {rate.toLocaleString("id-ID")}</p>
            <p className="font-normal">Service Fee :</p>
-            <p className="text-right">Rp. 2.000</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. 52.000</p>
+            <p className="text-right text-neutral-700">Rp. {(rate + serviceFee).toLocaleString("id-ID")}</p>
          </div>
        </div>
      </div>
@@ -1,5 +1,7 @@
-import { For } from "@imphnen-frontend-service/utils"
+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',
@@ -8,7 +10,11 @@ const PAYMENT_STEP = [
  'Konfimasi pembayaran, dan proses selesai.'
 ]

-export const QrisPaymentStep = () => {
+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"
@@ -38,7 +44,14 @@ export const QrisPaymentStep = () => {
          <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. 52.000</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>

@@ -47,8 +60,20 @@ export const QrisPaymentStep = () => {
          QR Code Pembayaran
        </p>
        <div className="bg-primary-50 p-2.5 rounded-lg size-[120px] mx-auto md:size-[142px] md:me-0">
-          <img src="/image/sample-qrcode.webp" alt="QR Code" className="w-full" />
+          <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>
  )
@@ -1,6 +1,8 @@
 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.

@@ -13,7 +15,27 @@ Saya ingin tahu secara khusus tentang ___.

 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 ScheduleStep = () => {
+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"
@@ -31,15 +53,15 @@ export const ScheduleStep = () => {
      <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" />
+          <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" />
+          <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">
+          <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>
@@ -48,7 +70,9 @@ export const ScheduleStep = () => {
          <label className={labelClass}>Pertanyaan Untuk Senpai</label>
          <Textarea
            className="min-w-full w-full h-40"
-            placeholder={placeholder} />
+            placeholder={placeholder}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)} />
        </div>
      </div>
    </motion.div>
@@ -16,11 +16,11 @@ export const SuccessStep = () => {

      <div
        className={cn(
-          "mb-3 flex justify-center items-center mx-auto size-[60px] bg-green-200 rounded-full",
+          "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-green-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
+        <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>
@@ -3,13 +3,19 @@ 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 }) => {
+export const TopicStep: FC<Props> = ({ selectedTopics, setSelectedTopics, mentor }) => {
  const handleSelectTopic = (topicId: number) => {
    if (selectedTopics.includes(topicId)) {
      setSelectedTopics(selectedTopics.filter((id) => id !== topicId))
@@ -27,14 +33,19 @@ export const TopicStep: FC<Props> = ({ selectedTopics, setSelectedTopics }) => {
        exit={{ opacity: 0, y: 20 }}
      >
        <div className="w-16 aspect-4/5 overflow-hidden md:w-[134px] xl:w-[140px]">
-          <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
+          <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]">
-            Muhammad Firdaus Oi Oi Oi, S.H., M.H.
+            {mentor?.fullname || "Mentor"}
          </h3>
          <p className="text-[10px] line-clamp-2 text-neutral-600 md:text-[15px] xl:text-[19px]">
-            UI Designer at Oray orayan Studios
+            {mentor?.current_role || "Mentor"} at {mentor?.current_company || "IMPHNEN"}
          </p>
        </div>
      </motion.div>
@@ -1,5 +1,7 @@
-import { For } from "@imphnen-frontend-service/utils"
+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',
@@ -8,7 +10,11 @@ const PAYMENT_STEP = [
  'Konfimasi pembayaran, dan proses selesai.'
 ]

-export const VAPaymentStep = () => {
+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"
@@ -24,7 +30,7 @@ export const VAPaymentStep = () => {
        <p className="text-[10px] text-neutral-400 mb-1.5">
          Cara melakukan pembayaran
        </p>
-        <ul className="list-decimal pl-2.5">
+        <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">
@@ -33,6 +39,15 @@ export const VAPaymentStep = () => {
            )}
          </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">
@@ -44,11 +59,16 @@ export const VAPaymentStep = () => {
          Kode Virtual Account
        </p>
        <p className="text-xs font-semibold text-neutral-700 mb-1.5 md:text-[15px]">
-          8091239861969812
+          {payment?.externalRef || "8091239861969812"}
        </p>
        <p className="text-[8px] text-neutral-400 md:text-[10px]">
-          A/N Unknown
+          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>
  )
@@ -1,12 +1,21 @@
 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 }) => {
+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
@@ -23,7 +32,12 @@ export const ProfileSection: React.FC<Props> = ({ onBook }) => {
            "xl:aspect-5/6 md:h-60 md:rounded-lg"
          )}
        >
-          <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
+          <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]">
@@ -33,10 +47,10 @@ export const ProfileSection: React.FC<Props> = ({ onBook }) => {
              "md:text-[19px] md:mb-2 md:text-start xl:text-[23px]",
            )}
          >
-            Muhammad Firdaus Oi Oi Oi, S.H., M.H.
+            {name}
          </h1>
          <p className="text-xs mb-4 text-neutral-600 md:mb-5 md:text-[15px] xl:text-[19px] xl:mb-5">
-            UI Designer at Oray orayan Studios
+            {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
@@ -56,7 +70,7 @@ export const ProfileSection: React.FC<Props> = ({ onBook }) => {
        <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={['UI Design', 'UX Reseacrh']}>
+            <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}
@@ -68,7 +82,7 @@ export const ProfileSection: React.FC<Props> = ({ onBook }) => {
        <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={['Design Thinking', 'Communication', 'Problem Solving', '19:00 WIB']}>
+            <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}
@@ -81,8 +95,12 @@ export const ProfileSection: React.FC<Props> = ({ onBook }) => {

      <div className="hidden md:flex xl:hidden justify-between">
        <div>
-          <p className="text-primary-500 text-[15px] font-semibold">Jum, 4 April 2025</p>
-          <p className="text-neutral-500 text-xs font-medium">Jum, 4 April 2025</p>
+          <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!
@@ -1,61 +1,69 @@
 import { Button } from "@imphnen-frontend-service/ui/atoms"
-import { cn, For } from "@imphnen-frontend-service/utils"
+import { For, Show } from "@imphnen-frontend-service/utils"
+import { useGetMentorAvailability } from "@imphnen-frontend-service/service"
 import { FC } from "react"

-const SCHEDULES = [
-  {
-    date: "Kamis, 20 Maret 2025",
-    availableCount: 10,
-    schedule: [
-      { time: "19:00 WIB", available: true },
-      { time: "20:00 WIB", available: true },
-      { time: "21:00 WIB", available: true },
-      { time: "22:00 WIB", available: true },
-    ]
-  },
-  {
-    date: "Jumat, 21 Maret 2025",
-    availableCount: 1,
-    schedule: [
-      { time: "19:00 WIB", available: true },
-      { time: "20:00 WIB", available: true },
-      { time: "21:00 WIB", available: false },
-      { time: "22:00 WIB", available: true },
-    ]
-  }
-]
-
 type Props = {
  onBook: () => void
+  mentorId?: string
 }

-export const SenpaiScheduleSection: FC<Props> = ({ onBook }) => {
+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">
-        <For data={SCHEDULES}>
-          {(item) => (
-            <div key={item.date}>
-              <div className="flex justify-between items-center mb-4">
-                <p className="text-[15px] font-medium">{item.date}</p>
-                <p
-                  className={cn(
-                    "rounded-4xl py-1 px-2.5 text-xs font-medium",
-                    item.availableCount > 5 ? "bg-primary-200 text-primary-500" : "bg-danger-100 text-danger-600"
-                  )}
+        <Show
+          condition={!isLoading && days.length > 0}
+          fallback={
+            <p className="text-xs text-neutral-500">
+              {isLoading ? "Memuat jadwal senpai..." : "Belum ada jadwal tersedia."}
+            </p>
+          }
        >
-                  {item.availableCount} slot tersisa
+          <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 gap-x-3">
-                <For data={item.schedule}>
-                  {(schedule, index) => (
+                <div className="flex flex-wrap gap-x-3 gap-y-2">
+                  <For data={daySlots}>
+                    {(schedule) => (
                      <div
-                      key={index}
-                      className="bg-primary-300 text-primary-600 px-3 py-2 text-xs rounded-md font-semibold"
+                        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"
+                        }`}
                      >
-                      {schedule.time}
+                        {formatTime(schedule.time)}
                      </div>
                    )}
                  </For>
@@ -63,6 +71,7 @@ export const SenpaiScheduleSection: FC<Props> = ({ onBook }) => {
              </div>
            )}
          </For>
+        </Show>

        <hr className="border-primary-200" />

@@ -1,14 +1,23 @@
 import { StarFilled } from "@ant-design/icons";
 import { For } from "@imphnen-frontend-service/utils";
+import { useGetMentorStats } from "@imphnen-frontend-service/service";
 import { FC } from "react";

-const SENPAI_STATISTIC = [
-  { name: 'Total Sessions', count: 8 },
-  { name: 'Mentee Impact', count: 1000 },
-  { name: 'Response Time', count: '30 Minute' }
+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` : '-' },
  ]

-export const StatisticsSection: FC = () => {
  return (
    <div className="md:mb-10">
      <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Senpai Statistics</h2>
@@ -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>
+);
@@ -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;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
asepharyana	b202a6210f	fix(dimentorin): For util React key + backoffice dashboard stats akurat - For(): bungkus item dalam Fragment dgn key=idx — hilangkan warning 'Each child in a list should have a unique key prop' di semua list backoffice - Dashboard backoffice: fetch per_page=100 (bukan 5/1) supaya stat total akurat; Mentor Terdaftar dihitung dari user list role=Mentor (bukan unique mentor_id dalam 5 sesi pertama)	2026-08-06 08:33:11 +07:00
asepharyana	567d237651	feat(dimentorin): backoffice admin panel (dashboard, user mgmt, session mgmt, content/roadmap, feedback, settings)	2026-08-06 01:03:50 +07:00
asepharyana	7901fc3f82	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)	2026-08-05 23:18:51 +07:00
asepharyana	e2d5e37bd1	feat(dimentorin): dashboard layout Figma untuk user & mentor + halaman Dashboard baru Node 216:740 = canvas penuh (bukan cuma design system). Dashboard User & Mentor di Figma punya sidebar + topbar + overview stats yang BELUM ada di FE. Implementasi: - BARU apps/.../mentoring/_components/dashboard-layout.tsx: DashboardLayout/DashboardSidebar/DashboardHeader shared (sidebar sticky, decode JWT untuk inisial/email, logout via SessionToken.remove) - BARU /mentoring/dashboard (Dashboard User sesuai Figma 1290:4808): welcome banner 'Selamat Datang di Dimentorin.dev' + CTA Temukan Roadmapnya, Overview stats (Mentoring Session dari sessions API, Article Submitted dari articles, Article Published dari completed sessions), Roadmaps progress card 'Front End Basic' dari materials API - my-sessions dipindah ke layout dashboard (sidebar user, nav aktif) - mentor-dashboard full rewrite (Figma 1340:4285): sidebar mentor (Dashboard/Mentoring Setup/List Mentee/Feedback), overview stats (Your Rating dari mentor stats avg_rating, Session Complete, Mentee Impacted unique, Total Feedback), tabs Sesi Masuk/Setup/Mentee/Feedback dengan data sessions API - Header: tambah menu Dashboard	2026-08-05 22:40:56 +07:00
asepharyana	3a8496203e	feat(dimentorin): implementasi halaman 'Jadi Sensei' (Mentor Page) dari Figma + fix tombol modal Dengan Figma PAT sekarang bisa akses node 216:740 = canvas 'Dimentorin By IMPHNEN' (berisi SEMUA halaman, bukan cuma design system). Hasil audit konten: - Halaman baru /jadi-sensei: landing rekrutmen mentor persis Figma (Mentor Page 1686:12228) * Hero 'Jadi Sensei di Dunia IT?' + stats 1000+ Kohai Menunggu / 500+ Sensei Aktif + tombol 'Mulai Jadi Sensei' * 'Kenapa Harus Join Guild Sensei Kami? 🔥' - 3 kartu: Power-Up Para Kohai, Skill Jadi Gold Mine, Legendary Sensei Status * Testimonial 'What the Legendary Sensei Says' (Riko 4.8/5.0) * FAQ 'Kata Para Sensei Legendaris' - income 100rb/sesi/45 menit, sistem pembayaran, flexible sesi * CTA 'Ready to become the Legendary Sensei?' + 'Daftar Sekarang' - Fix typo 'Bagaiamana' -> 'Bagaimana', 'Frequently Ask Question' -> 'Frequently Asked Questions' - Booking modal: tombol step CV (profile) jadi 'Pembayaran' sesuai Figma (Modals Appointment Mentor 3) - Verifikasi teks persis via Figma REST API: Home/CTA/WhatWeOffer/Modal sudah MATCH (koreksi temuan vision yang keliru)	2026-08-05 21:43:50 +07:00
asepharyana	22bb4b63ce	feat(dimentorin): implementasi avatar inisial mentor + resume dinamis + fix dummy data - Komponen baru MentorAvatar: gradient unik per nama (hash), inisial nama, reusable (sm/md/lg + textClassName) - Kartu mentor: ganti img testimonial.webp statis -> avatar inisial gradient (MU, dll) - Detail mentor profile: avatar besar + fix hardcoded tanggal 'Jum, 4 April 2025' -> tanggal dinamis id-ID - Senpai Resume: fallback dinamis dari data mentor (role/experience/expertise/industries/languages) saat bio kosong, bukan 'Belum ada deskripsi' - Booking modal topic step: ganti nama mentor hardcoded 'Muhammad Firdaus Oi Oi Oi' -> dari prop mentor + avatar - Booking modal payment step: avatar mentor di summary	2026-08-05 20:59:56 +07:00
asepharyana	8b77f27f58	feat(dimentorin): audit isi halaman & layout + fix halaman kosong - Homepage testimonial: hardcode Array.from({length:2}) duplikat Riko x2 -> 4 testimonial berbeda (Riko 4.8, Salsa 5.0, Dimas 4.9, Nadia 4.7) - Fix typo 'dellow devs' -> 'fellow devs', 'Frequently Ask Question' -> 'Frequently Asked Questions' - FAQ diperluas dari 3 -> 5 pertanyaan (payment, materi gratis) - Buat halaman 404 brand IMPHNEN (Quest Tidak Ditemukan!) dgn Header+Footer di (public)/404.tsx - Fix middleware: 404/route tak dikenal tidak redirect ke login (hanya prefix admin /dashboard,/users,/roles,/permissions yg protected) - my-sessions & mentor-dashboard: guard SessionToken -> CTA 'Login dulu, Senpai!' (sebelumnya loading forever karena API 401 tanpa token)	2026-08-05 20:13:15 +07:00
asepharyana	5b50680f14	feat(dimentorin): audit FE samakan dgn Figma design system - FIX KRITIS: apps/dimentorin/src/index.css @theme nyimpang dari Figma (67 token beda: primary-500 #1a8ce6 vs #23a1eb, semua warna success/info/warning/danger + skala typography). Disamakan dgn libs/ui (source of truth Figma). - Hapus hardcoded warna non-token di apps: blue-400, gray-5/6/700, amber/emerald/red-100, green-200/500 -> token primary/neutral/warning/success/danger - libs/ui: gray-* -> neutral-, blue- -> primary-, #1a8ce6 -> #23a1eb, bg-[#F0F8FF] -> primary-50, SVG fill hex -> fill- token classes - Typography: text-[27/26/22/11px] menyimpang dari skala Figma -> text-[29/23/19/12px] - Radius: rounded-4xl (32px, tidak ada di Figma) -> rounded-3xl (24px)	2026-08-05 19:28:02 +07:00
asepharyana	94f80e4eda	fix(dimentorin): homepage kosong akibat duplikat page route - hapus apps/dimentorin/src/app/page.tsx (hanya Navbar+div kosong) yg menang conflict / - aktifkan (public)/(home) yg berisi 5 section (Hero, WhatWeOffer, Testimonial, FAQ, CTA) - tambah navigasi onClick tombol CTA: hero & CTA -> /mentoring/ai-agent, /mentoring	2026-08-05 18:36:35 +07:00
asepharyana	7294040fd1	feat(dimentorin): halaman Materi + AI Agent RAG - /mentoring/materi: list materi (kategori chips, cards) + detail konten per slug - /mentoring/ai-agent: chatbox RAG — tanya materi, jawaban dari Qdrant context + sumber relevansi % - service: getMaterialsList/getMaterialBySlug/getMaterialById/getMaterialCategories + postChat + hooks - header: menu Materi & AI Agent - e2e verified: list 3 materi, detail tampil, chat 'ownership' jawab dari materi Rust + 3 sources (84/64/61%)	2026-08-05 17:26:27 +07:00
asepharyana	49a448fee1	feat(dimentorin): my sessions + mentor dashboard with live payment status - /mentoring/my-sessions: mentee session list w/ payment status (Lunas/Menunggu), Cek Status button (Midtrans auto-paid refresh), Detail Mentor link - /mentoring/mentor-dashboard: mentor session requests w/ payment panel (Refresh + Konfirmasi) - header menu: Sesi Saya - TPayment type fixed to camelCase (sessionId/mentorId/externalRef) matching backend DTO - QRIS step renders real Midtrans QR from qr_string via qrserver API - e2e verified: sessions render, refresh + confirm payment buttons work end-to-end	2026-08-05 15:58:29 +07:00
asepharyana	bb980a7add	fix(dimentorin): hide raw QR string for midtrans provider in QRIS step - QRIS step no longer shows the long EMVCo QR string verbatim (real VA number still shown in VA step) - build verified	2026-08-05 13:37:41 +07:00
asepharyana	893f7ba03c	feat(dimentorin): wire appointment payment flow to payments API - PaymentStep: selectable VA/QRIS method, rate from mentor.mentoring_rate (fallback 50000), onMethodChange - AppointmentModal: book session -> create payment -> route to VA/QRIS step with real payment data; then success - QrisPaymentStep/VAPaymentStep: show real total + external_ref (VA number/QR ref) + expiry - service lib: TPayment/TCreatePaymentRequest types + postCreatePayment/getMyPayments/getPaymentById/postConfirmPayment + hooks - build verified, payments flow bundled	2026-08-05 09:28:56 +07:00
asepharyana	a74fabe5f5	feat(dimentorin): senpai statistics from API (total sessions, mentee impact, avg rating)	2026-08-04 23:09:15 +07:00
asepharyana	6c5c5db47b	feat(dimentorin): mentor register flow wired to API (4-step form, validation, submit, redirect pending)	2026-08-04 20:04:41 +07:00
asepharyana	583b6b224e	feat(dimentorin): articles page integrated with API (list, filter, detail)	2026-08-04 19:31:29 +07:00
asepharyana	ce0579de5d	fix(dimentorin): unwrap paginated response + local dev API URL	2026-08-04 18:15:57 +07:00
asepharyana	7df4592a47	feat(dimentorin): integrate mentors API - service layer + public list/detail pages	2026-08-04 17:55:59 +07:00
asepharyana	77eb755783	merge: integrate dimentorin landing pages (mentoring/articles/resources) with auth branch	2026-08-04 17:09:37 +07:00
euxzy	8c6a85090d	feat(dimentorin): slicing landing - detail articles page	2025-07-28 21:33:58 +07:00
euxzy	a6134cb32a	feat(dimentorin): slicing landing - articles page	2025-07-28 20:45:29 +07:00
euxzy	d9c5ff0b18	feat(dimentorin): slicing landing - resources page	2025-07-27 20:21:41 +07:00
euxzy	924354366c	feat(dimentorin): slicing modal booking mentor	2025-07-26 22:12:47 +07:00
euxzy	dce74c5c7c	Merge remote-tracking branch 'origin/develop' into feat/dimentorin-landing-page	2025-07-23 18:49:55 +07:00
euxzy	d4c263cad3	feat(dimentorin): slicing landing page detail mentor	2025-07-22 08:20:59 +07:00
boboiazumi	e2be5105e9	feat: mentor status page pending and success	2025-07-12 22:38:23 +07:00
boboiazumi	eb5ff2e46c	feat: mentor register pages	2025-07-12 22:15:43 +07:00
boboiazumi	e1269f4daa	fix: conflict	2025-07-10 10:18:44 +07:00
boboiazumi	487623e4fb	Merge branch 'develop' of https://github.com/IMPHNEN/imphnen-frontend-service into develop merge	2025-07-10 10:07:36 +07:00
boboiazumi	eff44c42a1	stash	2025-07-10 10:07:26 +07:00
euxzy	3e232dcdc2	feat(dimentorin): slicing landing page menu mentoring	2025-07-10 08:01:11 +07:00
boboiazumi	aa52b62ae7	fix: minor	2025-06-19 21:36:08 +07:00
boboiazumi	3dec77bd0a	Merge remote-tracking branch 'origin/DimentorinAuth' into DimentorinAuth merge	2025-05-30 14:27:00 +07:00
boboiazumi	ec81922001	fix: conflict	2025-05-30 14:26:04 +07:00
boboiazumi	d7b70b21d1	Merge branch 'develop' of https://github.com/IMPHNEN/imphnen-frontend-service into develop merge	2025-05-30 14:20:02 +07:00
boboiazumi	a7cf85dd66	feat: OTP Resend	2025-05-30 14:19:36 +07:00
Naufal Azmi	bb22068856	Update middleware.ts	2025-05-26 20:25:07 +07:00
Naufal Azmi	209fa3fff1	Merge branch 'develop' into DimentorinAuth	2025-05-26 20:22:04 +07:00
boboiazumi	935d23887c	feat: register and otp integration	2025-05-26 20:14:26 +07:00
boboiazumi	363f1582c9	fix: button disabled when loading	2025-05-26 17:05:02 +07:00
boboiazumi	1a9b47953a	fix: conflict	2025-05-26 16:28:46 +07:00
boboiazumi	182ff7facc	fix: conflict	2025-05-25 10:12:21 +07:00
boboiazumi	af8968ac01	Merge branch 'develop' of https://github.com/IMPHNEN/imphnen-frontend-service into develop merge develop	2025-05-25 09:30:39 +07:00
boboiazumi	4bd66af0ff	fix: login page button disabled & register page	2025-05-25 09:24:24 +07:00
boboiazumi	73826fb4c3	feat: auth login responsive && auth login implementation	2025-04-08 12:28:18 +07:00
boboiazumi	2f9407e258	Merge branch 'develop' of https://github.com/IMPHNEN/imphnen-frontend-service into develop	2025-04-07 21:35:47 +07:00
boboiazumi	534bf0e10a	fix: conflict	2025-04-07 21:35:35 +07:00
boboiazumi	df479a0a8d	fix: success register	2025-04-07 20:48:19 +07:00
boboiazumi	1948d2c67f	feat: responsive	2025-04-07 20:40:58 +07:00