diff --git a/src/views/SimproV2/ResourceMaterial/index.js b/src/views/SimproV2/ResourceMaterial/index.js
index 76db152..9704a52 100644
--- a/src/views/SimproV2/ResourceMaterial/index.js
+++ b/src/views/SimproV2/ResourceMaterial/index.js
@@ -1,603 +1,622 @@
-import * as XLSX from 'xlsx';
-import DialogForm from './DialogForm';
-import React, { useState, useEffect, useMemo } from 'react';
-import SweetAlert from 'react-bootstrap-sweetalert';
-import axios from "../../../const/interceptorApi"
-import moment from 'moment'
-import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
-import { DownloadOutlined } from '@ant-design/icons';
-import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { Pagination, Table, Button, Tooltip, Tabs, Collapse } from 'antd';
-import { formatRupiah, formatNumber, renderLabelStatus } from '../../../const/CustomFunc'
-import {
-  BASE_SIMPRO,
-  PROYEK_ADD, PROYEK_SEARCH, PROYEK_EDIT, PROYEK_DELETE,
-  MATERIAL_RESOURCE_ADD, MATERIAL_RESOURCE_EDIT, MATERIAL_RESOURCE_DELETE, MATERIAL_RESOURCE_SEARCH,
-  REQUEST_MATERIAL_SEARCH, REQUEST_MATERIAL_EDIT,
-  REQUEST_MATERIAL_UPDATE_WAREHOUSE_SITE
-} from '../../../const/ApiConst';
-
-const { TabPane } = Tabs;
-const { Panel } = Collapse;
-
-const url = "";
-const proyek_id = localStorage.getItem('proyek_id');
-const role_id = localStorage.getItem('role_id');
-const format = "DD-MM-YYYY";
-
-const groupBy = (array, key) => {
-  return array.reduce((result, currentValue) => {
-    (result[currentValue[key]] = result[currentValue[key]] || []).push(
-      currentValue
-    );
-    return result;
-  }, {});
-};
-
-const Resource = ({ params }) => {
-  const token = localStorage.getItem("token")
-  const HEADER = {
-    headers: {
-      "Content-Type": "application/json",
-      "Authorization": `Bearer ${token}`
-    }
-  }
-
-  const [alertDelete, setAlertDelete] = useState(false)
-  const [allDataMenu, setAllDataMenu] = useState([])
-  const [clickOpenModal, setClickOpenModal] = useState(false)
-  const [currentPage, setCurrentPage] = useState(1)
-  const [dataDelvMaterial, setDataDelvMaterial] = useState([])
-  const [dataEdit, setDataEdit] = useState([])
-  const [dataExport, setDataExport] = useState([])
-  const [dataReqMaterial, setDataReqMaterial] = useState([])
-  const [dataTable, setDatatable] = useState([])
-  const [idDelete, setIdDelete] = useState(0)
-  const [openDialog, setOpenDialog] = useState(false)
-  const [rowsPerPage, setRowsPerPage] = useState(10)
-  const [search, setSearch] = useState('')
-  const [totalPage, setTotalPage] = useState(0)
-  const [typeDialog, setTypeDialog] = useState('Save')
-  const pageName = params.name;
-
-  useEffect(() => {
-    getDataReqMaterial()
-  }, [])
-
-  useEffect(() => {
-    getDataMaterialR()
-  }, [search, rowsPerPage, currentPage])
-
-  const getDataMaterialR = async () => {
-
-    let start = 0;
-
-    if (currentPage !== 1 && currentPage > 1) {
-      start = (currentPage * rowsPerPage) - rowsPerPage
-    }
-
-    const payload = {
-      "columns": [
-        {
-          "name": "name",
-          "logic_operator": "ilike",
-          "value": search,
-          "operator": "AND"
-        }
-      ],
-      "orders": {
-        "ascending": true,
-        "columns": [
-          'id'
-        ]
-      },
-      "paging": {
-        "length": rowsPerPage,
-        "start": start
-      }
-    }
-
-    const result = await axios
-      .post(MATERIAL_RESOURCE_SEARCH, payload, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.data && result.data.code == 200) {
-      setDatatable(result.data.data);
-      setTotalPage(result.data.totalRecord);
-    } else {
-      NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
-    }
-  }
-
-  const getDataReqMaterial = async () => {
-    const payload = {
-      "columns": [
-        { "name": "description", "logic_operator": "ilike", "value": "", "operator": "AND" },
-      ],
-      "joins": [
-        { "name": "m_proyek", "column_join": "proyek_id", "column_results": ["kode_sortname", "nama"] }
-      ],
-      "orders": { "columns": ["id"], "ascending": true },
-      "paging": { "start": 0, "length": 25 }
-    }
-
-    const result = await axios
-      .post(REQUEST_MATERIAL_SEARCH, payload, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-    if (result && result.status == 200) {
-
-      if (result.data.data && result.data.data.length > 0) {
-        let filtered_matReq = [];
-        let filtered_matDelv = [];
-
-        result.data.data.map((item, index) => {
-          if (item.status === "receipt to site") {
-            filtered_matDelv.push(item);
-          }
-          else {
-            filtered_matReq.push(item);
-          }
-        })
-
-        const groupedProjectReq = groupBy(filtered_matReq, 'proyek_id');
-        const groupedProjectDelv = groupBy(filtered_matDelv, 'proyek_id');
-
-        setDataReqMaterial(groupedProjectReq);
-        setDataDelvMaterial(groupedProjectDelv);
-      }
-    } else {
-
-    }
-  }
-
-  const handleSearch = e => {
-    const value = e.target.value
-    setSearch(value);
-    setCurrentPage(1)
-  };
-
-  const handleOpenDialog = (type) => {
-    setOpenDialog(true)
-    setTypeDialog(type)
-  }
-
-  const handleExportExcel = async () => {
-
-    const payload = {
-      "paging": { "start": 0, "length": -1 },
-      "joins": [],
-      "orders": { "columns": ["id"], "ascending": false }
-    }
-
-    if (parseInt(role_id) !== 1) {
-      payload["columns"] = [
-        { "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" }
-      ]
-    }
-
-    const result = await axios
-      .post(PROYEK_SEARCH, payload, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-
-    if (result && result.data && result.data.code == 200) {
-      let resData = result.data.data;
-      const excelData = [];
-      resData.map((n, index) => {
-        let dataRow = {
-          "Nama Proyek": n.nama,
-          "Biaya": n.biaya,
-          "Color Progress": n.color_progress,
-          "Jumlah Pekerja": n.jumlah_pekerja,
-          "Tanggal Mulai": n.mulai_proyek ? moment(n.mulai_proyek).format(format) : "-",
-          "Tanggal Selesai": n.akhir_proyek ? moment(n.akhir_proyek).format(format) : "-",
-        }
-        excelData.push(dataRow)
-      })
-      await setDataExport(excelData);
-    } else {
-      NotificationManager.error('Gagal Export Data!!', 'Failed');
-    }
-  }
-
-  const handleEdit = (data, type) => {
-    setDataEdit(data)
-    handleOpenDialog(type);
-  }
-
-  const handleDelete = async (id) => {
-    await setAlertDelete(true)
-    await setIdDelete(id)
-  }
-
-  const handleCloseDialog = (type, data) => {
-    if (type === "save") {
-      saveMaterialResource(data);
-    } else if (type === "edit") {
-      editMaterialR(data);
-    } else if (type === 'EditMatReq') {
-      editMaterialReq(data);
-    } else if (type === 'EditMatDelv') {
-      editMaterialDelv(data);
-    }
-    setDataEdit([])
-    setOpenDialog(false)
-  }
-
-  const renderFormatNumber = (text, prefix) => {
-    if (text) {
-      return formatNumber(text.toString(), prefix)
-    } else {
-      return "-"
-    }
-  }
-
-  const saveMaterialResource = async (data) => {
-    const formData = data
-    const result = await axios.post(MATERIAL_RESOURCE_ADD, formData, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.data && result.data.code === 200) {
-      getDataMaterialR()
-      NotificationManager.success(`Data material resource berhasil ditambah`, 'Success!!');
-    } else {
-      NotificationManager.error(`${result.data.message}`, 'Failed!!');
-    }
-  }
-
-  const editMaterialR = async (data) => {
-
-    let urlEdit = MATERIAL_RESOURCE_EDIT(data.id)
-    const formData = data
-
-
-    const result = await axios.put(urlEdit, formData, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.data && result.data.code === 200) {
-      getDataMaterialR();
-      NotificationManager.success(`Data material resource berhasil diedit`, 'Success!!');
-    } else {
-      NotificationManager.error(`Data material resource gagal di edit`, `Failed!!`);
-    }
-  }
-
-  const editMaterialReq = async (data) => {
-    let urlEdit = REQUEST_MATERIAL_EDIT(data.id)
-    const formData = data
-
-
-    const result = await axios.put(urlEdit, formData, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.data && result.data.code === 200) {
-      getDataReqMaterial();
-      NotificationManager.success(`Data material resource berhasil diupdate`, 'Success!!');
-    } else {
-      NotificationManager.error(`Data material resource gagal diupdate`, `Failed!!`);
-    }
-  }
-
-  const editMaterialDelv = async (data) => {
-    let urlEdit = REQUEST_MATERIAL_EDIT(data.id)
-    const formData = data
-
-
-    const result = await axios.put(urlEdit, formData, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.data && result.data.code === 200) {
-      getDataReqMaterial();
-      NotificationManager.success(`Data material resource berhasil diupdate`, 'Success!!');
-    } else {
-      NotificationManager.error(`Data material resource gagal diupdate`, `Failed!!`);
-    }
-  }
-
-  const toggleAddDialog = () => {
-    setOpenDialog(!openDialog)
-  }
-
-  const onShowSizeChange = (current, pageSize) => {
-    setRowsPerPage(pageSize)
-  }
-
-  const onPagination = (current, pageSize) => {
-    setCurrentPage(current)
-  }
-
-  const onConfirmDelete = async () => {
-    let url = MATERIAL_RESOURCE_DELETE(idDelete);
-
-    const result = await axios.delete(url, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.data && result.data.code === 200) {
-      getDataMaterialR()
-      setIdDelete(0)
-      setAlertDelete(false)
-      NotificationManager.success(`Data material resource berhasil dihapus!`, 'Success!!');
-    } else {
-      setIdDelete(0)
-      setAlertDelete(false)
-      NotificationManager.error(`Data material resource gagal dihapus!}`, 'Failed!!');
-    }
-  }
-
-  const cancelDelete = () => {
-    setAlertDelete(false)
-    setIdDelete(0)
-  }
-
-  const RenderTable = useMemo(() => {
-    const columns = [
-      {
-        title: 'Action',
-        dataIndex: '',
-        key: 'x',
-        className: 'nowrap',
-        render: (text, record) => <>
-          <Tooltip title="Edit">
-            <Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'Edit')}><i className="fa fa-edit"></i></Button>
-          </Tooltip>
-          <Tooltip title="Hapus">
-            <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
-          </Tooltip>
-        </>,
-      },
-      { title: 'Material Name', dataIndex: 'name', key: 'name' },
-      { title: 'QTY', dataIndex: 'qty', key: 'qty' },
-      { title: 'UOM', dataIndex: 'uom', key: 'uom' },
-      { title: 'Description', dataIndex: 'description', key: 'description' },
-      { title: 'Status', dataIndex: 'status', key: 'status' }
-    ];
-
-    return (
-      <Table
-        size="small"
-        columns={columns}
-        dataSource={dataTable}
-        pagination={false}
-      />
-    )
-  }, [dataTable])
-
-  const RenderRequestMaterialTable = useMemo(() => {
-    const columns = [
-      {
-        title: 'Action',
-        dataIndex: '',
-        key: 'id',
-        className: "nowrap",
-        render: (text, record) => <>
-          <Tooltip title="Edit Request Resource">
-            <Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'EditMatReq')}><i className="fa fa-edit"></i></Button>
-          </Tooltip>{" "}
-          <Tooltip title="Delete Request Resource">
-            <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
-          </Tooltip>
-        </>,
-      },
-      { title: 'Status', dataIndex: 'status', key: 'status', render: (text, record) => renderLabelStatus(text) },
-      { title: 'Description', dataIndex: 'description', key: 'description' },
-      { title: 'Required Date', dataIndex: 'required_date', key: 'required_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
-      { title: 'QTY', dataIndex: 'qty', key: 'qty', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
-      { title: 'UOM', dataIndex: 'uom', key: 'uom', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
-      { title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
-      { title: 'Unit Price', dataIndex: 'price', key: 'price', render: (text, record) => { return renderFormatNumber(text, "Rp") }},
-      { title: 'FOM Date', dataIndex: 'fom_date', key: 'fom_date', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
-      { title: 'PR Date', dataIndex: 'pr_date', key: 'pr_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
-      { title: 'PO Date', dataIndex: 'po_date', key: 'po_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
-      { title: 'Received Date', dataIndex: 'received_date', key: 'received_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
-      { title: 'Delivery Date', dataIndex: 'delivery_date', key: 'delivery_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
-    ];
-
-    let componentGroup = [];
-
-    for (const proyek_id in dataReqMaterial) {
-      const title = `${dataReqMaterial[proyek_id][0]['join_first_kode_sortname']} - ${dataReqMaterial[proyek_id][0]['join_first_nama']}`;
-      componentGroup.push(
-        <Panel header={title} key={proyek_id}>
-          <Table
-            size="small"
-            columns={columns}
-            rowKey={"id"}
-            dataSource={dataReqMaterial[proyek_id]}
-          />
-        </Panel>
-      )
-    }
-
-    return componentGroup.map((item, index) => {
-      return item;
-    })
-  }, [dataReqMaterial])
-
-
-  const RenderMaterialDeliveryTable = useMemo(() => {
-    const columns = [
-      {
-        title: 'Action',
-        dataIndex: '',
-        key: 'id',
-        className: "nowrap",
-        render: (text, record) => <>
-
-          {text.status == "receipt to warehouse" ? <>
-            <Tooltip title="Edit Request Resource">
-              <Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'EditMatDelv')}><i className="fa fa-edit"></i></Button>
-            </Tooltip>{" "}<Tooltip title="Delete Request Resource">
-              <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
-            </Tooltip>
-          </> : "-"}
-        </>,
-      },
-      { title: 'Status', dataIndex: 'status', key: 'status' },
-      { title: 'Description', dataIndex: 'description', key: 'description' },
-      { title: 'Required Date', dataIndex: 'required_date', key: 'required_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
-      { title: 'QTY', dataIndex: 'qty', key: 'qty', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
-      { title: 'UOM', dataIndex: 'uom', key: 'uom', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
-      { title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
-      { title: 'FOM Date', dataIndex: 'fom_date', key: 'fom_date', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
-      { title: 'PR Date', dataIndex: 'pr_date', key: 'pr_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
-      { title: 'PO Date', dataIndex: 'po_date', key: 'po_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
-      { title: 'Received Date', dataIndex: 'received_date', key: 'received_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
-      { title: 'Delivery Date', dataIndex: 'delivery_date', key: 'delivery_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
-    ];
-
-    let componentGroup = [];
-
-    for (const proyek_id in dataDelvMaterial) {
-      const title = `${dataDelvMaterial[proyek_id][0]['join_first_kode_sortname']} - ${dataDelvMaterial[proyek_id][0]['join_first_nama']}`;
-      componentGroup.push(
-        <Panel header={title} key={proyek_id}>
-          <Table
-            size="small"
-            columns={columns}
-            rowKey={"id"}
-            dataSource={dataDelvMaterial[proyek_id]}
-          />
-        </Panel>
-      )
-    }
-
-    return componentGroup.map((item, index) => {
-      return item;
-    })
-  }, [dataDelvMaterial])
-
-  const CardMasterMaterial = useMemo(() => {
-    return (
-      <Card>
-        <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
-          <h4 className="capitalize">{pageName}</h4>
-          <Row>
-            <Col>
-              <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
-            </Col>
-            <Col>
-              <Tooltip title="Add Material Resource">
-                <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
-              </Tooltip>
-              <Tooltip title="Export Excel">
-                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
-              </Tooltip>
-            </Col>
-          </Row>
-        </CardHeader>
-        <CardBody>
-          {RenderTable}
-          <Pagination
-            style={{ marginTop: "25px" }}
-            showSizeChanger
-            onShowSizeChange={onShowSizeChange}
-            onChange={onPagination}
-            defaultCurrent={currentPage}
-            pageSize={rowsPerPage}
-            total={totalPage}
-            pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
-          />
-        </CardBody>
-      </Card>
-    )
-  })
-
-  const CardMaterialRequest = useMemo(() => {
-    return (
-      <Card>
-        <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
-          <h4 className="capitalize">Material Request</h4>
-          <Row>
-            <Col>
-              <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
-            </Col>
-            <Col>
-              <Tooltip title="Export Excel">
-                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
-              </Tooltip>
-            </Col>
-          </Row>
-        </CardHeader>
-        <CardBody>
-          <Collapse>
-            {RenderRequestMaterialTable}
-          </Collapse>
-        </CardBody>
-      </Card>
-    )
-  })
-
-  const CardMaterialDelivery = useMemo(() => {
-    return (
-      <Card>
-        <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
-          <h4 className="capitalize">Material Delivery to Site</h4>
-          <Row>
-            <Col>
-              <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
-            </Col>
-            <Col>
-              <Tooltip title="Export Excel">
-                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
-              </Tooltip>
-            </Col>
-          </Row>
-        </CardHeader>
-        <CardBody>
-          <Collapse>
-            {RenderMaterialDeliveryTable}
-          </Collapse>
-        </CardBody>
-      </Card>
-    )
-  })
-
-  return (
-    <div>
-      <NotificationContainer />
-      <SweetAlert
-        show={alertDelete}
-        warning
-        showCancel
-        confirmBtnText="Delete"
-        confirmBtnBsStyle="danger"
-        title={`Are you sure?`}
-        onConfirm={onConfirmDelete}
-        onCancel={() => cancelDelete()}
-        focusCancelBtn
-      >
-        Delete this data
-      </SweetAlert>
-      <DialogForm
-        openDialog={openDialog}
-        closeDialog={handleCloseDialog}
-        toggleDialog={() => toggleAddDialog}
-        typeDialog={typeDialog}
-        dataEdit={dataEdit}
-        clickOpenModal={clickOpenModal}
-        dataParent={allDataMenu}
-      />
-      <Tabs defaultActiveKey="1">
-        <TabPane tab="Material Resource Pool" key="1">
-          {CardMasterMaterial}
-        </TabPane>
-        <TabPane tab="Material Request" key="2">
-          {CardMaterialRequest}
-        </TabPane>
-        <TabPane tab="Material Delivery to Site" key="3">
-          {CardMaterialDelivery}
-        </TabPane>
-      </Tabs>
-    </div>
-  )
-}
-
-export default Resource;
+import * as XLSX from 'xlsx';
+import DialogForm from './DialogForm';
+import React, { useState, useEffect, useMemo } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from "../../../const/interceptorApi"
+import moment from 'moment'
+import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
+import { DownloadOutlined } from '@ant-design/icons';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { Pagination, Table, Button, Tooltip, Tabs, Collapse } from 'antd';
+import { formatRupiah, formatNumber, renderLabelStatus } from '../../../const/CustomFunc'
+import {
+  BASE_SIMPRO,
+  PROYEK_ADD, PROYEK_SEARCH, PROYEK_EDIT, PROYEK_DELETE,
+  MATERIAL_RESOURCE_ADD, MATERIAL_RESOURCE_EDIT, MATERIAL_RESOURCE_DELETE, MATERIAL_RESOURCE_SEARCH,
+  REQUEST_MATERIAL_SEARCH, REQUEST_MATERIAL_EDIT,
+  REQUEST_MATERIAL_UPDATE_WAREHOUSE_SITE
+} from '../../../const/ApiConst';
+
+const { TabPane } = Tabs;
+const { Panel } = Collapse;
+
+const url = "";
+const proyek_id = localStorage.getItem('proyek_id');
+const role_id = localStorage.getItem('role_id');
+const format = "DD-MM-YYYY";
+
+const groupBy = (array, key) => {
+  return array.reduce((result, currentValue) => {
+    (result[currentValue[key]] = result[currentValue[key]] || []).push(
+      currentValue
+    );
+    return result;
+  }, {});
+};
+
+const Resource = ({ params }) => {
+  const token = localStorage.getItem("token")
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${token}`
+    }
+  }
+
+  const [alertDelete, setAlertDelete] = useState(false)
+  const [allDataMenu, setAllDataMenu] = useState([])
+  const [clickOpenModal, setClickOpenModal] = useState(false)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [dataDelvMaterial, setDataDelvMaterial] = useState([])
+  const [dataEdit, setDataEdit] = useState([])
+  const [dataExport, setDataExport] = useState([])
+  const [dataReqMaterial, setDataReqMaterial] = useState([])
+  const [dataTable, setDatatable] = useState([])
+  const [idDelete, setIdDelete] = useState(0)
+  const [openDialog, setOpenDialog] = useState(false)
+  const [rowsPerPage, setRowsPerPage] = useState(10)
+  const [search, setSearch] = useState('')
+  const [totalPage, setTotalPage] = useState(0)
+  const [typeDialog, setTypeDialog] = useState('Save')
+  const pageName = params.name;
+
+  useEffect(() => {
+    getDataReqMaterial()
+  }, [])
+
+  useEffect(() => {
+    getDataMaterialR()
+  }, [search, rowsPerPage, currentPage])
+
+  useEffect(() => {
+    const cekData = dataExport || []
+    if (cekData.length > 0) {
+      exportExcel()
+    }
+  }, [dataExport])
+
+  const getDataMaterialR = async () => {
+
+    let start = 0;
+
+    if (currentPage !== 1 && currentPage > 1) {
+      start = (currentPage * rowsPerPage) - rowsPerPage
+    }
+
+    const payload = {
+      "columns": [
+        {
+          "name": "name",
+          "logic_operator": "ilike",
+          "value": search,
+          "operator": "AND"
+        }
+      ],
+      "orders": {
+        "ascending": true,
+        "columns": [
+          'id'
+        ]
+      },
+      "paging": {
+        "length": rowsPerPage,
+        "start": start
+      }
+    }
+
+    const result = await axios
+      .post(MATERIAL_RESOURCE_SEARCH, payload, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      setDatatable(result.data.data);
+      setTotalPage(result.data.totalRecord);
+    } else {
+      NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+    }
+  }
+
+  const getDataReqMaterial = async () => {
+    const payload = {
+      "columns": [
+        { "name": "description", "logic_operator": "ilike", "value": "", "operator": "AND" },
+      ],
+      "joins": [
+        { "name": "m_proyek", "column_join": "proyek_id", "column_results": ["kode_sortname", "nama"] }
+      ],
+      "orders": { "columns": ["id"], "ascending": true },
+      "paging": { "start": 0, "length": 25 }
+    }
+
+    const result = await axios
+      .post(REQUEST_MATERIAL_SEARCH, payload, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+    if (result && result.status == 200) {
+
+      if (result.data.data && result.data.data.length > 0) {
+        let filtered_matReq = [];
+        let filtered_matDelv = [];
+
+        result.data.data.map((item, index) => {
+          if (item.status === "receipt to site") {
+            filtered_matDelv.push(item);
+          }
+          else {
+            filtered_matReq.push(item);
+          }
+        })
+
+        const groupedProjectReq = groupBy(filtered_matReq, 'proyek_id');
+        const groupedProjectDelv = groupBy(filtered_matDelv, 'proyek_id');
+
+        setDataReqMaterial(groupedProjectReq);
+        setDataDelvMaterial(groupedProjectDelv);
+      }
+    } else {
+
+    }
+  }
+
+  const handleSearch = e => {
+    const value = e.target.value
+    setSearch(value);
+    setCurrentPage(1)
+  };
+
+  const handleOpenDialog = (type) => {
+    setOpenDialog(true)
+    setTypeDialog(type)
+  }
+
+  const exportExcel = () => {
+    const dataExcel = dataExport || [];
+    const fileName = `Data ${pageName}.xlsx`;
+    const ws = XLSX.utils.json_to_sheet(dataExcel);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
+    XLSX.writeFile(wb, fileName);
+    setDataExport([])
+  }
+
+
+  const handleExportExcel = async () => {
+
+    const payload = {
+      "paging": { "start": 0, "length": -1 },
+      "joins": [],
+      "orders": { "columns": ["id"], "ascending": false }
+    }
+
+    if (parseInt(role_id) !== 1) {
+      payload["columns"] = [
+        { "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" }
+      ]
+    }
+
+
+    const result = await axios
+      .post(PROYEK_SEARCH, payload, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+
+    if (result && result.data && result.data.code == 200) {
+      let resData = result.data.data;
+      const excelData = [];
+      resData.map((n, index) => {
+        let dataRow = {
+          "Nama Proyek": n.nama,
+          "Biaya": n.biaya,
+          "Color Progress": n.color_progress,
+          "Jumlah Pekerja": n.jumlah_pekerja,
+          "Tanggal Mulai": n.mulai_proyek ? moment(n.mulai_proyek).format(format) : "-",
+          "Tanggal Selesai": n.akhir_proyek ? moment(n.akhir_proyek).format(format) : "-",
+        }
+        excelData.push(dataRow)
+      })
+      await setDataExport(excelData);
+    } else {
+      NotificationManager.error('Gagal Export Data!!', 'Failed');
+    }
+  }
+
+  const handleEdit = (data, type) => {
+    setDataEdit(data)
+    handleOpenDialog(type);
+  }
+
+  const handleDelete = async (id) => {
+    await setAlertDelete(true)
+    await setIdDelete(id)
+  }
+
+  const handleCloseDialog = (type, data) => {
+    if (type === "save") {
+      saveMaterialResource(data);
+    } else if (type === "edit") {
+      editMaterialR(data);
+    } else if (type === 'EditMatReq') {
+      editMaterialReq(data);
+    } else if (type === 'EditMatDelv') {
+      editMaterialDelv(data);
+    }
+    setDataEdit([])
+    setOpenDialog(false)
+  }
+
+  const renderFormatNumber = (text, prefix) => {
+    if (text) {
+      return formatNumber(text.toString(), prefix)
+    } else {
+      return "-"
+    }
+  }
+
+  const saveMaterialResource = async (data) => {
+    const formData = data
+    const result = await axios.post(MATERIAL_RESOURCE_ADD, formData, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      getDataMaterialR()
+      NotificationManager.success(`Data material resource berhasil ditambah`, 'Success!!');
+    } else {
+      NotificationManager.error(`${result.data.message}`, 'Failed!!');
+    }
+  }
+
+  const editMaterialR = async (data) => {
+
+    let urlEdit = MATERIAL_RESOURCE_EDIT(data.id)
+    const formData = data
+
+
+    const result = await axios.put(urlEdit, formData, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      getDataMaterialR();
+      NotificationManager.success(`Data material resource berhasil diedit`, 'Success!!');
+    } else {
+      NotificationManager.error(`Data material resource gagal di edit`, `Failed!!`);
+    }
+  }
+
+  const editMaterialReq = async (data) => {
+    let urlEdit = REQUEST_MATERIAL_EDIT(data.id)
+    const formData = data
+
+
+    const result = await axios.put(urlEdit, formData, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      getDataReqMaterial();
+      NotificationManager.success(`Data material resource berhasil diupdate`, 'Success!!');
+    } else {
+      NotificationManager.error(`Data material resource gagal diupdate`, `Failed!!`);
+    }
+  }
+
+  const editMaterialDelv = async (data) => {
+    let urlEdit = REQUEST_MATERIAL_EDIT(data.id)
+    const formData = data
+
+
+    const result = await axios.put(urlEdit, formData, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      getDataReqMaterial();
+      NotificationManager.success(`Data material resource berhasil diupdate`, 'Success!!');
+    } else {
+      NotificationManager.error(`Data material resource gagal diupdate`, `Failed!!`);
+    }
+  }
+
+  const toggleAddDialog = () => {
+    setOpenDialog(!openDialog)
+  }
+
+  const onShowSizeChange = (current, pageSize) => {
+    setRowsPerPage(pageSize)
+  }
+
+  const onPagination = (current, pageSize) => {
+    setCurrentPage(current)
+  }
+
+  const onConfirmDelete = async () => {
+    let url = MATERIAL_RESOURCE_DELETE(idDelete);
+
+    const result = await axios.delete(url, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      getDataMaterialR()
+      setIdDelete(0)
+      setAlertDelete(false)
+      NotificationManager.success(`Data material resource berhasil dihapus!`, 'Success!!');
+    } else {
+      setIdDelete(0)
+      setAlertDelete(false)
+      NotificationManager.error(`Data material resource gagal dihapus!}`, 'Failed!!');
+    }
+  }
+
+  const cancelDelete = () => {
+    setAlertDelete(false)
+    setIdDelete(0)
+  }
+
+  const RenderTable = useMemo(() => {
+    const columns = [
+      {
+        title: 'Action',
+        dataIndex: '',
+        key: 'x',
+        className: 'nowrap',
+        render: (text, record) => <>
+          <Tooltip title="Edit">
+            <Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'Edit')}><i className="fa fa-edit"></i></Button>
+          </Tooltip>
+          <Tooltip title="Hapus">
+            <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+          </Tooltip>
+        </>,
+      },
+      { title: 'Material Name', dataIndex: 'name', key: 'name' },
+      { title: 'QTY', dataIndex: 'qty', key: 'qty' },
+      { title: 'UOM', dataIndex: 'uom', key: 'uom' },
+      { title: 'Description', dataIndex: 'description', key: 'description' },
+      { title: 'Status', dataIndex: 'status', key: 'status' }
+    ];
+
+    return (
+      <Table
+        size="small"
+        columns={columns}
+        dataSource={dataTable}
+        pagination={false}
+      />
+    )
+  }, [dataTable])
+
+  const RenderRequestMaterialTable = useMemo(() => {
+    const columns = [
+      {
+        title: 'Action',
+        dataIndex: '',
+        key: 'id',
+        className: "nowrap",
+        render: (text, record) => <>
+          <Tooltip title="Edit Request Resource">
+            <Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'EditMatReq')}><i className="fa fa-edit"></i></Button>
+          </Tooltip>{" "}
+          <Tooltip title="Delete Request Resource">
+            <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+          </Tooltip>
+        </>,
+      },
+      { title: 'Status', dataIndex: 'status', key: 'status', render: (text, record) => renderLabelStatus(text) },
+      { title: 'Description', dataIndex: 'description', key: 'description' },
+      { title: 'Required Date', dataIndex: 'required_date', key: 'required_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
+      { title: 'QTY', dataIndex: 'qty', key: 'qty', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
+      { title: 'UOM', dataIndex: 'uom', key: 'uom', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
+      { title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
+      { title: 'Unit Price', dataIndex: 'price', key: 'price', render: (text, record) => { return renderFormatNumber(text, "Rp") } },
+      { title: 'FOM Date', dataIndex: 'fom_date', key: 'fom_date', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
+      { title: 'PR Date', dataIndex: 'pr_date', key: 'pr_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+      { title: 'PO Date', dataIndex: 'po_date', key: 'po_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+      { title: 'Received Date', dataIndex: 'received_date', key: 'received_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+      { title: 'Delivery Date', dataIndex: 'delivery_date', key: 'delivery_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+    ];
+
+    let componentGroup = [];
+
+    for (const proyek_id in dataReqMaterial) {
+      const title = `${dataReqMaterial[proyek_id][0]['join_first_kode_sortname']} - ${dataReqMaterial[proyek_id][0]['join_first_nama']}`;
+      componentGroup.push(
+        <Panel header={title} key={proyek_id}>
+          <Table
+            size="small"
+            columns={columns}
+            rowKey={"id"}
+            dataSource={dataReqMaterial[proyek_id]}
+          />
+        </Panel>
+      )
+    }
+
+    return componentGroup.map((item, index) => {
+      return item;
+    })
+  }, [dataReqMaterial])
+
+
+  const RenderMaterialDeliveryTable = useMemo(() => {
+    const columns = [
+      {
+        title: 'Action',
+        dataIndex: '',
+        key: 'id',
+        className: "nowrap",
+        render: (text, record) => <>
+
+          {text.status == "receipt to warehouse" ? <>
+            <Tooltip title="Edit Request Resource">
+              <Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text, 'EditMatDelv')}><i className="fa fa-edit"></i></Button>
+            </Tooltip>{" "}<Tooltip title="Delete Request Resource">
+              <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+            </Tooltip>
+          </> : "-"}
+        </>,
+      },
+      { title: 'Status', dataIndex: 'status', key: 'status' },
+      { title: 'Description', dataIndex: 'description', key: 'description' },
+      { title: 'Required Date', dataIndex: 'required_date', key: 'required_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
+      { title: 'QTY', dataIndex: 'qty', key: 'qty', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
+      { title: 'UOM', dataIndex: 'uom', key: 'uom', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
+      { title: 'QTY Received', dataIndex: 'qty_received', key: 'qty_received', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? text : "-"}</div>) },
+      { title: 'FOM Date', dataIndex: 'fom_date', key: 'fom_date', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{moment(text).format("D-M-YYYY")}</div>) },
+      { title: 'PR Date', dataIndex: 'pr_date', key: 'pr_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+      { title: 'PO Date', dataIndex: 'po_date', key: 'po_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+      { title: 'Received Date', dataIndex: 'received_date', key: 'received_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+      { title: 'Delivery Date', dataIndex: 'delivery_date', key: 'delivery_date', className: "nowrap", render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+    ];
+
+    let componentGroup = [];
+
+    for (const proyek_id in dataDelvMaterial) {
+      const title = `${dataDelvMaterial[proyek_id][0]['join_first_kode_sortname']} - ${dataDelvMaterial[proyek_id][0]['join_first_nama']}`;
+      componentGroup.push(
+        <Panel header={title} key={proyek_id}>
+          <Table
+            size="small"
+            columns={columns}
+            rowKey={"id"}
+            dataSource={dataDelvMaterial[proyek_id]}
+          />
+        </Panel>
+      )
+    }
+
+    return componentGroup.map((item, index) => {
+      return item;
+    })
+  }, [dataDelvMaterial])
+
+  const CardMasterMaterial = useMemo(() => {
+    return (
+      <Card>
+        <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+          <h4 className="capitalize">{pageName}</h4>
+          <Row>
+            <Col>
+              <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
+            </Col>
+            <Col>
+              <Tooltip title="Add Material Resource">
+                <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
+              </Tooltip>
+              <Tooltip title="Export Excel">
+                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
+              </Tooltip>
+            </Col>
+          </Row>
+        </CardHeader>
+        <CardBody>
+          {RenderTable}
+          <Pagination
+            style={{ marginTop: "25px" }}
+            showSizeChanger
+            onShowSizeChange={onShowSizeChange}
+            onChange={onPagination}
+            defaultCurrent={currentPage}
+            pageSize={rowsPerPage}
+            total={totalPage}
+            pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
+          />
+        </CardBody>
+      </Card>
+    )
+  })
+
+  const CardMaterialRequest = useMemo(() => {
+    return (
+      <Card>
+        <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+          <h4 className="capitalize">Material Request</h4>
+          <Row>
+            <Col>
+              <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
+            </Col>
+            <Col>
+              <Tooltip title="Export Excel">
+                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
+              </Tooltip>
+            </Col>
+          </Row>
+        </CardHeader>
+        <CardBody>
+          <Collapse>
+            {RenderRequestMaterialTable}
+          </Collapse>
+        </CardBody>
+      </Card>
+    )
+  })
+
+  const CardMaterialDelivery = useMemo(() => {
+    return (
+      <Card>
+        <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+          <h4 className="capitalize">Material Delivery to Site</h4>
+          <Row>
+            <Col>
+              <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search...`} />
+            </Col>
+            <Col>
+              <Tooltip title="Export Excel">
+                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
+              </Tooltip>
+            </Col>
+          </Row>
+        </CardHeader>
+        <CardBody>
+          <Collapse>
+            {RenderMaterialDeliveryTable}
+          </Collapse>
+        </CardBody>
+      </Card>
+    )
+  })
+
+  return (
+    <div>
+      <NotificationContainer />
+      <SweetAlert
+        show={alertDelete}
+        warning
+        showCancel
+        confirmBtnText="Delete"
+        confirmBtnBsStyle="danger"
+        title={`Are you sure?`}
+        onConfirm={onConfirmDelete}
+        onCancel={() => cancelDelete()}
+        focusCancelBtn
+      >
+        Delete this data
+      </SweetAlert>
+      <DialogForm
+        openDialog={openDialog}
+        closeDialog={handleCloseDialog}
+        toggleDialog={() => toggleAddDialog}
+        typeDialog={typeDialog}
+        dataEdit={dataEdit}
+        clickOpenModal={clickOpenModal}
+        dataParent={allDataMenu}
+      />
+      <Tabs defaultActiveKey="1">
+        <TabPane tab="Material Resource Pool" key="1">
+          {CardMasterMaterial}
+        </TabPane>
+        <TabPane tab="Material Request" key="2">
+          {CardMaterialRequest}
+        </TabPane>
+        <TabPane tab="Material Delivery to Site" key="3">
+          {CardMaterialDelivery}
+        </TabPane>
+      </Tabs>
+    </div>
+  )
+}
+
+export default Resource;