From 1bdf413650e285dcbeae1c29bae105aa01c63580 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 19 Feb 2026 13:33:11 +0700
Subject: [PATCH] feat(FE): Add badge display for category columns in tables

---
 .../IncomingSapronaksSummaryTable.tsx         | 45 ++++++++++++++++++-
 .../table/sapronak/IncomingSapronaksTable.tsx | 45 ++++++++++++++++++-
 .../OutgoingSapronaksSummaryTable.tsx         | 45 ++++++++++++++++++-
 .../table/sapronak/OutgoingSapronaksTable.tsx | 45 +++++++++++++++++++
 4 files changed, 177 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx b/src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx
index 8980603d..78773dbb 100644
--- a/src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx
+++ b/src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx
@@ -7,8 +7,9 @@ import { ColumnDef, SortingState } from '@tanstack/react-table';
 
 import Table from '@/components/Table';
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 
-import { formatNumber } from '@/lib/helper';
+import { cn, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
@@ -66,6 +67,48 @@ const ClosingIncomingSapronaksSummaryTable = ({
       {
         accessorKey: 'category',
         header: 'Kategori',
+        cell: (props) => {
+          const categories = props.row.original.category
+            .split(' ')
+            .filter((cat) => cat.trim());
+          const maxBadges = 4;
+          const visibleCategories = categories.slice(0, maxBadges);
+          const remainingCount = categories.length - maxBadges;
+
+          return (
+            <div className='flex flex-wrap gap-1 whitespace-nowrap'>
+              {visibleCategories.map((category, index) => (
+                <Badge
+                  key={index}
+                  variant='soft'
+                  className={{
+                    badge: cn(
+                      'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/5 whitespace-nowrap'
+                    ),
+                  }}
+                  title={category}
+                >
+                  {category.length > 12
+                    ? `${category.slice(0, 12)}...`
+                    : category}
+                </Badge>
+              ))}
+              {remainingCount > 0 && (
+                <Badge
+                  variant='soft'
+                  className={{
+                    badge: cn(
+                      'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/20'
+                    ),
+                  }}
+                  title={categories.join(' ')}
+                >
+                  +{remainingCount}
+                </Badge>
+              )}
+            </div>
+          );
+        },
       },
       {
         accessorKey: 'total_qty',
diff --git a/src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx b/src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx
index 9dd9bc45..b0bd2744 100644
--- a/src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx
+++ b/src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx
@@ -9,8 +9,9 @@ import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 
-import { formatDate, formatNumber } from '@/lib/helper';
+import { cn, formatDate, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
@@ -79,6 +80,48 @@ const ClosingIncomingSapronaksTable = ({
     {
       accessorKey: 'product_category',
       header: 'Kategori Produk',
+      cell: (props) => {
+        const categories = props.row.original.product_category
+          .split(' ')
+          .filter((cat) => cat.trim());
+        const maxBadges = 4;
+        const visibleCategories = categories.slice(0, maxBadges);
+        const remainingCount = categories.length - maxBadges;
+
+        return (
+          <div className='flex flex-wrap gap-1 whitespace-nowrap'>
+            {visibleCategories.map((category, index) => (
+              <Badge
+                key={index}
+                variant='soft'
+                className={{
+                  badge: cn(
+                    'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/5 whitespace-nowrap'
+                  ),
+                }}
+                title={category}
+              >
+                {category.length > 12
+                  ? `${category.slice(0, 12)}...`
+                  : category}
+              </Badge>
+            ))}
+            {remainingCount > 0 && (
+              <Badge
+                variant='soft'
+                className={{
+                  badge: cn(
+                    'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/20'
+                  ),
+                }}
+                title={categories.join(' ')}
+              >
+                +{remainingCount}
+              </Badge>
+            )}
+          </div>
+        );
+      },
     },
     {
       accessorKey: 'source_warehouse',
diff --git a/src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx b/src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx
index e0bae0f7..b50b012b 100644
--- a/src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx
+++ b/src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx
@@ -7,8 +7,9 @@ import { ColumnDef, SortingState } from '@tanstack/react-table';
 
 import Table from '@/components/Table';
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 
-import { formatNumber } from '@/lib/helper';
+import { cn, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
@@ -66,6 +67,48 @@ const ClosingOutgoingSapronaksSummaryTable = ({
       {
         accessorKey: 'category',
         header: 'Kategori',
+        cell: (props) => {
+          const categories = props.row.original.category
+            .split(' ')
+            .filter((cat) => cat.trim());
+          const maxBadges = 4;
+          const visibleCategories = categories.slice(0, maxBadges);
+          const remainingCount = categories.length - maxBadges;
+
+          return (
+            <div className='flex flex-wrap gap-1 whitespace-nowrap'>
+              {visibleCategories.map((category, index) => (
+                <Badge
+                  key={index}
+                  variant='soft'
+                  className={{
+                    badge: cn(
+                      'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/5 whitespace-nowrap'
+                    ),
+                  }}
+                  title={category}
+                >
+                  {category.length > 12
+                    ? `${category.slice(0, 12)}...`
+                    : category}
+                </Badge>
+              ))}
+              {remainingCount > 0 && (
+                <Badge
+                  variant='soft'
+                  className={{
+                    badge: cn(
+                      'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/20'
+                    ),
+                  }}
+                  title={categories.join(' ')}
+                >
+                  +{remainingCount}
+                </Badge>
+              )}
+            </div>
+          );
+        },
       },
       {
         accessorKey: 'total_qty',
diff --git a/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx b/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx
index 4143c499..23e3e8b0 100644
--- a/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx
+++ b/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx
@@ -9,6 +9,9 @@ import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
+
+import { cn } from '@/lib/helper';
 
 import { formatDate, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -79,6 +82,48 @@ const ClosingOutgoingSapronaksTable = ({
     {
       accessorKey: 'product_category',
       header: 'Kategori Produk',
+      cell: (props) => {
+        const categories = props.row.original.product_category
+          .split(' ')
+          .filter((cat) => cat.trim());
+        const maxBadges = 4;
+        const visibleCategories = categories.slice(0, maxBadges);
+        const remainingCount = categories.length - maxBadges;
+
+        return (
+          <div className='flex flex-wrap gap-1 whitespace-nowrap'>
+            {visibleCategories.map((category, index) => (
+              <Badge
+                key={index}
+                variant='soft'
+                className={{
+                  badge: cn(
+                    'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/5 whitespace-nowrap'
+                  ),
+                }}
+                title={category}
+              >
+                {category.length > 12
+                  ? `${category.slice(0, 12)}...`
+                  : category}
+              </Badge>
+            ))}
+            {remainingCount > 0 && (
+              <Badge
+                variant='soft'
+                className={{
+                  badge: cn(
+                    'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/20'
+                  ),
+                }}
+                title={categories.join(' ')}
+              >
+                +{remainingCount}
+              </Badge>
+            )}
+          </div>
+        );
+      },
     },
     {
       accessorKey: 'source_warehouse',