Updated AssetDetails for adding Depreciation table
This commit is contained in:
Duradundi Hadimani
parent
34f8581b29
commit
fc091eb666
@ -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 */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user