@lensjs/core 1.0.1

package/src/ui/src/components/layout/Footer.tsx

@@ -0,0 +1,12 @@
+export default function Footer() {
+  return (
+    <footer className="container my-6">
+      <hr className="border-gray-300 dark:border-neutral-700" />
+      <div className="py-4 text-center">
+        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+          Made with ❤️ by our team
+        </p>
+      </div>
+    </footer>
+  );
+}

package/src/ui/src/components/layout/Header.tsx

@@ -0,0 +1,40 @@
+import { Menu, X } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useConfig } from "../../utils/context";
+import DeleteButton from "./DeleteButton";
+import { getRoutesPaths } from "../../router/routes";
+
+interface HeaderProps {
+  isMobileSidebarOpen: boolean;
+  onToggleMobileSidebar: () => void;
+}
+
+const Header = ({
+  isMobileSidebarOpen,
+  onToggleMobileSidebar,
+}: HeaderProps) => {
+  const config = useConfig();
+
+  return (
+    <header className="container my-5 flex items-center justify-between gap-4">
+      <Link to={getRoutesPaths(config).REQUESTS}>
+        <p className="text-2xl font-bold ">{config.appName}</p>
+      </Link>
+
+      <div className="flex items-center gap-2">
+        <DeleteButton />
+        <button
+          onClick={onToggleMobileSidebar}
+          className="p-2 rounded-lg  hover:bg-gray-200  dark:hover:bg-neutral-700 transition-colors lg:hidden"
+          aria-label="Toggle menu"
+        >
+          <span className="text-gray-700 dark:text-gray-300">
+            {isMobileSidebarOpen ? <X size={18} /> : <Menu size={18} />}
+          </span>
+        </button>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

package/src/ui/src/components/layout/Layout.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import Footer from "./Footer";
+import Header from "./Header";
+import Sidebar from "./Sidebar";
+
+const Layout = () => {
+  const location = useLocation();
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    setIsMobileSidebarOpen(false);
+  }, [location.pathname]);
+
+  const handleToggleMobileSidebar = () => {
+    setIsMobileSidebarOpen(!isMobileSidebarOpen);
+  };
+
+  const handleCloseMobileSidebar = () => {
+    setIsMobileSidebarOpen(false);
+  };
+
+  return (
+    <>
+      {" "}
+      <Header
+        isMobileSidebarOpen={isMobileSidebarOpen}
+        onToggleMobileSidebar={handleToggleMobileSidebar}
+      />
+      <hr className="container  my-6 border-gray-300 dark:border-neutral-700" />
+      <div className="container flex flex-col h-full lg:flex-row gap-8 relative">
+        <Sidebar
+          isMobileSidebarOpen={isMobileSidebarOpen}
+          onCloseMobileSidebar={handleCloseMobileSidebar}
+        />
+
+        {/* Main content */}
+        <div className="w-full min-h-[88vh]  flex-1 flex flex-col  min-w-0 pb-5 overflow-hidden">
+          <div className="flex-1">
+            <Outlet />
+          </div>
+          <Footer />
+        </div>
+      </div>{" "}
+    </>
+  );
+};
+
+export default Layout;

package/src/ui/src/components/layout/LoadingScreen.tsx

@@ -0,0 +1,14 @@
+const LoadingScreen = () => {
+  return (
+    <div className="flex items-center justify-center h-screen bg-gray-900">
+      <div className="relative">
+        <div className="w-20 h-20 border-t-4 border-b-4 border-green-500 rounded-full animate-spin"></div>
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white font-bold text-lg">
+          LENS
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingScreen;

package/src/ui/src/components/layout/Sidebar.tsx

@@ -0,0 +1,67 @@
+import { Link, useLocation } from "react-router-dom";
+import { getSidebarRoutes } from "../../router/routes";
+import { useConfig } from "../../utils/context";
+
+interface SidebarProps {
+  isMobileSidebarOpen: boolean;
+  onCloseMobileSidebar: () => void;
+}
+
+const Sidebar = ({
+  isMobileSidebarOpen,
+  onCloseMobileSidebar,
+}: SidebarProps) => {
+  const config = useConfig();
+  const location = useLocation();
+
+  return (
+    <>
+      {/* Overlay for mobile */}
+      {isMobileSidebarOpen && (
+        <div
+          className="fixed inset-0  bg-opacity-50 z-10 lg:hidden"
+          onClick={onCloseMobileSidebar}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`
+        fixed lg:sticky top-0 z-20 lg:z-0
+        h-full lg:h-auto
+        w-3/4 sm:w-64 lg:w-auto min-w-60
+        p-4 lg:p-0
+        transform transition-transform duration-300 ease-in-out
+        ${isMobileSidebarOpen ? "translate-x-0 bg-white dark:bg-neutral-900" : "-translate-x-[120%] lg:translate-x-0"}
+        lg:bg-transparent
+      `}
+      >
+        <ul className="flex flex-col gap-2 text-gray-700 dark:text-neutral-300">
+          {getSidebarRoutes(config).map((route) => {
+            const isActive = location.pathname === route.path;
+            const Icon = route.icon;
+
+            return (
+              <li key={route.path} className="contents">
+                <Link
+                  to={route.path}
+                  className={[
+                    "flex items-center gap-2 rounded-lg px-3 py-2 font-medium transition-colors",
+                    isActive
+                      ? "bg-green-100 dark:bg-neutral-800 text-gray-900 dark:text-white"
+                      : "text-gray-600 dark:text-neutral-400 hover:bg-gray-50 dark:hover:bg-neutral-800/50",
+                  ].join(" ")}
+                >
+                  <Icon size={16} />
+                  {route.label}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;

package/src/ui/src/components/queryFormatters/MongoViewer.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Check, Copy } from "lucide-react";
+import jsBeautify from "js-beautify";
+
+interface MongoViewerProps {
+  query: string;
+}
+
+// MongoDB keywords and operators to highlight
+const MONGO_KEYWORDS = [
+  "db", "find", "insertOne", "insertMany", "updateOne", "updateMany",
+  "deleteOne", "deleteMany", "aggregate", "project", "match", "group",
+  "sort", "limit", "skip", "$match", "$project", "$group", "$sort",
+  "$limit", "$skip", "$and", "$or", "$eq", "$ne", "$in", "$nin",
+];
+
+function highlightMongo(query: string) {
+  const tokens = query.split(/(\s+|[{}[\]()=,:])/);
+
+  return tokens.map((token, i) => {
+    if (!token.trim()) return <span key={i}>{token}</span>;
+
+    if (/^['"`].*['"`]$/.test(token)) {
+      // Strings
+      return <span key={i} className="text-green-600 dark:text-green-400">{token}</span>;
+    }
+
+    if (/^\d+\.?\d*$/.test(token)) {
+      // Numbers
+      return <span key={i} className="text-orange-600 dark:text-orange-400">{token}</span>;
+    }
+
+    if (MONGO_KEYWORDS.includes(token)) {
+      // Keywords
+      return <span key={i} className="text-blue-600 dark:text-blue-400 font-semibold">{token}</span>;
+    }
+
+    return <span key={i}>{token}</span>;
+  });
+}
+
+function MongoViewer({ query }: MongoViewerProps) {
+  const [copied, setCopied] = useState(false);
+
+  const formattedQuery = useMemo(() => {
+    try {
+      return jsBeautify.js(query, {
+        indent_size: 2,
+        space_in_empty_paren: true,
+        max_preserve_newlines: 2,
+      });
+    } catch {
+      return query;
+    }
+  }, [query]);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(formattedQuery);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  const highlightedQuery = useMemo(() => highlightMongo(formattedQuery), [formattedQuery]);
+
+  return (
+    <div className="bg-neutral-50 dark:bg-slate-900 rounded-lg p-4 font-mono text-sm overflow-x-auto relative">
+      <button
+        onClick={copyToClipboard}
+        className={`absolute top-3 right-3 p-2 rounded-md transition-colors ${
+          copied
+            ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
+            : "bg-white text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:bg-slate-800 dark:text-neutral-400 dark:hover:text-neutral-300 dark:hover:bg-slate-700"
+        }`}
+        title={copied ? "Copied!" : "Copy to clipboard"}
+      >
+        {copied ? <Check size={16} /> : <Copy size={16} />}
+      </button>
+
+      <pre className="whitespace-pre-wrap pr-12 text-neutral-800 dark:text-neutral-200">
+        {highlightedQuery}
+      </pre>
+    </div>
+  );
+}
+
+export default MongoViewer;

package/src/ui/src/components/queryFormatters/QueryViewer.tsx

@@ -0,0 +1,18 @@
+import type { QueryEntry } from "../../types";
+import SqlViewer from "./SqlViewer";
+import MongbDbViewer from "./MongoViewer";
+
+interface QueryFormatterProps {
+  queryPayload: QueryEntry["data"];
+}
+
+const QueryViewer = ({ queryPayload }: QueryFormatterProps) => {
+  switch (queryPayload.type) {
+    case "mongodb":
+      return <MongbDbViewer query={queryPayload.query} />;
+    default:
+      return <SqlViewer sql={queryPayload.query} />;
+  }
+};
+
+export default QueryViewer;

package/src/ui/src/components/queryFormatters/SqlViewer.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import type React from "react";
+import { useMemo, useState } from "react";
+
+// --- Static constants ---
+const KEYWORDS = [
+  "SELECT", "FROM", "WHERE", "JOIN", "INNER", "LEFT", "RIGHT", "OUTER", "FULL",
+  "ON", "AND", "OR", "NOT", "IN", "EXISTS", "BETWEEN", "LIKE", "IS", "NULL",
+  "INSERT", "INTO", "VALUES", "UPDATE", "SET", "DELETE", "CREATE", "TABLE",
+  "ALTER", "DROP", "INDEX", "PRIMARY", "KEY", "FOREIGN", "REFERENCES",
+  "CONSTRAINT", "UNIQUE", "CHECK", "DEFAULT", "AUTO_INCREMENT", "IDENTITY",
+  "GROUP", "BY", "HAVING", "ORDER", "ASC", "DESC", "LIMIT", "OFFSET", "UNION",
+  "ALL", "DISTINCT", "COUNT", "SUM", "AVG", "MIN", "MAX", "CASE", "WHEN", "THEN",
+  "ELSE", "END", "IF", "IFNULL", "COALESCE", "CAST", "CONVERT", "SUBSTRING",
+  "LENGTH", "UPPER", "LOWER", "TRIM",
+];
+
+const FUNCTIONS = [
+  "NOW", "CURRENT_TIMESTAMP", "CURRENT_DATE", "CURRENT_TIME", "DATE", "TIME",
+  "YEAR", "MONTH", "DAY", "HOUR", "MINUTE", "SECOND",
+];
+
+const DATA_TYPES = [
+  "VARCHAR", "CHAR", "TEXT", "INT", "INTEGER", "BIGINT", "SMALLINT", "TINYINT",
+  "DECIMAL", "NUMERIC", "FLOAT", "DOUBLE", "REAL", "BIT", "BOOLEAN", "BOOL",
+  "DATE", "TIME", "DATETIME", "TIMESTAMP", "YEAR", "BINARY", "VARBINARY",
+  "BLOB", "CLOB", "JSON", "UUID",
+];
+
+// --- Syntax highlighter ---
+function highlightSql(sqlText: string) {
+  // Split into words, spaces, punctuation, strings, numbers, comments
+  const tokens = sqlText.split(
+    /(\s+|[(),;]|'[^']*'|"[^"]*"|\b\d+\.?\d*\b|--[^\n]*|\/\*[\s\S]*?\*\/)/
+  );
+
+  return tokens.map((token, index) => {
+    const trimmed = token.trim();
+    if (!trimmed) return <span key={index}>{token}</span>;
+
+    if ((token.startsWith("'") && token.endsWith("'")) ||
+        (token.startsWith('"') && token.endsWith('"')))
+      return <span key={index} className="text-green-600 dark:text-green-400">{token}</span>;
+
+    if (/^\d+\.?\d*$/.test(trimmed))
+      return <span key={index} className="text-orange-600 dark:text-orange-400">{token}</span>;
+
+    if (token.startsWith("--") || (token.startsWith("/*") && token.endsWith("*/")))
+      return <span key={index} className="text-neutral-500 dark:text-neutral-400">{token}</span>;
+
+    if (KEYWORDS.some(k => k.toLowerCase() === trimmed.toLowerCase()))
+      return <span key={index} className="text-blue-600 dark:text-blue-400 font-semibold">{token.toUpperCase()}</span>;
+
+    if (FUNCTIONS.some(f => f.toLowerCase() === trimmed.toLowerCase()))
+      return <span key={index} className="text-purple-600 dark:text-purple-400">{token.toUpperCase()}</span>;
+
+    if (DATA_TYPES.some(t => t.toLowerCase() === trimmed.toLowerCase()))
+      return <span key={index} className="text-indigo-600 dark:text-indigo-400">{token.toUpperCase()}</span>;
+
+    return <span key={index}>{token}</span>;
+  });
+}
+
+interface SqlViewerProps {
+  sql: string;
+}
+
+const SqlViewer: React.FC<SqlViewerProps> = ({ sql }) => {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(sql);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  const highlightedSql = useMemo(() => highlightSql(sql), [sql]);
+
+  return (
+    <div className="bg-neutral-50 dark:bg-slate-900 rounded-lg p-4 font-mono text-sm overflow-x-auto relative">
+      <button
+        onClick={copyToClipboard}
+        className={`absolute top-3 right-3 p-2 rounded-md transition-colors ${
+          copied
+            ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
+            : "bg-white text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:bg-slate-800 dark:text-neutral-400 dark:hover:text-neutral-300 dark:hover:bg-slate-700"
+        }`}
+        title={copied ? "Copied!" : "Copy to clipboard"}
+      >
+        {copied ? <Check size={16} /> : <Copy size={16} />}
+      </button>
+      <pre className="whitespace-pre-wrap pr-12 text-neutral-800 dark:text-neutral-200">
+        {highlightedSql}
+      </pre>
+    </div>
+  );
+};
+
+export default SqlViewer;

package/src/ui/src/components/table/NoData.tsx

@@ -0,0 +1,26 @@
+export default function NoData() {
+  return (
+    <>
+      {" "}
+      <div className="flex flex-col items-center justify-center p-12 text-center">
+        <svg
+          className="w-16 h-16 text-slate-300 dark:text-slate-600 mb-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+        <h3 className="text-lg font-medium text-slate-900 dark:text-slate-200 mb-1">
+          No Data found
+        </h3>
+      </div>
+    </>
+  );
+}

package/src/ui/src/components/tabs/TabbedDataViewer.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import JsonViewer from "../JsonViewer";
+
+export interface TabbedDataProps {
+  tabs: TabItem[];
+  title?: string;
+  defaultActiveTab?: string;
+}
+
+export interface TabItem {
+  id: string;
+  label: string;
+  data?: Record<string, any>;
+  content?: React.ReactNode;
+}
+
+const TabbedDataViewer: React.FC<TabbedDataProps> = ({
+  tabs,
+  title,
+  defaultActiveTab,
+}) => {
+  const [activeTab, setActiveTab] = useState<string>(
+    defaultActiveTab || tabs[0]?.id || ""
+  );
+
+  return (
+    <div className="border  border-neutral-200 dark:border-neutral-700 rounded-[15px] shadow-sm">
+      {/* Header */}
+      {title && (
+        <div className="px-6 py-4 rounded-t-[15px] border-b border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900">
+          <h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+            {title}
+          </h2>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <div className="border-b rounded-[15px] border-neutral-200 dark:border-neutral-700">
+        <nav className="flex space-x-8 px-6" aria-label="Tabs">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200 ${
+                activeTab === tab.id
+                  ? "border-blue-500 text-blue-600 dark:text-blue-400"
+                  : "border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600"
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      <div className={"p-6 "}>
+        {tabs.map((tab) => (
+          <div
+            key={tab.id}
+            className={activeTab === tab.id ? "block" : "hidden"}
+          >
+            {tab.content ? (
+              <div>{tab.content}</div>
+            ) : (
+              <>{tab.data && <JsonViewer data={tab.data} />}</>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TabbedDataViewer;

package/src/ui/src/containers/queries/QueriesContainer.tsx

@@ -0,0 +1,21 @@
+import { lazy, useEffect } from "react";
+import useQueries from "../../hooks/useQueries";
+import { useLoadMore } from "../../hooks/useLoadMore";
+import type { QueryTableRow } from "../../types";
+
+const QueriesTable = lazy(() => import("../../views/queries/QueryTable"));
+const QueriesContainer = () => {
+  const { loadMoreRequests, fetchQueries } = useQueries();
+  const hasMoreObject = useLoadMore<QueryTableRow>({
+    paginatedPage: loadMoreRequests,
+  });
+
+  useEffect(() => {
+    fetchQueries();
+  }, []);
+
+    console.log('data', hasMoreObject.data)
+  return <QueriesTable hasMoreObject={hasMoreObject}/>;
+};
+
+export default QueriesContainer;

package/src/ui/src/containers/queries/QueryDetailsContainer.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import useQueries from "../../hooks/useQueries";
+import QueryDetails from "../../views/queries/QueryDetails";
+
+const QueryDetailsContainer = () => {
+  const { query, fetchQuery } = useQueries();
+  const { id } = useParams();
+  useEffect(() => {
+    id && fetchQuery(id);
+  }, [id]);
+  return <div>{query && <QueryDetails query={query} />}</div>;
+};
+
+export default QueryDetailsContainer;

package/src/ui/src/containers/requests/RequestDetailsContainer.tsx

@@ -0,0 +1,16 @@
+import { lazy } from "react";
+import { useParams } from "react-router-dom";
+import { useRequestById } from "../../hooks/useTanstackApi";
+
+const RequestDetailsTable = lazy(
+  () => import("../../views/requests/RequestDetails")
+);
+
+const RequestDetailsContainer = () => {
+  const { id } = useParams();
+  const { data } = useRequestById(id as string);
+
+  return <>{data?.data && <RequestDetailsTable request={data?.data} />}</>;
+};
+
+export default RequestDetailsContainer;

package/src/ui/src/containers/requests/RequestsContainer.tsx

@@ -0,0 +1,22 @@
+import { lazy, useEffect } from "react";
+import useRequests from "../../hooks/useRequests";
+import { useLoadMore } from "../../hooks/useLoadMore";
+import type { RequestTableRow } from "../../types";
+
+const RequestsTableView = lazy(
+  () => import("../../views/requests/RequetsTable"),
+);
+const RequestsContainer = () => {
+  const { loadMoreRequests, fetchRequests } = useRequests();
+  const hasMoreObject = useLoadMore<RequestTableRow>({
+    paginatedPage: loadMoreRequests,
+  });
+
+  useEffect(() => {
+    fetchRequests();
+  }, []);
+
+  return <RequestsTableView hasMoreObject={hasMoreObject} />;
+};
+
+export default RequestsContainer;

package/src/ui/src/hooks/useLensApi.ts

@@ -0,0 +1,92 @@
+import type {
+  ApiResponse,
+  GenericLensEntry,
+  PaginatorMeta,
+  QueryEntry,
+  QueryTableRow,
+  RequestEntry,
+  RequestTableRow,
+} from "../types";
+import { prepareApiUrl } from "../utils/api";
+import { useConfig } from "../utils/context";
+
+export const DEFAULT_META: PaginatorMeta = {
+  currentPage: 1,
+  lastPage: 1,
+  total: 0,
+};
+
+const useLensApi = () => {
+  const config = useConfig();
+
+  async function fetchJson<TData>(
+    url: string,
+    options?: RequestInit
+  ): Promise<ApiResponse<TData>> {
+    const res = await fetch(url, {
+      headers: { "Content-Type": "application/json" },
+      ...options,
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to fetch: ${url}`);
+    }
+
+    return res.json();
+  }
+
+  const withQueryParams = (
+    endpoint: string,
+    params?: Record<string, unknown>
+  ) => {
+    const searchParams = new URLSearchParams(
+      Object.entries(params || {}).reduce(
+        (acc, [key, value]) => {
+          if (value !== undefined && value !== null) {
+            acc[key] = String(value);
+          }
+          return acc;
+        },
+        {} as Record<string, string>
+      )
+    );
+
+    return `${endpoint}${searchParams.toString() ? `?${searchParams}` : ""}`;
+  };
+
+  const getAllRequests = async (page?: number) => {
+    return fetchJson<RequestTableRow[]>(
+      prepareApiUrl(
+        withQueryParams(config.api.requests, {
+          page,
+        })
+      )
+    );
+  };
+
+  const getRequestById = async (id: string) => {
+    return fetchJson<GenericLensEntry<RequestEntry>>(
+      prepareApiUrl(`${config.api.requests}/${id}`)
+    );
+  };
+  const getQueries = async (page: number) => {
+    return fetchJson<QueryTableRow[]>(
+      prepareApiUrl(
+        withQueryParams(config.api.queries, {
+          page,
+        })
+      )
+    );
+  };
+  const getQueryById = async (id: string) => {
+    return fetchJson<QueryEntry>(prepareApiUrl(`${config.api.queries}/${id}`));
+  };
+  return {
+    getAllRequests,
+    getRequestById,
+    getQueries,
+    getQueryById,
+  };
+};
+
+export default useLensApi;