started implementing pwc invoice enhanced cost and expence capturing

src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx

@@ -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">
+            <div className="bg-blue-50 border border-blue-200 rounded-lg overflow-hidden">
-              {activityInfo.closedExpensesBreakdown.map((item: { description: string; amount: number }, index: number) => (
+              <table className="w-full text-xs sm:text-sm">
-                <div key={index} className="flex justify-between items-center text-sm">
+                <thead className="bg-blue-100/50">
-                  <span className="text-gray-700">{item.description}</span>
+                  <tr>
-                  <span className="font-medium text-gray-900">
+                    <th className="px-3 py-2 text-left font-semibold text-blue-900">Description</th>
-                    {formatCurrency(item.amount)}
+                    <th className="px-3 py-2 text-right font-semibold text-blue-900 w-24">Base</th>
-                  </span>
+                    <th className="px-3 py-2 text-right font-semibold text-blue-900 w-24">GST</th>
-                </div>
+                    <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">
+                  <tr className="bg-blue-100/50 font-bold">
-                <span className="font-semibold text-gray-900">Total</span>
+                    <td colSpan={3} className="px-3 py-2 text-blue-900">Final Claim Amount</td>
-                <span className="font-bold text-blue-600">
+                    <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>
+                    </td>
-              </div>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
         )}

src/dealer-claim/components/request-detail/claim-cards/ProcessDetailsCard.tsx

@@ -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-[10px] 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">{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">
+                <div key={index} className="flex justify-between items-center text-[10px] sm:text-xs">
-                  <span className="text-gray-700">{item.description}</span>
+                  <div className="text-gray-700 truncate mr-2" title={item.description}>{item.description}</div>
-                  <span className="font-medium text-gray-900">
+                  <span className="font-medium text-gray-900 whitespace-nowrap">
-                    {formatCurrency(item.amount)}
+                    {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">
+                <div key={index} className="flex justify-between items-center text-[10px] sm:text-xs">
-                  <span className="text-gray-700">{item.description}</span>
+                  <div className="text-gray-700 truncate mr-2" title={item.description}>{item.description}</div>
-                  <span className="font-medium text-gray-900">
+                  <span className="font-medium text-gray-900 whitespace-nowrap">
-                    {formatCurrency(item.amount)}
+                    {formatCurrency(item.totalAmt ?? (item.amount + (item.gstAmt ?? 0)))}
                   </span>
                 </div>
               ))}

src/dealer-claim/components/request-detail/claim-cards/ProposalDetailsCard.tsx

@@ -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">
+                  <td colSpan={3} className="px-4 py-3 text-sm text-gray-900">
-                    Estimated Budget (Total)
+                    Estimated Budget (Total Inclusive of GST)
                   </td>
                   <td className="px-4 py-3 text-sm text-green-700 text-right">
                     {formatCurrency(estimatedTotal)}

src/dealer-claim/components/request-detail/modals/DealerCompletionDocumentsModal.tsx

@@ -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) =>
+      expenseItems.map((item) => {
-        item.id === id ? { ...item, [field]: value } : 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 key={item.id} className="p-4 border rounded-lg bg-gray-50/50 space-y-4 relative group">
-                  <div className="flex-1">
+                      <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 ${
+                    className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${completionDocuments.length > 0
-                    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 ${
+                    className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${activityPhotos.length > 0
-                    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 ${
+                    className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${invoicesReceipts.length > 0
-                    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 ${
+                    className={`border-2 border-dashed rounded-lg p-3 sm:p-4 transition-all duration-200 ${attendanceSheet
-                    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>
+      }
+    </>
   );
 }

src/dealer-claim/components/request-detail/modals/DealerProposalSubmissionModal.tsx

@@ -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 =>
+      prev.map(item => {
-        item.id === id
+        if (item.id === id) {
-          ? { ...item, [field]: field === 'amount' ? parseFloat(value.toString()) || 0 : value }
+          const updatedItem = { ...item, [field]: value };
-          : item
+
-      )
+          // 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 ${
+                    className={`border-2 border-dashed rounded-lg p-3 lg:p-4 transition-all duration-200 ${proposalDocument
-                  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 ${
+                    className={`border-2 border-dashed rounded-lg p-3 lg:p-4 transition-all duration-200 ${otherDocuments.length > 0
-                  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">

src/utils/claimDataMapper.ts

@@ -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