add simple search component

frontend/src/app/components/common/SimpleSearch.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+
+interface SimpleSearchProps<T extends Record<string, any>> {
+  searchKeys: string[];
+  data: T[];
+  onSearch: (filteredData: T[]) => void;
+}
+
+const SimpleSearch = <T extends Record<string, any>>({ searchKeys, data, onSearch }: SimpleSearchProps<T>) => {
+  const [filterText, setFilterText] = useState('');
+
+  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const text = event.target.value;
+    setFilterText(text);
+
+    const filteredData = data.filter((item) =>
+      searchKeys.some((key) => item[key]?.toString().toLowerCase().includes(text.toLowerCase()))
+    );
+
+    onSearch(filteredData);
+  };
+
+  return (
+    <div>
+      <input type="text" placeholder="Search..." value={filterText} onChange={handleFilterChange} />
+    </div>
+  );
+};
+
+export default SimpleSearch;

frontend/src/app/content/pages/ManageProvisionsPage.tsx

@@ -12,6 +12,7 @@ import {
   removeProvision,
   updateProvision,
 } from '../../common/manage-provisions';
+import SimpleSearch from '../../components/common/SimpleSearch';
 
 interface ManageProvisionsPageProps {}
 
@@ -25,6 +26,7 @@ const ManageProvisionsPage: FC<ManageProvisionsPageProps> = () => {
   const [showAddProvisionModal, setShowAddProvisionModal] = useState<boolean>(false);
   const [showRemoveProvisionModal, setShowRemoveProvisionModal] = useState<boolean>(false);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [filteredProvisions, setFilteredProvisions] = useState<Provision[]>([]);
 
   useEffect(() => {
     const getData = async () => {
@@ -42,6 +44,12 @@ const ManageProvisionsPage: FC<ManageProvisionsPageProps> = () => {
     }
   }, [currentProvision, data.allProvisions]);
 
+  useEffect(() => {
+    if (data.allProvisions) {
+      setFilteredProvisions(data.allProvisions);
+    }
+  }, [data.allProvisions]);
+
   const refreshTables = () => {
     setRefreshTrigger((prev) => prev + 1);
   };
@@ -68,14 +76,23 @@ const ManageProvisionsPage: FC<ManageProvisionsPageProps> = () => {
     refreshTables();
   };
 
+  const handleSearch = (filteredProvisions: Provision[]) => {
+    setFilteredProvisions(filteredProvisions);
+  };
+
   const currentVariables = data.allVariables?.filter((v) => v.provision_id === currentProvision?.id) || [];
 
   return (
     <>
       <h1>Manage Provisions</h1>
       <hr />
+      <SimpleSearch
+        searchKeys={['provision_name', 'category']}
+        data={data.allProvisions ? data.allProvisions : []}
+        onSearch={handleSearch}
+      />
       <ManageProvisionsTable
-        provisions={data.allProvisions}
+        provisions={filteredProvisions}
         variables={data.allVariables}
         editProvisionHandler={openEditProvisionModal}
         removeProvisionHandler={openRemoveProvisionModal}