@lensjs/core 1.0.1

package/src/ui/src/hooks/useLoadMore.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import type { HasMoreType } from "../types";
+import type { UseLoadMoreOptions } from "../interfaces";
+
+export function useLoadMore<T>({
+  paginatedPage,
+}: UseLoadMoreOptions<T>): HasMoreType<T> {
+  const [data, setData] = useState<T[]>([]);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [hasMore, setHasMore] = useState<boolean>(false);
+
+  useEffect(() => {
+    setLoading(paginatedPage.loading);
+    setHasMore(paginatedPage.meta.currentPage < paginatedPage.meta.lastPage);
+    setPage(1);
+
+    if (!paginatedPage.loading) {
+      setData(paginatedPage.initialData);
+    }
+  }, [
+    paginatedPage.initialData,
+    paginatedPage.loading,
+    paginatedPage.meta.currentPage,
+    paginatedPage.meta.lastPage
+  ]);
+
+  const loadMore = async () => {
+    if (loading || !hasMore) return;
+
+    setLoading(true);
+    const newPage = page + 1;
+    const newData = await paginatedPage.fetchRawPage(newPage);
+
+    setData((prev) => [...prev, ...newData!.data!]);
+    setPage(newPage);
+
+    if (!newData?.meta) {
+      setHasMore(false);
+    } else {
+      setHasMore(newData.meta.currentPage < newData.meta.lastPage);
+    }
+
+    setLoading(false);
+  };
+
+  return { data, loading, hasMore, loadMore };
+}

package/src/ui/src/hooks/useQueries.ts

@@ -0,0 +1,58 @@
+import { useCallback, useMemo, useState } from "react";
+import type { PaginatorMeta, QueryEntry, QueryTableRow } from "../types";
+import useLensApi, { DEFAULT_META } from "./useLensApi";
+
+export default function useQueries() {
+  const [queries, setQueries] = useState<QueryTableRow[]>([]);
+  const [query, setQuery] = useState<QueryEntry>();
+  const [loading, setLoading] = useState(false);
+  const [meta, setMeta] = useState<PaginatorMeta>(DEFAULT_META);
+
+  const { getQueries, getQueryById } = useLensApi();
+  const fetchQuery = useCallback(
+    async (id: string) => {
+      setLoading(true);
+      getQueryById(id)
+        .then((res) => {
+          console.log(res, "das2s");
+          setQuery(res.data!);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    },
+    [getQueries]
+  );
+  const fetchQueries = useCallback(
+    async (page?: number) => {
+      setLoading(true);
+      await getQueries(page ?? 1)
+        .then((res) => {
+          setQueries(res.data!);
+          setMeta(res.meta!);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    },
+    [getQueries]
+  );
+
+  const loadMoreRequests = useMemo(
+    () => ({
+      initialData: queries,
+      meta,
+      loading,
+      fetchRawPage: getQueries,
+    }),
+    [queries, meta, loading, getQueries]
+  );
+
+  return {
+    loadMoreRequests,
+    fetchQueries,
+    fetchQuery,
+    queries,
+    query,
+  };
+}

package/src/ui/src/hooks/useRequests.ts

@@ -0,0 +1,79 @@
+import { useCallback, useMemo, useState } from "react";
+import type { OneRequest, PaginatorMeta, RequestTableRow } from "../types";
+import useLensApi, { DEFAULT_META } from "./useLensApi";
+
+const defaultRequest: OneRequest = {
+  created_at: "",
+  data: {
+    body: {},
+    createdAt: "",
+    duration: "",
+    headers: {},
+    id: "",
+    ip: "",
+    method: "GET",
+    path: "",
+    response: {
+      headers: {},
+      json: {},
+    },
+    status: 0,
+    user: null,
+  },
+  id: "",
+  lens_entry_id: null,
+  type: "request",
+};
+
+export default function useRequests() {
+  const [requests, setRequests] = useState<RequestTableRow[]>([]);
+  const [request, setRequest] = useState<OneRequest>(defaultRequest);
+  const [loading, setLoading] = useState(false);
+  const [meta, setMeta] = useState<PaginatorMeta>(DEFAULT_META);
+
+  const { getAllRequests, getRequestById } = useLensApi();
+  const fetchRequest = useCallback(
+    async (id: string) => {
+      setLoading(true);
+      getRequestById(id)
+        .then((res) => {
+          setRequest(res.data!);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    },
+    [getRequestById],
+  );
+  const fetchRequests = useCallback(
+    async (page?: number) => {
+      setLoading(true);
+      getAllRequests(page)
+        .then((res) => {
+          setRequests(res.data!);
+          setMeta(res.meta!);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    },
+    [getAllRequests],
+  );
+
+  const loadMoreRequests = useMemo(
+    () => ({
+      initialData: requests,
+      meta,
+      loading,
+      fetchRawPage: getAllRequests,
+    }),
+    [requests, meta, loading, getAllRequests],
+  );
+
+  return {
+    loadMoreRequests,
+    fetchRequests,
+    fetchRequest,
+    request,
+  };
+}

package/src/ui/src/hooks/useTanstackApi.ts

@@ -0,0 +1,126 @@
+import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
+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,
+};
+
+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}` : ""}`;
+};
+
+export function useAllRequests(
+  page?: number,
+  options?: UseQueryOptions<ApiResponse<RequestTableRow[]>>
+) {
+  const config = useConfig();
+  return useQuery<ApiResponse<RequestTableRow[]>>({
+    queryKey: ["requests", page],
+    queryFn: () =>
+      fetchJson<RequestTableRow[]>(
+        prepareApiUrl(
+          withQueryParams(config.api.requests, {
+            page,
+          })
+        )
+      ),
+    ...options,
+  });
+}
+
+export function useRequestById(
+  id: string,
+  options?: UseQueryOptions<ApiResponse<GenericLensEntry<RequestEntry>>>
+) {
+  const config = useConfig();
+  return useQuery<ApiResponse<GenericLensEntry<RequestEntry>>>({
+    queryKey: ["request", id],
+    queryFn: async () =>
+      await fetchJson<GenericLensEntry<RequestEntry>>(
+        prepareApiUrl(`${config.api.requests}/${id}`)
+      ),
+    ...{
+      enabled: !!id,
+      ...options,
+    },
+  });
+}
+
+export function useQueries(
+  page: number,
+  options?: UseQueryOptions<ApiResponse<QueryTableRow[]>>
+) {
+  const config = useConfig();
+  return useQuery<ApiResponse<QueryTableRow[]>>({
+    queryKey: ["queries", page],
+    queryFn: () =>
+      fetchJson<QueryTableRow[]>(
+        prepareApiUrl(
+          withQueryParams(config.api.queries, {
+            page,
+          })
+        )
+      ),
+    ...options,
+  });
+}
+
+export function useQueryById(
+  id: string,
+  options?: UseQueryOptions<ApiResponse<QueryEntry>>
+) {
+  const config = useConfig();
+  return useQuery<ApiResponse<QueryEntry>>({
+    queryKey: ["query", id],
+
+    queryFn: () =>
+      fetchJson<QueryEntry>(prepareApiUrl(`${config.api.queries}/${id}`)),
+    ...{
+      enabled: !!id,
+      ...options,
+    },
+  });
+}

package/src/ui/src/index.css

@@ -0,0 +1,78 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-secondary-bg: light-dark(#f8f8f8, #191a2e);
+  --color-Gray: light-dark(#f8f8f8, #2d2d2d);
+  --color-dark-Gray: #2d2d2d;
+  --color-LightGray: #bcbcbc;
+  --color-DarkBlue: #7ea4c4;
+  --color-green-check: #26bc67;
+  --color-yellow-cart: #ffd000;
+  --color-DarkerGray: #bcbcbc;
+  --color-2ndLightGray: #e7e7e7;
+  --color-sku-blue: #3591e1;
+}
+@layer base {
+  :root {
+    --bg-primary: 0 0 0;
+    --bg-secondary: 15 15 15;
+    --text-primary: 248 250 252;
+    --text-secondary: 148 163 184;
+  }
+
+  body {
+    background-color: rgb(var(--bg-primary));
+    color: rgb(var(--text-primary));
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+  }
+
+  button {
+    cursor: pointer;
+  }
+}
+
+@layer utilities {
+  .container {
+    margin-inline: auto;
+    padding-inline: 10px;
+  }
+}

package/src/ui/src/interfaces/index.ts

@@ -0,0 +1,10 @@
+import type { ApiResponse, PaginatorMeta } from "../types";
+
+export interface UseLoadMoreOptions<T> {
+  paginatedPage: {
+    meta: PaginatorMeta;
+    initialData: T[];
+    loading: boolean;
+    fetchRawPage: (page: number) => Promise<ApiResponse<T[]>>;
+  };
+}

package/src/ui/src/main.tsx

@@ -0,0 +1,33 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App.tsx";
+import "./index.css";
+
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      gcTime: 10 * 60 * 1000, // 10 minutes
+    },
+  },
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </StrictMode>
+);

package/src/ui/src/router/Router.ts

@@ -0,0 +1,11 @@
+import { useRoutes, type RouteObject } from "react-router-dom";
+import { getRoutes } from "./routes";
+import type { LensConfig } from "../types";
+
+const Router = ({config}: {config: LensConfig}) => {
+  const allRoutes: RouteObject[] = getRoutes(config);
+
+  return useRoutes([...allRoutes]);
+};
+
+export default Router;

package/src/ui/src/router/routes/Loading.tsx

@@ -0,0 +1,5 @@
+export const GlobalLoader = () => (
+  <div className="flex items-center justify-center min-h-screen">
+    <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
+  </div>
+);

package/src/ui/src/router/routes/index.tsx

@@ -0,0 +1,85 @@
+import { ArrowRightLeft, Database } from "lucide-react";
+import { lazy} from "react";
+import { Navigate, type RouteObject } from "react-router-dom";
+import Layout from "../../components/layout/Layout";
+import type { LensConfig } from "../../types";
+
+const RequestsContainer = lazy(
+  () => import("../../containers/requests/RequestsContainer"),
+);
+const QueriesContainer = lazy(
+  () => import("../../containers/queries/QueriesContainer"),
+);
+const RequestDetailsContainer = lazy(
+  () => import("../../containers/requests/RequestDetailsContainer"),
+);
+const QueryDetailsContainer = lazy(
+  () => import("../../containers/queries/QueryDetailsContainer"),
+);
+
+export function getRoutesPaths(config: LensConfig) {
+  return {
+    REQUESTS: `${config.path}/requests`,
+    QUERIES: `${config.path}/queries`,
+    REQUEST_DETAILS: `${config.path}/requests/:requestId`,
+    QUERY_DETAILS: `${config.path}/queries/:queryId`,
+  };
+}
+
+export function getSidebarRoutes(config: LensConfig) {
+  const paths = getRoutesPaths(config);
+
+  return [
+    {
+      path: paths.REQUESTS,
+      label: "Requests",
+      icon: ArrowRightLeft,
+    },
+    {
+      path: paths.QUERIES,
+      label: "Queries",
+      icon: Database,
+    },
+  ];
+}
+
+export function getRoutes(config: LensConfig): RouteObject[] {
+  const paths = getRoutesPaths(config);
+
+  return [
+    {
+      path: "/",
+      element: <Navigate to={paths.REQUESTS} replace />,
+    },
+    {
+      path: config.path,
+      element: <Layout />,
+      children: [
+        {
+          index: true,
+          element: <Navigate to="requests" replace />,
+        },
+        {
+          path: "requests",
+          element: <RequestsContainer />,
+        },
+        {
+          path: "requests/:id",
+          element: <RequestDetailsContainer />,
+        },
+        {
+          path: "queries",
+          element: <QueriesContainer />,
+        },
+        {
+          path: "queries/:id",
+          element: <QueryDetailsContainer />,
+        },
+        {
+          path: "*",
+          element: <h1>Error</h1>,
+        },
+      ],
+    },
+  ];
+}

package/src/ui/src/types/index.ts

@@ -0,0 +1,95 @@
+export type LensConfig = {
+  appName: string;
+  path: string;
+  api: {
+    requests: string;
+    queries: string;
+    truncate: string
+  };
+};
+
+export type LensEntryType = "request" | "query";
+
+export type PaginationParams = {
+  page: number;
+  perPage: number;
+};
+
+export type PaginatorMeta = {
+  total: number;
+  lastPage: number;
+  currentPage: number;
+};
+
+export type Paginator<T> = {
+  meta: PaginatorMeta;
+  data: PaginatorData<T>;
+};
+
+export type PaginatorData<T> = T[];
+
+export type ApiResponse<T> = {
+  status: number;
+  message: string;
+  data: T | null;
+  meta?: Paginator<T>["meta"];
+};
+
+export type QueryEntry = {
+  id: string;
+  type: LensEntryType;
+  created_at: string;
+  lens_entry_id: string | null;
+  data: {
+    query: string;
+    duration: string;
+    createdAt: string;
+    type: QueryType;
+  };
+};
+
+export type UserEntry = {
+  id: number | string;
+  name: string;
+  email: string;
+};
+
+export type RequestEntry = {
+  id: string;
+  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS";
+  duration: string;
+  path: string;
+  headers: Record<string, string>;
+  body: Record<string, any>;
+  status: number;
+  ip: string;
+  createdAt: string;
+  response: {
+    json: Record<string, any>;
+    headers: Record<string, string>;
+  };
+  user?: UserEntry | null;
+};
+
+export type RequestTableEntry = Omit<RequestEntry, "ip" | "headers" | "body">;
+export type Queries = QueryEntry;
+export type GenericLensEntry<T> = {
+  id: string;
+  type: LensEntryType;
+  created_at: string;
+  lens_entry_id: string | null;
+  data: T;
+};
+
+export type HasMoreType<T> = {
+  data: T[];
+  hasMore: boolean;
+  loading: boolean;
+  loadMore: () => Promise<void>;
+};
+
+export type RequestTableRow = GenericLensEntry<RequestTableEntry>;
+export type OneRequest = GenericLensEntry<RequestEntry>;
+export type QueryTableRow = QueryEntry;
+export type OneQuery = GenericLensEntry<QueryEntry>;
+export type QueryType = "sql" | "mongodb";

package/src/ui/src/utils/api.ts

@@ -0,0 +1,7 @@
+export const prepareApiUrl = (path: string) => {
+  return `${import.meta.env.VITE_API_URL ?? ''}/${replaceTrailingSlash(path)}`;
+};
+
+const replaceTrailingSlash = (path: string) => {
+  return path.replace(/^\/+|\/+$/g, "");
+};

package/src/ui/src/utils/context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react";
+import type { LensConfig } from "../types";
+
+interface ConfigContextType {
+  config: LensConfig;
+}
+
+const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
+
+export function useConfig() {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used inside a ConfigProvider");
+  }
+  return context.config;
+}
+
+export function getBasePath() {
+  const config = useConfig();
+
+  return config.path;
+}
+
+export default ConfigContext;

package/src/ui/src/utils/date.ts

@@ -0,0 +1,36 @@
+import dayjs from "dayjs";
+
+export function getCurrentTimezone(): string {
+  return dayjs.tz.guess();
+}
+
+function parseBackendUTC(date: string | Date | number) {
+  return dayjs.utc(date).tz(getCurrentTimezone());
+}
+
+export const humanDifferentDate = (date: string | Date) => {
+  const d = parseBackendUTC(date);
+  return {
+    label: d.fromNow(),
+    exact: d.format("YYYY-MM-DD HH:mm:ss"),
+  };
+};
+
+export function formatTimeAgo(dateInput: string | number | Date): string {
+  const d = parseBackendUTC(dateInput);
+  return d.isValid() ? d.fromNow() : "Unknown";
+}
+
+export function formatDateWithTimeAgo(
+  dateInput: string | number | Date | null | undefined,
+  locale: string = "en"
+): string {
+  if (!dateInput) return "N/A";
+
+  const d = parseBackendUTC(dateInput);
+  if (!d.isValid()) return "N/A";
+
+  const formatted = d.locale(locale).format("MMMM D, YYYY h:mm A");
+  return `${formatted} (${d.fromNow()})`;
+}
+