import React, { useState, useEffect, useRef } from 'react';
import { Divider, Popconfirm, Table, Card, Tooltip, Switch, Input, Button, Tag, Row, Col, Drawer, Form, DatePicker, Select, Typography } from 'antd';
import Highlighter from 'react-highlight-words';
import { ColumnProps } from 'antd/lib/table';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { useIntl } from 'react-intl';
import { CheckCircleOutlined, CloseCircleOutlined, RightSquareOutlined, EyeOutlined, EditOutlined, SearchOutlined, DownloadOutlined } from '@ant-design/icons';
import { CSVLink } from 'react-csv';
import Link from 'antd/lib/typography/Link';

import {AllIndentReportDto, IndentRtRequest, IndentDropdownModel} from '@gtpl/shared-models/raw-material-procurement';
import {IndentService} from '@gtpl/shared-services/raw-material-procurement';
import moment from 'moment';
import { UnitcodeService } from '@gtpl/shared-services/masters';
import './rm-procurement-report-grid.css';
import { SupplierTypeEnum } from '@gtpl/shared-models/common-models';
import { Excel } from 'antd-table-saveas-excel';

/* eslint-disable-next-line */
export interface RmProcurementReportGridProps {}

export function RmProcurementReportGrid(
  props: RmProcurementReportGridProps
) {

  const searchInput = useRef(null);
  const [form] = Form.useForm();
  const { Text } = Typography;
  const [page, setPage] = React.useState(1);
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const [drawerVisible, setDrawerVisible] = useState<boolean>(false);

  const [indentData, setIndentData] = useState<IndentDropdownModel[]>([]);
  const [indentReportData, setIndentReportData] = useState<any>([]);
  const service = new IndentService();

  const [display, setDisplay] = useState<string>('none');
  const { RangePicker } = DatePicker;
  const unitService = new UnitcodeService()
  const [ unitData, setUnitData ] = useState<any>([]);


  useEffect(() => {
    getAllindentReport();
    getAllIndentCodes();
    getAllMainPlants()
  }, [])

  const getAllMainPlants =()=>{
    unitService.getAllMainPlants().then(res => {
      if(res.data){
        setUnitData(res.data)
      }else{
        setUnitData([])
      }
    })
  }

  const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  }

  const getAllindentReport = () => {
    const req = new IndentRtRequest();

    if (form.getFieldValue('indentDate') !== undefined) {
      req.fromDate = (form.getFieldValue('indentDate')[0]).format('YYYY-MM-DD');
    }
    if (form.getFieldValue('indentDate') !== undefined) {
      req.toDate = (form.getFieldValue('indentDate')[1]).format('YYYY-MM-DD');
    }
    if (form.getFieldValue('indentCode') !== undefined) {
      req.indentCode = form.getFieldValue('indentCode')
    }
    if (form.getFieldValue('harvestDate') !== undefined) {
      req.harvestingDate = form.getFieldValue('harvestDate').format('YYYY-MM-DD')
    }
    if (form.getFieldValue('supplierType') !== undefined) {
      req.supplierType = form.getFieldValue('supplierType')
    }
    if (form.getFieldValue('unitId') !== undefined) {
      req.unitId = form.getFieldValue('unitId')
    }

    console.log(req);
     service.getIndentReportDetails(req).then(res => {
      console.log(res.data);
      if (res.status) {
        console.log(res.data);
        setIndentReportData(res.data);

      } else {

          setIndentReportData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } 
      
    }).catch(err => {
      setIndentReportData([]);
      AlertMessages.getErrorMessage(err.message);

    })
  }



  const onReset = async () => {
    setIndentReportData([]);
    form.resetFields();
    await new Promise(resolve => setTimeout(resolve, 0)); // ensure state updates
    getAllindentReport(); // fetch data after reset
  };
  

  const getAllIndentCodes = () => {   
    service.getIndentsForDropdown().then(res => {
      console.log(res.data);
      if (res.status) {
        console.log(res.data);
        setIndentData(res.data);

      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);

    })
  }

  const getColumnSearchProps = (dataIndex: string) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <SearchOutlined type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex]
          .toString()
          .toLowerCase()
          .includes(value.toLowerCase())
        : false,
    onFilterDropdownVisibleChange: visible => {
      if (visible) { setTimeout(() => searchInput.current.select()); }
    },
    render: text =>
      text ? (
        searchedColumn === dataIndex ? (
          <Highlighter
            highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
            searchWords={[searchText]}
            autoEscape
            textToHighlight={text.toString()}
          />
        ) : text
      )
        : null

  });

  /**
   * 
   * @param selectedKeys 
   * @param confirm 
   * @param dataIndex 
   */
  function handleSearch(selectedKeys, confirm, dataIndex) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  function handleReset(clearFilters) {
    clearFilters();
    setSearchText('');
  };

  const { Option } = Select;
  const layout = {
    labelCol: {
      span: 10,
    },
    wrapperCol: {
      span: 8,
    },
  };

  const closeDrawer = () => {
    setDrawerVisible(false);
  }

  function unique(data, key){
    return [
        ...new Map(
          data.map(x=> [key(x),x])
        ).values()
    ]
  }

  // const handleIndentCode=(value, item) => {
  //   const newIndentReportData = indentReportData.filter(indent =>
  //      indent.indentCode == value
  //     )

  //   setIndentReportData(newIndentReportData);
  //   // setIndentData(JSON.parse(JSON.stringify(unique(newIndentReportData, it => it.indentCode)))); 
  // }
  // const handleSupplierType=(value, item) => {
  //   const newIndentReportData = indentReportData.filter(indent =>
  //      indent.supplierType === value
  //     )

  //   setIndentReportData(newIndentReportData);
  // }

  const columnsSkelton: any[] = [
    {
        title: 'S No',
        key: 'sno',
        width: 100,
        // fixed: 'left',
        render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },
    {
        title: 'Indent Date',
        dataIndex: 'indentDate',
        //fixed: 'right',
        width: "130px",
        // fixed: 'left',
        align: 'left',
        // sorter: (a, b) => a.indentDate - b.indentDate,
        sorter: (a, b) => moment(a.indentDate).unix() - moment(b.indentDate).unix(),
        sortDirections: ['descend', 'ascend'],
        ...getColumnSearchProps('indentDate'),
        // sortDirections: ['descend', 'ascend'],
  
  
        filterMultiple: false,
        onFilter: (value, record) => {
          // === is not work
          return record.isInvoiced === value;
        },
        render: (value, record: AllIndentReportDto, index) => {
          return moment(record.indentDate).format('YYYY-MM-DD');
        }
      },
      {
        title: 'Indent Code',
        key: 'indentCode',
        dataIndex: 'indentCode',
        width: 170,
        align: 'left',
        // fixed: 'left',
        ...getColumnSearchProps('indentCode'),
        sorter: (a, b) => a.indentCode.localeCompare(b.indentCode),
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Unit',
        key: 'plantCode',
        dataIndex: 'plantCode',
        width: 170,
        align: 'left',
        // fixed: 'left',
        ...getColumnSearchProps('plantCode'),
        sorter: (a, b) => a.plantCode.localeCompare(b.plantCode),
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Supplier Type',
        dataIndex: 'supplierType',
        width: 150,
        align: 'left',
        
        filters: [
          {
            text: 'Agent',
            value: 'Agent',
          },
          {
            text: 'Dealer',
            value: 'Dealer',
          },
          {
            text: 'Farmer',
            value: 'Farmer',
          },
        ],
        filterMultiple: false,
        onFilter: (value, record) => {
          // === is not work
          return record.supplierType === value;
        },
        sorter: (a, b) => a.supplierType.localeCompare(b.supplierType),
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Harvest Date',
        dataIndex:'harvestingDate',
        key: 'harvestingDate',      
        width: "130px",
        align: 'left',
        // fixed: 'left',
        sorter: (a, b) => moment(a.harvestingDate).unix() - moment(b.harvestingDate).unix(),
        sortDirections: ['descend', 'ascend'],
        render: (text, record) => {return moment(record.harvestingDate).format('YYYY-MM-DD')}
  
      },
      {
        title: 'Product Code',
        dataIndex:'productCode',
        key: 'productCode',
        width: 170,
        align: 'left',
        // fixed: 'left',
        // render: (rowData) => {return rowData.product},
        sorter: (a, b) => a.productCode.localeCompare(b.productCode),
        sortDirections: ['descend', 'ascend'],
        ...getColumnSearchProps('productCode')
      },
      {
        title: 'Indent Quantity',
        dataIndex: 'expectedQty',
        key: 'expectedQty',
        width: 170,
        align: 'right',
        // fixed: 'left', // Uncomment if you want to fix this column
        // sorter: (a, b) => a.expectedQty - b.expectedQty, // Uncomment if sorting is needed
        // sortDirections: ['descend', 'ascend'], // Uncomment to specify sort directions
        render: (text, record) => {
          const qty = Number(record.expectedQty); // Convert to a number
          return !isNaN(qty) // Check if qty is a valid number
              ? qty % 1 === 0 // Check if qty is a whole number
                  ? qty.toFixed(0) // No decimal places
                  : qty.toFixed(1) // One decimal place
              : '-';
      }
      },
      
      // {
      //   title: 'Reweighment Quantity',
      //   dataIndex:'reweighmentQuantity',
      //   key: 'reweighmentQuantity',
      //   width: 170,
      //   align: 'right',
      //   // fixed: 'left',
      //   sorter: (a, b) => a.reweighmentQuantity - b.reweighmentQuantity,
      //   sortDirections: ['descend', 'ascend'],

      // },
      // {
      //   title: 'Batch Number',
      //   dataIndex:'batchNumber',
      //   key: 'batchNumber',
      //   width: 170,
      //   align: 'right',
      //   // fixed: 'left',
      //   sorter: (a, b) => a.batchNumber -b.batchNumber,
      //   sortDirections: ['descend', 'ascend'],

      // },


      {
        title: 'Indent Price',
        dataIndex:'expectedPrice',
        key: 'expectedPrice',
        width: 170,
        align: 'right',
        // fixed: 'left',
        sorter: (a, b) => a.expectedPrice - b.expectedPrice,
        sortDirections: ['descend', 'ascend'],
  
      },
      {
        title: 'Indent Count',
        dataIndex:'expectedCount',
        key: 'expectedCount',
        width: 170,
        align: 'right',
        // fixed: 'left',
        sorter: (a, b) => a.expectedCount - b.expectedCount,
        sortDirections: ['descend', 'ascend'],
        ...getColumnSearchProps('expectedCount'),

  
      },
      // {
      //   title: 'Indent Quantity',
      //   dataIndex:'expectedQty',
      //   key: 'expectedQty',
      //   width: 170,
      //   align: 'right',
      //   // fixed: 'left',
      //   sorter: (a, b) => a.expectedQty - b.expectedQty,
      //   sortDirections: ['descend', 'ascend'],
  
      // },
      {
        title: 'Reweighment Quantity',
        dataIndex:'reweighmentQuantity',
        key: 'reweighmentQuantity',
        width: 170,
        align: 'right',
        // fixed: 'left',
        // sorter: (a, b) => a.reweighmentQuantity - b.reweighmentQuantity,
        // sortDirections: ['descend', 'ascend'],
        render: (text, record) => {
          const qty = Number(record.reweighmentQuantity); // Convert to a number
          return !isNaN(qty) // Check if qty is a valid number
              ? qty % 1 === 0 // Check if qty is a whole number
                  ? qty.toFixed(0) // No decimal places
                  : qty.toFixed(1) // One decimal place
              : '-';
      }

      },
      {
        title: 'Reweighment Count',
        dataIndex:'reweighmentCount',
        key: 'reweighmentCount',
        width: 170,
        align: 'right',
        // fixed: 'left',
        sorter: (a, b) => a.reweighmentCount - b.reweighmentCount,
        sortDirections: ['descend', 'ascend'],
        ...getColumnSearchProps('reweighmentCount')


      },
        {
        title: 'Batch Number',
        dataIndex:'batchNumber',
        key: 'batchNumber',
        width: 170,
        align: 'right',
        // fixed: 'left',
        ...getColumnSearchProps('batchNumber'),

        sorter: (a, b) => a.batchNumber -b.batchNumber,
        sortDirections: ['descend', 'ascend'],

      },

      {
        title: 'GRN Date',
        dataIndex: 'grnDate',
        align: 'left',
        width: "130px",
        // fixed: 'left',
        // sorter: (a, b) => a.grnDate - b.grnDate,
        sorter: (a, b) => moment(a.grnDate).unix() - moment(b.grnDate).unix(),

        // ...getColumnSearchProps('grnDate'),
        sortDirections: ['descend', 'ascend'],
  
  
        filterMultiple: false,
        onFilter: (value, record) => {
          // === is not work
          return record.isInvoiced === value;
        },
        render: (value, record: AllIndentReportDto, index) => {
          return record.grnDate!=null?moment(record.grnDate).format('YYYY-MM-DD'):"-";
        }
      },
      {
        title: 'GRN Quantity',
        dataIndex:'quantity',
        key: 'quantity',
        width: 170,
        align: 'right',
        // fixed: 'left',
        // sorter: (a, b) => a.quantity - b.quantity,
        // sortDirections: ['descend', 'ascend'],
        render: (text, record) => {
          const qty = Number(record.quantity); // Convert to a number
          return !isNaN(qty) // Check if qty is a valid number
              ? qty % 1 === 0 // Check if qty is a whole number
                  ? qty.toFixed(0) // No decimal places
                  : qty.toFixed(1) // One decimal place
              : '-';
      }
  
      },
      {
        title: 'GRN Price',
        dataIndex:'price',
        key: 'price',
        width: 170,
        align: 'right',
        // fixed: 'left',
        sorter: (a, b) => a.price - b.price,
        sortDirections: ['descend', 'ascend'],
        render: (text, record) => {
          return record.price ? Math.round(record.price) : '-';
      }
  
      },
      {
        title: 'GRN Count',
        dataIndex:'count',
        key: 'count',
        width: 170,
        align: 'right',
        // fixed: 'left',
        sorter: (a, b) => a.count - b.count,
        sortDirections: ['descend', 'ascend'],
        render: (text, record) => {
          const qty = Number(record.count); // Convert to a number
          return !isNaN(qty) // Check if qty is a valid number
              ? qty % 1 === 0 // Check if qty is a whole number
                  ? qty.toFixed(0) // No decimal places
                  : qty.toFixed(1) // One decimal place
              : '-';
      },
      ...getColumnSearchProps('count')

  
      },
      // {
      //   title: 'Reweighment Count',
      //   dataIndex:'reweighmentCount',
      //   key: 'reweighmentCount',
      //   width: 170,
      //   align: 'right',
      //   // fixed: 'left',
      //   sorter: (a, b) => a.reweighmentCount - b.reweighmentCount,
      //   sortDirections: ['descend', 'ascend'],

      // },
      // {
      //   title: 'Reweighment Quantity',
      //   dataIndex:'reweighmentQuantity',
      //   key: 'reweighmentQuantity',
      //   width: 170,
      //   align: 'right',
      //   // fixed: 'left',
      //   // sorter: (a, b) => a.reweighmentQuantity - b.reweighmentQuantity,
      //   // sortDirections: ['descend', 'ascend'],
      //   render: (text, record) => {
      //     return record.reweighmentQuantity ? parseFloat((record.reweighmentQuantity).toFixed(1)) : '-'
      //   }

      // },
      //   {
      //   title: 'Batch Number',
      //   dataIndex:'batchNumber',
      //   key: 'batchNumber',
      //   width: 170,
      //   align: 'right',
      //   // fixed: 'left',
      //   sorter: (a, b) => a.batchNumber -b.batchNumber,
      //   sortDirections: ['descend', 'ascend'],

      // },

     
      
  ];

  const exportExcel = () => {
    const excel = new Excel();
    excel
    .addSheet('Indent Report')
    .addColumns(columnsSkelton)
    .addDataSource(indentReportData, { str2num: true })
    .saveAs('Indent-Report.xlsx');
};
 

  return (
    <>
    <Card title={<span style={{ color: 'white' }}>Indent Report</span>}
        style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        extra={
          <>
            <Button icon={<DownloadOutlined />} onClick={exportExcel} style={{marginRight:30}} disabled={indentReportData.length === 0}>
              GET EXCEL
            </Button>
          </>
      }
        >
        <Form layout={"vertical"} autoComplete="off" form={form} onFinish={getAllindentReport} >
          <Row gutter={[16, 16]}>
            {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
              <Form.Item name="indentFromDate" label="Indent From Date">
                <DatePicker placeholder='Select Indent From Date' style={{ width: '100%' }} format="YYYY-MM-DD"
                  showToday={true} />
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
              <Form.Item name="indentToDate" label="Indent To Date">
                <DatePicker placeholder='Select Indent To Date' style={{ width: '100%' }} format="YYYY-MM-DD"
                  showToday={true} />
              </Form.Item>

            </Col> */}
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 4 }} xl={{ span: 4 }} >
              <Form.Item
                name="unitId"
                label="Unit"
              >
                <Select
                  placeholder="Select Unit"
                  allowClear
                  optionFilterProp="children"
                  // onChange={handleIndentCode}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                    {/* <Option key={0} value={null}>Select Indent Code</Option> */}

                  {unitData.map((res) => {
                    return <Option key={res.plantId} value={res.plantId}>{res.plantCode}</Option>
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>

              <Form.Item name="indentDate"
                label="Indent Date"

                >
                <RangePicker  allowClear />
              </Form.Item>
              </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 4 }} xl={{ span: 4 }} >
              <Form.Item
                name="indentCode"
                label="Indent Code"
              >
                <Select
                  placeholder="Select Indent Code"
                  allowClear
                  optionFilterProp="children"
                  // onChange={handleIndentCode}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                    {/* <Option key={0} value={null}>Select Indent Code</Option> */}

                  {indentData.map((indentData) => {
                    return <Option key={indentData.indentId} value={indentData.indentCode}>{indentData.indentCode}</Option>
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 4 }} xl={{ span: 4 }} >
              <Form.Item
                name="supplierType"
                label="Supplier Type"
              >
                <Select
                  placeholder="Select Supplier Type"
                  allowClear
                  optionFilterProp="children"
                  // onChange={handleSupplierType}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                    {/* <Option key={0} value={null}>Select Supplier Type</Option> */}
                    <Option key={0} selected value={SupplierTypeEnum.AGENT}>{SupplierTypeEnum.AGENT}</Option>
                    <Option key={1} value={SupplierTypeEnum.DEALER}>{SupplierTypeEnum.DEALER}</Option>
                    <Option key={2} value={SupplierTypeEnum.FARMER}>{SupplierTypeEnum.FARMER}</Option>
                  </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
              <Form.Item name="harvestDate" label="Harvest Date">
                <DatePicker placeholder='Select Harvest Date' style={{ width: '100%' }} format="YYYY-MM-DD"
                  showToday={true} />
              </Form.Item>
            </Col>
       
            <Col style={{marginTop:29}}>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
          
            </Col>
            <Col style={{marginTop:29}}>
            <Button type="primary" htmlType="reset" onClick={onReset}>
              Reset
            </Button>

            </Col>
            {/* <Col style={{ padding: '30px' }}>

                <Button type="primary" htmlType="submit" >
                <CSVLink filename={"PoReport.csv"} data={indentReportData} >Get Excel </CSVLink>
                </Button>
            </Col> */}
          </Row>
            

         
        </Form>

        <br/>
        {indentReportData.length > 0 && <>

        <Table
          rowKey={record => record.indentId}
          columns={indentReportData.length>0?columnsSkelton:null}
          dataSource={indentReportData}
          pagination={{
            onChange(current) {
              setPage(current);
            }
          }}
          onChange={onChange}
          scroll={{ x: 'max-content', y: 400 }}
          size="small"
          bordered 
          summary={(pageData) => {
            let totalPrice = 0;
            let totalQuantity = 0;
            let totalCount = 0;
            let totalgrnPrice = 0;
            let totalgrnCount = 0;
            let totalgrnQty = 0;
          

            pageData.forEach(({ quantity }) => {
              if(Number(quantity)){
                totalgrnQty+=Number(quantity)
               }
               
             });
             pageData.forEach(({ price }) => {
              
               if(Number(price)){
                 totalgrnPrice += Number(price);
                 }
               
             });
             pageData.forEach(({ count }) => {
               if(Number(count)){
               totalgrnCount += Number(count)
             }
               
             });
             pageData.forEach(({ expectedQty }) => {
 
               if(Number(expectedQty)){
               totalQuantity += Number(expectedQty);
               }
               
             });
             pageData.forEach(({ expectedPrice }) => {
 
               if(Number(expectedPrice)){
               totalPrice += Number(expectedPrice);
               }
               
             });
 
       
             pageData.forEach(({expectedCount }) => {
 
               if(Number(expectedCount)){
               totalCount += Number(expectedCount);
               }
             });


            return (
              <>
              <Table.Summary.Row className='tableFooter'>
              <Table.Summary.Cell index={1} colSpan={6} ><Text >Total</Text></Table.Summary.Cell>
              <Table.Summary.Cell index={6} colSpan={1}><Text  style={{textAlign:'end'}}>{totalQuantity.toFixed()}</Text></Table.Summary.Cell>
              <Table.Summary.Cell index={7} colSpan={1}><Text  style={{textAlign:'end'}}></Text></Table.Summary.Cell>
              <Table.Summary.Cell index={8} colSpan={1}><Text  style={{textAlign:'end'}}></Text></Table.Summary.Cell>
              <Table.Summary.Cell index={9} colSpan={1}></Table.Summary.Cell>
              {/* <Table.Summary.Cell index={10} colSpan={1}><Text  style={{textAlign:'end'}}>{totalgrnQty}</Text></Table.Summary.Cell> */}
              <Table.Summary.Cell index={11} colSpan={1}><Text  style={{textAlign:'end'}}></Text></Table.Summary.Cell>
              <Table.Summary.Cell index={12} colSpan={1}><Text  style={{textAlign:'end'}}></Text></Table.Summary.Cell>                  
              <Table.Summary.Cell index={13}></Table.Summary.Cell>
              </Table.Summary.Row>
              </>
            );
          }
         }/>
          </>
      }
        <Drawer bodyStyle={{ paddingBottom: 80 }} title='Update' width={window.innerWidth > 768 ? '50%' : '85%'}
          onClose={closeDrawer} visible={drawerVisible} closable={true}>

        </Drawer>
    </Card>        
  </>
  );
}

export default RmProcurementReportGrid;