diff --git a/resources/js/components/card-table.tsx b/resources/js/components/card-table.tsx
index 42c67f4..712083a 100644
--- a/resources/js/components/card-table.tsx
+++ b/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,
diff --git a/resources/js/pages/admin/manage/cutting/index.tsx b/resources/js/pages/admin/manage/cutting/index.tsx
index 0056602..0912f1c 100644
--- a/resources/js/pages/admin/manage/cutting/index.tsx
+++ b/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,