fix: add search bar

packages/main/.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
     env: { browser: true, es2020: true },
-    extends: ["plugin:@typescript-eslint/recommended"],
+    extends: ["plugin:@typescript-eslint/recommended","prettier"],
     parser: "@typescript-eslint/parser",
     parserOptions: { ecmaVersion: "latest", sourceType: "module" },
     plugins: ["react-refresh"],

packages/main/package.json

@@ -75,6 +75,7 @@
     "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitejs/plugin-react": "^4.2.0",
     "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.5",
     "happy-dom": "^9.20.3",

packages/main/plugins/Cardinality/SeriesRowStyles.tsx

@@ -12,6 +12,15 @@ export const SeriesRowStyle = (theme: Partial<QrynTheme>) => css`
         width: auto;
         border-bottom: 1px solid ${theme.neutral};
     }
+    .cell-column-header {
+        display: flex;
+        flex-direction: column;
+    }
+    .cell-column-name {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
     .cell-name {
         width: 60%;
         cursor: pointer;

packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx

@@ -20,8 +20,9 @@ export default function CardinalityTotals({ isLoading }) {
     const [sort, setSort] = useState("asc");
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [searchValue, setSearchValue] = useState("");
 
-    function paginateTotals(data) {
+    function paginateTotals(data: Array<any>) {
         const startIndex = page * rowsPerPage;
         const endIndex = startIndex + rowsPerPage;
         return data.slice(startIndex, endIndex);
@@ -39,9 +40,27 @@ export default function CardinalityTotals({ isLoading }) {
         setTotals(paginateTotals(maintenance));
     }, [page]);
 
+    const searchHandler = useCallback(
+        (text: string) => {
+            setSearchValue(text);
+
+            const filteredData = maintenance.filter((item) => {
+                return item.query.toLowerCase().includes(text.toLowerCase());
+            });
+
+            if (filteredData?.length > 0) {
+                setTotals(paginateTotals(filteredData));
+            }
+
+            if (text === "") {
+                setTotals(paginateTotals(maintenance));
+            }
+        },
+        [totals]
+    );
+
     const sortByProperty = useCallback(
         (column: string) => {
-
             if (column !== "undo") {
                 setTotals(() => {
                     let items = [...maintenance];
@@ -63,11 +82,11 @@ export default function CardinalityTotals({ isLoading }) {
 
     return (
         <div className={cx(TotalRowStyle(theme))}>
-            <div className="total-rows-header">
-                {totals?.length > 0
-                    ? "Fingerprints in Maintainance mode"
-                    : "No Fingerprints in Maintainance mode"}
-            </div>
+            <TotalRowsHeader
+                searchValue={searchValue}
+                searchHandler={searchHandler}
+                totalsLength={totals?.length ?? 0}
+            />
 
             {totals?.length > 0 && (
                 <TotalsTable
@@ -85,3 +104,26 @@ export default function CardinalityTotals({ isLoading }) {
         </div>
     );
 }
+
+export const TotalRowsHeader = ({
+    totalsLength,
+    searchHandler,
+    searchValue,
+}) => {
+    return (
+        <div className="total-rows-header">
+            <div className="search-container">
+                <label>Search By Query</label>
+                <input
+                    type="text"
+                    value={searchValue}
+                    onChange={(e) => searchHandler(e.target.value)}
+                    placeholder=""
+                />
+            </div>
+            {totalsLength > 0
+                ? "Fingerprints in Maintainance mode"
+                : "No Fingerprints in Maintainance mode"}
+        </div>
+    );
+};

packages/main/plugins/Cardinality/TotalsPanel/TableColHeader.tsx

@@ -0,0 +1,17 @@
+export type TableColHeaderProps = {
+    value: string;
+    text: string;
+    sortByProperty: (value: string) => void;
+};
+const TableColHeader = ({
+    value,
+    text,
+    sortByProperty,
+}: TableColHeaderProps) => {
+    return (
+        <div onClick={() => sortByProperty(value)} className="cell">
+            {text}
+        </div>
+    );
+};
+export default TableColHeader;

packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx

@@ -1,5 +1,6 @@
 import { TotalsRow } from "./TotalsRow";
 import TotalsPagination from "./Pagination";
+import  TableColHeader  from "./TableColHeader";
 
 type totalHeader = {
     value: string;
@@ -33,14 +34,13 @@ const TotalsTable = ({
         <>
             <div className="table">
                 <div className="table-header">
-                    {headers?.map((header) => (
-                        <div
-                            key={header.value}
-                            onClick={() => sortByProperty(header.value)}
-                            className="cell"
-                        >
-                            {header.text}
-                        </div>
+                    {headers?.map(({ value, text }) => (
+                        <TableColHeader 
+                        key={value} 
+                        value={value} 
+                        text={text} 
+                        sortByProperty={sortByProperty} 
+                        />
                     ))}
                 </div>
 

packages/main/plugins/Cardinality/TotalsPanel/style.tsx

@@ -7,11 +7,32 @@ export const TotalRowStyle = (theme: QrynTheme) => css`
     flex-direction: column;
     .total-rows-header {
         text-align: center;
-        padding: 10px 0px;
+        padding: 10px 20px;
         margin: 0px 4px;
         font-size: 12px;
         border-radius: 3px;
         background: ${theme.shadow};
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .search-container {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            input {
+                background: ${theme.shadow};
+                border: 1px solid ${theme.deep};
+                color: ${theme.contrast};
+                font-size: 10px;
+                padding: 5px 10px;
+                border-radius: 3px;
+                margin: 0px 4px;
+                :focus {
+                    outline: none;
+                    background: ${theme.deep};
+                }
+            }
+        }
     }
     .table-container {
         display: flex;

packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts

@@ -7,7 +7,7 @@ export async function getMaintenance() {
     return await fetch("http://localhost:8081/api/v1/maintenance");
 }
 
-export async function undoAction(id) {
+export async function undoAction(id: string) {
     return await fetch(`http://localhost:8081/api/v1/undo/${id}`)
         .then((res) => {
             if (res.status === 200) {
@@ -17,7 +17,6 @@ export async function undoAction(id) {
                         message: "Successfully restored fingerprints",
                     })
                 );
-
                 return res.json();
             } else {
                 store.dispatch(
@@ -26,7 +25,9 @@ export async function undoAction(id) {
                         message: "Failed to restore fingerprints",
                     })
                 );
-                return { error: "Failed to restore fingerprints" };
+                return {
+                    error: "Failed to restore fingerprints",
+                };
             }
         })
         .then((data) => {