imphnen-frontend-service/apps/backoffice/src/app/transactions/page.tsx

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;