@leandrosk/dashboard 3.5.5

package/src/lib/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/vdb/lib/utils.js"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/lib/components/ui/tooltip.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
+
+const meta = {
+    title: 'UI/Tooltip',
+    component: Tooltip,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button>Hover me</Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>This is a tooltip</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    ),
+};

package/src/lib/components/ui/tooltip.tsx

@@ -0,0 +1,51 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import { cn } from '@/vdb/lib/utils.js';
+
+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 = 4,
+    children,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+    return (
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+                data-slot="tooltip-content"
+                sideOffset={sideOffset}
+                className={cn(
+                    'bg-secondary text-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 max-w-sm rounded-md px-3 py-1.5 text-xs',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <TooltipPrimitive.Arrow className="bg-secondary fill-secondary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/lib/constants.ts

@@ -0,0 +1,24 @@
+import { schemaCurrencyCodes } from '@/vdb/graphql/schema-enums.js';
+
+export const NEW_ENTITY_PATH = 'new';
+export const AUTHENTICATED_ROUTE_PREFIX = '/_authenticated';
+export const DEFAULT_CHANNEL_CODE = '__default_channel__';
+export const SUPER_ADMIN_ROLE_CODE = '__super_admin_role__';
+export const CUSTOMER_ROLE_CODE = '__customer_role__';
+
+/**
+ * Local storage keys
+ */
+export const LS_KEY_SESSION_TOKEN = 'vendure-session-token';
+export const LS_KEY_USER_SETTINGS = 'vendure-user-settings';
+export const LS_KEY_SELECTED_CHANNEL_TOKEN = 'vendure-selected-channel-token';
+export const LS_KEY_SHIPPING_TEST_ORDER = 'vendure-shipping-test-order';
+export const LS_KEY_SHIPPING_TEST_ADDRESS = 'vendure-shipping-test-address';
+
+/**
+ * @description
+ * Runtime access to the CurrencyCode enum values derived from the schema.
+ */
+export const CurrencyCode = Object.fromEntries(
+    schemaCurrencyCodes.map((code: string) => [code, code]),
+) as Record<string, string>;

package/src/lib/framework/alert/alert-extensions.tsx

@@ -0,0 +1,19 @@
+import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('dashboardAlertRegistry', new Map<string, DashboardAlertDefinition>());
+
+export function registerAlert<TResponse>(alert: DashboardAlertDefinition<TResponse>) {
+    globalRegistry.set('dashboardAlertRegistry', map => {
+        map.set(alert.id, alert);
+        return map;
+    });
+}
+
+export function getAlertRegistry() {
+    return globalRegistry.get('dashboardAlertRegistry');
+}
+
+export function getAlert(id: string) {
+    return getAlertRegistry().get(id);
+}

package/src/lib/framework/alert/alert-item.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { AlertEntry } from '@/vdb/hooks/use-alerts.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { ComponentProps } from 'react';
+
+interface AlertItemProps extends ComponentProps<'div'> {
+    alert: AlertEntry;
+}
+
+export function AlertItem({ alert, className, ...props }: Readonly<AlertItemProps>) {
+    if (!alert.active) {
+        return null;
+    }
+    const { definition: def } = alert;
+
+    return (
+        <div className={cn('flex items-center justify-between gap-1', className)} {...props}>
+            <div className="flex flex-col">
+                <span className="text-sm">
+                    {typeof def.title === 'string' ? def.title : def.title(alert.lastData)}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                    {typeof def.description === 'string'
+                        ? def.description
+                        : def.description?.(alert.lastData)}
+                </span>
+            </div>
+            <div className="flex items-center gap-1">
+                {def.actions?.map(action => (
+                    <Button
+                        key={action.label}
+                        variant="secondary"
+                        size="sm"
+                        onClick={async () => {
+                            await action.onClick({ data: alert.lastData, dismiss: () => alert.dismiss() });
+                        }}
+                    >
+                        {action.label}
+                    </Button>
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/lib/framework/alert/alerts-indicator.tsx

@@ -0,0 +1,22 @@
+import { useAlerts } from '@/vdb/hooks/use-alerts.js';
+import { cn } from '@/vdb/lib/utils.js';
+
+export function AlertsIndicator() {
+    const { activeCount, highestSeverity } = useAlerts();
+
+    if (activeCount === 0) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                `absolute -right-1 -top-1 rounded-full bg-primary text-xs w-4 h-4 flex items-center justify-center`,
+                highestSeverity === 'error' && 'bg-destructive',
+                highestSeverity === 'warning' && 'bg-yellow-400 dark:bg-yellow-600',
+            )}
+        >
+            {activeCount}
+        </div>
+    );
+}

package/src/lib/framework/alert/search-index-buffer-alert/search-index-buffer-alert.ts

@@ -0,0 +1,41 @@
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { toast } from 'sonner';
+
+import { DashboardAlertDefinition } from '../../extension-api/types/index.js';
+
+const pendingSearchIndexUpdatesDocument = graphql(`
+    query GetPendingSearchIndexUpdates {
+        pendingSearchIndexUpdates
+    }
+`);
+
+export const runPendingSearchIndexUpdatesDocument = graphql(`
+    mutation RunPendingSearchIndexUpdates {
+        runPendingSearchIndexUpdates {
+            success
+        }
+    }
+`);
+
+export const searchIndexBufferAlert: DashboardAlertDefinition<number> = {
+    id: 'search-index-buffer-alert',
+    check: async () => {
+        const data = await api.query(pendingSearchIndexUpdatesDocument);
+        return data.pendingSearchIndexUpdates;
+    },
+    shouldShow: data => data > 0,
+    title: data => /* i18n*/ `${data} pending search index updates`,
+    severity: data => (data < 10 ? 'info' : 'warning'),
+    actions: [
+        {
+            label: /* i18n*/ `Run pending updates`,
+            onClick: async ({ dismiss }) => {
+                await api.mutate(runPendingSearchIndexUpdatesDocument, {});
+                toast.success(/* i18n*/ 'Running pending search index updates');
+                dismiss();
+            },
+        },
+    ],
+    recheckInterval: 60_000,
+};

package/src/lib/framework/component-registry/component-registry.tsx

@@ -0,0 +1,18 @@
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
+import React from 'react';
+import { getDisplayComponent } from '../extension-api/display-component-extensions.js';
+import { getInputComponent } from '../extension-api/input-component-extensions.js';
+
+export type DataDisplayComponent<T extends Record<string, any> = Record<string, any>> = React.ComponentType<T & { value: any}>;
+
+// Component registry hook that uses the global registry
+export function useComponentRegistry() {
+    return {
+        getDisplayComponent: (id: string): DataDisplayComponent | undefined => {
+            return getDisplayComponent(id);
+        },
+        getInputComponent: (id: string): DashboardFormComponent | undefined => {
+            return getInputComponent(id);
+        },
+    };
+}

package/src/lib/framework/component-registry/display-component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useComponentRegistry } from './component-registry.js';
+
+/**
+ * @description
+ * This component is used to delegate the rendering of a component to the component registry.
+ *
+ * @example
+ * ```ts
+ * <Delegate component="money.display.default" value={100} />
+ * ```
+ *
+ * @returns
+ */
+export function DisplayComponent(
+    props: Readonly<{
+        id: string;
+        value: any;
+    }>,
+): React.ReactNode {
+    const { getDisplayComponent } = useComponentRegistry();
+    const Component = getDisplayComponent(props.id.toString());
+    if (!Component) {
+        throw new Error(`Component with id ${props.id.toString()} not found`);
+    }
+    const { value, ...rest } = props;
+    return <Component value={value} {...rest} />;
+}

package/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -0,0 +1,92 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
+import { DashboardBaseWidgetProps } from '@/vdb/framework/extension-api/types/index.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
+import { createContext, useEffect, useRef, useState } from 'react';
+
+export type WidgetDimensions = {
+    width: number;
+    height: number;
+};
+
+export const WidgetContentContext = createContext<WidgetDimensions>({ width: 0, height: 0 });
+
+/**
+ * @description
+ * A wrapper component that should be used for any custom Insights page widgets.
+ * This ensures that your custom widget has all the basic functionality needed to be
+ * correctly rendered on the Insights page.
+ *
+ * @docsCategory extensions-api
+ * @docsPage widgets
+ * @since 3.3.0
+ */
+export function DashboardBaseWidget({
+    id,
+    config,
+    children,
+    title,
+    description,
+    actions,
+}: DashboardBaseWidgetProps) {
+    const headerRef = useRef<HTMLDivElement>(null);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState<WidgetDimensions>({ width: 0, height: 0 });
+
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (wrapperRef.current && contentRef.current) {
+                const contentStyles = window.getComputedStyle(contentRef.current);
+                const paddingTop = parseFloat(contentStyles.paddingTop);
+                const paddingBottom = parseFloat(contentStyles.paddingBottom);
+                const paddingLeft = parseFloat(contentStyles.paddingLeft);
+                const paddingRight = parseFloat(contentStyles.paddingRight);
+
+                const headerHeight = headerRef.current?.offsetHeight ?? 0;
+
+                setDimensions({
+                    width: wrapperRef.current.offsetWidth - paddingLeft - paddingRight,
+                    height: wrapperRef.current.offsetHeight - paddingTop - paddingBottom - headerHeight,
+                });
+            }
+        };
+
+        updateDimensions();
+        const observer = new ResizeObserver(updateDimensions);
+        if (wrapperRef.current) {
+            observer.observe(wrapperRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <Card
+            ref={wrapperRef}
+            key={`dashboard-widget-${id}`}
+            className={cn('h-full w-full flex flex-col rounded-md', !title && 'pt-6')}
+        >
+            {title && (
+                <CardHeader
+                    ref={headerRef}
+                    className={cn(
+                        'flex flex-col lg:flex-row  items-start lg:items-center',
+                        actions ? 'justify-between' : 'justify-start',
+                    )}
+                >
+                    <div>
+                        <CardTitle>
+                            <Trans>{title}</Trans>
+                        </CardTitle>
+                        {description && <CardDescription>{description}</CardDescription>}
+                    </div>
+                    {actions && <div className="flex items-center gap-2">{actions}</div>}
+                </CardHeader>
+            )}
+            <CardContent ref={contentRef} className="grow">
+                <WidgetContentContext.Provider value={dimensions}>{children}</WidgetContentContext.Provider>
+            </CardContent>
+        </Card>
+    );
+}

package/src/lib/framework/dashboard-widget/latest-orders-widget/index.tsx

@@ -0,0 +1,153 @@
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import {
+    CustomerCell,
+    OrderMoneyCell,
+    OrderStateCell,
+} from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { useLingui } from '@lingui/react/macro';
+import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
+import { DashboardBaseWidget } from '../base-widget.js';
+import { useWidgetFilters } from '@/vdb/hooks/use-widget-filters.js';
+import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
+
+export const WIDGET_ID = 'latest-orders-widget';
+
+export function LatestOrdersWidget() {
+    const { t } = useLingui();
+    const { formatRelativeDate } = useLocalFormat();
+    const { dateRange } = useWidgetFilters();
+    const { setTableSettings, settings } = useUserSettings();
+    const tableSettings = settings.tableSettings?.[WIDGET_ID];
+
+    const [sorting, setSorting] = useState<SortingState>([
+        {
+            id: 'orderPlacedAt',
+            desc: true,
+        },
+    ]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(tableSettings?.pageSize ?? 10);
+    const [filters, setFilters] = useState<ColumnFiltersState>([
+        {
+            id: 'orderPlacedAt',
+            value: {
+                between: {
+                    start: dateRange.from.toISOString(),
+                    end: dateRange.to.toISOString(),
+                },
+            },
+        },
+    ]);
+
+    // Update page size if user settings change
+    useEffect(() => {
+        if (tableSettings?.pageSize !== undefined) {
+            setPageSize(tableSettings.pageSize);
+        }
+    }, [tableSettings?.pageSize]);
+
+    // Update filters when date range changes
+    useEffect(() => {
+        setFilters([
+            {
+                id: 'orderPlacedAt',
+                value: {
+                    between: {
+                        start: dateRange.from.toISOString(),
+                        end: dateRange.to.toISOString(),
+                    },
+                },
+            },
+        ]);
+    }, [dateRange]);
+
+    const defaultVisibility = {
+        code: true,
+        total: true,
+        orderPlacedAt: true,
+    };
+
+    const columnVisibility = tableSettings?.columnVisibility ?? defaultVisibility;
+
+    return (
+        <DashboardBaseWidget id={WIDGET_ID} title={t`Latest Orders`} description={t`Your latest orders`}>
+            <PaginatedListDataTable
+                page={page}
+                transformVariables={variables => ({
+                    ...variables,
+                    options: {
+                        ...variables.options,
+                        filter: {
+                            active: {
+                                eq: false,
+                            },
+                            state: {
+                                notIn: ['Cancelled', 'Draft'],
+                            },
+                            ...(variables.options?.filter ?? {}),
+                        },
+                    },
+                })}
+                customizeColumns={{
+                    code: {
+                        header: t`Code`,
+                        cell: ({ row }) => {
+                            return (
+                                <Button variant="ghost" asChild>
+                                    <Link to={`/orders/${row.original.id}`}>{row.original.code}</Link>
+                                </Button>
+                            );
+                        },
+                    },
+                    orderPlacedAt: {
+                        header: t`Placed At`,
+                        cell: ({ row }) => {
+                            return (
+                                <span className="capitalize">
+                                    {formatRelativeDate(row.original.orderPlacedAt ?? new Date())}
+                                </span>
+                            );
+                        },
+                    },
+                    total: {
+                        meta: {
+                            dependencies: ['currencyCode'],
+                        },
+                        header: t`Total`,
+                        cell: OrderMoneyCell,
+                    },
+                    totalWithTax: {
+                        meta: { dependencies: ['currencyCode'] },
+                        cell: OrderMoneyCell,
+                    },
+                    state: { cell: OrderStateCell },
+                    customer: { cell: CustomerCell },
+                }}
+                itemsPerPage={pageSize}
+                sorting={sorting}
+                columnFilters={filters}
+                listQuery={latestOrdersQuery}
+                defaultVisibility={columnVisibility}
+                onPageChange={(_, page, newPageSize) => {
+                    setPage(page);
+                    setPageSize(newPageSize);
+                    setTableSettings(WIDGET_ID, 'pageSize', newPageSize);
+                }}
+                onSortChange={(_, sorting) => {
+                    setSorting(sorting);
+                }}
+                onFilterChange={(_, filters) => {
+                    setFilters(filters);
+                }}
+                onColumnVisibilityChange={(_, columnVisibility) => {
+                    setTableSettings(WIDGET_ID, 'columnVisibility', columnVisibility);
+                }}
+            />
+        </DashboardBaseWidget>
+    );
+}

package/src/lib/framework/dashboard-widget/latest-orders-widget/latest-orders-widget.graphql.ts

@@ -0,0 +1,35 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const latestOrderItemFragment = graphql(`
+    fragment LatestOrderItem on Order {
+        id
+        createdAt
+        updatedAt
+        type
+        orderPlacedAt
+        code
+        state
+        total
+        totalWithTax
+        currencyCode
+        customer {
+            id
+            firstName
+            lastName
+        }
+    }
+`);
+
+export const latestOrdersQuery = graphql(
+    `
+        query GetLatestOrders($options: OrderListOptions) {
+            orders(options: $options) {
+                items {
+                    ...LatestOrderItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [latestOrderItemFragment],
+);

package/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx

@@ -0,0 +1,50 @@
+import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
+import { useWidgetDimensions } from '@/vdb/hooks/use-widget-dimensions.js';
+
+export function MetricsChart({
+    chartData,
+    formatValue,
+    dataLabel,
+}: {
+    chartData: any[];
+    formatValue: (value: any) => string;
+    dataLabel: string;
+}) {
+    const { width, height } = useWidgetDimensions();
+
+    return (
+        <AreaChart width={width} height={height} data={chartData}>
+            <defs>
+                <linearGradient id="gradientFill" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="var(--color-brand)" stopOpacity={0.9} />
+                    <stop offset="100%" stopColor="var(--color-brand)" stopOpacity={0.05} />
+                </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="4 4" stroke="var(--color-border)" />
+            <XAxis className="text-xs" color="var(--color-foreground)" dataKey="name" interval={2} />
+            <YAxis className="text-xs" color="var(--color-foreground)" tickFormatter={formatValue} />
+            <Tooltip
+                formatter={formatValue}
+                contentStyle={{
+                    borderRadius: 4,
+                    padding: 4,
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    backgroundColor: 'var(--popover)',
+                    borderColor: 'var(--border)',
+                }}
+                labelStyle={{ fontSize: 12, color: 'var(--popover-foreground)' }}
+                itemStyle={{ fontSize: 14, color: 'var(--popover-foreground)' }}
+            />
+            <Area
+                type="monotone"
+                dataKey="sales"
+                name={dataLabel}
+                stroke="var(--color-brand)"
+                strokeWidth={2}
+                strokeOpacity={0.8}
+                fill={'url(#gradientFill)'}
+            />
+        </AreaChart>
+    );
+}