import { MontlyMisInfoReq } from '@gtpl/shared-models/analytics-data'
import { WarehouseDashboardService } from '@gtpl/shared-services/analytics'
import { Button, Card, Col, DatePicker, Form, message, Row } from 'antd'
import React, {  useState } from 'react'
import ReactHTMLTableToExcel from 'react-html-table-to-excel';



const MonthlyMISReport = () => {
    const [monthlyData, setMonthlyData] = useState<any[]>([])
    const [selectedYear, setSelectedYear] = useState<number>()
    const [selectedMonth, setSelectedMonth] = useState<number>()
    const [isFiltered, setIsFiltered] = useState(false);

    const { MonthPicker } = DatePicker;
    const [form] = Form.useForm()
    const services = new WarehouseDashboardService()



  const getMontlyMisInfo = (month,year) =>{
    console.log(month,"month")
    console.log(year,"year")
    const loggedInUnitId = Number(localStorage.getItem('unit_id'));
    const req = new MontlyMisInfoReq(month,year,loggedInUnitId)
    services.getMontlyMisInfo(req).then(res=>{
        if(res.status){
            setMonthlyData(res.data)
        } else {
            setMonthlyData([])
            message.error(res.internalMessage)
        }  
     })

} 

const onReset = () => {
    setMonthlyData([])  
    form.resetFields()
    setSelectedMonth(null)
    setSelectedYear(null)

    
  }

  const handleMonthChange = (date, dateString) => {
    if (date) {
      const year = date.year()
      const month = date.month() + 1
      setSelectedMonth(month)
      setSelectedYear(year)
    }
  }

  const onSearch = () => {
    if (selectedMonth && selectedYear) {
        getMontlyMisInfo(selectedMonth, selectedYear)
        setIsFiltered(true);
    } else {
        message.error('Please Select Month')
    }
}

{monthlyData.map((rec,indx)=>
     console.log(rec.month)

)}

const calculateForEachMonth = (monthlyData) => {
    return monthlyData.map((data) => {
      const { columnsInfo } = data;

      // Initialize variables for the required quantities
      let freshProductionQty = 0
      let honFgQty = 0
      let receivedRmPurchaseQty = 0

      // Loop through columnsInfo to find the relevant values
      columnsInfo.forEach((item) => {
        if (item.columnName === 'FRESH PRODUCTION QUANTITY') {
          freshProductionQty = item.value ? item.value : 0;
        } else if (item.columnName === 'HON FG QTY') {
          honFgQty = item.value ? item.value : 0;
        } else if (item.columnName === 'RECEIVED RM PURCHASE QUANTITY') {
          receivedRmPurchaseQty = item.value ? item.value : 0;
        }
      });

      // Perform the calculation if all values are available
      if (
        freshProductionQty !== undefined &&
        honFgQty !== undefined &&
        receivedRmPurchaseQty !== undefined
      ) {
        return {
          calculatedValue:
            (freshProductionQty - honFgQty) / (receivedRmPurchaseQty - honFgQty),
        };
      } else {
        return {
          calculatedValue: 0,
        };
      }
    });
  };

  // Calculate values for each month
  const calculatedResults = calculateForEachMonth(monthlyData);

  const calculateTotalFreshProductionQty = (monthlyData) => {
    // Initialize the total sum for fresh production quantity
    let totalFreshProductionQty = 0;
    let totalReProductionQty = 0;
    let totalLocalSale = 0
    let totalPurchaseQty = 0
    let totalHONProduction = 0
    let totalExportStock = 0
    let totalLabInspection = 0
    let totalOtherPlantPurchase = 0
    let totalOtherPlantTransfer = 0
    let totalhlYield = 0
    let totalOpeningStock = 0
    let totalClosingStock = 0







  
    // Loop through each month's data
    monthlyData.forEach((data) => {
      const { columnsInfo } = data;
  
      // Loop through columnsInfo to find 'FRESH PRODUCTION QUANTITY' and accumulate the sum
      columnsInfo.forEach((item) => {
        if (item.columnName === 'FRESH PRODUCTION QUANTITY') {
          totalFreshProductionQty += item.value ? item.value : 0;
        } else  if (item.columnName === 'REPROCESS QUANTITY'){
            totalReProductionQty += item.value ? item.value : 0;
        } else if (item.columnName === 'LOCAL SALE QUANTITY'){
            totalLocalSale += item.value ? item.value : 0;
        } else if (item.columnName === 'RECEIVED RM PURCHASE QUANTITY'){
            totalPurchaseQty += item.value ? item.value : 0; 
        } else if (item.columnName === "HON FG QTY"){
            totalHONProduction += item.value ? item.value : 0;     
        } else if (item.columnName === "DISPATCHED QUANTITY"){
            totalExportStock += item.value ? item.value : 0; 
        } else if (item.columnName === "LAB COMPLIMENTS QUANTITY"){
            totalLabInspection += item.value ? item.value : 0; 
        } else if (item.columnName === "FG PURCHASE QTY"){
            totalOtherPlantPurchase += item.value ? item.value : 0; 
        } else if (item.columnName === "TRANSFER QTY"){
            totalOtherPlantTransfer += item.value ? item.value : 0; 
        } else if (item.columnName === "HON TO HL YIELD"){
            totalhlYield += item.value ? item.value : 0; 
        } else if (item.columnName === "OPENING STOCK"){
            totalOpeningStock += item.value ? item.value : 0; 
        }else if (item.columnName === "CLOSING STOCK"){
            totalClosingStock += item.value ? item.value : 0; 
        }
      });
    });
  
    return {totalFreshProductionQty,totalReProductionQty,totalLocalSale,totalPurchaseQty,totalHONProduction,totalExportStock,totalLabInspection,totalOtherPlantPurchase,totalOtherPlantTransfer,totalhlYield,totalOpeningStock,totalClosingStock}
  };
  
  // Example usage to calculate the total
  const {totalFreshProductionQty,totalReProductionQty,totalLocalSale,totalPurchaseQty,totalHONProduction,totalExportStock,totalLabInspection,totalOtherPlantTransfer,totalOtherPlantPurchase,totalhlYield,totalOpeningStock,totalClosingStock} = calculateTotalFreshProductionQty(monthlyData);

  // testing...

  const domesticPerKgCalculation = (monthlyData) => {
    return monthlyData.map((data) => {
      const { columnsInfo } = data;
  
      // Initialize variables for the required quantities
      let domesticQty = 0;
      let localQty = 0;
  
      // Loop through columnsInfo to find the relevant values
      columnsInfo.forEach((item) => {
        if (item.columnName === 'DOMESTIC SALE AMOUNT') {
          domesticQty = item.value ? item.value : 0;
        } else if (item.columnName === 'LOCAL SALE QUANTITY') {
          localQty = item.value ? item.value : 0;
        }
      });
  
      // Perform the calculation, ensuring no division by zero
      if (localQty !== 0) {
        return {
          calculatedValue: domesticQty / localQty,
        };
      } else {
        return {
          calculatedValue: 0, // If localQty is 0, return 0 to avoid NaN
        };
      }
    });
  };
  
  // Calculate values for each month
  const domesticPerKgCalculationResult = domesticPerKgCalculation(monthlyData);
  
   console.log(domesticPerKgCalculationResult,"klmm")
   let totalSum = 0;
   let totalIssues = 0
   let totalExportAmount = 0
   let totalDomesticAmount = 0
   let totalSaleReturnAmount = 0
   let totalProcurementAmount = 0
   let totalProcessingAmount = 0
   let totalSolarAmount = 0
   let totalPackingAmount = 0
   let totalSaltAmount = 0
   let totalQCAmount = 0
   let totalConsumableAmount = 0
   let totalFinanceCostAmount = 0
   let totalDepreciationAmount = 0
   let totalAdminAmount = 0
   let totalOceanFreightUSAAmount = 0
   let totalOceanFreightJAPANAmount = 0
   let totalOceanFreightCanadaAmount = 0
   let oceanSumAmount = 0
   let subTotalSumAmount = 0            


  return (
    <div>
         <Card size='small' title={<span style={{color:'white'}}>MONTHLY MIS REPORT</span>} 
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
      <br />
      <Form onFinish={onSearch} form={form}>
          <Row gutter={24}>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
            <Form.Item name='date' label = "Month">
              <MonthPicker style={{width:'100%'}} onChange={handleMonthChange} placeholder='Select Month'/>
            </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }}>
            <Form.Item>
              <Button htmlType='submit' type='primary'>Get Report</Button>
            </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }} style={{paddingLeft:"45px"}}>
            <Form.Item>
              <Button type='primary' onClick={onReset}>Reset</Button>
            </Form.Item>
            </Col>

          </Row>
        </Form>
            <html>
                <body>
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                {monthlyData.length > 0 && (
                <ReactHTMLTableToExcel
                id="export-excel-button"
                // className="download-table-xls-button"
                table="my-table"
                filename="Montly_Mis_Report"
                sheet="Montly MiS Report"
                buttonText="Get Excel"
                className="ant-btn ant-btn-primary"
            />
        ) }
                </div>
                <br/>
                <br/>
                    <table id="my-table"> 
                {(monthlyData.length) ? <>

              
                        <tr>
                            <table  cellPadding="10" style={{ width: '100%', borderCollapse: 'collapse'}}>
                            <thead>
                                <tr>
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '300px' }}>PARTICULARS</th>
                                {monthlyData.map((rec, indx) => (
                                    <>
                                    <th key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{`${rec.month} ${rec.year}`}</th>
                                    </>
                                ))}
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>CUMULATIVE</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>Opening stock in Kgs</td>
                                {monthlyData.map((rec, indx) => {
                                            const opening = rec.columnsInfo.find(
                                                (column) => column.columnName === "OPENING STOCK"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {opening ? opening.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px'}} colSpan={2}>{totalOpeningStock ? totalOpeningStock : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>Closing Stock Kgs</td>
                                {monthlyData.map((rec, indx) => {
                                            const close = rec.columnsInfo.find(
                                                (column) => column.columnName === "CLOSING STOCK"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {close ? close.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalClosingStock ? totalClosingStock : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>Export Stock Kgs</td>
                                {monthlyData.map((rec, indx) => {
                                            const exportSaleQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "DISPATCHED QUANTITY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {exportSaleQuantity ? exportSaleQuantity.value : 0}
                                                </td>
                                            );
                                        })}
                                 <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalExportStock ? totalExportStock : 0}</td>

                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>Local Sales In kgs</td>
                                {/* {monthlyData.map((rec, indx) => (
                                    <>
                                    
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))} */}
                                      {monthlyData.map((rec, indx) => {
                                            // Find the entry where the columnName is "LOCAL SALE QUANTITY"
                                            const localSaleQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "LOCAL SALE QUANTITY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {localSaleQuantity ? localSaleQuantity.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalLocalSale ? totalLocalSale : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>Lab Inspections & Complements In Kgs</td>
                                {monthlyData.map((rec, indx) => {
                                            const labInspectQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "LAB COMPLIMENTS QUANTITY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {labInspectQuantity ? labInspectQuantity.value : 0}
                                                </td>
                                            );
                                        })}
                              <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalLabInspection ? totalLabInspection : 0}</td>

                                </tr>
                            </tbody>
                            {/* <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>Other Plants Transfers(OPT)</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>0</td>
                                </tr>
                            </tbody> */}
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>Total Issues In Kgs</td>
                                {/* {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} colSpan={2}>0</td> */}
                                   {monthlyData.map((rec, indx) => {
                                    const exportSale = rec.columnsInfo.find(
                                        (column) => column.columnName === "DISPATCHED QUANTITY"
                                    );
                                    const localSale = rec.columnsInfo.find(
                                        (column) => column.columnName === "LOCAL SALE QUANTITY"
                                    );

                                    const labInspection = rec.columnsInfo.find(
                                        (column) => column.columnName === "LAB COMPLIMENTS QUANTITY"
                                    );

                                    // Initialize the result as 0
                                    let divisionResults = 0;
                                   

                                    const localSaleValue = localSale 
                                        ? Number(localSale.value) || 0 
                                        : 0;

                                    const exportSaleValue = exportSale 
                                        ? Number(exportSale.value) || 0 
                                        : 0;

                                    const labInspectionValue = labInspection 
                                        ? Number(labInspection.value) || 0 
                                        : 0;    

                                    // Sum the values
                                    divisionResults = localSaleValue + exportSaleValue + labInspectionValue 
                                    totalIssues += divisionResults;

                                    return (
                                        <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px', fontWeight: "bold" }} colSpan={2}>
                                            {/* Display the sum, rounded to 2 decimal places */}
                                            {divisionResults.toFixed(2)}
                                        </td>
                                    );
                                })}

                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} colSpan={2}>{totalIssues.toFixed(2)}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>Fresh Production In kgs</td>
                                {/* {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))} */}
                                {monthlyData.map((rec, indx) => {
                                            const freshProductionQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {freshProductionQuantity ? freshProductionQuantity.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalFreshProductionQty ? totalFreshProductionQty: 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>Re Production In kgs</td>
                                {monthlyData.map((rec, indx) => {
                                            const reProcessQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "REPROCESS QUANTITY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {reProcessQuantity ? reProcessQuantity.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalReProductionQty ? totalReProductionQty : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>Total Production In kgs</td>
                                {/* {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} colSpan={2}>0</td> */}
                             {monthlyData.map((rec, indx) => {
                                    // Find the entry where the columnName is "FRESH PRODUCTION QUANTITY" and "REPROCESS QUANTITY"
                                    const freshProductionQuantity = rec.columnsInfo.find(
                                        (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                    );
                                    const reProductionQuantity = rec.columnsInfo.find(
                                        (column) => column.columnName === "REPROCESS QUANTITY"
                                    );

                                    // Initialize the result as 0
                                    let divisionResults = 0;
                                   

                                    // If freshProductionQuantity exists, use its value, otherwise default to 0
                                    const freshProductionQuantityValue = freshProductionQuantity 
                                        ? Number(freshProductionQuantity.value) || 0 
                                        : 0;

                                    // If reProductionQuantity exists, use its value, otherwise default to 0
                                    const reProductionQuantityValue = reProductionQuantity 
                                        ? Number(reProductionQuantity.value) || 0 
                                        : 0;

                                    // Sum the values
                                    divisionResults = freshProductionQuantityValue + reProductionQuantityValue;
                                    totalSum += divisionResults;

                                    return (
                                        <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px', fontWeight: "bold" }} colSpan={2}>
                                            {/* Display the sum, rounded to 2 decimal places */}
                                            {divisionResults.toFixed(2)}
                                        </td>
                                    );
                                })}

                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} colSpan={2}>{totalSum.toFixed(2)}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>Purchase Qty (Received at plant) in Kgs</td>
                                {monthlyData.map((rec, indx) => {
                                            // Find the entry where the columnName is "LOCAL SALE QUANTITY"
                                            const receivedRMPurchaseQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "RECEIVED RM PURCHASE QUANTITY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px'}} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {receivedRMPurchaseQuantity ? receivedRMPurchaseQuantity.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalPurchaseQty ?totalPurchaseQty.toFixed(2) : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>Closing stock Kgs</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>Purchase Qty (Procured) in Kgs</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>Procured RM Purchase Qty</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>Qty Gain / Loss in Kgs</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px', fontWeight:"bold" }}>RM Avg. Price Per Kg</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>HON Production in Kgs</td>
                                {monthlyData.map((rec, indx) => {
                                            const honFgQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "HON FG QTY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {honFgQuantity ? honFgQuantity.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalHONProduction ? totalHONProduction : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>Other Plant Purchases Qty in Kgs</td>
                                {monthlyData.map((rec, indx) => {
                                            const fgQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "FG PURCHASE QTY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {fgQuantity ? fgQuantity.value : 0}
                                                </td>
                                            );
                                        })}

                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalOtherPlantPurchase ? totalOtherPlantPurchase : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>Other Plant Transfers Qty in Kgs (RECEIVED)</td>
                                {monthlyData.map((rec, indx) => {
                                            const transferQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "TRANSFER QTY"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {transferQuantity ? transferQuantity.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalOtherPlantTransfer ? totalOtherPlantTransfer : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>HON TO FG Yield</td>
                                {/* {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))} */}
                                       {calculatedResults.map((result, indx) => (
                                    <>
                                    <td  style={{ textAlign: 'center', border: '1px solid #000', width: '100px', fontWeight:"bold" }}colSpan={2} >{isNaN(result.calculatedValue) ? 0 :result.calculatedValue.toFixed(2)}</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} colSpan={2}>{isNaN(totalFreshProductionQty/totalPurchaseQty) ? 0 :(totalFreshProductionQty/totalPurchaseQty).toFixed(2)}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>HON TO HLSO Yield</td>
                                {monthlyData.map((rec, indx) => {
                                            const hlYield = rec.columnsInfo.find(
                                                (column) => column.columnName === "HON TO HL YIELD"
                                            );
                                            return (
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2} >
                                                    {hlYield ? hlYield.value : 0}
                                                </td>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{totalhlYield ? totalhlYield : 0}</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>Total Containers Shipped</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}colSpan={2} >0</td>

                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>0</td>
                                </tr>
                            </tbody>
                            
                            </table>
                        </tr>
             
                        <tr>
                            <table  cellPadding="10" style={{ width: '100%', borderCollapse: 'collapse'}}>
                            <thead>
                                <tr>
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '300px' }}>INCOME DETAILS</th>
                                {monthlyData.map((rec, indx) => (
                                    <>
                                    <th key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>AMOUNT(RS)</th>
                                    <th key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>PER KG</th>
                                    </>
                                ))}
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>AMOUNT(RS)</th>
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>PER KG</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>EXPORT SALES</td>
                                {/* {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    </>
                                ))} */}
                                 {monthlyData.map((rec, indx) => {    
                                            const exportsSale = rec.columnsInfo.find(
                                                (column) => column.columnName === "EXPORTS SALES AMOUNT"
                                            );


                                            totalExportAmount += exportsSale ? exportsSale.value : 0;

                                    return (
                                        <>
                                            <td  style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                {exportsSale ? exportsSale.value : 0}
                                            </td>
                                            
                                            <td key={`local-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                {0}
                                            </td>
                                        </>
                                    );
                                      })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalExportAmount ? totalExportAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>DOMESTIC SALES</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const domestic = rec.columnsInfo.find(
                                                (column) => column.columnName === "DOMESTIC SALE AMOUNT"
                                            );

                                            const localSaleQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "LOCAL SALE QUANTITY"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontSize:12 }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {domestic ? domestic.value : 0}
                                                
                                                </td>
                                                
                                                <td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontSize:12 }}>{(domestic ? domestic.value : 0 / localSaleQuantity ?localSaleQuantity.value : 0)}</td>

                                                </>
                                            );
                                        })}  */}
                                        
                                  {monthlyData.map((rec, indx) => {    
                                            const domestic = rec.columnsInfo.find(
                                                (column) => column.columnName === "DOMESTIC SALE AMOUNT"
                                            );

                                            const localSaleQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "LOCAL SALE QUANTITY"
                                            );
                                            
                                            // Initialize the result as 0
                                            let divisionResult = 0;

                                            // Calculate the division if both values exist
                                            if (domestic && localSaleQuantity) {
                                                const domesticValue = domestic.value as number; // Ensure it's treated as a number
                                                const localValue = localSaleQuantity.value as number; // Ensure it's treated as a number

                                                if (localValue !== 0) {
                                                    divisionResult = (domesticValue / localValue);
                                                }
                                            }
                                            totalDomesticAmount += domestic ? domestic.value : 0;

                                    return (
                                        <>
                                            <td key={`domestic-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                {/* Display the value if found, otherwise display 0 */}
                                                {domestic ? domestic.value : 0}
                                            </td>
                                            
                                            <td key={`local-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                {/* Render the division result as a number, or 0 if the result is NaN */}
                                                {isNaN(divisionResult) ? 0 : divisionResult.toFixed(2)}
                                            </td>
                                        </>
                                    );
                                      })}


                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalDomesticAmount ? totalDomesticAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>OTHER INCOME</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>TMA Incentive</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>SALES DISCOUNTS (CHINA & UAE)</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>SALES RETURNS</td>
                                {monthlyData.map((rec, indx) => {    
                                            const saleReturn = rec.columnsInfo.find(
                                                (column) => column.columnName === "SALE RETUEN"
                                            );

                                            totalSaleReturnAmount += saleReturn ? saleReturn.value : 0;

                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {saleReturn ? saleReturn.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalSaleReturnAmount ? totalSaleReturnAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>TOTAL INCOME</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            </table>
                        </tr>
                         <tr>
                            <table cellPadding="10" style={{ width: '100%', borderCollapse: 'collapse'}}>
                           <thead>
                                <tr>
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '300px' }}>PARTICULARS</th>
                                {monthlyData.map((rec, indx) => (
                                    <>
                                    <th key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{`${rec.month} ${rec.year}`}</th>
                                    </>
                                ))}
                                
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} colSpan={2}>{`${monthlyData[0].month} ${monthlyData[0].year} - ${monthlyData[monthlyData.length - 1].month} ${monthlyData[monthlyData.length - 1].year}`}</th>
                                </tr>
                            </thead>
                            <thead>
                                <tr>
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '300px' }}>EXPENDITURE DETAILS</th>
                                {monthlyData.map((rec, indx) => (
                                    <>
                                    <th key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>AMOUNT(RS)</th>
                                    <th key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>PER KG</th>
                                    </>
                                ))}
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>AMOUNT(RS)</th>
                                <th style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>PER KG</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>RAW MATERIAL COST</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>FG MATERIAL TRANSFER COST</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>FG MATERIAL PROCUREMENT COST</td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}></td>
                                {monthlyData.map((_, indx) => (
                                    <>
                                    <td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}></td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}></td>
                                    </>
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} ></td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}></td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>PROCUREMENT COST (Freight & Ice)</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const procurement = rec.columnsInfo.find(
                                                (column) => column.columnName === "Procurement Freight"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontSize:12 }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {procurement ? procurement.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })} */}
                                        {monthlyData.map((rec, indx) => {    
                                            const procurement = rec.columnsInfo.find(
                                                (column) => column.columnName === "Procurement Freight"
                                            );

                                            const freshQuantity = rec.columnsInfo.find(
                                                (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                            );
                                            
                                            // Initialize the result as 0
                                            let divisionResult = 0;

                                            // Calculate the division if both values exist
                                            if (procurement && freshQuantity) {
                                                const procurementValue = procurement.value as number; // Ensure it's treated as a number
                                                const freshQuantityValue = freshQuantity.value as number; // Ensure it's treated as a number

                                                if (freshQuantityValue !== 0) {
                                                    divisionResult = (procurementValue / freshQuantityValue);
                                                }
                                            }
                                            totalProcurementAmount += procurement ? procurement.value : 0;

                                        return (
                                        <>
                                            <td key={`domestic-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                {/* Display the value if found, otherwise display 0 */}
                                                {procurement ? procurement.value : 0}
                                            </td>
                                            
                                            <td key={`local-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                {/* Render the division result as a number, or 0 if the result is NaN */}
                                                {isNaN(divisionResult) ? 0 : divisionResult.toFixed(2)}
                                            </td>
                                        </>
                                        );
                                        })} 
                                        <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalProcurementAmount ? totalProcurementAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>LABOUR COST</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                               <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>PROCESSING CHARGES</td>
                                {monthlyData.map((rec, indx) => {    
                                            const processingCharges = rec.columnsInfo.find(
                                                (column) => column.columnName === "PROCESSING CHARGES"
                                            );
                                            totalProcessingAmount += processingCharges ? processingCharges.value : 0;
                            

                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px'}}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {processingCharges ? processingCharges.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalProcessingAmount ? totalProcessingAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px'}}>ELECTRICITY & FUEL COST</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px'}}>SOLAR UNITS GENERATED VALUE</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const solar = rec.columnsInfo.find(
                                                (column) => column.columnName === "SOLAR UNITS INCOME"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {solar ? solar.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })} */} 

                                {monthlyData.map((rec, indx) => {
                                    // Find the entry where the columnName is "FRESH PRODUCTION QUANTITY" and "REPROCESS QUANTITY"
                                    const freshProductionQuantity = rec.columnsInfo.find(
                                        (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                    );
                                    const reProductionQuantity = rec.columnsInfo.find(
                                        (column) => column.columnName === "REPROCESS QUANTITY"
                                    );

                                    const solar = rec.columnsInfo.find(
                                        (column) => column.columnName === "SOLAR UNITS INCOME"
                                    );

                                    // Initialize the result as 0
                                    let divisionResults = 0;
                                

                                    // If freshProductionQuantity exists, use its value, otherwise default to 0
                                    const freshProductionQuantityValue = freshProductionQuantity 
                                        ? Number(freshProductionQuantity.value) || 0 
                                        : 0;

                                    // If reProductionQuantity exists, use its value, otherwise default to 0
                                    const reProductionQuantityValue = reProductionQuantity 
                                        ? Number(reProductionQuantity.value) || 0 
                                        : 0;

                                    const solarValue = solar 
                                        ? Number(solar.value) || 0 
                                        : 0;

                                    // Sum the values
                                    divisionResults = freshProductionQuantityValue + reProductionQuantityValue;
                                    totalSolarAmount += solar ? solar.value : 0;



                                    return (
                                        <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                            {/* Display the sum, rounded to 2 decimal places */}
                                            {solar ? solar.value : 0}
                                        </td><td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>{isNaN(solarValue/divisionResults) ? 0 :(solarValue/divisionResults).toFixed(2)}</td></>
                                    );
                                    // {isNaN(divisionResult) ? 0 : divisionResult.toFixed(2)}

                                })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalSolarAmount ? totalSolarAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>PACKING MATERIAL COST</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const packingMatetial = rec.columnsInfo.find(
                                                (column) => column.columnName === "PACKING MAT"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {packingMatetial ? packingMatetial.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })}  */}
                                 {monthlyData.map((rec, indx) => {
                                  
                                    const freshProductionQuantity = rec.columnsInfo.find(
                                        (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                    );
                                    const reProductionQuantity = rec.columnsInfo.find(
                                        (column) => column.columnName === "REPROCESS QUANTITY"
                                    );

                                    const packingMatetial = rec.columnsInfo.find(
                                        (column) => column.columnName === "PACKING MAT"
                                    );

                                    // Initialize the result as 0
                                    let divisionResults = 0;
                                

                                    // If freshProductionQuantity exists, use its value, otherwise default to 0
                                    const freshProductionQuantityValue = freshProductionQuantity 
                                        ? Number(freshProductionQuantity.value) || 0 
                                        : 0;

                                    // If reProductionQuantity exists, use its value, otherwise default to 0
                                    const reProductionQuantityValue = reProductionQuantity 
                                        ? Number(reProductionQuantity.value) || 0 
                                        : 0;

                                    const packingMatetialValue = packingMatetial 
                                        ? Number(packingMatetial.value) || 0 
                                        : 0;

                                    // Sum the values
                                    divisionResults = freshProductionQuantityValue + reProductionQuantityValue;
                                    totalPackingAmount += packingMatetialValue ? packingMatetialValue : 0



                                    return (
                                        <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                            {/* Display the sum, rounded to 2 decimal places */}
                                            {packingMatetialValue ? packingMatetialValue : 0}
                                        </td><td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>{isNaN(packingMatetialValue/divisionResults) ? 0 :(packingMatetialValue/divisionResults).toFixed(2)}</td></>
                                        
                                    );
                                })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalPackingAmount ? totalPackingAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                                <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px'}}>SALT & CHEMICLE COST</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const salt = rec.columnsInfo.find(
                                                (column) => column.columnName === "SALT & CHEM"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {salt ? salt.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                })}  */}

                       {monthlyData.map((rec, indx) => {
                                  
                                  const freshProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                  );
                                  const reProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "REPROCESS QUANTITY"
                                  );

                                  const salt = rec.columnsInfo.find(
                                      (column) => column.columnName === "SALT & CHEM"
                                  );

                                  // Initialize the result as 0
                                  let divisionResults = 0;
                              

                                  // If freshProductionQuantity exists, use its value, otherwise default to 0
                                  const freshProductionQuantityValue = freshProductionQuantity 
                                      ? Number(freshProductionQuantity.value) || 0 
                                      : 0;

                                  // If reProductionQuantity exists, use its value, otherwise default to 0
                                  const reProductionQuantityValue = reProductionQuantity 
                                      ? Number(reProductionQuantity.value) || 0 
                                      : 0;

                                  const saltValue = salt 
                                      ? Number(salt.value) || 0 
                                      : 0;

                                  // Sum the values
                                  divisionResults = freshProductionQuantityValue + reProductionQuantityValue;
                                  totalSaltAmount += saltValue ? saltValue : 0



                                  return (
                                      <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                          {/* Display the sum, rounded to 2 decimal places */}
                                          {saltValue ? saltValue : 0}
                                      </td><td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>{isNaN(saltValue/divisionResults) ? 0 :(saltValue/divisionResults).toFixed(2)}</td></>
                                  );
                              })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalSaltAmount ? totalSaltAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>QC COST</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const qcCost = rec.columnsInfo.find(
                                                (column) => column.columnName === "QC COST"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px'}}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {qcCost ? qcCost.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })} */}

                       {monthlyData.map((rec, indx) => {
                                  
                                  const freshProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                  );
                                  const reProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "REPROCESS QUANTITY"
                                  );

                                  const qcCost = rec.columnsInfo.find(
                                      (column) => column.columnName === "QC COST"
                                  );

                                  // Initialize the result as 0
                                  let divisionResults = 0;
                              

                                  // If freshProductionQuantity exists, use its value, otherwise default to 0
                                  const freshProductionQuantityValue = freshProductionQuantity 
                                      ? Number(freshProductionQuantity.value) || 0 
                                      : 0;

            

                                  const qcCostValue = qcCost 
                                      ? Number(qcCost.value) || 0 
                                      : 0;

                                  totalQCAmount += qcCostValue ? qcCostValue : 0
                                    
                                  return (
                                      <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                          {/* Display the sum, rounded to 2 decimal places */}
                                          {qcCostValue ? qcCostValue : 0}
                                      </td><td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>{isNaN(qcCostValue/freshProductionQuantityValue) ? 0 :(qcCostValue/freshProductionQuantityValue).toFixed(2)}</td></>
                                  );
                              })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalQCAmount ? totalQCAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>CONSUMABLES COST,  BOILER FUEL</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const consumables = rec.columnsInfo.find(
                                                (column) => column.columnName === "CONSUMABLES"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {consumables ? consumables.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                            
                                        })}  */}

                      {monthlyData.map((rec, indx) => {
                                  
                                  const freshProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                  );
                                  const reProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "REPROCESS QUANTITY"
                                  );

                                  const consumables = rec.columnsInfo.find(
                                      (column) => column.columnName === "CONSUMABLES"
                                  );

                                  // Initialize the result as 0
                                  let divisionResults = 0;
                              

                                  // If freshProductionQuantity exists, use its value, otherwise default to 0
                                  const freshProductionQuantityValue = freshProductionQuantity 
                                      ? Number(freshProductionQuantity.value) || 0 
                                      : 0;

                                  // If reProductionQuantity exists, use its value, otherwise default to 0
                                  const reProductionQuantityValue = reProductionQuantity 
                                      ? Number(reProductionQuantity.value) || 0 
                                      : 0;

                                  const consumablesValue = consumables 
                                      ? Number(consumables.value) || 0 
                                      : 0;

                                  // Sum the values
                                  divisionResults = freshProductionQuantityValue + reProductionQuantityValue;

                                  totalConsumableAmount += consumablesValue ? consumablesValue : 0



                                  return (
                                      <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                          {/* Display the sum, rounded to 2 decimal places */}
                                          {consumablesValue ? consumablesValue : 0}
                                      </td><td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>{isNaN(consumablesValue/divisionResults) ? 0 :(consumablesValue/divisionResults).toFixed(2)}</td></>
                                  );
                              })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalConsumableAmount ? totalConsumableAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>EXTERNAL COLD STORE CHARGES</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                               <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>ELECTRIAL, MECHANICAL, CIVIL REPAIR & MAIN</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>SUB TOTAL OF VARIABLE COST</td>
                                {/* {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))} */}
                                 {monthlyData.map((rec, indx) => {
                                    // Find the entry where the columnName is "FRESH PRODUCTION QUANTITY" and "REPROCESS QUANTITY"
                                    const procurement = rec.columnsInfo.find(
                                        (column) => column.columnName === "Procurement Freight"
                                    );
                                    const processing = rec.columnsInfo.find(
                                        (column) => column.columnName === "PROCESSING CHARGES"
                                    );
                                    const solar = rec.columnsInfo.find(
                                        (column) => column.columnName === "SOLAR UNITS INCOME"
                                    );

                                    const packing = rec.columnsInfo.find(
                                        (column) => column.columnName === "PACKING MAT"
                                    );

                                    const salt = rec.columnsInfo.find(
                                        (column) => column.columnName === "SALT & CHEM"
                                    );

                                    const QC = rec.columnsInfo.find(
                                        (column) => column.columnName === "QC COST"
                                    );

                                    const consumable = rec.columnsInfo.find(
                                        (column) => column.columnName === "CONSUMABLES"
                                    );

                                    // Initialize the result as 0
                                    let results = 0;
                                   

                                    const procurementValue = procurement 
                                        ? Number(procurement.value) || 0 
                                        : 0;

                                    const processingValue = processing ? Number(processing.value) || 0 : 0;
                                    const solarValue = solar ? Number(solar.value) || 0 : 0;
                                    const packingValue = packing ? Number(packing.value) || 0 : 0;
                                    const saltValue = salt ? Number(salt.value) || 0 : 0;
                                    const QCValue = QC ? Number(QC.value) || 0 : 0;
                                    const consumableValue = consumable ? Number(consumable.value) || 0 : 0;





                                    // Sum the values
                                    results = procurementValue + processingValue + solarValue + packingValue + saltValue +QCValue + consumableValue
                                    const freshProductionQuantity = rec.columnsInfo.find(
                                        (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                    );
                                    const reProductionQuantity = rec.columnsInfo.find(
                                        (column) => column.columnName === "REPROCESS QUANTITY"
                                    );

                                    // Initialize the result as 0
                                    let divisionResults = 0;
                                   

                                    // If freshProductionQuantity exists, use its value, otherwise default to 0
                                    const freshProductionQuantityValue = freshProductionQuantity 
                                        ? Number(freshProductionQuantity.value) || 0 
                                        : 0;

                                    // If reProductionQuantity exists, use its value, otherwise default to 0
                                    const reProductionQuantityValue = reProductionQuantity 
                                        ? Number(reProductionQuantity.value) || 0 
                                        : 0;

                                    // Sum the values
                                    divisionResults = freshProductionQuantityValue + reProductionQuantityValue
                

                                    return (
                                    
                                        <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>{results.toFixed(2)}</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>{isNaN(results / divisionResults) ? 0 : (results / divisionResults).toFixed(2)}</td></>
                                    );
                                })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"}}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px'}}>SALARIES & REMUNARATION</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>FINANCE COST</td>
                                {/* {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))} */}
                            {/* {monthlyData.map((rec, indx) => {    
                                            const financeCost = rec.columnsInfo.find(
                                                (column) => column.columnName === "Finance cost"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {financeCost ? financeCost.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })} */} 
                                {monthlyData.map((rec, indx) => {
                                  
                                  const freshProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                  );
                                  const reProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "REPROCESS QUANTITY"
                                  );

                                  const financeCost = rec.columnsInfo.find(
                                      (column) => column.columnName === "Finance cost"
                                  );

                                  // Initialize the result as 0
                                  let divisionResults = 0;
                              

                                  // If freshProductionQuantity exists, use its value, otherwise default to 0
                                  const freshProductionQuantityValue = freshProductionQuantity 
                                      ? Number(freshProductionQuantity.value) || 0 
                                      : 0;

            

                                  const financeCostValue = financeCost 
                                      ? Number(financeCost.value) || 0 
                                      : 0;

                                  totalFinanceCostAmount += financeCostValue ? financeCostValue : 0

                                  return (
                                      <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                          {/* Display the sum, rounded to 2 decimal places */}
                                          {financeCostValue ? financeCostValue : 0}
                                      </td><td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>{isNaN(financeCostValue/freshProductionQuantityValue) ? 0 :(financeCostValue/freshProductionQuantityValue).toFixed(2)}</td></>
                                  );
                              })}

                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalFinanceCostAmount ? totalFinanceCostAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>DEPRECIATION</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const depreciation = rec.columnsInfo.find(
                                                (column) => column.columnName === "Depreciation"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px'}}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {depreciation ? depreciation.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })} */}
                                          {monthlyData.map((rec, indx) => {
                                  
                                  const freshProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                  );
                                  const reProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "REPROCESS QUANTITY"
                                  );

                                  const depreciation = rec.columnsInfo.find(
                                      (column) => column.columnName === "Depreciation"
                                  );

                                  // Initialize the result as 0
                                  let divisionResults = 0;
                              

                                  // If freshProductionQuantity exists, use its value, otherwise default to 0
                                  const freshProductionQuantityValue = freshProductionQuantity 
                                      ? Number(freshProductionQuantity.value) || 0 
                                      : 0;

            

                                  const depreciationValue = depreciation 
                                      ? Number(depreciation.value) || 0 
                                      : 0;

                                  totalDepreciationAmount += depreciationValue ? depreciationValue : 0

                                  return (
                                      <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                          {/* Display the sum, rounded to 2 decimal places */}
                                          {depreciationValue ? depreciationValue : 0}
                                      </td><td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>{isNaN(depreciationValue/freshProductionQuantityValue) ? 0 :(depreciationValue/freshProductionQuantityValue).toFixed(2)}</td></>
                                  );
                              })} 
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalDepreciationAmount ? totalDepreciationAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>BUILDING, CREDIT & VEHICLE INSURANCE & TAXES</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>ADMIN ,MANAGEMENT & OTHER INDIRECT EXP</td>
                                {/* {monthlyData.map((rec, indx) => {    
                                            const admin = rec.columnsInfo.find(
                                                (column) => column.columnName === "ADMIN"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {/* {admin ? admin.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })} */}

                        {monthlyData.map((rec, indx) => {
                                  
                                  const freshProductionQuantity = rec.columnsInfo.find(
                                      (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                  );
                             
                                  const admin = rec.columnsInfo.find(
                                      (column) => column.columnName === "ADMIN"
                                  );

                         

                                  // If freshProductionQuantity exists, use its value, otherwise default to 0
                                  const freshProductionQuantityValue = freshProductionQuantity 
                                      ? Number(freshProductionQuantity.value) || 0 
                                      : 0;

            

                                  const adminValue = admin 
                                      ? Number(admin.value) || 0 
                                      : 0;

                                  totalAdminAmount += adminValue ? adminValue : 0

                                  return (
                                      <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                          {/* Display the sum, rounded to 2 decimal places */}
                                          {adminValue ? adminValue : 0}
                                      </td><td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>{isNaN(adminValue/freshProductionQuantityValue) ? 0 :(adminValue/freshProductionQuantityValue).toFixed(2)}</td></>
                                  );
                              })}

                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalAdminAmount ? totalAdminAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                               <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>SUB TOTAL OF FIXED COST</td>
                                {/* {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))} */}
                                 {monthlyData.map((rec, indx) => {
                                    // Find the entry where the columnName is "FRESH PRODUCTION QUANTITY" and "REPROCESS QUANTITY"
                                    const finance = rec.columnsInfo.find(
                                        (column) => column.columnName === "Finance cost"
                                    );
                                    const depreciation = rec.columnsInfo.find(
                                        (column) => column.columnName === "Depreciation"
                                    );
                                    const admin = rec.columnsInfo.find(
                                        (column) => column.columnName === "ADMIN"
                                    );

                                    const freshProduction = rec.columnsInfo.find(
                                        (column) => column.columnName === "FRESH PRODUCTION QUANTITY"
                                    );

                                    
                                    // Initialize the result as 0
                                    let results = 0;
                                   

                                    const financeValue = finance ? Number(finance.value) || 0 : 0;
                                    const depreciationValue = depreciation ? Number(depreciation.value) || 0 : 0;
                                    const adminValue = admin ? Number(admin.value) || 0 : 0;
                                    const freshProductionValue = freshProduction ? Number(freshProduction.value) || 0 : 0;

                
                                    results = financeValue + depreciationValue + adminValue

                

                                    return (
                                    
                                        <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>{results.toFixed(2)}</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>{isNaN(results/freshProductionValue) ? 0 :(results/freshProductionValue).toFixed(2)}</td></>
                                    );
                                })}

                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                                 <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>TOTAL COST OF PRODUCTION</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>

                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>ADD: OPENING STOCK</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                                <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>LESS : CLOSING STOCK</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                               <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>TOTAL COST OF GOODS SOLD</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>Ocean Freight </td>
                                {/* {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))} */}
                                  {monthlyData.map((rec, indx) => {
                                    // Find the entry where the columnName is "FRESH PRODUCTION QUANTITY" and "REPROCESS QUANTITY"
                                    const oceanUSA = rec.columnsInfo.find(
                                        (column) => column.columnName === "OCEAN FREIGHT USA"
                                    );
                                    const oceanJAPAN = rec.columnsInfo.find(
                                        (column) => column.columnName === "OCEAN FREIGHT JAPAN CHINA UAE"
                                    );
                                    const oceanCANADA = rec.columnsInfo.find(
                                        (column) => column.columnName === "OCEAN FREIGHT CANADA"
                                    );

                        
                                    // Initialize the result as 0
                                    let results = 0;

                                   

                                    const oceanUSAValue = oceanUSA ? Number(oceanUSA.value) || 0 : 0;
                                    const oceanJAPANValue = oceanJAPAN ? Number(oceanJAPAN.value) || 0 : 0;
                                    const oceanCANADAValue = oceanCANADA ? Number(oceanCANADA.value) || 0 : 0;

                
                                    results = oceanUSAValue + oceanJAPANValue + oceanCANADAValue
                                    oceanSumAmount+= results

                

                                    return (
                                    
                                        <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>{results.toFixed(2)}</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                    );
                                })}

                                
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"  }} >{oceanSumAmount ? oceanSumAmount.toFixed(2) : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>OCEAN FREIGHT - USA </td>
                                {monthlyData.map((rec, indx) => {    
                                            const oceanUSA = rec.columnsInfo.find(
                                                (column) => column.columnName === "OCEAN FREIGHT USA"
                                            );
                                  totalOceanFreightUSAAmount += oceanUSA ? oceanUSA.value : 0

                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {oceanUSA ? oceanUSA.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalOceanFreightUSAAmount ? totalOceanFreightUSAAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>OCEAN FREIGHT - JAPAN/CHINA/UAE </td>
                                {monthlyData.map((rec, indx) => {    
                                            const oceanjapan = rec.columnsInfo.find(
                                                (column) => column.columnName === "OCEAN FREIGHT JAPAN CHINA UAE"
                                            );
                                  totalOceanFreightJAPANAmount += oceanjapan ? oceanjapan.value : 0

                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {oceanjapan ? oceanjapan.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalOceanFreightJAPANAmount ? totalOceanFreightJAPANAmount :0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>OCEAN FREIGHT - CANADA</td>
                                {monthlyData.map((rec, indx) => {    
                                            const oceanCanada = rec.columnsInfo.find(
                                                (column) => column.columnName === "OCEAN FREIGHT CANADA"
                                            );
                                  totalOceanFreightCanadaAmount += oceanCanada ? oceanCanada.value : 0

                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px'}}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {oceanCanada ? oceanCanada.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >{totalOceanFreightCanadaAmount ? totalOceanFreightCanadaAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>LOCAL FREIGHT</td>
                                {monthlyData.map((rec, indx) => {    
                                            const local = rec.columnsInfo.find(
                                                (column) => column.columnName === "LOCAL FREIGHT"
                                            );
                                            return (
                                                <><td key={indx} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>
                                                    {/* Display the value if found, otherwise display 0 */}
                                                    {local ? local.value : 0}
                                                
                                                </td>
                                            <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>

                                                </>
                                            );
                                        })}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>ANTIDUMPING DUTY - USA</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>SALES COMISSION</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                               <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>DEMURAGES</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                               <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>OTHER S&D COST</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>SUB TOTAL OF S&D COST</td>
                                {/* {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))} */}

                                  {monthlyData.map((rec, indx) => {
                                    // Find the entry where the columnName is "FRESH PRODUCTION QUANTITY" and "REPROCESS QUANTITY"
                                    const oceanUSA = rec.columnsInfo.find(
                                        (column) => column.columnName === "OCEAN FREIGHT USA"
                                    );
                                    const oceanJAPAN = rec.columnsInfo.find(
                                        (column) => column.columnName === "OCEAN FREIGHT JAPAN CHINA UAE"
                                    );
                                    const oceanCANADA = rec.columnsInfo.find(
                                        (column) => column.columnName === "OCEAN FREIGHT CANADA"
                                    );

                        
                                    // Initialize the result as 0
                                    let results = 0;

                                   

                                    const oceanUSAValue = oceanUSA ? Number(oceanUSA.value) || 0 : 0;
                                    const oceanJAPANValue = oceanJAPAN ? Number(oceanJAPAN.value) || 0 : 0;
                                    const oceanCANADAValue = oceanCANADA ? Number(oceanCANADA.value) || 0 : 0;

                
                                    results = oceanUSAValue + oceanJAPANValue + oceanCANADAValue
                                    subTotalSumAmount+= results

                

                                    return (
                                    
                                        <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>{results.toFixed(2)}</td>
                                    <td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                    );
                                })}

                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >{subTotalSumAmount ? subTotalSumAmount : 0}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>TOTAL COST OF SALES</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"}}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>TOTAL EXPENSES</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"}}>0</td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>PROFIT / LOSS IN OPERATIONS</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' ,fontWeight:"bold"}} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>in%</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' ,fontWeight:"bold"}}>0</td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px'}}>DUTY DRAW BACK @ 3% ON FOB</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                                <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px'}}>RODTEP SCHEME @ 3.10% ON FOB</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                                  <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px' }}>3% Discount on RODTEP Scheme Licences sales</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' }}>0</td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>TOTAL INCENTIVES</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td>
                                </tr>
                            </tbody>
                               <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>PROFIT / LOSS WITH INCENTIVE</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"}}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td>
                                </tr>
                            </tbody>
                               <tbody>
                                <tr>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>in%</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>Extrodinery Item</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' ,fontWeight:"bold"}}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                <td style={{ textAlign: 'left', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>Total Net P&L</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"}}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold" }} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px' ,fontWeight:"bold"}}>0</td>
                                </tr>
                            </tbody>
                             <tbody>
                                <tr>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '300px',fontWeight:"bold" }}>in%</td>
                                {monthlyData.map((_, indx) => (
                                    
                                    <><td key={`amount-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px' ,fontWeight:"bold"}}>0</td><td key={`perkg-${indx}`} style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"}}>0</td></>
                                
                                ))}
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"}} >0</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000', width: '100px',fontWeight:"bold"}}>0</td>
                                </tr>
                            </tbody>  
                            
                           </table>
                           
  
                        </tr>
    
                    </> : <></>}
                    </table>
                </body>
            </html>
        </Card>
    </div>
  )
}

export default MonthlyMISReport