feat: Add page "Data Pengiriman Hadiah"

- Update sidebar link untuk halaman Data Pengiriman Hadiah
- Penyesuaian kecil pada style DataTable dan header page

apps/backoffice/src/app/transactions/page.tsx

@@ -39,7 +39,7 @@ const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
     : 'valid') as TransactionStatus,
 }));
 
-const columns: ColumnDef<Account>[] = [
+const columns: ColumnDef<Transaction>[] = [
   {
     id: 'select',
     header: ({ table }) => (
@@ -77,9 +77,9 @@ const columns: ColumnDef<Account>[] = [
     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',
+        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',
@@ -88,7 +88,7 @@ const columns: ColumnDef<Account>[] = [
       };
       return (
         <div
-          className={`py-1 px-3 rounded-md text-center ${statusColors[status]}`}
+          className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
         >
           {statusText[status]}
         </div>
@@ -140,7 +140,7 @@ export const Components: FC = (): ReactElement => {
   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">
+      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
         <h1 className="text-p2 font-semibold">Validasi Transaksi</h1>
       </header>