feat: add modal login gacha page

Merge pull request #6 from IMPHNEN/backoffice/auth
Backoffice Login, Dashboard, Accounts, Transactions page
2025-03-29 17:26:54 +07:00 · 2025-03-28 20:05:34 +08:00 · 2025-03-28 18:50:54 +07:00 · 2025-03-28 18:50:17 +07:00 · 2025-03-28 18:17:13 +07:00 · 2025-03-28 17:29:06 +07:00
67 changed files with 2065 additions and 393 deletions
@@ -0,0 +1,18 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <div className="bg-primary-50 min-h-screen flex justify-center">
+      <div className="bg-primary-50 min-h-screen w-full flex">
+        <BackofficeSidebar />
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,159 @@
+import * as React from 'react';
+
+import { FC, ReactElement } from 'react';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  EditOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  useReactTable,
+  RowSelectionState,
+} from '@tanstack/react-table';
+
+interface Account {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+}
+
+// Mock data for demonstration
+const mockData: Account[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
+  email: 'fullname23@gmail.com',
+  phone: '081904423804',
+  address: 'Jl. Pantai Cibaduyut Indonesia',
+}));
+
+const columns: ColumnDef<Account>[] = [
+  {
+    id: 'select',
+    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()}
+      />
+    ),
+  },
+  {
+    header: 'No',
+    accessorKey: 'id',
+  },
+  {
+    header: 'Nama Lengkap',
+    accessorKey: 'name',
+  },
+  {
+    header: 'Email',
+    accessorKey: 'email',
+  },
+  {
+    header: 'Nomor Telp',
+    accessorKey: 'phone',
+  },
+  {
+    header: 'Alamat Pengiriman',
+    accessorKey: 'address',
+  },
+  {
+    header: 'Action',
+    cell: ({ row }) => (
+      <Button
+        variant="primary"
+        size="sm"
+        onClick={(e) => {
+          e.stopPropagation();
+          // handleEdit(row.id);
+        }}
+        className="flex items-center gap-2"
+      >
+        <EditOutlined /> Edit
+      </Button>
+    ),
+  },
+];
+
+export const Components: FC = (): ReactElement => {
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+  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 (
+    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+      {/* Header */}
+      <header className="bg-white py-4 px-8 rounded-md shadow p-4">
+        <h1 className="text-p2 font-semibold">Data Akun</h1>
+      </header>
+
+      {/* Account Table Section */}
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        {/* Search and Filter */}
+        <div className="flex justify-between items-center gap-8 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama lengkap, email"
+              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>
+
+          <Button
+            variant="primary"
+            disabled
+            size="md"
+            className="flex items-center gap-3"
+          >
+            <FilterOutlined />
+            Filters
+          </Button>
+        </div>
+
+        {/* Table */}
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+    </main>
+  );
+};
+
+export default Components;
@@ -0,0 +1,18 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <div className="bg-primary-50 min-h-screen flex justify-center">
+      <div className="bg-primary-50 min-h-screen w-full flex">
+        <BackofficeSidebar />
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,111 @@
+import { ArrowDownOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { FC, ReactElement } from 'react';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+      {/* Dashboard Header */}
+      <header className="bg-white py-4 px-8 rounded-md shadow p-4">
+        <h1 className="text-p2 font-semibold">Dashboard</h1>
+      </header>
+
+      <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md">
+        <div className="w-full flex flex-col gap-[40px]">
+          {/* Summary Section */}
+          <section>
+            <h2 className="text-p2 font-medium text-primary-500 mb-8">
+              Summary
+            </h2>
+            <div className="grid grid-cols-2 gap-4">
+              {/* Summary Cards */}
+              {[1, 2, 3, 4].map((item) => (
+                <div
+                  key={item}
+                  className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100"
+                >
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <ArrowDownOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">
+                      Total Participants
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Gacha Items Section */}
+          <section className="flex flex-col gap-8">
+            <div className="flex justify-between items-center">
+              <h2 className="text-p2 font-medium text-primary-500">
+                Gacha Items
+              </h2>
+              <Button variant="primary" size="sm" className="items-end gap-3">
+                <span>Tambah Item</span>
+                <PlusOutlined className="text-[16px]" />
+              </Button>
+            </div>
+
+            {/* Gacha Items List */}
+            <div className="flex flex-col gap-4 max-h-140 overflow-auto">
+              {[1, 2, 3, 4, 5, 6].map((item) => (
+                <div
+                  key={item}
+                  className="bg-white max-h-[80px] overflow-clip rounded-lg shadow-sm flex justify-between border border-neutral-100"
+                >
+                  <div className="flex flex-col py-4 px-6 gap-4">
+                    <div>
+                      <h3 className="text-p3 text-primary-500 font-medium">
+                        Lanyard IMPHNEN
+                      </h3>
+                      <div className="flex items-center gap-2 text-label2 text-gray-500 mt-1">
+                        <span>Prize {item}</span>
+                        <span>Chance Rate: (0.1%)</span>
+                      </div>
+                    </div>
+                    <div className="flex justify-start gap-2">
+                      <Button
+                        variant="text"
+                        size="sm"
+                        className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-primary-500"
+                      >
+                        Edit
+                      </Button>
+                      <Button
+                        variant="text"
+                        size="sm"
+                        className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-red-500"
+                      >
+                        Delete
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* Lebih baik gunakan gambar yang sudah di-clip dengan size height: 78px daripada hard-code object-position dan margin */}
+                  <img
+                    src="gacha-clip.png"
+                    alt="Lanyard IMPHNEN"
+                    className="h-full"
+                  />
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+
+        {/* Right-side illustration */}
+        <img
+          src="gacha.png"
+          alt=""
+          className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
+        />
+      </div>
+    </main>
+  );
+};
+
+export default Components;
@@ -1,11 +1,9 @@
 import { FC, ReactElement } from 'react';
 import { Outlet } from 'react-router-dom';
-import { Navbar } from '@imphnen-frontend-service/ui/organisms';

 export const AppLayout: FC = (): ReactElement => {
  return (
    <main className="bg-primary-50 min-h-screen">
-      <Navbar />
      <Outlet />
    </main>
  );
@@ -1,7 +1,36 @@
 import { FC, ReactElement } from 'react';
+import { useNavigate } from 'react-router';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm } from '@imphnen-frontend-service/ui/molecules';

 export const Components: FC = (): ReactElement => {
-  return <>Hallo</>;
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col justify-items-stretch gap-8 rounded-2xl">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 font-semibold">
+          Welcome to IMPHNEN Backoffice
+        </h1>
+        <InputForm
+          label="Email"
+          placeholder="Masukkan Email"
+          type="email"
+          size="lg"
+          className="w-full"
+        />
+        <InputForm
+          label="Password"
+          placeholder="Masukkan password"
+          type="password"
+          size="lg"
+          className="w-full"
+        />
+        <Button onClick={() => navigate('/dashboard')}>Login</Button>
+      </div>
+    </div>
+  );
 };

 export default Components;
@@ -0,0 +1,18 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <div className="bg-primary-50 min-h-screen flex justify-center">
+      <div className="bg-primary-50 min-h-screen w-full flex">
+        <BackofficeSidebar />
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,178 @@
+import * as React from 'react';
+
+import { FC, ReactElement } from 'react';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  AuditOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  useReactTable,
+  RowSelectionState,
+} from '@tanstack/react-table';
+
+type TransactionStatus = 'valid' | 'invalid' | 'unchecked';
+
+interface Transaction {
+  id: number;
+  name: string;
+  transactionNumber: string;
+  status: TransactionStatus;
+}
+
+// Mock data for transactions
+const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
+  id: i + 1,
+  name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
+  transactionNumber: '25D2133Y9AFYBD',
+  status: (i % 3 === 0
+    ? 'invalid'
+    : i % 5 === 0
+    ? 'unchecked'
+    : 'valid') as TransactionStatus,
+}));
+
+const columns: ColumnDef<Account>[] = [
+  {
+    id: 'select',
+    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()}
+      />
+    ),
+  },
+  {
+    header: 'No',
+    accessorKey: 'id',
+  },
+  {
+    header: 'Nama Lengkap',
+    accessorKey: 'name',
+  },
+  {
+    header: 'Nomor Transaksi',
+    accessorKey: 'transactionNumber',
+  },
+  {
+    header: 'Order Valid?',
+    accessorKey: 'status',
+    cell: ({ row }) => {
+      const status = row.original.status;
+      const statusColors: Record<TransactionStatus, string> = {
+        valid: 'bg-success-500 text-white',
+        invalid: 'bg-danger-500 text-white',
+        unchecked: 'bg-yellow-400 text-black',
+      };
+      const statusText: Record<TransactionStatus, string> = {
+        valid: 'Valid',
+        invalid: 'Invalid',
+        unchecked: 'Unchecked',
+      };
+      return (
+        <div
+          className={`py-1 px-3 rounded-md text-center ${statusColors[status]}`}
+        >
+          {statusText[status]}
+        </div>
+      );
+    },
+  },
+  {
+    header: 'Action',
+    cell: ({ row }) => (
+      <Button
+        variant="primary"
+        size="sm"
+        onClick={(e) => {
+          e.stopPropagation();
+          // handleUpdate(row.id);
+        }}
+        className="flex items-center gap-2 w-full"
+      >
+        <AuditOutlined className="text-[16px]" /> Update
+      </Button>
+    ),
+  },
+];
+
+export const Components: FC = (): ReactElement => {
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+  const table = useReactTable({
+    data: mockTransactions,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockTransactions.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+      {/* Header */}
+      <header className="bg-white py-4 px-8 rounded-md shadow p-4">
+        <h1 className="text-p2 font-semibold">Validasi Transaksi</h1>
+      </header>
+
+      {/* Account Table Section */}
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        {/* Search and Filter */}
+        <div className="flex justify-between items-center gap-8 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
+              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>
+
+          <Button
+            variant="primary"
+            size="md"
+            className="flex items-center gap-3"
+          >
+            <FilterOutlined />
+            Filters
+          </Button>
+        </div>
+
+        {/* Table */}
+        <DataTable data={mockTransactions} columns={columns} table={table} />
+      </section>
+    </main>
+  );
+};
+
+export default Components;
@@ -27,49 +27,45 @@
  --color-neutral-900: #2f2f2f;
  --color-neutral-950: #2b2b2b;

-  --color-success-50: #e7f2ee;
-  --color-success-100: #cde6dd;
-  --color-success-200: #9bccbc;
-  --color-success-300: #78bdab;
-  --color-success-400: #4ca88f;
-  --color-success-500: #349078;
-  --color-success-600: #2f7c66;
-  --color-success-700: #26624f;
-  --color-success-800: #1e4a3b;
-  --color-success-900: #1b513b;
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;

-  --color-info-50: #e7f4f5;
-  --color-info-100: #cce9ea;
-  --color-info-200: #99d3d5;
-  --color-info-300: #78c4c7;
-  --color-info-400: #3aa9ad;
-  --color-info-500: #279599;
-  --color-info-600: #207d82;
-  --color-info-700: #1a666b;
-  --color-info-800: #124c52;
-  --color-info-900: #093d43;
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;

-  --color-warning-50: #fffce6;
-  --color-warning-100: #fff8cc;
-  --color-warning-200: #fef39b;
-  --color-warning-300: #fde967;
-  --color-warning-400: #fbd93d;
-  --color-warning-500: #f3c215;
-  --color-warning-600: #d7a20f;
-  --color-warning-700: #aa7e0c;
-  --color-warning-800: #805c07;
-  --color-warning-900: #665c00;
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;

-  --color-danger-50: #ffe7e7;
-  --color-danger-100: #ffcece;
-  --color-danger-200: #ff9f9f;
-  --color-danger-300: #ff6e6e;
-  --color-danger-400: #fa4646;
-  --color-danger-500: #ef1f1f;
-  --color-danger-600: #d11515;
-  --color-danger-700: #a51111;
-  --color-danger-800: #7f0c0c;
-  --color-danger-900: #5d2d2d;
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;

  --radius-none: 0px;
  --radius-sm: 2px;
@@ -137,4 +133,4 @@
    font-size: 12px;
    line-height: 1.2;
  }
-}
+}
@@ -1,9 +1,9 @@
 import { ArrowDownOutlined } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { ModalsGacha } from '@imphnen-frontend-service/ui/organisms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
 import { cn } from '@imphnen-frontend-service/utils';
 import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { Link } from 'react-router';

 interface GachaItemProps {
  src: string;
@@ -14,7 +14,6 @@ interface GachaItemProps {
 export const Components: FC = (): ReactElement => {
  // Pinjem
  const [showModal, setShowModal] = useState(false);
-  //

  const scrollToRoulette = () => {
    const rouletteSection = document.getElementById('roulette');
@@ -222,16 +221,58 @@ export const Components: FC = (): ReactElement => {
      <div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>

      {/**Izin pake untuk debug modals gacha */}
-      <div>
-        <p>Debug : Test Modals Gacha</p>
-        <Button onClick={
-          () => setShowModal(true)
-        }>Tekan</Button>
-      </div>
-      {showModal && createPortal(
-        <ModalsGacha></ModalsGacha>,
-        document.body
-      )}
+      <button onClick={() => setShowModal(true)}>Open Modal</button>
+      <Modal
+        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+      >
+        <Modal.Header className="space-y-4">
+          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+          <h1 className="text-primary-500 text-p1 text-center font-semibold">
+            Login
+          </h1>
+        </Modal.Header>
+        <Modal.Content className="space-y-4">
+          <InputForm
+            label="Email"
+            placeholder="Masukkan Email"
+            type="email"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Password"
+            placeholder="Masukkan password"
+            type="password"
+            size="lg"
+            className="w-full"
+          />
+          <Link to="/forgot-password">
+            <h1 className="text-end text-primary-500 text-xl font-medium">
+              Lupa Password?
+            </h1>
+          </Link>
+        </Modal.Content>
+        <Modal.Footer className="flex flex-col md:flex-col pt-4">
+          <Button
+            size="md"
+            className="w-full"
+            onClick={() => console.log('Login')}
+          >
+            Login
+          </Button>
+          <div className="flex justify-center gap-2 pt-2.5 font-medium">
+            <p className="text-neutral-500">Belum punya akun?</p>
+            <Link
+              className="text-primary-500 hover:text-primary-600"
+              to="/register"
+            >
+              Daftar disini
+            </Link>
+          </div>
+        </Modal.Footer>
+      </Modal>
      {/**Izin pake untuk debug modals gacha */}
    </Fragment>
  );
@@ -27,49 +27,45 @@
  --color-neutral-900: #2f2f2f;
  --color-neutral-950: #2b2b2b;

-  --color-success-50: #e7f2ee;
-  --color-success-100: #cde6dd;
-  --color-success-200: #9bccbc;
-  --color-success-300: #78bdab;
-  --color-success-400: #4ca88f;
-  --color-success-500: #349078;
-  --color-success-600: #2f7c66;
-  --color-success-700: #26624f;
-  --color-success-800: #1e4a3b;
-  --color-success-900: #1b513b;
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;

-  --color-info-50: #e7f4f5;
-  --color-info-100: #cce9ea;
-  --color-info-200: #99d3d5;
-  --color-info-300: #78c4c7;
-  --color-info-400: #3aa9ad;
-  --color-info-500: #279599;
-  --color-info-600: #207d82;
-  --color-info-700: #1a666b;
-  --color-info-800: #124c52;
-  --color-info-900: #093d43;
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;

-  --color-warning-50: #fffce6;
-  --color-warning-100: #fff8cc;
-  --color-warning-200: #fef39b;
-  --color-warning-300: #fde967;
-  --color-warning-400: #fbd93d;
-  --color-warning-500: #f3c215;
-  --color-warning-600: #d7a20f;
-  --color-warning-700: #aa7e0c;
-  --color-warning-800: #805c07;
-  --color-warning-900: #665c00;
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;

-  --color-danger-50: #ffe7e7;
-  --color-danger-100: #ffcece;
-  --color-danger-200: #ff9f9f;
-  --color-danger-300: #ff6e6e;
-  --color-danger-400: #fa4646;
-  --color-danger-500: #ef1f1f;
-  --color-danger-600: #d11515;
-  --color-danger-700: #a51111;
-  --color-danger-800: #7f0c0c;
-  --color-danger-900: #5d2d2d;
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;

  --radius-none: 0px;
  --radius-sm: 2px;
@@ -137,4 +133,4 @@
    font-size: 12px;
    line-height: 1.2;
  }
-}
+}
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
@@ -0,0 +1,7 @@
+# service
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test service` to execute the unit tests via [Vitest](https://vitest.dev/).
@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];
@@ -0,0 +1,12 @@
+{
+  "name": "@imphnen-frontend-service/service",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}
@@ -0,0 +1,23 @@
+{
+  "name": "service",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/service/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "nx-release-publish": {
+      "options": {
+        "packageRoot": "dist/{projectRoot}"
+      }
+    }
+  },
+  "release": {
+    "version": {
+      "generatorOptions": {
+        "packageRoot": "dist/{projectRoot}",
+        "currentVersionResolver": "git-tag",
+        "fallbackCurrentVersionResolver": "disk"
+      }
+    }
+  }
+}
@@ -0,0 +1,41 @@
+import { api } from '@imphnen-frontend-service/utils';
+import {
+  TLoginRequest,
+  TLoginResponse,
+  TRegisterRequest,
+  TVerifyEmailRequest,
+} from '../../types/auth';
+import { TResponseMessage } from '../../types/common';
+
+export const postLogin = async (
+  payload: TLoginRequest
+): Promise<TLoginResponse> => {
+  const { data } = await api({
+    method: 'POST',
+    url: '/auth/login',
+    data: payload,
+  });
+  return data;
+};
+
+export const postRegister = async (
+  payload: TRegisterRequest
+): Promise<TResponseMessage> => {
+  const { data } = await api({
+    method: 'POST',
+    url: '/auth/register',
+    data: payload,
+  });
+  return data;
+};
+
+export const postVerifyEmail = async (
+  payload: TVerifyEmailRequest
+): Promise<TResponseMessage> => {
+  const { data } = await api({
+    method: 'POST',
+    url: '/auth/verify',
+    data: payload,
+  });
+  return data;
+};
@@ -0,0 +1 @@
+export {};
@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './gacha';
+export * from './users';
@@ -0,0 +1 @@
+export {};
@@ -0,0 +1,45 @@
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+import { postLogin, postRegister, postVerifyEmail } from '../../api/auth';
+import {
+  TLoginRequest,
+  TLoginResponse,
+  TRegisterRequest,
+  TVerifyEmailRequest,
+} from '../../types/auth';
+import { TResponseError, TResponseMessage } from '../../types/common';
+
+export const usePostLogin = (): UseMutationResult<
+  TLoginResponse,
+  TResponseError,
+  TLoginRequest,
+  unknown
+> => {
+  return useMutation({
+    mutationKey: ['post-login'],
+    mutationFn: async (payload) => await postLogin(payload),
+  });
+};
+
+export const usePostRegister = (): UseMutationResult<
+  TResponseMessage,
+  TResponseError,
+  TRegisterRequest,
+  unknown
+> => {
+  return useMutation({
+    mutationKey: ['post-register'],
+    mutationFn: async (payload) => await postRegister(payload),
+  });
+};
+
+export const usePostVerifyEmail = (): UseMutationResult<
+  TResponseMessage,
+  TResponseError,
+  TVerifyEmailRequest,
+  unknown
+> => {
+  return useMutation({
+    mutationKey: ['post-verify-email'],
+    mutationFn: async (payload) => await postVerifyEmail(payload),
+  });
+};
@@ -0,0 +1 @@
+export {};
@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './gacha';
+export * from './users';
@@ -0,0 +1 @@
+export {};
@@ -0,0 +1,3 @@
+export * from './api';
+export * from './hooks';
+export * from './types';
@@ -0,0 +1,29 @@
+export type TLoginRequest = {
+  email: string;
+  password: string;
+};
+
+export type TLoginResponse = {
+  data: {
+    token: {
+      access_token: string;
+      refresh_token: string;
+    };
+    user: {
+      fullname: string;
+      email: string;
+      is_active: boolean;
+    };
+  };
+};
+
+export type TRegisterRequest = {
+  fullname: string;
+  email: string;
+  password: string;
+};
+
+export type TVerifyEmailRequest = {
+  email: string;
+  otp: number;
+};
@@ -0,0 +1,11 @@
+import { AxiosError } from 'axios';
+
+export type TResponse<T = unknown> = {
+  data: T;
+};
+
+export type TResponseMessage = {
+  message: string;
+};
+
+export type TResponseError = AxiosError<TResponseMessage>;
@@ -0,0 +1 @@
+export {};
@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './gacha';
+export * from './users';
@@ -0,0 +1 @@
+export {};
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
@@ -0,0 +1,35 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
@@ -0,0 +1,59 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/service',
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/libs/service',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'service',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/service',
+      provider: 'v8' as const,
+    },
+  },
+}));
@@ -1,4 +1,3 @@
 export * from './button';
 export * from './input';
-export * from './password-input';
 export * from './textarea';
@@ -1,36 +1,15 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { Input } from "./input";
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Input } from './input';

-describe("Test Input Component", () => {
-  it("renders the input with placeholder text", () => {
+describe('Test Input Component', () => {
+  it('renders the input with placeholder text', () => {
    render(<Input placeholder="Placeholder" />);
-    expect(screen.getByPlaceholderText("Placeholder")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Placeholder')).toBeInTheDocument();
  });

-  // it("renders the input with different sizes", () => {
-  //   const sizeClasses = {
-  //     sm: "text-[10px] max-h-[28px]",
-  //     md: "text-[12px] max-h-[30px]",
-  //     lg: "text-[15px] max-h-[34px]",
-  //   };
-  //   Object.entries(sizeClasses).forEach(([size, className]) => {
-  //     render(<Input size={size} />);
-  //     expect(screen.getByRole("textbox")).toHaveClass(className);
-  //   });
-  // });
-
-  // it("renders the input with different types", () => {
-  //   const types = ["text", "password", "email", "number"];
-  //   types.forEach((type) => {
-  //     render(<Input type={type} />);
-  //     const input = screen.getByRole("textbox");
-  //     expect(input).toHaveAttribute("type", type);
-  //   });
-  // });
-
  it("disables the input field when 'disabled' prop is set", () => {
    render(<Input disabled />);
-    expect(screen.getByRole("textbox")).toBeDisabled();
+    expect(screen.getByRole('textbox')).toBeDisabled();
  });
 });
@@ -4,17 +4,8 @@ import { Input } from './input';
 const meta: Meta<typeof Input> = {
  title: 'Components/Input',
  component: Input,
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['text', 'email'],
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-  },
-};
+  tags: ['autodocs'],
+} satisfies Meta<typeof Input>;

 export default meta;
 type Story = StoryObj<typeof Input>;
@@ -22,6 +13,7 @@ type Story = StoryObj<typeof Input>;
 export const Large: Story = {
  args: {
    size: 'lg',
+    type: 'text',
    placeholder: 'Placeholder',
  },
 };
@@ -29,6 +21,7 @@ export const Large: Story = {
 export const Medium: Story = {
  args: {
    size: 'md',
+    type: 'text',
    placeholder: 'Placeholder',
  },
 };
@@ -36,6 +29,7 @@ export const Medium: Story = {
 export const Small: Story = {
  args: {
    size: 'sm',
+    type: 'text',
    placeholder: 'Placeholder',
  },
 };
@@ -54,6 +48,13 @@ export const EmailInput: Story = {
  },
 };

+export const PasswordInput: Story = {
+  args: {
+    size: 'md',
+    type: 'password',
+  },
+};
+
 export const Disabled: Story = {
  args: {
    size: 'md',
@@ -61,11 +62,3 @@ export const Disabled: Story = {
    disabled: true,
  },
 };
-
-export const WithError: Story = {
-  args: {
-    size: 'md',
-    type: 'text',
-    error: 'This field is required',
-  },
-};
@@ -3,10 +3,13 @@ import {
  FC,
  InputHTMLAttributes,
  ReactElement,
+  useState,
 } from 'react';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // Import Ant Design icons
 import { cn } from '@imphnen-frontend-service/utils';
+import { Button } from '../button';

-type TInputType = 'text' | 'email';
+type TInputType = 'text' | 'email' | 'password';
 type TInputSize = 'sm' | 'md' | 'lg';

 type TInputProps = Omit<
@@ -15,46 +18,70 @@ type TInputProps = Omit<
 > & {
  type?: TInputType;
  size?: TInputSize;
-  error?: string;
+  disabled?: boolean;
 };

-const sizeClasses: Record<TInputSize, string> = {
-  sm: 'text-[10px] max-h-[28px]',
-  md: 'text-[12px] max-h-[30px]',
-  lg: 'text-[15px] max-h-[34px]',
-};
+const sizeClasses: Record<TInputSize, { textSize: string; iconSize: string }> =
+  {
+    sm: { textSize: 'text-[10px] max-h-[28px]', iconSize: 'text-[10px]' },
+    md: { textSize: 'text-[12px] max-h-[30px]', iconSize: 'text-[12px]' },
+    lg: { textSize: 'text-[15px] max-h-[34px]', iconSize: 'text-[15px]' },
+  };

 const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
-const errorClass =
-  'border-danger-500 hover:border-danger-500 focus:outline-danger-500';

 export const Input: FC<TInputProps> = ({
+  type = 'text',
  size = 'md',
-  type,
  placeholder = 'Placeholder',
  disabled,
-  error,
  className,
  ...rest
 }): ReactElement => {
+  const [showPassword, setShowPassword] = useState(false); // State for password visibility
+
+  const togglePasswordVisibility = () => {
+    if (!disabled) setShowPassword((prev) => !prev);
+  };
+
  const mergedClassName = cn(
-    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
-    sizeClasses[size],
+    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70',
+    sizeClasses[size].textSize,
    disabled && disabledClass,
-    error && errorClass,
    className
  );

  return (
-    <>
+    <div className="relative flex items-center">
      <input
        className={mergedClassName}
-        type={type}
+        type={type === 'password' && showPassword ? 'text' : type}
        disabled={disabled}
        placeholder={placeholder}
        {...rest}
      />
-      {error && <p className="text-danger-500 text-xs mt-1">{error}</p>}
-    </>
+      {type === 'password' && (
+        <div className="absolute end-0 px-[12px] h-full flex items-center">
+          <Button
+            variant="text"
+            size={size}
+            onClick={togglePasswordVisibility}
+            className={cn(
+              'relative aspect-square -me-[8px] p-[6px]',
+              sizeClasses[size].iconSize,
+              disabled && 'cursor-not-allowed'
+            )}
+          >
+            {showPassword ? (
+              <EyeInvisibleOutlined
+                style={{ color: 'var(--color-neutral-500)' }}
+              />
+            ) : (
+              <EyeOutlined style={{ color: 'var(--color-neutral-500)' }} />
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
  );
 };
@@ -1 +0,0 @@
-export * from "./password-input";
@@ -1,58 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { PasswordInput } from './password-input';
-
-const meta: Meta<typeof PasswordInput> = {
-  title: 'Components/Password Input',
-  component: PasswordInput,
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PasswordInput>;
-
-export const Large: Story = {
-  args: {
-    size: 'lg',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    size: 'md',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'sm',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const Input: Story = {
-  args: {
-    size: 'md',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    size: 'md',
-    disabled: true,
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    size: 'md',
-    error: 'This field is required',
-  },
-};
@@ -1,111 +0,0 @@
-import {
-  DetailedHTMLProps,
-  FC,
-  InputHTMLAttributes,
-  ReactElement,
-  useState,
-} from 'react';
-import { cn } from '@imphnen-frontend-service/utils';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
-
-type TPasswordInputType = 'password';
-type TPasswordInputSize = 'sm' | 'md' | 'lg';
-
-type TPasswordInputProps = Omit<
-  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-  'size' | 'type'
-> & {
-  type?: TPasswordInputType;
-  size?: TPasswordInputSize;
-  error?: string;
-};
-
-const sizeClasses: Record<TPasswordInputSize, string> = {
-  sm: 'text-[10px] max-h-[28px]',
-  md: 'text-[12px] max-h-[30px]',
-  lg: 'text-[15px] max-h-[34px]',
-};
-
-const iconSizeClasses: Record<TPasswordInputSize, string> = {
-  sm: 'text-[10px]',
-  md: 'text-[12px]',
-  lg: 'text-[16px]',
-};
-
-const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
-const errorClass =
-  'border-danger-500 hover:border-danger-500 focus:outline-danger-500';
-
-export const PasswordInput: FC<TPasswordInputProps> = ({
-  size = 'md',
-  placeholder = 'Placeholder',
-  disabled,
-  error,
-  className,
-  ...rest
-}): ReactElement => {
-  const [showPassword, setShowPassword] = useState(false);
-
-  const togglePasswordVisibility = () => {
-    if (!disabled) setShowPassword((prev) => !prev);
-  };
-
-  const mergedClassName = cn(
-    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
-    sizeClasses[size],
-    disabled && disabledClass,
-    error && errorClass,
-    className
-  );
-
-  return (
-    <>
-      <div
-        className={cn(
-          'relative inline-flex items-center border border-neutral-200 rounded-md',
-          mergedClassName
-        )}
-      >
-        <input
-          className="focus:outline-0"
-          type={showPassword ? 'text' : 'password'}
-          disabled={disabled}
-          placeholder={placeholder}
-          {...rest}
-        />
-        <div className="absolute end-0 px-[12px] h-full flex items-center">
-          <Button
-            variant="text"
-            size={size}
-            onClick={togglePasswordVisibility}
-            className={cn(
-              'relative aspect-square -me-[10px] p-[6px]',
-              iconSizeClasses[size],
-              disabled && 'cursor-not-allowed'
-            )}
-          >
-            {showPassword ? (
-              <EyeInvisibleOutlined
-                style={{
-                  color: error
-                    ? 'var(--color-danger-500)'
-                    : 'var(--color-neutral-500)',
-                }}
-              />
-            ) : (
-              <EyeOutlined
-                style={{
-                  color: error
-                    ? 'var(--color-danger-500)'
-                    : 'var(--color-neutral-500)',
-                }}
-              />
-            )}
-          </Button>
-        </div>
-      </div>
-      {error && <p className="text-danger-500 text-xs mt-1">{error}</p>}
-    </>
-  );
-};
@@ -1,19 +1,21 @@
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import 'tailwindcss';
+@source "../../../libs/ui/**/*.{ts,tsx}";

@theme {
  --color-primary-50: #f0f8ff;
  --color-primary-100: #e1f0fd;
-  --color-primary-200: #b8e1f8;
-  --color-primary-300: #a1d4f0;
-  --color-primary-400: #4aa4da;
-  --color-primary-500: #1a8ce6;
-  --color-primary-600: #1673c7;
-  --color-primary-700: #0f5ca5;
-  --color-primary-800: #0a4780;
-  --color-primary-900: #04305d;
+  --color-primary-200: #bce1fb;
+  --color-primary-300: #81cbf8;
+  --color-primary-400: #3eb0f2;
+  --color-primary-500: #23a1eb;
+  --color-primary-600: #0877c1;
+  --color-primary-700: #085f9c;
+  --color-primary-800: #0b5181;
+  --color-primary-900: #0f446b;
+  --color-primary-950: #0a2b47;

-  --color-neutral-50: #f7f7f7;
+  --color-neutral-50: #f6f6f6;
  --color-neutral-100: #e7e7e7;
  --color-neutral-200: #d0d0d0;
  --color-neutral-300: #b7b7b7;
@@ -23,50 +25,47 @@
  --color-neutral-700: #4a4a4a;
  --color-neutral-800: #3a3a3a;
  --color-neutral-900: #2f2f2f;
+  --color-neutral-950: #2b2b2b;

-  --color-success-50: #e7f2ee;
-  --color-success-100: #cde6dd;
-  --color-success-200: #9bccbc;
-  --color-success-300: #78bdab;
-  --color-success-400: #4ca88f;
-  --color-success-500: #349078;
-  --color-success-600: #2f7c66;
-  --color-success-700: #26624f;
-  --color-success-800: #1e4a3b;
-  --color-success-900: #1b513b;
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;

-  --color-info-50: #e7f4f5;
-  --color-info-100: #cce9ea;
-  --color-info-200: #99d3d5;
-  --color-info-300: #78c4c7;
-  --color-info-400: #3aa9ad;
-  --color-info-500: #279599;
-  --color-info-600: #207d82;
-  --color-info-700: #1a666b;
-  --color-info-800: #124c52;
-  --color-info-900: #093d43;
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;

-  --color-warning-50: #fffce6;
-  --color-warning-100: #fff8cc;
-  --color-warning-200: #fef39b;
-  --color-warning-300: #fde967;
-  --color-warning-400: #fbd93d;
-  --color-warning-500: #f3c215;
-  --color-warning-600: #d7a20f;
-  --color-warning-700: #aa7e0c;
-  --color-warning-800: #805c07;
-  --color-warning-900: #665c00;
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;

-  --color-danger-50: #ffe7e7;
-  --color-danger-100: #ffcece;
-  --color-danger-200: #ff9f9f;
-  --color-danger-300: #ff6e6e;
-  --color-danger-400: #fa4646;
-  --color-danger-500: #ef1f1f;
-  --color-danger-600: #d11515;
-  --color-danger-700: #a51111;
-  --color-danger-800: #7f0c0c;
-  --color-danger-900: #5d2d2d;
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;

  --radius-none: 0px;
  --radius-sm: 2px;
@@ -79,16 +78,28 @@

  --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;

-  --text-h1: 3rem; /* ~48px */
-  --text-h2: 2.4rem; /* ~38.4px */
-  --text-h3: 1.92rem; /* ~30.72px */
-  --text-p1: 1.54rem; /* ~24.58px */
-  --text-p2: 1.23rem; /* ~19.68px */
-  --text-label1: 0.98rem; /* ~15.74px */
-  --text-label2: 0.78rem; /* ~12.59px */
+  --text-h1: 3.833rem;
+  /* ~46px */
+  --text-h2: 3.083rem;
+  /* ~37px */
+  --text-h3: 2.417rem;
+  /* ~29px */
+  --text-p1: 1.917rem;
+  /* ~23px */
+  --text-p2: 1.583rem;
+  /* ~19px */
+  --text-p3: 1.25rem;
+  /* 15px */
+  --text-label1: 1rem;
+  /* 12px */
+  --text-label2: 0.833rem;
+  /* ~10px */
+  --text-label3: 0.677rem;
+  /* ~8px */
 }

@layer base {
+
  *,
  ::after,
  ::before,
@@ -102,13 +113,16 @@
    width: 6px;
    height: 6px;
  }
+
  ::-webkit-scrollbar-track {
    background: var(--color-neutral-50);
  }
+
  ::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 3px;
  }
+
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-300);
  }
@@ -116,5 +130,7 @@
  html {
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 400;
+    font-size: 12px;
+    line-height: 1.2;
  }
-}
+}
@@ -1 +1,3 @@
-export {};
+export * from './input-form';
+export * from './pagination';
+export * from './modal';
@@ -0,0 +1 @@
+export * from './input-form';
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import InputForm from './input-form';
+
+describe('InputForm Component', () => {
+  it('renders correctly with disabled prop', () => {
+    render(<InputForm label="Test Label" disabled={true} />);
+
+    const input = screen.getByLabelText('Test Label');
+    expect(input).toBeDisabled();
+    expect(input).toHaveClass('opacity-50 cursor-not-allowed');
+  });
+
+  it('renders correctly without disabled prop', () => {
+    render(<InputForm label="Test Label" disabled={false} />);
+
+    const input = screen.getByLabelText('Test Label');
+    expect(input).not.toBeDisabled();
+    expect(input).not.toHaveClass('opacity-50 cursor-not-allowed');
+  });
+});
@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputForm } from './input-form';
+
+const meta = {
+  title: 'Molecules/InputForm',
+  component: InputForm,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Komponen input form yang menggabungkan label dengan kolom input.
+
+## Aksesibilitas
+Ketika prop \`htmlFor\` disediakan:
+- Atribut \`htmlFor\` pada label akan diatur ke nilai tersebut
+- Atribut \`id\` pada input akan otomatis diatur ke nilai yang sama
+- Ini menciptakan asosiasi label-input yang tepat untuk aksesibilitas
+
+Cek dan inspect element pada story With HtmlFor untuk melihat hasilnya.
+
+## Helper Text dan Error
+- Jika prop \`error\` disediakan, akan ditampilkan dalam warna merah di bawah input
+- Jika prop \`helperText\` disediakan dan tidak ada error, akan ditampilkan dalam warna abu-abu di bawah input
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof InputForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Large: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    size: 'lg',
+    helperText: 'Helper Text',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    size: 'md',
+    helperText: 'Helper Text',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    size: 'sm',
+    helperText: 'Helper Text',
+  },
+};
+
+export const Default: Story = {
+  args: {
+    label: 'Default',
+    placeholder: 'Enter your name',
+    type: 'text',
+    size: 'md',
+  },
+};
+
+export const PasswordInput: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    type: 'password',
+    size: 'md',
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter your email',
+    type: 'email',
+    size: 'md',
+    helperText: 'We will never share your email',
+  },
+};
+
+export const WithoutHelperText: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter your username',
+    type: 'text',
+    size: 'md',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter your username',
+    type: 'text',
+    size: 'md',
+    error: 'This field is required',
+  },
+};
+
+export const WithHtmlFor: Story = {
+  args: {
+    label: 'Full Name',
+    placeholder: 'Enter your full name',
+    type: 'text',
+    size: 'md',
+    htmlFor: 'fullname-input',
+    helperText: 'Click on the label',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled',
+    placeholder: 'This field is disabled',
+    type: 'text',
+    size: 'md',
+    disabled: true,
+  },
+};
@@ -0,0 +1,92 @@
+import {
+  DetailedHTMLProps,
+  FC,
+  InputHTMLAttributes,
+  ReactElement,
+} from 'react';
+import { Input } from '../../atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+
+type TInputType = 'text' | 'email' | 'password';
+type TInputSize = 'sm' | 'md' | 'lg';
+
+type TInputFormProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'size' | 'type'
+> & {
+  label: string;
+  type?: TInputType;
+  size?: TInputSize;
+  error?: string;
+  disabled?: boolean;
+
+  helperText?: string;
+  htmlFor?: string;
+};
+
+const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
+  lg: {
+    label: 'text-p3 font-medium',
+    helperText: 'text-label3 font-normal',
+  },
+  md: {
+    label: 'text-label1 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+  sm: {
+    label: 'text-label2 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+};
+
+export const InputForm: FC<TInputFormProps> = ({
+  label,
+  placeholder,
+  type = 'text',
+  size = 'md',
+  error,
+  helperText,
+  htmlFor,
+  className,
+  disabled,
+  ...rest
+}): ReactElement => {
+  return (
+    <div className="flex gap-[8px] flex-col">
+      <label
+        htmlFor={htmlFor}
+        className={cn(
+          'items-start justify-item-start text-start',
+          sizeClasses[size].label
+        )}
+      >
+        {label}
+      </label>
+      <Input
+        {...(htmlFor && { id: htmlFor })}
+        placeholder={placeholder}
+        type={type}
+        size={size}
+        disabled={disabled}
+        className={cn(
+          error &&
+            'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
+          className,
+          disabled && 'opacity-50 cursor-not-allowed' // Add styles for disabled state
+        )}
+        {...rest}
+      />
+      {error ? (
+        <p className="text-danger-500 text-xs mt-1">{error}</p>
+      ) : (
+        helperText && (
+          <p className={cn('text-cs mt-1', sizeClasses[size].helperText)}>
+            {helperText}
+          </p>
+        )
+      )}
+    </div>
+  );
+};
+
+export default InputForm;
@@ -0,0 +1,190 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { cn } from '@imphnen-frontend-service/utils';
+import React, { useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+  overlayClassName?: string;
+  closeButtonClassName?: string;
+  disableEscapeKeyDown?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+}
+
+const Modal = ({
+  isOpen,
+  onClose,
+  children,
+  className,
+  overlayClassName,
+  closeButtonClassName,
+  disableEscapeKeyDown = false,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+}: ModalProps) => {
+  const handleEscapeKey = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen && !disableEscapeKeyDown) {
+        onClose();
+      }
+    },
+    [isOpen, onClose, disableEscapeKeyDown]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', handleEscapeKey);
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpen, handleEscapeKey]);
+
+  const modalNode = useMemo(() => document.createElement('div'), []);
+
+  useEffect(() => {
+    document.body.appendChild(modalNode);
+    return () => {
+      document.body.removeChild(modalNode);
+    };
+  }, [modalNode]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50">
+      <div
+        className={cn(
+          'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
+          isOpen ? 'opacity-100' : 'opacity-0',
+          overlayClassName
+        )}
+        onClick={onClose}
+        role="presentation"
+      />
+      <div
+        className={cn(
+          'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-[#F0F8FF] rounded-lg p-6 shadow-xl transition-all duration-200',
+          'sm:rounded-lg sm:max-w-md',
+          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+      >
+        {children}
+        <button
+          onClick={onClose}
+          className={cn(
+            'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
+            closeButtonClassName
+          )}
+          aria-label="Close modal"
+        >
+          <CloseOutlined className="h-4 w-4 cursor-pointer" />
+        </button>
+      </div>
+    </div>,
+    modalNode
+  );
+};
+
+interface ModalHeaderProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ModalHeader = ({ className, children }: ModalHeaderProps) => (
+  <div
+    className={cn(
+      'mb-4 flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+  >
+    {children}
+  </div>
+);
+
+interface ModalContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ModalContent = ({ className, children }: ModalContentProps) => (
+  <div className={cn('mb-4', className)}>{children}</div>
+);
+
+interface ModalFooterProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ModalFooter = ({ className, children }: ModalFooterProps) => (
+  <div className={cn('flex gap-2 sm:flex-row sm:justify-end', className)}>
+    {children}
+  </div>
+);
+
+interface ModalTitleProps {
+  className?: string;
+  children: React.ReactNode;
+  id?: string;
+}
+
+const ModalTitle = ({ className, children, id }: ModalTitleProps) => (
+  <h2
+    id={id}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+  >
+    {children}
+  </h2>
+);
+
+interface ModalDescriptionProps {
+  className?: string;
+  children: React.ReactNode;
+  id?: string;
+}
+
+const ModalDescription = ({
+  className,
+  children,
+  id,
+}: ModalDescriptionProps) => (
+  <p id={id} className={cn('text-sm text-gray-500', className)}>
+    {children}
+  </p>
+);
+
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Footer = ModalFooter;
+Modal.Title = ModalTitle;
+Modal.Description = ModalDescription;
+
+export { Modal };
+export type {
+  ModalProps,
+  ModalHeaderProps,
+  ModalContentProps,
+  ModalFooterProps,
+  ModalTitleProps,
+  ModalDescriptionProps,
+};
@@ -0,0 +1 @@
+export * from './pagination';
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Pagination from './pagination';
+
+import { PaginationProps } from './index'; // Import PaginationProps
+
+const meta = {
+  title: 'Molecules/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+export const Default: StoryObj<PaginationProps> = {
+  args: {
+    currentPage: 1,
+    totalPages: 5,
+    onPageChange: (page: number) => console.log('Page changed to:', page),
+  },
+};
@@ -0,0 +1,93 @@
+import { Table } from '@tanstack/react-table';
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+
+interface PaginationProps<T> {
+  table: Table<T>;
+}
+
+export const Pagination = <T,>({ table }: PaginationProps<T>) => {
+  return (
+    <div className="flex items-center justify-center gap-[40px]">
+      <button
+        className="disabled:opacity-50 cursor-pointer"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+        aria-label="Previous page"
+      >
+        <ArrowLeftOutlined className="text-[16px] text-neutral-800" />
+      </button>
+
+      <div className="flex gap-4 items-baseline">
+        {table.getPageCount() <= 8 ? (
+          Array.from({ length: table.getPageCount() }, (_, index) => (
+            <button
+              key={index}
+              className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer  ${
+                table.getState().pagination.pageIndex === index
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-primary-100 hover:bg-primary-200'
+              }`}
+              onClick={() => table.setPageIndex(index)}
+            >
+              {index + 1}
+            </button>
+          ))
+        ) : (
+          <>
+            <button
+              onClick={() => table.setPageIndex(0)}
+              className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
+                table.getState().pagination.pageIndex === 0
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-primary-100 hover:bg-primary-200'
+              }`}
+            >
+              1
+            </button>
+            {table.getState().pagination.pageIndex > 3 && <span>...</span>}
+            {Array.from(
+              { length: 5 },
+              (_, index) => table.getState().pagination.pageIndex - 2 + index
+            )
+              .filter((page) => page > 0 && page < table.getPageCount() - 1)
+              .map((page) => (
+                <button
+                  key={page}
+                  onClick={() => table.setPageIndex(page)}
+                  className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
+                    table.getState().pagination.pageIndex === page
+                      ? 'bg-primary-500 text-white'
+                      : 'bg-primary-100 hover:bg-primary-200'
+                  }`}
+                >
+                  {page + 1}
+                </button>
+              ))}
+            {table.getState().pagination.pageIndex <
+              table.getPageCount() - 4 && <span>...</span>}
+            <button
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
+                table.getState().pagination.pageIndex ===
+                table.getPageCount() - 1
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-primary-100 hover:bg-primary-200'
+              }`}
+            >
+              {table.getPageCount()}
+            </button>
+          </>
+        )}
+      </div>
+
+      <button
+        className="disabled:opacity-50 cursor-pointer"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+        aria-label="Next page"
+      >
+        <ArrowRightOutlined className="text-[16px] text-neutral-800" />
+      </button>
+    </div>
+  );
+};
@@ -0,0 +1,79 @@
+import {
+  AppstoreOutlined,
+  AuditOutlined,
+  LogoutOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { Button } from '../../atoms';
+import { FC, ReactElement } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+
+export const BackofficeSidebar: FC = (): ReactElement => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const isActive = (path: string) => location.pathname.includes(path);
+
+  return (
+    <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">
+        {/* Logo */}
+        <img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />
+
+        {/* Navigation Menu */}
+        <nav className="flex flex-col gap-4 w-full">
+          <Link
+            to="/dashboard"
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
+              isActive('/dashboard')
+                ? 'bg-primary-500 text-white rounded-md'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <AppstoreOutlined className="text-[20px]" />
+            <span className="text-p3 font-medium">Dashboard & Set Gacha</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>
+        </nav>
+      </div>
+
+      {/* Log Out Button */}
+      <div className="w-full">
+        <hr className="mb-5 border-primary-200" />
+
+        <Button
+          onClick={() => {
+            navigate('/');
+          }}
+          variant="text"
+          className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
+        >
+          <LogoutOutlined className="text-[20px]" />
+          <span className="text-p3 font-medium">Log Out</span>
+        </Button>
+      </div>
+    </aside>
+  );
+};
@@ -0,0 +1 @@
+export * from './backoffice-sidebar'
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import DataTable from './datatable';
+
+const meta = {
+  title: 'Organisms/DataTable',
+  component: DataTable,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        phone: '123-456-7890',
+        address: '123 Main St',
+      },
+      {
+        id: 2,
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        phone: '987-654-3210',
+        address: '456 Elm St',
+      },
+      {
+        id: 3,
+        name: 'John Smith',
+        email: 'johns@example.com',
+        phone: '456-789-1230',
+        address: '789 Cedar St',
+      },
+    ],
+    headers: [
+      { label: 'ID', key: 'id' },
+      { label: 'Name', key: 'name' },
+      { label: 'Email', key: 'email' },
+      { label: 'Phone', key: 'phone' },
+      { label: 'Address', key: 'address' },
+    ],
+    onRowClick: (item) => console.log('Row clicked:', item),
+  },
+};
+
+export const WithCustomRender: Story = {
+  args: {
+    data: [
+      {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        phone: '123-456-7890',
+        address: '123 Main St',
+        status: 'active',
+      },
+      {
+        id: 2,
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        phone: '987-654-3210',
+        address: '456 Elm St',
+        status: 'inactive',
+      },
+      {
+        id: 3,
+        name: 'John Smith',
+        email: 'johns@example.com',
+        phone: '456-789-1230',
+        address: '789 Cedar St',
+        status: 'active',
+      },
+    ],
+    headers: [
+      { label: 'ID', key: 'id' },
+      { label: 'Name', key: 'name' },
+      { label: 'Email', key: 'email' },
+      { label: 'Phone', key: 'phone' },
+      {
+        label: 'Status',
+        render: (item) => (
+          <span
+            className={`px-2 py-1 rounded-md text-xs ${
+              item.status === 'active'
+                ? 'bg-green-100 text-green-800'
+                : 'bg-red-100 text-red-800'
+            }`}
+          >
+            {item.status}
+          </span>
+        ),
+      },
+      {
+        label: 'Actions',
+        render: (item) => (
+          <button
+            className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+            onClick={(e) => {
+              e.stopPropagation();
+              console.log('Edit item with id:', item.id);
+            }}
+          >
+            Edit
+          </button>
+        ),
+      },
+    ],
+    onRowClick: (item) => console.log('Row clicked:', item),
+  },
+};
+
+export const WithoutCheckbox: Story = {
+  args: {
+    ...Default.args,
+    showCheckbox: false,
+  },
+};
@@ -0,0 +1,84 @@
+import {
+  PaginationState,
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  flexRender,
+  ColumnDef,
+} from '@tanstack/react-table';
+import { Pagination } from '../../molecules';
+
+import React from 'react';
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  pageSize?: number;
+}
+
+export const DataTable = <T,>({
+  data,
+  columns,
+  pageSize = 9,
+}: DataTableProps<T>) => {
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize,
+  });
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      pagination,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+  });
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="w-full overflow-x-auto">
+        <table className="w-full min-w-full text-base">
+          <thead className="bg-primary-50 mb-3 text-left">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    className="py-3 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody className="mt-3">
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id} className="bg-primary-100 odd:bg-white">
+                {row.getVisibleCells().map((cell, index) => (
+                  <td
+                    key={cell.id}
+                    className="py-3 px-5 first:rounded-l-lg last:rounded-r-lg"
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <Pagination table={table} />
+    </div>
+  );
+};
+
+export default DataTable;
@@ -0,0 +1 @@
+export * from './datatable';
@@ -1,2 +1,4 @@
 export * from './navbar';
-export * from "./modals-gacha";
+export * from './modals-gacha';
+export * from './backoffice-sidebar'
+export * from './datatable'
@@ -40,6 +40,14 @@ export const Navbar: FC = (): ReactElement => {
                  <Link to="#">Merch Gacha</Link>
                </Button>
              </li>
+              <li>
+                <Button
+                  size="md"
+                  className="lg:text-[19px] lg:max-h-[44px] text-neutral-50 hover:text-neutral-200 transition-colors"
+                >
+                  <Link to="/login">Login</Link>
+                </Button>
+              </li>
            </ul>
            <button
              className={`md:hidden duration-200 ${
@@ -69,6 +77,14 @@ export const Navbar: FC = (): ReactElement => {
                        Merch Gacha
                      </Link>
                    </li>
+                    <li>
+                      <Link
+                        to="#"
+                        className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                      >
+                        Login
+                      </Link>
+                    </li>
                  </ul>
                </div>
              )}
@@ -11,6 +11,7 @@
      "dependencies": {
        "@ant-design/icons": "^5.6.1",
        "@tanstack/react-query": "^5.67.3",
+        "@tanstack/react-table": "^8.21.2",
        "axios": "^1.8.3",
        "clsx": "^2.1.1",
        "react": "^19.0.0",
@@ -8817,6 +8818,39 @@
        "react": "^18 || ^19"
      }
    },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.2.tgz",
+      "integrity": "sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.2.tgz",
+      "integrity": "sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "10.4.0",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -20,6 +20,7 @@
  "dependencies": {
    "@ant-design/icons": "^5.6.1",
    "@tanstack/react-query": "^5.67.3",
+    "@tanstack/react-table": "^8.21.2",
    "axios": "^1.8.3",
    "clsx": "^2.1.1",
    "react": "^19.0.0",
@@ -15,6 +15,7 @@
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
+      "@imphnen-frontend-service/service": ["libs/service/src/index.ts"],
      "@imphnen-frontend-service/ui/atoms": ["libs/ui/src/atoms/index.ts"],
      "@imphnen-frontend-service/ui/molecules": [
        "libs/ui/src/molecules/index.ts"
Author	SHA1	Message	Date
egagofur	340bd8c4bf	feat: add modal login gacha page	2025-03-29 17:26:54 +07:00
Maulana SodiqinandGitHub	88c71ccdfa	Merge pull request #6 from IMPHNEN/backoffice/auth Backoffice Login, Dashboard, Accounts, Transactions page	2025-03-28 20:05:34 +08:00
Hafid Nur	5b3b9e44fa	feat: Implement DataTable to backoffice pages - Halaman Data Akun - Halaman Validasi Transaksi	2025-03-28 18:50:54 +07:00
Hafid Nur	ac2ff2ec92	feat: Combine Pagination component into DataTable	2025-03-28 18:50:17 +07:00
Hafid Nur	79e0d39280	feat: separate DataTable component	2025-03-28 18:17:13 +07:00
Hafid Nur	fd9113109c	feat: Working TanStack pagination - Menerapkan TanStack Table dan Pagination	2025-03-28 17:29:06 +07:00
Hafid Nur	da7e1067d2	feat: Implement pagination - Terapkan pagination pada page Data Akun	2025-03-28 16:50:58 +07:00
Hafid Nur	75779b0373	feat: Simple implementation TanStack table Coba implementasikan versi paling sederhana TanStack Table v8 langsung ke page Data Akun	2025-03-28 16:21:27 +07:00
Hafid Nur	2ec6ad5b5c	feat: Add TanStack Table v8 and implement it to Datatable component	2025-03-28 00:19:01 +07:00
Hafid Nur	2d541c71ba	Merge branch into backoffice/auth	2025-03-27 23:19:45 +07:00
Hafid Nur	46f3bd6014	fix: Sidebar stick to left. Fit content for different desktop viewports	2025-03-27 23:17:43 +07:00
Hafid Nur	c374c97e66	fix: Sidebar stick to left. Fit content for different desktop viewports	2025-03-27 23:15:11 +07:00
Hafid Nur	a4ca53004f	feat: fix datatable storybook	2025-03-27 22:52:35 +07:00
Hafid Nur	2d9473ea7c	feat: Adjustment - Sesuaikan color palette success, info, danger, warning sesuai dengan design system Figma - Sesuai background pagination - Fix width form login tidak maksimal	2025-03-27 22:28:40 +07:00
Hafid Nur	6bfa48bed8	feat: Change data table component dynamically - Ubah komponen DataTable agar bisa render menyesuaikan jumlah kolom dan baris pada data	2025-03-27 17:22:04 +07:00
Hafid Nur	43167fe7a1	feat: Draft transaction page	2025-03-27 16:58:24 +07:00
Hafid Nur	39391e5522	feat: Page Data Akun	2025-03-27 16:55:54 +07:00
Hafid Nur	ec509a7b43	feat: Styling pagination	2025-03-27 16:41:42 +07:00
Hafid Nur	a76bd89ec1	feat: Styling data table component	2025-03-27 16:29:09 +07:00
Hafid Nur	cafdb29024	feat: Refactor datatable and pagination component and add storybook - Refactor nama component dari datatable dan pagination mengikuti codebase - Buat storybook untuk preview dari masing-masing komponen	2025-03-27 15:59:02 +07:00
Hafid Nur	d79d0d3d09	feat: Draft Data Akun page - Vibes coding untuk siapkan base dari halaman Data Akun	2025-03-27 15:17:04 +07:00
Hafid Nur	7606c5b4e2	feat: Divider on top of logout button sidebar	2025-03-27 15:08:22 +07:00
Hafid Nur	bc9a0fd740	feat: Another page template - Template untuk page Data Akun dan Validasi Transaksi	2025-03-27 15:06:30 +07:00
Hafid Nur	7f9a106fca	feat: Fix gacha image preview - Menggunakan pendekatan simpan gambar clipped langsung daripada mengatur secara dinamis menggunakan CSS object-position	2025-03-27 15:00:04 +07:00
Hafid Nur	0bcc8f7f6a	feat: gacha section in dashboard	2025-03-27 14:31:30 +07:00
Hafid Nur	31b7587571	feat: summary section in dashboard page	2025-03-27 13:35:13 +07:00
Hafid Nur	82fb1ea2bc	feat: Update sidebar - Perbaiki tampilan sidebar sesuai desain	2025-03-27 13:18:14 +07:00
Hafid Nur	bd5e46e712	feat: Draft dashboard AI-generated	2025-03-27 07:46:15 +07:00
Hafid Nur	542469bc67	feat: Update InputForm, Input, and auth page - Perbaiki page login ke halaman utama backoffice - Perbaiki component Input dan InputForm	2025-03-27 07:19:46 +07:00
Hafid Nur	631684cb05	feat: Update InputForm to handle different sizes - Tambah spec test pada komponen InputForm - Tambah autodocs pada komponen Input	2025-03-27 06:00:03 +07:00
Hafid Nur	54f4572533	feat: Update InputForm component - Perbarui docs untuk component Input dan InputForm - Perbarui component InputForm agar bekerja dengan helper text, error, dan label/input	2025-03-27 05:25:02 +07:00
Hafid Nur	ca933f624a	feat: Create a separate "InputForm" molecule component - Develop the "InputForm" molecule component - Remove empty modal-gacha component stories and test files that prevent Storybook from running	2025-03-27 04:35:41 +07:00
Hafid Nur	90ab974e03	feat: backoffice login page	2025-03-27 02:42:57 +07:00
Maulana Sodiqin	daeeb09798	feat: integrate with new api	2025-03-19 23:38:42 +07:00
Maulana SodiqinandGitHub	c8935b885e	Merge pull request #5 from IMPHNEN/ModalsGacha Modals gacha	2025-03-17 18:34:21 +07:00