@dashadmin/dash-admin 1.3.24 → 1.3.26

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

@@ -0,0 +1,268 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Grid,
+    Card,
+    CardContent,
+    Typography,
+    Box,
+    CircularProgress,
+    Chip
+} from '@mui/material';
+import {
+    TrendingUp as TrendingUpIcon,
+    People as PeopleIcon,
+    AttachMoney as MoneyIcon,
+    Timeline as TimelineIcon
+} from '@mui/icons-material';
+import { useRecordContext, useDataProvider } from 'react-admin';
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import { priceFormatter } from 'dash-utils';
+
+interface PlanStats {
+    total_subscriptions: number;
+    active_subscriptions: number;
+    trial_subscriptions: number;
+    cancelled_subscriptions: number;
+    total_revenue: number;
+    monthly_revenue: number;
+    conversion_rate: number;
+}
+
+const StatsView: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, resourceConfig }) => {
+    const record = useRecordContext();
+    const dataProvider = useDataProvider();
+    const [stats, setStats] = useState<PlanStats | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (record?.id) {
+            fetchStats();
+        }
+    }, [record?.id]);
+
+    const fetchStats = async () => {
+        try {
+            setLoading(true);
+            const { data } = await dataProvider.getOne('system/subscription-plan/stats', {id:record.id});
+            setStats(data);
+        } catch (error) {
+            console.error('Error fetching plan stats:', error);
+            setStats({
+                total_subscriptions: record.active_subscriptions_count || 0,
+                active_subscriptions: record.active_subscriptions_count || 0,
+                trial_subscriptions: 0,
+                cancelled_subscriptions: 0,
+                total_revenue: 0,
+                monthly_revenue: 0,
+                conversion_rate: 0
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const formatCurrency = (amount: number) => {
+        return priceFormatter(amount, 'CLP');
+    };
+
+    if (loading) {
+        return (
+            <Box display="flex" justifyContent="center" p={4}>
+                <CircularProgress />
+            </Box>
+        );
+    }
+
+    if (!stats) {
+        return (
+            <Typography variant="body2" color="error">
+                Error al cargar las estadísticas
+            </Typography>
+        );
+    }
+
+    return (
+        <Box>
+            <Typography variant="h6" gutterBottom>
+                Estadísticas del Plan
+            </Typography>
+            
+            <Grid container spacing={2}>
+                {/* @ts-ignore - Grid API compatibility issue */}
+                <Grid component="div" item size={{ xs: 12, sm: 6, md: 3 }}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" mb={1}>
+                                <PeopleIcon color="primary" sx={{ mr: 1 }} />
+                                <Typography variant="h6" color="primary">
+                                    {stats.total_subscriptions}
+                                </Typography>
+                            </Box>
+                            <Typography variant="body2" color="textSecondary">
+                                Total Suscripciones
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+
+                {/* @ts-ignore - Grid API compatibility issue */}
+                <Grid component="div" item size={{ xs: 12, sm: 6, md: 3 }}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" mb={1}>
+                                <TrendingUpIcon color="success" sx={{ mr: 1 }} />
+                                <Typography variant="h6" color="success.main">
+                                    {stats.active_subscriptions}
+                                </Typography>
+                            </Box>
+                            <Typography variant="body2" color="textSecondary">
+                                Suscripciones Activas
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+
+                {/* @ts-ignore - Grid API compatibility issue */}
+                <Grid component="div" item size={{ xs: 12, sm: 6, md: 3 }}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" mb={1}>
+                                <TimelineIcon color="info" sx={{ mr: 1 }} />
+                                <Typography variant="h6" color="info.main">
+                                    {stats.trial_subscriptions}
+                                </Typography>
+                            </Box>
+                            <Typography variant="body2" color="textSecondary">
+                                En Período de Prueba
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+
+                {/* @ts-ignore - Grid API compatibility issue */}
+                <Grid component="div" item size={{ xs: 12, sm: 6, md: 3 }}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" mb={1}>
+                                <Typography variant="h6" color="error.main">
+                                    {stats.cancelled_subscriptions}
+                                </Typography>
+                            </Box>
+                            <Typography variant="body2" color="textSecondary">
+                                Canceladas
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+
+                {/* @ts-ignore - Grid API compatibility issue */}
+                <Grid component="div" item size={{ xs: 12, sm: 6 }}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" mb={1}>
+                                <MoneyIcon color="success" sx={{ mr: 1 }} />
+                                <Typography variant="h6" color="success.main">
+                                    {formatCurrency(stats.total_revenue)}
+                                </Typography>
+                            </Box>
+                            <Typography variant="body2" color="textSecondary">
+                                Ingresos Totales
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+
+                {/* @ts-ignore - Grid API compatibility issue */}
+                <Grid component="div" item size={{ xs: 12, sm: 6 }}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" mb={1}>
+                                <MoneyIcon color="primary" sx={{ mr: 1 }} />
+                                <Typography variant="h6" color="primary">
+                                    {formatCurrency(stats.monthly_revenue)}
+                                </Typography>
+                            </Box>
+                            <Typography variant="body2" color="textSecondary">
+                                Ingresos Mensuales
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+
+                {/* @ts-ignore - Grid API compatibility issue */}
+                <Grid component="div" item size={12}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" justifyContent="space-between">
+                                <Box>
+                                    <Typography variant="h6">
+                                        Tasa de Conversión
+                                    </Typography>
+                                    <Typography variant="body2" color="textSecondary">
+                                        De prueba a suscripción pagada
+                                    </Typography>
+                                </Box>
+                                <Chip
+                                    label={`${stats.conversion_rate.toFixed(1)}%`}
+                                    color={stats.conversion_rate > 50 ? 'success' : stats.conversion_rate > 25 ? 'warning' : 'error'}
+                                    size="medium"
+                                />
+                            </Box>
+                        </CardContent>
+                    </Card>
+                </Grid>
+            </Grid>
+
+            <Box mt={3}>
+                <Typography variant="h6" gutterBottom>
+                    Información Adicional
+                </Typography>
+                <Grid container spacing={2}>
+                    {/* @ts-ignore - Grid API compatibility issue */}
+                    <Grid component="div" item size={{ xs: 12, sm: 6 }}>
+                        <Typography variant="body2" color="textSecondary">
+                            <strong>Estado del Plan:</strong>{' '}
+                            <Chip
+                                label={record.is_active ? 'Activo' : 'Inactivo'}
+                                color={record.is_active ? 'success' : 'error'}
+                                size="small"
+                            />
+                        </Typography>
+                    </Grid>
+                    {/* @ts-ignore - Grid API compatibility issue */}
+                    <Grid component="div" item size={{ xs: 12, sm: 6 }}>
+                        <Typography variant="body2" color="textSecondary">
+                            <strong>Período de Prueba:</strong>{' '}
+                            {record.has_trial ? `${record.trial_days} días` : 'No disponible'}
+                        </Typography>
+                    </Grid>
+                    {/* @ts-ignore - Grid API compatibility issue */}
+                    <Grid component="div" item size={{ xs: 12, sm: 6 }}>
+                        <Typography variant="body2" color="textSecondary">
+                            <strong>Ciclo de Facturación:</strong>{' '}
+                            {record.billing_cycle_label}
+                        </Typography>
+                    </Grid>
+                    {/* @ts-ignore - Grid API compatibility issue */}
+                    <Grid component="div" item size={{ xs: 12, sm: 6 }}>
+                        <Typography variant="body2" color="textSecondary">
+                            <strong>Precio por Mes:</strong>{' '}
+                            {formatCurrency(record.price_per_month)}
+                        </Typography>
+                    </Grid>
+                </Grid>
+            </Box>
+        </Box>
+    );
+};
+
+const SubscriptionPlanStats = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+    switch (method) {
+        case "view":
+            return <StatsView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+        default:
+            return <></>;
+    }
+};
+
+export default SubscriptionPlanStats;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Chip, Box } from '@mui/material';
+import { useRecordContext } from 'react-admin';
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+
+const ListComponent: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, resourceConfig }) => {
+    const record = useRecordContext();
+    if (!record) return null;
+
+    const getStatusColor = (status: string) => {
+        switch (status) {
+            case 'active':
+                return 'success';
+            case 'trial':
+                return 'info';
+            case 'cancelled':
+                return 'warning';
+            case 'expired':
+                return 'error';
+            default:
+                return 'default';
+        }
+    };
+
+    const getStatusLabel = (status: string) => {
+        switch (status) {
+            case 'active':
+                return 'Activa';
+            case 'trial':
+                return 'Período de Prueba';
+            case 'cancelled':
+                return 'Cancelada';
+            case 'expired':
+                return 'Expirada';
+            default:
+                return status;
+        }
+    };
+
+    return (
+        <Box>
+            <Chip 
+                label={getStatusLabel(record.status)}
+                color={getStatusColor(record.status)}
+                size="small"
+            />
+            {record.is_on_trial && (
+                <Chip 
+                    label={`${record.days_until_expiry} días restantes`}
+                    color="info"
+                    size="small"
+                    variant="outlined"
+                    style={{ marginLeft: 8 }}
+                />
+            )}
+        </Box>
+    );
+};
+
+const SubscriptionStatusIndicator = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+    switch (method) {
+        case "edit":
+        case "create":
+        case "view":
+        case "list":
+            return <ListComponent attribute={attribute} method={method} resourceConfig={resourceConfig} />
+        default:
+            return <></>;
+    }
+};
+
+export default SubscriptionStatusIndicator;

package/src/schemas/subscription/subscriptionPlanSchema.tsx

@@ -0,0 +1,185 @@
+import { IDashAutoAdminAttribute } from 'dash-auto-admin';
+import { SelectInput } from 'react-admin';
+import SubscriptionPlanFeatures from './components/SubscriptionPlanFeatures';
+import SubscriptionPlanPreview from './components/SubscriptionPlanPreview';
+import SubscriptionPlanStats from './components/SubscriptionPlanStats';
+
+const subscriptionPlanSchema: IDashAutoAdminAttribute[] = [
+    {
+        label: 'ID',
+        attribute: 'id',
+        type: Number,
+        inList: true,
+    },
+    {
+        label: 'Nombre',
+        attribute: 'name',
+        type: String,
+        inList: true,
+        validate: (value: string) => {
+            if (!value || value.trim().length === 0) {
+                throw new Error('El nombre es requerido');
+            }
+            if (value.length > 255) {
+                throw new Error('El nombre no puede exceder 255 caracteres');
+            }
+        }
+    },
+    {
+        label: 'Slug',
+        attribute: 'slug',
+        type: String,
+        inList: true,
+        validate: (value: string) => {
+            if (!value || value.trim().length === 0) {
+                throw new Error('El slug es requerido');
+            }
+            if (!/^[a-z0-9-_]+$/.test(value)) {
+                throw new Error('El slug solo puede contener letras minúsculas, números, guiones y guiones bajos');
+            }
+        }
+    },
+    {
+        label: 'Descripción',
+        attribute: 'description',
+        type: String,
+        inList: false,
+        componentProps: {
+            multiline: true,
+            rows: 3
+        }
+    },
+    {
+        label: 'Precio (en centavos)',
+        attribute: 'price',
+        type: Number,
+        inList: true,
+        validate: (value: number) => {
+            if (value === null || value === undefined) {
+                throw new Error('El precio es requerido');
+            }
+            if (value < 0) {
+                throw new Error('El precio no puede ser negativo');
+            }
+        }
+    },
+    {
+        label: 'Precio Formateado',
+        attribute: 'formatted_price',
+        type: String,
+        inList: true,
+        custom: true,
+    },
+    {
+        label: 'Ciclo de Facturación',
+        attribute: 'billing_cycle',
+        type: String,
+        component: SelectInput,
+        componentProps: {
+            choices: [
+                { id: 'monthly', name: 'Mensual' },
+                { id: 'yearly', name: 'Anual' },
+            ]
+        },
+        inList: true,
+        validate: (value: string) => {
+            if (!value) {
+                throw new Error('El ciclo de facturación es requerido');
+            }
+            if (!['monthly', 'yearly'].includes(value)) {
+                throw new Error('Ciclo de facturación inválido');
+            }
+        }
+    },
+    {
+        label: 'Días de Prueba',
+        attribute: 'trial_days',
+        type: Number,
+        inList: true,
+        componentProps: {
+            min: 0,
+            max: 365
+        },
+        validate: (value: number) => {
+            if (value < 0) {
+                throw new Error('Los días de prueba no pueden ser negativos');
+            }
+            if (value > 365) {
+                throw new Error('Los días de prueba no pueden exceder 365 días');
+            }
+        }
+    },
+    {
+        label: 'Activo',
+        attribute: 'is_active',
+        type: Boolean,
+        inList: true,
+    },
+    {
+        tab: "Características",
+        label: 'Gestión de Características',
+        attribute: 'features_management',
+        type: String,
+        custom: true,
+        inList: false,
+        component: SubscriptionPlanFeatures,
+    },
+    {
+        tab: "Vista Previa",
+        label: 'Vista Previa del Plan',
+        attribute: 'plan_preview',
+        type: String,
+        custom: true,
+        inList: false,
+        component: SubscriptionPlanPreview,
+    },
+    /*{
+        tab: "Estadísticas",
+        label: 'Estadísticas del Plan',
+        attribute: 'plan_stats',
+        type: String,
+        custom: true,
+        inList: false,
+        component: SubscriptionPlanStats,
+    },*/
+    {
+        tab: "Información Calculada",
+        label: 'Precio por Mes',
+        attribute: 'price_per_month',
+        type: Number,
+        inList: false,
+        custom: true,
+    },
+    {
+        tab: "Información Calculada",
+        label: 'Tiene Prueba',
+        attribute: 'has_trial',
+        type: Boolean,
+        inList: true,
+        custom: true,
+    },
+    {
+        tab: "Información Calculada",
+        label: 'Etiqueta del Ciclo',
+        attribute: 'billing_cycle_label',
+        type: String,
+        inList: false,
+        custom: true,
+    },
+    {
+        label: 'Fecha de Creación',
+        attribute: 'created_at',
+        type: String,
+        inList: true,
+        custom: true,
+    },
+    {
+        label: 'Fecha de Actualización',
+        attribute: 'updated_at',
+        type: String,
+        inList: false,
+        custom: true,
+    },
+];
+
+export default subscriptionPlanSchema;

package/src/schemas/subscription/subscriptionSchema.tsx

@@ -0,0 +1,152 @@
+import { IDashAutoAdminAttribute } from 'dash-auto-admin';
+import { SelectInput, DateTimeInput } from 'react-admin';
+import SubscriptionStatusIndicator from './components/SubscriptionStatusIndicator';
+import SubscriptionPaymentHistory from './components/SubscriptionPaymentHistory';
+import SubscriptionActions from './components/SubscriptionActions';
+
+
+const subscriptionSchema: IDashAutoAdminAttribute[] = [
+    {
+        label: 'ID',
+        attribute: 'id',
+        type: Number,
+        inList: true,
+    },
+    {
+        label: 'Usuario',
+        attribute: 'user_id',
+        type: 'system/user.name',
+        pagination: false,
+        multiple: false,
+        component: SelectInput,
+        inList: true,
+    },
+    {
+        label: 'Plan de Suscripción',
+        attribute: 'subscription_plan_id',
+        type: 'system/subscription-plan.name',
+        pagination: false,
+        multiple: false,
+        component: SelectInput,
+        inList: true,
+        validate: (value: any) => {
+            if (!value) {
+                throw new Error('El plan de suscripción es requerido');
+            }
+        }
+    },
+    {
+        label: 'Estado',
+        attribute: 'status',
+        type: String,
+        component: SelectInput,
+        componentProps: {
+            choices: [
+                { id: 'active', name: 'Activa' },
+                { id: 'trial', name: 'Período de Prueba' },
+                { id: 'cancelled', name: 'Cancelada' },
+                { id: 'expired', name: 'Expirada' },
+            ]
+        },
+        inList: true,
+    },
+    {
+        tab: "Estado y Fechas",
+        label: "Indicador de Estado",
+        attribute: 'status_indicator',
+        type: String,
+        custom: true,
+        inList: false,
+        component: SubscriptionStatusIndicator,
+    },
+    {
+        tab: "Estado y Fechas",
+        label: 'Fin del Período de Prueba',
+        attribute: 'trial_ends_at',
+        type: Date,
+      
+        inList: false,
+    },
+    {
+        tab: "Estado y Fechas",
+        label: 'Inicio del Período Actual',
+        attribute: 'current_period_start',
+        type: Date,
+
+        inList: false,
+    },
+    {
+        tab: "Estado y Fechas",
+        label: 'Fin del Período Actual',
+        attribute: 'current_period_end',
+        type: Date,
+        
+        inList: true,
+    },
+    {
+        tab: "Estado y Fechas",
+        label: 'Fecha de Cancelación',
+        attribute: 'cancelled_at',
+        type: Date,
+
+        inList: false,
+    },
+    {
+        tab: "Información de Pago",
+        label: 'ID de Suscripción Google',
+        attribute: 'google_subscription_id',
+        type: String,
+        inList: false,
+    },
+    {
+        tab: "Información de Pago",
+        label: "Historial de Pagos",
+        attribute: 'payment_history',
+        type: String,
+        custom: true,
+        inList: false,
+        component: SubscriptionPaymentHistory,
+    },
+    {
+        tab: "Acciones",
+        label: "Acciones de Suscripción",
+        attribute: 'subscription_actions',
+        type: String,
+        custom: true,
+        inList: false,
+        component: SubscriptionActions,
+    },
+    {
+        tab: "Información Calculada",
+        label: 'Activa',
+        attribute: 'is_active',
+        type: Boolean,
+        inList: true,
+        custom: true,
+    },
+    {
+        tab: "Información Calculada",
+        label: 'En Período de Prueba',
+        attribute: 'is_on_trial',
+        type: Boolean,
+        inList: true,
+        custom: true,
+    },
+    {
+        tab: "Información Calculada",
+        label: 'Días hasta Expiración',
+        attribute: 'days_until_expiry',
+        type: Number,
+        inList: true,
+        custom: true,
+    },
+    {
+        label: 'Fecha de Creación',
+        attribute: 'created_at',
+        type: String,
+        inList: true,
+        custom: true,
+    },
+];
+
+export default subscriptionSchema;