From 7c562e8057642ee7187ad0736b65723c3da3857f Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sat, 13 Jul 2024 12:59:07 +0200
Subject: [PATCH 1/4] remove prime ng and fix table layout. Fix select

---
 frontend/bun.lockb                            | Bin 138157 -> 138157 bytes
 .../components/db-table-view/data-table.tsx   | 193 +++++++++---------
 .../{ => sidebar}/session-selector.tsx        |   6 +-
 frontend/src/components/sidebar/sidebar.tsx   | 119 +++++++++++
 frontend/src/components/ui/select.tsx         |   2 +-
 frontend/src/components/ui/table.tsx          |   8 +-
 frontend/src/index.css                        |   4 +-
 frontend/src/routes/__root.tsx                | 115 +----------
 8 files changed, 234 insertions(+), 213 deletions(-)
 rename frontend/src/components/{ => sidebar}/session-selector.tsx (90%)
 create mode 100644 frontend/src/components/sidebar/sidebar.tsx

diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index c031b9245b4934b0ff82f804d0a3089665a4d4ec..d57c95af6dbcbbeb76fb6b8963b2abd2aa79d79f 100644
GIT binary patch
delta 25
hcmZ3xon!5Gj)pCa`ibm}afW(^dIsCg5*f>P0RVON2yy@b

delta 25
dcmZ3xon!5Gj)pCa`ibmJ3}CR`ERnH%7XWEG2PXgk

diff --git a/frontend/src/components/db-table-view/data-table.tsx b/frontend/src/components/db-table-view/data-table.tsx
index 9421b9d..e0d7ae7 100644
--- a/frontend/src/components/db-table-view/data-table.tsx
+++ b/frontend/src/components/db-table-view/data-table.tsx
@@ -5,7 +5,6 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-  ScrollArea,
   Table,
   TableBody,
   TableCell,
@@ -167,7 +166,7 @@ export const DataTable = ({
   });
 
   return (
-    <div className={"flex flex-col gap-4 flex-1 max-h-full h-full pb-3"}>
+    <div className={"flex flex-col gap-4 flex-1 max-h-full pb-3"}>
       <div className={"flex gap-4 items-center justify-between"}>
         <h1 className="text-2xl font-bold flex items-center gap-2">
           <Rows3 /> {tableName}
@@ -201,103 +200,105 @@ export const DataTable = ({
         </p>
       </div>
 
-      <ScrollArea className="rounded-md border min-h-0 h-full w-full min-w-0">
-        <Table
-          className={"table-fixed min-w-full"}
-          {...{
-            style: {
-              width: table.getCenterTotalSize(),
-            },
-          }}
-        >
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  const sorted = header.column.getIsSorted();
+      <div className="rounded-md border min-h-0 h-full w-full min-w-0 flex flex-col">
+        <div className={"flex flex-col flex-1 overflow-auto relative"}>
+          <Table
+            className={"table-fixed min-w-full"}
+            {...{
+              style: {
+                width: table.getCenterTotalSize(),
+              },
+            }}
+          >
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id} className={"sticky top-0"}>
+                  {headerGroup.headers.map((header) => {
+                    const sorted = header.column.getIsSorted();
 
-                  return (
-                    <TableHead
-                      className={"p-0 relative"}
-                      key={header.id}
-                      style={{
-                        width: header.getSize(),
-                      }}
-                    >
-                      <Button
-                        variant="ghost"
-                        onClick={header.column.getToggleSortingHandler()}
-                        title={
-                          header.column.getNextSortingOrder() === "asc"
-                            ? "Sort ascending"
-                            : header.column.getNextSortingOrder() === "desc"
-                              ? "Sort descending"
-                              : "Clear sort"
-                        }
-                      >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                        <ArrowUp
-                          className={cn(
-                            "ml-2 size-4 opacity-0 transition-transform",
-                            sorted && "opacity-100",
-                            (sorted as string) === "desc" && "rotate-180",
-                          )}
-                        />
-                      </Button>
-                      <div
-                        {...{
-                          onDoubleClick: () => header.column.resetSize(),
-                          onMouseDown: header.getResizeHandler(),
-                          onTouchStart: header.getResizeHandler(),
-                          className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+                    return (
+                      <TableHead
+                        className={"p-0 relative"}
+                        key={header.id}
+                        style={{
+                          width: header.getSize(),
                         }}
-                      />
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell
-                      key={cell.id}
-                      style={{
-                        width: cell.column.getSize(),
-                      }}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </TableCell>
-                  ))}
+                      >
+                        <Button
+                          variant="ghost"
+                          onClick={header.column.getToggleSortingHandler()}
+                          title={
+                            header.column.getNextSortingOrder() === "asc"
+                              ? "Sort ascending"
+                              : header.column.getNextSortingOrder() === "desc"
+                                ? "Sort descending"
+                                : "Clear sort"
+                          }
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          <ArrowUp
+                            className={cn(
+                              "ml-2 size-4 opacity-0 transition-transform",
+                              sorted && "opacity-100",
+                              (sorted as string) === "desc" && "rotate-180",
+                            )}
+                          />
+                        </Button>
+                        <div
+                          {...{
+                            onDoubleClick: () => header.column.resetSize(),
+                            onMouseDown: header.getResizeHandler(),
+                            onTouchStart: header.getResizeHandler(),
+                            className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+                          }}
+                        />
+                      </TableHead>
+                    );
+                  })}
                 </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </ScrollArea>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        style={{
+                          width: cell.column.getSize(),
+                        }}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
       <DataTablePagination table={table} />
     </div>
   );
diff --git a/frontend/src/components/session-selector.tsx b/frontend/src/components/sidebar/session-selector.tsx
similarity index 90%
rename from frontend/src/components/session-selector.tsx
rename to frontend/src/components/sidebar/session-selector.tsx
index 7a648e8..54966f9 100644
--- a/frontend/src/components/session-selector.tsx
+++ b/frontend/src/components/sidebar/session-selector.tsx
@@ -49,8 +49,10 @@ function RawSessionSelector() {
       value={currentSessionId ? currentSessionId.toString() : ""}
       onValueChange={handleSessionSelected}
     >
-      <SelectTrigger className="max-w-full">
-        <SelectValue placeholder="Select a Database" />
+      <SelectTrigger className="w-full">
+        <span className={"truncate max-w-[calc(100%-1.5rem)]"}>
+          <SelectValue placeholder="Select a Database" />
+        </span>
       </SelectTrigger>
       <SelectContent>{mappedSessions}</SelectContent>
     </Select>
diff --git a/frontend/src/components/sidebar/sidebar.tsx b/frontend/src/components/sidebar/sidebar.tsx
new file mode 100644
index 0000000..ae3bbb0
--- /dev/null
+++ b/frontend/src/components/sidebar/sidebar.tsx
@@ -0,0 +1,119 @@
+import { SessionSelector } from "@/components/sidebar/session-selector";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  buttonVariants,
+} from "@/components/ui";
+import { cn } from "@/lib/utils";
+import { Route } from "@/routes/__root";
+import { useDatabasesListQuery, useTablesListQuery } from "@/services/db";
+import { useUiStore } from "@/state";
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
+import { Database, Rows3 } from "lucide-react";
+import type { PropsWithChildren } from "react";
+
+function SidebarContent() {
+  const { data } = useDatabasesListQuery();
+
+  const showSidebar = useUiStore.use.showSidebar();
+  const params = useParams({ strict: false });
+  const dbName = params.dbName ?? "";
+  const { data: tables } = useTablesListQuery({ dbName });
+  const navigate = useNavigate({ from: Route.fullPath });
+
+  const handleSelectedDb = (dbName: string) => {
+    void navigate({ to: "/db/$dbName/tables", params: { dbName } });
+  };
+  if (!showSidebar) return null;
+
+  return (
+    <>
+      <SessionSelector />
+      <Select value={dbName} onValueChange={handleSelectedDb}>
+        <SelectTrigger className="w-full mt-4">
+          <SelectValue placeholder="Select a Database" />
+        </SelectTrigger>
+        <SelectContent>
+          {data?.map((db) => {
+            return (
+              <SelectItem value={db} key={db}>
+                {db}
+              </SelectItem>
+            );
+          })}
+        </SelectContent>
+      </Select>
+      <nav className="flex flex-col gap-1 mt-4">
+        {dbName && (
+          <Link
+            to={"/db/$dbName/tables"}
+            params={{ dbName }}
+            activeOptions={{ exact: true }}
+            title={dbName}
+            className={cn(
+              "flex items-center gap-2 rounded py-1.5 pl-1.5",
+              "hover:bg-muted",
+              "[&.active]:bg-muted [&.active]:font-semibold",
+            )}
+          >
+            <Database className={"size-4"} />
+            <span className={"max-w-full inline-block truncate"}>{dbName}</span>
+          </Link>
+        )}
+        {tables?.map((table) => {
+          return (
+            <div
+              key={table.table_name}
+              className={cn(
+                "flex items-center gap-2 px-2.5 rounded py-1.5 justify-between w-full",
+              )}
+            >
+              <Link
+                className={cn(
+                  "max-w-full inline-block truncate",
+                  "hover:underline",
+                  "[&.active]:font-medium",
+                )}
+                title={table.table_name}
+                to={"/db/$dbName/tables/$tableName"}
+                params={{ tableName: table.table_name, dbName: dbName }}
+              >
+                {table.table_name}
+              </Link>
+              <Link
+                className={cn(
+                  "shrink-0",
+                  "hover:underline",
+                  buttonVariants({ variant: "ghost", size: "iconSm" }),
+                  "[&.active]:bg-muted",
+                )}
+                title={"Explore Data"}
+                aria-label={"Explore Data"}
+                to={"/db/$dbName/tables/$tableName/data"}
+                params={{ tableName: table.table_name, dbName: dbName }}
+                search={{ pageIndex: 0, pageSize: 10 }}
+              >
+                <Rows3 className={"size-4 shrink-0"} />
+              </Link>
+            </div>
+          );
+        })}
+      </nav>
+    </>
+  );
+}
+
+function SidebarContainer({ children }: PropsWithChildren) {
+  return <aside className={"p-3"}>{children}</aside>;
+}
+
+export function Sidebar() {
+  return (
+    <SidebarContainer>
+      <SidebarContent />
+    </SidebarContainer>
+  );
+}
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index 3cfdb52..95ec012 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -21,7 +21,7 @@ const SelectTrigger = forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index 2ad2e0b..a7b09ae 100644
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -8,7 +8,7 @@ import {
 
 const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
+    <div className="relative w-full overflow-auto rounded-md">
       <table
         ref={ref}
         className={cn("w-full caption-bottom text-sm", className)}
@@ -23,7 +23,11 @@ const TableHeader = forwardRef<
   HTMLTableSectionElement,
   HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn("[&_tr]:border-b [&_tr]:bg-background", className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = "TableHeader";
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0943dc8..7841e0c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -74,11 +74,11 @@
     text-underline-position: under;
     --sidebar-width: 264px;
   }
-  
+
   .sidebar-closed {
     --sidebar-width: 0;
   }
-  
+
   .grid-rows-layout {
     grid-template-rows: 60px 1fr;
   }
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index 8e8271d..9869dfd 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,27 +1,11 @@
-import { SessionSelector } from "@/components/session-selector";
 import { SettingsDialog } from "@/components/settings-dialog";
-import {
-  Button,
-  ModeToggle,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  buttonVariants,
-} from "@/components/ui";
+import { Sidebar } from "@/components/sidebar/sidebar";
+import { Button, ModeToggle } from "@/components/ui";
 import { cn } from "@/lib/utils";
-import { useDatabasesListQuery, useTablesListQuery } from "@/services/db";
 import { useUiStore } from "@/state";
-import {
-  Link,
-  Outlet,
-  createRootRoute,
-  useNavigate,
-  useParams,
-} from "@tanstack/react-router";
+import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
-import { Database, PanelLeft, PanelLeftClose, Rows3 } from "lucide-react";
+import { PanelLeft, PanelLeftClose } from "lucide-react";
 
 export const Route = createRootRoute({
   component: Root,
@@ -31,16 +15,6 @@ function Root() {
   const showSidebar = useUiStore.use.showSidebar();
   const toggleSidebar = useUiStore.use.toggleSidebar();
 
-  const { data } = useDatabasesListQuery();
-  const params = useParams({ strict: false });
-  const dbName = params.dbName ?? "";
-  const navigate = useNavigate({ from: Route.fullPath });
-
-  const handleSelectedDb = (dbName: string) => {
-    void navigate({ to: "/db/$dbName/tables", params: { dbName } });
-  };
-
-  const { data: tables } = useTablesListQuery({ dbName });
   return (
     <>
       <div
@@ -70,86 +44,7 @@ function Root() {
             <SettingsDialog />
           </div>
         </header>
-
-        <aside className={"p-3"}>
-          {showSidebar && (
-            <>
-              <SessionSelector />
-              <Select value={dbName} onValueChange={handleSelectedDb}>
-                <SelectTrigger className="w-full mt-4">
-                  <SelectValue placeholder="Select a Database" />
-                </SelectTrigger>
-                <SelectContent>
-                  {data?.map((db) => {
-                    return (
-                      <SelectItem value={db} key={db}>
-                        {db}
-                      </SelectItem>
-                    );
-                  })}
-                </SelectContent>
-              </Select>
-              <nav className="flex flex-col gap-1 mt-4">
-                {dbName && (
-                  <Link
-                    to={"/db/$dbName/tables"}
-                    params={{ dbName }}
-                    activeOptions={{ exact: true }}
-                    title={dbName}
-                    className={cn(
-                      "flex items-center gap-2 rounded py-1.5 pl-1.5",
-                      "hover:bg-muted",
-                      "[&.active]:bg-muted [&.active]:font-semibold",
-                    )}
-                  >
-                    <Database className={"size-4"} />
-                    <span className={"max-w-full inline-block truncate"}>
-                      {dbName}
-                    </span>
-                  </Link>
-                )}
-                {tables?.map((table) => {
-                  return (
-                    <div
-                      key={table.table_name}
-                      className={cn(
-                        "flex items-center gap-2 px-2.5 rounded py-1.5 justify-between w-full",
-                      )}
-                    >
-                      <Link
-                        className={cn(
-                          "max-w-full inline-block truncate",
-                          "hover:underline",
-                          "[&.active]:font-medium",
-                        )}
-                        title={table.table_name}
-                        to={"/db/$dbName/tables/$tableName"}
-                        params={{ tableName: table.table_name, dbName: dbName }}
-                      >
-                        {table.table_name}
-                      </Link>
-                      <Link
-                        className={cn(
-                          "shrink-0",
-                          "hover:underline",
-                          buttonVariants({ variant: "ghost", size: "iconSm" }),
-                          "[&.active]:bg-muted",
-                        )}
-                        title={"Explore Data"}
-                        aria-label={"Explore Data"}
-                        to={"/db/$dbName/tables/$tableName/data"}
-                        params={{ tableName: table.table_name, dbName: dbName }}
-                        search={{ pageIndex: 0, pageSize: 10 }}
-                      >
-                        <Rows3 className={"size-4 shrink-0"} />
-                      </Link>
-                    </div>
-                  );
-                })}
-              </nav>
-            </>
-          )}
-        </aside>
+        <Sidebar />
         <Outlet />
       </div>
       <TanStackRouterDevtools />

From fd076517dcf9de7c3ca68a8ae44ed19f938eeb07 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sat, 13 Jul 2024 19:15:21 +0200
Subject: [PATCH 2/4] refactor login form

---
 frontend/bun.lockb                            | Bin 138157 -> 138990 bytes
 frontend/package.json                         |   2 +
 .../src/components/ui/form/form-input.tsx     |  32 ++
 .../src/components/ui/form/form-select.tsx    |  34 ++
 frontend/src/components/ui/form/index.ts      |   2 +
 frontend/src/components/ui/index.ts           |   1 +
 frontend/src/components/ui/input.tsx          |  38 ++-
 frontend/src/hooks/index.ts                   |   1 +
 frontend/src/hooks/use-auto-id.ts             |   6 +
 frontend/src/routes/auth/login.tsx            | 310 ++++++++----------
 10 files changed, 241 insertions(+), 185 deletions(-)
 create mode 100644 frontend/src/components/ui/form/form-input.tsx
 create mode 100644 frontend/src/components/ui/form/form-select.tsx
 create mode 100644 frontend/src/components/ui/form/index.ts
 create mode 100644 frontend/src/hooks/index.ts
 create mode 100644 frontend/src/hooks/use-auto-id.ts

diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index d57c95af6dbcbbeb76fb6b8963b2abd2aa79d79f..1e717ae147a1bc3f1f44f9cf52b6e6d9e72588f5 100644
GIT binary patch
delta 23722
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
NXASpc-eS>V{}1-Hr0)O#

delta 23516
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%0AoR8z98C)~fPMu>mfI^+qPdUC*^$0-0l11V
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
K@dj(v{C@!Xe=Onv

diff --git a/frontend/package.json b/frontend/package.json
index 38ae999..f49a21a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.19",
+    "@hookform/resolvers": "^3.9.0",
     "@it-incubator/prettier-config": "^0.1.2",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -33,6 +34,7 @@
     "lucide-react": "^0.400.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/frontend/src/components/ui/form/form-input.tsx b/frontend/src/components/ui/form/form-input.tsx
new file mode 100644
index 0000000..4fa0d6d
--- /dev/null
+++ b/frontend/src/components/ui/form/form-input.tsx
@@ -0,0 +1,32 @@
+import { Input, type InputProps } from "@/components/ui";
+import {
+  type Control,
+  type FieldValues,
+  type UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+type Props<T extends FieldValues> = Omit<
+  UseControllerProps<T>,
+  "control" | "defaultValue" | "rules"
+> &
+  Omit<InputProps, "value" | "onChange"> & { control: Control<T> };
+
+export const FormInput = <T extends FieldValues>({
+  control,
+  name,
+  disabled,
+  shouldUnregister,
+  ...rest
+}: Props<T>) => {
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    control,
+    name,
+    disabled,
+    shouldUnregister,
+  });
+  return <Input errorMessage={error?.message} {...field} {...rest} />;
+};
diff --git a/frontend/src/components/ui/form/form-select.tsx b/frontend/src/components/ui/form/form-select.tsx
new file mode 100644
index 0000000..64776c0
--- /dev/null
+++ b/frontend/src/components/ui/form/form-select.tsx
@@ -0,0 +1,34 @@
+import { Select } from "@/components/ui";
+import type { ComponentPropsWithoutRef } from "react";
+import {
+  type Control,
+  type FieldValues,
+  type UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+type Props<T extends FieldValues> = Omit<
+  UseControllerProps<T>,
+  "control" | "defaultValue" | "rules"
+> &
+  Omit<ComponentPropsWithoutRef<typeof Select>, "value" | "onValueChange"> & {
+    control: Control<T>;
+  };
+
+export const FormSelect = <T extends FieldValues>({
+  control,
+  name,
+  disabled,
+  shouldUnregister,
+  ...rest
+}: Props<T>) => {
+  const {
+    field: { onChange, ...field },
+  } = useController({
+    control,
+    name,
+    disabled,
+    shouldUnregister,
+  });
+  return <Select {...field} {...rest} onValueChange={onChange} />;
+};
diff --git a/frontend/src/components/ui/form/index.ts b/frontend/src/components/ui/form/index.ts
new file mode 100644
index 0000000..b48f9b2
--- /dev/null
+++ b/frontend/src/components/ui/form/index.ts
@@ -0,0 +1,2 @@
+export * from "./form-select";
+export * from "./form-input";
diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
index 4b3f464..98ab095 100644
--- a/frontend/src/components/ui/index.ts
+++ b/frontend/src/components/ui/index.ts
@@ -4,6 +4,7 @@ export * from "./data-table-pagination";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./input";
+export * from "./form";
 export * from "./label";
 export * from "./mode-toggle";
 export * from "./select";
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index a5e556f..2ab0aea 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,21 +1,33 @@
-import * as React from "react";
-
+import { Label } from "@/components/ui/label";
+import { useAutoId } from "@/hooks";
 import { cn } from "@/lib/utils";
+import { type InputHTMLAttributes, forwardRef } from "react";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  errorMessage?: string;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, id, errorMessage, ...props }, ref) => {
+    const finalId = useAutoId(id);
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => {
     return (
-      <input
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+      <div className={"grid gap-1.5"}>
+        {!!label && <Label htmlFor={finalId}>{label}</Label>}
+        <input
+          id={finalId}
+          className={cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+        {!!errorMessage && (
+          <p className="text-red-500 text-xs">{errorMessage}</p>
         )}
-        ref={ref}
-        {...props}
-      />
+      </div>
     );
   },
 );
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
new file mode 100644
index 0000000..8d8add4
--- /dev/null
+++ b/frontend/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./use-auto-id";
diff --git a/frontend/src/hooks/use-auto-id.ts b/frontend/src/hooks/use-auto-id.ts
new file mode 100644
index 0000000..8d0c60d
--- /dev/null
+++ b/frontend/src/hooks/use-auto-id.ts
@@ -0,0 +1,6 @@
+import { useId } from 'react'
+
+export const useAutoId = (id?: string) => {
+  const generatedId = useId()
+  return id ?? generatedId
+}
diff --git a/frontend/src/routes/auth/login.tsx b/frontend/src/routes/auth/login.tsx
index 47e3eaf..3ab04a3 100644
--- a/frontend/src/routes/auth/login.tsx
+++ b/frontend/src/routes/auth/login.tsx
@@ -6,9 +6,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  Input,
+  FormInput,
+  FormSelect,
   Label,
-  Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
@@ -16,30 +16,122 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from "@/components/ui";
-import { useLoginMutation } from "@/services/db";
+import { type LoginArgs, useLoginMutation } from "@/services/db";
 import { useSessionStore } from "@/state/db-session-store";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { createFileRoute } from "@tanstack/react-router";
-import { type FormEventHandler, useState } from "react";
-import { toast } from "sonner";
+import { useState } from "react";
+import { type Control, useForm } from "react-hook-form";
+import { z } from "zod";
 
 export const Route = createFileRoute("/auth/login")({
   component: LoginForm,
 });
 
-function DatabaseTypeSelector() {
+const loginWithConnectionStringSchema = z.object({
+  type: z.enum(["mysql", "postgres"]),
+  connectionString: z.string().trim().min(1, "Connection string is required"),
+});
+
+type LoginWithConnectionStringFields = z.infer<
+  typeof loginWithConnectionStringSchema
+>;
+
+function ConnectionStringForm({
+  onSubmit,
+}: {
+  onSubmit: (values: LoginWithConnectionStringFields) => void;
+}) {
+  const { control, handleSubmit } = useForm<LoginWithConnectionStringFields>({
+    resolver: zodResolver(loginWithConnectionStringSchema),
+    defaultValues: {
+      type: "postgres",
+      connectionString: "",
+    },
+  });
+
   return (
-    <div className="grid gap-2">
-      <Label htmlFor="dbType">Database type</Label>
-      <Select defaultValue={"postgres"} name={"type"}>
-        <SelectTrigger className="w-full" id={"dbType"}>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="postgres">Postgres</SelectItem>
-          <SelectItem value="mysql">MySQL</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
+    <form
+      className="grid gap-2"
+      onSubmit={handleSubmit(onSubmit)}
+      id={"login-form"}
+    >
+      <DatabaseTypeSelector control={control} />
+      <FormInput
+        label={"Connection string"}
+        name={"connectionString"}
+        control={control}
+        placeholder={"postgres://postgres:postgres@localhost:5432/postgres"}
+      />
+    </form>
+  );
+}
+
+const loginWithConnectionFieldsSchema = z.object({
+  type: z.enum(["mysql", "postgres"]),
+  username: z.string().min(1, "Username is required"),
+  password: z.string().min(1, "Password is required"),
+  host: z.string().min(1, "Host is required"),
+  port: z.string().min(1, "Port is required"),
+  database: z.string().min(1, "Database is required"),
+  ssl: z.enum(["false", "true", "require", "allow", "prefer", "verify-full"]),
+});
+type LoginWithConnectionFields = z.infer<
+  typeof loginWithConnectionFieldsSchema
+>;
+
+function ConnectionFieldsForm({
+  onSubmit,
+}: {
+  onSubmit: (values: LoginWithConnectionFields) => void;
+}) {
+  const { control, handleSubmit } = useForm<LoginWithConnectionFields>({
+    resolver: zodResolver(loginWithConnectionFieldsSchema),
+    defaultValues: {
+      type: "postgres",
+      host: "",
+      port: "",
+      username: "",
+      password: "",
+      ssl: "prefer",
+      database: "",
+    },
+  });
+
+  return (
+    <form
+      className="grid gap-3"
+      onSubmit={handleSubmit(onSubmit)}
+      id={"login-form"}
+    >
+      <DatabaseTypeSelector control={control} />
+      <FormInput
+        name={"host"}
+        control={control}
+        label={"Host"}
+        placeholder={"127.0.0.1"}
+      />
+      <FormInput name={"port"} control={control} label={"Port"} />
+      <FormInput name={"username"} control={control} label={"User"} />
+      <FormInput name={"password"} control={control} label={"Password"} />
+      <FormInput name={"database"} control={control} label={"Database"} />
+      <div className="grid gap-2">
+        <Label htmlFor="ssl">SSL mode</Label>
+        <FormSelect control={control} name={"ssl"}>
+          <SelectTrigger className="w-full" id={"ssl"}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="false">false</SelectItem>
+            <SelectItem value="true">true</SelectItem>
+            <SelectItem value="require">require</SelectItem>
+            <SelectItem value="allow">allow</SelectItem>
+            <SelectItem value="prefer">prefer</SelectItem>
+            <SelectItem value="verify-full">verify-full</SelectItem>
+          </SelectContent>
+        </FormSelect>
+      </div>
+    </form>
   );
 }
 
@@ -49,78 +141,9 @@ function LoginForm() {
   const { mutateAsync } = useLoginMutation();
   const addSession = useSessionStore.use.addSession();
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const connectionString = formData.get("connectionString");
-    const type = formData.get("type");
-    if (connectionMethod === "connectionString") {
-      if (
-        connectionString != null &&
-        typeof connectionString === "string" &&
-        type != null &&
-        typeof type === "string"
-      ) {
-        try {
-          await mutateAsync({ connectionString, type });
-          addSession({ connectionString, type });
-        } catch (error) {
-          console.log(error);
-          toast.error("Invalid connection string");
-          return;
-        }
-      } else {
-        toast.error("Please fill all fields");
-      }
-      return;
-    }
-
-    const username = formData.get("username");
-    const password = formData.get("password");
-    const host = formData.get("host");
-    const port = formData.get("port");
-    const database = formData.get("database");
-    const ssl = formData.get("ssl");
-
-    if (
-      database == null ||
-      host == null ||
-      password == null ||
-      port == null ||
-      ssl == null ||
-      type == null ||
-      username == null
-    ) {
-      toast.error("Please fill all fields");
-      return;
-    }
-    if (
-      typeof database !== "string" ||
-      typeof host !== "string" ||
-      typeof password !== "string" ||
-      typeof port !== "string" ||
-      typeof ssl !== "string" ||
-      typeof type !== "string" ||
-      typeof username !== "string"
-    ) {
-      return;
-    }
-    try {
-      await mutateAsync({
-        username,
-        password,
-        host,
-        type,
-        port,
-        database,
-        ssl,
-      });
-      addSession({ username, password, host, type, port, database, ssl });
-    } catch (error) {
-      console.log(error);
-      toast.error("Invalid connection string");
-      return;
-    }
+  const onSubmit = async (args: LoginArgs) => {
+    await mutateAsync(args);
+    addSession(args);
   };
 
   return (
@@ -133,11 +156,7 @@ function LoginForm() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form
-            className="grid gap-4"
-            id={"login-form"}
-            onSubmit={handleSubmit}
-          >
+          <div className="grid gap-4">
             <ToggleGroup
               type="single"
               className="w-full border gap-0.5 rounded-md"
@@ -158,85 +177,11 @@ function LoginForm() {
               </ToggleGroupItem>
             </ToggleGroup>
             {connectionMethod === "fields" ? (
-              <>
-                <DatabaseTypeSelector />
-                <div className="grid gap-2">
-                  <Label htmlFor="host">Host</Label>
-                  <Input
-                    id="host"
-                    name="host"
-                    type="text"
-                    required
-                    placeholder={"127.0.0.1"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="port">Port</Label>
-                  <Input
-                    id="port"
-                    name="port"
-                    type="text"
-                    required
-                    defaultValue={"5432"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="username">User</Label>
-                  <Input id="username" name="username" type="text" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    name="password"
-                    id="password"
-                    type="password"
-                    required
-                    placeholder={"********"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="database">Database</Label>
-                  <Input
-                    name="database"
-                    id="database"
-                    type="text"
-                    defaultValue={"postgres"}
-                    placeholder={"postgres"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="ssl">SSL mode</Label>
-                  <Select defaultValue={"false"} name={"ssl"}>
-                    <SelectTrigger className="w-full" id={"ssl"}>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="false">false</SelectItem>
-                      <SelectItem value="true">true</SelectItem>
-                      <SelectItem value="require">require</SelectItem>
-                      <SelectItem value="allow">allow</SelectItem>
-                      <SelectItem value="prefer">prefer</SelectItem>
-                      <SelectItem value="verify-full">verify-full</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </>
+              <ConnectionFieldsForm onSubmit={onSubmit} />
             ) : (
-              <div className="grid gap-2">
-                <DatabaseTypeSelector />
-                <Label htmlFor="connectionString">Connection string</Label>
-                <Input
-                  name="connectionString"
-                  id="connectionString"
-                  type="text"
-                  required
-                  placeholder={
-                    "postgres://postgres:postgres@localhost:5432/postgres"
-                  }
-                />
-              </div>
+              <ConnectionStringForm onSubmit={onSubmit} />
             )}
-          </form>
+          </div>
         </CardContent>
         <CardFooter>
           <Button className="w-full" form={"login-form"}>
@@ -247,3 +192,24 @@ function LoginForm() {
     </div>
   );
 }
+
+function DatabaseTypeSelector({
+  control,
+}: {
+  control: Control<any>;
+}) {
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="dbType">Database type</Label>
+      <FormSelect control={control} name={"type"}>
+        <SelectTrigger className="w-full" id={"dbType"}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="postgres">Postgres</SelectItem>
+          <SelectItem value="mysql">MySQL</SelectItem>
+        </SelectContent>
+      </FormSelect>
+    </div>
+  );
+}

From bb16b2db43fd29e3d394ae4fc803eaffbca663bb Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sun, 14 Jul 2024 12:50:17 +0200
Subject: [PATCH 3/4] add postgres where clause for table data query. add ui
 for where clause

---
 TODO.md                                       | 13 +++++
 api/src/drivers/driver.interface.ts           |  6 +-
 api/src/drivers/postgres.ts                   | 25 +++++---
 api/src/index.ts                              |  9 ++-
 .../components/db-table-view/data-table.tsx   | 46 +++++++++++++--
 frontend/src/components/ui/index.ts           |  1 +
 frontend/src/components/ui/input.tsx          | 29 ++++++++--
 frontend/src/components/ui/tooltip.tsx        | 58 +++++++++++++++++++
 frontend/src/services/db/db.service.ts        | 23 +++++++-
 frontend/src/services/db/db.types.ts          |  1 +
 10 files changed, 190 insertions(+), 21 deletions(-)
 create mode 100644 TODO.md
 create mode 100644 frontend/src/components/ui/tooltip.tsx

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..b5d4b10
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,13 @@
+# TODO
+
+## Databases
+
+- [ ] Fully support PostgreSQL and MySQL
+- [ ] Add support for SQLite
+- [ ] Add support for MSSQL
+- [ ] Add support for MongoDB
+- [ ] Add support for Redis
+
+## Nice to have
+
+- [ ] Seed database with fake data (something like mockaroo, but taking advantage of db introspection)
\ No newline at end of file
diff --git a/api/src/drivers/driver.interface.ts b/api/src/drivers/driver.interface.ts
index cc60795..9a22ecb 100644
--- a/api/src/drivers/driver.interface.ts
+++ b/api/src/drivers/driver.interface.ts
@@ -24,7 +24,11 @@ export interface Driver {
   ): Promise<any[]>;
   getTableData(
     credentials: Credentials,
-    args: WithSortPagination<{ tableName: string; dbName: string }>,
+    args: WithSortPagination<{
+      tableName: string;
+      dbName: string;
+      whereQuery?: string;
+    }>,
   ): Promise<{
     count: number;
     data: Record<string, any>[];
diff --git a/api/src/drivers/postgres.ts b/api/src/drivers/postgres.ts
index 6865dae..37cead4 100644
--- a/api/src/drivers/postgres.ts
+++ b/api/src/drivers/postgres.ts
@@ -159,22 +159,31 @@ export class PostgresDriver implements Driver {
       page,
       sortDesc,
       sortField,
-    }: WithSortPagination<{ tableName: string; dbName: string }>,
+      whereQuery,
+    }: WithSortPagination<{
+      tableName: string;
+      dbName: string;
+      whereQuery?: string;
+    }>,
   ) {
     const sql = await this.queryRunner(credentials);
 
     const offset = (perPage * page).toString();
-    const rows = sql`
-    SELECT COUNT(*)
-    FROM ${sql(dbName)}.${sql(tableName)}`;
 
-    const tables = sql`
+    const rowsQuery = `
+    SELECT COUNT(*)
+    FROM "${dbName}"."${tableName}"
+    ${whereQuery ? `WHERE ${whereQuery}` : ""}`;
+
+    const tablesQuery = `
     SELECT *
-    FROM ${sql(dbName)}.${sql(tableName)}
-    ${sortField ? sql`ORDER BY ${sql(sortField)} ${sortDesc ? sql`DESC` : sql`ASC`}` : sql``}
+    FROM "${dbName}"."${tableName}"
+    ${whereQuery ? `WHERE ${whereQuery}` : ""}
+    ${sortField ? `ORDER BY "${sortField}" ${sortDesc ? "DESC" : "ASC"}` : ""}
     LIMIT ${perPage} OFFSET ${offset}
     `;
-
+    const rows = sql.unsafe(rowsQuery);
+    const tables = sql.unsafe(tablesQuery);
     const [[count], data] = await Promise.all([rows, tables]);
 
     void sql.end();
diff --git a/api/src/index.ts b/api/src/index.ts
index 6d84db6..adc2889 100644
--- a/api/src/index.ts
+++ b/api/src/index.ts
@@ -95,7 +95,13 @@ const app = new Elysia({ prefix: "/api" })
     "/databases/:dbName/tables/:tableName/data",
     async ({ query, params, jwt, set, cookie: { auth } }) => {
       const { tableName, dbName } = params;
-      const { perPage = "50", page = "0", sortField, sortDesc } = query;
+      const {
+        perPage = "50",
+        page = "0",
+        sortField,
+        sortDesc,
+        whereQuery,
+      } = query;
       const credentials = await jwt.verify(auth.value);
 
       if (!credentials) {
@@ -111,6 +117,7 @@ const app = new Elysia({ prefix: "/api" })
         page: Number.parseInt(page, 10),
         sortField,
         sortDesc: sortDesc === "true",
+        whereQuery,
       });
     },
   )
diff --git a/frontend/src/components/db-table-view/data-table.tsx b/frontend/src/components/db-table-view/data-table.tsx
index e0d7ae7..cb7b91c 100644
--- a/frontend/src/components/db-table-view/data-table.tsx
+++ b/frontend/src/components/db-table-view/data-table.tsx
@@ -5,12 +5,14 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
+  FormInput,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  Tooltip,
 } from "@/components/ui";
 import { cn, isImageUrl, isUrl } from "@/lib/utils";
 import { useTableColumnsQuery, useTableDataQuery } from "@/services/db";
@@ -25,8 +27,9 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { ArrowUp, Rows3 } from "lucide-react";
+import { ArrowUp, Info, Rows3, Search } from "lucide-react";
 import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
 
 export const DataTable = ({
   tableName,
@@ -43,14 +46,16 @@ export const DataTable = ({
   onPageIndexChange: (pageIndex: number) => void;
   onPageSizeChange: (pageSize: number) => void;
 }) => {
+  const whereQueryForm = useForm<{ whereQuery: string }>();
   const formatDates = useSettingsStore.use.formatDates();
   const showImagesPreview = useSettingsStore.use.showImagesPreview();
-
+  const [whereQuery, setWhereQuery] = useState("");
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
 
   const { data: details } = useTableColumnsQuery({ dbName, tableName });
-  const { data } = useTableDataQuery({
+  const { data, refetch } = useTableDataQuery({
+    whereQuery,
     tableName,
     dbName,
     perPage: pageSize,
@@ -58,7 +63,6 @@ export const DataTable = ({
     sortDesc: sorting[0]?.desc,
     sortField: sorting[0]?.id,
   });
-
   const paginationUpdater: OnChangeFn<PaginationState> = (args) => {
     if (typeof args === "function") {
       const newArgs = args({
@@ -87,7 +91,7 @@ export const DataTable = ({
         return (
           <div
             className={cn(
-              "whitespace-nowrap",
+              "whitespace-nowrap ",
               data_type === "integer" && "text-right",
             )}
           >
@@ -170,6 +174,37 @@ export const DataTable = ({
       <div className={"flex gap-4 items-center justify-between"}>
         <h1 className="text-2xl font-bold flex items-center gap-2">
           <Rows3 /> {tableName}
+          <form
+            className={"flex gap-2"}
+            onSubmit={whereQueryForm.handleSubmit((data) => {
+              if (data.whereQuery === whereQuery) {
+                void refetch();
+                return;
+              }
+              setWhereQuery(data.whereQuery);
+            })}
+          >
+            <FormInput
+              name={"whereQuery"}
+              control={whereQueryForm.control}
+              placeholder="WHERE clause"
+            />
+            <Button variant={"outline"} size={"icon"} type={"submit"}>
+              <Search className={"size-[1.2rem] shrink-0"} />
+            </Button>
+            <Tooltip
+              content={
+                <div>
+                  Your input will be prefixed with WHERE and appended to the raw
+                  SQL query.
+                  <div>You can use AND, OR, NOT, BETWEEN, LIKE, =, etc.</div>
+                  <div>To remove the WHERE clause, submit an empty input.</div>
+                </div>
+              }
+            >
+              <Info className={"size-4 shrink-0 cursor-help"} />
+            </Tooltip>
+          </form>
         </h1>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -227,6 +262,7 @@ export const DataTable = ({
                         <Button
                           variant="ghost"
                           onClick={header.column.getToggleSortingHandler()}
+                          className={"select-text"}
                           title={
                             header.column.getNextSortingOrder() === "asc"
                               ? "Sort ascending"
diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
index 98ab095..e3d50df 100644
--- a/frontend/src/components/ui/index.ts
+++ b/frontend/src/components/ui/index.ts
@@ -15,5 +15,6 @@ export * from "./sql-data-table-cell";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";
+export * from "./tooltip";
 export * from "./toggle";
 export * from "./toggle-group";
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 2ab0aea..d86e9bc 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,21 +1,39 @@
 import { Label } from "@/components/ui/label";
 import { useAutoId } from "@/hooks";
 import { cn } from "@/lib/utils";
-import { type InputHTMLAttributes, forwardRef } from "react";
+import {
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  forwardRef,
+  memo,
+  useCallback,
+} from "react";
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   errorMessage?: string;
+  onValueChange?: (value: string) => void;
 }
 
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, id, errorMessage, ...props }, ref) => {
+const RawInput = forwardRef<HTMLInputElement, InputProps>(
+  (
+    { className, label, id, onValueChange, onChange, errorMessage, ...props },
+    ref,
+  ) => {
     const finalId = useAutoId(id);
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+      },
+      [onValueChange, onChange],
+    );
 
     return (
       <div className={"grid gap-1.5"}>
         {!!label && <Label htmlFor={finalId}>{label}</Label>}
         <input
+          onChange={handleChange}
           id={finalId}
           className={cn(
             "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
@@ -31,6 +49,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   },
 );
-Input.displayName = "Input";
+RawInput.displayName = "Input";
+
+const Input = memo(RawInput);
+Input.displayName = "MemoizedInput";
 
 export { Input };
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..55409f8
--- /dev/null
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,58 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+const Tooltip = ({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 100,
+  disableHoverableContent,
+  ...props
+}: Omit<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+  "content"
+> & {
+  content: React.ReactNode;
+}) => {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
+        disableHoverableContent={disableHoverableContent}
+      >
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipContent {...props}>{content}</TooltipContent>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+};
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/frontend/src/services/db/db.service.ts b/frontend/src/services/db/db.service.ts
index e6a03b9..d6cdc3a 100644
--- a/frontend/src/services/db/db.service.ts
+++ b/frontend/src/services/db/db.service.ts
@@ -17,6 +17,8 @@ import type {
   TableForeignKeys,
   TableIndexes,
 } from "@/services/db/db.types";
+import { HTTPError } from "ky";
+import { toast } from "sonner";
 
 class DbService {
   login(data: LoginArgs) {
@@ -44,12 +46,29 @@ class DbService {
     perPage,
     sortField,
     sortDesc,
+    whereQuery,
   }: GetTableDataArgs) {
     return dbInstance
       .get(`api/databases/${dbName}/tables/${tableName}/data`, {
-        searchParams: getValuable({ perPage, page, sortField, sortDesc }),
+        searchParams: getValuable({
+          perPage,
+          page,
+          sortField,
+          sortDesc,
+          whereQuery,
+        }),
       })
-      .json<GetTableDataResponse>();
+      .json<GetTableDataResponse>()
+      .catch(async (error) => {
+        if (error instanceof HTTPError) {
+          const errorJson = await error.response.json();
+          console.log(errorJson);
+          toast.error(errorJson.message);
+        } else {
+          toast.error(error.message);
+        }
+        return { count: 0, data: [] };
+      });
   }
 
   getTableColumns({ dbName, tableName }: GetTableColumnsArgs) {
diff --git a/frontend/src/services/db/db.types.ts b/frontend/src/services/db/db.types.ts
index b59fd7d..c14e3fc 100644
--- a/frontend/src/services/db/db.types.ts
+++ b/frontend/src/services/db/db.types.ts
@@ -47,6 +47,7 @@ export type GetTableDataArgs = {
   page?: number;
   sortField?: string;
   sortDesc?: boolean;
+  whereQuery?: string;
 };
 
 export type GetTableDataResponse = {

From f8d2e0be9c0460d2a331479d2d4f76ef2655e223 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sun, 14 Jul 2024 12:54:42 +0200
Subject: [PATCH 4/4] fix table header opacity on hover

---
 frontend/src/components/ui/table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index a7b09ae..61e986e 100644
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -65,7 +65,7 @@ const TableRow = forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors data-[state=selected]:bg-muted",
       className,
     )}
     {...props}