ezekiel-cli 5.8.2

package/gui/v3/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/gui/v3/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/gui/v3/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/gui/v3/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/gui/v3/src/features/config/context.ts

@@ -0,0 +1,21 @@
+import { createContext } from "react";
+import type { IConfig } from "./type";
+
+interface ConfigProviderState {
+  config: IConfig;
+  setConfig: (data: IConfig) => void;
+  configIsLoading: boolean;
+}
+
+export const configInitialState: ConfigProviderState = {
+  config: {
+    instanceURL: "",
+  },
+  setConfig: () => null,
+  configIsLoading: true,
+};
+
+const ConfigProviderContext =
+  createContext<ConfigProviderState>(configInitialState);
+
+export default ConfigProviderContext;

package/gui/v3/src/features/config/hooks.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import ConfigProviderContext from "./context";
+
+export const useConfig = () => {
+  const context = useContext(ConfigProviderContext);
+
+  if (context === undefined)
+    throw new Error("useConfig must be used within a ConfigProvider");
+
+  return context;
+};

package/gui/v3/src/features/config/provider.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import ConfigProviderContext, { configInitialState } from "./context";
+import { getConfig } from "./services";
+
+export default function ConfigProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [config, setConfig] = useState(configInitialState.config);
+  const [configIsLoading, setConfigIsLoading] = useState(
+    configInitialState.configIsLoading
+  );
+
+  useEffect(() => {
+    getConfig().then((data) => {
+      setConfig(data);
+      setConfigIsLoading(false);
+    });
+  }, []);
+
+  return (
+    <ConfigProviderContext.Provider
+      value={{
+        config,
+        setConfig,
+        configIsLoading,
+      }}
+    >
+      {children}
+    </ConfigProviderContext.Provider>
+  );
+}

package/gui/v3/src/features/config/services.ts

@@ -0,0 +1,14 @@
+import { sendRequest } from "@/lib/api/request";
+import type { IConfig, IConfigResponse } from "./type";
+
+const transformReponse = (response: string): IConfig => {
+  const { INSTANCE_URL: instanceURL }: IConfigResponse = JSON.parse(response);
+  return {
+    instanceURL,
+  };
+};
+
+export const getConfig = async () => {
+  const { body } = await sendRequest<string>("/info");
+  return transformReponse(body);
+};

package/gui/v3/src/features/config/type.ts

@@ -0,0 +1,7 @@
+export interface IConfig {
+  instanceURL: string;
+}
+
+export interface IConfigResponse {
+  INSTANCE_URL: string;
+}

package/gui/v3/src/features/database/components/DatabaseLayout.tsx

@@ -0,0 +1,44 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import DatabaseSidebar from "./DatabaseSidebar";
+import RecordsViewer from "./RecordsViewer";
+import type { ITable, ITablesResponse } from "../schema/tables";
+import DatabaseNotFound from "./DatabaseNotFound";
+
+interface Props {
+  tables: ITablesResponse;
+  selectedTable: ITable | null;
+  setSelectedTable: (table: ITable | null) => void;
+}
+
+export default function DatabaseLayout({
+  tables,
+  selectedTable,
+  setSelectedTable,
+}: Props) {
+  return (
+    <div className="absolute top-[80px] left-0 right-0 bottom-0">
+      <ResizablePanelGroup className="h-full" direction="horizontal">
+        <ResizablePanel defaultSize={23} className="relative">
+          <DatabaseSidebar
+            key={tables.current_page}
+            data={tables}
+            selectedTable={selectedTable}
+            setSelectedTable={setSelectedTable}
+          />
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel className="p-4">
+          {selectedTable ? (
+            <RecordsViewer key={selectedTable.id} source={selectedTable} />
+          ) : (
+            <DatabaseNotFound message="No table selected" />
+          )}
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+}

package/gui/v3/src/features/database/components/DatabaseLoader.tsx

@@ -0,0 +1,3 @@
+export default function DatabaseLoader() {
+  return <div>Loading...</div>;
+}

package/gui/v3/src/features/database/components/DatabaseNotFound.tsx

@@ -0,0 +1,6 @@
+interface Props {
+  message?: string;
+}
+export default function DatabaseNotFound({ message = "No data found" }: Props) {
+  return <div className="text-sm text-muted-foreground">{message}</div>;
+}

package/gui/v3/src/features/database/components/DatabaseSidebar.tsx

@@ -0,0 +1,60 @@
+import { Input } from "@/components/ui/input";
+import {
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { Search } from "lucide-react";
+import type { ITable, ITablesResponse } from "../schema/tables";
+
+interface DatabaseSidebarProps {
+  data: ITablesResponse;
+  selectedTable: ITable | null;
+  setSelectedTable: (table: ITable) => void;
+}
+
+export default function DatabaseSidebar({
+  data,
+  selectedTable,
+  setSelectedTable,
+}: DatabaseSidebarProps) {
+  return (
+    <div className="absolute top-0 left-0 w-full h-full">
+      <SidebarHeader>
+        <div className="relative w-full">
+          <Input type="text" placeholder="Search" className="pl-10" />
+          <Search className="absolute left-2.5 top-2" size={18} />
+        </div>
+      </SidebarHeader>
+
+      <SidebarGroupLabel>
+        <span className="font-bold">Tables</span>
+      </SidebarGroupLabel>
+      <SidebarContent className="h-full">
+        <SidebarGroup>
+          <SidebarGroupContent className="overflow-y-auto">
+            <SidebarMenu>
+              {data.results.map((table: ITable) => (
+                <SidebarMenuItem key={table.id}>
+                  <SidebarMenuButton
+                    isActive={table.id === selectedTable?.id}
+                    onClick={() => setSelectedTable(table)}
+                  >
+                    <div className="truncate">
+                      {table.metadata?.label ?? table.name}
+                    </div>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </div>
+  );
+}

package/gui/v3/src/features/database/components/LoadingIndicator.tsx

@@ -0,0 +1,3 @@
+export default function LoadingIndicator() {
+  return <div>Loading...</div>;
+}

package/gui/v3/src/features/database/components/RecordsFilter.tsx

@@ -0,0 +1,89 @@
+import { useState, useCallback } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { IRecordsFilterInput } from "../schema/records";
+
+import InputBox from "@/components/commons/InputBox";
+import DateRangeFilter from "@/components/commons/DateRangeFilter";
+
+export default function RecordsFilter({
+  onFilter,
+}: {
+  onFilter: (filter: IRecordsFilterInput) => void;
+}) {
+  const [filterBy, setFilterBy] = useState<"id" | "created_at" | "updated_at">(
+    "id",
+  );
+
+  const [idFilterValue, setIdFilterValue] = useState<string>("");
+
+  const handleFilterChange = useCallback(
+    (key: string, value: any) => {
+      onFilter({ [key]: value });
+    },
+    [onFilter],
+  );
+
+  return (
+    <div className="flex flex-col sm:flex-row items-start sm:items-end gap-3 p-4">
+      <div className="flex-shrink-0 w-full sm:w-auto">
+        <label
+          htmlFor="filter-by-select"
+          className="text-xs text-muted-foreground block mb-1"
+        >
+          Filter By:
+        </label>
+        <Select
+          defaultValue={filterBy}
+          onValueChange={(value: typeof filterBy) => {
+            setFilterBy(value);
+            if (value !== "id") {
+              setIdFilterValue("");
+              handleFilterChange(value, {});
+            } else {
+              handleFilterChange(
+                "id",
+                idFilterValue ? { value: idFilterValue } : {},
+              );
+            }
+          }}
+        >
+          <SelectTrigger
+            id="filter-by-select"
+            className="w-full sm:w-[180px] h-10"
+          >
+            <SelectValue placeholder="Select a filter option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="id">ID</SelectItem>
+            <SelectItem value="created_at">Created At</SelectItem>
+            <SelectItem value="updated_at">Updated At</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {filterBy === "id" ? (
+        <InputBox
+          value={idFilterValue}
+          onChange={setIdFilterValue}
+          onApply={(keyword) =>
+            handleFilterChange("id", keyword ? { value: keyword.trim() } : {})
+          }
+          label="Keyword:"
+          placeholder="Enter ID or keyword"
+          debounceTime={500}
+        />
+      ) : (
+        <DateRangeFilter
+          filterBy={filterBy}
+          onFilterApply={(value) => handleFilterChange(filterBy, value)}
+        />
+      )}
+    </div>
+  );
+}

package/gui/v3/src/features/database/components/RecordsTable.tsx

@@ -0,0 +1,64 @@
+import { flexRender } from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { IRecordsColumn } from "../hooks/useDatabaseColumns";
+
+interface RecordsTableProps {
+  columns: IRecordsColumn;
+  data: any[];
+}
+
+export default function RecordsTable({ columns, data }: RecordsTableProps) {
+  return (
+    <div className="rounded-xs border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">{columns.id.header}</TableHead>
+            {columns.properties.map((column, key) => (
+              <TableHead key={key}>{column.header}</TableHead>
+            ))}
+            <TableHead className="w-[120px]">
+              {columns.created_at.header}
+            </TableHead>
+            <TableHead className="w-[120px]">
+              {columns.updated_at.header}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.length ? (
+            data.map((record) => (
+              <TableRow key={record.id}>
+                <TableCell className="font-medium">{record.id}</TableCell>
+                {columns.properties.map((column, key) => (
+                  <TableCell key={key}>
+                    {flexRender(column.accessorKey, record)}
+                  </TableCell>
+                ))}
+                <TableCell>{record.created_at}</TableCell>
+                <TableCell>{record.updated_at}</TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell
+                colSpan={columns.properties.length + 3}
+                className="h-24 text-center"
+              >
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/gui/v3/src/features/database/components/RecordsViewer.tsx

@@ -0,0 +1,39 @@
+import { useRecordsQuery } from "../hooks/useRecords";
+import type { ITable } from "../schema/tables";
+import LoadingIndicator from "./LoadingIndicator";
+import RecordsFilter from "./RecordsFilter";
+import { createColumns } from "../hooks/useDatabaseColumns";
+import RecordsTable from "./RecordsTable";
+import { useRecordsVariable } from "../reducers/useRecordsVariable";
+
+interface DatabaseViewerProps {
+  source: ITable;
+}
+
+export default function RecordsViewer({ source }: DatabaseViewerProps) {
+  const [variables, setVariables] = useRecordsVariable(source);
+
+  const { data: response, isLoading } = useRecordsQuery(variables);
+
+  const data = response?.results ?? [];
+  const columns = createColumns(source);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="text-4xl font-light mb-4">{source.metadata?.label}</h1>
+      <RecordsFilter
+        onFilter={(data) => {
+          setVariables({
+            type: "SET_FILTER",
+            payload: data,
+          });
+        }}
+      />
+      {isLoading ? (
+        <LoadingIndicator />
+      ) : (
+        <RecordsTable columns={columns} data={data} />
+      )}
+    </div>
+  );
+}