ui improvements

frontend/src/templates/TablePageTemplate.tsx

@@ -142,14 +142,15 @@ interface TablePageTemplateProps {
     icon?: ReactNode;
     variant?: 'primary' | 'success' | 'danger';
   }>;
-  // Next action button for workflow guidance (shown in action bar)
-  nextAction?: {
+  // Primary workflow action button (shown before Bulk Actions, enabled only with selection)
+  primaryAction?: {
     label: string;
-    message?: string; // Message to show above button (e.g., "5 selected")
-    onClick?: () => void;
-    href?: string;
-    disabled?: boolean;
+    icon?: ReactNode;
+    onClick: () => void;
+    variant?: 'primary' | 'success' | 'warning';
   };
+  // Custom row highlight function (returns bg class based on row data)
+  getRowClassName?: (row: any) => string;
 }
 
 export default function TablePageTemplate({
@@ -186,7 +187,8 @@ export default function TablePageTemplate({
   className = '',
   customActions,
   bulkActions: customBulkActions,
-  nextAction,
+  primaryAction,
+  getRowClassName,
 }: TablePageTemplateProps) {
   const location = useLocation();
   const [isBulkActionsDropdownOpen, setIsBulkActionsDropdownOpen] = useState(false);
@@ -561,8 +563,27 @@ export default function TablePageTemplate({
     <div className={className}>
       {/* Bulk Actions and Action Buttons Row - Fixed height container */}
       <div className="flex items-center justify-between min-h-[65px] mb-4 mt-[10px]">
-        {/* Left side - Bulk Actions and Filter Toggle */}
+        {/* Left side - Primary Action, Bulk Actions, and Filter Toggle */}
         <div className="flex gap-2 items-center">
+          {/* Primary Workflow Action Button - Only enabled with selection */}
+          {primaryAction && (
+            <Button
+              size="md"
+              onClick={primaryAction.onClick}
+              disabled={selectedIds.length === 0}
+              variant={primaryAction.variant === 'success' ? 'success' : primaryAction.variant === 'warning' ? 'primary' : 'primary'}
+              startIcon={primaryAction.icon}
+              className={selectedIds.length === 0 ? "opacity-50 cursor-not-allowed" : ""}
+            >
+              {primaryAction.label}
+              {selectedIds.length > 0 && (
+                <span className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-white/20 text-white">
+                  {selectedIds.length}
+                </span>
+              )}
+            </Button>
+          )}
+          
           {/* Bulk Actions - Single button if only one action, dropdown if multiple */}
           {bulkActions.length > 0 && (
             <div className="inline-block">
@@ -750,44 +771,6 @@ export default function TablePageTemplate({
               {createLabel}
             </Button>
           )}
-          {/* Next Action Button - Workflow Guidance */}
-          {nextAction && (
-            <div className="flex flex-col items-end ml-2">
-              {nextAction.message && (
-                <span className="text-xs text-gray-500 dark:text-gray-400 mb-1">{nextAction.message}</span>
-              )}
-              {nextAction.href ? (
-                <a
-                  href={nextAction.href}
-                  className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
-                    nextAction.disabled
-                      ? 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'
-                      : 'bg-success-500 text-white hover:bg-success-600 dark:bg-success-600 dark:hover:bg-success-500'
-                  }`}
-                >
-                  {nextAction.label}
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                  </svg>
-                </a>
-              ) : (
-                <button
-                  onClick={nextAction.onClick}
-                  disabled={nextAction.disabled}
-                  className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
-                    nextAction.disabled
-                      ? 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'
-                      : 'bg-success-500 text-white hover:bg-success-600 dark:bg-success-600 dark:hover:bg-success-500'
-                  }`}
-                >
-                  {nextAction.label}
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                  </svg>
-                </button>
-              )}
-            </div>
-          )}
         </div>
       </div>
 
@@ -906,10 +889,13 @@ export default function TablePageTemplate({
                   // Use same logic as handleBulkAddSelected - check if isAdded is truthy
                   const isRowAdded = !!(row as any).isAdded;
                   
+                  // Get custom row class from prop if provided
+                  const customRowClass = getRowClassName ? getRowClassName(row) : '';
+                  
                   return (
                     <React.Fragment key={row.id || index}>
                       <TableRow 
-                        className={`igny8-data-row ${isRowAdded ? 'bg-blue-50 dark:bg-blue-500/10' : ''}`}
+                        className={`igny8-data-row ${isRowAdded ? 'bg-blue-50 dark:bg-blue-500/10' : ''} ${customRowClass}`}
                       >
                         {selection && (
                           <TableCell className="px-5 py-4 text-start">