feat: add rowClassName prop to CardTable for dynamic row styling

resources/js/components/card-table.tsx

@@ -53,6 +53,7 @@ interface CardTableProps<TData> {
     onPerPageChange?: (perPage: number) => void;
 
     emptyText?: string;
+    rowClassName?: (item: TData) => string;
 }
 
 function useDebounce(callback: (value: string) => void, delay: number) {
@@ -87,6 +88,7 @@ export function CardTable<TData>({
     onPageChange,
     onPerPageChange,
     emptyText = 'Tidak ada data.',
+    rowClassName,
 }: CardTableProps<TData>) {
     const [localSearch, setLocalSearch] = React.useState(searchValue ?? '');
 
@@ -176,7 +178,7 @@ return true;
                         const isExpanded = isItemExpanded(key);
 
                         return (
-                            <div key={key} className="flex flex-col">
+                            <div key={key} className={`flex flex-col ${rowClassName?.(item) ?? ''}`}>
                                 {renderCard({
                                     item,
                                     index,

resources/js/pages/admin/manage/cutting/index.tsx

@@ -90,6 +90,11 @@ export default function CuttingIndex({ cuttings }: Props) {
                     pagination={pagination}
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
+                    rowClassName={(c) =>
+                        c.status === 'in_progress'
+                            ? 'border-l-4 border-l-yellow-500'
+                            : ''
+                    }
                     renderCard={({
                         item,
                         index,