@dashadmin/dash-admin 1.3.25 → 1.3.26

package/src/components/subscription/PlanPricesSettings.tsx

@@ -0,0 +1,295 @@
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import React, { useMemo } from "react";
+import { useRecordContext, useGetList, Loading } from "react-admin";
+import { useFormContext } from "react-hook-form";
+import { 
+    Box, 
+    TextField, 
+    Typography, 
+    InputAdornment,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Chip
+} from "@mui/material";
+import numeral from "numeral";
+
+/**
+ * PlanPricesSettings Component
+ * 
+ * A dynamic form component for managing subscription plan prices across multiple currencies.
+ * Fetches available currencies from the system and renders input fields for each.
+ * 
+ * The prices are stored as a JSON object: { "CLP": 29900, "USD": 33 }
+ * 
+ * Usage:
+ * - In edit/create mode: Renders price input fields for each available currency
+ * - In view mode: Displays the prices as a formatted table
+ */
+
+interface Currency {
+    id: number;
+    code: string;
+    symbol: string;
+    format: string;
+    is_default?: boolean;
+}
+
+interface SubscriptionPlan {
+    id?: number;
+    name?: string;
+    price?: number;
+    prices?: Record<string, number>;
+    [key: string]: any;
+}
+
+// ============ VIEW MODE ============
+const PlanPricesView: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
+    const plan: SubscriptionPlan = useRecordContext();
+    const prices = plan?.prices;
+
+    const { data: currencies, isLoading } = useGetList<Currency>(
+        'ecommerce/currency',
+        { 
+            pagination: { page: 1, perPage: 100 },
+            sort: { field: 'code', order: 'ASC' },
+            filter: { show_disabled: true } // Fetch all currencies including disabled ones
+        },
+        { 
+            staleTime: 5 * 60 * 1000, // 5 minutes cache
+            refetchOnWindowFocus: false 
+        }
+    );
+
+    if (isLoading) return <Loading />;
+
+    if (!prices || Object.keys(prices).length === 0) {
+        return (
+            <Typography variant="body2" color="text.secondary">
+                No prices configured
+            </Typography>
+        );
+    }
+
+    return (
+        <TableContainer component={Paper} variant="outlined" sx={{ maxWidth: 400 }}>
+            <Table size="small">
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Currency</TableCell>
+                        <TableCell align="right">Price</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {Object.entries(prices).map(([code, value]) => {
+                        const currency = currencies?.find(c => c.code === code);
+                        const formattedValue = currency?.format 
+                            ? numeral(value).format(currency.format)
+                            : value;
+                        
+                        return (
+                            <TableRow key={code}>
+                                <TableCell>
+                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                                        <Chip 
+                                            label={code} 
+                                            size="small" 
+                                            color={currency?.is_default ? 'primary' : 'default'}
+                                        />
+                                        {currency?.is_default && (
+                                            <Typography variant="caption" color="text.secondary">
+                                                (Default)
+                                            </Typography>
+                                        )}
+                                    </Box>
+                                </TableCell>
+                                <TableCell align="right">
+                                    <Typography variant="body2">
+                                        {currency?.symbol}{formattedValue}
+                                    </Typography>
+                                </TableCell>
+                            </TableRow>
+                        );
+                    })}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};
+
+// ============ LIST MODE ============
+const PlanPricesList: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
+    const plan: SubscriptionPlan = useRecordContext();
+    const prices = plan?.prices;
+
+    if (!prices || Object.keys(prices).length === 0) {
+        return <Typography variant="body2" color="text.secondary">—</Typography>;
+    }
+
+    return (
+        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
+            {Object.entries(prices).slice(0, 3).map(([code, value]) => (
+                <Chip
+                    key={code}
+                    label={`${code}: ${value}`}
+                    size="small"
+                    variant="outlined"
+                    sx={{ fontSize: '11px' }}
+                />
+            ))}
+            {Object.keys(prices).length > 3 && (
+                <Chip
+                    label={`+${Object.keys(prices).length - 3}`}
+                    size="small"
+                    variant="outlined"
+                    sx={{ fontSize: '11px' }}
+                />
+            )}
+        </Box>
+    );
+};
+
+// ============ EDIT/CREATE MODE ============
+const PlanPricesEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method }) => {
+    const plan: SubscriptionPlan = useRecordContext();
+    const formContext = useFormContext();
+    const { register, setValue, watch } = formContext;
+
+    // Fetch available currencies
+    const { data: currencies, isLoading, error } = useGetList<Currency>(
+        'ecommerce/currency',
+        { 
+            pagination: { page: 1, perPage: 100 },
+            sort: { field: 'code', order: 'ASC' },
+            filter: { show_disabled: true } // Fetch all currencies including disabled ones
+        },
+        { 
+            staleTime: 5 * 60 * 1000,
+            refetchOnWindowFocus: false 
+        }
+    );
+
+    // Watch the prices field for reactivity
+    const watchedPrices = watch('prices');
+
+    // Get current prices from record or form
+    const currentPrices = useMemo(() => {
+        if (watchedPrices && typeof watchedPrices === 'object') {
+            return watchedPrices;
+        }
+        return plan?.prices || {};
+    }, [watchedPrices, plan?.prices]);
+
+    // Handle price change for a specific currency
+    const handlePriceChange = (currencyCode: string, value: string) => {
+        const numValue = value === '' ? null : parseInt(value, 10);
+        
+        const updatedPrices = {
+            ...currentPrices,
+            [currencyCode]: numValue
+        };
+
+        // Remove null/undefined values
+        Object.keys(updatedPrices).forEach(key => {
+            if (updatedPrices[key] === null || updatedPrices[key] === undefined) {
+                delete updatedPrices[key];
+            }
+        });
+
+        setValue('prices', updatedPrices, { shouldDirty: true });
+    };
+
+    if (isLoading) return <Loading />;
+
+    if (error) {
+        return (
+            <Typography color="error">
+                Error loading currencies: {error.message}
+            </Typography>
+        );
+    }
+
+    if (!currencies || currencies.length === 0) {
+        return (
+            <Typography variant="body2" color="text.secondary">
+                No currencies available. Please configure currencies first.
+            </Typography>
+        );
+    }
+
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Typography variant="subtitle2" color="text.secondary">
+                Set the price for each available currency (in cents/smallest unit)
+            </Typography>
+            
+            {currencies.map((currency) => {
+                const currentValue = currentPrices[currency.code] ?? '';
+                
+                return (
+                    <TextField
+                        key={currency.code}
+                        label={`${currency.code} Price${currency.is_default ? ' (Default)' : ''}`}
+                        type="number"
+                        value={currentValue}
+                        onChange={(e) => handlePriceChange(currency.code, e.target.value)}
+                        InputProps={{
+                            startAdornment: (
+                                <InputAdornment position="start">
+                                    {currency.symbol}
+                                </InputAdornment>
+                            ),
+                        }}
+                        helperText={
+                            currency.format 
+                                ? `Format: ${currency.format} • Example: ${currency.symbol}${numeral(29900).format(currency.format)}`
+                                : `Enter price in smallest unit (cents)`
+                        }
+                        fullWidth
+                        size="small"
+                        sx={{
+                            '& .MuiOutlinedInput-root': currency.is_default ? {
+                                borderColor: 'primary.main',
+                                '& fieldset': {
+                                    borderWidth: 2,
+                                }
+                            } : {}
+                        }}
+                    />
+                );
+            })}
+            
+            {/* Hidden input to ensure prices gets submitted */}
+            <input 
+                type="hidden" 
+                {...register('prices')} 
+                value={JSON.stringify(currentPrices)}
+            />
+        </Box>
+    );
+};
+
+// ============ MAIN COMPONENT ============
+const PlanPricesSettings: React.FC<IDashAutoAdminCustomFieldComponent> = ({ 
+    method, 
+    attribute, 
+    resourceConfig 
+}) => {
+    switch (method) {
+        case "edit":
+        case "create":
+            return <PlanPricesEdit method={method} attribute={attribute} resourceConfig={resourceConfig} />;
+        case "view":
+            return <PlanPricesView method={method} attribute={attribute} resourceConfig={resourceConfig} />;
+        case "list":
+            return <PlanPricesList method={method} attribute={attribute} resourceConfig={resourceConfig} />;
+        default:
+            return null;
+    }
+};
+
+export default PlanPricesSettings;

package/src/components/subscription/index.ts

@@ -0,0 +1,7 @@
+export { default as PlanLimitsSettings } from './PlanLimitsSettings';
+export { default as PlanPricesSettings } from './PlanPricesSettings';
+export { default as PlanFeaturesSettings } from './PlanFeaturesSettings';
+export { default as PlanMetadataSettings } from './PlanMetadataSettings';
+export { default as PlanAddonsSettings } from './PlanAddonsSettings';
+// Note: PlanAuditLog is deprecated. Use the generic AuditLog from 'dash-components' instead.
+// export { default as PlanAuditLog } from './PlanAuditLog';

package/src/components/svgelements/SvgLoading.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+
+function Icon() {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			width='150.244'
+			height='142.391'
+			viewBox='0 0 150.244 142.391'
+		>
+			<g data-name='Grupo 784' transform='translate(-663 -369)'>
+				<g data-name='Grupo 694' transform='translate(-9263.156 83.407)'>
+					<path
+						fill='#ffb74d'
+						d='M438.364 428.47c-2.071-11.082 1.189-23.69 10.25-30.4a51.943 51.943 0 0010.829 33.979c2.908 3.728 6.532 7.571 6.419 12.3a11.611 11.611 0 01-3.757 7.745 34.49 34.49 0 01-7.23 5.018l-.4.618c-7.475-8.437-14.04-18.178-16.111-29.26z'
+						data-name='Trazado 547'
+						transform='translate(9503.073 -112.264)'
+					></path>
+					<path
+						fill='#fff'
+						d='M457.983 397.944a44.4 44.4 0 00-2.931 27.159 19.12 19.12 0 002.025 5.638 10.966 10.966 0 004.143 4.018 22.7 22.7 0 014.636 2.947 6.714 6.714 0 011.977 5.123 17.444 17.444 0 01-1.933 6.671c-1.068 2.348-2.214 4.771-2.145 7.411.008.32-.488.314-.5-.005-.12-4.594 3.2-8.283 3.941-12.69a6.8 6.8 0 00-1.373-5.824 17.609 17.609 0 00-4.65-3.082 11.7 11.7 0 01-4.2-3.778 17.678 17.678 0 01-2.234-5.539 43.074 43.074 0 01-.976-13.427 45.186 45.186 0 013.789-14.873c.13-.291.556-.034.426.255z'
+						data-name='Trazado 548'
+						transform='translate(9493.87 -111.968)'
+					></path>
+					<path
+						fill='#fff'
+						d='M445.537 448.809a6.661 6.661 0 01-6.949-5.109c-.073-.311.408-.439.48-.127a6.168 6.168 0 006.474 4.739c.319-.023.312.473-.005.497z'
+						data-name='Trazado 549'
+						transform='translate(9502.601 -138.58)'
+					></path>
+					<path
+						fill='#fff'
+						d='M469.6 472.917a12.839 12.839 0 003.218-8.786c-.007-.32.49-.314.5.005a13.354 13.354 0 01-3.367 9.136c-.217.24-.563-.117-.351-.355z'
+						data-name='Trazado 550'
+						transform='translate(9484.627 -150.483)'
+					></path>
+					<path
+						fill='#fff'
+						d='M455.987 419.964a3.77 3.77 0 003.349-1.258c.21-.242.556.115.348.355a4.225 4.225 0 01-3.7 1.4.257.257 0 01-.246-.251.25.25 0 01.251-.246z'
+						data-name='Trazado 551'
+						transform='translate(9492.639 -124.199)'
+					></path>
+					<path
+						fill='#ffb74d'
+						d='M508.279 419.929c-.127.155-.253.31-.379.468a49.658 49.658 0 00-4.545 6.65c-.106.179-.21.362-.311.544a52.348 52.348 0 00-6.108 18.279 50.841 50.841 0 00-.466 7.71c.056 3.56.4 7.416-.691 10.691a8.722 8.722 0 01-.393 1.005l-17.513 5.58-.138-.018-.689.255c-.011-.133-.02-.271-.032-.4-.007-.077-.01-.155-.017-.232 0-.052-.007-.1-.013-.15v-.048c-.006-.047-.007-.09-.011-.133-.052-.771-.1-1.544-.14-2.319v-.009a74.749 74.749 0 01.98-17.645c.033-.173.064-.351.105-.526a48.509 48.509 0 012.145-7.62 42.9 42.9 0 011.729-3.98 35.66 35.66 0 016.474-9.078c5.225-5.318 12.092-8.905 19.45-9.018.184-.005.373-.007.563-.006z'
+						data-name='Trazado 552'
+						transform='translate(9480.463 -124.956)'
+					></path>
+					<path
+						fill='#fff'
+						d='M508.687 419.809A44.4 44.4 0 00490 439.729a19.12 19.12 0 00-1.778 5.721 10.965 10.965 0 00.888 5.7 22.7 22.7 0 011.927 5.145 6.714 6.714 0 01-1.506 5.281 17.446 17.446 0 01-5.557 4.16c-2.266 1.232-4.64 2.476-6.175 4.626-.186.26-.579-.043-.394-.3 2.669-3.74 7.542-4.686 10.787-7.76a6.8 6.8 0 002.41-5.477 17.609 17.609 0 00-1.857-5.26 11.7 11.7 0 01-1.076-5.543 17.675 17.675 0 011.551-5.768 43.074 43.074 0 017.3-11.309 45.186 45.186 0 0111.979-9.594c.279-.154.464.307.187.461z'
+						data-name='Trazado 553'
+						transform='translate(9480.088 -124.6)'
+					></path>
+					<path
+						fill='#fff'
+						d='M505.974 449.686a6.661 6.661 0 01-2.473-8.263c.129-.292.59-.1.46.188a6.168 6.168 0 002.316 7.682c.269.173-.036.565-.3.394z'
+						data-name='Trazado 554'
+						transform='translate(9465.23 -137.35)'
+					></path>
+					<path
+						fill='#fff'
+						d='M503.966 486.142a12.839 12.839 0 007.859-5.077c.187-.26.58.044.394.3a13.355 13.355 0 01-8.189 5.267c-.315.068-.377-.432-.064-.49z'
+						data-name='Trazado 555'
+						transform='translate(9464.754 -160.395)'
+					></path>
+					<path
+						fill='#fff'
+						d='M531.323 434.422a3.771 3.771 0 003.432 1.013c.313-.067.375.426.064.493a4.225 4.225 0 01-3.8-1.112.257.257 0 01-.045-.348.25.25 0 01.348-.045z'
+						data-name='Trazado 556'
+						transform='translate(9448.979 -133.341)'
+					></path>
+					<path
+						fill='#fff'
+						d='M502.806 522.474a3.969 3.969 0 00-3.332-3.892l-56.956-9.353a3.969 3.969 0 00-1.641.073l-13.348 3.451-7.659 1.983-14.134 3.654a3.982 3.982 0 00-2.981 3.852v59.682a4 4 0 003.15 3.889l58.013-.657a3.865 3.865 0 00.829.086 3.972 3.972 0 001.2-.182l34.467.858a3.962 3.962 0 002.782-3.826z'
+						data-name='Trazado 568'
+						transform='translate(9523.4 -176.776)'
+					></path>
+					<path
+						fill='#ccc'
+						d='M502.806 522.474a3.969 3.969 0 00-3.332-3.892l-56.956-9.353a3.969 3.969 0 00-1.641.073l-13.348 3.451-7.659 1.983-14.134 3.654a3.982 3.982 0 00-2.981 3.852v59.682a4 4 0 003.15 3.889l58.013-.657a3.865 3.865 0 00.829.086 3.972 3.972 0 001.2-.182l34.467.858a3.962 3.962 0 002.782-3.826zm-2.692 62.495l-34.467.82a3.025 3.025 0 01-1.518.073l-58.016-1.021a3 3 0 01-2.361-2.918v-59.681a2.987 2.987 0 011.956-2.8 2.468 2.468 0 01.278-.086l14.953-3.866 8.842-2.288 11.345-2.934a2.844 2.844 0 01.746-.1 2.95 2.95 0 01.484.04l56.956 9.353a2.969 2.969 0 012.5 2.917l.388 59.622a2.973 2.973 0 01-2.087 2.869z'
+						data-name='Trazado 569'
+						transform='translate(9523.4 -176.776)'
+					></path>
+					<path
+						fill='#ccc'
+						d='M503.084 535.03a.431.431 0 01-.126.056l-16.758 4.529-5.215 1.409-14.833 4.008a.574.574 0 01-.129.017.827.827 0 01-.089-.007l-59.81-10.9-.2-.036a.5.5 0 11.179-.981l1.2.219 58.7 10.7 12.784-3.455 7.151-1.933 16.494-4.459.262-.07a.5.5 0 01.58.272.39.39 0 01.03.08.5.5 0 01-.22.551z'
+						data-name='Trazado 570'
+						transform='translate(9521.796 -190.674)'
+					></path>
+					<path
+						fill='#ccc'
+						d='M549.614 614.407c-.273 0-.495-.22-.5 1.185l-.5-54.207c0-1.952.218-2.177.493-2.179.273 0 .495.219.5 2.17l.5 54.207c0-1.4-.218-1.178-.493-1.176z'
+						data-name='Trazado 571'
+						transform='translate(9438.707 -205.824)'
+					></path>
+					<path
+						fill='#ccc'
+						d='M508.437 590.941l-5.356.057-2.2-59.356-56.081-11.159a1.284 1.284 0 01-.162-.04 1.977 1.977 0 01-1.068-.753l7.659-1.983 2.251.448 53.219 10.586a1.978 1.978 0 011.339.968c.162.291.396 60.891.399 61.232z'
+						data-name='Trazado 572'
+						transform='translate(9499.705 -181.73)'
+					></path>
+					<g data-name='Grupo 693' transform='translate(10000.705 365.536)'>
+						<path
+							fill='#ffb6b6'
+							d='M624.941 270.06a5.027 5.027 0 00-.114.784l-20.534 11.846-4.991-2.873-5.321 6.966 8.341 5.945a3.824 3.824 0 004.588-.112l21.174-16.7a5.018 5.018 0 10-3.143-5.851z'
+							data-name='Trazado 557'
+							transform='translate(-589.857 -262.724)'
+						></path>
+						<path
+							fill='#fff'
+							d='M521.048 267.951a2.991 2.991 0 012.511-2.933l42.925-7.049a2.991 2.991 0 011.237.055l10.06 2.6 5.772 1.494 10.652 2.754a3 3 0 012.246 2.9v35.181a3.014 3.014 0 01-2.374 2.931l-43.722 9.3a2.912 2.912 0 01-.625.065 2.994 2.994 0 01-.9-.137l-25.976-8.2a2.986 2.986 0 01-2.1-2.883z'
+							data-name='Trazado 573'
+							transform='translate(-520.755 -257.928)'
+						></path>
+						<path
+							fill='#ff9800'
+							d='M570.6 264.184a.362.362 0 01.093.012l26.484 6.849a.374.374 0 01.281.362v35.181a.376.376 0 01-.3.366l-43.722 9.3a.377.377 0 01-.191-.009l-25.977-8.2a.372.372 0 01-.261-.36l.293-36.085a.374.374 0 01.314-.366l42.925-7.048a.4.4 0 01.061-.002z'
+							data-name='Trazado 574'
+							transform='translate(-524.387 -261.561)'
+						></path>
+						<path
+							fill='#3f3d56'
+							d='M521.048 267.951a2.991 2.991 0 012.511-2.933l42.925-7.049a2.991 2.991 0 011.237.055l10.06 2.6 5.772 1.494 10.652 2.754a3 3 0 012.246 2.9v35.181a3.014 3.014 0 01-2.374 2.931l-43.722 9.3a2.912 2.912 0 01-.625.065 2.994 2.994 0 01-.9-.137l-25.976-8.2a2.986 2.986 0 01-2.1-2.883zm2.029 38.25l25.976 8.2a2.28 2.28 0 001.144.055l43.724-9.3a2.261 2.261 0 001.779-2.2v-35.18a2.252 2.252 0 00-1.474-2.111 1.872 1.872 0 00-.21-.065l-11.269-2.913-6.664-1.724-8.551-2.211a2.143 2.143 0 00-.562-.072 2.223 2.223 0 00-.365.03l-42.925 7.049a2.237 2.237 0 00-1.884 2.2l-.292 36.081a2.241 2.241 0 001.572 2.164z'
+							data-name='Trazado 575'
+							transform='translate(-520.755 -257.928)'
+						></path>
+						<path
+							fill='#3f3d56'
+							d='M523.021 277.413a.326.326 0 00.095.042l12.626 3.413 3.93 1.062 11.179 3.021a.434.434 0 00.1.012.607.607 0 00.068 0l45.076-8.218.15-.027a.376.376 0 00-.135-.74l-.907.165-44.239 8.057-9.635-2.6-5.39-1.457-12.431-3.361-.2-.052a.377.377 0 00-.437.2.3.3 0 00-.022.06.376.376 0 00.172.423z'
+							data-name='Trazado 576'
+							transform='translate(-521.729 -268.402)'
+						></path>
+						<path
+							fill='#3f3d56'
+							d='M631.06 337.236a.375.375 0 00.375-.371l.375-40.853a.375.375 0 00-.371-.378.375.375 0 00-.375.371l-.375 40.853a.375.375 0 00.371.378z'
+							data-name='Trazado 577'
+							transform='translate(-602.215 -279.821)'
+						></path>
+						<path
+							fill='#3f3d56'
+							d='M551.513 314.106l3.93 1.062 1.657-40.309 42.27-8.411a.968.968 0 00.122-.03 1.491 1.491 0 00.8-.567l-5.772-1.494-1.7.337-40.109 7.978a1.491 1.491 0 00-1.009.73c-.117.218-.187 40.444-.189 40.704z'
+							data-name='Trazado 578'
+							transform='translate(-537.5 -261.661)'
+						></path>
+						<path
+							fill='#fff'
+							d='M531.384 335.031a.632.632 0 00.139-.016l13-2.936a.629.629 0 00-.277-1.227l-13 2.936a.629.629 0 00.138 1.243z'
+							data-name='Trazado 583'
+							transform='translate(-473.512 -300.262)'
+						></path>
+					</g>
+					<g data-name='Grupo 684' transform='translate(9952.387 370.569)'>
+						<path
+							fill='#ffb6b6'
+							d='M603.884 270.06a5.041 5.041 0 01.114.784l20.534 11.846 4.991-2.873 5.321 6.966-8.341 5.945a3.824 3.824 0 01-4.588-.112l-21.174-16.7a5.018 5.018 0 113.143-5.851z'
+							data-name='Trazado 557'
+							transform='translate(-563.273 -262.724)'
+						></path>
+						<path
+							fill='#fff'
+							d='M596.158 267.951a2.991 2.991 0 00-2.511-2.933l-42.925-7.049a2.992 2.992 0 00-1.237.055l-10.06 2.6-5.772 1.494L523 264.872a3 3 0 00-2.246 2.9v35.181a3.014 3.014 0 002.374 2.931l43.722 9.3a2.91 2.91 0 00.625.065 2.993 2.993 0 00.9-.137l25.976-8.2a2.986 2.986 0 002.1-2.883z'
+							data-name='Trazado 573'
+							transform='translate(-520.755 -257.928)'
+						></path>
+						<path
+							fill='#ff9800'
+							d='M553.869 264.184a.362.362 0 00-.093.012l-26.484 6.849a.374.374 0 00-.28.362v35.181a.376.376 0 00.3.366l43.722 9.3a.378.378 0 00.191-.009l25.977-8.2a.372.372 0 00.261-.36l-.291-36.081a.374.374 0 00-.314-.366l-42.924-7.048a.394.394 0 00-.065-.006z'
+							data-name='Trazado 574'
+							transform='translate(-524.388 -261.561)'
+						></path>
+						<path
+							fill='#3f3d56'
+							d='M596.158 267.951a2.991 2.991 0 00-2.511-2.933l-42.925-7.049a2.992 2.992 0 00-1.237.055l-10.06 2.6-5.772 1.494L523 264.872a3 3 0 00-2.246 2.9v35.181a3.014 3.014 0 002.374 2.931l43.722 9.3a2.91 2.91 0 00.625.065 2.993 2.993 0 00.9-.137l25.976-8.2a2.986 2.986 0 002.1-2.883zM594.13 306.2l-25.976 8.2a2.28 2.28 0 01-1.144.055l-43.724-9.3a2.261 2.261 0 01-1.779-2.2v-35.179a2.251 2.251 0 011.474-2.111 1.866 1.866 0 01.21-.065l11.269-2.913 6.664-1.724 8.551-2.211a2.142 2.142 0 01.562-.072 2.223 2.223 0 01.365.03l42.925 7.049a2.237 2.237 0 011.884 2.2l.292 36.081a2.241 2.241 0 01-1.572 2.164z'
+							data-name='Trazado 575'
+							transform='translate(-520.755 -257.928)'
+						></path>
+						<path
+							fill='#3f3d56'
+							d='M596.368 277.413a.326.326 0 01-.095.042l-12.626 3.413-3.93 1.062-11.179 3.021a.436.436 0 01-.1.012.607.607 0 01-.067 0L523.3 276.74l-.15-.027a.376.376 0 11.135-.74l.907.165 44.236 8.066 9.635-2.6 5.39-1.457 12.431-3.361.2-.052a.377.377 0 01.437.2.293.293 0 01.022.06.376.376 0 01-.175.419z'
+							data-name='Trazado 576'
+							transform='translate(-521.965 -268.402)'
+						></path>
+						<path
+							fill='#3f3d56'
+							d='M631.435 337.236a.375.375 0 01-.375-.371l-.375-40.853a.375.375 0 01.371-.378.375.375 0 01.375.371l.375 40.853a.375.375 0 01-.371.378z'
+							data-name='Trazado 577'
+							transform='translate(-584.585 -279.821)'
+						></path>
+						<path
+							fill='#3f3d56'
+							d='M600.3 314.106l-3.93 1.062-1.657-40.309-42.27-8.411a.97.97 0 01-.122-.03 1.49 1.49 0 01-.8-.567l5.772-1.494 1.7.337 40.109 7.978a1.491 1.491 0 011.01.73c.112.218.182 40.444.188 40.704z'
+							data-name='Trazado 578'
+							transform='translate(-538.614 -261.661)'
+						></path>
+						<path
+							fill='#fff'
+							d='M544.385 335.031a.632.632 0 01-.139-.016l-13-2.936a.629.629 0 01.277-1.227l13 2.936a.629.629 0 01-.138 1.243z'
+							data-name='Trazado 583'
+							transform='translate(-526.562 -300.262)'
+						></path>
+					</g>
+					<path
+						fill='#e6e6e6'
+						d='M424.452 620.539a.63.63 0 01-.139.013l-13.326-.224a.629.629 0 01.021-1.258l13.326.224a.629.629 0 01.118 1.245z'
+						data-name='Trazado 584'
+						transform='translate(9518.98 -240.584)'
+					></path>
+					<path
+						fill='#e6e6e6'
+						d='M435.451 637.539a.629.629 0 01-.139.013l-13.326-.224a.629.629 0 11.021-1.258l13.326.224a.629.629 0 01.118 1.245z'
+						data-name='Trazado 585'
+						transform='translate(9512.594 -250.455)'
+					></path>
+				</g>
+				<g data-name='MDI / progress-upload' transform='translate(762.124 390)'>
+					<path
+						fill='#ff9800'
+						d='M22.925 2.03a19.064 19.064 0 010 37.937v-3.813a15.251 15.251 0 000-30.273V2.03m-3.813.057V5.9a15.242 15.242 0 00-7.435 3.2L8.951 6.281a18.735 18.735 0 0110.161-4.194M6.263 8.969L8.989 11.7a15.283 15.283 0 00-3.126 7.43H2.05A18.844 18.844 0 016.263 8.969M2.069 22.943h3.813a15.255 15.255 0 003.107 7.435L6.282 33.1a19.139 19.139 0 01-4.213-10.157m9.608 10.237a15.255 15.255 0 007.435 3.107V40.1a19.052 19.052 0 01-10.161-4.308l2.726-2.612m9.341-20.722l-8.578 8.579h6.672v7.625h3.813v-7.625H29.6z'
+						data-name='Path / progress-upload'
+						transform='translate(1.763 1.784)'
+					></path>
+				</g>
+			</g>
+		</svg>
+	);
+}
+
+export default Icon;

package/src/components/svgelements/SvgLogo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+function SvgLogo() {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			width='536'
+			height='92'
+			viewBox='0 0 536 92'
+		>
+			<g
+				id='Grupo_749'
+				data-name='Grupo 749'
+				transform='translate(-1358 -1489)'
+			>
+				<rect
+					id='Rectángulo_429'
+					data-name='Rectángulo 429'
+					width='536'
+					height='92'
+					transform='translate(1358 1489)'
+					fill='#222641'
+				></rect>
+				<g id='Grupo_748' data-name='Grupo 748'>
+					<rect
+						id='Rectángulo_430'
+						data-name='Rectángulo 430'
+						width='263'
+						height='92'
+						transform='translate(1358 1489)'
+						fill='#fff'
+					></rect>
+					<path
+						id='Trazado_647'
+						data-name='Trazado 647'
+						d='M4.565,0H14.52C25.19,0,31.79-6.16,31.79-18.15c0-11.935-6.6-17.82-17.6-17.82H4.565ZM11.11-5.28V-30.635h2.64c7.15,0,11.275,3.685,11.275,12.485C25.025-9.3,20.9-5.28,13.75-5.28ZM69.308.66A14.428,14.428,0,0,0,80.693-4.565L77.173-8.47a9.817,9.817,0,0,1-7.59,3.465c-6,0-9.79-4.95-9.79-13.035,0-8.03,4.18-12.87,9.9-12.87a9.336,9.336,0,0,1,6.82,2.86l3.465-4.015A14.075,14.075,0,0,0,69.583-36.63c-9.13,0-16.5,6.985-16.5,18.755C53.083-5.94,60.288.66,69.308.66ZM102.646,0h6.545V-35.97h-6.545ZM148.58.66a14.428,14.428,0,0,0,11.385-5.225l-3.52-3.905a9.817,9.817,0,0,1-7.59,3.465c-5.995,0-9.79-4.95-9.79-13.035,0-8.03,4.18-12.87,9.9-12.87a9.336,9.336,0,0,1,6.82,2.86l3.465-4.015a14.075,14.075,0,0,0-10.4-4.565c-9.13,0-16.5,6.985-16.5,18.755C132.355-5.94,139.56.66,148.58.66Z'
+						transform='translate(1378 1556)'
+						fill='#242943'
+					></path>
+					<path
+						id='Trazado_646'
+						data-name='Trazado 646'
+						d='M20.185.66A17.477,17.477,0,0,0,32.12-3.685V-20.4H18.81v6.985h5.72v5.775a5.943,5.943,0,0,1-3.41.935c-6.655,0-9.9-4.125-9.9-11.275,0-6.93,3.85-11.11,9.13-11.11A9.008,9.008,0,0,1,27-26.62l4.51-5.17a15.349,15.349,0,0,0-11.44-4.675c-9.57,0-17.6,6.875-17.6,18.81C2.475-5.555,10.285.66,20.185.66ZM54.34,0h8.58V-12.6H67.1L73.7,0h9.57L75.295-14.19c3.685-1.76,6.16-5.115,6.16-10.34,0-8.635-6.38-11.275-13.97-11.275H54.34Zm8.58-19.36v-9.68h3.9c4.07,0,6.27,1.1,6.27,4.51s-2.2,5.17-6.27,5.17ZM118.085.66c9.735,0,16.39-6.985,16.39-18.7s-6.655-18.425-16.39-18.425-16.39,6.655-16.39,18.425C101.695-6.325,108.35.66,118.085.66Zm0-7.37c-4.675,0-7.645-4.4-7.645-11.33,0-6.985,2.97-11.055,7.645-11.055,4.73,0,7.645,4.07,7.645,11.055C125.73-11.11,122.815-6.71,118.085-6.71ZM170.445.66c9.515,0,14.3-5.39,14.3-17.49V-35.805h-8.2V-15.9c0,6.82-2.145,9.185-6.1,9.185-3.9,0-5.94-2.365-5.94-9.185v-19.91H155.98V-16.83C155.98-4.73,160.93.66,170.445.66Zm37.4-.66h8.58V-11.88h4.235c7.535,0,14.08-3.74,14.08-12.32,0-8.8-6.435-11.6-14.3-11.6h-12.6Zm8.58-18.645v-10.4h3.52c4.18,0,6.435,1.265,6.435,4.84s-1.98,5.555-6.215,5.555Z'
+						transform='translate(1634 1556)'
+						fill='#fffeff'
+					></path>
+				</g>
+			</g>
+		</svg>
+	);
+}
+
+export default SvgLogo;

package/src/components/svgelements/SvgLogoMin.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+function SvgLogo() {
+	return (
+		<svg xmlns='http://www.w3.org/2000/svg' width='80' viewBox='0 0 199 92'>
+			<defs>
+				<clipPath id='clipPath'>
+					<rect
+						id='Rectángulo_1'
+						data-name='Rectángulo 1'
+						width='199'
+						height='92'
+						transform='translate(179 398)'
+						fill='#fff'
+						stroke='#707070'
+						strokeWidth='1'
+						opacity='0.432'
+					/>
+				</clipPath>
+			</defs>
+			<g
+				id='Enmascarar_grupo_1'
+				data-name='Enmascarar grupo 1'
+				transform='translate(-179 -398)'
+				clipPath='url(#clipPath)'
+			>
+				<g id='Grupo_749' data-name='Grupo 749' transform='translate(179 398)'>
+					<rect
+						id='Rectángulo_429'
+						data-name='Rectángulo 429'
+						width='531'
+						height='92'
+						fill='#222641'
+					/>
+					<g id='Grupo_748' data-name='Grupo 748'>
+						<rect
+							id='Rectángulo_430'
+							data-name='Rectángulo 430'
+							width='260'
+							height='92'
+							fill='#fff'
+						/>
+						<path
+							id='Trazado_647'
+							data-name='Trazado 647'
+							d='M4.565,0h9.853C24.979,0,31.511-6.16,31.511-18.15c0-11.935-6.532-17.82-17.42-17.82H4.565Zm6.478-5.28V-30.635h2.613c7.077,0,11.159,3.685,11.159,12.485,0,8.85-4.083,12.87-11.159,12.87ZM68.644.66A14.22,14.22,0,0,0,79.913-4.565l-3.484-3.9a9.675,9.675,0,0,1-7.512,3.465c-5.938,0-9.69-4.95-9.69-13.035,0-8.03,4.137-12.87,9.8-12.87a9.194,9.194,0,0,1,6.75,2.86l3.429-4.015A13.866,13.866,0,0,0,68.917-36.63c-9.036,0-16.331,6.985-16.331,18.755C52.586-5.94,59.717.66,68.644.66Zm33-.66h6.478V-35.97h-6.478ZM147.1.66a14.22,14.22,0,0,0,11.268-5.225l-3.484-3.9a9.675,9.675,0,0,1-7.512,3.465c-5.934,0-9.69-4.95-9.69-13.035,0-8.03,4.137-12.87,9.8-12.87a9.194,9.194,0,0,1,6.75,2.86l3.429-4.015a13.866,13.866,0,0,0-10.293-4.565c-9.036,0-16.331,6.985-16.331,18.755C131.045-5.94,138.176.66,147.1.66Z'
+							transform='translate(19.748 67)'
+							fill='#242943'
+						/>
+						<path
+							id='Trazado_646'
+							data-name='Trazado 646'
+							d='M20,.66A17.192,17.192,0,0,0,31.816-3.685V-20.4H18.643v6.985H24.3V-7.64a5.837,5.837,0,0,1-3.375.935c-6.587,0-9.8-4.125-9.8-11.275,0-6.93,3.811-11.11,9.036-11.11a8.863,8.863,0,0,1,6.582,2.47l4.464-5.17A15.113,15.113,0,0,0,19.89-36.465c-9.472,0-17.42,6.875-17.42,18.81C2.475-5.555,10.2.66,20,.66ZM53.808,0H62.3V-12.6h4.137L72.97,0h9.472L74.549-14.19c3.647-1.76,6.1-5.115,6.1-10.34,0-8.635-6.315-11.275-13.827-11.275H53.808ZM62.3-19.36v-9.68h3.86c4.028,0,6.206,1.1,6.206,4.51s-2.177,5.17-6.206,5.17ZM116.9.66c9.635,0,16.222-6.985,16.222-18.7S126.535-36.465,116.9-36.465,100.678-29.81,100.678-18.04C100.678-6.325,107.265.66,116.9.66Zm0-7.37c-4.627,0-7.567-4.4-7.567-11.33,0-6.985,2.94-11.055,7.567-11.055,4.682,0,7.567,4.07,7.567,11.055C124.467-11.11,121.581-6.71,116.9-6.71ZM168.723.66c9.417,0,14.153-5.39,14.153-17.49V-35.805h-8.116V-15.9c0,6.82-2.123,9.185-6.037,9.185-3.86,0-5.879-2.365-5.879-9.185V-35.81h-8.438v18.98C154.407-4.73,159.306.66,168.723.66ZM205.74,0h8.492V-11.88h4.192c7.458,0,13.936-3.74,13.936-12.32,0-8.8-6.369-11.6-14.153-11.6H205.735Zm8.492-18.645v-10.4h3.484c4.137,0,6.369,1.265,6.369,4.84s-1.96,5.555-6.151,5.555Z'
+							transform='translate(273.146 67)'
+							fill='#fffeff'
+						/>
+					</g>
+				</g>
+			</g>
+		</svg>
+	);
+}
+
+export default SvgLogo;