@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/components/subscription/PlanLimitsSettings.tsx

@@ -0,0 +1,230 @@
+import { DashAutoFormTabs, IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import React, { useState, useEffect } from "react";
+import { Loading, useRecordContext } from "react-admin";
+import { useFormContext, useWatch } from "react-hook-form";
+import MUISimpleJsonTable from "../misc/MuiSimpleJsonTable";
+import { useSubscriptionPlanFormats } from "../../contexts/SubscriptionPlanFormatsProvider";
+
+/**
+ * PlanLimitsSettings Component
+ * 
+ * A dynamic form component for managing subscription plan limits.
+ * Similar to TenantSettings, this component reads limit definitions from a backend config
+ * and renders appropriate form fields for each limit type (boolean, integer, etc.)
+ * 
+ * Usage:
+ * - In edit mode: Renders form fields for each limit defined in subscription_plans.limit_formats
+ * - In view mode: Displays the current limits as a table
+ * - In create mode: Renders form fields with default values
+ */
+
+interface LimitFormat {
+    id: string;
+    group: string;
+    tab: string;
+    attribute: string;
+    label: string;
+    visible: boolean;
+    required: boolean;
+    type: 'boolean' | 'integer' | 'string' | 'select';
+    editable: boolean;
+    rules: string;
+    default_value: any;
+    description?: string;
+}
+
+interface SubscriptionPlan {
+    id: number;
+    name: string;
+    slug: string;
+    limits?: Record<string, any>;
+    [key: string]: any;
+}
+
+const PlanLimitsSettingsEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute }) => {
+    const [limitsSchema, setLimitsSchema] = useState<any>(null);
+    const plan: SubscriptionPlan = useRecordContext();
+    const formContext = useFormContext();
+    
+    useWatch({
+        control: formContext.control
+    });
+
+    const { formats: formatsData, loading } = useSubscriptionPlanFormats();
+
+    useEffect(() => {
+        // formatsData is the raw API response: { formats: [...], grouped: {...}, tabs: [...] }
+        if (formatsData && formatsData.formats) {
+            const parsedSchema = (formatsData.formats as LimitFormat[])
+                .filter((entry) => entry.visible !== false)
+                .map((entry) => {
+                    // Extract the actual limit name from 'limits.limit_name'
+                    const limitName = entry.attribute ? entry.attribute.replace('limits.', '') : entry.id;
+
+                    // Get current value from plan or use default
+                    const currentValue = plan?.limits?.[limitName] ?? entry.default_value;
+
+                    return {
+                        ...entry,
+                        fieldOptions: {
+                            defaultValue: currentValue,
+                            fullWidth: true,
+                            helperText: entry.description,
+                        },
+                        ...(method === 'view' && {
+                            readOnly: true,
+                        }),
+                    };
+                });
+
+            console.log('PlanLimitsSettings SCHEMA', parsedSchema);
+            setLimitsSchema(parsedSchema);
+        }
+    }, [formatsData, plan]);
+
+    if (loading) return <Loading />;
+
+    return (
+        <section>
+            {limitsSchema ? (
+                DashAutoFormTabs({
+                    schema: limitsSchema,
+                    resourceConfig: null,
+                    options: {
+                        mode: method,
+                        label: 'Plan Limits Configuration',
+                    }
+                })
+            ) : null}
+        </section>
+    );
+};
+
+const PlanLimitsSettingsCreate: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute }) => {
+    const [limitsSchema, setLimitsSchema] = useState<any>(null);
+    const formContext = useFormContext();
+    
+    useWatch({
+        control: formContext.control
+    });
+
+    const { formats: formatsData, loading } = useSubscriptionPlanFormats();
+
+    useEffect(() => {
+        // formatsData is the raw API response: { formats: [...], grouped: {...}, tabs: [...] }
+        if (!loading && formatsData && formatsData.formats) {
+            const parsedSchema = (formatsData.formats as LimitFormat[])
+                .filter((entry) => entry.visible !== false)
+                .map((entry) => ({
+                    ...entry,
+                    fieldOptions: {
+                        defaultValue: entry.default_value,
+                        fullWidth: true,
+                        helperText: entry.description,
+                    },
+                }));
+
+            setLimitsSchema(parsedSchema);
+        }
+    }, [formatsData, loading]);
+
+    if (loading) return <Loading />;
+
+    return (
+        <section>
+            {limitsSchema ? (
+                DashAutoFormTabs({
+                    schema: limitsSchema,
+                    resourceConfig: null,
+                    options: {
+                        mode: method,
+                        label: 'Plan Limits Configuration',
+                    }
+                })
+            ) : null}
+        </section>
+    );
+};
+
+const PlanLimitsSettingsView: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute }) => {
+    const plan: SubscriptionPlan = useRecordContext();
+    const [parsedValues, setParsedValues] = useState<any>(null);
+    
+    const { formats: formatsData, loading } = useSubscriptionPlanFormats();
+
+    const parseValue = (value: any, type: string) => {
+        if (value === null || value === undefined || value === -1) {
+            return "Unlimited";
+        }
+        switch (type) {
+            case "boolean":
+                return value ? "✓ Enabled" : "✗ Disabled";
+            case "integer":
+                return typeof value === 'number' ? value.toLocaleString() : value;
+            default:
+                return value;
+        }
+    };
+
+    useEffect(() => {
+        // formatsData is the raw API response: { formats: [...], grouped: {...}, tabs: [...] }
+        if (formatsData?.formats && plan) {
+            const object: Record<string, React.ReactNode> = {};
+            
+            (formatsData.formats as LimitFormat[])
+                .filter((entry) => entry.visible !== false)
+                .forEach((entry) => {
+                    const limitName = entry.attribute ? entry.attribute.replace('limits.', '') : entry.id;
+                    const value = plan.limits?.[limitName] ?? entry.default_value;
+                    object[entry.label] = <>{parseValue(value, entry.type)}</>;
+                });
+
+            setParsedValues(object);
+        }
+    }, [formatsData, plan]);
+
+    if (loading) return <Loading />;
+
+    return parsedValues ? (
+        <MUISimpleJsonTable tableData={parsedValues} vertical={true} />
+    ) : (
+        <Loading />
+    );
+};
+
+/**
+ * Main PlanLimitsSettings component
+ * Renders the appropriate sub-component based on the form mode (edit, view, create)
+ */
+const PlanLimitsSettings: React.FC<IDashAutoAdminCustomFieldComponent> = ({ 
+    method, 
+    attribute, 
+    resourceConfig 
+}) => {
+    switch (method) {
+        case "edit":
+            return <PlanLimitsSettingsEdit 
+                attribute={attribute} 
+                method={method} 
+                resourceConfig={resourceConfig} 
+            />;
+        case "view":
+            return <PlanLimitsSettingsView 
+                attribute={attribute} 
+                method={method} 
+                resourceConfig={resourceConfig} 
+            />;
+        case "create":
+            return <PlanLimitsSettingsCreate 
+                attribute={attribute} 
+                method={method} 
+                resourceConfig={resourceConfig} 
+            />;
+        case "list":
+            return null;
+        default:
+            return null;
+    }
+};
+
+export default PlanLimitsSettings;

package/src/components/subscription/PlanMetadataSettings.tsx

@@ -0,0 +1,284 @@
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import React, { useState, useEffect } from "react";
+import { useRecordContext } from "react-admin";
+import { useFormContext } from "react-hook-form";
+import {
+    Box,
+    TextField,
+    IconButton,
+    Typography,
+    Paper,
+    Stack,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableRow,
+    TableHead,
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+/**
+ * PlanMetadataSettings Component
+ * 
+ * A component for managing subscription plan metadata as key-value pairs.
+ * Metadata can store additional configuration or data for a plan.
+ */
+
+interface SubscriptionPlan {
+    id?: number;
+    name?: string;
+    metadata?: Record<string, any>;
+    [key: string]: any;
+}
+
+interface KeyValuePair {
+    key: string;
+    value: string;
+}
+
+/**
+ * View mode - Display metadata as a table
+ */
+const PlanMetadataView: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
+    const record: SubscriptionPlan = useRecordContext();
+    const metadata = record?.metadata || {};
+    const entries = Object.entries(metadata);
+
+    if (!entries.length) {
+        return (
+            <Typography variant="body2" color="text.secondary" sx={{ py: 2 }}>
+                No metadata configured
+            </Typography>
+        );
+    }
+
+    return (
+        <TableContainer component={Paper} variant="outlined">
+            <Table size="small">
+                <TableHead>
+                    <TableRow>
+                        <TableCell><strong>Key</strong></TableCell>
+                        <TableCell><strong>Value</strong></TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {entries.map(([key, value]) => (
+                        <TableRow key={key}>
+                            <TableCell>{key}</TableCell>
+                            <TableCell>
+                                {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};
+
+/**
+ * List mode - Display metadata count
+ */
+const PlanMetadataList: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
+    const record: SubscriptionPlan = useRecordContext();
+    const metadata = record?.metadata || {};
+    const count = Object.keys(metadata).length;
+
+    if (!count) {
+        return <Typography variant="body2" color="text.secondary">—</Typography>;
+    }
+
+    return (
+        <Typography variant="body2">
+            {count} {count === 1 ? 'entry' : 'entries'}
+        </Typography>
+    );
+};
+
+/**
+ * Edit/Create mode - Allow adding/editing/removing metadata entries
+ */
+const PlanMetadataEdit: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
+    const record: SubscriptionPlan = useRecordContext();
+    const { setValue, watch } = useFormContext();
+    
+    const [pairs, setPairs] = useState<KeyValuePair[]>([]);
+    const [newKey, setNewKey] = useState("");
+    const [newValue, setNewValue] = useState("");
+    const [keyError, setKeyError] = useState("");
+
+    // Watch the metadata field for changes
+    const watchedMetadata = watch("metadata");
+
+    // Initialize from record or watched value
+    useEffect(() => {
+        const initialMetadata = watchedMetadata || record?.metadata || {};
+        const initialPairs = Object.entries(initialMetadata).map(([key, value]) => ({
+            key,
+            value: typeof value === 'object' ? JSON.stringify(value) : String(value),
+        }));
+        setPairs(initialPairs);
+    }, [record, watchedMetadata]);
+
+    // Convert pairs to object and update form
+    const updateMetadata = (newPairs: KeyValuePair[]) => {
+        setPairs(newPairs);
+        const metadataObj: Record<string, any> = {};
+        newPairs.forEach(({ key, value }) => {
+            // Try to parse JSON values
+            try {
+                metadataObj[key] = JSON.parse(value);
+            } catch {
+                metadataObj[key] = value;
+            }
+        });
+        setValue("metadata", metadataObj, { shouldDirty: true });
+    };
+
+    const handleAddPair = () => {
+        const trimmedKey = newKey.trim();
+        const trimmedValue = newValue.trim();
+
+        if (!trimmedKey) {
+            setKeyError("Key is required");
+            return;
+        }
+
+        if (pairs.some(p => p.key === trimmedKey)) {
+            setKeyError("Key already exists");
+            return;
+        }
+
+        setKeyError("");
+        updateMetadata([...pairs, { key: trimmedKey, value: trimmedValue }]);
+        setNewKey("");
+        setNewValue("");
+    };
+
+    const handleRemovePair = (keyToRemove: string) => {
+        updateMetadata(pairs.filter(p => p.key !== keyToRemove));
+    };
+
+    const handleUpdateValue = (key: string, newVal: string) => {
+        updateMetadata(pairs.map(p => p.key === key ? { ...p, value: newVal } : p));
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            handleAddPair();
+        }
+    };
+
+    return (
+        <Box>
+            <Typography variant="subtitle2" gutterBottom>
+                Plan Metadata
+            </Typography>
+            <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 2 }}>
+                Add key-value pairs for additional plan configuration
+            </Typography>
+
+            {/* Add new pair input */}
+            <Stack direction="row" spacing={1} sx={{ mb: 2 }} alignItems="flex-start">
+                <TextField
+                    value={newKey}
+                    onChange={(e) => {
+                        setNewKey(e.target.value);
+                        setKeyError("");
+                    }}
+                    onKeyPress={handleKeyPress}
+                    placeholder="Key"
+                    size="small"
+                    error={!!keyError}
+                    helperText={keyError}
+                    sx={{ flex: 1 }}
+                />
+                <TextField
+                    value={newValue}
+                    onChange={(e) => setNewValue(e.target.value)}
+                    onKeyPress={handleKeyPress}
+                    placeholder="Value"
+                    size="small"
+                    sx={{ flex: 2 }}
+                />
+                <IconButton 
+                    onClick={handleAddPair} 
+                    color="primary"
+                    disabled={!newKey.trim()}
+                >
+                    <AddIcon />
+                </IconButton>
+            </Stack>
+
+            {/* Display current pairs */}
+            {pairs.length > 0 ? (
+                <TableContainer component={Paper} variant="outlined">
+                    <Table size="small">
+                        <TableHead>
+                            <TableRow>
+                                <TableCell width="30%"><strong>Key</strong></TableCell>
+                                <TableCell><strong>Value</strong></TableCell>
+                                <TableCell width="50px"></TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {pairs.map(({ key, value }) => (
+                                <TableRow key={key}>
+                                    <TableCell>{key}</TableCell>
+                                    <TableCell>
+                                        <TextField
+                                            value={value}
+                                            onChange={(e) => handleUpdateValue(key, e.target.value)}
+                                            size="small"
+                                            fullWidth
+                                            variant="standard"
+                                        />
+                                    </TableCell>
+                                    <TableCell>
+                                        <IconButton 
+                                            size="small" 
+                                            onClick={() => handleRemovePair(key)}
+                                            color="error"
+                                        >
+                                            <DeleteIcon fontSize="small" />
+                                        </IconButton>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            ) : (
+                <Typography variant="body2" color="text.secondary">
+                    No metadata added yet
+                </Typography>
+            )}
+        </Box>
+    );
+};
+
+/**
+ * Main PlanMetadataSettings component
+ */
+const PlanMetadataSettings: React.FC<IDashAutoAdminCustomFieldComponent> = ({ 
+    method, 
+    attribute, 
+    resourceConfig 
+}) => {
+    switch (method) {
+        case "edit":
+        case "create":
+            return <PlanMetadataEdit method={method} attribute={attribute} resourceConfig={resourceConfig} />;
+        case "view":
+            return <PlanMetadataView method={method} attribute={attribute} resourceConfig={resourceConfig} />;
+        case "list":
+            return <PlanMetadataList method={method} attribute={attribute} resourceConfig={resourceConfig} />;
+        default:
+            return null;
+    }
+};
+
+export default PlanMetadataSettings;