refactor: add reusable select controls and enhance data table columns

src/components/data-table/Header/index.tsx

@@ -9,6 +9,7 @@ interface TopHeaderProps {
   onAddNew?: () => void;
   addButtonText?: string;
   toolbar?: React.ReactNode;
+  tableTools?: React.ReactNode;
 }
 
 const TopHeader = ({
@@ -17,6 +18,7 @@ const TopHeader = ({
   onAddNew,
   addButtonText = 'Add New',
   toolbar,
+  tableTools,
 }: TopHeaderProps) => {
   return (
     <div className="space-y-4">
@@ -34,7 +36,14 @@ const TopHeader = ({
           ) : null}
         </div>
       )}
-      {toolbar ? <div>{toolbar}</div> : null}
+      {(toolbar || tableTools) && (
+        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div className="min-w-0 flex-1">{toolbar}</div>
+          {tableTools ? (
+            <div className="flex shrink-0 justify-end">{tableTools}</div>
+          ) : null}
+        </div>
+      )}
     </div>
   );
 };