From fc091eb6668d423623690aedfc272929e0e29002 Mon Sep 17 00:00:00 2001
From: Duradundi Hadimani <duradundihadimani9380@gmail.com>
Date: Fri, 14 Nov 2025 18:42:25 +0530
Subject: [PATCH] Updated AssetDetails for adding Depreciation table

---
 src/pages/AssetDetail.tsx | 509 ++++++++++++++------------------------
 1 file changed, 191 insertions(+), 318 deletions(-)

diff --git a/src/pages/AssetDetail.tsx b/src/pages/AssetDetail.tsx
index fb59400..16ce0de 100644
--- a/src/pages/AssetDetail.tsx
+++ b/src/pages/AssetDetail.tsx
@@ -80,17 +80,22 @@ const AssetDetail: React.FC = () => {
   }, []);
 
   const addFinanceRow = () => {
+    // Get today's date in YYYY-MM-DD format for date input
+    const today = new Date().toISOString().split('T')[0];
+    
+    const newRow: AssetFinanceBookRow = {
+      finance_book: 'Depreciation Entries',
+      depreciation_method: 'Straight Line',
+      total_number_of_depreciations: 10,
+      frequency_of_depreciation: 12,
+      depreciation_start_date: today
+    };
+    
     setFormData(prev => ({
       ...prev,
       finance_books: [
         ...(prev.finance_books || []),
-        {
-          finance_book: '',
-          depreciation_method: '',
-          total_number_of_depreciations: 0,
-          frequency_of_depreciation: '',
-          depreciation_start_date: ''
-        }
+        newRow
       ]
     }));
   };
@@ -956,323 +961,191 @@ const AssetDetail: React.FC = () => {
               </div>
             </div>
 
-            {/* Financial Details */}
+            {/* Updated Financial Details */}
             <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
               <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Financial Details</h2>
               <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                 The depreciation method is an accounting method used to allocate the cost of a tangible asset over its useful life.
               </p>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    Depreciation Method
-                  </label>
-                  <select
-                    disabled={!isEditing}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                  >
-                    <option value="">Straight Line</option>
-                  </select>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    Depreciation Rate (%)
-                  </label>
-                  <input
-                    type="number"
-                    disabled={!isEditing}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    Current Value
-                  </label>
-                  <input
-                    type="number"
-                    disabled={!isEditing}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                  />
-                </div>
-
-                <div className="md:col-span-3">
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    Annual Rate
-                  </label>
-                  <input
-                    type="number"
-                    disabled={!isEditing}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                  />
-                </div>
-
-                <div className="md:col-span-3">
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    Current Value
-                  </label>
-                  <input
-                    type="number"
-                    disabled={!isEditing}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                  />
-                </div>
-                <div className="flex items-center mt-4">
-                  <input
-                    id="calculate_depreciation"
-                    type="checkbox"
-                    
-                    checked={formData.calculate_depreciation}
-                    onChange={(e) =>
-                      setFormData({
-                        ...formData,
-                        calculate_depreciation: e.target.checked,
-                      })
-                    }
-                    disabled={!isEditing}
-                    className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  />
-                  <label
-                    htmlFor="calculate_depreciation"
-                    className="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300"
-                  >
-                    Calculate Depreciation
-                  </label>
-                </div>
-
-                {/* Asset Finance Book child table — shown only when checkbox checked */}
-                {formData.calculate_depreciation && (
-                  <div className="mt-6">
-
-                    {/* Header with Add Row button */}
-                    <div className="flex justify-between items-center mb-3">
-                      <h3 className="text-md font-semibold text-gray-800 dark:text-white">
-                        Asset Finance Book
-                      </h3>
-
-                      {isEditing && (
-                        <button
-                          type="button"
-                          onClick={addFinanceRow}
-                          className="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-                        >
-                          + Add Row
-                        </button>
-                      )}
-                    </div>
-
-                    {/* TABLE HEADER */}
-                    <div className="hidden md:grid grid-cols-6 gap-4 text-sm font-semibold text-gray-700 dark:text-gray-300 border-b pb-2 mb-2">
-                      <div>Finance Book</div>
-                      <div>Depreciation Method</div>
-                      <div>Total Depreciations</div>
-                      <div>Frequency</div>
-                      <div>Start Date</div>
-                      <div className="text-right">Action</div>
-                    </div>
-
-                    {/* TABLE ROWS */}
-                    <div className="space-y-3">
-
-                      {(formData.finance_books || []).map((row: AssetFinanceBookRow, idx: number) => (
-                        <div
-                          key={idx}
-                          className="md:grid md:grid-cols-6 gap-4 items-center border rounded-md p-3 bg-white dark:bg-gray-800"
-                        >
-                          {/* Finance Book */}
-                          <input
-                            type="text"
-                            value={row.finance_book || ''}
-                            onChange={(e) => updateFinanceRow(idx, { finance_book: e.target.value })}
-                            disabled={!isEditing}
-                            className="w-full px-2 py-1 border rounded-md dark:bg-gray-700 dark:text-white"
-                          />
-
-                          {/* Depreciation Method */}
-                          <select
-                            value={row.depreciation_method || ''}
-                            onChange={(e) => updateFinanceRow(idx, { depreciation_method: e.target.value })}
-                            disabled={!isEditing}
-                            className="w-full px-2 py-1 border rounded-md dark:bg-gray-700 dark:text-white"
-                          >
-                            <option value="">Select</option>
-                            <option value="Straight Line">Straight Line</option>
-                            <option value="Reducing Balance">Reducing Balance</option>
-                          </select>
-
-                          {/* Total Depreciations */}
-                          <input
-                            type="number"
-                            value={row.total_number_of_depreciations ?? ''}
-                            onChange={(e) =>
-                              updateFinanceRow(idx, {
-                                total_number_of_depreciations: Number(e.target.value),
-                              })
-                            }
-                            disabled={!isEditing}
-                            className="w-full px-2 py-1 border rounded-md dark:bg-gray-700 dark:text-white"
-                          />
-
-                          {/* Frequency */}
-                          <input
-                            type="text"
-                            value={row.frequency_of_depreciation || ''}
-                            onChange={(e) =>
-                              updateFinanceRow(idx, { frequency_of_depreciation: e.target.value })
-                            }
-                            disabled={!isEditing}
-                            className="w-full px-2 py-1 border rounded-md dark:bg-gray-700 dark:text-white"
-                          />
-
-                          {/* Start Date */}
-                          <input
-                            type="date"
-                            value={row.depreciation_start_date || ''}
-                            onChange={(e) =>
-                              updateFinanceRow(idx, { depreciation_start_date: e.target.value })
-                            }
-                            disabled={!isEditing}
-                            className="w-full px-2 py-1 border rounded-md dark:bg-gray-700 dark:text-white"
-                          />
-
-                          {/* REMOVE BUTTON */}
-                          {isEditing && (
-                            <div className="text-right">
-                              <button
-                                type="button"
-                                onClick={() => removeFinanceRow(idx)}
-                                className="px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700"
-                              >
-                                Remove
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                      ))}
-
-                    </div>
-                  </div>
-                )}
-
-                {/* {formData.calculate_depreciation && (
-                  <div className="mt-6">
-                    <div className="flex justify-between items-center mb-3">
-                      <h3 className="text-md font-semibold text-gray-800 dark:text-white">Asset Finance Book</h3>
-                      {isEditing && (
-                        <button
-                          type="button"
-                          onClick={addFinanceRow}
-                          className="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-                        >
-                          + Add Row
-                        </button>
-                      )}
-                    </div>
-
-                    <div className="space-y-4">
-                      {(formData.finance_books || []).length === 0 && (
-                        <div className="text-sm text-gray-500 dark:text-gray-400">No finance book rows added.</div>
-                      )}
-
-                      
-                      {(formData.finance_books || []).map((row: AssetFinanceBookRow, idx: number) => (
-                        <div key={idx} className="border rounded-md p-3 bg-white dark:bg-gray-800">
-                          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                            
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                Finance Book
-                              </label>
-                              <input
-                                type="text"
-                                value={row.finance_book || ''}
-                                onChange={(e) => updateFinanceRow(idx, { finance_book: e.target.value })}
-                                disabled={!isEditing}
-                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                              />
-                            </div>
-
-                            
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                Depreciation Method
-                              </label>
-                              <select
-                                value={row.depreciation_method || ''}
-                                onChange={(e) => updateFinanceRow(idx, { depreciation_method: e.target.value })}
-                                disabled={!isEditing}
-                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                              >
-                                <option value="">Select method</option>
-                                <option value="Straight Line">Straight Line</option>
-                                <option value="Reducing Balance">Reducing Balance</option>
-                              </select>
-                            </div>
-
-                            
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                Total Number of Depreciations
-                              </label>
-                              <input
-                                type="number"
-                                value={row.total_number_of_depreciations ?? ''}
-                                onChange={(e) => updateFinanceRow(idx, { total_number_of_depreciations: Number(e.target.value) })}
-                                disabled={!isEditing}
-                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                              />
-                            </div>
-
-                            
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                Frequency of Depreciation
-                              </label>
-                              <input
-                                type="text"
-                                value={row.frequency_of_depreciation || ''}
-                                onChange={(e) => updateFinanceRow(idx, { frequency_of_depreciation: e.target.value })}
-                                disabled={!isEditing}
-                                placeholder="e.g. Monthly, Yearly"
-                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                              />
-                            </div>
-
-                            
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                Depreciation Start Date
-                              </label>
-                              <input
-                                type="date"
-                                value={row.depreciation_start_date || ''}
-                                onChange={(e) => updateFinanceRow(idx, { depreciation_start_date: e.target.value })}
-                                disabled={!isEditing}
-                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                              />
-                            </div>
-                          </div>
-
-                          {/* Row actions */}
-                          {/* {isEditing && (
-                            <div className="mt-3 flex justify-end gap-2">
-                              <button
-                                type="button"
-                                onClick={() => removeFinanceRow(idx)}
-                                className="px-3 py-1 rounded-md bg-red-600 text-white hover:bg-red-700"
-                              >
-                                Remove
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )} */}
-
+              
+              <div className="flex items-center mb-6">
+                <input
+                  id="calculate_depreciation"
+                  type="checkbox"
+                  checked={formData.calculate_depreciation}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      calculate_depreciation: e.target.checked,
+                    })
+                  }
+                  disabled={!isEditing}
+                  className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                />
+                <label
+                  htmlFor="calculate_depreciation"
+                  className="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300"
+                >
+                  Calculate Depreciation
+                </label>
               </div>
+
+              {/* Asset Finance Book child table — shown only when checkbox checked */}
+              {formData.calculate_depreciation && (
+                <div className="border-t pt-4">
+                  {/* Header with Add Row button */}
+                  <div className="flex justify-between items-center mb-4">
+                    <h3 className="text-md font-semibold text-gray-800 dark:text-white">
+                      Asset Finance Books
+                    </h3>
+                    {isEditing && (
+                      <button
+                        type="button"
+                        onClick={addFinanceRow}
+                        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center gap-2"
+                      >
+                        <span>+</span> Add Row
+                      </button>
+                    )}
+                  </div>
+
+                  {/* Show message if no rows */}
+                  {(!formData.finance_books || formData.finance_books.length === 0) && (
+                    <div className="text-center py-8 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 rounded-lg">
+                      No finance books added yet. Click "Add Row" to add one.
+                    </div>
+                  )}
+
+                  {/* TABLE - Full width desktop view with overflow fix */}
+                  {formData.finance_books && formData.finance_books.length > 0 && (
+                    <div className="overflow-visible">
+                      <div className="overflow-x-auto">
+                        <table className="w-full border-collapse">
+                          <thead>
+                            <tr className="bg-gray-100 dark:bg-gray-700 border-b border-gray-300 dark:border-gray-600">
+                              <th className="text-left px-4 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300 min-w-[200px]">
+                                Finance Book
+                              </th>
+                              <th className="text-left px-4 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300 min-w-[200px]">
+                                Depreciation Method*
+                              </th>
+                              <th className="text-left px-4 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300 min-w-[180px]">
+                                Total Depreciations*
+                              </th>
+                              <th className="text-left px-4 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300 min-w-[180px]">
+                                Frequency (Months)*
+                              </th>
+                              <th className="text-left px-4 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300 min-w-[200px]">
+                                Depreciation Posting Date*
+                              </th>
+                              {isEditing && (
+                                <th className="text-center px-4 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300 min-w-[120px]">
+                                  Action
+                                </th>
+                              )}
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {formData.finance_books.map((row: AssetFinanceBookRow, idx: number) => (
+                              <tr
+                                key={idx}
+                                className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750"
+                              >
+                                {/* Finance Book - with overflow visible */}
+                                <td className="px-4 py-3 relative" style={{ overflow: 'visible' }}>
+                                  <div className="relative z-20">
+                                    <LinkField
+                                      label=""
+                                      doctype="Finance Book"
+                                      value={row.finance_book || ''}
+                                      onChange={(val) => updateFinanceRow(idx, { finance_book: val })}
+                                      disabled={!isEditing}
+                                    />
+                                  </div>
+                                </td>
+
+                                {/* Depreciation Method */}
+                                <td className="px-4 py-3">
+                                  <select
+                                    value={row.depreciation_method || ''}
+                                    onChange={(e) => updateFinanceRow(idx, { depreciation_method: e.target.value })}
+                                    disabled={!isEditing}
+                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                                  >
+                                    <option value="">Select Method</option>
+                                    <option value="Straight Line">Straight Line</option>
+                                    <option value="Double Declining Balance">Double Declining Balance</option>
+                                    <option value="Written Down Value">Written Down Value</option>
+                                    <option value="Manual">Manual</option>
+                                  </select>
+                                </td>
+
+                                {/* Total Depreciations */}
+                                <td className="px-4 py-3">
+                                  <input
+                                    type="number"
+                                    value={row.total_number_of_depreciations ?? ''}
+                                    onChange={(e) =>
+                                      updateFinanceRow(idx, {
+                                        total_number_of_depreciations: Number(e.target.value),
+                                      })
+                                    }
+                                    disabled={!isEditing}
+                                    placeholder="0"
+                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                                  />
+                                </td>
+
+                                {/* Frequency */}
+                                <td className="px-4 py-3">
+                                  <input
+                                    type="number"
+                                    value={row.frequency_of_depreciation ?? ''}
+                                    onChange={(e) =>
+                                      updateFinanceRow(idx, {
+                                        frequency_of_depreciation: Number(e.target.value),
+                                      })
+                                    }
+                                    disabled={!isEditing}
+                                    placeholder="0"
+                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                                  />
+                                </td>
+
+                                {/* Start Date */}
+                                <td className="px-4 py-3">
+                                  <input
+                                    type="date"
+                                    value={row.depreciation_start_date || ''}
+                                    onChange={(e) =>
+                                      updateFinanceRow(idx, { depreciation_start_date: e.target.value })
+                                    }
+                                    disabled={!isEditing}
+                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                                  />
+                                </td>
+
+                                {/* REMOVE BUTTON */}
+                                {isEditing && (
+                                  <td className="px-4 py-3 text-center">
+                                    <button
+                                      type="button"
+                                      onClick={() => removeFinanceRow(idx)}
+                                      className="px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
+                                    >
+                                      Remove
+                                    </button>
+                                  </td>
+                                )}
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
 
             {/* End-of-Life Details */}