Latest Changes

src/pages/AssetDetail.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { useAssetDetails, useAssetMutations } from '../hooks/useAsset';
 import { FaArrowLeft, FaSave, FaEdit, FaQrcode } from 'react-icons/fa';
-import type { CreateAssetData } from '../services/assetService';
+import type { CreateAssetData, AssetFinanceBookRow } from '../services/assetService';
 
 import LinkField from '../components/LinkField';
 import apiService from '../services/apiService'; // ✅ your ApiService
@@ -51,6 +51,15 @@ const AssetDetail: React.FC = () => {
     available_for_use_date: isNewAsset ? new Date().toISOString().split('T')[0] : undefined
   });
 
+  const emptyFinanceRow = {
+    finance_book: "",
+    depreciation_method: "",
+    total_number_of_depreciations: 0,
+    frequency_of_depreciation: "",
+    depreciation_start_date: "",
+  };
+
+
     // Load user details on mount
   useEffect(() => {
     async function loadUserDetails() {
@@ -65,6 +74,38 @@ const AssetDetail: React.FC = () => {
     loadUserDetails();
   }, []);
 
+  const addFinanceRow = () => {
+    setFormData(prev => ({
+      ...prev,
+      finance_books: [
+        ...(prev.finance_books || []),
+        {
+          finance_book: '',
+          depreciation_method: '',
+          total_number_of_depreciations: 0,
+          frequency_of_depreciation: '',
+          depreciation_start_date: ''
+        }
+      ]
+    }));
+  };
+
+  const removeFinanceRow = (index: number) => {
+    setFormData(prev => {
+      const rows = [...(prev.finance_books || [])];
+      rows.splice(index, 1);
+      return { ...prev, finance_books: rows };
+    });
+  };
+
+  const updateFinanceRow = (index: number, patch: Partial<AssetFinanceBookRow>) => {
+    setFormData(prev => {
+      const rows = [...(prev.finance_books || [])];
+      rows[index] = { ...(rows[index] || {}), ...patch };
+      return { ...prev, finance_books: rows };
+    });
+  };
+
   // Update department filters when company or userSiteName changes
   useEffect(() => {
     const filters: Record<string, any> = {};
@@ -436,7 +477,8 @@ const AssetDetail: React.FC = () => {
                   </select>
                 </div>
 
-                <div className="md:col-span-2">
+                <div>
+                {/* <div className="md:col-span-2"> */}
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Asset ID <span className="text-red-500">*</span>
                   </label>
@@ -452,6 +494,22 @@ const AssetDetail: React.FC = () => {
                     </p>
                   )}
                 </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Device Status <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    name="custom_device_status"
+                    value={formData.custom_device_status}
+                    onChange={handleChange}
+                    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 class</option> */}
+                    <option value="Up">Up</option>
+                    <option value="Down">Down</option>
+                  </select>
+                </div>
               </div>
             </div>
 
@@ -619,7 +677,7 @@ const AssetDetail: React.FC = () => {
                   disabled={!isEditing}
                 />
 
-                <div>
+                {/* <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Building
                   </label>
@@ -632,9 +690,9 @@ const AssetDetail: React.FC = () => {
                     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> */}
 
-                <div>
+                {/* <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Area/Unit
                   </label>
@@ -644,7 +702,7 @@ const AssetDetail: React.FC = () => {
                     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> */}
 
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -975,6 +1033,237 @@ const AssetDetail: React.FC = () => {
                   </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>
             </div>
 

src/services/assetService.ts

@@ -67,6 +67,15 @@ export interface AssetStats {
   total_amount: number;
 }
 
+// Add child row type
+export interface AssetFinanceBookRow {
+  finance_book?: string;
+  depreciation_method?: string;
+  total_number_of_depreciations?: number;
+  frequency_of_depreciation?: string;
+  depreciation_start_date?: string; // YYYY-MM-DD
+}
+
 export interface CreateAssetData {
   asset_name: string;
   company: string;
@@ -87,6 +96,7 @@ export interface CreateAssetData {
   custom_site_contractor?: string;
   custom_total_amount?: number;
   calculate_depreciation?: boolean;
+  finance_books?: AssetFinanceBookRow[];
   [key: string]: any;
 }