feat: add todo change using real button trigger

feat: add todo component otp input
feat: dyamic stepper form forgot password
2025-03-30 22:47:29 +07:00 · 2025-03-30 22:44:59 +07:00 · 2025-03-30 22:41:06 +07:00 · 2025-03-29 22:19:13 +08:00 · 2025-03-29 21:00:10 +07:00 · 2025-03-29 20:57:48 +07:00
153 changed files with 12128 additions and 526 deletions
@@ -42,4 +42,6 @@ Thumbs.db
 .nx/workspace-data

 vite.config.*.timestamp*
-vitest.config.*.timestamp*
+vitest.config.*.timestamp*
+
+storybook-static
@@ -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,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Backoffice</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+import { join } from 'path';
+
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {
+      base: join(import.meta.dirname, '../../'),
+    },
+  },
+};
@@ -0,0 +1,9 @@
+{
+  "name": "backoffice",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/backoffice/src",
+  "projectType": "application",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project backoffice --web",
+  "targets": {}
+}
@@ -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] 2xl:max-w-[1280px] mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,168 @@
+import * as React from 'react';
+
+import { FC, ReactElement, useState } from 'react';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  EditOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable, Filter } 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 Indah',
+}));
+
+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 [showFilter, setShowFilter] = useState(false);
+
+  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-lg 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>
+
+          <div className="relative">
+            <Button
+              variant="primary"
+              size="md"
+              className="flex items-center gap-3"
+              disabled
+              onClick={() => setShowFilter(!showFilter)}
+            >
+              <FilterOutlined />
+              Filters
+            </Button>
+            {showFilter && (
+              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                <Filter onClose={() => setShowFilter(false)} />
+              </div>
+            )}
+          </div>
+        </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] 2xl:max-w-[1280px] mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,145 @@
+import {
+  PlusOutlined,
+  ReloadOutlined,
+  UsergroupAddOutlined,
+  UsergroupDeleteOutlined,
+  UserSwitchOutlined,
+} 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-lg 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">
+              {/* Participants */}
+              <div 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">
+                  <UsergroupAddOutlined 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">Participants</p>
+                </div>
+              </div>
+
+              {/* Roll and Reroll */}
+              <div 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">
+                  <ReloadOutlined 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">
+                    Roll and Reroll
+                  </p>
+                </div>
+              </div>
+
+              {/* Redeem */}
+              <div 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">
+                  <UserSwitchOutlined 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">Redeem</p>
+                </div>
+              </div>
+
+              {/* Inactive Users */}
+              <div 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">
+                  <UsergroupDeleteOutlined 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">Inactive Users</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-red-500 p-0 font-normal hover:bg-transparent hover:text-red-700"
+                      >
+                        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.webp"
+                    alt="Lanyard IMPHNEN"
+                    className="h-full"
+                  />
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+
+        {/* Right-side illustration */}
+        <img
+          src="gacha.webp"
+          alt=""
+          className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
+        />
+      </div>
+    </main>
+  );
+};
+
+export default Components;
@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +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 => {
+  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] 2xl:max-w-[1280px] mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,232 @@
+import * as React from 'react';
+
+import { FC, ReactElement, useState } from 'react';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  AuditOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
+
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  useReactTable,
+  RowSelectionState,
+} from '@tanstack/react-table';
+
+type Status = 'valid' | 'invalid' | 'unchecked';
+
+interface Prize {
+  id: number;
+  name: string;
+  orderValid: Status;
+  items: string;
+  address: string;
+  status: Status;
+}
+
+const items = [
+  'Sertifikat + Laminating',
+  'Lanyard + ID Card',
+  'Pin',
+  'Sticker Isi 3',
+  'Sticker Isi 5',
+  'Gelang Karet',
+];
+
+// Mock data for transactions
+const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: 'Nama Lengkap',
+  orderValid: (i % 3 === 0
+    ? 'invalid'
+    : i % 5 === 0
+    ? 'unchecked'
+    : 'valid') as Status,
+  items: items[i % items.length],
+  address: 'Jl. Pantai Cibaduyut Indah',
+  status: (i % 3 === 0
+    ? 'unchecked'
+    : i % 5 === 0
+    ? 'invalid'
+    : 'valid') as Status,
+}));
+
+const columns: ColumnDef<Prize>[] = [
+  {
+    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: 'Order Valid?',
+    accessorKey: 'orderValid',
+    cell: ({ row }) => {
+      const status = row.original.orderValid;
+      const statusColors: Record<Status, string> = {
+        valid: 'bg-success-200 text-success-500',
+        invalid: 'bg-danger-200 text-danger-500',
+        unchecked: 'bg-warning-200 text-warning-900',
+      };
+      const statusText: Record<Status, string> = {
+        valid: 'Valid',
+        invalid: 'Invalid',
+        unchecked: 'Unchecked',
+      };
+      return (
+        <div
+          className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+        >
+          {statusText[status]}
+        </div>
+      );
+    },
+  },
+  {
+    header: 'Items',
+    accessorKey: 'items',
+  },
+  {
+    header: 'Alamat Pengiriman',
+    accessorKey: 'address',
+  },
+  {
+    header: 'Status',
+    accessorKey: 'status',
+    cell: ({ row }) => {
+      const status = row.original.status;
+      const statusColors: Record<Status, string> = {
+        valid: 'bg-success-200 text-success-500',
+        invalid: 'bg-danger-200 text-danger-500',
+        unchecked: 'bg-warning-200 text-warning-900',
+      };
+      const statusText: Record<Status, string> = {
+        valid: 'Valid',
+        invalid: 'Invalid',
+        unchecked: 'Unchecked',
+      };
+      return (
+        <div
+          className={`py-2 px-4 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]" /> Process
+      </Button>
+    ),
+  },
+];
+
+export const Components: FC = (): ReactElement => {
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [showFilter, setShowFilter] = useState(false);
+
+  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-lg shadow p-4">
+        <h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</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>
+
+          <div className="relative">
+            <Button
+              variant="primary"
+              size="md"
+              className="flex items-center gap-3"
+              onClick={() => setShowFilter(!showFilter)}
+            >
+              <FilterOutlined />
+              Filters
+            </Button>
+            {showFilter && (
+              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                <Filter onClose={() => setShowFilter(false)} />
+              </div>
+            )}
+          </div>
+        </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] 2xl:max-w-[1280px] mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { FC, ReactElement, useState } from 'react';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  AuditOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable, Filter } 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<Transaction>[] = [
+  {
+    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-200 text-success-500',
+        invalid: 'bg-danger-200 text-danger-500',
+        unchecked: 'bg-warning-200 text-warning-900',
+      };
+      const statusText: Record<TransactionStatus, string> = {
+        valid: 'Valid',
+        invalid: 'Invalid',
+        unchecked: 'Unchecked',
+      };
+      return (
+        <div
+          className={`py-2 px-4 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 [showFilter, setShowFilter] = useState(false);
+
+  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-lg 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>
+
+          <div className="relative">
+            <Button
+              variant="primary"
+              size="md"
+              className="flex items-center gap-3"
+              onClick={() => setShowFilter(!showFilter)}
+            >
+              <FilterOutlined />
+              Filters
+            </Button>
+            {showFilter && (
+              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                <Filter onClose={() => setShowFilter(false)} />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Table */}
+        <DataTable data={mockTransactions} columns={columns} table={table} />
+      </section>
+    </main>
+  );
+};
+
+export default Components;
@@ -0,0 +1,136 @@
+@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: #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: #f6f6f6;
+  --color-neutral-100: #e7e7e7;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
+  --color-neutral-600: #5d5d5d;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
+  --color-neutral-950: #2b2b2b;
+
+  --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-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-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-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;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 50%;
+
+  --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
+
+  --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,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-neutral-200, currentColor);
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    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);
+  }
+
+  html {
+    font-family: 'Bai Jamjuree', sans-serif;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 1.2;
+  }
+}
@@ -0,0 +1,40 @@
+import { createRoot } from 'react-dom/client';
+import { middleware } from './middleware';
+import { StrictMode } from 'react';
+import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
+import {
+  add404PageToRoutesChildren,
+  addErrorElementToRoutes,
+  convertPagesToRoute,
+  QueryProvider,
+} from '@imphnen-frontend-service/utils';
+import './index.css';
+
+const files = import.meta.glob('./app/**/*(page|layout).tsx');
+const errorFiles = import.meta.glob('./app/**/*error.tsx');
+const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
+const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
+
+const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
+addErrorElementToRoutes(errorFiles, routes);
+add404PageToRoutesChildren(notFoundFiles, routes);
+
+const router = createBrowserRouter([
+  {
+    ...routes,
+    loader: middleware,
+    shouldRevalidate: () => true,
+  },
+]);
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) throw new Error('Failed to find the root element');
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <QueryProvider>
+      <RouterProvider router={router} />
+    </QueryProvider>
+  </StrictMode>
+);
@@ -0,0 +1,11 @@
+import { LoaderFunctionArgs } from 'react-router-dom';
+
+export const middleware = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+
+  const pathname = url.pathname;
+
+  if (pathname) return null;
+
+  return null;
+};
@@ -0,0 +1,27 @@
+{
+  "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": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
@@ -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.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
@@ -0,0 +1,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "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,42 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+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/apps/backoffice',
+  server: {
+    port: 4200,
+    host: 'localhost',
+  },
+  preview: {
+    port: 4300,
+    host: 'localhost',
+  },
+  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  build: {
+    outDir: '../../dist/apps/backoffice',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/apps/backoffice',
+      provider: 'v8' as const,
+    },
+  },
+}));
@@ -6,8 +6,8 @@
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/src/styles.css" />
+    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
+    <link rel="stylesheet" href="/src/index.css" />
  </head>
  <body>
    <div id="root"></div>
@@ -1,5 +1,9 @@
+import { join } from 'path';
+
 export default {
  plugins: {
-    '@tailwindcss/postcss': {},
+    '@tailwindcss/postcss': {
+      base: join(import.meta.dirname, '../../'),
+    },
  },
 };
@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,23 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { ForgotStep, OtpForm } from "@imphnen-frontend-service/ui/molecules";
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
+      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
+          <ForgotStep step={2} />
+          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
+          <h5 className='mt-2 text-xl font-medium text-primary-500'>Yeay~! Pesan dari dunia lain (a.k.a email-mu) sudah tiba!</h5>
+          <OtpForm />
+          <Button>Summon Password Baru!</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;
@@ -0,0 +1,24 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { ForgotStep } from "@imphnen-frontend-service/ui/molecules";
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
+      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
+          <ForgotStep step={1} />
+          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
+          <h5 className='mt-2 text-xl font-medium text-primary-500'>Masukkan email-mu, dan biarkan kami memanggil password-mu kembali dari dunia lain!</h5>
+          <h6 className='text-gray-600 mt-8'>Email</h6>
+          <Input type='email' size='lg' placeholder='Contoh: yourname@mail.com'></Input>
+          <Button variant='primary' className='mt-7'>Kirim Kode OTP ^^</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;
@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,34 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { ForgotStep } from "@imphnen-frontend-service/ui/molecules";
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
+      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
+          <ForgotStep step={3} />
+          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
+          <h5 className='mt-2 text-md font-medium text-primary-500'>Sekarang, buatlah password baru yang lebih kuat, seperti jurus andalanmu!<span role="img" aria-label='emoji'>🔥⚡</span></h5>
+          <div className='my-4'>
+            <h6 className='text-gray-700'>Password Baru</h6>
+            <Input className='w-full' type="password" placeholder='Buat password sekokoh armor legendary!'/>
+            <h6 className='text-gray-700 mt-5'>Ulang Password Baru</h6>
+            <Input className='w-full' type="password" placeholder='Pastikan Cocok! Jangan sampai ada typo, Senpai~!'/>
+          </div>
+          <div className='mb-4 text-gray-700 flex flex-col gap-3 text-sm'>
+            <h6><span role='img' aria-label='emoji'>💡</span> Tips dari kami:</h6>
+            <h6><span role='img' aria-label='emoji'>✅ </span> Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!</h6>  
+            <h6><span role='img' aria-label='emoji'>✅</span> Pastikan kamu ingat password-mu atau simpan di tempat aman~</h6>  
+            <h6>Masukkan password baru dan bersiaplah untuk kembali bertualang!</h6>
+          </div>
+          <Button className='mt-5'>Summon Password Baru!</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;
@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,45 @@
+import { FC, ReactElement } from 'react';
+import { LoginBanner } from "@imphnen-frontend-service/ui/organisms"
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { useSearchParams } from 'react-router-dom';
+import { InputForm } from '@imphnen-frontend-service/ui/molecules';
+
+export const Components: FC = (): ReactElement => {
+  const [searchParams] = useSearchParams();
+  const error = searchParams.get("error"); // Ambil nilai ?error=
+
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
+      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+        <LoginBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center'>
+          <div className='w-[404px]'>
+            <h2 className='text-4xl font-semibold text-primary-500 text-center mb-2'>Hallo Minna-san</h2>
+            <h5 className='text-xl font-medium text-primary-500 text-center'>Welcome to Dimentorin by IMPHNEN</h5>
+            <InputForm label='Email' error={error ? error : undefined} size='lg' className='w-full' placeholder='Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)' />
+            <InputForm label="password" error={error ? error : undefined} className='w-full' size='lg' type='password' placeholder='Masukkan password rahasiamu!' />
+            <div className='flex justify-end my-5'>
+              <a href="/auth/forgot" className='text-primary-500 font-medium'>Lupa Password ?</a>
+            </div>
+            <Button className='w-full'>Enter Isekai</Button>
+            <div className='flex my-3 gap-3 justify-center'>
+              <h5>Belum Punya akun ?</h5>
+              <a href="/auth/register" className='text-primary-500 font-medium'>Daftar Disini</a>
+            </div>
+            <div className="flex items-center w-full">
+              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
+              <span className="px-3 text-blue-400">Or</span>
+              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
+            </div>
+            <Button className='w-full my-3 text-gray-500 gap-2' variant='secondary'>
+              <p>Log In With Google</p>
+              <img src="/image/33978ce5bed2da9bf9d73acad802182a.webp" alt="Google Icon" width={24}/>
+            </Button>
+          </div> 
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;
@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;
@@ -0,0 +1,19 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
+      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center'>
+          <div className='w-[404px]'>
+          </div> 
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;
@@ -1,5 +1,6 @@
@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;
@@ -6,7 +6,7 @@
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
    <link rel="stylesheet" href="/src/index.css" />
  </head>
  <body>
@@ -1,5 +1,9 @@
+import { join } from 'path';
+
 export default {
  plugins: {
-    '@tailwindcss/postcss': {},
+    '@tailwindcss/postcss': {
+      base: join(import.meta.dirname, '../../'),
+    },
  },
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
egagofur	f39466936f	feat: add todo change using real button trigger	2025-03-30 22:47:29 +07:00
egagofur	5d418830b9	feat: add todo component otp input	2025-03-30 22:44:59 +07:00
egagofur	d58ad58ef8	feat: dyamic stepper form forgot password	2025-03-30 22:41:06 +07:00
Maulana Sodiqin	b62c762cf9	Merge pull request #7 from IMPHNEN/DimentorinAuth feat: Auth	2025-03-29 22:19:13 +08:00
Naufal Azmi	4e665cca76	Merge branch 'develop' into DimentorinAuth	2025-03-29 21:00:10 +07:00
boboiazumi	74c0ebc5dd	fix: bugs	2025-03-29 20:57:48 +07:00
boboiazumi	eadd554a32	fix: conflict	2025-03-29 20:47:38 +07:00
boboiazumi	ecdaa4a82e	feat: Forgot Password Slicing, fix: webp image	2025-03-29 20:42:54 +07:00
Maulana Sodiqin	747e75e684	Merge pull request #8 from IMPHNEN/feat/backoffice Backoffice Update	2025-03-29 21:18:10 +08:00
Maulana Sodiqin	76637dd051	Merge pull request #10 from IMPHNEN/feat/modal-unit-test-and-storybook Feat/modal unit test and storybook	2025-03-29 21:16:51 +08:00
egagofur	3dda8149ba	Merge branch 'develop' into feat/modal-unit-test-and-storybook	2025-03-29 17:56:39 +07:00
egagofur	cc21735468	feat: unit test and storybook modal	2025-03-29 17:56:18 +07:00
Maulana Sodiqin	a6bc6de72e	Merge pull request #9 from IMPHNEN/feat/gacha-modal-login feat: add modal login gacha page	2025-03-29 18:33:12 +08:00
egagofur	340bd8c4bf	feat: add modal login gacha page	2025-03-29 17:26:54 +07:00
Hafid Nur	1594be9d46	feat: slicing modal backoffice - Slicing desain modal untuk backoffice di storybook component ModalBackoffice - Update static directory untuk storybook agar dapat membaca gambar pada folder public - Minor edit component button & input	2025-03-29 02:34:02 +07:00
Hafid Nur	7eecf2621d	feat: add filter popover component for delivery status - Tambah fungsional close button untuk komponen Filter - Penyesuaian warna neutral sesuai Design System	2025-03-29 01:17:32 +07:00
Hafid Nur	088a0fc41f	feat: Add Filter component	2025-03-29 00:59:25 +07:00
Hafid Nur	9178c65c4a	feat: Add page "Data Pengiriman Hadiah" - Update sidebar link untuk halaman Data Pengiriman Hadiah - Penyesuaian kecil pada style DataTable dan header page	2025-03-28 22:41:55 +07:00
Hafid Nur	f93d741cef	feat: Minor adjustment - Optimize gambar dengan webp - Perlebar tampilan utama di layar besar - Fix DataTable props	2025-03-28 21:46:10 +07:00
Naufal Azmi	81fa73935f	Merge branch 'develop' into DimentorinAuth	2025-03-28 19:09:37 +07:00
Maulana Sodiqin	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
boboiazumi	a3887519f9	feat: Login Page	2025-03-28 11:46: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 Sodiqin	c8935b885e	Merge pull request #5 from IMPHNEN/ModalsGacha Modals gacha	2025-03-17 18:34:21 +07:00
boboiazumi	4ac1278a33	fix: conflict	2025-03-17 18:13:24 +07:00
Maulana Sodiqin	d20f0d89e5	feat: init backoffice	2025-03-17 12:48:11 +07:00
Maulana Sodiqin	515b78c57f	feat: add backoffice apps	2025-03-17 09:39:04 +07:00
Maulana Sodiqin	8a53575cd1	Merge pull request #4 from IMPHNEN/feat/simple-landing-page Roulette page	2025-03-17 09:29:43 +07:00
Hafid Nur	c8b12db1b3	feat: linear gradient diffuser	2025-03-16 22:53:13 +07:00
Hafid Nur	e3c4b7a23a	feat: infinite scroll animation for gacha items	2025-03-16 22:25:29 +07:00
boboiazumi	41a0842026	feat: modals-gacha	2025-03-16 22:18:48 +07:00
Hafid Nur	a9164e5e5f	feat: gacha item horizontal scroll snap	2025-03-16 22:16:52 +07:00
Hafid Nur	d7e39095bb	feat: separate GachaItem component and add more Gacha items (images and labels) TODO: - implement an infinite scroll snap slider for Gacha items	2025-03-16 21:42:45 +07:00
Hafid Nur	84ddf2b771	feat: draft roulette page	2025-03-16 20:40:18 +07:00
Hafid Nur	cb632adbb4	feat: change the layout of the landing page from using CSS Flexbox to CSS Grid - minor adjustment for navbar max width and padding	2025-03-16 19:54:42 +07:00
Hafid Nur	6a1fa42956	feat: update navbar to cover top of the page - Update the navbar to be sticky when scrolling the page and cover the top of the page. - Fix the margins for every viewport.	2025-03-16 19:19:44 +07:00
Hafid Nur	9002e6a261	feat: merge landing page component into single page file - Component landing page sebelumnya terpisah, tetapi perlu digabungkan lagi karena tidak reusable pada aplikasi	2025-03-16 19:13:49 +07:00
Maulana Sodiqin	254d4fe04a	Merge pull request #2 from IMPHNEN/feat/simple-landing-page Slicing simple landing page	2025-03-16 12:39:12 +07:00
Hafid Nur	02e06caca1	feat: landing page for desktop viewport	2025-03-16 07:41:16 +07:00
Hafid Nur	00033b9c68	feat: landing page for tablet viewport - change "scroll for gacha" to button to roulette page	2025-03-16 07:11:06 +07:00
Hafid Nur	02863ebc8b	feat: add landing page for mobile viewport	2025-03-16 06:38:14 +07:00
Hafid Nur	a31166e3ff	feat: update navbar responsive	2025-03-16 06:07:07 +07:00
Hafid Nur	c7b74bc9b6	feat: update theme to match the Design System adjustment - primary color - base + typography size	2025-03-16 05:42:24 +07:00
Maulana Sodiqin	01621a8786	Merge pull request #1 from IMPHNEN/feat/component-migrate Migrate component from 'imphnen-gacha' repository	2025-03-16 01:45:33 +07:00
hafidnrzs	a07e3c21d6	feat: add Textarea component	2025-03-16 01:40:02 +07:00
hafidnrzs	fb99b41b3a	feat: add PasswordInput component	2025-03-16 01:34:24 +07:00
Hafid Nur	183ca100dc	feat: add Input component	2025-03-16 00:56:02 +07:00
Maulana Sodiqin	203ee5de97	chore: remove uneeded folder/file	2025-03-16 00:35:48 +07:00
Maulana Sodiqin	58843041db	faet	2025-03-16 00:33:48 +07:00
Maulana Sodiqin	3964c22c66	feat: navbar unit test	2025-03-16 00:16:58 +07:00
Maulana Sodiqin	ec02a4ef83	fix: unit test	2025-03-16 00:12:15 +07:00
Maulana Sodiqin	587cb9facf	fix: ui error build	2025-03-16 00:07:02 +07:00
Maulana Sodiqin	5c5faaf8a1	fix: libs cannot apply style	2025-03-16 00:05:17 +07:00