Improve backend

frontend/src/components/domain/unified-wizard/wizards/SupplierWizard.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
 import { Building2, CheckCircle2, Loader2 } from 'lucide-react';
 import { useTenant } from '../../../../stores/tenant.store';
@@ -8,6 +9,7 @@ import { AdvancedOptionsSection } from '../../../ui/AdvancedOptionsSection';
 import Tooltip from '../../../ui/Tooltip/Tooltip';
 
 const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange, onComplete }) => {
+  const { t } = useTranslation('wizards');
   // New architecture: access data from dataRef.current
   const data = dataRef?.current || {};
   const { currentTenant } = useTenant();
@@ -26,8 +28,11 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
   }, [data.name]);
 
   const handleCreateSupplier = async () => {
+    const i18next = (await import('i18next')).default;
+
     if (!currentTenant?.id) {
-      setError('Could not obtain tenant information');
+      const errorMsg = i18next.t('wizards:supplier.messages.errorObtainingTenantInfo');
+      setError(errorMsg);
       return;
     }
 
@@ -69,11 +74,11 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
       };
 
       await suppliersService.createSupplier(currentTenant.id, payload);
-      showToast.success('Supplier created successfully');
+      showToast.success(i18next.t('wizards:supplier.messages.supplierCreatedSuccessfully'));
       // Let the wizard handle completion via the Next/Complete button
     } catch (err: any) {
       console.error('Error creating supplier:', err);
-      const errorMessage = err.response?.data?.detail || 'Error creating supplier';
+      const errorMessage = err.response?.data?.detail || i18next.t('wizards:supplier.messages.errorCreatingSupplier');
       setError(errorMessage);
       showToast.error(errorMessage);
     } finally {
@@ -85,8 +90,8 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
     <div className="space-y-6">
       <div className="text-center pb-4 border-b border-[var(--border-primary)]">
         <Building2 className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
-        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Supplier Details</h3>
-        <p className="text-sm text-[var(--text-secondary)]">Essential supplier information</p>
+        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">{t('supplier.supplierDetails')}</h3>
+        <p className="text-sm text-[var(--text-secondary)]">{t('supplier.subtitle')}</p>
       </div>
 
       {error && (
@@ -100,21 +105,21 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="md:col-span-2">
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Supplier Name *
+              {t('supplier.fields.name')} *
             </label>
             <input
               type="text"
               value={data.name}
               onChange={(e) => handleFieldChange('name', e.target.value)}
-              placeholder="e.g., Premium Flour Suppliers Ltd."
+              placeholder={t('supplier.fields.namePlaceholder')}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2 inline-flex items-center gap-2">
-              Supplier Type *
-              <Tooltip content="Category of products/services this supplier provides">
+              {t('supplier.fields.supplierType')} *
+              <Tooltip content={t('supplier.fields.supplierTypeTooltip')}>
                 <span />
               </Tooltip>
             </label>
@@ -123,60 +128,60 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
               onChange={(e) => handleFieldChange('supplierType', e.target.value)}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             >
-              <option value="ingredients">Ingredients</option>
-              <option value="packaging">Packaging</option>
-              <option value="equipment">Equipment</option>
-              <option value="services">Services</option>
-              <option value="utilities">Utilities</option>
-              <option value="multi">Multi</option>
+              <option value="ingredients">{t('supplier.supplierTypes.ingredients')}</option>
+              <option value="packaging">{t('supplier.supplierTypes.packaging')}</option>
+              <option value="equipment">{t('supplier.supplierTypes.equipment')}</option>
+              <option value="services">{t('supplier.supplierTypes.services')}</option>
+              <option value="utilities">{t('supplier.supplierTypes.utilities')}</option>
+              <option value="multi">{t('supplier.supplierTypes.multi')}</option>
             </select>
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Status *
+              {t('supplier.fields.status')} *
             </label>
             <select
               value={data.status}
               onChange={(e) => handleFieldChange('status', e.target.value)}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             >
-              <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
-              <option value="pending_approval">Pending Approval</option>
-              <option value="suspended">Suspended</option>
-              <option value="blacklisted">Blacklisted</option>
+              <option value="active">{t('supplier.statuses.active')}</option>
+              <option value="inactive">{t('supplier.statuses.inactive')}</option>
+              <option value="pending_approval">{t('supplier.statuses.pending_approval')}</option>
+              <option value="suspended">{t('supplier.statuses.suspended')}</option>
+              <option value="blacklisted">{t('supplier.statuses.blacklisted')}</option>
             </select>
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Payment Terms *
+              {t('supplier.fields.paymentTerms')} *
             </label>
             <select
               value={data.paymentTerms}
               onChange={(e) => handleFieldChange('paymentTerms', e.target.value)}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             >
-              <option value="cod">COD (Cash on Delivery)</option>
-              <option value="net_15">Net 15</option>
-              <option value="net_30">Net 30</option>
-              <option value="net_45">Net 45</option>
-              <option value="net_60">Net 60</option>
-              <option value="prepaid">Prepaid</option>
-              <option value="credit_terms">Credit Terms</option>
+              <option value="cod">{t('supplier.paymentTerms.cod')}</option>
+              <option value="net_15">{t('supplier.paymentTerms.net_15')}</option>
+              <option value="net_30">{t('supplier.paymentTerms.net_30')}</option>
+              <option value="net_45">{t('supplier.paymentTerms.net_45')}</option>
+              <option value="net_60">{t('supplier.paymentTerms.net_60')}</option>
+              <option value="prepaid">{t('supplier.paymentTerms.prepaid')}</option>
+              <option value="credit_terms">{t('supplier.paymentTerms.credit_terms')}</option>
             </select>
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Currency *
+              {t('supplier.fields.currency')} *
             </label>
             <input
               type="text"
               value={data.currency}
               onChange={(e) => handleFieldChange('currency', e.target.value)}
-              placeholder="EUR"
+              placeholder={t('supplier.fields.currencyPlaceholder')}
               maxLength={3}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
@@ -184,8 +189,8 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2 inline-flex items-center gap-2">
-              Standard Lead Time (days) *
-              <Tooltip content="Typical delivery time from order to delivery">
+              {t('supplier.fields.leadTime')} *
+              <Tooltip content={t('supplier.fields.leadTimeTooltip')}>
                 <span />
               </Tooltip>
             </label>
@@ -203,39 +208,39 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Contact Person
+              {t('supplier.fields.contactPerson')}
             </label>
             <input
               type="text"
               value={data.contactPerson}
               onChange={(e) => handleFieldChange('contactPerson', e.target.value)}
-              placeholder="John Doe"
+              placeholder={t('supplier.fields.contactPersonPlaceholder')}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Email
+              {t('supplier.fields.email')}
             </label>
             <input
               type="email"
               value={data.email}
               onChange={(e) => handleFieldChange('email', e.target.value)}
-              placeholder="contact@supplier.com"
+              placeholder={t('supplier.fields.emailPlaceholder')}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Phone
+              {t('supplier.fields.phone')}
             </label>
             <input
               type="tel"
               value={data.phone}
               onChange={(e) => handleFieldChange('phone', e.target.value)}
-              placeholder="+1 234 567 8900"
+              placeholder={t('supplier.fields.phonePlaceholder')}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
@@ -244,163 +249,163 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
 
       {/* Advanced Options */}
       <AdvancedOptionsSection
-        title="Advanced Options"
-        description="Additional supplier information and business details"
+        title={t('supplier.advancedOptionsTitle')}
+        description={t('supplier.advancedOptionsDescription')}
       >
         <div className="space-y-4">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Supplier Code
+                {t('supplier.fields.supplierCode')}
               </label>
               <input
                 type="text"
                 value={data.supplierCode}
                 onChange={(e) => handleFieldChange('supplierCode', e.target.value)}
-                placeholder="SUP-001"
+                placeholder={t('supplier.fields.supplierCodePlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Mobile
+                {t('supplier.fields.mobile')}
               </label>
               <input
                 type="tel"
                 value={data.mobile}
                 onChange={(e) => handleFieldChange('mobile', e.target.value)}
-                placeholder="+1 234 567 8900"
+                placeholder={t('supplier.fields.mobilePlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Tax ID
+                {t('supplier.fields.taxId')}
               </label>
               <input
                 type="text"
                 value={data.taxId}
                 onChange={(e) => handleFieldChange('taxId', e.target.value)}
-                placeholder="VAT/Tax ID"
+                placeholder={t('supplier.fields.taxIdPlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Registration Number
+                {t('supplier.fields.registrationNumber')}
               </label>
               <input
                 type="text"
                 value={data.registrationNumber}
                 onChange={(e) => handleFieldChange('registrationNumber', e.target.value)}
-                placeholder="Business registration number"
+                placeholder={t('supplier.fields.registrationNumberPlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div className="md:col-span-2">
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Website
+                {t('supplier.fields.website')}
               </label>
               <input
                 type="url"
                 value={data.website}
                 onChange={(e) => handleFieldChange('website', e.target.value)}
-                placeholder="https://www.supplier.com"
+                placeholder={t('supplier.fields.websitePlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div className="md:col-span-2">
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Address Line 1
+                {t('supplier.fields.addressLine1')}
               </label>
               <input
                 type="text"
                 value={data.addressLine1}
                 onChange={(e) => handleFieldChange('addressLine1', e.target.value)}
-                placeholder="Street address"
+                placeholder={t('supplier.fields.addressLine1Placeholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div className="md:col-span-2">
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Address Line 2
+                {t('supplier.fields.addressLine2')}
               </label>
               <input
                 type="text"
                 value={data.addressLine2}
                 onChange={(e) => handleFieldChange('addressLine2', e.target.value)}
-                placeholder="Suite, building, etc."
+                placeholder={t('supplier.fields.addressLine2Placeholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                City
+                {t('supplier.fields.city')}
               </label>
               <input
                 type="text"
                 value={data.city}
                 onChange={(e) => handleFieldChange('city', e.target.value)}
-                placeholder="City"
+                placeholder={t('supplier.fields.cityPlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                State/Province
+                {t('supplier.fields.state')}
               </label>
               <input
                 type="text"
                 value={data.stateProvince}
                 onChange={(e) => handleFieldChange('stateProvince', e.target.value)}
-                placeholder="State"
+                placeholder={t('supplier.fields.statePlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Postal Code
+                {t('supplier.fields.postalCode')}
               </label>
               <input
                 type="text"
                 value={data.postalCode}
                 onChange={(e) => handleFieldChange('postalCode', e.target.value)}
-                placeholder="12345"
+                placeholder={t('supplier.fields.postalCodePlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Country
+                {t('supplier.fields.country')}
               </label>
               <input
                 type="text"
                 value={data.country}
                 onChange={(e) => handleFieldChange('country', e.target.value)}
-                placeholder="Country"
+                placeholder={t('supplier.fields.countryPlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Credit Limit
+                {t('supplier.fields.creditLimit')}
               </label>
               <input
                 type="number"
                 value={data.creditLimit}
                 onChange={(e) => handleFieldChange('creditLimit', e.target.value)}
-                placeholder="10000.00"
+                placeholder={t('supplier.fields.creditLimitPlaceholder')}
                 min="0"
                 step="0.01"
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
@@ -409,13 +414,13 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
 
             <div>
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Minimum Order Amount
+                {t('supplier.fields.minOrderAmount')}
               </label>
               <input
                 type="number"
                 value={data.minimumOrderAmount}
                 onChange={(e) => handleFieldChange('minimumOrderAmount', e.target.value)}
-                placeholder="100.00"
+                placeholder={t('supplier.fields.minOrderAmountPlaceholder')}
                 min="0"
                 step="0.01"
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
@@ -424,13 +429,13 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
 
             <div className="md:col-span-2">
               <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Delivery Area
+                {t('supplier.fields.deliveryArea')}
               </label>
               <input
                 type="text"
                 value={data.deliveryArea}
                 onChange={(e) => handleFieldChange('deliveryArea', e.target.value)}
-                placeholder="e.g., New York Metro Area"
+                placeholder={t('supplier.fields.deliveryAreaPlaceholder')}
                 className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
@@ -446,7 +451,7 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
                 className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-2 focus:ring-[var(--color-primary)]"
               />
               <label htmlFor="isPreferredSupplier" className="text-sm font-medium text-[var(--text-secondary)]">
-                Preferred Supplier
+                {t('supplier.fields.preferredSupplier')}
               </label>
             </div>
 
@@ -459,45 +464,45 @@ const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange,
                 className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-2 focus:ring-[var(--color-primary)]"
               />
               <label htmlFor="autoApproveEnabled" className="text-sm font-medium text-[var(--text-secondary)]">
-                Auto-approve Orders
+                {t('supplier.fields.autoApproveOrders')}
               </label>
             </div>
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Certifications
+              {t('supplier.fields.certifications')}
             </label>
             <input
               type="text"
               value={data.certifications}
               onChange={(e) => handleFieldChange('certifications', e.target.value)}
-              placeholder="e.g., ISO 9001, HACCP, Organic (comma-separated)"
+              placeholder={t('supplier.fields.certificationsPlaceholder')}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Specializations
+              {t('supplier.fields.specializations')}
             </label>
             <input
               type="text"
               value={data.specializations}
               onChange={(e) => handleFieldChange('specializations', e.target.value)}
-              placeholder="e.g., Organic flours, Gluten-free products (comma-separated)"
+              placeholder={t('supplier.fields.specializationsPlaceholder')}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
           <div>
             <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-              Notes
+              {t('supplier.fields.notes')}
             </label>
             <textarea
               value={data.notes}
               onChange={(e) => handleFieldChange('notes', e.target.value)}
-              placeholder="Additional notes about this supplier..."
+              placeholder={t('supplier.fields.notesPlaceholder')}
               className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               rows={3}
             />
@@ -518,8 +523,8 @@ export const SupplierWizardSteps = (
   return [
     {
       id: 'supplier-details',
-      title: 'Supplier Details',
-      description: 'Essential supplier information',
+      title: 'wizards:supplier.steps.supplierDetails',
+      description: 'wizards:supplier.steps.supplierDetailsDescription',
       component: SupplierDetailsStep,
     },
   ];