keywrod slibrary page dsigning

frontend/src/templates/TablePageTemplate.tsx

@@ -183,6 +183,9 @@ interface TablePageTemplateProps {
   getRowClassName?: (row: any) => string;
   // Custom checkbox column width (default: w-12 = 48px)
   checkboxColumnWidth?: string;
+  // Filter bar behavior
+  defaultShowFilters?: boolean;
+  centerFilters?: boolean;
 }
 
 export default function TablePageTemplate({
@@ -222,6 +225,8 @@ export default function TablePageTemplate({
   primaryAction,
   getRowClassName,
   checkboxColumnWidth = '48px',
+  defaultShowFilters = false,
+  centerFilters = false,
 }: TablePageTemplateProps) {
   const location = useLocation();
   const [isBulkActionsDropdownOpen, setIsBulkActionsDropdownOpen] = useState(false);
@@ -230,7 +235,7 @@ export default function TablePageTemplate({
   const bulkActionsButtonRef = React.useRef<HTMLButtonElement>(null);
   
   // Filter toggle state - hidden by default
-  const [showFilters, setShowFilters] = useState(false);
+  const [showFilters, setShowFilters] = useState(defaultShowFilters);
   
   // Get notification config for current page
   const deleteModalConfig = getDeleteModalConfig(location.pathname);
@@ -765,8 +770,8 @@ export default function TablePageTemplate({
         
         {/* Filters Row - Below action buttons, left aligned with shadow */}
         {showFilters && (renderFilters || filters.length > 0) && (
-          <div className="flex justify-start py-1.5 mb-2.5">
-            <div className="inline-flex bg-gray-50 dark:bg-gray-800/30 rounded-lg px-4 py-2 border border-gray-200 dark:border-gray-700 shadow-md">
+          <div className={`flex py-1.5 mb-2.5 ${centerFilters ? 'justify-center' : 'justify-start'}`}>
+            <div className={`inline-flex bg-gray-50 dark:bg-gray-800/30 rounded-lg px-4 py-2 border border-gray-200 dark:border-gray-700 shadow-md ${centerFilters ? 'mx-auto' : ''}`}>
               <div className="flex gap-2 items-center flex-wrap">
                 {renderFilters ? (
                   renderFilters