feat: mentor status page pending and success

feat: mentor register pages
fix: conflict
2025-07-12 22:38:23 +07:00 · 2025-07-12 22:15:43 +07:00 · 2025-07-10 10:18:44 +07:00 · 2025-07-10 10:07:36 +07:00 · 2025-07-10 10:07:26 +07:00 · 2025-06-19 21:36:08 +07:00
88 changed files with 118 additions and 4511 deletions
@@ -1,35 +0,0 @@
 name: Deploy Backoffice
 on:
  push:
    branches:
      - develop
    paths:
      - 'apps/backoffice/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v4
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
          script: |
            set -e
            if [ ! -d ~/imphnen-frontend-service-backoffice ]; then
              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-backoffice
            else
              cd ~/imphnen-frontend-service-backoffice && git pull
            fi
            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env
            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml down || true
            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build
            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml up -d
            docker image prune -af
@@ -1,35 +0,0 @@
 name: Deploy Dimentorin
 on:
  push:
    branches:
      - develop
    paths:
      - 'apps/dimentorin/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v4
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
          script: |
            set -e
            if [ ! -d ~/imphnen-frontend-service-dimentorin ]; then
              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-dimentorin
            else
              cd ~/imphnen-frontend-service-dimentorin && git pull
            fi
            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env
            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml down || true
            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build
            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml up -d
            docker image prune -af
@@ -1,35 +0,0 @@
 name: Deploy Gacha
 on:
  push:
    branches:
      - develop
    paths:
      - 'apps/gacha/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v4
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
          script: |
            set -e
            if [ ! -d ~/imphnen-frontend-service-gacha ]; then
              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-gacha
            else
              cd ~/imphnen-frontend-service-gacha && git pull
            fi
            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-gacha/apps/gacha/.env
            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml down || true
            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build
            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml up -d
            docker image prune -af
@@ -2,8 +2,6 @@ name: Deploy Landing
 on:
  push:
    branches:
      - develop
    paths:
      - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
@@ -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,89 +0,0 @@
 import { Icon } from "@iconify/react"
 import { Button } from "@imphnen-frontend-service/ui/atoms"
 import { For } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
 const SOCIAL_LINKS = [
  { icon: <Icon icon="mdi:linkedin" className="text-2xl" />, url: "https://linkedin.com", label: "LinkedIn" },
  { icon: <Icon icon="mdi:github" className="text-2xl" />, url: "https://github.com", label: "Github" },
  { icon: <Icon icon="mingcute:meta-line" className="text-2xl" />, url: "https://facebook.com", label: "Facebook (Meta)" },
  { icon: <Icon icon="mdi:stack-overflow" className="text-2xl" />, url: "https://stackoverflow.com", label: "Stack Overflow" }
 ]
 export const DetailProfile: FC = () => {
  return (
    <div>
      <div className="shadow rounded-lg p-8 mb-7">
        <div className="flex justify-between items-start mb-6">
          <div className="flex items-center gap-x-6">
            <div className="size-[54px] rounded-full overflow-hidden">
              <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="w-full object-cover" />
            </div>
            <div>
              <h1 className="text-p2 font-semibold text-neutral-800">Muhammad Firdaus Oiwobo</h1>
              <p className="text-p3 font-medium text-neutral-600">Mentor</p>
            </div>
          </div>
          <Button type="button" variant="text" className="bg-primary-100">
            Actively Seeking Job
          </Button>
        </div>
        <div className="flex items-center gap-5">
          <For data={SOCIAL_LINKS}>
            {({ icon, url, label }) => (
              <a key={url} href={url} target="_blank" rel="noreferrer">
                <Button type="button" size="sm" className="flex items-center gap-x-2">
                  {icon}
                  {label}
                </Button>
              </a>
            )}
          </For>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-7">
        <div className="text-pretty px-8 py-10 rounded-lg shadow h-max">
          <h1 className="text-p2 font-semibold text-neutral-800 mb-6">Description</h1>
          <p className="text-p3 font-medium text-neutral-600">
            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. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
          </p>
        </div>
        <div className="px-8 py-10 rounded-lg shadow h-max">
          <h1 className="text-p2 font-semibold text-neutral-800 mb-6">Personal Informations</h1>
          <div className="grid gap-6">
            <div className="flex items-center gap-x-5">
              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
                <Icon icon="ic:outline-mail" className="text-3xl" />
              </div>
              <div className="text-p3">
                <p className="text-neutral-800 font-semibold">rzalaxib23@gmail.com</p>
                <p className="text-neutral-600 font-medium">Email Address</p>
              </div>
            </div>
            <div className="flex items-center gap-x-5">
              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
                <Icon icon="cil:phone" className="text-3xl" />
              </div>
              <div className="text-p3">
                <p className="text-neutral-800 font-semibold">+62 888 8888 8888</p>
                <p className="text-neutral-600 font-medium">Phone Number</p>
              </div>
            </div>
            <div className="flex items-center gap-x-5">
              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
                <Icon icon="ion:location-outline" className="text-3xl" />
              </div>
              <div className="text-p3">
                <p className="text-neutral-800 font-semibold">Jl. Mergosari, Kec. Suryakencana, Banjaran</p>
                <p className="text-neutral-600 font-medium">Location</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </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>
  );
 }
@@ -3,7 +3,7 @@ import { motion } from 'framer-motion'
 export function HeroSection() {
  return (
-    <section className="relative w-full z-0 py-20 md:py-28 lg:py-32">
+    <section className="relative w-full py-20 md:py-28 lg:py-32">
      {/* Background gradients and shapes */}
      <div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
        <motion.div
@@ -2,8 +2,8 @@ import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
 import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { cn, For, Show } from "@imphnen-frontend-service/utils";
 import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
-import { FC, useMemo, useState } from "react";
+import { FC, useState } from "react";
-import { Link, NavLink, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 const MENUS: { label: string; href: string }[] = [
  { label: "Home", href: "/" },
@@ -30,15 +30,8 @@ export const Header: FC = () => {
    else setShow(true)
  })
  const isActive = useMemo(() => {
    return (path: string) => {
      if (path === '/' && location.pathname !== '/') return false
      return location.pathname.includes(path)
    }
  }, [location.pathname]);
  return (
-    <div className={cn("w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky", !show && "overflow-hidden")}>
+    <div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky overflow-hidden">
      <motion.header
        className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
        aria-roledescription="nav"
@@ -70,22 +63,18 @@ export const Header: FC = () => {
                variant="text"
                className={cn(
                  "px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
-                  isActive(menu.href) && "text-primary-500 hover:text-primary-500"
+                  location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
                )}
              >
-                <NavLink to={menu.href}>{menu.label}</NavLink>
+                <Link to={menu.href}>{menu.label}</Link>
              </Button>
              )}
            </For>
-            <Link to="/auth/login">
+            <Button type="button" className="px-12 py-1 md:hidden">Login</Button>
              <Button type="button" className="px-12 py-1 lg:hidden">Login</Button>
            </Link>
          </nav>
          <div>
-            <Link to="/auth/login">
+            <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
              <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
            </Link>
            <Button
              type="button"
              variant="text"
@@ -1,88 +0,0 @@
 import { Icon } from "@iconify/react";
 import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { cn } from "@imphnen-frontend-service/utils";
 import { motion } from "framer-motion";
 export default function DetailArticle() {
  return (
    <main>
      <motion.section
        className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5, ease: "easeInOut" }}
      >
        <div className="w-full max-w-[900px] mx-auto mb-8 md:mb-[60px]">
          <div className="mb-10 flex items-center justify-between">
            <Button
              type="button"
              variant="text"
              className="flex gap-x-2 text-[10px] px-2.5 py-2 md:text-[15px]"
            >
              <Icon icon="material-symbols:arrow-back-rounded" />
              <span>Back</span>
            </Button>
            <Button
              type="button"
              variant="text"
              className="flex gap-x-2 text-[10px] px-2.5 py-2 md:text-[15px]"
            >
              <span>Read Next</span>
              <Icon icon="material-symbols:arrow-forward-rounded" />
            </Button>
          </div>
          <div className="text-center leading-tight">
            <h1
              className="text-[23px] text-neutral-800 font-semibold mb-6 md:text-[37px] md:mb-10 xl:text-[46px]"
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </h1>
            <p
              className="text-[15px] font-semibold text-neutral-800 mb-2 md:text-[19px] md:mb-1 xl:text-[23px] xl:mb-2"
            >
              Writer&rsquo;s Name
            </p>
            <p className="text-xs text-neutral-600 mb-6 md:text-[15px] xl:text-[19px]">
              14 March 2025
            </p>
            <div
              className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-4xl w-max mx-auto md:text-xs xl:text-[15px]"
            >
              5 min read
            </div>
          </div>
        </div>
        <div className="w-full max-w-[900px] mx-auto">
          <div className="mb-8 w-full h-auto aspect-16/10 overflow-hidden md:aspect-31/16 md:mb-[60px] xl:aspect-45/26">
            <img src="/image/59de8a682dfbe42455613ea07477ff3e30532c1f.webp" alt="Cover Article" className="size-full object-cover" />
          </div>
          <div
            className={cn(
              "text-balance text-[15px] font-medium text-neutral-600 space-y-8",
              "md:space-y-12 md:text-[19px] xl:text-[23px] xl:max-w-[780px] xl:mx-auto",
            )}
          >
            <h2 className="text-[19px] text-neutral-800 font-semibold leading-tight  md:text-[23px] xl:text-[29px]">
              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. Maecenas vitae mattis tellus.
            </h2>
            <p className="leading-tight">
              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. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
            </p>
            <img src="/image/code-article.webp" alt="Code" className="w-full h-auto mb-12" />
            <p className="leading-tight">
              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. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
            </p>
            <p className="leading-tight">
              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. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
            </p>
          </div>
        </div>
      </motion.section>
    </main>
  )
 }
@@ -1,74 +0,0 @@
 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"
 export type ArticleCardProps = {
  variant?: "default" | "recent" | "featured"
 }
 export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default' }) => {
  return (
    <div
      className={cn(
        variant === "recent" && "md:grid md:grid-cols-2 md:gap-7 xl:flex xl:items-center",
      )}
    >
      <div
        className={cn(
          "w-full h-auto aspect-16/10 overflow-hidden mb-8 md:h-60 md:w-full xl:aspect-auto",
          variant === "featured" && "md:h-[300px]",
          variant === "recent" && "md:h-auto md:w-full md:aspect-15/7 md:mb-0 xl:aspect-square xl:w-[162px] xl:h-auto",
        )}
      >
        <img
          src="/image/59de8a682dfbe42455613ea07477ff3e30532c1f.webp"
          alt="Cover's Article"
          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>
        <Link
          to="/articles/detail"
          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]"
          )}
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Link>
        <Show condition={variant !== "recent"}>
          <p 
            className={cn(
              "text-xs text-neutral-600 mb-6 md:text-[15px] md:mb-8 xl:text-[19px]",
              variant === "featured" && "text-[15px] md:text-[19px] md:mb-6",
            )}
          >
            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.
          </p>
        </Show>
        <div
          className={cn(
            "flex justify-between items-center text-xs text-neutral-600 md:text-[15px] xl:text-[19px]",
            variant === "default" && "mb-4",
            variant === "featured" && "text-[15px] md:text-[19px] xl:text-base",
          )}
        >
          <p>Writer’s Name</p>
          <p>14 March 2025</p>
        </div>
        <Show condition={variant === "default"}>
          <Button type="button" size="sm" className="px-2.5 py-2">
            Baca Artikel
          </Button>
        </Show>
      </div>
    </div>
  )
 }
@@ -1,122 +0,0 @@
 import { ReactElement, useRef, useState } from "react";
 import { ArticleCard } from "./_components/card/article";
 import { cn, For } 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]
 export default function Components(): ReactElement {
  const [activeTab, setActiveTab] = useState<Category>('UI/UX Design')
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
      },
    },
  }
  const childVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.4,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  }
  return (
    <main ref={ref}>
      <motion.section
        className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20"
        variants={containerVariants}
        initial="hidden"
        animate={isInView ? "visible" : "hidden"}
      >
        <div className="max-w-7xl mx-auto mb-8 md:mb-20">
          <motion.h1
            className="text-[23px] font-semibold text-neutral-800 mb-9 md:text-[29px] xl:text-[46px] xl:font-bold"
            variants={childVariants}
          >
            Featuring Articles
          </motion.h1>
          <div className="grid gap-12 xl:grid-cols-2">
            <motion.div variants={childVariants}>
              <ArticleCard variant="featured" />
            </motion.div>
            <div>
              <motion.h1
                className="text-[19px] text-neutral-800 font-semibold mb-10 md:text-[29px] xl:text-[37px] xl:mb-12"
                variants={childVariants}
              >
                Recent Articles
              </motion.h1>
              <div className="grid gap-10">
                <For data={Array.from({ length: 3 })}>
                  {(_, index) => (
                    <motion.div key={index} variants={childVariants}>
                      <ArticleCard variant="recent" />
                    </motion.div>
                  )}
                </For>
              </div>
            </div>
          </div>
        </div>
        <div className="max-w-7xl mx-auto">
          <motion.h1
            className="text-[19px] text-neutral-800 font-semibold mb-4 md:text-[23px] xl:text-[29px]"
            variants={childVariants}
          >
            Category
          </motion.h1>
          <div className="scrollbar-hide mb-8 w-full overflow-auto mx-auto">
            <motion.div className="min-w-max w-auto flex gap-x-3" variants={childVariants}>
              <For data={CATEGORIES}>
                {(category) => (
                  <Button
                    key={category}
                    type="button"
                    variant="text"
                    onClick={() => setActiveTab(category)}
                    className={cn(
                      "relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-4xl md:text-xs md:font-semibold xl:text-[15px]",
                      "before:w-0 before:absolute before:h-0.5 before:mx-auto before:inset-x-0 before:bg-primary-500 hover:before:w-full before:bottom-0 before:left-0 before:transition-all before:duration-300",
                      activeTab === category && "text-primary-500 before:w-full"
                    )}
                  >
                    {category}
                  </Button>
                )}
              </For>
            </motion.div>
          </div>
          <div className="grid gap-8 xl:grid-cols-3">
            <For data={Array.from({ length: 3 })}>
              {(_, index) => (
                <motion.div key={index} variants={childVariants}>
                  <ArticleCard />
                </motion.div>
              )}
            </For>
          </div>
        </div>
      </motion.section>
    </main>
  )
 }
@@ -6,7 +6,7 @@ export default function Layout() {
  return (
    <div className="flex min-h-screen flex-col bg-primary-50">
      <Header />
-      <main className="flex-1">
+      <main className="flex-1 z-0">
        <Outlet />
      </main>
      <Footer />
@@ -1,163 +0,0 @@
 import { CloseOutlined } from "@ant-design/icons"
 import { Button } from "@imphnen-frontend-service/ui/atoms"
 import { AnimatePresence, motion } from "framer-motion"
 import { FC, useCallback, useEffect, useState } from "react"
 import { TopicStep } from "./steps/topic"
 import { cn, Show } from "@imphnen-frontend-service/utils"
 import { ScheduleStep } from "./steps/schedule"
 import { ProfileStep } from "./steps/profile"
 import { QrisPaymentStep } from "./steps/qris-payement"
 import { VAPaymentStep } from "./steps/va-payment"
 import { SuccessStep } from "./steps/success"
 import { PaymentStep } from "./steps/payment"
 const STEPS = ['topic', 'schedule', 'profile', 'payment', 'qr-payment', 'va-payment', 'success'] as const
 type Step = typeof STEPS[number]
 type Props = {
  open: boolean
  setOpen: (open: boolean) => void
 }
 export const AppointmentModal: FC<Props> = ({ open, setOpen }) => {
  const [step, setStep] = useState<Step>('topic')
  const [selectedTopics, setSelectedTopics] = useState<number[]>([])
  const handleStep = (action: 'next' | 'prev') => {
    if (action === 'next' && step === 'success') {
      setOpen(false)
    } else if (action === 'next') {
      setStep(STEPS[STEPS.indexOf(step) + 1])
    } else if (action === 'prev' && step !== 'topic') {
      setStep(STEPS[STEPS.indexOf(step) - 1])
    }
  }
  const handleEscapeKey = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape" && open) setOpen(false)
    },
    [open, setOpen]
  )
  useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden"
      window.addEventListener("keydown", handleEscapeKey)
    } else {
      document.body.style.overflow = ""
    }
    return () => {
      document.body.style.overflow = ""
      window.removeEventListener("keydown", handleEscapeKey)
    }
  }, [handleEscapeKey, open])
  return (
    <AnimatePresence>
      {open && (
        <motion.div
          initial={{ opacity: 0, top: "50%" }}
          animate={{ opacity: 1, top: 0 }}
          exit={{ opacity: 0, top: "50%" }}
          className="fixed inset-0 z-100 flex items-center justify-center"
        >
          <div className="fixed inset-0 bg-primary-900/30" onClick={() => setOpen(false)} />
          <div
            className={cn(
              "relative bg-primary-50 px-5 py-6 w-full max-w-[280px] mx-4 rounded-lg md:max-w-[627px] md:py-10 md:px-[60px] md:rounded-xl xl:max-w-[668px]",
              step === 'success' && 'md:max-w-[400px] md:p-10 xl:max-w-[400px]',
            )}
          >
            <Show condition={step !== 'success'}>
              <Button
                type="button"
                size="sm"
                variant="text"
                className="absolute top-3 right-3 bg-primary-200 p-1 shadow md:bg-white md:p-2 md:top-8 md:right-10"
              >
                <CloseOutlined className="md:text-lg" />
              </Button>
            </Show>
            <div>
              {step !== 'success' && (
                <img
                  src="/logos/simple.svg"
                  alt="IMPHNEN Logo"
                  className="mb-6 h-8 w-auto mx-auto md:h-12 xl:h-[60px]"
                />
              )}
              <div className="scrollbar-hide max-h-[50dvh] overflow-y-auto">
                {step !== 'success' && (
                  <div className="relative mb-7 bg-primary-500 p-4 overflow-hidden rounded-md md:px-7 md:py-5 md:flex md:justify-between md:gap-x-6">
                    <p className="text-xs font-semibold text-primary-50 md:text-[19px] md:w-[290px] xl:text-[23px]">
                      <Show
                        condition={step !== 'qr-payment' && step !== 'va-payment'}
                        fallback="Yosha~! Saatnya Membayar :)"
                      >
                        Yosha~! Saatnya Level Up dengan Sesi Mentoring bersama Senpai!
                      </Show>
                    </p>
                    <img
                      src="/image/mascot-character.webp"
                      alt="IMPHNEN Mascot"
                      className="hidden w-[166px] h-auto absolute right-0 -bottom-3 md:block xl:w-[207px] xl:-bottom-5"
                    />
                  </div>
                )}
                <AnimatePresence>
                  {step === 'topic' && <TopicStep selectedTopics={selectedTopics} setSelectedTopics={setSelectedTopics} />}
                  {step === 'schedule' && <ScheduleStep />}
                  {step === 'profile' && <ProfileStep />}
                  {step === 'payment' && <PaymentStep selectedTopics={selectedTopics} />}
                  {step === 'qr-payment' && <QrisPaymentStep />}
                  {step === 'va-payment' && <VAPaymentStep />}
                  {step === 'success' && <SuccessStep />}
                </AnimatePresence>
              </div>
              <Show condition={step !== 'success'}>
                <hr className="my-6 border-primary-300" />
              </Show>
              <div className="flex justify-between">
                <Button
                  type="button"
                  size="sm"
                  variant="text"
                  className={cn((step === 'topic' || step === 'success') && 'hidden')}
                  onClick={() => handleStep('prev')}
                >
                  Kembali
                </Button>
                <Button
                  type="button"
                  size="sm"
                  variant="primary"
                  className={cn((step === 'topic' || step === 'success') && 'w-full')}
                  disabled={selectedTopics.length === 0 && step === 'topic'}
                  onClick={() => handleStep('next')}
                >
                  <Show
                    condition={step !== 'success'}
                    fallback="Halman Booking"
                  >
                    <Show condition={step !== 'payment'} fallback="Bayar Sekarang">
                      Selanjutnya
                    </Show>
                  </Show>
                </Button>
              </div>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
 }
@@ -1,120 +0,0 @@
 import { For, Show } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
 import { motion } from "framer-motion"
 import { TOPICS } from "../../../sections/topics"
 type Props = {
  selectedTopics: number[]
 }
 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"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
    >
      <div className="space-y-6 xl:col-span-4">
        <div>
          <p className="w-max mx-auto text-[10px] text-neutral-400 font-medium mb-2 md:text-xs md:ms-0">
            Senpai Kamu
          </p>
          <div>
            <div className="aspect-square mb-2 size-10 mx-auto rounded-full overflow-hidden md:size-20 md:ms-0">
              <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
            </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.
              </h3>
              <p className="text-[10px] text-neutral-600 md:text-xs">
                UI Designer at Oray orayan Studios
              </p>
            </div>
          </div>
        </div>
        <div>
          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
            Topics :
          </p>
          <div className="flex flex-wrap gap-2">
            <For data={TOPICS}>
              {(topic) => (
                <Show key={topic.id} condition={selectedTopics.includes(topic.id)}>
                  <div
                    className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium"
                  >
                    <span>{topic.icon} </span>
                    <span>{topic.name}</span>
                  </div>
                </Show>
              )}
            </For>
          </div>
        </div>
      </div>
      <div className="space-y-6 xl:col-span-5">
        <div>
          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
            Metode Pembayaran
          </p>
          <div className="mb-3">
            <p className="text-[8px] text-neutral-400 mb-2 md:text-[10px]">
              Virtual Account
            </p>
            <div className="grid grid-cols-3 gap-2 md:grid-cols-4">
              <For data={['BCA', 'BRI', 'BNI', 'MANDIRI', 'BCA-Virtual', 'BNI-Virtual', 'MANDIRI-Virtual']}>
                {(bank, index) => (
                  <div
                    key={index}
                    className="p-1 bg-white rounded-xs border border-primary-50 flex items-center gap-x-1"
                  >
                    <input type="radio" name="payment" id={bank} className="size-2" />
                    <label htmlFor={bank} className="block">
                      <img src="/image/payment/bca.webp" alt={bank} className="object-scale-down" />
                    </label>
                  </div>
                )}
              </For>
            </div>
          </div>
          <div>
            <p className="text-[8px] text-neutral-400 mb-2 md:text-[10px]">
              QRIS
            </p>
            <div className="grid grid-cols-3 gap-2 md:grid-cols-4">
              <div
                className="p-1 bg-white rounded-xs border border-primary-50 flex items-center gap-x-1"
              >
                <input type="radio" name="payment" id="QRIS" className="size-2" />
                <label htmlFor="QRIS" className="block">
                  <img src="/image/payment/qris.webp" alt="QRIS" className="object-scale-down" />
                </label>
              </div>
            </div>
          </div>
        </div>
        <div>
          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
            Detail Pembayaran
          </p>
          <div className="grid grid-cols-2 space-y-2.5 text-[10px] text-neutral-400 font-medium md:text-xs md:space-y-3">
            <p className="font-normal">Subtotal :</p>
            <p className="text-right">Rp. 50.000</p>
            <p className="font-normal">Service Fee :</p>
            <p className="text-right">Rp. 2.000</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>
          </div>
        </div>
      </div>
    </motion.div>
  )
 }
@@ -1,38 +0,0 @@
 import { Input } from "@imphnen-frontend-service/ui/atoms"
 import { cn } from "@imphnen-frontend-service/utils"
 import { motion } from "framer-motion"
 const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
 export const ProfileStep = () => {
  return (
    <motion.div
      className="bg-white px-6 py-5 rounded-md md:px-6"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
    >
      <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
        Langkah 3 dari 3
      </h3>
      <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
        Lengkapi profil kamu agar senpai dapat mengenal kamu lebih baik.
      </p>
      <div className="space-y-2.5 md:space-y-5">
        <div>
          <label className={labelClass}>Nomor WhatsApp</label>
          <Input className="min-w-full w-full" placeholder="080000000" />
        </div>
        <div>
          <label className={labelClass}>CV (Opsional)</label>
          <Input type="file" className="min-w-full w-full" />
        </div>
        <div>
          <label className={labelClass}>Portoflio (Opsional)</label>
          <Input className="min-w-full w-full" placeholder="Link Url" />
        </div>
      </div>
    </motion.div>
  )
 }
@@ -1,55 +0,0 @@
 import { For } from "@imphnen-frontend-service/utils"
 import { motion } from "framer-motion"
 const PAYMENT_STEP = [
  'Buka aplikasi e-wallet atau m-banking kamu',
  'Cari fitur bayar menggunakan QRIS',
  'Scan kode QR di samping',
  'Konfimasi pembayaran, dan proses selesai.'
 ]
 export const QrisPaymentStep = () => {
  return (
    <motion.div
      className="bg-white px-6 py-5 rounded-md md:flex md:justify-between md:gap-8"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
    >
      <div className="mb-7 md:mb-0">
        <h3 className="text-xs font-semibold mb-4 text-neutral-600 text-center md:text-start">
          Silahkan ikuti instruksi pembayaran di bawah ini
        </h3>
        <p className="text-[10px] text-neutral-400 mb-1.5">
          Cara melakukan pembayaran
        </p>
        <ul className="list-decimal pl-2.5 mb-4 md:mb-7">
          <For data={PAYMENT_STEP}>
            {(step, index) => (
              <li key={index} className="text-[10px] text-neutral-400 leading-tight font-medium">
                {step}
              </li>
            )}
          </For>
        </ul>
        <div className="text-center md:text-start">
          <p className="text-[10px] text-neutral-400 mb-1.5 font-medium md:text-xs">
            Biaya yang harus dibayarkan
          </p>
          <p className="text-xs font-semibold text-neutral-700 md:text-[15px]">Rp. 52.000</p>
        </div>
      </div>
      <div>
        <p className="text-[10px] text-neutral-400 mb-2 font-medium text-center md:text-xs">
          QR Code Pembayaran
        </p>
        <div className="bg-primary-50 p-2.5 rounded-lg size-[120px] mx-auto md:size-[142px] md:me-0">
          <img src="/image/sample-qrcode.webp" alt="QR Code" className="w-full" />
        </div>
      </div>
    </motion.div>
  )
 }
@@ -1,56 +0,0 @@
 import { Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
 import { cn } from "@imphnen-frontend-service/utils"
 import { motion } from "framer-motion"
 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]')
 export const ScheduleStep = () => {
  return (
    <motion.div
      className="bg-white px-6 py-5 rounded-md md:px-6"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
    >
      <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
        Langkah 2 dari 3
      </h3>
      <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
        Pilih jadwal sesuai preferensi kamu & siapkan pertanyaanmu
      </p>
      <div className="grid gap-2.5 md:grid-cols-2 md:gap-5">
        <div>
          <label className={labelClass}>Tanggal</label>
          <Input type="date" className="min-w-full w-full" />
        </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>
    </motion.div>
  )
 }
@@ -1,33 +0,0 @@
 import { CheckOutlined } from "@ant-design/icons"
 import { cn } from "@imphnen-frontend-service/utils"
 import { motion } from "framer-motion"
 export const SuccessStep = () => {
  return (
    <motion.div
      className="pb-6 rounded-md md:pb-8"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
    >
      <h2 className="text-[15px] font-semibold mb-3 text-primary-500 text-center md:text-[19px] md:mb-7 xl:text-[23px] xl:mb-8">
        Booking Senpai Berhasil
      </h2>
      <div
        className={cn(
          "mb-3 flex justify-center items-center mx-auto size-[60px] bg-green-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">
          <CheckOutlined className="text-xl md:text-3xl xl:text-5xl" />
        </div>
      </div>
      <p className="text-[10px] text-neutral-400 text-center md:text-xs md:max-w-[220px] md:mx-auto xl:text-[15px]">
        Untuk detail dan instruksi berikutnya dapat dilihat di dashboard pada halaman booking
      </p>
    </motion.div>
  )
 }
@@ -1,82 +0,0 @@
 import { CheckOutlined } from "@ant-design/icons"
 import { cn, For, Show } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
 import { motion } from "framer-motion"
 import { TOPICS } from "../../../sections/topics"
 type Props = {
  selectedTopics: number[]
  setSelectedTopics: (topics: number[]) => void
 }
 export const TopicStep: FC<Props> = ({ selectedTopics, setSelectedTopics }) => {
  const handleSelectTopic = (topicId: number) => {
    if (selectedTopics.includes(topicId)) {
      setSelectedTopics(selectedTopics.filter((id) => id !== topicId))
    } else {
      setSelectedTopics([...selectedTopics, topicId])
    }
  }
  return (
    <>
      <motion.div
        className="mb-6 flex items-center gap-x-4 bg-white rounded-md overflow-hidden shadow/5 md:gap-x-10"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 20 }}
      >
        <div className="w-16 aspect-4/5 overflow-hidden md:w-[134px] xl:w-[140px]">
          <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
        </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.
          </h3>
          <p className="text-[10px] line-clamp-2 text-neutral-600 md:text-[15px] xl:text-[19px]">
            UI Designer at Oray orayan Studios
          </p>
        </div>
      </motion.div>
      <motion.div
        className="bg-white p-5 rounded-md shadow/5 md:px-6"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 20 }}
      >
        <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
          Langkah 1 dari 3
        </h3>
        <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
          Pilih topik yang ingin kamu diskusikan dengan Senpai kamu~
        </p>
        <div className="grid gap-3 md:grid-cols-2 md:content-center">
          <For data={TOPICS}>
            {(topic) => (
              <div
                key={topic.id}
                className={cn(
                  "relative px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium cursor-pointer",
                  "md:text-xs xl:text-xs xl:font-semibold",
                  selectedTopics.includes(topic.id) && "bg-primary-50 border-primary-200"
                )}
                onClick={() => handleSelectTopic(topic.id)}
              >
                <span>{topic.icon} </span>
                <span>{topic.name}</span>
                <Show condition={selectedTopics.includes(topic.id)}>
                  <div className="absolute top-2 right-2 bg-primary-500 size-[14px] rounded-sm flex justify-center items-center text-white">
                    <CheckOutlined />
                  </div>
                </Show>
              </div>
            )}
          </For>
        </div>
      </motion.div>
    </>
  )
 }
@@ -1,55 +0,0 @@
 import { For } from "@imphnen-frontend-service/utils"
 import { motion } from "framer-motion"
 const PAYMENT_STEP = [
  'Buka aplikasi e-wallet atau m-banking kamu',
  'Pergi ke fitur transfer via Virtual Account',
  'Pilih bank dan kode VA sesuai dengan yang ada pada halaman ini',
  'Konfimasi pembayaran, dan proses selesai.'
 ]
 export const VAPaymentStep = () => {
  return (
    <motion.div
      className="bg-white px-6 py-5 rounded-md md:flex md:items-center md:gap-11"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
    >
      <div className="mb-6 md:mb-0">
        <h3 className="text-xs font-semibold mb-4 text-neutral-600 text-center md:text-start">
          Silahkan ikuti instruksi pembayaran di bawah ini
        </h3>
        <p className="text-[10px] text-neutral-400 mb-1.5">
          Cara melakukan pembayaran
        </p>
        <ul className="list-decimal pl-2.5">
          <For data={PAYMENT_STEP}>
            {(step, index) => (
              <li key={index} className="text-[10px] text-neutral-400 leading-tight font-medium">
                {step}
              </li>
            )}
          </For>
        </ul>
      </div>
      <div className="text-center md:text-start">
        <div className="w-max mx-auto mb-3 md:ms-0 md:mb-4">
          <img src="/image/payment/bca.webp" alt="VA BCA" className="h-5 w-auto" />
        </div>
        <p className="text-[10px] text-neutral-400 mb-1 font-medium md:text-xs">
          Kode Virtual Account
        </p>
        <p className="text-xs font-semibold text-neutral-700 mb-1.5 md:text-[15px]">
          8091239861969812
        </p>
        <p className="text-[8px] text-neutral-400 md:text-[10px]">
          A/N Unknown
        </p>
      </div>
    </motion.div>
  )
 }
@@ -1,33 +0,0 @@
 import { cn, For } from "@imphnen-frontend-service/utils"
 const EDUCATION = [
  { name: 'Universitas Widyabakti', major: 'Intern Front End', duration: '2 Months', range: 'Oct 2024 - Present' },
  { name: 'SMKN 99 Banjaran', major: 'Rekayasa Perangkat Lunak', duration: '6 Months', range: 'May 2024 - Oct 2024' },
 ]
 export const EducationSection = () => {
  return (
    <div className="px-7 py-8 rounded-md shadow-md">
      <h2 className="text-xs font-semibold mb-5 md:text-[15px] xl:text-[19px]">Education</h2>
      <div className="space-y-4 divide-y">
        <For data={EDUCATION}>
          {(item, index) => (
            <div key={index} className={cn("flex items-center gap-x-4", index !== EDUCATION.length - 1 && "pb-4")}>
              <div className="rounded-full size-6 bg-neutral-200 md:size-7 xl:size-8"></div>
              <div className='flex-1 text-[10px] font-medium'>
                <p className="text-neutral-800 md:text-xs xl:text-[15px]">{item.name}</p>
                <p>
                  <span className="text-neutral-600 xl:text-xs">{item.major}</span>
                  <span className="text-neutral-300"> · </span>
                  <span className="text-neutral-400 font-normal">{item.duration}</span>
                  <span className="text-neutral-300"> · </span>
                  <span className="text-neutral-400 font-normal xl:font-medium">{item.range}</span>
                </p>
              </div>
            </div>
          )}
        </For>
      </div>
    </div>
  )
 }
@@ -1,34 +0,0 @@
 import { cn, For } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
 const EXPERIENCE = [
  { name: 'Sunday.com', position: 'Intern Front End', duration: '2 Months', range: 'Oct 2024 - Present' },
  { name: 'CodeX Digital', position: 'Intern Front End', duration: '6 Months', range: 'May 2024 - Oct 2024' },
 ]
 export const ExperienceSection: FC = () => {
  return (
    <div className="px-7 py-8 rounded-md shadow-md">
      <h2 className="text-xs font-semibold mb-5 md:text-[15px] xl:text-[19px]">Experience</h2>
      <div className="space-y-4 divide-y">
        <For data={EXPERIENCE}>
          {(item, index) => (
            <div key={index} className={cn("flex items-center gap-x-4", index !== EXPERIENCE.length - 1 && "pb-4")}>
              <div className="rounded-full size-6 bg-neutral-200 md:size-7 xl:size-8"></div>
              <div className='flex-1 text-[10px] font-medium'>
                <p className="text-neutral-800 md:text-xs xl:text-[15px]">{item.name}</p>
                <p>
                  <span className="text-neutral-600 xl:text-xs">{item.position}</span>
                  <span className="text-neutral-300"> · </span>
                  <span className="text-neutral-400 font-normal">{item.duration}</span>
                  <span className="text-neutral-300"> · </span>
                  <span className="text-neutral-400 font-normal xl:font-medium">{item.range}</span>
                </p>
              </div>
            </div>
          )}
        </For>
      </div>
    </div>
  )
 }
@@ -1,93 +0,0 @@
 import { StarFilled } from "@ant-design/icons"
 import { Button } from "@imphnen-frontend-service/ui/atoms"
 import { cn, For } from "@imphnen-frontend-service/utils"
 type Props = {
  onBook: () => void
 }
 export const ProfileSection: React.FC<Props> = ({ onBook }) => {
  return (
    <div className="bg-white px-4 py-5 space-y-6 md:px-8 md:pt-6 md:pb-0 xl:space-y-0 xl:py-[30px] xl:flex xl:gap-x-9 xl:justify-between">
      <div
        className={cn(
          "flex flex-col items-center justify-center",
          "md:flex-row md:justify-start md:gap-x-8 md:items-start",
          "xl:items-center xl:gap-x-10",
        )}
      >
        <div
          className={cn(
            "mb-5 h-20 w-auto aspect-4/5 rounded-sm overflow-hidden",
            "md:aspect-33/40 md:h-40 md:rounded-md md:border md:border-primary-50 md:mb-0",
            "xl:aspect-5/6 md:h-60 md:rounded-lg"
          )}
        >
          <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
        </div>
        <div className="md:max-w-[242px] xl:max-w-[306px]">
          <h1
            className={cn(
              "mb-1 text-[15px] font-semibold text-center leading-snug",
              "md:text-[19px] md:mb-2 md:text-start xl:text-[23px]",
            )}
          >
            Muhammad Firdaus Oi Oi Oi, S.H., M.H.
          </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
          </p>
          <div className="flex items-center gap-x-2.5 w-full max-w-max border border-primary-50 p-1.5 rounded-md mx-auto md:ms-0">
            <div
              className="bg-gradient-to-tr from-primary-500 to-primary-200 rounded-sm text-white size-5 flex justify-center items-center xl:size-[29.4px]"
            >
              <StarFilled className="text-xs xl:text-sm" />
            </div>
            <div>
              <p className="text-[10px] font-medium mb-1 text-neutral-800 xl:text-xs">Excelent Sensei</p>
              <p className="text-[8px] text-neutral-600 xl:text-[10px]">4.8/5.0</p>
            </div>
          </div>
        </div>
      </div>
      <div className="flex flex-col gap-y-3 xl:gap-y-4 xl:max-w-[402px]">
        <div>
          <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Expertise</h2>
          <div className="p-4 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-3">
            <For data={['UI Design', 'UX Reseacrh']}>
              {(item) => (
                <div key={item} className="bg-primary-300 text-primary-600 px-3 py-2 rounded-md text-[10px] md:font-medium xl:text-xs xl:font-semibold">
                  {item}
                </div>
              )}
            </For>
          </div>
        </div>
        <div>
          <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Soft Skills</h2>
          <div className="p-4 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-3">
            <For data={['Design Thinking', 'Communication', 'Problem Solving', '19:00 WIB']}>
              {(item) => (
                <div key={item} className="bg-primary-300 text-primary-600 px-3 py-2 rounded-md text-[10px] md:font-medium xl:text-xs xl:font-semibold">
                  {item}
                </div>
              )}
            </For>
          </div>
        </div>
      </div>
      <div className="hidden md:flex xl:hidden justify-between">
        <div>
          <p className="text-primary-500 text-[15px] font-semibold">Jum, 4 April 2025</p>
          <p className="text-neutral-500 text-xs font-medium">Jum, 4 April 2025</p>
        </div>
        <Button type="button" size="sm" onClick={onBook}>
          Book Your Senpai!
        </Button>
      </div>
    </div>
  )
 }
@@ -1,75 +0,0 @@
 import { Button } from "@imphnen-frontend-service/ui/atoms"
 import { cn, For } from "@imphnen-frontend-service/utils"
 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
 }
 export const SenpaiScheduleSection: FC<Props> = ({ onBook }) => {
  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"
                  )}
                >
                  {item.availableCount} slot tersisa
                </p>
              </div>
              <div className="flex gap-x-3">
                <For data={item.schedule}>
                  {(schedule, index) => (
                    <div
                      key={index}
                      className="bg-primary-300 text-primary-600 px-3 py-2 text-xs rounded-md font-semibold"
                    >
                      {schedule.time}
                    </div>
                  )}
                </For>
              </div>
            </div>
          )}
        </For>
        <hr className="border-primary-200" />
        <Button type="button" size="sm" className="w-full" onClick={onBook}>
          Book Your Senpai!
        </Button>
      </div>
    </div>
  )
 }
@@ -1,34 +0,0 @@
 import { StarFilled } from "@ant-design/icons";
 import { For } from "@imphnen-frontend-service/utils";
 import { FC } from "react";
 const SENPAI_STATISTIC = [
  { name: 'Total Sessions', count: 8 },
  { name: 'Mentee Impact', count: 1000 },
  { name: 'Response Time', count: '30 Minute' }
 ]
 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>
      <div className="grid gap-4 xl:flex">
        <For data={SENPAI_STATISTIC}>
          {(item, index) => (
            <div key={index} className="px-2.5 py-2 border border-primary-50 rounded-md shadow flex items-center gap-x-2.5">
              <div
                className="bg-gradient-to-tr from-primary-500 to-primary-200 rounded-sm text-white size-7 flex justify-center items-center xl:size-[29.4px]"
              >
                <StarFilled className="text-sm" />
              </div>
              <div>
                <p className="text-[10px] text-neutral-600 font-medium md:text-xs xl:font-semibold">{item.count}</p>
                <p className="text-[8px] text-neutral-800 md:text-[10px]">{item.name}</p>
              </div>
            </div>
          )}
        </For>
      </div>
    </div>
  )
 };
@@ -1,33 +0,0 @@
 import { For } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
 export const TOPICS = [
  { id: 1, icon: '💼', name: 'Career & Self Development' },
  { id: 2, icon: '🏢', name: 'Industry Insight' },
  { id: 3, icon: '🗂️', name: 'Project Management & IT Tools' },
  { id: 4, icon: '🖥️', name: 'Basic IT' },
  { id: 5, icon: '💻', name: 'Programming/Software Dev' },
  { id: 6, icon: '🗃️', name: 'Data & Database' },
  { id: 7, icon: <span className="font-bold text-primary-500">AI</span>, name: 'AI Tips' }
 ]
 export const TopicsSection: FC = () => {
  return (
    <div>
      <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Topics</h2>
      <div className="p-5 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-2.5">
        <For data={TOPICS}>
          {(item, index) => (
            <div
              key={index}
              className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium"
            >
              <span>{item.icon} </span>
              <span>{item.name}</span>
            </div>
          )}
        </For>
      </div>
    </div>
  )
 }
@@ -1,52 +0,0 @@
 import { FC, useState } from 'react'
 import { ProfileSection } from './_components/sections/profile'
 import { StatisticsSection } from './_components/sections/senpai-statistics'
 import { TopicsSection } from './_components/sections/topics'
 import { ExperienceSection } from './_components/sections/experience'
 import { EducationSection } from './_components/sections/education'
 import { SenpaiScheduleSection } from './_components/sections/senpai-schedule'
 import { Button } from '@imphnen-frontend-service/ui/atoms'
 import { AppointmentModal } from './_components/modals/appointment'
 export const Components: FC = () => {
  const [open, setOpen] = useState(false)
  return (
    <main>
      <section className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20">
        <div className="max-w-7xl mx-auto space-y-8 md:bg-white xl:bg-transparent">
          <ProfileSection onBook={() => setOpen(true)} />
          <Button type="button" size="sm" className="w-full md:hidden" onClick={() => setOpen(true)}>
            Book Your Senpai!
          </Button>
          <div className="bg-white px-4 py-5 md:px-8 md:pb-6 md:pt-0 xl:py-7 xl:flex xl:gap-x-10">
            <div className="space-y-10 md:space-y-7 xl:flex-1">
              <StatisticsSection />
              <TopicsSection />
              <div className="px-6 py-8 rounded-md shadow-md">
                <h2 className="text-xs text-neutral-800 font-semibold mb-5 md:text-[15px] xl:text-[19px]">Senpai Resume</h2>
                <p className="text-[10px] font-medium text-neutral-600 text-pretty md:text-[15px]">
                  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. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
                </p>
              </div>
              <ExperienceSection />
              <EducationSection />
            </div>
            <div className="hidden xl:block xl:w-[400px]">
              <SenpaiScheduleSection onBook={() => setOpen(true)} />
            </div>
          </div>
        </div>
      </section>
      <AppointmentModal open={open} setOpen={setOpen} />
    </main>
  )
 }
 export default Components
@@ -1,70 +0,0 @@
 import { cn } from '@imphnen-frontend-service/utils';
 import { FC, useRef } from 'react';
 import { motion, useInView, Variants } from 'framer-motion';
 export const BannerSection: FC = () => {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
      },
    },
  }
  const childVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.4,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  }
  return (
    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20">
      <motion.div
        className={cn(
          "relative max-w-7xl mx-auto bg-white p-6 rounded-lg overflow-hidden shadow-md",
          "md:flex md:justify-between md:items-center md:px-5 md:rounded-xl lg:px-16 lg:py-10",
        )}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
      >
        <motion.div
          className="hidden absolute -left-9 -top-24 w-[17rem] md:block lg:w-[28rem] lg:-left-14 lg:-top-52"
          initial={{ x: -120, opacity: 0, rotate: -6 }}
          animate={{ x: 0, opacity: 1, rotate: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          <img src="/image/mentoring-banner.webp" alt="" className="w-full" />
        </motion.div>
        <motion.div
          className="text-center md:text-start md:max-w-[calc(100%-14rem)] md:ms-auto lg:max-w-[calc(100%-20rem)]"
          variants={containerVariants}
          initial="hidden"
          animate={isInView ? 'visible' : 'hidden'}
          viewport={{ once: true }}
        >
          <motion.h1 className="mb-4 text-xl font-semibold text-primary-500 leading-tight md:text-2xl lg:text-5xl lg:font-bold lg:mb-6" variants={childVariants}>
            Find your perfect sensei
          </motion.h1>
          <motion.p className="text-xs font-semibold text-neutral-500 md:text-[15px] md:font-medium lg:text-xl" variants={childVariants}>
            Di sini, kamu nggak cuma grinding sendirian—sensei dari dunia nyata siap membimbingmu, dan AI mentor bakal jadi support system terbaikmu. Saatnya jadi protagonist dalam perjalanan karier IT-mu!
          </motion.p>
        </motion.div>
      </motion.div>
    </section>
  )
 }
@@ -1,41 +0,0 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
 export const MentorCard: FC = () => {
  return (
    <div className="p-2.5 rounded-md bg-white shadow flex gap-x-4 items-start md:p-4 md:flex-col md:rounded-lg md:gap-y-4">
      <div className="size-[60px] rounded-md overflow-hidden md:w-full md:h-auto md:aspect-square">
        <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
      </div>
      <div>
        <Button variant="text" size="sm" className="bg-primary-100 h-auto px-1.5 py-1 text-[8px] font-normal mb-2 hover:bg-primary-100 md:text-[10px] md:font-medium md:mb-4">
          3-5 Years Experience
        </Button>
        <h2 className="mb-1">
          <Link to="/mentoring/detail" className="text-xs font-semibold text-primary-500 md:text-[15px] md:font-semibold lg:text-[19px]">
            Fullname
          </Link>
        </h2>
        <p className="text-[8px] text-neutral-500 mb-3 md:text-[10px] md:font-medium md:mb-4 lg:text-xs">
          Full Stack Enjoyer at name company
        </p>
        <div>
          <p className="text-[8px] text-neutral-500 mb-1 md:mb-2 lg:text-[10px]">Soft Skills :</p>
          <div className="space-x-2">
            <Button variant="text" size="sm" className="bg-primary-200 h-auto px-1.5 py-1 text-[8px] font-normal hover:bg-primary-200 lg:text-[10px]">
              Communication
            </Button>
            <Button variant="text" size="sm" className="bg-primary-200 h-auto px-1.5 py-1 text-[8px] font-normal hidden hover:bg-primary-200 md:inline-block lg:text-[10px]">
              Communication
            </Button>
            <Button variant="text" size="sm" className="h-auto px-1.5 py-1 text-[8px] font-normal text-neutral-500 hover:bg-transparent lg:text-[10px]">
              +2
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
 }
@@ -1,73 +0,0 @@
 import { CloudServerOutlined, CodeOutlined, DatabaseOutlined, ProjectOutlined, TabletOutlined } from '@ant-design/icons'
 import { Icon } from '@iconify/react'
 import { Button } from '@imphnen-frontend-service/ui/atoms'
 import { For } from '@imphnen-frontend-service/utils'
 import { FC, ReactElement, useRef } from 'react'
 import { motion, useInView, Variants } from 'framer-motion'
 const TOPICS: {
  name: string
  icon: React.ReactNode
 }[] = [
  { name: 'UI/UX & Design', icon: <TabletOutlined /> },
  { name: 'Software/Web Dev', icon: <CodeOutlined /> },
  { name: 'Data & AI', icon: <DatabaseOutlined /> },
  { name: 'Cloud & DevOps', icon: <CloudServerOutlined /> },
  { name: 'Cybersecurity', icon: <Icon icon="mage:security-shield" /> },
  { name: 'IT & Networking', icon: <Icon icon="carbon:data-structured" /> },
  { name: 'Project Management', icon: <ProjectOutlined /> },
  { name: 'QA & Testing', icon: <Icon icon="carbon:exam-mode" /> }
 ]
 export const Topics: FC = (): ReactElement => {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.3,
        delay: 0.4,
      },
    },
  }
  const childVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.4,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  }
  return (
    <div ref={ref}>
      <motion.div
        className="grid grid-cols-4 gap-6 px-3 md:px-12 md:gap-x-10 md:gap-y-14 lg:grid-cols-8 lg:px-0"
        variants={containerVariants}
        initial="hidden"
        animate={isInView ? 'visible' : 'hidden'}
      >
        <For data={TOPICS}>
          {(topic) => (
            <motion.div key={topic.name} className="flex flex-col items-center" variants={childVariants}>
              <Button variant="secondary" size='sm' className="size-7 mb-3 p-0 md:mb-4 md:size-8 md:text-base lg:size-10 lg:text-lg">
                {topic.icon}
              </Button>
              <p className="text-[8px] text-neutral-700 text-center break-words md:text-xs md:font-medium lg:text-[15px]">
                {topic.name}
              </p>
            </motion.div>
          )}
        </For>
      </motion.div>
    </div>
  )
 }
@@ -1,121 +0,0 @@
 import { FC, ReactElement, useRef, useState } from 'react';
 import { BannerSection } from './_components/banner-section';
 import { Topics } from './_components/topics';
 import { Input } from '@imphnen-frontend-service/ui/atoms';
 import { SearchOutlined } from '@ant-design/icons';
 import { For } from '@imphnen-frontend-service/utils';
 import { MentorCard } from './_components/mentor-card';
 import { Pagination } from '@imphnen-frontend-service/ui/molecules';
 import { getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from '@tanstack/react-table';
 import { motion, useInView, Variants } from 'framer-motion';
 const TEMP_DATA = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'John Doe' },
  { id: 3, name: 'John Doe' },
  { id: 4, name: 'John Doe' },
 ]
 export const Components: FC = (): ReactElement => {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 3,
  });
  const table = useReactTable({
    data: TEMP_DATA,
    columns: [],
    state: { pagination },
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onPaginationChange: setPagination,
  });
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.3,
      },
    },
  }
  const childVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.4,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  }
  return (
    <main>
      <BannerSection />
      <section className="w-full px-8 md:px-[60px] md:pb-[60px] lg:px-20">
        <motion.div
          className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-4xl"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.4 }}
        >
          <div className="mb-10 md:px-6 lg:mb-[60px]">
            <motion.h1
              className="text-center text-[15px] text-primary-500 font-semibold mb-8 md:text-2xl md:mb-10 lg:text-3xl lg:mb-[60px]"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.4, delay: 0.3 }}
            >
              Choose Your Topics
            </motion.h1>
            <Topics />
          </div>
          <motion.div ref={ref} className="md:px-6">
            <motion.div
              className="relative mb-6 md:px-12 lg:px-0 lg:w-[480px] lg:mx-auto"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.4 }}
            >
              <Input
                placeholder="Cari berdasarkan nama, posisi/peran"
                className="relative min-w-full w-full"
              />
              <SearchOutlined className="absolute right-2.5 top-1/2 -translate-y-1/2 text-primary-500 size-2.5 cursor-text md:me-12 lg:me-0" />
            </motion.div>
            <motion.div
              className="grid gap-2 mb-10 md:grid-cols-2 md:gap-6 lg:grid-cols-4"
              variants={containerVariants}
              initial="hidden"
              animate={isInView ? 'visible' : 'hidden'}
            >
              <For data={Array.from({ length: 8 })}>
                {(_, index) => (
                  <motion.div key={index} variants={childVariants}>
                    <MentorCard />
                  </motion.div>
                )}
              </For>
            </motion.div>
            <Pagination table={table} />
          </motion.div>
        </motion.div>
      </section>
    </main>
  )
 }
 export default Components
@@ -1,141 +0,0 @@
 import { MailOutlined } from "@ant-design/icons";
 import { Icon } from "@iconify/react";
 import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { cn } from "@imphnen-frontend-service/utils";
 import { FC, useRef } from "react";
 import { motion, useInView, Variants } from "framer-motion";
 export const Collaborate: FC = () => {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
      },
    },
  }
  const childVariants: Variants = {
    hidden: { opacity: 0, scale: 0 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.4,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  }
  return (
    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:pt-0 lg:pb-16 lg:px-20">
      <div className="max-w-7xl py-6 mx-auto md:flex md:gap-[60px] md:items-center xl:py-14">
        <div className="relative mb-8 flex items-center justify-center h-[124px] md:mb-0 md:h-[180px] md:w-[202px] xl:h-[380px] xl:w-[428px]">
          <motion.div 
            className="relative"
            variants={containerVariants}
            animate={isInView ? "visible" : "hidden"}
          >
            <motion.div
              className="size-[104px] bg-primary-200 rounded-full flex justify-between items-center md:size-[148px] xl:size-[304px]"
              initial={{ scale: 0 }}
              whileInView={{ scale: 1 }}
              transition={{ duration: 0.5 }}
              viewport={{ once: true }}
            >
              <div
                className="size-[88px] rounded-full bg-gradient-to-bl from-primary-500 to-primary-300 mx-auto md:size-[132px] xl:size-[276px]"
              />
            </motion.div>
            <motion.div
              className="absolute bg-white shadow rounded-md -top-3 -right-2 p-1 rotate-6 xl:p-2.5 xl:rounded-lg"
              variants={childVariants}
            >
              <Icon icon="bi:terminal" className="text-primary-500 size-4 md:size-[18px] xl:size-9" />
            </motion.div>
            <motion.div
              className="absolute bg-white shadow rounded-md top-1/3 -left-6 p-1.5 -rotate-10 xl:p-2.5 xl:-left-12"
              variants={childVariants}
            >
              <Icon icon="ion:git-branch-outline" className="text-primary-500 size-6 md:size-[30px] xl:size-14" />
            </motion.div>
            <motion.div
              className="absolute bg-white shadow rounded-md top-3/5 -right-3 p-1 xl:p-2 xl:-right-6"
              variants={childVariants}
            >
              <Icon icon="bi:github" className="size-[18px] md:size-[26px] xl:size-[52px]" />
            </motion.div>
          </motion.div>
          <motion.div
            className="h-full w-auto aspect-3/5 absolute inset-0 mx-auto bg-contain bg-no-repeat"
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.5 }}
          >
            <img
              src="/image/anime-girl.webp"
              alt="Anime Girl"
              style={{
                opacity: "1",
                maskImage: "linear-gradient(to bottom, black 80%, transparent 100%)",
              }}
            />
          </motion.div>
        </div>
        <motion.div
          className={cn(
            "px-6 py-5 rounded-lg bg-white border-2 border-primary-200 text-center text-primary-500 shadow",
            "md:flex-1 md:text-start xl:py-8 xl:px-12"
          )}
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          <motion.h1
            className="text-[15px] font-semibold mb-3 md:text-[23px] xl:text-[37px]"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            Let's Collaborate!
          </motion.h1>
          <motion.p
            className="text-xs font-medium leading-tight mb-6 md:text-[15px] xl:text-[19px]"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            Klik tombol di bawah ini untuk mendaftar sebagai partner resource dan bantu membangun dunia IT yang lebih seru!
          </motion.p>
          <motion.div
            className="flex items-center mx-auto md:ms-0"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <Button type="button" size="sm" className="flex items-center gap-2">
              <span>Collaboration Now</span>
              <MailOutlined />
            </Button>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
 }
@@ -1,103 +0,0 @@
 import { FC, useRef } from "react";
 import { motion, useInView, Variants } from "framer-motion";
 export const Contribute: FC = () => {
  const ref = useRef(null)
  const inView = useInView(ref, { once: true, amount: 0.2 })
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.8,
      },
    },
  }
  const childVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.4,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  }
  return (
    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20 xl:py-20">
      <div className="relative max-w-7xl mx-auto xl:py-14">
        <div className="md:max-w-[514px] mx-auto">
          <motion.h1
            className="font-semibold text-[19px] text-primary-500 mb-4 text-center leading-tight md:text-[37px] md:mb-6 xl:text-[46px] xl:font-bold"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            Want to contribute? <br /> help senpai build the IT ecosystem!
          </motion.h1>
          <motion.p
            className="text-center text-xs text-neutral-500 md:text-[15px] md:font-medium md:w-[395px] md:mx-auto xl:text-[19px] xl:w-full"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            Punya platform, artikel, atau tool keren untuk membantu mentee belajar IT? Bergabunglah dengan kami dan jadilah bagian dari ekosistem pembelajaran yang lebih besar!
          </motion.p>
        </div>
        <motion.div
          className="hidden xl:block absolute inset-0 text-neutral-800"
          variants={containerVariants}
          initial="hidden"
          animate={inView ? "visible" : "hidden"}
        >
          <motion.div
            className="absolute top-0 left-0 text-[23px] font-semibold bg-white border rounded-md px-5 py-2 shadow-lg -rotate-6"
            variants={childVariants}
          >
            Learning Platform
          </motion.div>
          <motion.div
            className="absolute top-0 right-36 text-2xl font-semibold bg-white border rounded-md px-5 py-2 shadow-lg rotate-3"
            variants={childVariants}
          >
            AI Tools
          </motion.div>
          <motion.div
            className="absolute top-1/3 left-24 text-[23px] font-semibold bg-white border rounded-md px-5 py-2 shadow-lg"
            variants={childVariants}
          >
            UI Assets
          </motion.div>
          <motion.div
            className="absolute top-1/3 right-0 text-[27.38px] font-semibold bg-white border rounded-md px-6 py-2 shadow-lg -rotate-3"
            variants={childVariants}
          >
            Refferences
          </motion.div>
          <motion.div
            className="absolute top-2/3 left-4 text-[31.62px] font-semibold bg-white border rounded-md px-6 py-2.5 shadow-lg leading-tight rotate-1"
            variants={childVariants}
          >
            Coding <br />Playground
          </motion.div>
          <motion.div
            className="absolute top-[70%] right-16 text-2xl font-semibold bg-white border rounded-md px-5 py-2.5 shadow-lg leading-tight rotate-6"
            variants={childVariants}
          >
            Challenge <br />Platform
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
 }
@@ -1,104 +0,0 @@
 import { FC, useRef } from "react";
 import { motion, useInView, Variants } from "framer-motion";
 export const WorkWithUs: FC = () => {
  const ref = useRef(null)
  const inView = useInView(ref, { once: true, amount: 0.2 })
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.8,
      },
    },
  }
  const childVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.4,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  }
  return (
    <section ref={ref} className="w-full px-8 md:px-[60px] lg:py-16 lg:px-20">
      <div className="max-w-7xl mx-auto">
        <motion.h1
          className="text-[19px] font-semibold text-primary-500 mb-5 text-center md:text-[23px] md:mb-7 xl:text-[37px] xl:mb-10"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          Why Work with Us
        </motion.h1>
        <motion.div
          className="grid gap-4 md:grid-cols-3 md:gap-5 xl:grid-flow-col xl:grid-cols-2 xl:grid-rows-2 xl:gap-6"
          variants={containerVariants}
          initial="hidden"
          animate={inView ? "visible" : "hidden"}
        >
          <motion.div
            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 md:py-8 xl:row-span-2 xl:px-6 xl:flex xl:flex-col xl:justify-end"
            variants={childVariants}
          >
            <div className="h-[60px] w-full mb-6 xl:h-auto xl:w-full xl:mb-8">
              <img src="/image/work-with-us/exposure.webp" alt="Exposure" className="h-full w-auto object-scale-down mx-auto" />
            </div>
            <div className="text-center md:px-6 xl:text-start xl:px-0">
              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px] md:px-4 xl:px-0">
                Exposure Luas
              </h1>
              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px] md:px-1 xl:px-0">
                Web kamu akan tampil di halaman resource kami!
              </p>
            </div>
          </motion.div>
          <motion.div
            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 md:py-8 xl:flex xl:items-center xl:px-6 xl:py-2 xl:gap-8"
            variants={childVariants}
          >
            <div className="h-[60px] w-full mb-6 xl:w-auto xl:h-[124px] xl:mb-0">
              <img src="/image/work-with-us/handshake.webp" alt="Handshake" className="h-full w-auto object-scale-down mx-auto" />
            </div>
            <div className="text-center md:px-6 xl:text-start">
              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px]">
                Bantu Generasi Baru
              </h1>
              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px]">
                Bagikan ilmu dan bantu lebih banyak orang berkembang!
              </p>
            </div>
          </motion.div>
          <motion.div
            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 xl:flex xl:items-center xl:px-6 xl:py-2 xl:gap-8"
            variants={childVariants}
          >
            <div className="h-[60px] w-full mb-6 xl:w-auto xl:h-[124px] xl:mb-0">
              <img src="/image/work-with-us/networking.webp" alt="Networking" className="h-full w-auto object-scale-down mx-auto" />
            </div>
            <div className="text-center md:px-6 xl:text-start">
              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px] md:px-4 xl:px-0">
                Networking Komunitas
              </h1>
              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px] md:px-1 xl:px-0">
                Bertemu dengan para developer, mentor, dan inovator lainnya!
              </p>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
 }
@@ -1,14 +0,0 @@
 import { ReactElement } from "react";
 import { Contribute } from "./_components/contribute";
 import { WorkWithUs } from "./_components/work-with-us";
 import { Collaborate } from "./_components/collaborate";
 export default function Components(): ReactElement {
  return (
    <main>
      <Contribute />
      <WorkWithUs />
      <Collaborate />
    </main>
  )
 }
@@ -1,10 +0,0 @@
 import { Outlet, ScrollRestoration } from "react-router-dom";
 export default function RootLayout() {
  return (
    <>
      <Outlet />
      <ScrollRestoration />
    </>
  )
 }
@@ -0,0 +1,12 @@
 import { Navbar } from '@imphnen-frontend-service/ui/organisms';
 import { FC, ReactElement } from 'react';
 export const Components: FC = (): ReactElement => {
  return (
    <div className='bg-blue-50'>
      <Navbar />
    </div>
  );
 };
 export default Components;
@@ -16,8 +16,7 @@ const mappingPublicRoutes = [
  '/auth/new-password',
  '/auth/register-mentor',
  '/auth/register-mentor/pending',
-  '/auth/register-mentor/success',
+  '/auth/register-mentor/success'
  '/resources',
 ];
 const mappingRoutePermissions = [
@@ -75,11 +74,6 @@ const mappingRoutePermissions = [
  },
 ];
 const mappingPublicPrefixRoutes = [
  '/mentoring',
  '/articles',
 ]
 //TODO : Fix this later
 // const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
 //   const fallback = mappingRoutePermissions.find((route) =>
@@ -96,13 +90,6 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
  const token = session_token?.token?.access_token;
  const userPermissions =
    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
  // Allow to access the landing page without authentication
  // So, if the route prefix is in the mappingPublicPrefixRoutes, we return null
  // to indicate that we don't need to authenticate the user
  if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
    return null;
  }
  if (mappingPublicRoutes.includes(pathname)) {
    if (token) return redirect('/dashboard');
@@ -1,10 +0,0 @@
 version: '3.8'
 services:
  backoffice:
    build:
      context: .
      dockerfile: docker/backoffice.Dockerfile
    ports:
      - "3001:80"
    restart: unless-stopped
    container_name: backoffice
@@ -1,10 +0,0 @@
 version: '3.8'
 services:
  dimentorin:
    build:
      context: .
      dockerfile: docker/dimentorin.Dockerfile
    ports:
      - "3002:80"
    restart: unless-stopped
    container_name: dimentorin
@@ -1,10 +0,0 @@
 version: '3.8'
 services:
  gacha:
    build:
      context: .
      dockerfile: docker/gacha.Dockerfile
    ports:
      - "3003:80"
    restart: unless-stopped
    container_name: gacha
@@ -1,5 +1,4 @@
 export * from './button';
 export * from './input';
 export * from './textarea';
-export * from './select'
+export * from './select'
 export * from './toggle';
@@ -9,7 +9,7 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // Import
 import { cn } from '@imphnen-frontend-service/utils';
 import { Button } from '../button';
-type TInputType = 'text' | 'email' | 'number' | 'password' | 'file' | 'date' | 'time';
+type TInputType = 'text' | 'email' | 'number' | 'password' | 'file';
 type TInputSize = 'sm' | 'md' | 'lg';
 type Width = 'standard' | 'custom'
@@ -1 +0,0 @@
 export * from './toggle'
@@ -1,27 +0,0 @@
 import { cn } from "@imphnen-frontend-service/utils";
 import { DetailedHTMLProps, FC, HTMLAttributes } from "react";
 export type ToggleInputProps = DetailedHTMLProps<
  HTMLAttributes<HTMLInputElement>,
  HTMLInputElement
 > & {
  label?: string
  labelClassName?: string
 }
 export const ToggleInput: FC<ToggleInputProps> = ({ label, className, labelClassName, ...rest }) => {
  return (
    <label className={cn("flex items-center gap-5 cursor-pointer mb-8", className)}>
      <span className={cn("text-p3 text-gray-800 font-medium", labelClassName)}>{label}</span>
      <input type="checkbox" className="sr-only peer" {...rest} />
      <div
        className={cn(
          "w-14 h-7 bg-gray-300 rounded-3xl relative transition-colors",
          "peer-checked:bg-blue-600 peer-focus:outline peer-focus:outline-blue-500 peer-checked:[&>div]:translate-x-6.5",
        )}
      >
        <div className="absolute left-0.5 top-0.5 h-6 w-6 bg-white rounded-full shadow transition-transform peer-checked:translate-x-6.5" />
      </div>
    </label>
  );
 }
@@ -1,13 +1,9 @@
 import {
  AppstoreOutlined,
  AuditOutlined,
  BookOutlined,
  CommentOutlined,
  InboxOutlined,
  LogoutOutlined,
  ReloadOutlined,
  ScheduleOutlined,
  SettingOutlined,
  UsergroupAddOutlined,
  UserOutlined,
  UserSwitchOutlined,
@@ -15,53 +11,102 @@ import {
 import { Button } from '../../atoms';
 import { FC, ReactElement } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { cn, For, useSession } from '@imphnen-frontend-service/utils';
+import { useSession } from '@imphnen-frontend-service/utils';
 const MENUS = [
  { label: 'Dashboard & Set Gacha', href: '/dashboard', icon: <AppstoreOutlined className="text-[20px]" /> },
  { label: 'Dashboard - Dimentorin', href: '/dashboard-dimentorin', icon: <AppstoreOutlined className="text-[20px]" /> },
  { label: 'Gacha Roll', href: '/gacha-roll', icon: <ReloadOutlined className="text-[20px]" /> },
  { label: 'Permissions', href: '/permissions', icon: <UserSwitchOutlined className="text-[20px]" /> },
  { label: 'Roles', href: '/roles', icon: <UsergroupAddOutlined className="text-[20px]" /> },
  { label: 'Data Akun', href: '/accounts', icon: <UserOutlined className="text-[20px]" /> },
  { label: 'Validasi Transaksi', href: '/transactions', icon: <AuditOutlined className="text-[20px]" /> },
  { label: 'Data Pengiriman Hadiah', href: '/prizes', icon: <InboxOutlined className="text-[20px]" /> },
  { label: 'User - Dimentorin', href: '/users-dimentorin', icon: <UserSwitchOutlined className="text-[20px]" /> },
  { label: 'Session - Dimentorin', href: '/session-dimentorin', icon: <ScheduleOutlined className="text-[20px]" /> },
  { label: 'Content & Roadmap', href: '/roadmap-dimentorin', icon: <BookOutlined className="text-[20px]" /> },
  { label: 'Feedback & Review', href: '/feedback-review-dimentorin', icon: <CommentOutlined className="text-[20px]" /> },
  { label: 'Settings - Dimentorin', href: '/settings-dimentorin', icon: <SettingOutlined className="text-[20px]" /> },
 ]
 export const BackofficeSidebar: FC = (): ReactElement => {
  const { signOut } = useSession();
  const location = useLocation();
-  const isActive = (path: string) => {
+  const isActive = (path: string) => location.pathname.includes(path);
    if (path === '/dashboard' && location.pathname === '/dashboard-dimentorin') return false
    return location.pathname.includes(path)
  };
  return (
-    <aside className="sticky top-0 left-0 w-[280px] bg-white h-svh py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
+    <aside className="sticky top-0 left-0 w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
      <div className="flex flex-col gap-20 justify-between items-center">
        <img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />
-        <nav className="flex flex-col gap-4 w-full h-[calc(100svh-20rem)] overflow-y-auto">
+        <nav className="flex flex-col gap-4 w-full">
-          <For data={MENUS}>
+          <Link
-            {({ label, href, icon }) => (
+            to="/dashboard"
-              <Link
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
-                key={href}
+              isActive('/dashboard')
-                to={href}
+                ? 'bg-primary-500 text-white rounded-md'
-                className={cn(
+                : 'text-gray-700 hover:bg-gray-100'
-                  "flex items-center justify-items-start gap-3 px-[8px] py-[10px]",
+            }`}
-                  isActive(href) ? "bg-primary-500 text-white rounded-md" : "text-gray-700 hover:bg-gray-100"
+          >
-                )}
+            <AppstoreOutlined className="text-[20px]" />
-              >
+            <span className="text-p3 font-medium">Dashboard & Set Gacha</span>
-                {icon}
+          </Link>
-                <span className="text-p3 font-medium">{label}</span>
+
-              </Link>
+          <Link
-            )}
+            to="/gacha-roll"
-          </For>
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
              isActive('/gacha-roll')
                ? 'bg-primary-500 text-white rounded-md'
                : 'text-gray-700 hover:bg-gray-100'
            }`}
          >
            <ReloadOutlined className="text-[20px]" />
            <span className="text-p3 font-medium">Gacha Roll</span>
          </Link>
          <Link
            to="/permissions"
            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
              isActive('/permissions')
                ? 'bg-primary-500 text-white rounded-md'
                : 'text-gray-700 hover:bg-gray-100'
            }`}
          >
            <UserSwitchOutlined className="text-[20px]" />
            <span className="text-p3 font-medium">Permissions</span>
          </Link>
          <Link
            to="/roles"
            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
              isActive('/roles')
                ? 'bg-primary-500 text-white rounded-md'
                : 'text-gray-700 hover:bg-gray-100'
            }`}
          >
            <UsergroupAddOutlined className="text-[20px]" />
            <span className="text-p3 font-medium">Roles</span>
          </Link>
          <Link
            to="/accounts"
            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
              isActive('/accounts')
                ? 'bg-primary-500 text-white rounded-md'
                : 'text-gray-700 hover:bg-gray-100'
            }`}
          >
            <UserOutlined className="text-[20px]" />
            <span className="text-p3 font-medium">Data Akun</span>
          </Link>
          <Link
            to="/transactions"
            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
              isActive('/transactions')
                ? 'bg-primary-500 text-white rounded-md'
                : 'text-gray-700 hover:bg-gray-100'
            }`}
          >
            <AuditOutlined className="text-[20px]" />
            <span className="text-p3 font-medium">Validasi Transaksi</span>
          </Link>
          <Link
            to="/prizes"
            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
              isActive('/prizes')
                ? 'bg-primary-500 text-white rounded-md'
                : 'text-gray-700 hover:bg-gray-100'
            }`}
          >
            <InboxOutlined className="text-[20px]" />
            <span className="text-p3 font-medium">Data Pengiriman Hadiah</span>
          </Link>
        </nav>
      </div>
@@ -1,51 +0,0 @@
 import { cn } from "@imphnen-frontend-service/utils"
 import { Icon } from '@iconify/react'
 import { FC, ReactElement, ReactNode } from "react"
 import { Button } from "../../atoms"
 export type TBackofficeWrapperProps = {
  children: ReactNode
  title?: string
  className?: string
  classHeader?: string
  classTitle?: string
 }
 export const BackofficeWrapper: FC<TBackofficeWrapperProps> = ({
  children,
  title,
  className,
  classHeader,
  classTitle,
 }): ReactElement => {
  return (
    <main className={cn("w-full px-[48px] py-[40px] flex flex-col gap-8", className)}>
      <header className={cn("bg-white py-5 px-7 rounded-md shadow flex items-center justify-between", classHeader)}>
        <h1 className={cn("text-[19px] text-primary-500 font-semibold", classTitle)}>{title}</h1>
        <div className="flex items-center gap-x-6">
          <Button
            type="button"
            variant="secondary"
            className="max-h-full p-3"
          >
            <Icon icon="mdi:bell-outline" className="size-6" />
          </Button>
          <div className="flex items-center gap-x-6">
            <div className="text-neutral-600 font-medium">
              <p className="text-p3">Rizal Syaepulloh</p>
              <p className="text-label1">Super Admin</p>
            </div>
            <div className="size-12 rounded-full overflow-hidden">
              <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="size-full object-cover" />
            </div>
          </div>
        </div>
      </header>
      <section>
        {children}
      </section>
    </main>
  )
 }
@@ -1 +0,0 @@
 export * from './backoffice-wrapper';
@@ -6,12 +6,10 @@ import {
  flexRender,
  ColumnDef,
  Table,
  RowData,
 } from '@tanstack/react-table';
 import { Pagination } from '../../molecules';
 import React from 'react';
 import { cn } from '@imphnen-frontend-service/utils';
 interface DataTableProps<T> {
  data: T[];
@@ -20,7 +18,7 @@ interface DataTableProps<T> {
  pageSize?: number;
 }
-export const DataTable = <T extends RowData>({
+export const DataTable = <T,>({
  data,
  columns,
  pageSize = 9,
@@ -51,7 +49,7 @@ export const DataTable = <T extends RowData>({
                {headerGroup.headers.map((header) => (
                  <th
                    key={header.id}
-                    className={cn("py-4 px-5 font-normal first:rounded-l-lg last:rounded-r-lg", header?.column?.columnDef?.meta?.headerClassName)}
+                    className="py-4 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
                  >
                    {header.isPlaceholder
                      ? null
@@ -70,7 +68,7 @@ export const DataTable = <T extends RowData>({
                {row.getVisibleCells().map((cell, index) => (
                  <td
                    key={cell.id}
-                    className={cn("py-3 px-5 first:rounded-l-lg last:rounded-r-lg", cell?.column?.columnDef?.meta?.cellClassName)}
+                    className="py-3 px-5 first:rounded-l-lg last:rounded-r-lg"
                  >
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
@@ -1,2 +1 @@
 export * from './datatable';
 export * from './type.d';
@@ -1,8 +0,0 @@
 import "@tanstack/react-table"
 declare module "@tanstack/react-table" {
  interface ColumnMeta {
    headerClassName?: string
    cellClassName?: string
  }
 }
@@ -5,4 +5,3 @@ export * from './backoffice-sidebar';
 export * from './datatable';
 export * from './filter';
 export * from './controlled-field';
 export * from './backoffice-wrapper';
@@ -22,7 +22,6 @@
        "axios": "^1.8.3",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "dayjs": "^1.11.13",
        "framer-motion": "^12.9.2",
        "graphql": "^16.11.0",
        "js-cookie": "^3.0.5",
@@ -35,7 +34,6 @@
        "react-hook-form": "^7.56.4",
        "react-icons": "^5.5.0",
        "react-router-dom": "^7.3.0",
        "recharts": "^3.1.2",
        "sharp": "^0.34.1",
        "sonner": "^2.0.3",
        "tailwind-merge": "^3.0.2",
@@ -8072,32 +8070,6 @@
        "node": ">=10"
      }
    },
    "node_modules/@reduxjs/toolkit": {
      "version": "2.8.2",
      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
      "integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
      "license": "MIT",
      "dependencies": {
        "@standard-schema/spec": "^1.0.0",
        "@standard-schema/utils": "^0.3.0",
        "immer": "^10.0.3",
        "redux": "^5.0.1",
        "redux-thunk": "^3.1.0",
        "reselect": "^5.1.0"
      },
      "peerDependencies": {
        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
      },
      "peerDependenciesMeta": {
        "react": {
          "optional": true
        },
        "react-redux": {
          "optional": true
        }
      }
    },
    "node_modules/@rollup/pluginutils": {
      "version": "5.1.4",
      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
@@ -8907,12 +8879,6 @@
        "@sinonjs/commons": "^3.0.0"
      }
    },
    "node_modules/@standard-schema/spec": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
      "license": "MIT"
    },
    "node_modules/@standard-schema/utils": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -11005,69 +10971,6 @@
        "@types/node": "*"
      }
    },
    "node_modules/@types/d3-array": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
      "license": "MIT"
    },
    "node_modules/@types/d3-color": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
      "license": "MIT"
    },
    "node_modules/@types/d3-ease": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
      "license": "MIT"
    },
    "node_modules/@types/d3-interpolate": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
      "license": "MIT",
      "dependencies": {
        "@types/d3-color": "*"
      }
    },
    "node_modules/@types/d3-path": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
      "license": "MIT"
    },
    "node_modules/@types/d3-scale": {
      "version": "4.0.9",
      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
      "license": "MIT",
      "dependencies": {
        "@types/d3-time": "*"
      }
    },
    "node_modules/@types/d3-shape": {
      "version": "3.1.7",
      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
      "license": "MIT",
      "dependencies": {
        "@types/d3-path": "*"
      }
    },
    "node_modules/@types/d3-time": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
      "license": "MIT"
    },
    "node_modules/@types/d3-timer": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
      "license": "MIT"
    },
    "node_modules/@types/debug": {
      "version": "4.1.12",
      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -11443,12 +11346,6 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/@types/use-sync-external-store": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
      "license": "MIT"
    },
    "node_modules/@types/uuid": {
      "version": "9.0.8",
      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
@@ -16816,127 +16713,6 @@
        "which": "bin/which"
      }
    },
    "node_modules/d3-array": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
      "license": "ISC",
      "dependencies": {
        "internmap": "1 - 2"
      },
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-color": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
      "license": "ISC",
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-ease": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-format": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
      "license": "ISC",
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-interpolate": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
      "license": "ISC",
      "dependencies": {
        "d3-color": "1 - 3"
      },
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-path": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
      "license": "ISC",
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-scale": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
      "license": "ISC",
      "dependencies": {
        "d3-array": "2.10.0 - 3",
        "d3-format": "1 - 3",
        "d3-interpolate": "1.2.0 - 3",
        "d3-time": "2.1.1 - 3",
        "d3-time-format": "2 - 4"
      },
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-shape": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
      "license": "ISC",
      "dependencies": {
        "d3-path": "^3.1.0"
      },
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-time": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
      "license": "ISC",
      "dependencies": {
        "d3-array": "2 - 3"
      },
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-time-format": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
      "license": "ISC",
      "dependencies": {
        "d3-time": "1 - 3"
      },
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/d3-timer": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
      "license": "ISC",
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/damerau-levenshtein": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -17040,6 +16816,7 @@
      "version": "1.11.13",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/de-indent": {
@@ -17084,12 +16861,6 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/decimal.js-light": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
      "license": "MIT"
    },
    "node_modules/decompress-response": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -18056,16 +17827,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
    "node_modules/es-toolkit": {
      "version": "1.39.8",
      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.8.tgz",
      "integrity": "sha512-A8QO9TfF+rltS8BXpdu8OS+rpGgEdnRhqIVxO/ZmNvnXBYgOdSsxukT55ELyP94gZIntWJ+Li9QRrT2u1Kitpg==",
      "license": "MIT",
      "workspaces": [
        "docs",
        "benchmarks"
      ]
    },
    "node_modules/es6-error": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
@@ -21079,16 +20840,6 @@
        "node": ">=0.10.0"
      }
    },
    "node_modules/immer": {
      "version": "10.1.1",
      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
      "license": "MIT",
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/immer"
      }
    },
    "node_modules/immutable": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
@@ -21227,15 +20978,6 @@
        "node": ">= 0.4"
      }
    },
    "node_modules/internmap": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
      "license": "ISC",
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/ipaddr.js": {
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -28907,31 +28649,9 @@
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/react-redux": {
      "version": "9.2.0",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
      "license": "MIT",
      "dependencies": {
        "@types/use-sync-external-store": "^0.0.6",
        "use-sync-external-store": "^1.4.0"
      },
      "peerDependencies": {
        "@types/react": "^18.2.25 || ^19",
        "react": "^18.0 || ^19",
        "redux": "^5.0.0"
      },
      "peerDependenciesMeta": {
        "@types/react": {
          "optional": true
        },
        "redux": {
          "optional": true
        }
      }
    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -29145,39 +28865,6 @@
        "node": ">=0.10.0"
      }
    },
    "node_modules/recharts": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.2.tgz",
      "integrity": "sha512-vhNbYwaxNbk/IATK0Ki29k3qvTkGqwvCgyQAQ9MavvvBwjvKnMTswdbklJpcOAoMPN/qxF3Lyqob0zO+ZXkZ4g==",
      "license": "MIT",
      "dependencies": {
        "@reduxjs/toolkit": "1.x.x || 2.x.x",
        "clsx": "^2.1.1",
        "decimal.js-light": "^2.5.1",
        "es-toolkit": "^1.39.3",
        "eventemitter3": "^5.0.1",
        "immer": "^10.1.1",
        "react-redux": "8.x.x || 9.x.x",
        "reselect": "5.1.1",
        "tiny-invariant": "^1.3.3",
        "use-sync-external-store": "^1.2.2",
        "victory-vendor": "^37.0.2"
      },
      "engines": {
        "node": ">=18"
      },
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
    "node_modules/recharts/node_modules/eventemitter3": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
      "license": "MIT"
    },
    "node_modules/redent": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -29205,21 +28892,6 @@
        "node": ">=8"
      }
    },
    "node_modules/redux": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
      "license": "MIT"
    },
    "node_modules/redux-thunk": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
      "license": "MIT",
      "peerDependencies": {
        "redux": "^5.0.0"
      }
    },
    "node_modules/reflect.getprototypeof": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -29422,12 +29094,6 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/reselect": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
      "license": "MIT"
    },
    "node_modules/resolve": {
      "version": "1.22.8",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -32402,6 +32068,7 @@
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/tinybench": {
@@ -34174,28 +33841,6 @@
        "extsprintf": "^1.2.0"
      }
    },
    "node_modules/victory-vendor": {
      "version": "37.3.6",
      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
      "license": "MIT AND ISC",
      "dependencies": {
        "@types/d3-array": "^3.0.3",
        "@types/d3-ease": "^3.0.0",
        "@types/d3-interpolate": "^3.0.1",
        "@types/d3-scale": "^4.0.2",
        "@types/d3-shape": "^3.1.0",
        "@types/d3-time": "^3.0.0",
        "@types/d3-timer": "^3.0.0",
        "d3-array": "^3.1.6",
        "d3-ease": "^3.0.1",
        "d3-interpolate": "^3.0.1",
        "d3-scale": "^4.0.2",
        "d3-shape": "^3.1.0",
        "d3-time": "^3.0.0",
        "d3-timer": "^3.0.1"
      }
    },
    "node_modules/vite": {
      "version": "6.3.3",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.3.tgz",
@@ -38,7 +38,6 @@
    "axios": "^1.8.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.13",
    "framer-motion": "^12.9.2",
    "graphql": "^16.11.0",
    "js-cookie": "^3.0.5",
@@ -51,7 +50,6 @@
    "react-hook-form": "^7.56.4",
    "react-icons": "^5.5.0",
    "react-router-dom": "^7.3.0",
    "recharts": "^3.1.2",
    "sharp": "^0.34.1",
    "sonner": "^2.0.3",
    "tailwind-merge": "^3.0.2",
Author	SHA1	Message	Date
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
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 AzmiandGitHub	bb22068856	Update middleware.ts	2025-05-26 20:25:07 +07:00
Naufal AzmiandGitHub	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
`@@ -1,2 +1 @@`
	`export * from './datatable';`	`export * from './datatable';`
	`export * from './type.d';`