started implementing pwc invoice enhanced cost and expence capturing
This commit is contained in:
parent
edd1967336
commit
08cda349f3
@ -147,23 +147,40 @@ export function ActivityInformationCard({
|
||||
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-3 block">
|
||||
Closed Expenses Breakdown
|
||||
</label>
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3 space-y-2">
|
||||
{activityInfo.closedExpensesBreakdown.map((item: { description: string; amount: number }, index: number) => (
|
||||
<div key={index} className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-700">{item.description}</span>
|
||||
<span className="font-medium text-gray-900">
|
||||
{formatCurrency(item.amount)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg overflow-hidden">
|
||||
<table className="w-full text-xs sm:text-sm">
|
||||
<thead className="bg-blue-100/50">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-semibold text-blue-900">Description</th>
|
||||
<th className="px-3 py-2 text-right font-semibold text-blue-900 w-24">Base</th>
|
||||
<th className="px-3 py-2 text-right font-semibold text-blue-900 w-24">GST</th>
|
||||
<th className="px-3 py-2 text-right font-semibold text-blue-900 w-28">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-blue-200/50">
|
||||
{activityInfo.closedExpensesBreakdown.map((item: any, index: number) => (
|
||||
<tr key={index} className="hover:bg-blue-100/30">
|
||||
<td className="px-3 py-2 text-gray-700">
|
||||
{item.description}
|
||||
{item.gstRate ? <span className="text-[10px] text-gray-400 block">{item.gstRate}% GST</span> : null}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right text-gray-900">{formatCurrency(item.amount)}</td>
|
||||
<td className="px-3 py-2 text-right text-gray-900">{formatCurrency(item.gstAmt || 0)}</td>
|
||||
<td className="px-3 py-2 text-right font-medium text-gray-900">
|
||||
{formatCurrency(item.totalAmt || (item.amount + (item.gstAmt || 0)))}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<div className="pt-2 border-t border-blue-300 flex justify-between items-center">
|
||||
<span className="font-semibold text-gray-900">Total</span>
|
||||
<span className="font-bold text-blue-600">
|
||||
<tr className="bg-blue-100/50 font-bold">
|
||||
<td colSpan={3} className="px-3 py-2 text-blue-900">Final Claim Amount</td>
|
||||
<td className="px-3 py-2 text-right text-blue-700">
|
||||
{formatCurrency(
|
||||
activityInfo.closedExpensesBreakdown.reduce((sum: number, item: { description: string; amount: number }) => sum + item.amount, 0)
|
||||
activityInfo.closedExpensesBreakdown.reduce((sum: number, item: any) => sum + (item.totalAmt || (item.amount + (item.gstAmt || 0))), 0)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -26,6 +26,11 @@ interface DMSDetails {
|
||||
remarks?: string;
|
||||
createdByName?: string;
|
||||
createdAt?: string;
|
||||
// PWC fields
|
||||
irn?: string;
|
||||
ackNo?: string;
|
||||
ackDate?: string;
|
||||
signedInvoiceUrl?: string;
|
||||
}
|
||||
|
||||
interface ClaimAmountDetails {
|
||||
@ -37,6 +42,8 @@ interface ClaimAmountDetails {
|
||||
interface CostBreakdownItem {
|
||||
description: string;
|
||||
amount: number;
|
||||
gstAmt?: number;
|
||||
totalAmt?: number;
|
||||
}
|
||||
|
||||
interface RoleBasedVisibility {
|
||||
@ -85,7 +92,7 @@ export function ProcessDetailsCard({
|
||||
|
||||
const calculateTotal = (items?: CostBreakdownItem[]) => {
|
||||
if (!items || items.length === 0) return 0;
|
||||
return items.reduce((sum, item) => sum + (item.amount ?? 0), 0);
|
||||
return items.reduce((sum, item) => sum + (item.totalAmt ?? (item.amount + (item.gstAmt ?? 0))), 0);
|
||||
};
|
||||
|
||||
// Don't render if nothing to show
|
||||
@ -171,21 +178,54 @@ export function ProcessDetailsCard({
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Activity className="w-4 h-4 text-purple-600" />
|
||||
<Label className="text-xs font-semibold text-purple-900 uppercase tracking-wide">
|
||||
DMS Number
|
||||
DMS & E-Invoice Details
|
||||
</Label>
|
||||
</div>
|
||||
<p className="font-bold text-gray-900 mb-2">{dmsDetails.dmsNumber}</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 mb-2">
|
||||
<div>
|
||||
<p className="text-[10px] text-gray-500 uppercase">DMS Number</p>
|
||||
<p className="font-bold text-sm text-gray-900">{dmsDetails.dmsNumber || 'N/A'}</p>
|
||||
</div>
|
||||
{dmsDetails.ackNo && (
|
||||
<div>
|
||||
<p className="text-[10px] text-gray-500 uppercase">Ack No</p>
|
||||
<p className="font-bold text-sm text-purple-700">{dmsDetails.ackNo}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{dmsDetails.irn && (
|
||||
<div className="mb-2 p-2 bg-purple-50 rounded border border-purple-100">
|
||||
<p className="text-[10px] text-purple-600 uppercase font-semibold">IRN</p>
|
||||
<p className="text-[10px] font-mono break-all text-gray-700 leading-tight">
|
||||
{dmsDetails.irn}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{dmsDetails.signedInvoiceUrl && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full h-8 text-xs gap-2 mb-2 border-purple-200 text-purple-700 hover:bg-purple-50"
|
||||
onClick={() => window.open(dmsDetails.signedInvoiceUrl, '_blank')}
|
||||
>
|
||||
<Receipt className="w-3.5 h-3.5" />
|
||||
View E-Invoice
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{dmsDetails.remarks && (
|
||||
<div className="pt-2 border-t border-purple-100">
|
||||
<p className="text-xs text-gray-600 mb-1">Remarks:</p>
|
||||
<p className="text-[10px] text-gray-500 uppercase mb-1">Remarks</p>
|
||||
<p className="text-xs text-gray-900">{dmsDetails.remarks}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-2 border-t border-purple-100 mt-2">
|
||||
<p className="text-xs text-gray-500">By {dmsDetails.createdByName}</p>
|
||||
<p className="text-xs text-gray-500">{formatDate(dmsDetails.createdAt)}</p>
|
||||
<p className="text-[10px] text-gray-500">By {dmsDetails.createdByName}</p>
|
||||
<p className="text-[10px] text-gray-500">{formatDate(dmsDetails.createdAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -241,10 +281,10 @@ export function ProcessDetailsCard({
|
||||
</div>
|
||||
<div className="space-y-1.5 pt-1">
|
||||
{estimatedBudgetBreakdown.map((item, index) => (
|
||||
<div key={index} className="flex justify-between items-center text-xs">
|
||||
<span className="text-gray-700">{item.description}</span>
|
||||
<span className="font-medium text-gray-900">
|
||||
{formatCurrency(item.amount)}
|
||||
<div key={index} className="flex justify-between items-center text-[10px] sm:text-xs">
|
||||
<div className="text-gray-700 truncate mr-2" title={item.description}>{item.description}</div>
|
||||
<span className="font-medium text-gray-900 whitespace-nowrap">
|
||||
{formatCurrency(item.totalAmt ?? (item.amount + (item.gstAmt ?? 0)))}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
@ -269,10 +309,10 @@ export function ProcessDetailsCard({
|
||||
</div>
|
||||
<div className="space-y-1.5 pt-1">
|
||||
{closedExpensesBreakdown.map((item, index) => (
|
||||
<div key={index} className="flex justify-between items-center text-xs">
|
||||
<span className="text-gray-700">{item.description}</span>
|
||||
<span className="font-medium text-gray-900">
|
||||
{formatCurrency(item.amount)}
|
||||
<div key={index} className="flex justify-between items-center text-[10px] sm:text-xs">
|
||||
<div className="text-gray-700 truncate mr-2" title={item.description}>{item.description}</div>
|
||||
<span className="font-medium text-gray-900 whitespace-nowrap">
|
||||
{formatCurrency(item.totalAmt ?? (item.amount + (item.gstAmt ?? 0)))}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -11,6 +11,12 @@ import { format } from 'date-fns';
|
||||
interface ProposalCostItem {
|
||||
description: string;
|
||||
amount?: number | null;
|
||||
gstRate?: number;
|
||||
gstAmt?: number;
|
||||
cgstAmt?: number;
|
||||
sgstAmt?: number;
|
||||
igstAmt?: number;
|
||||
totalAmt?: number;
|
||||
}
|
||||
|
||||
interface ProposalDetails {
|
||||
@ -99,7 +105,13 @@ export function ProposalDetailsCard({ proposalDetails, className }: ProposalDeta
|
||||
Item Description
|
||||
</th>
|
||||
<th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
Amount
|
||||
Base Amount
|
||||
</th>
|
||||
<th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
GST
|
||||
</th>
|
||||
<th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -107,16 +119,27 @@ export function ProposalDetailsCard({ proposalDetails, className }: ProposalDeta
|
||||
{(proposalDetails.costBreakup || []).map((item, index) => (
|
||||
<tr key={index} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3 text-sm text-gray-900">
|
||||
{item.description}
|
||||
<div>{item.description}</div>
|
||||
{item.gstRate ? (
|
||||
<div className="text-[10px] text-gray-400">
|
||||
{item.cgstAmt ? `CGST: ${item.gstRate / 2}%, SGST: ${item.gstRate / 2}%` : `IGST: ${item.gstRate}%`}
|
||||
</div>
|
||||
) : null}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-900 text-right">
|
||||
{formatCurrency(item.amount)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-900 text-right">
|
||||
{formatCurrency(item.gstAmt)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-900 text-right font-medium">
|
||||
{formatCurrency(item.amount)}
|
||||
{formatCurrency(item.totalAmt || (item.amount || 0) + (item.gstAmt || 0))}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="bg-green-50 font-semibold">
|
||||
<td className="px-4 py-3 text-sm text-gray-900">
|
||||
Estimated Budget (Total)
|
||||
<td colSpan={3} className="px-4 py-3 text-sm text-gray-900">
|
||||
Estimated Budget (Total Inclusive of GST)
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-green-700 text-right">
|
||||
{formatCurrency(estimatedTotal)}
|
||||
|
||||
@ -19,7 +19,7 @@ import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { CustomDatePicker } from '@/components/ui/date-picker';
|
||||
import { Upload, Plus, X, Calendar, FileText, Image, Receipt, CircleAlert, CheckCircle2, Eye, Download } from 'lucide-react';
|
||||
import { Upload, Plus, X, Calendar, FileText, Image, Receipt, CircleAlert, CheckCircle2, Eye, Download, IndianRupee } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import '@/components/common/FilePreview/FilePreview.css';
|
||||
import './DealerCompletionDocumentsModal.css';
|
||||
@ -28,6 +28,19 @@ interface ExpenseItem {
|
||||
id: string;
|
||||
description: string;
|
||||
amount: number;
|
||||
gstRate: number;
|
||||
gstAmt: number;
|
||||
cgstRate: number;
|
||||
cgstAmt: number;
|
||||
sgstRate: number;
|
||||
sgstAmt: number;
|
||||
igstRate: number;
|
||||
igstAmt: number;
|
||||
utgstRate: number;
|
||||
utgstAmt: number;
|
||||
cessRate: number;
|
||||
cessAmt: number;
|
||||
totalAmt: number;
|
||||
}
|
||||
|
||||
interface DealerCompletionDocumentsModalProps {
|
||||
@ -129,11 +142,43 @@ export function DealerCompletionDocumentsModal({
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// Calculate total closed expenses
|
||||
// Calculate total closed expenses (inclusive of GST)
|
||||
const totalClosedExpenses = useMemo(() => {
|
||||
return expenseItems.reduce((sum, item) => sum + (item.amount || 0), 0);
|
||||
return expenseItems.reduce((sum, item) => sum + (item.totalAmt || item.amount || 0), 0);
|
||||
}, [expenseItems]);
|
||||
|
||||
// GST Calculation Helper
|
||||
const calculateGST = (amount: number, rate: number, type: 'IGST' | 'CGST_SGST' = 'CGST_SGST') => {
|
||||
const gstAmt = (amount * rate) / 100;
|
||||
const totalAmt = amount + gstAmt;
|
||||
|
||||
if (type === 'IGST') {
|
||||
return {
|
||||
gstAmt,
|
||||
igstRate: rate,
|
||||
igstAmt: gstAmt,
|
||||
cgstRate: 0,
|
||||
cgstAmt: 0,
|
||||
sgstRate: 0,
|
||||
sgstAmt: 0,
|
||||
totalAmt
|
||||
};
|
||||
} else {
|
||||
const halfRate = rate / 2;
|
||||
const halfAmt = gstAmt / 2;
|
||||
return {
|
||||
gstAmt,
|
||||
igstRate: 0,
|
||||
igstAmt: 0,
|
||||
cgstRate: halfRate,
|
||||
cgstAmt: halfAmt,
|
||||
sgstRate: halfRate,
|
||||
sgstAmt: halfAmt,
|
||||
totalAmt
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Check if all required fields are filled
|
||||
const isFormValid = useMemo(() => {
|
||||
const hasCompletionDate = activityCompletionDate !== '';
|
||||
@ -150,15 +195,51 @@ export function DealerCompletionDocumentsModal({
|
||||
const handleAddExpense = () => {
|
||||
setExpenseItems([
|
||||
...expenseItems,
|
||||
{ id: Date.now().toString(), description: '', amount: 0 },
|
||||
{
|
||||
id: Date.now().toString(),
|
||||
description: '',
|
||||
amount: 0,
|
||||
gstRate: 0,
|
||||
gstAmt: 0,
|
||||
cgstRate: 0,
|
||||
cgstAmt: 0,
|
||||
sgstRate: 0,
|
||||
sgstAmt: 0,
|
||||
igstRate: 0,
|
||||
igstAmt: 0,
|
||||
utgstRate: 0,
|
||||
utgstAmt: 0,
|
||||
cessRate: 0,
|
||||
cessAmt: 0,
|
||||
totalAmt: 0
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const handleExpenseChange = (id: string, field: 'description' | 'amount', value: string | number) => {
|
||||
const handleExpenseChange = (id: string, field: string, value: any) => {
|
||||
setExpenseItems(
|
||||
expenseItems.map((item) =>
|
||||
item.id === id ? { ...item, [field]: value } : item
|
||||
)
|
||||
expenseItems.map((item) => {
|
||||
if (item.id === id) {
|
||||
const updatedItem = { ...item, [field]: value };
|
||||
|
||||
// Re-calculate GST if amount or rate changes
|
||||
if (field === 'amount' || field === 'gstRate') {
|
||||
const amount = field === 'amount' ? parseFloat(value) || 0 : item.amount;
|
||||
const rate = field === 'gstRate' ? parseFloat(value) || 0 : item.gstRate;
|
||||
const gst = calculateGST(amount, rate);
|
||||
|
||||
return {
|
||||
...updatedItem,
|
||||
amount,
|
||||
gstRate: rate,
|
||||
...gst
|
||||
};
|
||||
}
|
||||
|
||||
return updatedItem;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
@ -371,7 +452,24 @@ export function DealerCompletionDocumentsModal({
|
||||
setPreviewFile(null);
|
||||
setActivityCompletionDate('');
|
||||
setNumberOfParticipants('');
|
||||
setExpenseItems([]);
|
||||
setExpenseItems([{
|
||||
id: '1',
|
||||
description: '',
|
||||
amount: 0,
|
||||
gstRate: 0,
|
||||
gstAmt: 0,
|
||||
cgstRate: 0,
|
||||
cgstAmt: 0,
|
||||
sgstRate: 0,
|
||||
sgstAmt: 0,
|
||||
igstRate: 0,
|
||||
igstAmt: 0,
|
||||
utgstRate: 0,
|
||||
utgstAmt: 0,
|
||||
cessRate: 0,
|
||||
cessAmt: 0,
|
||||
totalAmt: 0
|
||||
}]);
|
||||
setCompletionDocuments([]);
|
||||
setActivityPhotos([]);
|
||||
setInvoicesReceipts([]);
|
||||
@ -391,6 +489,7 @@ export function DealerCompletionDocumentsModal({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="dealer-completion-documents-modal overflow-hidden flex flex-col">
|
||||
<DialogHeader className="px-6 pt-6 pb-3 flex-shrink-0">
|
||||
@ -449,43 +548,87 @@ export function DealerCompletionDocumentsModal({
|
||||
Add Expense
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
<div className="space-y-3 sm:space-y-4 max-h-[400px] overflow-y-auto pr-1">
|
||||
{expenseItems.map((item) => (
|
||||
<div key={item.id} className="flex gap-2 items-start">
|
||||
<div className="flex-1">
|
||||
<div key={item.id} className="p-4 border rounded-lg bg-gray-50/50 space-y-4 relative group">
|
||||
<div className="flex gap-3 items-start w-full">
|
||||
<div className="flex-1 min-w-0">
|
||||
<Label className="text-[10px] uppercase text-gray-500 font-bold mb-1 block">Item description</Label>
|
||||
<Input
|
||||
placeholder="Item name (e.g., Venue rental, Refreshments, Printing)"
|
||||
placeholder="e.g., Venue rental, Refreshments"
|
||||
value={item.description}
|
||||
onChange={(e) =>
|
||||
handleExpenseChange(item.id, 'description', e.target.value)
|
||||
}
|
||||
className="text-sm"
|
||||
className="w-full bg-white text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-32 sm:w-40">
|
||||
<div className="w-28 sm:w-36 flex-shrink-0">
|
||||
<Label className="text-[10px] uppercase text-gray-500 font-bold mb-1 block">Amount (Base)</Label>
|
||||
<div className="relative">
|
||||
<IndianRupee className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Amount"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={item.amount || ''}
|
||||
onChange={(e) =>
|
||||
handleExpenseChange(item.id, 'amount', parseFloat(e.target.value) || 0)
|
||||
handleExpenseChange(item.id, 'amount', e.target.value)
|
||||
}
|
||||
className="text-sm"
|
||||
className="w-full bg-white text-sm pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-20 sm:w-24 flex-shrink-0">
|
||||
<Label className="text-[10px] uppercase text-gray-500 font-bold mb-1 block">GST %</Label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="%"
|
||||
min="0"
|
||||
max="100"
|
||||
step="0.1"
|
||||
value={item.gstRate || ''}
|
||||
onChange={(e) =>
|
||||
handleExpenseChange(item.id, 'gstRate', e.target.value)
|
||||
}
|
||||
className="w-full bg-white text-sm"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="mt-0.5 hover:bg-red-100 hover:text-red-700 h-9 w-9 p-0"
|
||||
className="mt-5 hover:bg-red-100 hover:text-red-700 flex-shrink-0 h-9 w-9 p-0"
|
||||
onClick={() => handleRemoveExpense(item.id)}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{item.gstAmt > 0 && (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-3 border-t border-dashed border-gray-200">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] text-gray-500 uppercase">CGST ({item.cgstRate}%)</span>
|
||||
<span className="text-xs font-semibold">₹{item.cgstAmt.toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] text-gray-500 uppercase">SGST ({item.sgstRate}%)</span>
|
||||
<span className="text-xs font-semibold">₹{item.sgstAmt.toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] text-gray-500 uppercase">GST Total</span>
|
||||
<span className="text-xs font-semibold">₹{item.gstAmt.toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[10px] text-gray-500 uppercase">Item Total</span>
|
||||
<span className="text-sm font-bold text-[#2d4a3e]">₹{item.totalAmt.toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{expenseItems.length === 0 && (
|
||||
<p className="text-xs sm:text-sm text-gray-500 italic">
|
||||
No expenses added. Click "Add Expense" to add expense items.
|
||||
@ -523,8 +666,7 @@ export function DealerCompletionDocumentsModal({
|
||||
Upload documents proving activity completion (reports, certificates, etc.) - Can upload multiple files or ZIP folder
|
||||
</p>
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${
|
||||
completionDocuments.length > 0
|
||||
className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${completionDocuments.length > 0
|
||||
? 'border-green-500 bg-green-50 hover:border-green-600'
|
||||
: 'border-gray-300 hover:border-blue-500 bg-white'
|
||||
}`}
|
||||
@ -629,8 +771,7 @@ export function DealerCompletionDocumentsModal({
|
||||
Upload photos from the completed activity (event photos, installations, etc.)
|
||||
</p>
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${
|
||||
activityPhotos.length > 0
|
||||
className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${activityPhotos.length > 0
|
||||
? 'border-green-500 bg-green-50 hover:border-green-600'
|
||||
: 'border-gray-300 hover:border-blue-500 bg-white'
|
||||
}`}
|
||||
@ -745,8 +886,7 @@ export function DealerCompletionDocumentsModal({
|
||||
Upload invoices and receipts for expenses incurred
|
||||
</p>
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${
|
||||
invoicesReceipts.length > 0
|
||||
className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${invoicesReceipts.length > 0
|
||||
? 'border-blue-500 bg-blue-50 hover:border-blue-600'
|
||||
: 'border-gray-300 hover:border-blue-500 bg-white'
|
||||
}`}
|
||||
@ -849,8 +989,7 @@ export function DealerCompletionDocumentsModal({
|
||||
Upload attendance records or participant lists (if applicable)
|
||||
</p>
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${
|
||||
attendanceSheet
|
||||
className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${attendanceSheet
|
||||
? 'border-blue-500 bg-blue-50 hover:border-blue-600'
|
||||
: 'border-gray-300 hover:border-blue-500 bg-white'
|
||||
}`}
|
||||
@ -971,7 +1110,6 @@ export function DealerCompletionDocumentsModal({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 px-6 pt-3 pb-6 border-t flex-shrink-0">
|
||||
<Button
|
||||
@ -991,9 +1129,11 @@ export function DealerCompletionDocumentsModal({
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* File Preview Modal - Matching DocumentsTab style */}
|
||||
{previewFile && (
|
||||
{
|
||||
previewFile && (
|
||||
<Dialog
|
||||
open={!!previewFile}
|
||||
onOpenChange={() => {
|
||||
@ -1080,7 +1220,8 @@ export function DealerCompletionDocumentsModal({
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -31,6 +31,19 @@ interface CostItem {
|
||||
id: string;
|
||||
description: string;
|
||||
amount: number;
|
||||
gstRate: number;
|
||||
gstAmt: number;
|
||||
cgstRate: number;
|
||||
cgstAmt: number;
|
||||
sgstRate: number;
|
||||
sgstAmt: number;
|
||||
igstRate: number;
|
||||
igstAmt: number;
|
||||
utgstRate: number;
|
||||
utgstAmt: number;
|
||||
cessRate: number;
|
||||
cessAmt: number;
|
||||
totalAmt: number;
|
||||
}
|
||||
|
||||
interface DealerProposalSubmissionModalProps {
|
||||
@ -65,8 +78,57 @@ export function DealerProposalSubmissionModal({
|
||||
}: DealerProposalSubmissionModalProps) {
|
||||
const [proposalDocument, setProposalDocument] = useState<File | null>(null);
|
||||
const [costItems, setCostItems] = useState<CostItem[]>([
|
||||
{ id: '1', description: '', amount: 0 },
|
||||
{
|
||||
id: '1',
|
||||
description: '',
|
||||
amount: 0,
|
||||
gstRate: 0,
|
||||
gstAmt: 0,
|
||||
cgstRate: 0,
|
||||
cgstAmt: 0,
|
||||
sgstRate: 0,
|
||||
sgstAmt: 0,
|
||||
igstRate: 0,
|
||||
igstAmt: 0,
|
||||
utgstRate: 0,
|
||||
utgstAmt: 0,
|
||||
cessRate: 0,
|
||||
cessAmt: 0,
|
||||
totalAmt: 0
|
||||
},
|
||||
]);
|
||||
|
||||
// GST Calculation Helper
|
||||
const calculateGST = (amount: number, rate: number, type: 'IGST' | 'CGST_SGST' = 'CGST_SGST') => {
|
||||
const gstAmt = (amount * rate) / 100;
|
||||
const totalAmt = amount + gstAmt;
|
||||
|
||||
if (type === 'IGST') {
|
||||
return {
|
||||
gstAmt,
|
||||
igstRate: rate,
|
||||
igstAmt: gstAmt,
|
||||
cgstRate: 0,
|
||||
cgstAmt: 0,
|
||||
sgstRate: 0,
|
||||
sgstAmt: 0,
|
||||
totalAmt
|
||||
};
|
||||
} else {
|
||||
const halfRate = rate / 2;
|
||||
const halfAmt = gstAmt / 2;
|
||||
return {
|
||||
gstAmt,
|
||||
igstRate: 0,
|
||||
igstAmt: 0,
|
||||
cgstRate: halfRate,
|
||||
cgstAmt: halfAmt,
|
||||
sgstRate: halfRate,
|
||||
sgstAmt: halfAmt,
|
||||
totalAmt
|
||||
};
|
||||
}
|
||||
};
|
||||
const [timelineMode, setTimelineMode] = useState<'date' | 'days'>('date');
|
||||
const [expectedCompletionDate, setExpectedCompletionDate] = useState('');
|
||||
const [numberOfDays, setNumberOfDays] = useState('');
|
||||
@ -168,9 +230,9 @@ export function DealerProposalSubmissionModal({
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// Calculate total estimated budget
|
||||
// Calculate total estimated budget (inclusive of GST)
|
||||
const totalBudget = useMemo(() => {
|
||||
return costItems.reduce((sum, item) => sum + (item.amount || 0), 0);
|
||||
return costItems.reduce((sum, item) => sum + (item.totalAmt || item.amount || 0), 0);
|
||||
}, [costItems]);
|
||||
|
||||
// Check if all required fields are filled
|
||||
@ -245,7 +307,24 @@ export function DealerProposalSubmissionModal({
|
||||
const handleAddCostItem = () => {
|
||||
setCostItems(prev => [
|
||||
...prev,
|
||||
{ id: Date.now().toString(), description: '', amount: 0 },
|
||||
{
|
||||
id: Date.now().toString(),
|
||||
description: '',
|
||||
amount: 0,
|
||||
gstRate: 0,
|
||||
gstAmt: 0,
|
||||
cgstRate: 0,
|
||||
cgstAmt: 0,
|
||||
sgstRate: 0,
|
||||
sgstAmt: 0,
|
||||
igstRate: 0,
|
||||
igstAmt: 0,
|
||||
utgstRate: 0,
|
||||
utgstAmt: 0,
|
||||
cessRate: 0,
|
||||
cessAmt: 0,
|
||||
totalAmt: 0
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
@ -255,13 +334,30 @@ export function DealerProposalSubmissionModal({
|
||||
}
|
||||
};
|
||||
|
||||
const handleCostItemChange = (id: string, field: 'description' | 'amount', value: string | number) => {
|
||||
const handleCostItemChange = (id: string, field: string, value: any) => {
|
||||
setCostItems(prev =>
|
||||
prev.map(item =>
|
||||
item.id === id
|
||||
? { ...item, [field]: field === 'amount' ? parseFloat(value.toString()) || 0 : value }
|
||||
: item
|
||||
)
|
||||
prev.map(item => {
|
||||
if (item.id === id) {
|
||||
const updatedItem = { ...item, [field]: value };
|
||||
|
||||
// Re-calculate GST if amount or rate changes
|
||||
if (field === 'amount' || field === 'gstRate') {
|
||||
const amount = field === 'amount' ? parseFloat(value) || 0 : item.amount;
|
||||
const rate = field === 'gstRate' ? parseFloat(value) || 0 : item.gstRate;
|
||||
const gst = calculateGST(amount, rate);
|
||||
|
||||
return {
|
||||
...updatedItem,
|
||||
amount,
|
||||
gstRate: rate,
|
||||
...gst
|
||||
};
|
||||
}
|
||||
|
||||
return updatedItem;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
@ -311,7 +407,24 @@ export function DealerProposalSubmissionModal({
|
||||
}
|
||||
setPreviewDoc(null);
|
||||
setProposalDocument(null);
|
||||
setCostItems([{ id: '1', description: '', amount: 0 }]);
|
||||
setCostItems([{
|
||||
id: '1',
|
||||
description: '',
|
||||
amount: 0,
|
||||
gstRate: 0,
|
||||
gstAmt: 0,
|
||||
cgstRate: 0,
|
||||
cgstAmt: 0,
|
||||
sgstRate: 0,
|
||||
sgstAmt: 0,
|
||||
igstRate: 0,
|
||||
igstAmt: 0,
|
||||
utgstRate: 0,
|
||||
utgstAmt: 0,
|
||||
cessRate: 0,
|
||||
cessAmt: 0,
|
||||
totalAmt: 0
|
||||
}]);
|
||||
setTimelineMode('date');
|
||||
setExpectedCompletionDate('');
|
||||
setNumberOfDays('');
|
||||
@ -524,8 +637,7 @@ export function DealerProposalSubmissionModal({
|
||||
Detailed proposal with activity details and requested information
|
||||
</p>
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-lg p-3 lg:p-4 transition-all duration-200 ${
|
||||
proposalDocument
|
||||
className={`border-2 border-dashed rounded-lg p-3 lg:p-4 transition-all duration-200 ${proposalDocument
|
||||
? 'border-green-500 bg-green-50 hover:border-green-600'
|
||||
: 'border-gray-300 hover:border-blue-500 bg-white'
|
||||
}`}
|
||||
@ -605,8 +717,7 @@ export function DealerProposalSubmissionModal({
|
||||
Any other supporting documents (invoices, receipts, photos, etc.)
|
||||
</p>
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-lg p-3 lg:p-4 transition-all duration-200 ${
|
||||
otherDocuments.length > 0
|
||||
className={`border-2 border-dashed rounded-lg p-3 lg:p-4 transition-all duration-200 ${otherDocuments.length > 0
|
||||
? 'border-blue-500 bg-blue-50 hover:border-blue-600'
|
||||
: 'border-gray-300 hover:border-blue-500 bg-white'
|
||||
}`}
|
||||
@ -727,20 +838,23 @@ export function DealerProposalSubmissionModal({
|
||||
<span className="sm:hidden">Add</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2 lg:space-y-2 max-h-[200px] lg:max-h-[180px] overflow-y-auto">
|
||||
<div className="space-y-3 lg:space-y-4 max-h-[300px] lg:max-h-[280px] overflow-y-auto pr-1">
|
||||
{costItems.map((item) => (
|
||||
<div key={item.id} className="flex gap-2 items-start w-full">
|
||||
<div key={item.id} className="p-3 border rounded-lg bg-gray-50/50 space-y-3 relative group">
|
||||
<div className="flex gap-2 items-start w-full">
|
||||
<div className="flex-1 min-w-0">
|
||||
<Label className="text-[10px] uppercase text-gray-500 font-bold mb-1 block">Description</Label>
|
||||
<Input
|
||||
placeholder="Item description (e.g., Banner printing, Event setup)"
|
||||
placeholder="Item description"
|
||||
value={item.description}
|
||||
onChange={(e) =>
|
||||
handleCostItemChange(item.id, 'description', e.target.value)
|
||||
}
|
||||
className="w-full"
|
||||
className="w-full bg-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-32 lg:w-36 flex-shrink-0">
|
||||
<div className="w-24 lg:w-28 flex-shrink-0">
|
||||
<Label className="text-[10px] uppercase text-gray-500 font-bold mb-1 block">Amount (Base)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Amount"
|
||||
@ -750,20 +864,57 @@ export function DealerProposalSubmissionModal({
|
||||
onChange={(e) =>
|
||||
handleCostItemChange(item.id, 'amount', e.target.value)
|
||||
}
|
||||
className="w-full"
|
||||
className="w-full bg-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-20 lg:w-24 flex-shrink-0">
|
||||
<Label className="text-[10px] uppercase text-gray-500 font-bold mb-1 block">GST %</Label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="%"
|
||||
min="0"
|
||||
max="100"
|
||||
step="0.1"
|
||||
value={item.gstRate || ''}
|
||||
onChange={(e) =>
|
||||
handleCostItemChange(item.id, 'gstRate', e.target.value)
|
||||
}
|
||||
className="w-full bg-white"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="mt-0.5 hover:bg-red-100 hover:text-red-700 flex-shrink-0"
|
||||
className="mt-5 hover:bg-red-100 hover:text-red-700 flex-shrink-0 h-9 w-9 p-0"
|
||||
onClick={() => handleRemoveCostItem(item.id)}
|
||||
disabled={costItems.length === 1}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{item.gstAmt > 0 && (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 pt-1 border-t border-dashed border-gray-200">
|
||||
<div className="text-[10px]">
|
||||
<span className="text-gray-500">CGST ({item.cgstRate}%):</span>
|
||||
<span className="ml-1 font-semibold">₹{item.cgstAmt.toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
<div className="text-[10px]">
|
||||
<span className="text-gray-500">SGST ({item.sgstRate}%):</span>
|
||||
<span className="ml-1 font-semibold">₹{item.sgstAmt.toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
<div className="text-[10px]">
|
||||
<span className="text-gray-500">GST Total:</span>
|
||||
<span className="ml-1 font-semibold">₹{item.gstAmt.toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-right">
|
||||
<span className="text-gray-500">Item Total:</span>
|
||||
<span className="ml-1 font-bold text-gray-900">₹{item.totalAmt.toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-2 border-gray-300 rounded-lg p-3 lg:p-4 bg-white">
|
||||
|
||||
@ -26,7 +26,16 @@ export interface ClaimManagementRequest {
|
||||
};
|
||||
estimatedBudget?: number;
|
||||
closedExpenses?: number;
|
||||
closedExpensesBreakdown?: Array<{ description: string; amount: number }>;
|
||||
closedExpensesBreakdown?: Array<{
|
||||
description: string;
|
||||
amount: number;
|
||||
gstRate?: number;
|
||||
gstAmt?: number;
|
||||
cgstAmt?: number;
|
||||
sgstAmt?: number;
|
||||
igstAmt?: number;
|
||||
totalAmt?: number;
|
||||
}>;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
@ -42,7 +51,16 @@ export interface ClaimManagementRequest {
|
||||
// Proposal Details (Step 1)
|
||||
proposalDetails?: {
|
||||
proposalDocumentUrl?: string;
|
||||
costBreakup: Array<{ description: string; amount: number }>;
|
||||
costBreakup: Array<{
|
||||
description: string;
|
||||
amount: number;
|
||||
gstRate?: number;
|
||||
gstAmt?: number;
|
||||
cgstAmt?: number;
|
||||
sgstAmt?: number;
|
||||
igstAmt?: number;
|
||||
totalAmt?: number;
|
||||
}>;
|
||||
totalEstimatedBudget: number;
|
||||
timelineMode?: 'date' | 'days';
|
||||
expectedCompletionDate?: string;
|
||||
@ -70,6 +88,12 @@ export interface ClaimManagementRequest {
|
||||
creditNoteNumber?: string;
|
||||
creditNoteDate?: string;
|
||||
creditNoteAmount?: number;
|
||||
// PWC Fields
|
||||
irn?: string;
|
||||
ackNo?: string;
|
||||
ackDate?: string;
|
||||
signedInvoiceUrl?: string;
|
||||
taxBreakdown?: any;
|
||||
};
|
||||
|
||||
// Claim Amount
|
||||
@ -152,7 +176,13 @@ export function mapToClaimManagementRequest(
|
||||
const closedExpensesBreakdown = Array.isArray(completionExpenses) && completionExpenses.length > 0
|
||||
? completionExpenses.map((exp: any) => ({
|
||||
description: exp.description || exp.itemDescription || '',
|
||||
amount: Number(exp.amount) || 0
|
||||
amount: Number(exp.amount) || 0,
|
||||
gstRate: exp.gstRate,
|
||||
gstAmt: exp.gstAmt,
|
||||
cgstAmt: exp.cgstAmt,
|
||||
sgstAmt: exp.sgstAmt,
|
||||
igstAmt: exp.igstAmt,
|
||||
totalAmt: exp.totalAmt
|
||||
}))
|
||||
: (completionDetails?.closedExpenses ||
|
||||
completionDetails?.closed_expenses ||
|
||||
@ -200,7 +230,18 @@ export function mapToClaimManagementRequest(
|
||||
const expectedCompletionDate = proposalDetails?.expectedCompletionDate || proposalDetails?.expected_completion_date;
|
||||
const proposal = proposalDetails ? {
|
||||
proposalDocumentUrl: proposalDetails.proposalDocumentUrl || proposalDetails.proposal_document_url,
|
||||
costBreakup: proposalDetails.costBreakup || proposalDetails.cost_breakup || [],
|
||||
costBreakup: Array.isArray(proposalDetails.costBreakup || proposalDetails.cost_breakup)
|
||||
? (proposalDetails.costBreakup || proposalDetails.cost_breakup).map((item: any) => ({
|
||||
description: item.description || '',
|
||||
amount: Number(item.amount) || 0,
|
||||
gstRate: item.gstRate,
|
||||
gstAmt: item.gstAmt,
|
||||
cgstAmt: item.cgstAmt,
|
||||
sgstAmt: item.sgstAmt,
|
||||
igstAmt: item.igstAmt,
|
||||
totalAmt: item.totalAmt
|
||||
}))
|
||||
: [],
|
||||
totalEstimatedBudget: proposalDetails.totalEstimatedBudget || proposalDetails.total_estimated_budget || 0,
|
||||
timelineMode: proposalDetails.timelineMode || proposalDetails.timeline_mode,
|
||||
expectedCompletionDate: expectedCompletionDate,
|
||||
@ -238,6 +279,12 @@ export function mapToClaimManagementRequest(
|
||||
(creditNote.creditNoteAmount ? Number(creditNote.creditNoteAmount) :
|
||||
(claimDetails.creditNoteAmount ? Number(claimDetails.creditNoteAmount) :
|
||||
(claimDetails.credit_note_amount ? Number(claimDetails.credit_note_amount) : undefined)))),
|
||||
// PWC fields
|
||||
irn: invoice.irn || claimDetails.irn,
|
||||
ackNo: invoice.ackNo || claimDetails.ackNo,
|
||||
ackDate: invoice.ackDate || claimDetails.ackDate,
|
||||
signedInvoiceUrl: invoice.signedInvoiceUrl || claimDetails.signedInvoiceUrl,
|
||||
taxBreakdown: invoice.taxBreakdown || claimDetails.taxBreakdown,
|
||||
};
|
||||
|
||||
// Map claim amounts
|
||||
|
||||
Loading…
Reference in New Issue
Block a user