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
114 changed files with 10160 additions and 511 deletions
@@ -43,3 +43,5 @@ Thumbs.db
 vite.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] 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;
@@ -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] 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;
@@ -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: #d0d0d0;
  --color-neutral-300: #b7b7b7;
  --color-neutral-400: #9f9f9f;
  --color-neutral-500: #7e7e7e;
  --color-neutral-600: #5d5d5d;
  --color-neutral-700: #4a4a4a;
  --color-neutral-800: #3a3a3a;
  --color-neutral-900: #2f2f2f;
  --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="icon" type="image/x-icon" href="/logos/simple.svg" />
-    <link rel="stylesheet" href="/src/styles.css" />
+    <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, '../../'),
    },
  },
 };
@@ -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, '../../'),
    },
  },
 };
@@ -4,7 +4,7 @@ import { Navbar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
  return (
-    <main className="bg-primary-50 min-h-screen px-20 py-[60px]">
+    <main className="bg-primary-50 min-h-screen">
      <Navbar />
      <Outlet />
    </main>
@@ -1,7 +1,281 @@
-import { FC, ReactElement } from 'react';
+import { ArrowDownOutlined } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 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 { Link } from 'react-router';
 interface GachaItemProps {
  src: string;
  label: string;
  className?: string;
 }
 export const Components: FC = (): ReactElement => {
-  return <>Hallo</>;
+  // Pinjem
  const [showModal, setShowModal] = useState(false);
  const scrollToRoulette = () => {
    const rouletteSection = document.getElementById('roulette');
    if (rouletteSection) {
      rouletteSection.scrollIntoView({ behavior: 'smooth' });
    }
  };
  useEffect(() => {
    const gachaPlaySection = document.getElementById('gacha-play');
    if (gachaPlaySection) {
      let currentIndex = 0;
      const items = gachaPlaySection.children;
      const totalItems = items.length;
      const scrollItems = () => {
        if (currentIndex >= totalItems) {
          currentIndex = 0;
        }
        items[currentIndex].scrollIntoView({
          behavior: 'smooth',
          inline: 'center',
        });
        currentIndex++;
      };
      const intervalId = setInterval(scrollItems, 2800);
      return () => clearInterval(intervalId);
    }
  }, []);
  const GachaItem: FC<GachaItemProps> = ({
    src,
    label,
    className,
  }): ReactElement => {
    return (
      <div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full">
        <div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
          <img
            src={src}
            alt=""
            className={cn('h-[150px] md:h-[255px] object-contain', className)}
          />
        </div>
        <p className="font-semibold text-center md:text-p2">{label}</p>
      </div>
    );
  };
  return (
    <Fragment>
      {/* Landing Page */}
      <section
        id="landing-page"
        className="my-12 md:my-24 grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center max-w-[1280px] items-center justify-center mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto"
      >
        <div className="order-none lg:order-1 flex flex-col col-span-4 md:col-span-8 lg:col-span-4 md:w-full lg:w-fit items-center gap-7 md:gap-13 text-primary-500 mb-10 md:mb-20">
          <img
            src="/logos/logo.svg"
            alt="IMPHNEN Logo"
            className="w-[170px] md:w-[317px]"
          />
          <div className="font-semibold text-center">
            <div className="text-p1 md:text-h2 lg:font-bold text-center">
              <p>New Merchandise</p>
              <p>Coming UP</p>
            </div>
            <div className="text-base md:text-p2 mt-3">
              Periode Gacha: 1 - 31 Maret 2025
            </div>
          </div>
          <div className="text-center font-semibold text-p3 md:text-p1">
            <p>Let's Go Checkout Our Merch &</p>
            <p>Gacha Your Prize Here</p>
          </div>
          <Button
            size="sm"
            variant="bordered"
            className="flex gap-3 px-3 md:px-5 py-2 md:py-4 bg-primary-100 border border-primary-500 border-dashed rounded md:rounded-md animate-bounce text-label2 md:text-p2"
            onClick={scrollToRoulette}
          >
            <ArrowDownOutlined />
            <span>Scroll For Gacha</span>
            <ArrowDownOutlined />
          </Button>
        </div>
        <div className="order-1 lg:order-none flex flex-col col-span-4 justify-center items-center mb-8 relative">
          <div className="relative h-[150px] md:h-[230px]">
            <img
              src="/merch/1.png"
              alt="Merch 1"
              className="relative top-[3px] md:top-[6px] left-[4px] md:left-[7px] z-10 w-[165px] md:w-[266px]"
            />
            <img
              className="absolute top-0 left-0 min-w-[174px] md:min-w-[280px] z-0"
              src="/merch/Vector-1.svg"
              alt=""
            />
            <img
              className="absolute hidden lg:block -bottom-[50px] -right-[50px]"
              src="/landing-arrow-1.svg"
              alt=""
            />
          </div>
          <div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
            Official Merch IMPHNEN
          </div>
          <div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
            ~ 175k ~
          </div>
        </div>
        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
          <div className="relative h-[130px] md:h-[230px]">
            <img
              src="/merch/2.png"
              alt="Merch 2"
              className="relative top-[5px] md:top-[8px] left-0 md:left-[5px] z-10 w-[165px] md:w-[277px]"
            />
            <img
              className="absolute top-0 -left-[5px] md:-left-[8px] z-0 min-w-[174px] md:min-w-[302px]"
              src="/merch/Vector-2.svg"
              alt=""
            />
            <img
              className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
              src="/landing-arrow-2.svg"
              alt=""
            />
          </div>
          <div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
            IMPHNEN Mini Merch
          </div>
          <div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
            ~ 90k ~
          </div>
        </div>
      </section>
      {/* Roulette Page */}
      <section
        id="roulette"
        className="mt-20 pb-50 lg:py-90 mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto lg:max-w-[1280px] grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center gap-y-16 md:gap-y-28"
      >
        <div className="col-span-4 md:col-span-8 lg:col-span-6 text-primary-500 bg-white rounded-lg md:rounded-xl p-5 md:py-9 md:px-13 shadow md:max-w-[430px]">
          <header className="mb-4">
            <h3 className="font-semibold text-p3 md:text-h2">Gacha Roulette</h3>
          </header>
          <h4 className="font-semibold my-2 text-base md:text-p1">
            How to participate
          </h4>
          <p className="text-base md:text-p2">
            Kamu harus melakukan pembelian merch batch 2 di shopee IMPHNEN
          </p>
          <h4 className="font-semibold my-2 text-base md:text-p1">
            How to gacha
          </h4>
          <ol className="text-base md:text-p2 list-decimal list-outside ml-4 md:ml-6">
            <li>First, press the "Spin Now" button</li>
            <li>
              If the merch does not match you can reroll by paying IDR5,000
            </li>
            <li>If it is appropriate you can submit</li>
            <li>Then fill in the data for your merch delivery process</li>
          </ol>
        </div>
        <div
          id="roulette-spin"
          className="col-span-4 md:col-span-8 lg:col-span-6 flex flex-col items-center gap-4 md:gap-8 overflow-x-hidden"
        >
          <div className="bg-white text-primary-500 font-medium text-p3 md:text-h3 shadow py-2 px-4 md:py-4 md:px-8 max-w-fit rounded-md md:rounded-lg">
            Here Take Your Prize
          </div>
          <section
            id="gacha-play"
            className="flex flex-nowrap overflow-auto w-full gap-x-8 snap-x snap-mandatory"
          >
            <GachaItem
              src="/gacha/certificate.png"
              label="Sertifikat + Laminating"
            />
            <GachaItem
              src="/gacha/lanyard-id-card.png"
              label="Lanyard + ID Card"
            />
            <GachaItem src="/gacha/pin.png" label="Pin" />
            <GachaItem src="/gacha/sticker.png" label="Sticker Isi 3" />
            <GachaItem src="/gacha/sticker.png" label="Sticker Isi 5" />
            <GachaItem
              src="/gacha/gelang-karet.png"
              label="Gelang Karet"
              className="h-[86px] md:h-[160px]"
            />
          </section>
          <Button variant="secondary" size="md">
            Spin Now
          </Button>
        </div>
      </section>
      {/* Diffuser & Cloud */}
      <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 */}
      <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>
  );
 };
 export default Components;
@@ -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-200: #bce1fb;
-  --color-primary-300: #a1d4f0;
+  --color-primary-300: #81cbf8;
-  --color-primary-400: #4aa4da;
+  --color-primary-400: #3eb0f2;
-  --color-primary-500: #1a8ce6;
+  --color-primary-500: #23a1eb;
-  --color-primary-600: #1673c7;
+  --color-primary-600: #0877c1;
-  --color-primary-700: #0f5ca5;
+  --color-primary-700: #085f9c;
-  --color-primary-800: #0a4780;
+  --color-primary-800: #0b5181;
-  --color-primary-900: #04305d;
+  --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: #e0fbd8;
-  --color-success-100: #cde6dd;
+  --color-success-200: #bcf8b0;
-  --color-success-200: #9bccbc;
+  --color-success-300: #8eea85;
-  --color-success-300: #78bdab;
+  --color-success-400: #63d564;
-  --color-success-400: #4ca88f;
+  --color-success-500: #35ba43;
-  --color-success-500: #349078;
+  --color-success-600: #269f3e;
-  --color-success-600: #2f7c66;
+  --color-success-700: #1a8439;
-  --color-success-700: #26624f;
+  --color-success-800: #106b32;
-  --color-success-800: #1e4a3b;
+  --color-success-900: #0b592f;
  --color-success-900: #1b513b;
-  --color-info-50: #e7f4f5;
+  --color-info-100: #ccfcfe;
-  --color-info-100: #cce9ea;
+  --color-info-200: #9bf3fd;
-  --color-info-200: #99d3d5;
+  --color-info-300: #67e3fb;
-  --color-info-300: #78c4c7;
+  --color-info-400: #42cdf8;
-  --color-info-400: #3aa9ad;
+  --color-info-500: #04acf3;
-  --color-info-500: #279599;
+  --color-info-600: #0185d0;
-  --color-info-600: #207d82;
+  --color-info-700: #0264af;
-  --color-info-700: #1a666b;
+  --color-info-800: #01478d;
-  --color-info-800: #124c52;
+  --color-info-900: #003375;
  --color-info-900: #093d43;
-  --color-warning-50: #fffce6;
+  --color-warning-100: #fffcd3;
-  --color-warning-100: #fff8cc;
+  --color-warning-200: #fffaa9;
-  --color-warning-200: #fef39b;
+  --color-warning-300: #fff67d;
-  --color-warning-300: #fde967;
+  --color-warning-400: #fff25d;
-  --color-warning-400: #fbd93d;
+  --color-warning-500: #ffed27;
-  --color-warning-500: #f3c215;
+  --color-warning-600: #dbc91d;
-  --color-warning-600: #d7a20f;
+  --color-warning-700: #b7a714;
-  --color-warning-700: #aa7e0c;
+  --color-warning-800: #93850b;
-  --color-warning-800: #805c07;
+  --color-warning-900: #7a6d07;
  --color-warning-900: #665c00;
-  --color-danger-50: #ffe7e7;
+  --color-danger-100: #ffe8da;
-  --color-danger-100: #ffcece;
+  --color-danger-200: #ffcbb3;
-  --color-danger-200: #ff9f9f;
+  --color-danger-300: #ffaa8d;
-  --color-danger-300: #ff6e6e;
+  --color-danger-400: #ff8870;
-  --color-danger-400: #fa4646;
+  --color-danger-500: #ff5242;
-  --color-danger-500: #ef1f1f;
+  --color-danger-600: #da3030;
-  --color-danger-600: #d11515;
+  --color-danger-700: #b7212d;
-  --color-danger-700: #a51111;
+  --color-danger-800: #93152a;
-  --color-danger-800: #7f0c0c;
+  --color-danger-900: #7a0c27;
  --color-danger-900: #5d2d2d;
  --radius-none: 0px;
  --radius-sm: 2px;
@@ -79,16 +78,28 @@
  --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
-  --text-h1: 3rem; /* ~48px */
+  --text-h1: 3.833rem;
-  --text-h2: 2.4rem; /* ~38.4px */
+  /* ~46px */
-  --text-h3: 1.92rem; /* ~30.72px */
+  --text-h2: 3.083rem;
-  --text-p1: 1.54rem; /* ~24.58px */
+  /* ~37px */
-  --text-p2: 1.23rem; /* ~19.68px */
+  --text-h3: 2.417rem;
-  --text-label1: 0.98rem; /* ~15.74px */
+  /* ~29px */
-  --text-label2: 0.78rem; /* ~12.59px */
+  --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;
  }
 }
@@ -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: {},
  },
 ];
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
egagofur	340bd8c4bf	feat: add modal login gacha page	2025-03-29 17:26:54 +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
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