payload-wordpress-migrator 0.0.22

package/dist/components/SimpleFieldMapping.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const SimpleFieldMapping: React.FC<{
+    path: string;
+}>;
+export default SimpleFieldMapping;

package/dist/components/SimpleFieldMapping.js

@@ -0,0 +1,437 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useField } from '@payloadcms/ui';
+import { useRef, useState, useEffect } from 'react';
+
+const SimpleFieldMapping = ({ path })=>{
+    const { setValue, value } = useField({
+        path
+    });
+    const { value: contentTypeValue } = useField({
+        path: 'contentType'
+    });
+    const { value: targetCollectionValue } = useField({
+        path: 'targetCollection'
+    });
+    // Use ref to prevent infinite loops - change to any type to handle different value types
+    const isUpdatingRef = useRef(false);
+    const lastValueRef = useRef('');
+    // Dynamic field options from API
+    const [sourceFields, setSourceFields] = useState([]);
+    const [destinationFields, setDestinationFields] = useState([]);
+    const [fieldMappings, setFieldMappings] = useState([
+        {
+            destinationField: '',
+            sourceField: ''
+        }
+    ]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    // Fetch WordPress content fields
+    const fetchWordPressFields = async (contentType)=>{
+        try {
+            setLoading(true);
+            setError('');
+            const savedConfig = localStorage.getItem('wp-site-config');
+            if (!savedConfig) {
+                throw new Error('WordPress site configuration not found');
+            }
+            const config = JSON.parse(savedConfig);
+            const requestBody = {
+                contentType,
+                wpPassword: config.wpPassword,
+                wpSiteUrl: config.wpSiteUrl,
+                wpUsername: config.wpUsername
+            };
+            const response = await fetch('/api/wordpress/content-fields', {
+                body: JSON.stringify(requestBody),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                method: 'POST'
+            });
+            const result = await response.json();
+            if (response.ok && result.success) {
+                const wpFieldOptions = (result.fields || []).map((field)=>({
+                        type: field.type,
+                        label: `${field.label} (${field.type})${field.custom ? ' *' : ''}`,
+                        path: field.path || field.name,
+                        value: field.path || field.name
+                    }));
+                setSourceFields(wpFieldOptions);
+            } else {
+                console.error('API returned error:', result);
+                throw new Error(result.error || 'Failed to fetch WordPress fields');
+            }
+        } catch (error) {
+            console.error('Error fetching WordPress fields:', error);
+            setError(error instanceof Error ? error.message : 'Failed to fetch WordPress fields');
+            setSourceFields([]);
+        }
+    };
+    // Fetch PayloadCMS collection fields
+    const fetchPayloadFields = async (collectionSlug)=>{
+        try {
+            const response = await fetch(`/api/collections/${collectionSlug}/fields`);
+            const result = await response.json();
+            if (response.ok && result.success) {
+                const payloadFieldOptions = (result.fields || []).map((field)=>({
+                        type: field.type,
+                        label: `${field.label} (${field.type})`,
+                        path: field.path || field.name,
+                        value: field.path || field.name
+                    }));
+                setDestinationFields(payloadFieldOptions);
+            } else {
+                console.error('Payload API returned error:', result);
+                throw new Error(result.error || 'Failed to fetch Payload collection fields');
+            }
+        } catch (error) {
+            console.error('Error fetching Payload fields:', error);
+            setDestinationFields([]);
+        }
+    };
+    // Fetch fields when both content type and target collection are selected
+    useEffect(()=>{
+        const fetchFields = async ()=>{
+            if (contentTypeValue && targetCollectionValue) {
+                setLoading(true);
+                try {
+                    await Promise.all([
+                        fetchWordPressFields(contentTypeValue),
+                        fetchPayloadFields(targetCollectionValue)
+                    ]);
+                } catch (error) {
+                    console.error('Error fetching fields:', error);
+                } finally{
+                    setLoading(false);
+                }
+            } else {
+                setSourceFields([]);
+                setDestinationFields([]);
+                setFieldMappings([
+                    {
+                        destinationField: '',
+                        sourceField: ''
+                    }
+                ]);
+                setError('');
+            }
+        };
+        void fetchFields();
+    }, [
+        contentTypeValue,
+        targetCollectionValue
+    ]);
+    // Parse existing field mappings from JSON value - only when value actually changes
+    useEffect(()=>{
+        if (isUpdatingRef.current) {
+            return;
+        } // Prevent processing our own updates
+        // Convert value to string for comparison
+        const currentValue = typeof value === 'string' ? value : JSON.stringify(value || '');
+        if (value && currentValue !== lastValueRef.current) {
+            try {
+                const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+                if (parsed && Array.isArray(parsed.fieldMappings)) {
+                    setFieldMappings(parsed.fieldMappings);
+                }
+                lastValueRef.current = currentValue;
+            } catch (error) {
+                console.warn('Failed to parse field mappings:', error);
+            }
+        }
+    }, [
+        value
+    ]);
+    // Function to update parent value without causing loops
+    const updateParentValue = (mappings)=>{
+        const newValue = JSON.stringify({
+            contentType: contentTypeValue,
+            fieldMappings: mappings,
+            targetCollection: targetCollectionValue
+        });
+        // Prevent infinite loops
+        if (newValue !== lastValueRef.current && !isUpdatingRef.current) {
+            isUpdatingRef.current = true;
+            setValue(newValue);
+            lastValueRef.current = newValue;
+            // Reset the flag after a short delay
+            setTimeout(()=>{
+                isUpdatingRef.current = false;
+            }, 100);
+        }
+    };
+    // Add new mapping row
+    const handleAddMapping = ()=>{
+        const newMappings = [
+            ...fieldMappings,
+            {
+                destinationField: '',
+                sourceField: ''
+            }
+        ];
+        setFieldMappings(newMappings);
+        updateParentValue(newMappings);
+    };
+    // Remove mapping row
+    const handleRemoveMapping = (idx)=>{
+        if (fieldMappings.length <= 1) {
+            return;
+        } // Keep at least one mapping
+        const newMappings = fieldMappings.filter((_, i)=>i !== idx);
+        setFieldMappings(newMappings);
+        updateParentValue(newMappings);
+    };
+    // Update mapping
+    const handleChange = (idx, field, newValue)=>{
+        const newMappings = fieldMappings.map((mapping, i)=>i === idx ? {
+                ...mapping,
+                [field]: newValue
+            } : mapping);
+        setFieldMappings(newMappings);
+        updateParentValue(newMappings);
+    };
+    // Filter dropdown options to exclude already-mapped fields (except for current row)
+    const getFilteredOptions = (options, field, idx)=>{
+        const used = fieldMappings.map((m, i)=>i !== idx ? m[field] : null).filter(Boolean);
+        return options.filter((opt)=>!used.includes(opt.value));
+    };
+    if (!contentTypeValue || !targetCollectionValue) {
+        return /*#__PURE__*/ jsxs("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ jsx("label", {
+                    style: {
+                        color: 'var(--theme-elevation-700)',
+                        fontSize: '14px',
+                        fontWeight: '600'
+                    },
+                    children: "Field Mapping Configuration"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        backgroundColor: 'var(--theme-elevation-50)',
+                        border: '1px solid var(--theme-elevation-200)',
+                        borderRadius: '4px',
+                        color: 'var(--theme-elevation-600)',
+                        padding: '1rem',
+                        textAlign: 'center'
+                    },
+                    children: 'Please select both "Content Type to Migrate" and "Target Payload Collection" to configure field mappings.'
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem'
+        },
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    justifyContent: 'space-between'
+                },
+                children: [
+                    /*#__PURE__*/ jsx("label", {
+                        style: {
+                            color: 'var(--theme-elevation-700)',
+                            fontSize: '14px',
+                            fontWeight: '600'
+                        },
+                        children: "Field Mapping Configuration"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        disabled: loading,
+                        onClick: handleAddMapping,
+                        style: {
+                            backgroundColor: loading ? 'var(--theme-elevation-200)' : 'var(--theme-success-600)',
+                            border: 'none',
+                            borderRadius: '4px',
+                            color: loading ? 'var(--theme-elevation-500)' : 'white',
+                            cursor: loading ? 'not-allowed' : 'pointer',
+                            fontSize: '12px',
+                            fontWeight: '500',
+                            padding: '0.5rem 1rem'
+                        },
+                        type: "button",
+                        children: "Add Mapping"
+                    })
+                ]
+            }),
+            loading && /*#__PURE__*/ jsx("div", {
+                style: {
+                    backgroundColor: 'var(--theme-elevation-50)',
+                    border: '1px solid var(--theme-elevation-200)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-elevation-600)',
+                    padding: '1rem',
+                    textAlign: 'center'
+                },
+                children: "Loading field schemas from WordPress and PayloadCMS..."
+            }),
+            error && /*#__PURE__*/ jsxs("div", {
+                style: {
+                    backgroundColor: 'var(--theme-error-50)',
+                    border: '1px solid var(--theme-error-200)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-error-700)',
+                    padding: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ jsx("strong", {
+                        children: "Error:"
+                    }),
+                    " ",
+                    error
+                ]
+            }),
+            !loading && !error && sourceFields.length === 0 && destinationFields.length === 0 && /*#__PURE__*/ jsx("div", {
+                style: {
+                    backgroundColor: 'var(--theme-elevation-50)',
+                    border: '1px solid var(--theme-elevation-200)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-elevation-600)',
+                    padding: '1rem',
+                    textAlign: 'center'
+                },
+                children: "No fields found. Please check your WordPress connection and selected content type."
+            }),
+            !loading && !error && (sourceFields.length > 0 || destinationFields.length > 0) && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    fieldMappings.length === 0 && /*#__PURE__*/ jsx("div", {
+                        style: {
+                            backgroundColor: 'var(--theme-elevation-50)',
+                            border: '1px solid var(--theme-elevation-200)',
+                            borderRadius: '4px',
+                            color: 'var(--theme-elevation-600)',
+                            padding: '1rem',
+                            textAlign: 'center'
+                        },
+                        children: 'No field mappings configured. Click "Add Mapping" to start.'
+                    }),
+                    fieldMappings.map((mapping, idx)=>/*#__PURE__*/ jsxs("div", {
+                            style: {
+                                alignItems: 'center',
+                                backgroundColor: 'var(--theme-elevation-0)',
+                                border: '1px solid var(--theme-elevation-200)',
+                                borderRadius: '4px',
+                                display: 'grid',
+                                gap: '0.75rem',
+                                gridTemplateColumns: '1fr auto 1fr auto',
+                                padding: '1rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsxs("select", {
+                                    onChange: (e)=>handleChange(idx, 'sourceField', e.target.value),
+                                    style: {
+                                        backgroundColor: 'var(--theme-elevation-0)',
+                                        border: '1px solid var(--theme-elevation-200)',
+                                        borderRadius: '4px',
+                                        fontSize: '14px',
+                                        padding: '0.5rem'
+                                    },
+                                    value: mapping.sourceField,
+                                    children: [
+                                        /*#__PURE__*/ jsx("option", {
+                                            value: "",
+                                            children: "Select WordPress field..."
+                                        }),
+                                        getFilteredOptions(sourceFields, 'sourceField', idx).map((opt, optIdx)=>/*#__PURE__*/ jsx("option", {
+                                                value: opt.value,
+                                                children: opt.label
+                                            }, `source-${idx}-${opt.value}-${optIdx}`))
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        color: 'var(--theme-elevation-400)',
+                                        fontSize: '18px',
+                                        fontWeight: 'bold'
+                                    },
+                                    children: "→"
+                                }),
+                                /*#__PURE__*/ jsxs("select", {
+                                    onChange: (e)=>handleChange(idx, 'destinationField', e.target.value),
+                                    style: {
+                                        backgroundColor: 'var(--theme-elevation-0)',
+                                        border: '1px solid var(--theme-elevation-200)',
+                                        borderRadius: '4px',
+                                        fontSize: '14px',
+                                        padding: '0.5rem'
+                                    },
+                                    value: mapping.destinationField,
+                                    children: [
+                                        /*#__PURE__*/ jsx("option", {
+                                            value: "",
+                                            children: "Select Payload field..."
+                                        }),
+                                        getFilteredOptions(destinationFields, 'destinationField', idx).map((opt, optIdx)=>/*#__PURE__*/ jsx("option", {
+                                                value: opt.value,
+                                                children: opt.label
+                                            }, `dest-${idx}-${opt.value}-${optIdx}`))
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("button", {
+                                    disabled: fieldMappings.length <= 1,
+                                    onClick: ()=>handleRemoveMapping(idx),
+                                    style: {
+                                        backgroundColor: fieldMappings.length <= 1 ? 'var(--theme-elevation-200)' : 'var(--theme-error-600)',
+                                        border: 'none',
+                                        borderRadius: '4px',
+                                        color: fieldMappings.length <= 1 ? 'var(--theme-elevation-500)' : 'white',
+                                        cursor: fieldMappings.length <= 1 ? 'not-allowed' : 'pointer',
+                                        fontSize: '12px',
+                                        fontWeight: '500',
+                                        minWidth: '60px',
+                                        padding: '0.5rem'
+                                    },
+                                    type: "button",
+                                    children: "Remove"
+                                })
+                            ]
+                        }, idx))
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    color: 'var(--theme-elevation-500)',
+                    fontSize: '12px',
+                    fontStyle: 'italic',
+                    marginTop: '0.5rem'
+                },
+                children: [
+                    "Map WordPress fields to their corresponding Payload fields. Each field can only be mapped once. Fields marked with * are custom fields (ACF/Meta).",
+                    sourceFields.length > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("br", {}),
+                            /*#__PURE__*/ jsx("strong", {
+                                children: "Available WordPress fields:"
+                            }),
+                            " ",
+                            sourceFields.length,
+                            " |",
+                            ' ',
+                            /*#__PURE__*/ jsx("strong", {
+                                children: "Available Payload fields:"
+                            }),
+                            " ",
+                            destinationFields.length
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { SimpleFieldMapping as default };
+//# sourceMappingURL=SimpleFieldMapping.js.map

package/dist/components/SimpleFieldMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleFieldMapping.js","sources":["../../src/components/SimpleFieldMapping.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useEffect, useRef, useState } from 'react'\n\ntype FieldMapping = {\n  destinationField: string\n  sourceField: string\n}\n\ntype Option = {\n  label: string\n  path?: string\n  type?: string\n  value: string\n}\n\nconst SimpleFieldMapping: React.FC<{ path: string }> = ({ path }) => {\n  const { setValue, value } = useField({ path })\n  const { value: contentTypeValue } = useField({ path: 'contentType' })\n  const { value: targetCollectionValue } = useField({ path: 'targetCollection' })\n\n  // Use ref to prevent infinite loops - change to any type to handle different value types\n  const isUpdatingRef = useRef(false)\n  const lastValueRef = useRef<any>('')\n\n  // Dynamic field options from API\n  const [sourceFields, setSourceFields] = useState<Option[]>([])\n  const [destinationFields, setDestinationFields] = useState<Option[]>([])\n  const [fieldMappings, setFieldMappings] = useState<FieldMapping[]>([\n    { destinationField: '', sourceField: '' },\n  ])\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState('')\n\n  // Fetch WordPress content fields\n  const fetchWordPressFields = async (contentType: string) => {\n    try {\n      setLoading(true)\n      setError('')\n\n      const savedConfig = localStorage.getItem('wp-site-config')\n      if (!savedConfig) {\n        throw new Error('WordPress site configuration not found')\n      }\n\n      const config = JSON.parse(savedConfig)\n\n      const requestBody = {\n        contentType,\n        wpPassword: config.wpPassword,\n        wpSiteUrl: config.wpSiteUrl,\n        wpUsername: config.wpUsername,\n      }\n\n      const response = await fetch('/api/wordpress/content-fields', {\n        body: JSON.stringify(requestBody),\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n      const result = await response.json()\n\n      if (response.ok && result.success) {\n        const wpFieldOptions = (result.fields || []).map((field: any) => ({\n          type: field.type,\n          label: `${field.label} (${field.type})${field.custom ? ' *' : ''}`,\n          path: field.path || field.name,\n          value: field.path || field.name,\n        }))\n        setSourceFields(wpFieldOptions)\n      } else {\n        console.error('API returned error:', result)\n        throw new Error(result.error || 'Failed to fetch WordPress fields')\n      }\n    } catch (error) {\n      console.error('Error fetching WordPress fields:', error)\n      setError(error instanceof Error ? error.message : 'Failed to fetch WordPress fields')\n      setSourceFields([])\n    }\n  }\n\n  // Fetch PayloadCMS collection fields\n  const fetchPayloadFields = async (collectionSlug: string) => {\n    try {\n      const response = await fetch(`/api/collections/${collectionSlug}/fields`)\n\n      const result = await response.json()\n\n      if (response.ok && result.success) {\n        const payloadFieldOptions = (result.fields || []).map((field: any) => ({\n          type: field.type,\n          label: `${field.label} (${field.type})`,\n          path: field.path || field.name,\n          value: field.path || field.name,\n        }))\n        setDestinationFields(payloadFieldOptions)\n      } else {\n        console.error('Payload API returned error:', result)\n        throw new Error(result.error || 'Failed to fetch Payload collection fields')\n      }\n    } catch (error) {\n      console.error('Error fetching Payload fields:', error)\n      setDestinationFields([])\n    }\n  }\n\n  // Fetch fields when both content type and target collection are selected\n  useEffect(() => {\n    const fetchFields = async () => {\n      if (contentTypeValue && targetCollectionValue) {\n        setLoading(true)\n        try {\n          await Promise.all([\n            fetchWordPressFields(contentTypeValue as string),\n            fetchPayloadFields(targetCollectionValue as string),\n          ])\n        } catch (error) {\n          console.error('Error fetching fields:', error)\n        } finally {\n          setLoading(false)\n        }\n      } else {\n        setSourceFields([])\n        setDestinationFields([])\n        setFieldMappings([{ destinationField: '', sourceField: '' }])\n        setError('')\n      }\n    }\n\n    void fetchFields()\n  }, [contentTypeValue, targetCollectionValue])\n\n  // Parse existing field mappings from JSON value - only when value actually changes\n  useEffect(() => {\n    if (isUpdatingRef.current) {\n      return\n    } // Prevent processing our own updates\n\n    // Convert value to string for comparison\n    const currentValue = typeof value === 'string' ? value : JSON.stringify(value || '')\n\n    if (value && currentValue !== lastValueRef.current) {\n      try {\n        const parsed = typeof value === 'string' ? JSON.parse(value) : value\n        if (parsed && Array.isArray(parsed.fieldMappings)) {\n          setFieldMappings(parsed.fieldMappings)\n        }\n        lastValueRef.current = currentValue\n      } catch (error) {\n        console.warn('Failed to parse field mappings:', error)\n      }\n    }\n  }, [value])\n\n  // Function to update parent value without causing loops\n  const updateParentValue = (mappings: FieldMapping[]) => {\n    const newValue = JSON.stringify({\n      contentType: contentTypeValue,\n      fieldMappings: mappings,\n      targetCollection: targetCollectionValue,\n    })\n\n    // Prevent infinite loops\n    if (newValue !== lastValueRef.current && !isUpdatingRef.current) {\n      isUpdatingRef.current = true\n      setValue(newValue)\n      lastValueRef.current = newValue\n\n      // Reset the flag after a short delay\n      setTimeout(() => {\n        isUpdatingRef.current = false\n      }, 100)\n    }\n  }\n\n  // Add new mapping row\n  const handleAddMapping = () => {\n    const newMappings = [...fieldMappings, { destinationField: '', sourceField: '' }]\n    setFieldMappings(newMappings)\n    updateParentValue(newMappings)\n  }\n\n  // Remove mapping row\n  const handleRemoveMapping = (idx: number) => {\n    if (fieldMappings.length <= 1) {\n      return\n    } // Keep at least one mapping\n\n    const newMappings = fieldMappings.filter((_, i) => i !== idx)\n    setFieldMappings(newMappings)\n    updateParentValue(newMappings)\n  }\n\n  // Update mapping\n  const handleChange = (idx: number, field: keyof FieldMapping, newValue: string) => {\n    const newMappings = fieldMappings.map((mapping, i) =>\n      i === idx ? { ...mapping, [field]: newValue } : mapping,\n    )\n    setFieldMappings(newMappings)\n    updateParentValue(newMappings)\n  }\n\n  // Filter dropdown options to exclude already-mapped fields (except for current row)\n  const getFilteredOptions = (options: Option[], field: keyof FieldMapping, idx: number) => {\n    const used = fieldMappings\n      .map((m, i) => (i !== idx ? m[field] : null))\n      .filter(Boolean) as string[]\n    return options.filter((opt) => !used.includes(opt.value))\n  }\n\n  if (!contentTypeValue || !targetCollectionValue) {\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n        <label style={{ color: 'var(--theme-elevation-700)', fontSize: '14px', fontWeight: '600' }}>\n          Field Mapping Configuration\n        </label>\n        <div\n          style={{\n            backgroundColor: 'var(--theme-elevation-50)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-elevation-600)',\n            padding: '1rem',\n            textAlign: 'center',\n          }}\n        >\n          Please select both \"Content Type to Migrate\" and \"Target Payload Collection\" to configure\n          field mappings.\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n      <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>\n        <label style={{ color: 'var(--theme-elevation-700)', fontSize: '14px', fontWeight: '600' }}>\n          Field Mapping Configuration\n        </label>\n        <button\n          disabled={loading}\n          onClick={handleAddMapping}\n          style={{\n            backgroundColor: loading ? 'var(--theme-elevation-200)' : 'var(--theme-success-600)',\n            border: 'none',\n            borderRadius: '4px',\n            color: loading ? 'var(--theme-elevation-500)' : 'white',\n            cursor: loading ? 'not-allowed' : 'pointer',\n            fontSize: '12px',\n            fontWeight: '500',\n            padding: '0.5rem 1rem',\n          }}\n          type=\"button\"\n        >\n          Add Mapping\n        </button>\n      </div>\n\n      {loading && (\n        <div\n          style={{\n            backgroundColor: 'var(--theme-elevation-50)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-elevation-600)',\n            padding: '1rem',\n            textAlign: 'center',\n          }}\n        >\n          Loading field schemas from WordPress and PayloadCMS...\n        </div>\n      )}\n\n      {error && (\n        <div\n          style={{\n            backgroundColor: 'var(--theme-error-50)',\n            border: '1px solid var(--theme-error-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-error-700)',\n            padding: '1rem',\n          }}\n        >\n          <strong>Error:</strong> {error}\n        </div>\n      )}\n\n      {!loading && !error && sourceFields.length === 0 && destinationFields.length === 0 && (\n        <div\n          style={{\n            backgroundColor: 'var(--theme-elevation-50)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-elevation-600)',\n            padding: '1rem',\n            textAlign: 'center',\n          }}\n        >\n          No fields found. Please check your WordPress connection and selected content type.\n        </div>\n      )}\n\n      {!loading && !error && (sourceFields.length > 0 || destinationFields.length > 0) && (\n        <>\n          {fieldMappings.length === 0 && (\n            <div\n              style={{\n                backgroundColor: 'var(--theme-elevation-50)',\n                border: '1px solid var(--theme-elevation-200)',\n                borderRadius: '4px',\n                color: 'var(--theme-elevation-600)',\n                padding: '1rem',\n                textAlign: 'center',\n              }}\n            >\n              No field mappings configured. Click \"Add Mapping\" to start.\n            </div>\n          )}\n\n          {fieldMappings.map((mapping, idx) => (\n            <div\n              key={idx}\n              style={{\n                alignItems: 'center',\n                backgroundColor: 'var(--theme-elevation-0)',\n                border: '1px solid var(--theme-elevation-200)',\n                borderRadius: '4px',\n                display: 'grid',\n                gap: '0.75rem',\n                gridTemplateColumns: '1fr auto 1fr auto',\n                padding: '1rem',\n              }}\n            >\n              <select\n                onChange={(e) => handleChange(idx, 'sourceField', e.target.value)}\n                style={{\n                  backgroundColor: 'var(--theme-elevation-0)',\n                  border: '1px solid var(--theme-elevation-200)',\n                  borderRadius: '4px',\n                  fontSize: '14px',\n                  padding: '0.5rem',\n                }}\n                value={mapping.sourceField}\n              >\n                <option value=\"\">Select WordPress field...</option>\n                {getFilteredOptions(sourceFields, 'sourceField', idx).map((opt, optIdx) => (\n                  <option key={`source-${idx}-${opt.value}-${optIdx}`} value={opt.value}>\n                    {opt.label}\n                  </option>\n                ))}\n              </select>\n\n              <span\n                style={{\n                  color: 'var(--theme-elevation-400)',\n                  fontSize: '18px',\n                  fontWeight: 'bold',\n                }}\n              >\n                →\n              </span>\n\n              <select\n                onChange={(e) => handleChange(idx, 'destinationField', e.target.value)}\n                style={{\n                  backgroundColor: 'var(--theme-elevation-0)',\n                  border: '1px solid var(--theme-elevation-200)',\n                  borderRadius: '4px',\n                  fontSize: '14px',\n                  padding: '0.5rem',\n                }}\n                value={mapping.destinationField}\n              >\n                <option value=\"\">Select Payload field...</option>\n                {getFilteredOptions(destinationFields, 'destinationField', idx).map(\n                  (opt, optIdx) => (\n                    <option key={`dest-${idx}-${opt.value}-${optIdx}`} value={opt.value}>\n                      {opt.label}\n                    </option>\n                  ),\n                )}\n              </select>\n\n              <button\n                disabled={fieldMappings.length <= 1}\n                onClick={() => handleRemoveMapping(idx)}\n                style={{\n                  backgroundColor:\n                    fieldMappings.length <= 1\n                      ? 'var(--theme-elevation-200)'\n                      : 'var(--theme-error-600)',\n                  border: 'none',\n                  borderRadius: '4px',\n                  color: fieldMappings.length <= 1 ? 'var(--theme-elevation-500)' : 'white',\n                  cursor: fieldMappings.length <= 1 ? 'not-allowed' : 'pointer',\n                  fontSize: '12px',\n                  fontWeight: '500',\n                  minWidth: '60px',\n                  padding: '0.5rem',\n                }}\n                type=\"button\"\n              >\n                Remove\n              </button>\n            </div>\n          ))}\n        </>\n      )}\n\n      <div\n        style={{\n          color: 'var(--theme-elevation-500)',\n          fontSize: '12px',\n          fontStyle: 'italic',\n          marginTop: '0.5rem',\n        }}\n      >\n        Map WordPress fields to their corresponding Payload fields. Each field can only be mapped\n        once. Fields marked with * are custom fields (ACF/Meta).\n        {sourceFields.length > 0 && (\n          <>\n            <br />\n            <strong>Available WordPress fields:</strong> {sourceFields.length} |{' '}\n            <strong>Available Payload fields:</strong> {destinationFields.length}\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default SimpleFieldMapping\n"],"names":["path","contentType","wpPassword","wpSiteUrl","wpUsername","type","label","value","setError","setSourceFields","setDestinationFields","contentTypeValue","targetCollectionValue","setFieldMappings","lastValueRef","isUpdatingRef","fieldMappings","backgroundColor","color","cursor","loading","error","opt","onClick","idx","sourceFields","destinationFields"],"mappings":";;;;;AAiBA;AACE;AAAuCA;AAAK;AAC5C;;AAAmE;AACnE;;AAA6E;;AAG7E;AACA;;AAGA;AACA;AACA;AACE;;;AAAwC;AACzC;AACD;AACA;;AAGA;;;;;AAMI;AACE;AACF;;AAIA;AACEC;AACAC;AACAC;AACAC;AACF;;;;;AAME;;AAEF;;AAGA;AACE;AACEC;AACAC;AACAN;AACAO;;;;;AAKF;AACF;AACF;;AAEEC;AACAC;AACF;AACF;;AAGA;;;;AAMI;AACE;AACEJ;;AAEAL;AACAO;;;;;AAKF;AACF;AACF;;AAEEG;AACF;AACF;;;AAIE;AACE;;;;;;AAMK;AACH;;;;AAIA;;AAEAD;AACAC;;AACkB;;;AAAwC;AAAE;;AAE9D;AACF;;;AAGEC;AAAkBC;AAAsB;;;;AAKxC;AACF;;;AAKA;;AAEI;AACA;AACEC;AACF;AACAC;AACF;;AAEA;AACF;;AACEP;AAAM;;AAGV;;;;;AAKE;;AAGA;AACEQ;;AAEAD;;;AAIEC;;AAEJ;AACF;;AAGA;AACE;AAAwBC;AAAe;;;AAAwC;AAAE;;;AAGnF;;AAGA;;AAEI;AACF;AAEA;;;AAGF;;;;AAKkB;AAAY;;;;AAI9B;;;AAIE;;AAIF;;AAGE;;;;;AACsE;;;;;;;AACuB;AAAG;;;;;;;;;;AAW1F;AACD;;;;AAMP;AAEA;;;;;AACsE;;;;;;;AACmB;;;;;;;AACM;AAAG;;;;;;AAOxFC;;;AAGAC;AACAC;;;;AAIF;;AAED;;;;AAKFC;;;;;;;;AASG;AACD;;AAKFC;;;;;;;AAQG;;;AAEQ;;AAAe;AAAEA;;;;;;;;;;;AAazB;AACD;;AAKF;;;;;;;;;;AAWO;AACD;;AAKFL;;;;;;;;;;AAYG;;;;;;;;;;AAUE;AACAT;;;;AAEiB;;;AAEsCA;AAClDe;;;;;;;;;AAUL;AACD;;;;;;;;;;AAYC;AACAf;;;;AAEiB;;;AAGsCA;AAChDe;;;;;;AAQPC;;AAEEN;;;AAMAC;AACAC;;;;;AAKF;;AAED;;;AAhFIK;;;;;;;;;AA8FX;;AACD;;;;;AAMa;;AAAoC;AAAEC;AAAoB;AAAG;;AAC7D;;AAAkC;AAAEC;;;;;;;AAMxD;;"}

package/dist/components/dashboard/JobActionButtons.d.ts

@@ -0,0 +1,8 @@
+import type { JobActionType } from './types';
+export declare const JobActionButtons: ({ jobId, loading, onAction, status, successRate, }: {
+    jobId: string;
+    loading: boolean;
+    onAction: (action: JobActionType, jobId: string) => Promise<void>;
+    status: string;
+    successRate: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/JobActionButtons.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import styles from '../MigrationDashboardClient.module.css';
+
+const JobActionButtons = ({ jobId, loading, onAction, status, successRate })=>{
+    return /*#__PURE__*/ jsxs("div", {
+        className: styles.jobActions,
+        children: [
+            status === 'ready' && /*#__PURE__*/ jsx("button", {
+                className: styles.actionButton,
+                disabled: loading,
+                onClick: ()=>onAction('start', jobId),
+                children: "Start"
+            }),
+            status === 'running' && /*#__PURE__*/ jsx("button", {
+                className: styles.actionButton,
+                onClick: ()=>onAction('pause', jobId),
+                children: "Pause"
+            }),
+            status === 'paused' && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: styles.actionButton,
+                        disabled: loading,
+                        onClick: ()=>onAction('resume', jobId),
+                        children: "Resume"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: `${styles.actionButton} ${styles.restartButton}`,
+                        disabled: loading,
+                        onClick: ()=>onAction('restart', jobId),
+                        title: "Restart entire migration from beginning",
+                        children: "Restart"
+                    })
+                ]
+            }),
+            status === 'failed' && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: `${styles.actionButton} ${styles.retryButton}`,
+                        disabled: loading,
+                        onClick: ()=>onAction('retry', jobId),
+                        children: "Retry"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: `${styles.actionButton} ${styles.rollbackButton}`,
+                        disabled: loading,
+                        onClick: ()=>onAction('rollback', jobId),
+                        title: "Delete all items created by this migration",
+                        children: "Rollback"
+                    })
+                ]
+            }),
+            status === 'completed' && successRate < 100 && /*#__PURE__*/ jsx("button", {
+                className: `${styles.actionButton} ${styles.retryButton}`,
+                disabled: loading,
+                onClick: ()=>onAction('retry', jobId),
+                title: "Retry failed items",
+                children: "Retry Failed"
+            }),
+            status === 'completed' && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: `${styles.actionButton} ${styles.updateButton}`,
+                        disabled: loading,
+                        onClick: ()=>onAction('update', jobId),
+                        title: "Update existing items with new field mappings",
+                        children: "Update"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: `${styles.actionButton} ${styles.restartButton}`,
+                        disabled: loading,
+                        onClick: ()=>onAction('restart', jobId),
+                        title: "Restart entire migration from beginning",
+                        children: "Restart"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: `${styles.actionButton} ${styles.rollbackButton}`,
+                        disabled: loading,
+                        onClick: ()=>onAction('rollback', jobId),
+                        title: "Delete all items created by this migration",
+                        children: "Rollback"
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { JobActionButtons };
+//# sourceMappingURL=JobActionButtons.js.map

package/dist/components/dashboard/JobActionButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JobActionButtons.js","sources":["../../../src/components/dashboard/JobActionButtons.tsx"],"sourcesContent":["'use client'\n\nimport type { JobActionType } from './types'\n\nimport styles from '../MigrationDashboardClient.module.css'\n\nexport const JobActionButtons = ({\n  jobId,\n  loading,\n  onAction,\n  status,\n  successRate,\n}: {\n  jobId: string\n  loading: boolean\n  onAction: (action: JobActionType, jobId: string) => Promise<void>\n  status: string\n  successRate: number\n}) => {\n  return (\n    <div className={styles.jobActions}>\n      {status === 'ready' && (\n        <button\n          className={styles.actionButton}\n          disabled={loading}\n          onClick={() => onAction('start', jobId)}\n        >\n          Start\n        </button>\n      )}\n      {status === 'running' && (\n        <button\n          className={styles.actionButton}\n          onClick={() => onAction('pause', jobId)}\n        >\n          Pause\n        </button>\n      )}\n      {status === 'paused' && (\n        <>\n          <button\n            className={styles.actionButton}\n            disabled={loading}\n            onClick={() => onAction('resume', jobId)}\n          >\n            Resume\n          </button>\n          <button\n            className={`${styles.actionButton} ${styles.restartButton}`}\n            disabled={loading}\n            onClick={() => onAction('restart', jobId)}\n            title=\"Restart entire migration from beginning\"\n          >\n            Restart\n          </button>\n        </>\n      )}\n      {status === 'failed' && (\n        <>\n          <button\n            className={`${styles.actionButton} ${styles.retryButton}`}\n            disabled={loading}\n            onClick={() => onAction('retry', jobId)}\n          >\n            Retry\n          </button>\n          <button\n            className={`${styles.actionButton} ${styles.rollbackButton}`}\n            disabled={loading}\n            onClick={() => onAction('rollback', jobId)}\n            title=\"Delete all items created by this migration\"\n          >\n            Rollback\n          </button>\n        </>\n      )}\n      {status === 'completed' && successRate < 100 && (\n        <button\n          className={`${styles.actionButton} ${styles.retryButton}`}\n          disabled={loading}\n          onClick={() => onAction('retry', jobId)}\n          title=\"Retry failed items\"\n        >\n          Retry Failed\n        </button>\n      )}\n      {status === 'completed' && (\n        <>\n          <button\n            className={`${styles.actionButton} ${styles.updateButton}`}\n            disabled={loading}\n            onClick={() => onAction('update', jobId)}\n            title=\"Update existing items with new field mappings\"\n          >\n            Update\n          </button>\n          <button\n            className={`${styles.actionButton} ${styles.restartButton}`}\n            disabled={loading}\n            onClick={() => onAction('restart', jobId)}\n            title=\"Restart entire migration from beginning\"\n          >\n            Restart\n          </button>\n          <button\n            className={`${styles.actionButton} ${styles.rollbackButton}`}\n            disabled={loading}\n            onClick={() => onAction('rollback', jobId)}\n            title=\"Delete all items created by this migration\"\n          >\n            Rollback\n          </button>\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":["className","status"],"mappings":";;;;AAMO;AAaL;AACOA;;AACFC;AAEGD;;;AAGD;;AAIFC;AAEGD;;AAED;;AAIFC;;;AAGKD;;;AAGD;;;;;;;AAQA;;;;AAKJC;;;;;;AAMI;;;;;;;AAQA;;;;;;;;;AAWF;;AAIFA;;;;;;;AAOI;;;;;;;AAQA;;;;;;;AAQA;;;;;;AAOX;;"}

package/dist/components/dashboard/JobsTable.d.ts

@@ -0,0 +1,6 @@
+import type { JobActionType, MigrationSummary } from './types';
+export declare const JobsTable: ({ jobs, loading, onJobAction, }: {
+    jobs: MigrationSummary["recentJobs"];
+    loading: boolean;
+    onJobAction: (action: JobActionType, jobId: string) => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;