more fixes ui

frontend/src/templates/TablePageTemplate.tsx

@@ -164,6 +164,8 @@ interface TablePageTemplateProps {
   };
   // Custom row highlight function (returns bg class based on row data)
   getRowClassName?: (row: any) => string;
+  // Status explainer component to display on right side of table actions row
+  statusExplainer?: ReactNode;
 }
 
 export default function TablePageTemplate({
@@ -202,6 +204,7 @@ export default function TablePageTemplate({
   bulkActions: customBulkActions,
   primaryAction,
   getRowClassName,
+  statusExplainer,
 }: TablePageTemplateProps) {
   const location = useLocation();
   const [isBulkActionsDropdownOpen, setIsBulkActionsDropdownOpen] = useState(false);
@@ -752,8 +755,17 @@ export default function TablePageTemplate({
           </div>
         )}
         
-        {/* Right side - Action Buttons */}
-        <div className="flex gap-2 items-center">
+        {/* Right side - Status Explainer and Action Buttons */}
+        <div className="flex gap-4 items-start">
+          {/* Status Explainer */}
+          {statusExplainer && (
+            <div className="text-right">
+              {statusExplainer}
+            </div>
+          )}
+          
+          {/* Action Buttons */}
+          <div className="flex gap-2 items-center">
           {/* Custom Actions */}
           {customActions}
           {onExportCSV && (
@@ -786,6 +798,7 @@ export default function TablePageTemplate({
               {createLabel}
             </Button>
           )}
+          </div>
         </div>
       </div>