ezekiel-cli 5.8.2

package/gui/v3/src/components/commons/InputBox.tsx

@@ -0,0 +1,88 @@
+import { useState, useCallback, useEffect, useId } from "react";
+import { Input } from "@/components/ui/input";
+import { debounce, type DebouncedFunction } from "@/lib/utils";
+
+interface InputBoxProps {
+  value: string;
+  onChange: (value: string) => void;
+  onApply?: (finalValue: string) => void;
+  placeholder?: string;
+  label?: string;
+  debounceTime?: number;
+  type?: React.HTMLInputTypeAttribute;
+  className?: string;
+  id?: string;
+}
+
+export default function InputBox({
+  value,
+  onChange,
+  onApply,
+  placeholder = "",
+  label,
+  debounceTime = 0,
+  type = "text",
+  className,
+  id,
+}: InputBoxProps) {
+  const generatedId = useId();
+  const inputId = id || generatedId;
+
+  const [inputValue, setInputValue] = useState(value);
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  const debouncedOnApply = useCallback(
+    onApply
+      ? debounce((keyword: string) => {
+          onApply(keyword);
+        }, debounceTime)
+      : ((() => {}) as DebouncedFunction<any>),
+    [onApply, debounceTime],
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    onChange(newValue);
+
+    if (onApply && debounceTime > 0) {
+      debouncedOnApply(newValue);
+    } else if (onApply && debounceTime === 0) {
+      onApply(newValue);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && onApply) {
+      if (debounceTime > 0) {
+        debouncedOnApply.cancel();
+      }
+      onApply(inputValue);
+    }
+  };
+
+  return (
+    <div className="flex-grow w-full">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="text-xs text-muted-foreground block mb-1"
+        >
+          {label}
+        </label>
+      )}
+      <Input
+        id={inputId}
+        type={type}
+        value={inputValue}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        className={className}
+      />
+    </div>
+  );
+}

package/gui/v3/src/components/data/DataPagination.tsx

@@ -0,0 +1,116 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import type { Table } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+interface DataPaginationProps<T> {
+  table: Table<T>;
+  siblingCount?: number;
+  boundaryCount?: number;
+}
+
+const range = (start: number, end: number): number[] =>
+  Array.from({ length: end - start + 1 }, (_, i) => start + i);
+
+const generatePaginationRanges = (
+  totalPages: number,
+  currentPage: number,
+  siblings: number,
+  boundaries: number,
+): (number | null)[] => {
+  const totalNumbers = siblings * 2 + 3 + boundaries * 2;
+  const lastPage = totalPages - 1;
+
+  if (totalPages <= totalNumbers) return range(0, lastPage);
+
+  const startPages = range(0, boundaries - 1);
+  const endPages = range(lastPage - boundaries + 1, lastPage);
+
+  const leftSibling = Math.max(boundaries, currentPage - siblings);
+  const rightSibling = Math.min(lastPage - boundaries, currentPage + siblings);
+
+  const showLeftEllipsis = leftSibling > boundaries;
+  const showRightEllipsis = rightSibling < lastPage - boundaries;
+
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const visiblePages = range(
+      lastPage - (siblings * 2 + boundaries + 1),
+      lastPage,
+    );
+    return [...startPages, null, ...visiblePages];
+  }
+
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const visiblePages = range(0, siblings * 2 + boundaries);
+    return [...visiblePages, null, ...endPages];
+  }
+
+  if (showLeftEllipsis && showRightEllipsis) {
+    const middlePages = range(leftSibling, rightSibling);
+    return [...startPages, null, ...middlePages, null, ...endPages];
+  }
+
+  return range(0, lastPage);
+};
+
+export default function DataPagination<T>({
+  table,
+  siblingCount = 1,
+  boundaryCount = 1,
+}: DataPaginationProps<T>) {
+  const pageCount = table.getPageCount();
+  const currentPageIndex = table.getState().pagination.pageIndex;
+
+  const paginationRange = useMemo(
+    () =>
+      generatePaginationRanges(
+        pageCount,
+        currentPageIndex,
+        siblingCount,
+        boundaryCount,
+      ),
+    [pageCount, currentPageIndex, siblingCount, boundaryCount],
+  );
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={() => table.previousPage()}
+            isActive={table.getCanPreviousPage()}
+          />
+        </PaginationItem>
+
+        {paginationRange.map((page, idx) =>
+          page === null ? (
+            <PaginationEllipsis key={`ellipsis-${idx}`} />
+          ) : (
+            <PaginationItem key={`page-${page}`}>
+              <PaginationLink
+                onClick={() => table.setPageIndex(page)}
+                isActive={currentPageIndex === page}
+              >
+                {page + 1}
+              </PaginationLink>
+            </PaginationItem>
+          ),
+        )}
+
+        <PaginationItem>
+          <PaginationNext
+            onClick={() => table.nextPage()}
+            isActive={table.getCanNextPage()}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}

package/gui/v3/src/components/data/DataTable.tsx

@@ -0,0 +1,84 @@
+import {
+  flexRender,
+  type Table as ReactTableType,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface DataTableProps<TData> {
+  table: ReactTableType<TData>;
+}
+
+const DataTable = <TData,>({ table }: DataTableProps<TData>) => {
+  return (
+    <div className="rounded-xs border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder ? null : (
+                      <div
+                        {...{
+                          className: header.column.getCanSort()
+                            ? "cursor-pointer select-none flex items-center gap-1"
+                            : "",
+                          onClick: header.column.getToggleSortingHandler(),
+                        }}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                        {{
+                          asc: <span className="ml-1">▲</span>,
+                          desc: <span className="ml-1">▼</span>,
+                        }[header.column.getIsSorted() as string] ?? null}
+                      </div>
+                    )}
+                  </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}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell
+                colSpan={table.getAllColumns().length}
+                className="h-24 text-center"
+              >
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default DataTable;

package/gui/v3/src/components/layout/Header.tsx

@@ -0,0 +1,42 @@
+import GuiMenu from "@/features/menu/components/GuiMenu";
+import InsitesMenu from "@/features/menu/components/InsitesMenu";
+import { useTheme } from "@/features/theme/hook";
+import { Link } from "@tanstack/react-router";
+
+export default function Header() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <header className="h-80px py-4 px-6 fixed top-0 left-0 right-0 z-50 bg-background">
+      <nav className="flex flex-wrap justify-between items-center">
+        <Link to="/" title="Insites">
+          <img
+            src={`/assets/ins-logo-${theme}.svg`}
+            width={103}
+            height={48}
+            alt="Insites"
+          />
+        </Link>
+        <div className="flex justify-end items-center gap-3 flex-wrap">
+          <GuiMenu />
+          <div className="self-stretch border-r border-color-ui-3 w-[1px] my-2.5"></div>
+          <InsitesMenu />
+          <div className="self-stretch border-r border-color-ui-3 w-[1px] my-2.5"></div>
+          <div className="flex justify-end items-center">
+            <button
+              className="flex flex-col items-start"
+              onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+            >
+              <img
+                src={`/assets/icons/menu-theme-${theme}.png`}
+                width={48}
+                height={48}
+                alt="Theme"
+              />
+            </button>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+}

package/gui/v3/src/components/layout/Layout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "@tanstack/react-router";
+
+import Header from "./Header";
+import Providers from "@/lib/providers";
+
+export default function Layout() {
+  return (
+    <Providers>
+      <Header />
+      <div className="mt-[80px] w-full">
+        <Outlet />
+      </div>
+    </Providers>
+  );
+}

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

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        warning:
+          "border-transparent bg-yellow-600 text-white [a&]:hover:bg-yellow-600/90 focus-visible:ring-yellow-600/20 dark:focus-visible:ring-yellow-600/40 dark:bg-yellow-600/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }