@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/schemas/roles.tsx

@@ -0,0 +1,48 @@
+import { IDashAutoAdminAttribute } from 'dash-auto-admin';
+import PermissionsSelector from '../components/permission/PermissionsSelector';
+
+const roleSchema: IDashAutoAdminAttribute[] = [
+	{
+		label: 'Nombre',
+		attribute: 'name',
+		type: String,
+	},
+	{
+		label: 'Nivel',
+		attribute: 'level',
+		type: Number,
+		inList: false,
+		// @TODO Agregar validador que no se pueda seleccionar un nivel superior
+	},
+	{
+		label: 'Redirección',
+		attribute: 'redirect',
+		type: String,
+		inList: false,
+		fieldProps: {
+			placeholder: '/tab/kitchentab',
+		},
+		// Ensure redirect starts with /
+		validate: (value: string) => {
+			if (value && !value.startsWith('/')) {
+				throw Error('La ruta debe comenzar con /');
+			}
+		},
+	},
+	{
+		label: 'Grupo (web)',
+		attribute: 'guard_name',
+		type: String,
+		inList: false,
+	},
+	{
+		label: 'Permisos',
+		attribute: 'permission_ids',
+		type: String,
+		custom: true,
+		component: PermissionsSelector,
+		inList: false,
+	},
+];
+
+export default roleSchema;

package/src/schemas/rolesDataGrid.tsx

@@ -0,0 +1,48 @@
+import { IDashAutoAdminAttribute } from 'dash-auto-admin';
+import PermissionsSelectorList from '../components/permission/PermissionsSelectorList';
+
+const roleSchemaDataGrid: IDashAutoAdminAttribute[] = [
+	{
+		label: 'Nombre',
+		attribute: 'name',
+		type: String,
+	},
+	{
+		label: 'Nivel',
+		attribute: 'level',
+		type: Number,
+		inList: false,
+		// @TODO Agregar validador que no se pueda seleccionar un nivel superior
+	},
+	{
+		label: 'Redirección',
+		attribute: 'redirect',
+		type: String,
+		inList: false,
+		fieldProps: {
+			placeholder: '/tab/kitchentab',
+		},
+		// Ensure redirect starts with /
+		validate: (value: string) => {
+			if (value && !value.startsWith('/')) {
+				throw Error('La ruta debe comenzar con /');
+			}
+		},
+	},
+	{
+		label: 'Grupo (web)',
+		attribute: 'guard_name',
+		type: String,
+		inList: false,
+	},
+	{
+		label: 'Permisos',
+		attribute: 'permission_ids',
+		type: String,
+		custom: true,
+		component: PermissionsSelectorList,
+		inList: false,
+	},
+];
+
+export default roleSchemaDataGrid;

package/src/schemas/subscription/components/SubscriptionActions.tsx

@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import { 
+    Button, 
+    ButtonGroup, 
+    Dialog, 
+    DialogTitle, 
+    DialogContent, 
+    DialogActions,
+    Typography,
+    Alert,
+    Box
+} from '@mui/material';
+import { 
+    Cancel as CancelIcon, 
+    Refresh as RefreshIcon, 
+    Upgrade as UpgradeIcon 
+} from '@mui/icons-material';
+import { useRecordContext, useDataProvider, useNotify, useRefresh } from 'react-admin';
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+
+const ActionComponent: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, resourceConfig }) => {
+    const record = useRecordContext();
+    const dataProvider = useDataProvider();
+    const notify = useNotify();
+    const refresh = useRefresh();
+    const [loading, setLoading] = useState(false);
+    const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+
+    if (!record) return null;
+
+    const handleCancelSubscription = async () => {
+        try {
+            setLoading(true);
+            await dataProvider.create('system/subscription/cancel/subscription', {
+                data: { subscription_id: record.id }
+            });
+            notify('Suscripción cancelada exitosamente', { type: 'success' });
+            refresh();
+            setCancelDialogOpen(false);
+        } catch (error) {
+            notify('Error al cancelar la suscripción', { type: 'error' });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleReactivateSubscription = async () => {
+        try {
+            setLoading(true);
+            await dataProvider.update('system/subscription',{
+                id: record.id,
+                data: { status: 'active' },
+                previousData: {}
+            });
+            notify('Suscripción reactivada exitosamente', { type: 'success' });
+            refresh();
+        } catch (error) {
+            notify('Error al reactivar la suscripción', { type: 'error' });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const canCancel = ['active', 'trial'].includes(record.status);
+    const canReactivate = record.status === 'cancelled';
+
+    return (
+        <Box>
+            <ButtonGroup variant="outlined" size="small">
+                {canCancel && (
+                    <Button
+                        startIcon={<CancelIcon />}
+                        color="error"
+                        onClick={() => setCancelDialogOpen(true)}
+                        disabled={loading}
+                    >
+                        Cancelar
+                    </Button>
+                )}
+                
+                {canReactivate && (
+                    <Button
+                        startIcon={<RefreshIcon />}
+                        color="success"
+                        onClick={handleReactivateSubscription}
+                        disabled={loading}
+                    >
+                        Reactivar
+                    </Button>
+                )}
+                
+                <Button
+                    startIcon={<UpgradeIcon />}
+                    color="primary"
+                    disabled={loading || record.status === 'expired'}
+                >
+                    Cambiar Plan
+                </Button>
+            </ButtonGroup>
+
+            <Dialog
+                open={cancelDialogOpen}
+                onClose={() => setCancelDialogOpen(false)}
+                maxWidth="sm"
+                fullWidth
+            >
+                <DialogTitle>Confirmar Cancelación</DialogTitle>
+                <DialogContent>
+                    <Alert severity="warning" sx={{ mb: 2 }}>
+                        Esta acción cancelará la suscripción inmediatamente.
+                    </Alert>
+                    <Typography>
+                        ¿Estás seguro de que deseas cancelar la suscripción de{' '}
+                        <strong>{record.subscription_plan?.name}</strong>?
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
+                        El usuario perderá acceso a las funcionalidades premium al final del período actual.
+                    </Typography>
+                </DialogContent>
+                <DialogActions>
+                    <Button 
+                        onClick={() => setCancelDialogOpen(false)}
+                        disabled={loading}
+                    >
+                        Cancelar
+                    </Button>
+                    <Button 
+                        onClick={handleCancelSubscription}
+                        color="error"
+                        variant="contained"
+                        disabled={loading}
+                    >
+                        Confirmar Cancelación
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </Box>
+    );
+};
+
+const SubscriptionActions = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+    switch (method) {
+        case "edit":
+        case "create":
+        case "view":
+        case "list":
+            return <ActionComponent attribute={attribute} method={method} resourceConfig={resourceConfig} />
+        default:
+            return <></>;
+    }
+}
+
+export default SubscriptionActions;

package/src/schemas/subscription/components/SubscriptionPaymentHistory.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    Table, 
+    TableBody, 
+    TableCell, 
+    TableContainer, 
+    TableHead, 
+    TableRow, 
+    Paper, 
+    Typography,
+    CircularProgress,
+    Box
+} from '@mui/material';
+import { useRecordContext, useDataProvider } from 'react-admin';
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import { priceFormatter } from 'dash-utils';
+
+interface Payment {
+    id: number;
+    amount: number;
+    status: string;
+    transaction_id: string;
+    created_at: string;
+}
+
+const PaymentHistoryView: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
+    const record = useRecordContext();
+    const dataProvider = useDataProvider();
+    const [payments, setPayments] = useState<Payment[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (record?.id) {
+            fetchPayments();
+        }
+    }, [record?.id]);
+
+    const fetchPayments = async () => {
+        try {
+            setLoading(true);
+            const { data } = await dataProvider.getList('payments', {
+                filter: { subscription_id: record.id },
+                sort: { field: 'created_at', order: 'DESC' },
+                pagination: { page: 1, perPage: 10 },
+            });
+            setPayments(data);
+        } catch (error) {
+            console.error('Error fetching payments:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <Box display="flex" justifyContent="center" p={2}>
+                <CircularProgress />
+            </Box>
+        );
+    }
+
+    if (payments.length === 0) {
+        return (
+            <Typography variant="body2" color="textSecondary">
+                No hay historial de pagos disponible
+            </Typography>
+        );
+    }
+
+    return (
+        <TableContainer component={Paper} variant="outlined">
+            <Table size="small">
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Fecha</TableCell>
+                        <TableCell>Monto</TableCell>
+                        <TableCell>Estado</TableCell>
+                        <TableCell>ID Transacción</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {payments.map((payment) => (
+                        <TableRow key={payment.id}>
+                            <TableCell>
+                                {new Date(payment.created_at).toLocaleDateString()}
+                            </TableCell>
+                            <TableCell>
+                                {priceFormatter(payment.amount, 'CLP')}
+                            </TableCell>
+                            <TableCell>
+                                <Typography 
+                                    variant="body2" 
+                                    color={payment.status === 'completed' ? 'success.main' : 'error.main'}
+                                >
+                                    {payment.status === 'completed' ? 'Completado' : 'Fallido'}
+                                </Typography>
+                            </TableCell>
+                            <TableCell>
+                                <Typography variant="body2" fontFamily="monospace">
+                                    {payment.transaction_id}
+                                </Typography>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};
+
+const SubscriptionPaymentHistory = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+    switch (method) {
+        case "view":
+            return <PaymentHistoryView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+        default:
+            return <></>;
+    }
+};
+
+export default SubscriptionPaymentHistory;

package/src/schemas/subscription/components/SubscriptionPlanFeatures.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+    Box,
+    TextField,
+    Button,
+    Typography,
+    IconButton,
+    Paper,
+    List,
+    ListItem,
+    ListItemText,
+    ListItemSecondaryAction
+} from '@mui/material';
+import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
+import { useRecordContext, useInput } from 'react-admin';
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+
+const EditComponent: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, resourceConfig }) => {
+    const record = useRecordContext();
+    const { field } = useInput({ source: 'features' });
+    const [newFeature, setNewFeature] = useState('');
+    const [features, setFeatures] = useState<string[]>(record?.features || []);
+
+    const handleAddFeature = () => {
+        if (newFeature.trim() && !features.includes(newFeature.trim())) {
+            const updatedFeatures = [...features, newFeature.trim()];
+            setFeatures(updatedFeatures);
+            field.onChange(updatedFeatures);
+            setNewFeature('');
+        }
+    };
+
+    const handleRemoveFeature = (featureToRemove: string) => {
+        const updatedFeatures = features.filter(feature => feature !== featureToRemove);
+        setFeatures(updatedFeatures);
+        field.onChange(updatedFeatures);
+    };
+
+    const handleKeyPress = (event: React.KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            handleAddFeature();
+        }
+    };
+
+    return (
+        <Box>
+            <Typography variant="h6" gutterBottom>
+                Características del Plan
+            </Typography>
+            
+            <Box display="flex" gap={1} mb={2}>
+                <TextField
+                    fullWidth
+                    size="small"
+                    label="Nueva característica"
+                    value={newFeature}
+                    onChange={(e) => setNewFeature(e.target.value)}
+                    onKeyPress={handleKeyPress}
+                    placeholder="Ej: Acceso ilimitado, Soporte 24/7"
+                />
+                <Button
+                    variant="contained"
+                    startIcon={<AddIcon />}
+                    onClick={handleAddFeature}
+                    disabled={!newFeature.trim()}
+                >
+                    Agregar
+                </Button>
+            </Box>
+
+            {features.length > 0 ? (
+                <Paper variant="outlined">
+                    <List dense>
+                        {features.map((feature, index) => (
+                            <ListItem key={index}>
+                                <ListItemText primary={feature} />
+                                <ListItemSecondaryAction>
+                                    <IconButton
+                                        edge="end"
+                                        size="small"
+                                        onClick={() => handleRemoveFeature(feature)}
+                                        color="error"
+                                    >
+                                        <DeleteIcon />
+                                    </IconButton>
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                        ))}
+                    </List>
+                </Paper>
+            ) : (
+                <Typography variant="body2" color="textSecondary" style={{ fontStyle: 'italic' }}>
+                    No hay características definidas para este plan
+                </Typography>
+            )}
+
+            <Box mt={2}>
+                <Typography variant="body2" color="textSecondary">
+                    Las características se mostrarán a los usuarios al seleccionar este plan de suscripción.
+                </Typography>
+            </Box>
+        </Box>
+    );
+};
+
+const ViewComponent: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, resourceConfig }) => {
+    const record = useRecordContext();
+    const features = record?.features || [];
+
+    return (
+        <Box>
+            <Typography variant="h6" gutterBottom>
+                Características del Plan
+            </Typography>
+            
+            {features.length > 0 ? (
+                <Paper variant="outlined">
+                    <List dense>
+                        {features.map((feature: string, index: number) => (
+                            <ListItem key={index}>
+                                <ListItemText primary={feature} />
+                            </ListItem>
+                        ))}
+                    </List>
+                </Paper>
+            ) : (
+                <Typography variant="body2" color="textSecondary" style={{ fontStyle: 'italic' }}>
+                    No hay características definidas para este plan
+                </Typography>
+            )}
+        </Box>
+    );
+};
+
+const ListComponent: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, resourceConfig }) => {
+    const record = useRecordContext();
+    return <>{record?.features?.length || 0} características</>;
+};
+
+const SubscriptionPlanFeatures = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+    switch (method) {
+        case "edit":
+        case "create":
+            return <EditComponent attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+        case "view":
+            return <ViewComponent attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+        case "list":
+            return <ListComponent attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+        default:
+            return <></>;
+    }
+};
+
+export default SubscriptionPlanFeatures;

package/src/schemas/subscription/components/SubscriptionPlanPreview.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+    Card,
+    CardContent,
+    Typography,
+    Box,
+    Chip,
+    List,
+    ListItem,
+    ListItemIcon,
+    ListItemText,
+    Button,
+    Divider
+} from '@mui/material';
+import { Check as CheckIcon, Star as StarIcon } from '@mui/icons-material';
+import { useRecordContext } from 'react-admin';
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import { priceFormatter } from 'dash-utils';
+
+const SubscriptionPlanPreview: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, resourceConfig }) => {
+    const record = useRecordContext();
+
+    if (!record) return null;
+
+    const formatPrice = (price: number) => {
+        return priceFormatter(price, 'CLP');
+    };
+
+    const getBillingCycleText = (cycle: string) => {
+        return cycle === 'monthly' ? 'mes' : 'año';
+    };
+
+    return (
+        <Box maxWidth={400}>
+            <Card elevation={3}>
+                <CardContent>
+                    {/* Header */}
+                    <Box textAlign="center" mb={2}>
+                        <Typography variant="h5" component="h2" gutterBottom>
+                            {record.name}
+                        </Typography>
+                        
+                        {record.has_trial && (
+                            <Chip
+                                icon={<StarIcon />}
+                                label={`${record.trial_days} días gratis`}
+                                color="primary"
+                                size="small"
+                                sx={{ mb: 1 }}
+                            />
+                        )}
+                        
+                        <Typography variant="h3" component="div" color="primary">
+                            {formatPrice(record.price)}
+                        </Typography>
+                        
+                        <Typography variant="body2" color="textSecondary">
+                            por {getBillingCycleText(record.billing_cycle)}
+                        </Typography>
+
+                        {record.billing_cycle === 'yearly' && (
+                            <Typography variant="body2" color="success.main">
+                                {formatPrice(record.price_per_month)} por mes
+                            </Typography>
+                        )}
+                    </Box>
+
+                    <Divider sx={{ my: 2 }} />
+
+                    {/* Description */}
+                    {record.description && (
+                        <Typography variant="body2" color="textSecondary" paragraph>
+                            {record.description}
+                        </Typography>
+                    )}
+
+                    {/* Features */}
+                    {record.features && record.features.length > 0 && (
+                        <Box>
+                            <Typography variant="h6" gutterBottom>
+                                Características incluidas:
+                            </Typography>
+                            <List dense>
+                                {record.features.map((feature: string, index: number) => (
+                                    <ListItem key={index} disableGutters>
+                                        <ListItemIcon sx={{ minWidth: 32 }}>
+                                            <CheckIcon color="success" fontSize="small" />
+                                        </ListItemIcon>
+                                        <ListItemText 
+                                            primary={feature}
+                                            primaryTypographyProps={{ variant: 'body2' }}
+                                        />
+                                    </ListItem>
+                                ))}
+                            </List>
+                        </Box>
+                    )}
+
+                    <Divider sx={{ my: 2 }} />
+
+                    {/* Action Button */}
+                    <Button
+                        variant="contained"
+                        fullWidth
+                        size="large"
+                        disabled={!record.is_active}
+                    >
+                        {record.has_trial ? 'Comenzar Prueba Gratis' : 'Suscribirse Ahora'}
+                    </Button>
+
+                    {!record.is_active && (
+                        <Typography 
+                            variant="caption" 
+                            color="error" 
+                            display="block" 
+                            textAlign="center" 
+                            mt={1}
+                        >
+                            Plan no disponible
+                        </Typography>
+                    )}
+                </CardContent>
+            </Card>
+        </Box>
+    );
+};
+
+export default SubscriptionPlanPreview;