From d667a7cf9dc712d6d5d6e6336e8bf4f8c86220b4 Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Wed, 27 Aug 2025 14:02:14 -0400
Subject: [PATCH] app plan

---
 .../Applications/ApplicationPlanModal.js      | 294 ++++++++++++------
 1 file changed, 201 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/Applications/ApplicationPlanModal.js b/frontend/src/components/Applications/ApplicationPlanModal.js
index fffc8c2..2c8c34b 100644
--- a/frontend/src/components/Applications/ApplicationPlanModal.js
+++ b/frontend/src/components/Applications/ApplicationPlanModal.js
@@ -19,6 +19,7 @@ const ApplicationPlanModal = ({
   const [selectedEquipmentId, setSelectedEquipmentId] = useState('');
   const [selectedNozzleId, setSelectedNozzleId] = useState('');
   const [selectedProducts, setSelectedProducts] = useState([]);
+  const [applicationType, setApplicationType] = useState('');
   const [plannedDate, setPlannedDate] = useState('');
   const [notes, setNotes] = useState('');
   const [loading, setLoading] = useState(false);
@@ -105,17 +106,42 @@ const ApplicationPlanModal = ({
     });
   };
 
-  // Add product to plan
+  // Add product to plan (for liquid tank mixes)
   const addProduct = () => {
     setSelectedProducts(prev => [...prev, {
+      uniqueId: '',
       productId: null,
       userProductId: null,
+      productName: '',
+      productBrand: '',
+      productType: applicationType,
       rateAmount: '',
-      rateUnit: 'oz/1000sqft',
+      rateUnit: applicationType === 'granular' ? 'lb/1000sqft' : 'oz/1000sqft',
       isUserProduct: false
     }]);
   };
 
+  // Handle application type change
+  const handleApplicationTypeChange = (type) => {
+    setApplicationType(type);
+    // Clear products when switching type
+    setSelectedProducts([]);
+    // Add initial product
+    setTimeout(() => {
+      setSelectedProducts([{
+        uniqueId: '',
+        productId: null,
+        userProductId: null,
+        productName: '',
+        productBrand: '',
+        productType: type,
+        rateAmount: '',
+        rateUnit: type === 'granular' ? 'lb/1000sqft' : 'oz/1000sqft',
+        isUserProduct: false
+      }]);
+    }, 0);
+  };
+
   // Remove product from plan
   const removeProduct = (index) => {
     setSelectedProducts(prev => prev.filter((_, i) => i !== index));
@@ -245,7 +271,7 @@ const ApplicationPlanModal = ({
                   <option value="">Select equipment</option>
                   {equipment.map(eq => (
                     <option key={eq.id} value={eq.id}>
-                      {eq.name} ({eq.type})
+                      {eq.name || 'Unnamed Equipment'} {eq.type ? `(${eq.type})` : ''}
                     </option>
                   ))}
                 </select>
@@ -286,78 +312,145 @@ const ApplicationPlanModal = ({
                 />
               </div>
 
+              {/* Application Type */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <BeakerIcon className="h-4 w-4 inline mr-1" />
+                  Application Type
+                </label>
+                <div className="flex gap-4 mb-3">
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="applicationType"
+                      value="granular"
+                      checked={applicationType === 'granular'}
+                      onChange={(e) => handleApplicationTypeChange(e.target.value)}
+                      className="mr-2"
+                    />
+                    Granular (Spreader)
+                  </label>
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="applicationType"
+                      value="liquid"
+                      checked={applicationType === 'liquid'}
+                      onChange={(e) => handleApplicationTypeChange(e.target.value)}
+                      className="mr-2"
+                    />
+                    Liquid (Sprayer)
+                  </label>
+                </div>
+              </div>
+
               {/* Products */}
               <div>
                 <div className="flex justify-between items-center mb-2">
                   <label className="block text-sm font-medium text-gray-700">
-                    <BeakerIcon className="h-4 w-4 inline mr-1" />
-                    Products
+                    Products to Apply
                   </label>
-                  <button
-                    type="button"
-                    onClick={addProduct}
-                    className="text-blue-600 hover:text-blue-800 text-sm"
-                  >
-                    + Add Product
-                  </button>
+                  {applicationType === 'liquid' && (
+                    <button
+                      type="button"
+                      onClick={addProduct}
+                      className="text-blue-600 hover:text-blue-800 text-sm"
+                    >
+                      + Add Product (Tank Mix)
+                    </button>
+                  )}
                 </div>
 
                 {selectedProducts.map((product, index) => (
-                  <div key={index} className="border rounded p-3 mb-2">
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
+                  <div key={index} className="border rounded p-3 mb-3">
+                    {/* Product Selection */}
+                    <div className="grid grid-cols-1 gap-3">
                       <select
-                        value={product.isUserProduct ? `user_${product.userProductId}` : `shared_${product.productId}`}
+                        value={product.uniqueId || ''}
                         onChange={(e) => {
-                          const [type, id] = e.target.value.split('_');
-                          updateProduct(index, 'isUserProduct', type === 'user');
-                          updateProduct(index, type === 'user' ? 'userProductId' : 'productId', parseInt(id));
-                          updateProduct(index, type === 'user' ? 'productId' : 'userProductId', null);
+                          const selectedProduct = products.find(p => p.uniqueId === e.target.value);
+                          if (selectedProduct) {
+                            updateProduct(index, 'uniqueId', e.target.value);
+                            updateProduct(index, 'productId', selectedProduct.isShared ? selectedProduct.id : null);
+                            updateProduct(index, 'userProductId', !selectedProduct.isShared ? selectedProduct.id : null);
+                            updateProduct(index, 'isUserProduct', !selectedProduct.isShared);
+                            updateProduct(index, 'productName', selectedProduct.name);
+                            updateProduct(index, 'productBrand', selectedProduct.brand);
+                            updateProduct(index, 'productType', selectedProduct.productType);
+                          }
                         }}
-                        className="border border-gray-300 rounded px-2 py-1"
+                        className="border border-gray-300 rounded px-3 py-2"
                         required
                       >
                         <option value="">Select product</option>
-                        {products.map(prod => (
-                          <option key={prod.uniqueId} value={prod.uniqueId}>
-                            {prod.name} {prod.brand && `(${prod.brand})`} {prod.isShared ? '' : '(Custom)'}
-                          </option>
-                        ))}
+                        {products
+                          .filter(prod => !applicationType || prod.productType === applicationType)
+                          .map(prod => (
+                            <option key={prod.uniqueId} value={prod.uniqueId}>
+                              {prod.name} {prod.brand && `(${prod.brand})`} {prod.isShared ? '' : '(Custom)'}
+                            </option>
+                          ))}
                       </select>
 
-                      <div className="flex gap-1">
-                        <input
-                          type="number"
-                          step="0.01"
-                          placeholder="Rate"
-                          value={product.rateAmount}
-                          onChange={(e) => updateProduct(index, 'rateAmount', e.target.value)}
-                          className="border border-gray-300 rounded px-2 py-1 flex-1"
-                          required
-                        />
-                        <select
-                          value={product.rateUnit}
-                          onChange={(e) => updateProduct(index, 'rateUnit', e.target.value)}
-                          className="border border-gray-300 rounded px-2 py-1"
-                        >
-                          <option value="oz/1000sqft">oz/1000sqft</option>
-                          <option value="lb/1000sqft">lb/1000sqft</option>
-                          <option value="fl oz/1000sqft">fl oz/1000sqft</option>
-                        </select>
+                      {/* Rate Input */}
+                      <div className="grid grid-cols-2 gap-2">
+                        <div>
+                          <label className="block text-xs text-gray-600 mb-1">Application Rate</label>
+                          <input
+                            type="number"
+                            step="0.01"
+                            placeholder="Rate"
+                            value={product.rateAmount || ''}
+                            onChange={(e) => updateProduct(index, 'rateAmount', e.target.value)}
+                            className="w-full border border-gray-300 rounded px-3 py-2"
+                            required
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-xs text-gray-600 mb-1">Rate Unit</label>
+                          <select
+                            value={product.rateUnit || (applicationType === 'granular' ? 'lb/1000sqft' : 'oz/1000sqft')}
+                            onChange={(e) => updateProduct(index, 'rateUnit', e.target.value)}
+                            className="w-full border border-gray-300 rounded px-3 py-2"
+                          >
+                            {applicationType === 'granular' ? (
+                              <>
+                                <option value="lb/1000sqft">lb/1000sqft</option>
+                                <option value="oz/1000sqft">oz/1000sqft</option>
+                              </>
+                            ) : (
+                              <>
+                                <option value="oz/1000sqft">oz/1000sqft</option>
+                                <option value="fl oz/1000sqft">fl oz/1000sqft</option>
+                                <option value="lb/1000sqft">lb/1000sqft</option>
+                              </>
+                            )}
+                          </select>
+                        </div>
                       </div>
 
-                      <button
-                        type="button"
-                        onClick={() => removeProduct(index)}
-                        className="text-red-600 hover:text-red-800 px-2"
-                      >
-                        Remove
-                      </button>
+                      {/* Remove Button */}
+                      {applicationType === 'liquid' && selectedProducts.length > 1 && (
+                        <div className="flex justify-end">
+                          <button
+                            type="button"
+                            onClick={() => removeProduct(index)}
+                            className="text-red-600 hover:text-red-800 text-sm"
+                          >
+                            Remove Product
+                          </button>
+                        </div>
+                      )}
                     </div>
                   </div>
                 ))}
 
                 {selectedProducts.length === 0 && (
-                  <p className="text-gray-500 text-sm italic">No products added yet</p>
+                  <div className="text-center py-4 border-2 border-dashed border-gray-300 rounded">
+                    <p className="text-gray-500 text-sm">
+                      {applicationType ? `Select a ${applicationType} product to continue` : 'Select application type first'}
+                    </p>
+                  </div>
                 )}
               </div>
 
@@ -376,52 +469,67 @@ const ApplicationPlanModal = ({
               </div>
             </div>
 
-            {/* Right Column - Map */}
+            {/* Right Column - Areas & Map */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Select Areas to Treat
-              </label>
-              <div className="h-96 border rounded-lg overflow-hidden">
-                {selectedPropertyDetails ? (
-                  <PropertyMap
-                    center={mapCenter}
-                    zoom={16}
-                    property={selectedPropertyDetails}
-                    sections={selectedPropertyDetails.sections || []}
-                    selectedSections={selectedAreas}
-                    onSectionClick={handleAreaClick}
-                    mode="select"
-                    editable={false}
-                    className="h-full w-full"
-                  />
-                ) : (
-                  <div className="h-full w-full flex items-center justify-center bg-gray-100">
-                    <p className="text-gray-500">Select a property to view areas</p>
-                  </div>
-                )}
-              </div>
-              
-              {selectedAreas.length > 0 && selectedPropertyDetails && (
-                <div className="mt-2">
-                  <p className="text-sm font-medium text-gray-700">Selected Areas:</p>
-                  <div className="flex flex-wrap gap-2 mt-1">
-                    {selectedAreas.map(areaId => {
-                      const area = selectedPropertyDetails.sections?.find(s => s.id === areaId);
-                      return (
-                        <span key={areaId} className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
-                          {area?.name} ({Math.round(area?.area || 0).toLocaleString()} sq ft)
+              {/* Area Selection with Checkboxes */}
+              {selectedPropertyDetails?.sections?.length > 0 && (
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Select Areas to Treat
+                  </label>
+                  <div className="max-h-32 overflow-y-auto border rounded p-2 bg-gray-50">
+                    {selectedPropertyDetails.sections.map(section => (
+                      <label key={section.id} className="flex items-center py-1 cursor-pointer hover:bg-gray-100 rounded px-2">
+                        <input
+                          type="checkbox"
+                          checked={selectedAreas.includes(section.id)}
+                          onChange={() => handleAreaClick(section)}
+                          className="mr-2"
+                        />
+                        <span className="text-sm">
+                          {section.name} ({Math.round(section.area || 0).toLocaleString()} sq ft)
                         </span>
-                      );
-                    })}
+                      </label>
+                    ))}
                   </div>
-                  <p className="text-xs text-gray-600 mt-1">
-                    Total: {selectedAreas.reduce((total, areaId) => {
-                      const area = selectedPropertyDetails.sections?.find(s => s.id === areaId);
-                      return total + (area?.area || 0);
-                    }, 0).toLocaleString()} sq ft
-                  </p>
+                  
+                  {selectedAreas.length > 0 && (
+                    <div className="mt-2 p-2 bg-blue-50 rounded">
+                      <p className="text-sm font-medium text-blue-800">
+                        Total Selected: {selectedAreas.reduce((total, areaId) => {
+                          const area = selectedPropertyDetails.sections?.find(s => s.id === areaId);
+                          return total + (area?.area || 0);
+                        }, 0).toLocaleString()} sq ft
+                      </p>
+                    </div>
+                  )}
                 </div>
               )}
+
+              {/* Map Display */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Property Map
+                </label>
+                <div className="h-64 border rounded-lg overflow-hidden">
+                  {selectedPropertyDetails ? (
+                    <PropertyMap
+                      center={mapCenter}
+                      zoom={16}
+                      property={selectedPropertyDetails}
+                      sections={selectedPropertyDetails.sections || []}
+                      selectedSections={selectedAreas}
+                      mode="view"
+                      editable={false}
+                      className="h-full w-full"
+                    />
+                  ) : (
+                    <div className="h-full w-full flex items-center justify-center bg-gray-100">
+                      <p className="text-gray-500">Select a property to view areas</p>
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
           </div>