@deenruv/admin-dashboard 1.0.0

package/dist/pages/Root.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CanLeaveRouteDialog } from "../components";
+import { serverConfigSelector, configurableOperationDefinitionSelector, countrySelector, apiClient, useOrder, useNotifications, DEFAULT_CHANNEL_CODE, useTranslation, capitalizeFirstLetter, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect } from 'react';
+import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { activeAdministratorSelector, paymentMethodsSelector, useServer, useSettings, } from '@deenruv/react-ui-devkit';
+import { Menu } from "../components";
+import { GlobalSearch } from "../components/GlobalSearch.js";
+import { DeenruvDeveloperIndicator } from "../DeenruvDeveloperIndicator.js";
+import { Permission } from '@deenruv/admin-types';
+const TAKE = 100;
+const getAllPaginatedCountries = async () => {
+    let countries = [];
+    let totalItems = 0;
+    let skip = 0;
+    do {
+        const { countries: { items, totalItems: total }, } = await apiClient('query')({
+            countries: [{ options: { skip, take: TAKE } }, { items: countrySelector, totalItems: true }],
+        });
+        countries = [...countries, ...items];
+        totalItems = total;
+        skip += TAKE;
+    } while (countries.length < totalItems);
+    return { countries };
+};
+const getAllPaymentMethods = async () => {
+    let paymentMethods = [];
+    let totalItems = 0;
+    let skip = 0;
+    do {
+        const { paymentMethods: { items, totalItems: total }, } = await apiClient('query')({
+            paymentMethods: [
+                { options: { skip, take: TAKE, filter: { enabled: { eq: true } } } },
+                { items: paymentMethodsSelector, totalItems: true },
+            ],
+        });
+        paymentMethods = [...paymentMethods, ...items];
+        totalItems = total;
+        skip += TAKE;
+    } while (paymentMethods.length < totalItems);
+    return { paymentMethods };
+};
+export const Root = ({ allPaths }) => {
+    const isLocalhost = window.location.hostname === 'localhost';
+    const { t } = useTranslation('common');
+    const setActiveAdministrator = useServer((p) => p.setActiveAdministrator);
+    const setUserPermissions = useServer((p) => p.setUserPermissions);
+    const setServerConfig = useServer((p) => p.setServerConfig);
+    const setCountries = useServer((p) => p.setCountries);
+    const setFulfillmentHandlers = useServer((p) => p.setFulfillmentHandlers);
+    const setPaymentMethodsType = useServer((p) => p.setPaymentMethodsType);
+    const fetchPendingJobs = useServer((p) => p.fetchPendingJobs);
+    const loaded = useServer((p) => p.loaded);
+    const setLoaded = useServer((p) => p.setLoaded);
+    const setAvailableLanguages = useSettings((p) => p.setAvailableLanguages);
+    const setLanguage = useSettings((p) => p.setLanguage);
+    const setTranslationLanguage = useSettings((p) => p.setTranslationsLanguage);
+    const selectedChannel = useSettings((p) => p.selectedChannel);
+    const setSelectedChannel = useSettings((p) => p.setSelectedChannel);
+    const setChannels = useServer((p) => p.setChannels);
+    const fetchGraphQLSchema = useServer((p) => p.fetchGraphQLSchema);
+    const fetchStatus = useServer((p) => p.fetchStatus);
+    const { initializeOrderCustomFields } = useOrder();
+    const setData = useNotifications(({ setData }) => setData);
+    const notifications = useNotifications(({ notifications }) => notifications);
+    const channel = useSettings((p) => p.selectedChannel);
+    const location = useLocation();
+    const [searchParams] = useSearchParams();
+    const managePageTitle = useCallback(() => {
+        const pathname = location.pathname;
+        const isDeenruvPath = allPaths.some((path) => pathname.startsWith(path));
+        if (isDeenruvPath) {
+            let [, , route, id] = pathname.split('/');
+            if (!route) {
+                document.title = [
+                    window.__DEENRUV_SETTINGS__.branding.name,
+                    capitalizeFirstLetter(t(`menu.dashboard`)),
+                    'Admin UI',
+                ].join(' - ');
+            }
+            else {
+                if (route?.split('-').length > 1) {
+                    const [first, second] = route.split('-');
+                    route = `${first}${second.charAt(0).toUpperCase()}${second.slice(1)}`;
+                }
+                if (isNaN(parseInt(id, 10))) {
+                    document.title = [
+                        window.__DEENRUV_SETTINGS__.branding.name,
+                        capitalizeFirstLetter(t(`menu.${route}`)),
+                        'Admin UI',
+                    ].join(' - ');
+                }
+                else {
+                    const tab = searchParams.get('tab');
+                    if (tab) {
+                        const variantID = searchParams.get('variantId');
+                        if (variantID)
+                            id = variantID;
+                        document.title = [
+                            window.__DEENRUV_SETTINGS__.branding.name,
+                            capitalizeFirstLetter(t(`menu.${tab}`)),
+                            id,
+                            'Admin UI',
+                        ].join(' - ');
+                    }
+                    else {
+                        document.title = [
+                            window.__DEENRUV_SETTINGS__.branding.name,
+                            capitalizeFirstLetter(t(`menu.${route}`)),
+                            id,
+                            'Admin UI',
+                        ].join(' - ');
+                    }
+                }
+            }
+        }
+    }, [location, searchParams]);
+    useEffect(() => {
+        managePageTitle();
+    }, [location, searchParams]);
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            fetchStatus();
+        }, 10000);
+        return () => clearInterval(intervalId);
+    }, [fetchStatus]);
+    useEffect(() => {
+        if (!loaded)
+            return;
+        const intervalIds = notifications.map(({ id, fetch, interval }) => {
+            const fetchData = async () => {
+                const data = await fetch();
+                setData(id, data);
+            };
+            fetchData();
+            const intervalId = setInterval(fetchData, interval);
+            return intervalId;
+        });
+        return () => {
+            intervalIds.forEach(clearInterval);
+        };
+    }, [notifications.map((n) => n.id).join(','), loaded]);
+    useEffect(() => {
+        const init = async () => {
+            const activeAdministratorResponse = await apiClient('query')({
+                activeAdministrator: activeAdministratorSelector,
+            });
+            const roles = activeAdministratorResponse.activeAdministrator?.user.roles || [];
+            if (!activeAdministratorResponse.activeAdministrator) {
+                toast.error(t('setup.failedAdmin'));
+            }
+            else {
+                setActiveAdministrator(activeAdministratorResponse.activeAdministrator);
+                setUserPermissions(Array.from(new Set(roles.flatMap((role) => role.permissions))));
+                if ([Permission.ReadChannel].some((p) => roles.some((r) => r.permissions.includes(p)))) {
+                    const { channels: { items: allChannels = [] }, } = await apiClient('query')({
+                        channels: [
+                            {},
+                            {
+                                items: {
+                                    id: true,
+                                    code: true,
+                                    token: true,
+                                    currencyCode: true,
+                                    defaultLanguageCode: true,
+                                    availableLanguageCodes: true,
+                                },
+                            },
+                        ],
+                    });
+                    setChannels(allChannels);
+                    if (!channel) {
+                        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);
+                    }
+                }
+                else {
+                    const possibleChannels = roles.flatMap((role) => role.channels);
+                    if (possibleChannels.length > 0) {
+                        setSelectedChannel(possibleChannels[0]);
+                    }
+                }
+            }
+            // WE NEED TO CHECK IF LOCALSTORAGE HAS LANGUAGE SET
+            if (window?.__DEENRUV_SETTINGS__?.ui?.defaultLanguageCode) {
+                // window?.__DEENRUV_SETTINGS__.i18n.changeLanguage(window?.__DEENRUV_SETTINGS__?.ui?.defaultLanguageCode);
+                // setLanguage(window?.__DEENRUV_SETTINGS__?.ui?.defaultLanguageCode);
+            }
+            // WE NEED TO CHECK IF LOCALSTORAGE HAS LANGUAGE SET
+            if (window?.__DEENRUV_SETTINGS__?.ui?.defaultTranslationLanguageCode) {
+                // setTranslationLanguage(window?.__DEENRUV_SETTINGS__?.ui?.defaultTranslationLanguageCode);
+            }
+            const { globalSettings } = await apiClient('query')({
+                globalSettings: { serverConfig: serverConfigSelector, availableLanguages: true },
+            });
+            fetchPendingJobs();
+            initializeOrderCustomFields(globalSettings.serverConfig);
+            setLoaded(true);
+            if ([Permission.ReadCountry, Permission.ReadPaymentMethod, Permission.ReadOrder].some((p) => roles.some((r) => r.permissions.includes(p)))) {
+                const [countriesResponse, paymentsResponse, fulfillmentsResponse] = await Promise.allSettled([
+                    getAllPaginatedCountries(),
+                    getAllPaymentMethods(),
+                    apiClient('query')({ fulfillmentHandlers: configurableOperationDefinitionSelector }),
+                ]);
+                if (countriesResponse.status === 'rejected') {
+                    toast.error(t('setup.failedServer'));
+                }
+                else {
+                    setServerConfig(globalSettings.serverConfig);
+                    setAvailableLanguages(globalSettings.availableLanguages);
+                    // const socket = serverConfigResponse.value.globalSettings.serverConfig.plugins?.find(
+                    //   (plugin) => plugin.name === 'AexolAdminsPlugin',
+                    // );
+                    // if (socket && socket.active) setNeedSocket(true);
+                }
+                if (countriesResponse.status === 'rejected') {
+                    toast.error(t('setup.failedCountries'));
+                }
+                else {
+                    setCountries(countriesResponse.value.countries);
+                }
+                if (paymentsResponse.status === 'rejected') {
+                    toast.error(t('setup.failedPayments'));
+                }
+                else {
+                    setPaymentMethodsType(paymentsResponse.value.paymentMethods);
+                }
+                if (fulfillmentsResponse.status === 'rejected') {
+                    toast.error(t('setup.failedFulfillments'));
+                }
+                else {
+                    setFulfillmentHandlers(fulfillmentsResponse.value?.fulfillmentHandlers);
+                }
+            }
+        };
+        fetchGraphQLSchema().then(async (schema) => {
+            window.__DEENRUV_SCHEMA__ = schema;
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            await init();
+        });
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "bg-background text-foreground flex max-h-screen w-full max-w-full overflow-hidden", children: loaded ? (_jsxs(_Fragment, { children: [_jsx(Menu, { children: _jsx(Outlet, {}) }), _jsx(GlobalSearch, {}), _jsx(CanLeaveRouteDialog, {}), isLocalhost ? _jsx(DeenruvDeveloperIndicator, {}) : null] })) : (_jsx("div", { className: "flex h-screen w-full items-center justify-center", children: _jsx("span", { className: "animate-spin", children: "\u23F3" }) })) }) }));
+};

package/dist/pages/admins/Detail.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { DetailView, createDeenruvForm, getMutation, useMutation, useValidators, useTranslation, } from '@deenruv/react-ui-devkit';
+import { AdminDetailView } from "./_components/AdminDetailView.js";
+import { Permission } from '@deenruv/admin-types';
+const CreateAdminMutation = getMutation('createAdministrator');
+const EditAdminMutation = getMutation('updateAdministrator');
+const DeleteAdminMutation = getMutation('deleteAdministrator');
+export const AdminsDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditAdminMutation);
+    const [create] = useMutation(CreateAdminMutation);
+    const [remove] = useMutation(DeleteAdminMutation);
+    const editMode = useMemo(() => !!id, [id]);
+    const { t } = useTranslation('admins');
+    const { emailValidator, stringValidator, arrayValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.emailAddress?.validatedValue) {
+            throw new Error('Name is required.');
+        }
+        const inputData = {
+            emailAddress: data.emailAddress?.validatedValue,
+            firstName: data.firstName?.validatedValue,
+            lastName: data.lastName?.validatedValue,
+            password: data.password?.validatedValue ? data.password?.validatedValue : undefined,
+            roleIds: data.roleIds?.validatedValue,
+            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+        };
+        if (id) {
+            return update({
+                input: {
+                    id,
+                    ...inputData,
+                },
+            });
+        }
+        else {
+            return create({
+                input: inputData,
+            });
+        }
+    }, [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: "admins-detail-view", main: {
+                name: 'admin',
+                label: 'Admin',
+                component: _jsx(AdminDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateAdministratorInput',
+                    keys: ['firstName', 'lastName', 'emailAddress', 'password', 'roleIds', 'customFields'],
+                    config: {
+                        emailAddress: emailValidator,
+                        firstName: stringValidator(t('validation.firstNameRequired')),
+                        lastName: stringValidator(t('validation.lastNameRequired')),
+                        password: !editMode ? stringValidator(t('validation.passwordRequired')) : undefined,
+                        roleIds: arrayValidator(t('validation.rolesRequired')),
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            }, permissions: {
+                create: Permission.CreateAdministrator,
+                delete: Permission.DeleteAdministrator,
+                edit: Permission.UpdateAdministrator,
+            } }) }));
+};

package/dist/pages/admins/List.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Routes, apiClient, DetailList, deepMerge, ListBadge, ListLocations, useTranslation, TableLabel, } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'admins-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        administrators: [
+            {
+                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.administrators;
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteAdministrators } = await apiClient('mutation')({
+            deleteAdministrators: [
+                { ids },
+                {
+                    message: true,
+                    result: true,
+                },
+            ],
+        });
+        return !!deleteAdministrators.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const AdminsListPage = () => {
+    const { t } = useTranslation('admins');
+    return (_jsx(DetailList, { filterFields: [
+            { key: 'firstName', operator: 'StringOperators' },
+            { key: 'emailAddress', operator: 'StringOperators' },
+            { key: 'lastName', operator: 'StringOperators' },
+        ], detailLinkColumn: "id", searchFields: ['firstName', 'lastName', 'emailAddress'], hideColumns: ['customFields', 'translations', 'user'], additionalColumns: [
+            {
+                accessorKey: 'role',
+                enableSorting: false,
+                enableColumnFilter: false,
+                header: () => _jsx(TableLabel, { children: t('table.role') }),
+                cell: ({ row }) => (_jsx("div", { className: "flex gap-1", children: row.original.user.roles.map((r) => (_jsx(ListBadge, { children: r.description }, r.description))) })),
+            },
+        ], entityName: 'Administrator', route: Routes['admins'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateAdministrator], deletePermissions: [Permission.DeleteAdministrator] }));
+};

package/dist/pages/admins/_components/AdminDetailView.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { EntityCustomFields, CardIcons, CustomCard, DetailViewMarker, Input, useDetailView, useTranslation, } from '@deenruv/react-ui-devkit';
+import { RolesCard } from "./RolesCard";
+const ADMIN_FORM_KEYS = [
+    'CreateAdministratorInput',
+    'firstName',
+    'lastName',
+    'emailAddress',
+    'password',
+    'roleIds',
+    'customFields',
+];
+export const AdminDetailView = () => {
+    const { form, entity, fetchEntity, id } = useDetailView('admins-detail-view', ...ADMIN_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    const editMode = useMemo(() => !!id, [id]);
+    const { t } = useTranslation('admins');
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('firstName', res.firstName);
+            setField('lastName', res.lastName);
+            setField('emailAddress', res.emailAddress);
+            setField('password', '');
+            setField('roleIds', res.user.roles.map((r) => r.id));
+        })();
+    }, []);
+    return (_jsx("main", { className: "my-4", 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 items-start gap-4", children: [_jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.firstName'), value: state.firstName?.value ?? undefined, onChange: (e) => setField('firstName', e.target.value), errors: state.firstName?.errors, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.lastName'), value: state.lastName?.value ?? undefined, onChange: (e) => setField('lastName', e.target.value), errors: state.lastName?.errors, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.emailAddress'), value: state.emailAddress?.value ?? undefined, onChange: (e) => setField('emailAddress', e.target.value), errors: state.emailAddress?.errors, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.password'), value: state.password?.value ?? undefined, onChange: (e) => setField('password', e.target.value), errors: state.password?.errors, required: !editMode })] }) }), _jsx(DetailViewMarker, { position: 'admins-detail-view' }), _jsx(EntityCustomFields, { entityName: "administrator", id: id, hideButton: true, onChange: (customFields) => {
+                        setField('customFields', customFields);
+                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} } }), _jsx(RolesCard, { adminRoleIds: state.roleIds?.value ?? undefined, onRolesChange: (e) => setField('roleIds', e), errors: state.roleIds?.errors })] }) }));
+};

package/dist/pages/admins/_components/RolesCard.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation, MultipleSelector, apiClient, ErrorMessage, CardIcons, CustomCard, RoleSelector, } from '@deenruv/react-ui-devkit';
+import { PermissionsTable } from "../../roles/_components/PermissionsTable";
+export const RolesCard = ({ adminRoleIds, onRolesChange, errors }) => {
+    const { t } = useTranslation('admins');
+    const [allRoles, setAllRoles] = useState([]);
+    const currentPermissions = useMemo(() => {
+        if (!allRoles.length)
+            return;
+        return adminRoleIds?.flatMap((id) => allRoles.find((r) => r.id === id)?.permissions ?? []);
+    }, [adminRoleIds, allRoles]);
+    const fetchAllRoles = useCallback(() => {
+        apiClient('query')({
+            roles: [{}, { items: RoleSelector }],
+        }).then((resp) => {
+            setAllRoles(resp.roles.items);
+        });
+    }, []);
+    useEffect(() => {
+        fetchAllRoles();
+    }, [fetchAllRoles]);
+    const rolesToOptions = useCallback((roles) => roles?.map((r) => ({ label: r.description, value: r.id })), []);
+    const currentRolesOptions = useMemo(() => {
+        if (!allRoles.length)
+            return undefined;
+        else
+            return adminRoleIds?.map((id) => ({ value: id, label: allRoles.find((r) => r.id === id).description }));
+    }, [allRoles, adminRoleIds]);
+    return (_jsxs(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.permissions, {}), upperRight: _jsx(ErrorMessage, { errors: errors }), children: [_jsx(MultipleSelector, { options: rolesToOptions(allRoles), value: currentRolesOptions, placeholder: t('details.roles.placeholder'), onChange: (options) => onRolesChange(options.map((o) => o.value)), hideClearAllButton: true }), _jsx("div", { className: "mt-4", children: _jsx(PermissionsTable, { currentPermissions: currentPermissions }) })] }));
+};

package/dist/pages/admins/index.js

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

package/dist/pages/assets/List.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { apiClient, DetailList, deepMerge, ListLocations, createDialogFromComponent, Badge, ImageWithPreview, useTranslation, TableLabel, } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+import { UploadAssetDialog } from "./_components/UploadAssetDialog.js";
+import { EditAssetDialog } from "./_components/EditAssetDialog.js";
+const tableId = 'assets-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        assets: [
+            {
+                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.assets;
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteAssets } = await apiClient('mutation')({
+            deleteAssets: [{ input: { assetIds: ids } }, { message: true, result: true }],
+        });
+        return !!deleteAssets.result.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const AssetsListPage = () => {
+    const { t } = useTranslation('table');
+    return (_jsx(DetailList, { tableId: tableId, detailLinkColumn: "id", searchFields: ['id'], suggestedOrderColumns: { id: 1, preview: 2, tags: 3 }, hideColumns: [
+            'fileSize',
+            'width',
+            'height',
+            'focalPoint',
+            'mimeType',
+            'source',
+            'type',
+            'customFields',
+            'translations',
+        ], entityName: 'Asset', route: {
+            create: async (refetch) => {
+                const response = await createDialogFromComponent(UploadAssetDialog, {}, { className: 'max-w-[1200px] h-[700px]' });
+                if (response.success) {
+                    refetch();
+                }
+            },
+            edit: async (id, row, refetch) => {
+                const response = await createDialogFromComponent(EditAssetDialog, row.original, {
+                    className: 'max-w-[1200px] h-[700px]',
+                });
+                if (response.success) {
+                    refetch();
+                }
+            },
+        }, fetch: fetch, onRemove: onRemove, additionalColumns: [
+            {
+                accessorKey: 'preview',
+                header: () => _jsx(TableLabel, { children: t('columns.image') }),
+                cell: ({ row }) => {
+                    const { name, preview } = row.original;
+                    return (_jsx("div", { className: "relative", children: _jsx(ImageWithPreview, { src: preview, alt: name, previewClassName: "p-2" }) }));
+                },
+            },
+            {
+                accessorKey: 'tags',
+                header: () => _jsx(TableLabel, { children: t('columns.tags') }),
+                cell: ({ row }) => {
+                    const { tags } = row.original;
+                    return (_jsx("div", { className: "flex flex-wrap gap-1", children: tags.length ? (tags.map((tag, index) => (_jsx(Badge, { variant: "secondary", className: "text-xs", children: tag.value }, index)))) : (_jsx(Badge, { variant: "secondary", className: "text-xs", children: "No Tags" })) }));
+                },
+            },
+        ], createPermissions: [Permission.CreateChannel], deletePermissions: [Permission.DeleteChannel] }));
+};

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

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Skeleton, Table, TableBody, TableCell, TableRow, Tooltip, apiClient, Tabs, TabsContent, TabsList, TabsTrigger, useServer, EntityCustomFields, useTranslation, TableLabel, } from '@deenruv/react-ui-devkit';
+import { assetsSelector } from "../../../graphql/base";
+import { DeletionResult } from '@deenruv/admin-types';
+import { DialogTrigger } from '@radix-ui/react-dialog';
+import { TooltipContent, TooltipTrigger } from '@radix-ui/react-tooltip';
+import { format } from 'date-fns';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { Copy, ExternalLink, MoreHorizontal, Pencil, Trash } from 'lucide-react';
+export const Asset = ({ asset, onAssetChange }) => {
+    const { t } = useTranslation(['common', 'assets']);
+    const [open, setOpen] = useState(false);
+    const [assetDetails, setAssetDetails] = useState();
+    const [assetName, setAssetName] = useState(asset.name);
+    const [isLoading, setIsLoading] = useState(true);
+    const [activeTab, setActiveTab] = useState('preview');
+    const hasEntityCustomFields = !!useServer((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName.charAt(0).toLowerCase() + el.entityName.slice(1) === 'asset'))?.customFields.length;
+    const tableData = [
+        {
+            header: _jsx(TableLabel, { children: t('assets:detailsTable.id', 'ID') }),
+            render: assetDetails?.id,
+        },
+        {
+            header: _jsx(TableLabel, { children: t('assets:detailsTable.name', 'Name') }),
+            render: _jsx(Input, { value: assetName, onChange: (e) => setAssetName(e.target.value) }),
+        },
+        {
+            header: _jsx(TableLabel, { children: t('assets:detailsTable.fileSize', 'File Size') }),
+            render: assetDetails?.fileSize && assetDetails.fileSize / 1000 + 'kB',
+        },
+        {
+            header: _jsx(TableLabel, { children: t('assets:detailsTable.createdAt', 'Created At') }),
+            render: assetDetails?.createdAt && format(new Date(assetDetails.createdAt), 'yyyy-MM-dd, HH:ss'),
+        },
+        {
+            header: _jsx(TableLabel, { children: t('assets:detailsTable.size', 'Dimensions') }),
+            render: assetDetails?.width && assetDetails?.height ? `${assetDetails.width}px x ${assetDetails.height}px` : '-',
+        },
+        {
+            header: _jsx(TableLabel, { children: t('assets:detailsTable.source', 'Source') }),
+            render: assetDetails?.source,
+        },
+    ];
+    const onClose = () => {
+        setAssetDetails(undefined);
+        setOpen(false);
+    };
+    const onEditName = useCallback(async () => {
+        const { updateAsset } = await apiClient('mutation')({
+            updateAsset: [{ input: { id: asset.id, name: assetName } }, { name: true }],
+        });
+        if (updateAsset.name) {
+            toast.success(t('assets:editSuccess', 'Asset updated successfully'));
+            onAssetChange();
+            onClose();
+        }
+        else
+            toast.error(t('assets:editFail', 'Failed to update asset'));
+    }, [assetName, asset.id, onAssetChange, onClose, t]);
+    const onDelete = useCallback(async () => {
+        const { deleteAsset } = await apiClient('mutation')({
+            deleteAsset: [{ input: { assetId: asset.id } }, { message: true, result: true }],
+        });
+        if (deleteAsset.result === DeletionResult.DELETED) {
+            toast.success(t('assets:deleteSuccess', 'Asset deleted successfully'));
+            onAssetChange();
+            onClose();
+        }
+        else
+            toast.error(t('assets:deleteFail', 'Failed to delete asset') + ': ' + deleteAsset.message);
+    }, [asset.id, onAssetChange, onClose, t]);
+    const getAsset = async () => {
+        const response = await apiClient('query')({
+            asset: [
+                {
+                    id: asset.id,
+                },
+                assetsSelector,
+            ],
+        });
+        if (response.asset)
+            setAssetDetails(response.asset);
+    };
+    const copyAssetUrl = () => {
+        navigator.clipboard.writeText(asset.preview);
+        toast.success(t('assets:urlCopied', 'Asset URL copied to clipboard'));
+    };
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs("div", { className: "bg-background group relative h-52 w-40 overflow-hidden rounded-lg border transition-all hover:shadow-md", onClick: () => getAsset(), children: [_jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors duration-200 group-hover:bg-black/5" }), _jsx("div", { className: "absolute right-2 top-2 z-10", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), children: _jsxs(Button, { size: "sm", variant: "ghost", className: "bg-background/80 size-8 rounded-full p-0 opacity-0 shadow-sm backdrop-blur-sm group-hover:opacity-100", children: [_jsx(MoreHorizontal, { size: 16 }), _jsx("span", { className: "sr-only", children: "Open menu" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-[160px]", children: [_jsxs(DropdownMenuItem, { onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    copyAssetUrl();
+                                                }, className: "gap-2", children: [_jsx(Copy, { size: 14 }), _jsx("span", { children: t('common:copyURL', 'Copy URL') })] }), _jsxs(DropdownMenuItem, { onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    window.open(asset.preview, '_blank');
+                                                }, className: "gap-2", children: [_jsx(ExternalLink, { size: 14 }), _jsx("span", { children: t('common:open', 'Open') })] }), _jsxs(DropdownMenuItem, { onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    getAsset();
+                                                    setOpen(true);
+                                                }, className: "gap-2", children: [_jsx(Pencil, { size: 14 }), _jsx("span", { children: t('common:edit', 'Edit') })] }), _jsxs(DropdownMenuItem, { onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    getAsset();
+                                                    onDelete();
+                                                }, className: "text-destructive gap-2", children: [_jsx(Trash, { size: 14 }), _jsx("span", { children: t('common:delete', 'Delete') })] })] })] }) }), _jsxs("div", { className: "bg-muted/30 aspect-square", children: [isLoading && _jsx(Skeleton, { className: "size-full" }), _jsx("img", { src: `${asset.preview}?preset=tile`, alt: asset.name, className: "size-full object-cover transition-all duration-300", style: { opacity: isLoading ? 0 : 1 }, onLoad: () => setIsLoading(false), onError: () => setIsLoading(false) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { className: "block w-full truncate p-3 text-left text-sm font-medium", title: asset.name, children: asset.name }), _jsx(TooltipContent, { className: "bg-popover text-popover-foreground z-50 rounded-md border px-3 py-1.5 text-sm shadow-md", children: asset.name })] })] }) }), _jsxs(DialogContent, { className: "max-w-5xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { className: "text-xl", children: asset.name }) }), _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "mt-2", children: [_jsxs(TabsList, { className: "grid w-full max-w-md grid-cols-2", children: [_jsx(TabsTrigger, { value: "preview", children: t('common:preview') }), _jsx(TabsTrigger, { value: "details", children: t('common:details') })] }), _jsx(TabsContent, { value: "preview", className: "space-y-4", children: _jsxs("div", { className: "relative flex h-[500px] items-center justify-center overflow-hidden rounded-lg p-4", children: [_jsx("div", { className: "absolute inset-0 bg-[#f0f0f0]", style: {
+                                                backgroundImage: `
+                    linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+                    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+                    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+                    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)
+                  `,
+                                                backgroundSize: '20px 20px',
+                                                backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+                                            } }), _jsx("div", { className: "border-border pointer-events-none absolute inset-0 rounded-lg border" }), _jsx("img", { src: assetDetails?.source ? `${assetDetails.source}?preset=medium` : asset.preview, alt: asset.name, className: "relative z-10 max-h-full max-w-full rounded object-contain shadow-md" })] }) }), _jsx(TabsContent, { value: "details", className: "mt-4", children: _jsxs("div", { className: "grid h-[492px] gap-6  md:grid-cols-2", children: [_jsx("div", { className: "overflow-hidden rounded-lg border", children: _jsx(Table, { children: _jsx(TableBody, { children: tableData.map((d, i) => (_jsxs(TableRow, { className: i % 2 === 0 ? 'bg-muted/30' : '', children: [_jsx(TableCell, { className: "w-1/3 font-medium", children: d.header }), _jsx(TableCell, { className: "break-all", children: d.render })] }, i))) }) }) }), hasEntityCustomFields && (_jsxs("div", { children: [_jsxs("h3", { className: "mb-3 flex items-center gap-2 text-lg font-medium", children: [_jsx(Pencil, { size: 16 }), t('common:customFields')] }), _jsx("div", { className: "rounded-lg border p-4", children: _jsx(EntityCustomFields, { entityName: "asset", id: asset?.id }) })] }))] }) })] }), _jsxs("div", { className: "mt-4 flex justify-between", children: [_jsx(Button, { variant: "destructive", onClick: () => onDelete(), children: t('assets:delete', 'Delete') }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { variant: "outline", onClick: () => onClose(), children: t('common:cancel', 'Cancel') }), _jsx(Button, { onClick: () => onEditName(), children: t('common:save', 'Save') })] })] })] })] }));
+};