added new column proform amount

src/components/purchase/Purchasetable.jsx

@@ -49,6 +49,17 @@ export const PurchaseColumn = [
       );
     },
   },
+  {
+    key: "proformaInvoiceAmount",
+    label: "Proforma Amount",
+    className: "text-end",
+    render: (item) => (
+      <span>
+        {formatFigure(item?.proformaInvoiceAmount, { type: "currency" })}
+      </span>
+    ),
+  },
+
   {
     key: "totalAmount",
     label: "Total Amount",

src/components/purchase/ViewPurchase.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { usePurchase } from "../../hooks/usePurchase";
 import { SpinnerLoader } from "../common/Loader";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
-import { getColorNameFromHex } from "../../utils/appUtils";
+import { formatFigure, getColorNameFromHex } from "../../utils/appUtils";
 
 const ViewPurchase = ({ purchaseId }) => {
   const { data, isLoading, isError, error } = usePurchase(purchaseId);
@@ -25,11 +25,14 @@ const ViewPurchase = ({ purchaseId }) => {
 
           <div className="col-md-2 d-flex align-items-center">
             <p className="fw-light me-2 mb-0"></p>
-            <span className={`badge rounded-pill bg-label-${getColorNameFromHex(data?.status?.color)}`}>
+            <span
+              className={`badge rounded-pill bg-label-${getColorNameFromHex(
+                data?.status?.color
+              )}`}
+            >
               {data?.status?.displayName || "NA"}
             </span>
           </div>
-
         </div>
       </div>
 
@@ -38,11 +41,15 @@ const ViewPurchase = ({ purchaseId }) => {
           <p className="fw-semibold mb-3">Purchase Details</p>
           <div className="row mb-3">
             <div className="col-md-6">
-              <p className="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Title:</p>
+              <p className="text-secondary mb-0">
+                <i className="bx bx-captions bx-sm me-1"></i>Title:
+              </p>
               <p className="fw-light mb-1">{data?.title}</p>
             </div>
             <div className="col-md-6">
-              <p className="text-secondary mb-0"><i className='bx bx-comment-detail bx-sm me-1'></i>Description:</p>
+              <p className="text-secondary mb-0">
+                <i className="bx bx-comment-detail bx-sm me-1"></i>Description:
+              </p>
               <p className="fw-light mb-1 ">{data?.description}</p>
             </div>
           </div>
@@ -56,68 +63,87 @@ const ViewPurchase = ({ purchaseId }) => {
         <div className="row text-start h-auto">
           {/* Project Name */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Project Name:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bx-captions bx-sm me-1"></i>Project Name:
+            </p>
             <p className="fw-light mb-0">{data?.project?.name}</p>
           </div>
 
           {/* Organization Name */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bxs-component bx-sm me-1'></i>Organization:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bxs-component bx-sm me-1"></i>Organization:
+            </p>
             <p className="fw-light mb-0">{data?.organization?.name}</p>
           </div>
 
           {/* Email */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bx-envelope me-1 bx-sm'></i>Email:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bx-envelope me-1 bx-sm"></i>Email:
+            </p>
             <p className="fw-light mb-0">{data?.organization?.email}</p>
           </div>
 
           {/* Contact Number */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bxs-contact bx-sm me-1"></i>Contact:
+            </p>
             <p className="fw-light mb-0">{data?.organization?.contactNumber}</p>
           </div>
 
           {/* Address */}
           <div className="col-12 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bx-message-square-detail bx-sm me-1"></i>Address:
+            </p>
             <p className="fw-light mb-0">{data?.organization?.address}</p>
           </div>
         </div>
       </div>
 
-
       <div className="col-12 border-bottom">
         <div className="row text-start h-auto">
           <p className="text-muted mb-2 fw-semibold">Supplier</p>
 
           {/* Supplier Name */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Name:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bx-captions bx-sm me-1"></i>Name:
+            </p>
             <p className="fw-light mb-0">{data?.supplier?.name}</p>
           </div>
 
           {/* Contact Person */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bx-support bx-sm me-1'></i>Contact Person:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bx-support bx-sm me-1"></i>Contact Person:
+            </p>
             <p className="fw-light mb-0">{data?.supplier?.contactPerson}</p>
           </div>
 
           {/* Email */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bx-envelope me-1 bx-sm'></i>Email:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bx-envelope me-1 bx-sm"></i>Email:
+            </p>
             <p className="fw-light mb-0">{data?.supplier?.email}</p>
           </div>
 
           {/* Contact Number */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bxs-contact bx-sm me-1"></i>Contact:
+            </p>
             <p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
           </div>
 
           {/* Address */}
           <div className="col-12 mb-3">
-            <p className="text-secondary mb-0"><i className='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
+            <p className="text-secondary mb-0">
+              <i className="bx bx-message-square-detail bx-sm me-1"></i>Address:
+            </p>
             <p className="fw-light mb-0">{data?.supplier?.address}</p>
           </div>
         </div>
@@ -132,22 +158,26 @@ const ViewPurchase = ({ purchaseId }) => {
             <div className="col-12 col-sm-6">
               <div>
                 <p className="text-secondary mb-0">Invoice No:</p>
-                <p className="fw-light mb-1">{data?.invoiceNumber}</p>
+                <p className="fw-light mb-1">{data?.invoiceNumber ?? "NA"}</p>
               </div>
 
               <div>
                 <p className="text-secondary mb-0">Proforma No:</p>
-                <p className="fw-light mb-1">{data?.proformaInvoiceNumber}</p>
+                <p className="fw-light mb-1">
+                  {data?.proformaInvoiceNumber ?? "NA"}
+                </p>
               </div>
 
               <div>
                 <p className="text-secondary mb-0">E-Way Bill:</p>
-                <p className="fw-light mb-1">{data?.eWayBillNumber}</p>
+                <p className="fw-light mb-1">{data?.eWayBillNumber ?? "NA"}</p>
               </div>
 
               <div>
                 <p className="text-secondary mb-0">PO No:</p>
-                <p className="fw-light mb-1">{data?.purchaseOrderNumber}</p>
+                <p className="fw-light mb-1">
+                  {data?.purchaseOrderNumber ?? "NA"}
+                </p>
               </div>
             </div>
 
@@ -156,28 +186,36 @@ const ViewPurchase = ({ purchaseId }) => {
               <div>
                 <p className="text-secondary mb-0 ">Invoice Date:</p>
                 <p className="fw-light mb-1">
-                  {formatUTCToLocalTime(data?.invoiceDate)}
+                  {data?.invoiceDate
+                    ? formatUTCToLocalTime(data?.invoiceDate)
+                    : "NA"}
                 </p>
               </div>
 
               <div>
                 <p className="text-secondary mb-0">Proforma Date:</p>
                 <p className="fw-light mb-1">
-                  {formatUTCToLocalTime(data?.proformaInvoiceDate)}
+                  {data?.proformaInvoiceDate
+                    ? formatUTCToLocalTime(data?.proformaInvoiceDate)
+                    : "NA"}
                 </p>
               </div>
 
               <div>
                 <p className="text-secondary mb-0">E-Way Date:</p>
                 <p className="fw-light mb-1">
-                  {formatUTCToLocalTime(data?.eWayBillDate)}
+                  {data?.eWayBillDate
+                    ? formatUTCToLocalTime(data?.eWayBillDate)
+                    : "NA"}
                 </p>
               </div>
 
               <div>
                 <p className="text-secondary mb-0">PO Date:</p>
                 <p className="fw-light">
-                  {formatUTCToLocalTime(data?.purchaseOrderDate)}
+                  {data?.purchaseOrderDate
+                    ? formatUTCToLocalTime(data?.purchaseOrderDate)
+                    : "NA"}
                 </p>
               </div>
             </div>
@@ -189,26 +227,55 @@ const ViewPurchase = ({ purchaseId }) => {
         <div className="text-start h-auto">
           <p className="text-muted mb-2 fw-semibold">Amount Summary</p>
 
+          <div className="d-flex justify-content-between">
+            <p className="text-secondary mb-0">Proforma Amount</p>
+            <p className="fw-light mb-1">
+              {formatFigure(data?.proformaInvoiceAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </p>
+          </div>
           <div className="d-flex justify-content-between">
             <p className="text-secondary mb-0">Base Amount</p>
-            <p className="fw-light mb-1">₹ {data?.baseAmount}</p>
+            <p className="fw-light mb-1">
+              {formatFigure(data?.baseAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </p>
           </div>
 
           <div className="d-flex justify-content-between">
             <p className="text-secondary mb-0">Tax</p>
-            <p className="fw-light mb-1">₹ {data?.taxAmount}</p>
+            <p className="fw-light mb-1">
+              {formatFigure(data?.taxAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </p>
           </div>
 
           <div className="d-flex justify-content-between">
             <p className="text-secondary mb-0">Transport</p>
-            <p className="fw-light mb-1">₹ {data?.transportCharges}</p>
+            <p className="fw-light mb-1">
+              {formatFigure(data?.transportCharges, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </p>
           </div>
 
           <hr className="my-2" />
 
           <div className="d-flex justify-content-between fs-6 fs-medium">
             <span>Total</span>
-            <span>₹ {data?.totalAmount}</span>
+            <span>
+              {formatFigure(data?.totalAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </span>
           </div>
 
           <div className="mt-2">

src/utils/appUtils.js

@@ -137,7 +137,7 @@ export const formatFigure = (
     maximumFractionDigits = 2,
   } = {}
 ) => {
-  if (amount == null || isNaN(amount)) return "-";
+  if (amount == null || isNaN(amount)) return "--";
 
   const formatterOptions = {
     style: