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 = () => {
|
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 => ({
|
setFormData(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
finance_books: [
|
finance_books: [
|
||||||
...(prev.finance_books || []),
|
...(prev.finance_books || []),
|
||||||
{
|
newRow
|
||||||
finance_book: '',
|
|
||||||
depreciation_method: '',
|
|
||||||
total_number_of_depreciations: 0,
|
|
||||||
frequency_of_depreciation: '',
|
|
||||||
depreciation_start_date: ''
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
@ -956,323 +961,191 @@ const AssetDetail: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Financial Details */}
|
{/* Updated Financial Details */}
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
<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>
|
<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">
|
<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.
|
The depreciation method is an accounting method used to allocate the cost of a tangible asset over its useful life.
|
||||||
</p>
|
</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>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* End-of-Life Details */}
|
{/* End-of-Life Details */}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user