@deenruv/admin-dashboard 1.0.0

package/dist/pages/assets/_components/AssetListView.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, TableLabel, apiClient, DropdownMenuSeparator, useTranslation, } from '@deenruv/react-ui-devkit';
+import { DeletionResult } from '@deenruv/admin-types';
+import { useCallback } from 'react';
+import { toast } from 'sonner';
+import { Copy, ExternalLink, MoreHorizontal, Pencil, Trash } from 'lucide-react';
+export const AssetListView = ({ assets, onAssetChange }) => {
+    const { t } = useTranslation(['common', 'assets']);
+    const copyAssetUrl = (url) => {
+        navigator.clipboard.writeText(url);
+        toast.success(t('assets:urlCopied', 'Asset URL copied to clipboard'));
+    };
+    const onDelete = useCallback(async (assetId) => {
+        const { deleteAsset } = await apiClient('mutation')({
+            deleteAsset: [{ input: { assetId } }, { message: true, result: true }],
+        });
+        if (deleteAsset.result === DeletionResult.DELETED) {
+            toast.success(t('assets:deleteSuccess', 'Asset deleted successfully'));
+            onAssetChange();
+        }
+        else
+            toast.error(t('assets:deleteFail', 'Failed to delete asset') + ': ' + deleteAsset.message);
+    }, [onAssetChange, t]);
+    if (assets.length === 0) {
+        return (_jsxs("div", { className: "flex min-h-[300px] flex-col items-center justify-center rounded-lg border p-8 text-center", children: [_jsx("div", { className: "bg-muted/50 mb-4 rounded-full p-6", children: _jsx(Pencil, { size: 32, className: "text-muted-foreground" }) }), _jsx("h3", { className: "text-lg font-medium", children: "No assets found" }), _jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: "Upload some assets or try a different filter" })] }));
+    }
+    return (_jsxs("div", { className: "bg-background overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] gap-4 border-b border-stone-200 p-3 text-sm font-medium", children: [_jsx("div", { className: "w-16 text-center", children: _jsx(TableLabel, { children: t('assets:preview') }) }), _jsx("div", { children: _jsx(TableLabel, { children: t('assets:name') }) })] }), _jsx("div", { className: "divide-y", children: assets.map((asset) => (_jsxs("div", { className: "hover:bg-muted/10 grid grid-cols-[auto_1fr_auto] items-center gap-4 p-3 transition-colors", children: [_jsx("div", { className: "bg-muted/20 size-16 overflow-hidden rounded", children: _jsx("img", { src: `${asset.preview}?preset=tile`, alt: asset.name, className: "size-full object-cover" }) }), _jsx("div", { className: "text-muted-foreground truncate text-sm", title: asset.name, children: asset.name }), _jsx("div", { className: "flex items-center gap-1", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", variant: "ghost", className: "size-8 p-0", children: [_jsx(MoreHorizontal, { size: 16 }), _jsx("span", { className: "sr-only", children: "More options" })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => copyAssetUrl(asset.preview), className: "gap-2", children: [_jsx(Copy, { size: 14 }), _jsx("span", { children: t('assets:copyURL', 'Copy URL') })] }), _jsxs(DropdownMenuItem, { onClick: () => window.open(asset.preview, '_blank'), className: "gap-2", children: [_jsx(ExternalLink, { size: 14 }), _jsx("span", { children: t('assets:open', 'Open') })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => onDelete(asset.id), className: "text-destructive gap-2", children: [_jsx(Trash, { size: 14 }), _jsx("span", { children: t('assets:delete', 'Delete') })] })] })] }) })] }, asset.id))) })] }));
+};

package/dist/pages/assets/_components/EditAssetDialog.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { $ } from '@deenruv/admin-types';
+import { apiClient, Badge, Button, Card, DialogHeader, EntityCustomFields, formatDate, formatFileSize, Input, Separator, useDetailList, useTranslation, } from '@deenruv/react-ui-devkit';
+import { ScrollArea } from '@radix-ui/react-scroll-area';
+import { Copy, Crosshair, ImageIcon, TagIcon, X } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+export function EditAssetDialog({ resolve, reject, close, data: initialData, }) {
+    const { t } = useTranslation('assets');
+    const [data, setData] = useState(initialData);
+    const [isEditingFocalPoint, setIsEditingFocalPoint] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [tagInput, setTagInput] = useState('');
+    const [nameInput, setNameInput] = useState(data.name);
+    const { refetch } = useDetailList();
+    const onClose = () => {
+        close();
+    };
+    const onSubmit = async () => {
+        const input = {
+            id: data.id,
+            name: nameInput,
+            focalPoint: data.focalPoint ?? undefined,
+            tags: data.tags.map((t) => t.value),
+            customFields: {},
+        };
+        try {
+            const { updateAsset } = await apiClient('mutation')({
+                updateAsset: [{ input: $('input', 'UpdateAssetInput!') }, { __typename: true, '...on Asset': { id: true } }],
+            }, { variables: { input } });
+            if (updateAsset.__typename === 'Asset') {
+                toast.success(t('dialogs.editedSuccess'));
+                resolve({ success: true });
+                refetch();
+            }
+            else {
+                toast.error(t('dialogs.editedFail'));
+            }
+        }
+        catch (error) {
+            console.error(t('dialogs.uploadFail'), error);
+            setIsUploading(false);
+            reject?.(new Error('Upload failed'));
+        }
+    };
+    const button = useRef(null);
+    const handleImageClick = (e) => {
+        if (!isEditingFocalPoint)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = (e.clientX - rect.left) / rect.width;
+        const y = (e.clientY - rect.top) / rect.height;
+        if (button.current && button.current.contains(e.target))
+            return;
+        setData({ ...data, focalPoint: { x, y } });
+    };
+    const toggleFocalPointEditing = () => {
+        setIsEditingFocalPoint(!isEditingFocalPoint);
+    };
+    const handleRemoveTag = (tag) => {
+        const updatedTags = (data.tags || []).filter((t) => t.value !== tag);
+        setData({ ...data, tags: updatedTags });
+    };
+    const handleAddTag = () => {
+        if (tagInput.trim() && !(data.tags.map((t) => t.value) || []).includes(tagInput.trim())) {
+            const updatedTags = [...(data.tags || []), { id: '', value: tagInput.trim() }];
+            setData({ ...data, tags: updatedTags });
+            setTagInput('');
+        }
+    };
+    return (_jsxs("div", { className: "mx-auto flex h-full w-full flex-col gap-6", children: [_jsx(DialogHeader, { className: "border-b pb-3 text-xl font-semibold", children: data.name }), _jsxs("div", { className: "flex h-full flex-col gap-6 md:flex-row", children: [_jsx("div", { className: "relative flex h-full w-full flex-col md:w-3/5", children: _jsx("div", { className: `bg-muted/30 relative flex h-full w-full overflow-hidden rounded-lg ${isEditingFocalPoint ? 'cursor-crosshair' : ''}`, onClick: handleImageClick, children: data?.source ? (_jsxs("div", { className: "relative h-full w-full", children: [_jsx("img", { src: data.source || '/placeholder.svg', alt: data.name, className: "absolute left-0 top-0 h-full w-full" }), _jsxs("div", { className: "absolute right-2 top-2 opacity-50 hover:opacity-100", children: [_jsxs(Button, { ref: button, variant: isEditingFocalPoint ? 'default' : 'outline', size: "sm", onClick: toggleFocalPointEditing, className: "flex items-center gap-1", children: [_jsx(Crosshair, { className: "h-4 w-4" }), isEditingFocalPoint ? t('dialogs.focalStop') : t('dialogs.focalEdit')] }), data.focalPoint && (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["x: ", data.focalPoint.x.toFixed(2), ", y: ", data.focalPoint.y.toFixed(2)] }))] }), data.focalPoint && (_jsx("div", { className: `absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform rounded-full border-2 border-white shadow-lg ${isEditingFocalPoint ? 'animate-pulse bg-blue-500/70' : 'bg-primary/70'}`, style: {
+                                            left: `${data.focalPoint.x * 100}%`,
+                                            top: `${data.focalPoint.y * 100}%`,
+                                        } }))] })) : (_jsx("div", { className: "bg-muted flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "text-muted-foreground/50 h-16 w-16" }) })) }) }), _jsx("div", { className: "flex w-full flex-col md:w-[45%]", children: _jsxs(Card, { className: "bg-card flex w-full flex-col border p-4 shadow-sm", children: [_jsx("h3", { className: "text-muted-foreground mb-3 text-sm font-medium", children: t('dialogs.details') }), _jsx(ScrollArea, { className: "h-[450px] w-full overflow-auto pr-4", children: _jsx("div", { className: "space-y-3", children: Object.entries(data).map(([key, value], index) => {
+                                            if (key === 'source')
+                                                return null;
+                                            return (_jsxs("div", { className: "group", children: [index > 0 && _jsx(Separator, { className: "my-2 opacity-50" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium capitalize", children: t(`detailsTable.${key}`) }), (key === 'createdAt' || key === 'updatedAt') && typeof value === 'string' ? (_jsx("span", { className: "text-sm", children: formatDate(value) })) : key === 'tags' && Array.isArray(value) ? (_jsx("div", { className: "group", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: (value || []).length ? ((value || []).map((tag, i) => (_jsxs(Badge, { variant: "secondary", className: "flex items-center gap-1 text-xs", children: [tag.value, _jsx(X, { className: "h-3 w-3 cursor-pointer", onClick: () => handleRemoveTag(tag.value) })] }, i)))) : (_jsx("span", { className: "text-muted-foreground text-xs", children: t('dialogs.noTags') })) }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx(Input, { value: tagInput, onChange: (e) => setTagInput(e.target.value), placeholder: t('dialogs.addTag'), className: "text-sm" }), _jsxs(Button, { className: "h-10", variant: "outline", onClick: handleAddTag, disabled: !tagInput.trim(), children: [_jsx(TagIcon, { className: "mr-1 h-4 w-4" }), t('dialogs.add')] })] })] }) })) : key === 'customFields' ? (_jsx("div", { children: _jsx(EntityCustomFields, { entityName: "asset", hideButton: true, withoutBorder: true }) })) : key === 'name' && typeof value === 'string' ? (_jsx("div", { children: _jsx(Input, { value: nameInput, onChange: (e) => setNameInput(e.target.value) }) })) : key === 'focalPoint' &&
+                                                                value &&
+                                                                typeof value === 'object' &&
+                                                                'x' in value &&
+                                                                'y' in value ? (_jsxs("span", { className: "bg-muted rounded px-2 py-1 font-mono text-sm", children: ["x: ", value.x.toFixed(2), ", y: ", value.y.toFixed(2)] })) : key === 'preview' ? (_jsxs("div", { className: "bg-secondary flex items-center justify-between rounded-md p-2 font-mono text-sm", children: [_jsx("span", { className: "truncate", children: String(value) }), _jsx("button", { onClick: () => {
+                                                                            navigator.clipboard.writeText(String(value)).then(() => toast(t('dialogs.linkCopied')));
+                                                                        }, className: "ml-2 text-gray-500 hover:text-gray-700", children: _jsx(Copy, { className: "h-4 w-4" }) })] })) : key === 'width' || key === 'height' ? (_jsx("span", { className: "break-words text-sm", children: `${value}px` })) : key === 'type' ? (_jsx("span", { className: "break-words text-sm", children: t('types.' + value) })) : key === 'fileSize' ? (_jsx("span", { className: "break-words text-sm", children: formatFileSize(+value) })) : (_jsx("div", { children: value ? (_jsx("span", { className: "break-words text-sm", children: String(value) })) : (_jsx("span", { className: "text-muted-foreground text-sm", children: t('dialogs.noFocal') })) }))] })] }, key));
+                                        }) }) })] }) })] }), _jsxs("div", { className: "flex items-center justify-end gap-3 border-t pt-2", children: [_jsx(Button, { onClick: onClose, variant: "outline", className: "px-4", disabled: isUploading, children: t('cancel') }), _jsx(Button, { onClick: onSubmit, variant: "default", className: "px-6", disabled: isUploading, children: isUploading ? t('uploading') : t('save') })] })] }));
+}

package/dist/pages/assets/_components/UploadAssetDialog.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { $ } from '@deenruv/admin-types';
+import { apiUploadClient, Badge, Button, Card, DialogHeader, EntityCustomFields, Input, ScrollArea, Separator, useTranslation, formatFileSize, } from '@deenruv/react-ui-devkit';
+import { Crosshair, ImageIcon, TagIcon, Upload, X } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+export function UploadAssetDialog({ close, reject, resolve, }) {
+    const { t } = useTranslation('assets');
+    const [file, setFile] = useState();
+    const [isEditingFocalPoint, setIsEditingFocalPoint] = useState(false);
+    const [tagInput, setTagInput] = useState('');
+    const [isUploading, setIsUploading] = useState(false);
+    const fileInputRef = useRef(null);
+    const button = useRef(null);
+    const onClose = () => {
+        close?.();
+    };
+    const onSubmit = async () => {
+        if (!file)
+            return;
+        setIsUploading(true);
+        const input = [{ file: file.file, tags: file.tags ?? [], customFields: {}, focalPoint: file.focalPoint }];
+        try {
+            const { createAssets } = await apiUploadClient('mutation')({
+                createAssets: [
+                    { input: $('input', '[CreateAssetInput!]!') },
+                    {
+                        __typename: true,
+                        '...on Asset': { id: true },
+                        '...on MimeTypeError': {
+                            fileName: true,
+                            mimeType: true,
+                            errorCode: true,
+                            message: true,
+                        },
+                    },
+                ],
+            }, { variables: { input } });
+            if (createAssets[0].__typename === 'Asset') {
+                toast.success(t('dialogs.createdSuccess'));
+                resolve({ success: true });
+            }
+            else {
+                toast.error(t('dialogs.createdFail'));
+            }
+        }
+        catch (error) {
+            console.error(t('dialogs.uploadFail'), error);
+            setIsUploading(false);
+            reject?.(new Error('Upload failed'));
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            handleFile(e.dataTransfer.files);
+        }
+    };
+    const handleFileInputChange = (e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            handleFile(e.target.files);
+        }
+    };
+    const handleFile = (fileList) => {
+        const files = Array.from(fileList);
+        if (files.length > 0) {
+            const selectedFile = files[0];
+            const fileType = selectedFile.type.split('/')[0];
+            if (fileType === 'image' || fileType === 'video' || fileType === 'audio') {
+                setFile({
+                    file: selectedFile,
+                    preview: URL.createObjectURL(selectedFile),
+                    type: fileType,
+                    fileSize: selectedFile.size,
+                    name: selectedFile.name,
+                    focalPoint: undefined,
+                    tags: [],
+                });
+            }
+            else {
+                alert(t('dialogs.invalidType'));
+            }
+        }
+    };
+    const handleImageClick = (e) => {
+        if (!isEditingFocalPoint || !file)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = (e.clientX - rect.left) / rect.width;
+        const y = (e.clientY - rect.top) / rect.height;
+        if (button.current && button.current.contains(e.target))
+            return;
+        setFile({ ...file, focalPoint: { x, y } });
+    };
+    const toggleFocalPointEditing = () => {
+        setIsEditingFocalPoint(!isEditingFocalPoint);
+    };
+    const handleRemoveTag = (tag) => {
+        if (!file)
+            return;
+        const updatedTags = (file.tags || []).filter((t) => t !== tag);
+        setFile({ ...file, tags: updatedTags });
+    };
+    const handleAddTag = () => {
+        if (!file)
+            return;
+        if (tagInput.trim() && !(file.tags || []).includes(tagInput.trim())) {
+            const updatedTags = [...(file.tags || []), tagInput.trim()];
+            setFile({ ...file, tags: updatedTags });
+            setTagInput('');
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleAddTag();
+        }
+    };
+    const handleNameChange = (e) => {
+        if (!file)
+            return;
+        setFile({ ...file, name: e.target.value });
+    };
+    return (_jsxs("div", { className: "mx-auto flex h-full w-full flex-col gap-6", children: [_jsx(DialogHeader, { className: "border-b pb-3 text-xl font-semibold", children: file ? file.name : t('dialogs.title') }), _jsxs("div", { className: "flex h-full flex-col gap-6 md:flex-row", children: [_jsx("div", { className: "relative flex h-full w-full flex-col md:w-3/5", children: !file ? (_jsxs("div", { className: "bg-muted/30 relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed p-12 text-center", onDragOver: handleDragOver, onDrop: handleDrop, onClick: () => fileInputRef.current?.click(), children: [_jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileInputChange, className: "hidden", accept: "image/*,video/*,audio/*" }), _jsx(Upload, { className: "text-muted-foreground mb-4 h-12 w-12" }), _jsx("h3", { className: "mb-2 text-lg font-medium", children: t('dialogs.dragAndDrop') }), _jsx("p", { className: "text-muted-foreground mb-4 text-sm", children: t('dialogs.browse') }), _jsx(Button, { variant: "outline", size: "sm", className: "mt-2", children: t('dialogs.selectFile') })] })) : (_jsx("div", { className: `bg-muted/30 relative flex h-full w-full overflow-hidden rounded-lg ${isEditingFocalPoint ? 'cursor-crosshair' : ''}`, onClick: handleImageClick, children: file?.preview ? (_jsxs("div", { className: "relative h-full w-full", children: [_jsx("img", { src: file.preview || '/placeholder.svg', alt: file.name, className: "absolute left-0 top-0 h-full w-full object-contain" }), _jsxs("div", { className: "absolute right-2 top-2 opacity-50 hover:opacity-100", children: [_jsxs(Button, { ref: button, variant: isEditingFocalPoint ? 'default' : 'outline', size: "sm", onClick: toggleFocalPointEditing, className: "flex items-center gap-1", children: [_jsx(Crosshair, { className: "h-4 w-4" }), isEditingFocalPoint ? t('dialogs.focalStop') : t('dialogs.focalEdit')] }), file.focalPoint && (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["x: ", file.focalPoint.x.toFixed(2), ", y: ", file.focalPoint.y.toFixed(2)] }))] }), file.focalPoint && (_jsx("div", { className: `absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform rounded-full border-2 border-white shadow-lg ${isEditingFocalPoint ? 'animate-pulse bg-blue-500/70' : 'bg-primary/70'}`, style: {
+                                            left: `${file.focalPoint.x * 100}%`,
+                                            top: `${file.focalPoint.y * 100}%`,
+                                        } }))] })) : (_jsx("div", { className: "bg-muted flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "text-muted-foreground/50 h-16 w-16" }) })) })) }), _jsx("div", { className: "flex w-full flex-col md:w-2/5", children: _jsxs(Card, { className: "bg-card flex w-full flex-col border p-4 shadow-sm", children: [_jsx("h3", { className: "text-muted-foreground mb-3 text-sm font-medium", children: t('dialogs.details') }), file ? (_jsx(ScrollArea, { className: "h-[450px] w-full overflow-auto pr-4", children: _jsx("div", { className: "space-y-3", children: file && (_jsxs(_Fragment, { children: [_jsx("div", { className: "group", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium capitalize", children: t('detailsTable.name') }), _jsx("div", { children: _jsx(Input, { value: file.name, onChange: handleNameChange, className: "text-sm" }) })] }) }), _jsx(Separator, { className: "my-2 opacity-50" }), _jsx("div", { className: "group", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium capitalize", children: t('detailsTable.fileSize') }), _jsx("div", { children: _jsx("span", { className: "break-words text-sm", children: formatFileSize(file.fileSize) }) })] }) }), _jsx(Separator, { className: "my-2 opacity-50" }), _jsx("div", { className: "group", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium capitalize", children: t('detailsTable.type') }), _jsx("div", { children: _jsx("span", { className: "break-words text-sm", children: file.type }) })] }) }), _jsx(Separator, { className: "my-2 opacity-50" }), _jsx("div", { className: "group", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium capitalize", children: t('detailsTable.tags') }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: (file.tags || []).length ? ((file.tags || []).map((tag, i) => (_jsxs(Badge, { variant: "secondary", className: "flex items-center gap-1 text-xs", children: [tag, _jsx(X, { className: "h-3 w-3 cursor-pointer", onClick: () => handleRemoveTag(tag) })] }, i)))) : (_jsx("span", { className: "text-muted-foreground text-xs", children: t('dialogs.noTags') })) }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx(Input, { value: tagInput, onChange: (e) => setTagInput(e.target.value), onKeyDown: handleKeyDown, placeholder: t('dialogs.addTag'), className: "text-sm" }), _jsxs(Button, { size: "sm", variant: "outline", onClick: handleAddTag, disabled: !tagInput.trim(), children: [_jsx(TagIcon, { className: "mr-1 h-4 w-4" }), t('dialogs.add')] })] })] }) }), _jsx(Separator, { className: "my-2 opacity-50" }), _jsx("div", { className: "group", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium capitalize", children: t('dialogs.focal') }), file.focalPoint ? (_jsxs("span", { className: "bg-muted rounded px-2 py-1 font-mono text-sm", children: ["x: ", file.focalPoint.x.toFixed(2), ", y: ", file.focalPoint.y.toFixed(2)] })) : (_jsx("span", { className: "text-muted-foreground text-sm", children: t('dialogs.noFocal') }))] }) }), _jsx(Separator, { className: "my-2 opacity-50" }), _jsx(EntityCustomFields, { entityName: "asset", hideButton: true, withoutBorder: true })] })) }) })) : (_jsx("p", { children: t('dialogs.noFile') }))] }) })] }), _jsxs("div", { className: "flex items-center justify-end gap-3 border-t pt-2", children: [_jsx(Button, { onClick: onClose, variant: "outline", className: "px-4", disabled: isUploading, children: t('cancel') }), _jsx(Button, { onClick: onSubmit, variant: "default", className: "px-6", disabled: isUploading || !file, children: isUploading ? t('uploading') : t('upload') })] })] }));
+}

package/dist/pages/assets/_components/UploadProgress.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from '@deenruv/react-ui-devkit';
+import { CheckCircle2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+export const UploadProgress = ({ progress }) => {
+    const [showCheck, setShowCheck] = useState(false);
+    useEffect(() => {
+        if (progress >= 100) {
+            const timer = setTimeout(() => {
+                setShowCheck(true);
+            }, 300);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setShowCheck(false);
+        }
+    }, [progress]);
+    return (_jsxs("div", { className: "my-4", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: progress < 100 ? 'Uploading...' : 'Upload complete' }), _jsxs("span", { className: "text-muted-foreground text-sm", children: [progress.toFixed(0), "%"] })] }), _jsxs("div", { className: "relative", children: [_jsx(Progress, { value: progress, className: "h-2" }), showCheck && (_jsx("div", { className: "text-primary animate-in fade-in absolute right-0 top-1/2 -translate-x-1 -translate-y-1/2", children: _jsx(CheckCircle2, { size: 16 }) }))] })] }));
+};

package/dist/pages/assets/index.js

@@ -0,0 +1 @@
+export * from './List.js';

package/dist/pages/channels/Detail.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { getMutation, DetailView, createDeenruvForm, useMutation, useValidators, apiClient, DEFAULT_CHANNEL_CODE, useSettings, useServer, useTranslation, } from '@deenruv/react-ui-devkit';
+import { ChannelDetailView } from "./_components/ChannelDetailView.js";
+const CreateChannelMutation = getMutation('createChannel', {
+    '...on Channel': {
+        id: true,
+    },
+    '...on LanguageNotAvailableError': {
+        message: true,
+    },
+});
+const EditChannelMutation = getMutation('updateChannel', {
+    '...on Channel': {
+        id: true,
+    },
+    '...on LanguageNotAvailableError': {
+        message: true,
+    },
+});
+const DeleteChannelMutation = getMutation('deleteChannel');
+export const ChannelsDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditChannelMutation);
+    const [create] = useMutation(CreateChannelMutation);
+    const [remove] = useMutation(DeleteChannelMutation);
+    const { t } = useTranslation('channels');
+    const { stringValidator } = useValidators();
+    const selectedChannel = useSettings((p) => p.selectedChannel);
+    const setSelectedChannel = useSettings((p) => p.setSelectedChannel);
+    const setChannels = useServer((p) => p.setChannels);
+    const onSubmitHandler = useCallback(async (data) => {
+        if (!data.code?.validatedValue) {
+            throw new Error('Code is required.');
+        }
+        const inputData = {
+            code: data.code.validatedValue,
+            availableCurrencyCodes: data.availableCurrencyCodes?.validatedValue,
+            availableLanguageCodes: data.availableLanguageCodes?.validatedValue,
+            defaultCurrencyCode: data.defaultCurrencyCode?.validatedValue,
+            defaultLanguageCode: data.defaultLanguageCode.validatedValue,
+            defaultShippingZoneId: data.defaultShippingZoneId.validatedValue,
+            defaultTaxZoneId: data.defaultTaxZoneId.validatedValue,
+            pricesIncludeTax: data.pricesIncludeTax.value,
+            sellerId: data.sellerId?.validatedValue,
+            token: data.token.validatedValue,
+            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+        };
+        if (id) {
+            const response = await update({ input: { id, ...inputData } });
+            const { channels: { items: allChannels = [] }, } = await apiClient('query')({
+                channels: [
+                    {},
+                    {
+                        items: {
+                            id: true,
+                            code: true,
+                            token: true,
+                            currencyCode: true,
+                            defaultLanguageCode: true,
+                            availableLanguageCodes: true,
+                        },
+                    },
+                ],
+            });
+            setChannels(allChannels);
+            if (selectedChannel) {
+                const foundChannel = allChannels.find((ch) => ch.code === selectedChannel.code);
+                setSelectedChannel(foundChannel || allChannels[0]);
+            }
+            const existingChannel = allChannels.find((ch) => ch.code === window?.__DEENRUV_SETTINGS__?.ui?.defaultChannelCode);
+            if (existingChannel) {
+                setSelectedChannel(existingChannel);
+            }
+            const defaultChannel = allChannels.find((ch) => ch.code === DEFAULT_CHANNEL_CODE) || allChannels[0];
+            setSelectedChannel(defaultChannel);
+            return response;
+        }
+        else {
+            const response = await create({ input: inputData });
+            const { channels: { items: allChannels = [] }, } = await apiClient('query')({
+                channels: [
+                    {},
+                    {
+                        items: {
+                            id: true,
+                            code: true,
+                            token: true,
+                            currencyCode: true,
+                            defaultLanguageCode: true,
+                            availableLanguageCodes: true,
+                        },
+                    },
+                ],
+            });
+            setChannels(allChannels);
+            if (selectedChannel) {
+                const foundChannel = allChannels.find((ch) => ch.code === selectedChannel.code);
+                setSelectedChannel(foundChannel || allChannels[0]);
+            }
+            const existingChannel = allChannels.find((ch) => ch.code === window?.__DEENRUV_SETTINGS__?.ui?.defaultChannelCode);
+            if (existingChannel) {
+                setSelectedChannel(existingChannel);
+            }
+            const defaultChannel = allChannels.find((ch) => ch.code === DEFAULT_CHANNEL_CODE) || allChannels[0];
+            setSelectedChannel(defaultChannel);
+            return response;
+        }
+    }, [id, update, create]);
+    const onDeleteHandler = useCallback(() => {
+        if (!id) {
+            throw new Error('Could not find the id.');
+        }
+        return remove({ input: { id } });
+    }, [remove, id]);
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "channels-detail-view", main: {
+                name: 'channel',
+                label: 'Channel',
+                component: _jsx(ChannelDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateChannelInput',
+                    keys: [
+                        'availableCurrencyCodes',
+                        'availableLanguageCodes',
+                        'code',
+                        'defaultCurrencyCode',
+                        'defaultLanguageCode',
+                        'defaultShippingZoneId',
+                        'defaultTaxZoneId',
+                        'sellerId',
+                        'token',
+                        'pricesIncludeTax',
+                    ],
+                    config: {
+                        pricesIncludeTax: {
+                            initialValue: false,
+                        },
+                        code: stringValidator(t('validation.codeRequired')),
+                        token: stringValidator(t('validation.tokenRequired')),
+                        defaultLanguageCode: stringValidator(t('validation.langCodeRequired')),
+                        defaultShippingZoneId: stringValidator(t('validation.shippingZoneRequired')),
+                        defaultTaxZoneId: stringValidator(t('validation.taxZoneRequired')),
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            } }) }));
+};

package/dist/pages/channels/List.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Routes, apiClient, DetailList, deepMerge, ListLocations } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'channels-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        channels: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response.channels;
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteChannels } = await apiClient('mutation')({
+            deleteChannels: [
+                { ids },
+                {
+                    message: true,
+                    result: true,
+                },
+            ],
+        });
+        return !!deleteChannels.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const ChannelsListPage = () => {
+    return (_jsx(DetailList, { tableId: tableId, filterFields: [
+            { key: 'code', operator: 'StringOperators' },
+            { key: 'token', operator: 'StringOperators' },
+        ], detailLinkColumn: "code", searchFields: ['code', 'token'], hideColumns: ['customFields', 'translations'], entityName: 'Channel', route: Routes['channels'], fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateChannel], deletePermissions: [Permission.DeleteChannel] }));
+};

package/dist/pages/channels/_components/ChannelDetailView.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Input, Label, MultipleSelector, apiClient, useSettings, useDetailView, DetailViewMarker, CustomCard, CardIcons, EntityCustomFields, SimpleSelect, useTranslation, } from '@deenruv/react-ui-devkit';
+import { CurrencyCode } from '@deenruv/admin-types';
+import { DefaultsCard } from "./DefaultsCard";
+export const ChannelDetailView = () => {
+    const { t } = useTranslation('channels');
+    const { t: tCommon } = useTranslation('common');
+    const [sellersOptions, setSellersOptions] = useState();
+    const availableLanguages = useSettings((p) => p.availableLanguages);
+    const { form, fetchEntity, entity, id } = useDetailView('channels-detail-view', 'CreateChannelInput', 'code', 'availableCurrencyCodes', 'availableLanguageCodes', 'token', 'defaultCurrencyCode', 'defaultLanguageCode', 'defaultShippingZoneId', 'defaultTaxZoneId', 'sellerId', 'pricesIncludeTax', 'customFields');
+    const { base: { setField, state }, } = form;
+    useEffect(() => {
+        (async () => {
+            const resp = await fetchEntity();
+            if (!resp)
+                return;
+            setField('code', resp.code);
+            setField('availableCurrencyCodes', resp.availableCurrencyCodes);
+            setField('availableLanguageCodes', resp.availableLanguageCodes);
+            setField('token', resp.token);
+            setField('defaultCurrencyCode', resp.defaultCurrencyCode);
+            setField('defaultLanguageCode', resp.defaultLanguageCode);
+            setField('defaultShippingZoneId', resp.defaultShippingZone?.id || '');
+            setField('defaultTaxZoneId', resp.defaultTaxZone?.id || '');
+            setField('sellerId', resp.seller?.id);
+            setField('pricesIncludeTax', resp.pricesIncludeTax);
+        })();
+    }, []);
+    const fetchSellers = useCallback(async () => {
+        const response = await apiClient('query')({
+            sellers: [{}, { items: { id: true, name: true } }],
+        });
+        setSellersOptions(response.sellers.items.map((s) => ({ label: s.name, value: s.id })));
+    }, []);
+    useEffect(() => {
+        fetchSellers();
+    }, [id, fetchSellers]);
+    const languageOptions = useMemo(() => availableLanguages.map((el) => ({ label: `${tCommon(`languageCode.${el}`)} (${el})`, value: el })), [tCommon, availableLanguages]);
+    const currencyOptions = useMemo(() => {
+        const currencyArray = Object.values(CurrencyCode);
+        return currencyArray.map((l) => ({ label: l, value: l }));
+    }, []);
+    return (_jsx("main", { children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(Input, { label: t('details.basic.code'), value: state.code?.value ?? undefined, onChange: (e) => setField('code', e.target.value), errors: state.code?.errors, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(Input, { label: t('details.basic.token'), value: state.token?.value ?? undefined, onChange: (e) => setField('token', e.target.value), errors: state.token?.errors, required: true }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(SimpleSelect, { label: t('details.basic.seller'), value: state?.sellerId?.value ?? undefined, onValueChange: (e) => setField('sellerId', e), options: sellersOptions }) }), _jsxs("div", { className: "flex basis-full flex-col md:basis-1/3", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.languages') }), _jsx(MultipleSelector, { options: languageOptions, value: state?.availableLanguageCodes?.value?.map((l) => ({ label: l, value: l })), placeholder: t('details.basic.languagePlaceholder'), onChange: (options) => {
+                                                    setField('availableLanguageCodes', options.map((o) => o.value));
+                                                }, hideClearAllButton: true })] }), _jsxs("div", { className: "flex basis-full flex-col md:basis-1/3", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.currencies') }), _jsx(MultipleSelector, { options: currencyOptions, value: state?.availableCurrencyCodes?.value?.map((c) => ({ label: c, value: c })), placeholder: t('details.basic.currencyPlaceholder'), onChange: (options) => {
+                                                    setField('availableCurrencyCodes', options.map((o) => o.value));
+                                                }, hideClearAllButton: true })] })] })] }) }), _jsx(DetailViewMarker, { position: 'channels-detail-view' }), _jsx(EntityCustomFields, { entityName: "channel", id: id, onChange: (customFields) => {
+                        setField('customFields', customFields);
+                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} }, hideButton: true }), _jsx(DefaultsCard, { availableLanguages: state.availableLanguageCodes?.value ?? undefined, availableCurrencies: state.availableCurrencyCodes?.value ?? undefined, onFieldChange: setField, defaultLanguage: state.defaultLanguageCode?.value ?? undefined, defaultCurrency: state.defaultCurrencyCode?.value ?? undefined, defaultTaxZone: state.defaultTaxZoneId?.value ?? undefined, defaultShippingZone: state.defaultShippingZoneId?.value ?? undefined, includeTax: state.pricesIncludeTax?.value ?? undefined, onIncludeTaxChange: (e) => setField('pricesIncludeTax', e), defaultLanguageErrors: state.defaultLanguageCode?.errors, defaultShippingZoneErrors: state.defaultShippingZoneId?.errors, defaultTaxZoneErrors: state.defaultTaxZoneId?.errors })] }) }));
+};

package/dist/pages/channels/_components/DefaultsCard.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Switch, apiClient, SimpleSelect, CustomCard, CardIcons, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useState } from 'react';
+export const DefaultsCard = ({ availableLanguages, availableCurrencies, defaultLanguage, defaultCurrency, defaultTaxZone, defaultShippingZone, includeTax, onFieldChange, onIncludeTaxChange, defaultLanguageErrors, defaultTaxZoneErrors, defaultShippingZoneErrors, }) => {
+    const { t } = useTranslation('channels');
+    const [zonesOptions, setZonesOptions] = useState();
+    const fetchZones = useCallback(async () => {
+        const response = await apiClient('query')({
+            zones: [
+                {},
+                {
+                    items: {
+                        id: true,
+                        name: true,
+                    },
+                },
+            ],
+        });
+        setZonesOptions(response.zones.items.map((z) => ({ label: z.name, value: z.id })));
+    }, []);
+    useEffect(() => {
+        fetchZones();
+    }, [fetchZones]);
+    return (_jsx(CustomCard, { title: t('details.defaults.title'), icon: _jsx(CardIcons.default, {}), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(SimpleSelect, { label: t('details.defaults.defaultLanguage'), value: defaultLanguage, onValueChange: (e) => onFieldChange('defaultLanguageCode', e), options: availableLanguages?.map((l) => ({ label: l, value: l })), errors: defaultLanguageErrors, disabled: !availableLanguages?.length }) }), _jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(SimpleSelect, { label: t('details.defaults.defaultCurrency'), value: defaultCurrency, onValueChange: (e) => onFieldChange('defaultCurrencyCode', e), options: availableCurrencies?.map((c) => ({ label: c, value: c })), disabled: !availableCurrencies?.length }) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(SimpleSelect, { label: t('details.defaults.defaultTaxZone'), value: defaultTaxZone, onValueChange: (e) => onFieldChange('defaultTaxZoneId', e), options: zonesOptions, errors: defaultTaxZoneErrors }) }), _jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(SimpleSelect, { label: t('details.defaults.defaultShippingZone'), value: defaultShippingZone, onValueChange: (e) => onFieldChange('defaultShippingZoneId', e), options: zonesOptions, errors: defaultShippingZoneErrors }) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Switch, { checked: includeTax, onCheckedChange: onIncludeTaxChange }), _jsx(Label, { children: t('details.defaults.includeTax') })] })] }) }));
+};

package/dist/pages/channels/index.js

@@ -0,0 +1,2 @@
+export * from './Detail.js';
+export * from './List.js';