@ant-design/icons#CloseCircleOutlined JavaScript Examples

Unsubscribe = () =>  {
  const dispatch = useDispatch()
  const search = useLocation().search
  useEffect(() => {
    const email = new URLSearchParams(search).get('email');
    const token = new URLSearchParams(search).get('token');
    dispatch(unsubscribeEmail(email,token))
  },[search, dispatch]);
  const unsubscribe = useSelector((state) => state.base.unsubscribe);
  const {
      isDone,
      success,
      email,
  } = unsubscribe;
  return (
    <Row className={'padding--sides width-100 height-100'}>
      <Card className='border-round padding--sides padding--ends margin--ends background-grey center' style={{width: '100%'}}>
        {
          isDone ?
          success ?
          <>
            <CheckCircleOutlined className='f72 text-green' />
            <div className='text-black center margin--top f18'>
              You have successfully unsubscribed! Your email {email} will no longer receive notifications. Redirecting to homepage...
            </div>
          </> :
          <>
            <CloseCircleOutlined className='f72 text-red' />
            <div className='text-black center margin--top f18'>
              Something went wrong and we could not process your request. Please Try again.
            </div>
          </> :
          <Loader />
        }		
      </Card>
    </Row>
  )
}

storiesOf('antd/tag', module).add('status', () => 
  <>
    <Divider orientation="left">Without icon</Divider>
    <div>
      <Tag color="success">success</Tag>
      <Tag color="processing">processing</Tag>
      <Tag color="error">error</Tag>
      <Tag color="warning">warning</Tag>
      <Tag color="default">default</Tag>
    </div>
    <Divider orientation="left">With icon</Divider>
    <div>
      <Tag icon={<CheckCircleOutlined />} color="success">
        success
      </Tag>
      <Tag icon={<SyncOutlined spin />} color="processing">
        processing
      </Tag>
      <Tag icon={<CloseCircleOutlined />} color="error">
        error
      </Tag>
      <Tag icon={<ExclamationCircleOutlined />} color="warning">
        warning
      </Tag>
      <Tag icon={<ClockCircleOutlined />} color="default">
        waiting
      </Tag>
      <Tag icon={<MinusCircleOutlined />} color="default">
        stop
      </Tag>
    </div>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>We preset five different colors, you can set color property such as <code>success</code>,<code>processing</code>,<code>error</code>,<code>default</code> and <code>warning</code> to indicate specific status.</p></>) } });

storiesOf('antd/tag', module).add('customize', () => 
  <>
    <Tag closable closeIcon="关 闭">
      Tag1
    </Tag>
    <Tag closable closeIcon={<CloseCircleOutlined />}>
      Tag2
    </Tag>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The close icon can be customized using <code>closeIcon</code>.</p></>) } });

storiesOf('antd/result', module).add('error', () => 
  <Result
    status="error"
    title="Submission Failed"
    subTitle="Please check and modify the following information before resubmitting."
    extra={[
      <Button type="primary" key="console">
        Go Console
      </Button>,
      <Button key="buy">Buy Again</Button>,
    ]}
  >
    <div className="desc">
      <Paragraph>
        <Text
          strong
          style={{
            fontSize: 16,
          }}
        >
          The content you submitted has the following error:
        </Text>
      </Paragraph>
      <Paragraph>
        <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account has been
        frozen. <a>Thaw immediately &gt;</a>
      </Paragraph>
      <Paragraph>
        <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account is not yet
        eligible to apply. <a>Apply Unlock &gt;</a>
      </Paragraph>
    </div>
  </Result>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Complex error feedback.</p></>) } });

render() {
        const {
            type,
            visible,
        } = this.state;

        return (
            <Fragment>
                <div
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        height: 28,
                        padding: '0 10px',
                        border: '1px solid #d9d9d9',
                        borderRadius: 4,
                        cursor: 'pointer',
                    }}
                    onClick={() => this.setState({visible: true})}
                >
                    {type ? (
                        <Fragment>
                            <Icon type={type}/>
                            <CloseCircleOutlined onClick={this.handleClear}/>
                        </Fragment>
                    ) : (
                        <span style={{color: '#c7c7c7'}}>请选择图标</span>
                    )}
                </div>
                <IconModal
                    visible={visible}
                    onOk={this.handleOk}
                    onCancel={() => this.setState({visible: false})}
                />
            </Fragment>
        );
    }

messages = status =>
  ({
    F: {
      message: 'Acesso Bloqueado',
      icon: <CloseCircleOutlined />
    },
    P: {
      message: 'Acesso Limitado',
      icon: <ExclamationCircleOutlined />
    },
    O: {
      message: 'Acesso Liberado',
      icon: <CheckOutlined />
    }
  }[status])

FailedRegistration = (props) => {
  return (
		<div className='center'>
			<CloseCircleOutlined className='f72 text-red' />
			<div className=' center margin--top para-style'>
                Something went wrong and we could not process your request. Please try again.
			</div>
			<Button block='true' className='submit-button margin--ends text-white' onClick={() => props.resetRegisterForm()}> Try again</Button>
		</div>
  )
}

VerifyEmail = () =>  {
  const dispatch = useDispatch()
  const search = useLocation().search
  useEffect(() => {
    const email = new URLSearchParams(search).get('email');
    const token = new URLSearchParams(search).get('token');
    dispatch(onEmailVerify(email, token))
  }, [search, dispatch]);
  const verifyEmail = useSelector((state) => state.base.verifyEmail);
  const {
      isDone,
      success,
      email,
  } = verifyEmail;
  return (
    <Row className={'padding--sides width-100 height-100'}>
      <Card className='border-round padding--sides padding--ends margin--ends background-grey center' style={{width: '100%'}}>
        {
          isDone ?
          success ?
          <>
            <CheckCircleOutlined className='f72 text-green' />
            <div className='text-black center margin--top f18'>
              You have successfully subscribed! Your email-{email} will now receive notifications about slot preferences as they become available. 
            </div>
          </> :
          <>
            <CloseCircleOutlined className='f72 text-red' />
            <div className='text-black center margin--top f18'>
              Something went wrong and we could not process your request. Please Try again.
            </div>
          </> :
          <Loader />
        }		
      </Card>
    </Row>
  )
}

function InfoWindow(props) {

    if (typeof (props.item) === 'undefined') return null

    return <CustomOverlay
        position={props.item.location}
        autoViewport={props.shouldAutoCenter}>
            <Card style={ { width: 320 } }>
            <Button type="text" danger className="windowCloseBtn" onClick={props.onCloseClick}>
                <CloseCircleOutlined />
            </Button>
            <InfoItem info={props.item} key={props.item.id} handleCorrection={props.handleCorrection}/>
            </Card>
        </CustomOverlay>
}

function History(props) {
  const { current, activeId, onChange, selectedService } = props;
  const [pagination, setPagination] = useState({
    current: 0,
    pageSize: 8,
    total: 0,
  });
  const [historyList, setHistoryList] = useState([]);
  const [loading, setLoading] = useState(false);

  const loadHistory = (page) => {
    setLoading(true);
    loadHistoryList({
      page: page,
      page_size: 8,
      service_id: selectedService[1],
    }).then((r) => {
      setLoading(false);

      if (r.code === 14000) {
        return;
      }
      if (r.code !== 0) {
        message.error(r.msg);
        return;
      }

      setHistoryList(r.data.list);
      setPagination(r.data.pagination);
    });
  };

  useEffect(() => {
    if (selectedService && selectedService[1]) {
      // load history
      loadHistory(current);
    }
  }, [selectedService]);

  if (!historyList) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

  return (
    <Spin spinning={loading}>
      <ul className={styles.list}>
        {historyList.map((item, idx) => {
          return (
            <li
              onClick={() => {
                onChange(item.id);
              }}
              className={styles.listItem + (activeId === item.id ? ' ' + styles.activeItem : '')}
              key={idx}
            >
              <div className={styles.listItemBox}>
                <div className={styles.statusIcon}>
                  {item.test_passed ? (
                    <CheckCircleOutlined style={{ color: 'green' }} />
                  ) : (
                    <CloseCircleOutlined style={{ color: 'red' }} />
                  )}
                </div>
                <div className={styles.info}>
                  <div className={styles.methodName}>{item.method_name}</div>
                  <div>Time: {item.time_cost} ms</div>
                  <div>{item.created_at}</div>
                </div>
              </div>
            </li>
          );
        })}
      </ul>

      <Pagination
        simple
        onChange={(page, pageSize) => {
          loadHistory(page - 1);
        }}
        current={pagination.current + 1}
        pageSize={pagination.pageSize}
        total={pagination.total}
      />
    </Spin>
  );
}

Content = (
  <Fragment>
    <div className={styles.title}>您提交的内容有如下错误：</div>
    <div
      style={{
        marginBottom: 16,
      }}
    >
      <CloseCircleOutlined
        style={{
          marginRight: 8,
        }}
        className={styles.error_icon}
      />
      您的账户已被冻结
      <a
        style={{
          marginLeft: 16,
        }}
      >
        立即解冻
        <RightOutlined />
      </a>
    </div>
    <div>
      <CloseCircleOutlined
        style={{
          marginRight: 8,
        }}
        className={styles.error_icon}
      />
      您的账户还不具备申请资格
      <a
        style={{
          marginLeft: 16,
        }}
      >
        立即升级
        <RightOutlined />
      </a>
    </div>
  </Fragment>
)

constructor(props) {
    super(props);
    const {tables, relations} = mockData;
    this.state = {
      tables,
      relations,
      canvas: null,
      actionMenu: [{
        icon: <StarOutlined />,
        key: 'star',
        onClick: () => {
          alert('点击收藏！')
        }
      }]
    };
    this.columns = [{
      key: 'name',
      primaryKey: true
    }, {
      key: 'title',
    }];
    this.operator = [{
      id: 'isExpand',
      name: '展开/收缩血缘',
      icon: <Tooltip title='展开/收缩血缘'><BorderOuterOutlined /></Tooltip>,
      onClick: (nodeData) => {
        // 展开血缘
        let tables = _.cloneDeep(this.state.tables);
        let table = _.find(tables, (item) => item.id === nodeData.id);
        table.isCollapse = !!!table.isCollapse;
        this.setState({
          tables,
          centerId: table.id
        });
      }
    }, {
      id: 'explore',
      name: '探索血缘',
      icon: <Tooltip title='探索血缘'><DownSquareOutlined /></Tooltip>,
      onClick: (nodeData) => {
        // 添加血缘
        let node1 = {
          id: (this.state.tables.length + 1).toString(),
          name: `table-${this.state.tables.length + 1}`,
          fields: [
            {
              name: 'id',
              title: 'id',
            },
            {
              name: 'age',
              title: 'age'
            }
          ]
        };
        let node2 = {
          id: (this.state.tables.length + 2).toString(),
          name: `table-${this.state.tables.length + 2}`,
          fields: [
            {
              name: 'id',
              title: 'id',
            },
            {
              name: 'age',
              title: 'age'
            }
          ]
        };
        let relation1 = {
          srcTableId: nodeData.id,
          tgtTableId: node1.id,
          srcTableColName: 'id',
          tgtTableColName: 'age'
        };
        let relation2 = {
          srcTableId: node2.id,
          tgtTableId: nodeData.id,
          srcTableColName: 'id',
          tgtTableColName: 'age'
        }
        let _tables = _.cloneDeep(this.state.tables);
        _tables.push(node1);
        _tables.push(node2);
        let _relations = _.cloneDeep(this.state.relations);
        _relations.push(relation1);
        _relations.push(relation2);
        this.setState({
          tables: _tables,
          relations: _relations,
          centerId: nodeData.id
        });
      }
    }, {
      id: 'remove',
      name: '删除节点',
      icon: <Tooltip title='删除节点'><CloseCircleOutlined /></Tooltip>,
      onClick: (nodeData) => {
        // 删除血缘
        let _tables = _.cloneDeep(this.state.tables);
        let index = _.findIndex(_tables, (item) => item.id === nodeData.id);
        _tables.splice(index, 1);
        this.setState({
          tables: _tables
        });
      }
    }];

    // 测试修改actionMenu
    // setTimeout(() => {
    //   let actionMenu = _.cloneDeep(this.state.actionMenu);
    //   actionMenu.push({
    //     icon: <StarOutlined />,
    //     key: 'star2',
    //     onClick: () => {
    //       alert('点击收藏2！')
    //     }
    //   });
    //   this.setState({
    //     actionMenu
    //   });
    // }, 5000)
  }

render() {
    const iframeHeight = 750;
    const that = this;
    let {
      appIdcList = [],
      pprofList = [],
      appNodeList = [],
      defalutZone,
      appEnvZone,
      onChangeZone,
      pprofModelRunning,
    } = this.props;
    // const { aid, env, appNodeList, appEnvZone, onChangeZone, defalutZone} = props;
    const { pprofActiveBtn, zoneCode, appName, env } = this.state;
    const { loading, depRes, pprofModalVisible } = this.state;
    const { golang, flameGraph, graphviz } = depRes;
    console.log('env,zoneCode ', env, zoneCode);
    if (!env || !zoneCode) {
      return (
        <div style={{ marginTop: 10 }}>
          <Alert message="Warning" description="请选择环境和可用区." type="warning" showIcon />
        </div>
      );
    }
    let changeZone = (e) => {
      onChangeZone(e.target.value);
    };
    return (
      <div style={{ marginLeft: 10, marginTop: 10, marginRight: 10, marginBottom: 10 }}>
        <Row>
          <Col span={8}>
            <Select
              dropdownMatchSelectWidth
              showSearch
              allowClear={true}
              style={{ width: 500 }}
              placeholder="选择实例"
              onChange={this.changeNode}
            >
              {appNodeList != undefined &&
                appNodeList.length > 0 &&
                appNodeList.map((v, i) => {
                  return (
                    <Select.Option key={i} value={v.host_name}>
                      {v.host_name + ' (' + v.ip + ')'}
                    </Select.Option>
                  );
                })}
            </Select>
          </Col>
          <Col span={4}>
            <Button
              type="primary"
              onClick={() => {
                this.setState({ pprofModalVisible: true });
              }}
              className={'pprof-btn'}
              loading={pprofModelRunning}
            >
              更新分析图表
            </Button>
            <Modal
              title={'CPU分析，确认操作？'}
              visible={pprofModalVisible}
              onOk={() => {
                this.pprofFormRef.current
                  ?.validateFields()
                  .then((fieldsValue) => {
                    this.runPprof(fieldsValue);
                    this.setState({ pprofModalVisible: false });
                  })
                  .catch((errorInfo) => {
                    console.log('===pprofFormRef', errorInfo);
                  });
              }}
              onCancel={() => {
                this.setState({ pprofModalVisible: false });
              }}
            >
              <Form ref={this.pprofFormRef} preserve={false}>
                <FormItem
                  labelCol={{ span: 5 }}
                  wrapperCol={{ span: 15 }}
                  label="请选择采样时间"
                  name="duration_second"
                  initialValue={30}
                >
                  <Select>
                    <Option key={'30'} value={30}>
                      30秒
                    </Option>
                    <Option key={'120'} value={120}>
                      2分钟
                    </Option>
                    <Option key={'300'} value={300}>
                      5分钟
                    </Option>
                  </Select>
                </FormItem>
              </Form>
            </Modal>
          </Col>
          <Col span={8}>
            {golang === 1 && (
              <Tag color="green" key={1}>
                Golang <CheckCircleOutlined />
              </Tag>
            )}
            {golang === 0 && (
              <Tag color="geekblue" key={2}>
                Golang <CloseCircleOutlined />
              </Tag>
            )}

            {flameGraph === 1 && (
              <Tag color="green" key={3}>
                FlameGraph <CheckCircleOutlined />
              </Tag>
            )}
            {flameGraph === 0 && (
              <Tag color="geekblue" key={4}>
                FlameGraph <CloseCircleOutlined />
              </Tag>
            )}

            {graphviz === 1 && (
              <Tag color="green" key={5}>
                Graphviz <CheckCircleOutlined />
              </Tag>
            )}
            {graphviz === 0 && (
              <Tag color="geekblue" key={6}>
                Graphviz <CloseCircleOutlined />
              </Tag>
            )}
          </Col>
        </Row>

        <Row style={{ marginTop: '10px', marginLeft: '10px' }}>
          <Table
            columns={this.columns}
            dataSource={pprofList}
            pagination={{ pageSize: 9999, hideOnSinglePage: true }}
          />
        </Row>

        <Modal
          title={pprofActiveBtn}
          width="88%"
          visible={this.state.visible}
          onCancel={this.onCancel}
          maskClosable={true}
          footer={null}
        >
          <div>
            <PprofIframe iframepage={this.state.iframepage} />
          </div>
        </Modal>
        {/* <Card bordered={false} style={{ marginBottom: '20px', height: { iframeHeight } + 'px' }}/>
        </Card> */}
      </div>
    );
  }

CustomTag = ({deadlineTag, tagItem}) => {
  const  [tags, setTags] = useState(null);
  const  [inputVisible, setInputVisible] = useState(false);
  const  [inputValue, setInputValue] = useState('');
  const refInput = useRef(null);

  const handleClose = (indexTag) => {
    ChromeStorage.removeTag(deadlineTag.id,tagItem.index, indexTag).then(result => {
      updateCacheTag();
    });
  };

  const showInput =  useCallback(() => {
    setInputVisible(true);
    if(refInput.current != null) {
      refInput.current.focus();
    }
  },[refInput]);
  

  const handleInputChange = e => {
    setInputValue(e.target.value);
  };


  const updateStorageTag = (tag) => {;
    ChromeStorage.getDeadline(deadlineTag.id).then
        ( deadline => {
            if(deadline.tag) {
              // eslint-disable-next-line no-unused-expressions
              deadline.tag[tagItem.index].push(tag);
            } else {
              const newTags = Array.from(Array(deadlineTag.boxes.length), () => []);
              newTags[tagItem.index].push(tag);
              deadline.tag = newTags;
            }
            ChromeStorage.saveDeadline(deadline).then(result => {
              updateCacheTag();
            });
        });
  }

  const handleInputConfirm = () => {
    if (inputValue) {
      if (tags) {
        setTags([...tags, inputValue]);
      } else {
        setTags([inputValue]);
      }
      updateStorageTag(inputValue);
    }
    setInputVisible(false);
    setInputValue('');
  };

  const updateCacheTag = () => {
    ChromeStorage.getTag(tagItem.index, deadlineTag.id).then((tags) => {
      setTags(tags);
    });
  }

  useEffect(() => {
    setInputVisible(false);
   if (tagItem) {
      updateCacheTag();
   }
  },[tagItem, deadlineTag]);


    return (
           (tagItem != null ? tagItem.item.passed : false)  && (
              <>
              { (tags || [] ).map((item, index) => { return ( 
                      <> 
                          <Tags icon={<CloseCircleOutlined  />}
                              className="edit-tag"
                              key={index}
                              onClick={(e) => {handleClose(index)}}
                              >{item}
                          </Tags>
                      </>)})
              }
              {inputVisible && (
                  <Input
                    type="text"
                    size="small"
                    ref={refInput}
                    className="tag-input"
                    value={inputValue}
                    onChange={ (e)=>{ handleInputChange(e)}}
                    onPressEnter={ (e)=>{ handleInputConfirm(e)} }
                  />
              )}
              {!inputVisible && (
                  <NewTag className="site-tag-plus" onClick={()=>{showInput()}}>
                     <PlusCircleOutlined /> New Tag
                  </NewTag>
              )}
          </>        
          )
         
    );
}

export default function CreateItem({ config, CreateForm }) {
  let { entity, CREATE_ENTITY } = config;
  const { erpContextAction } = useErpContext();
  const { createPanel } = erpContextAction;
  const dispatch = useDispatch();
  const { isLoading, isSuccess } = useSelector(selectCreatedItem);
  const [form] = Form.useForm();
  const [subTotal, setSubTotal] = useState(0);
  const handelValuesChange = (changedValues, values) => {
    const items = values['items'];
    let subTotal = 0;

    if (items) {
      items.map((item) => {
        if (item) {
          if (item.quantity && item.price) {
            let total = item['quantity'] * item['price'];
            //sub total
            subTotal += total;
          }
        }
      });
      setSubTotal(subTotal);
    }
  };

  useEffect(() => {
    if (isSuccess) {
      form.resetFields();
      dispatch(erp.resetAction({ actionType: 'create' }));
      setSubTotal(0);
      createPanel.close();
      dispatch(erp.list({ entity }));
    }
  }, [isSuccess]);

  const onSubmit = (fieldsValue) => {
    if (fieldsValue) {
      // if (fieldsValue.expiredDate) {
      //   const newDate = fieldsValue["expiredDate"].format("DD/MM/YYYY");
      //   fieldsValue = {
      //     ...fieldsValue,
      //     expiredDate: newDate,
      //   };
      // }
      // if (fieldsValue.date) {
      //   const newDate = fieldsValue["date"].format("DD/MM/YYYY");
      //   fieldsValue = {
      //     ...fieldsValue,
      //     date: newDate,
      //   };
      // }
      if (fieldsValue.items) {
        let newList = [...fieldsValue.items];
        newList.map((item) => {
          item.total = item.quantity * item.price;
        });
        fieldsValue = {
          ...fieldsValue,
          items: newList,
        };
      }
    }
    dispatch(erp.create({ entity, jsonData: fieldsValue }));
  };

  return (
    <>
      <PageHeader
        onBack={() => createPanel.close()}
        title={CREATE_ENTITY}
        ghost={false}
        tags={<Tag color="volcano">Draft</Tag>}
        // subTitle="This is create page"
        extra={[
          <Button
            key={`${uniqueId()}`}
            onClick={() => createPanel.close()}
            icon={<CloseCircleOutlined />}
          >
            Cancel
          </Button>,
          <SaveForm form={form} config={config} key={`${uniqueId()}`} />,
        ]}
        style={{
          padding: '20px 0px',
        }}
      ></PageHeader>
      <Divider dashed />
      <Loading isLoading={isLoading}>
        <Form form={form} layout="vertical" onFinish={onSubmit} onValuesChange={handelValuesChange}>
          <CreateForm subTotal={subTotal} />
        </Form>
      </Loading>
    </>
  );
}

export default function Payment({ config }) {
  const { entity, ENTITY_NAME } = config;

  const { erpContextAction } = useErpContext();

  const { current: currentItem } = useSelector(selectRecordPaymentItem);

  const { readPanel, recordPanel } = erpContextAction;
  const money = useMoney();

  const [itemslist, setItemsList] = useState([]);
  const [currentErp, setCurrentErp] = useState({
    status: '',
    client: {
      company: '',
      email: '',
      phone: '',
      address: '',
    },
    subTotal: 0,
    taxTotal: 0,
    taxRate: 0,
    total: 0,
    credit: 0,
    number: 0,
    year: 0,
  });

  useEffect(() => {
    if (currentItem) {
      const { items } = currentItem;

      setItemsList(items);
      setCurrentErp(currentItem);
    }
  }, [currentItem]);

  useEffect(() => {
    console.info('itemslist', itemslist);
  }, [itemslist]);

  return (
    <>
      <Row gutter={[12, 12]}>
        <Col
          className="gutter-row"
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 24 }}
          lg={{ span: 20, push: 2 }}
        >
          <PageHeader
            onBack={() => readPanel.close()}
            title={`Record Payment for ${ENTITY_NAME} # ${currentErp.number}/${
              currentErp.year || ''
            }`}
            ghost={false}
            tags={<Tag color="volcano">{currentErp.status}</Tag>}
            // subTitle="This is cuurent erp page"
            extra={[
              <Button
                key={`${uniqueId()}`}
                onClick={() => recordPanel.close()}
                icon={<CloseCircleOutlined />}
              >
                Cancel
              </Button>,
              <Button
                key={`${uniqueId()}`}
                onClick={() => readPanel.open()}
                icon={<FileTextOutlined />}
              >
                Show Invoice
              </Button>,
            ]}
            style={{
              padding: '20px 0px',
            }}
          ></PageHeader>
          <Divider dashed />
        </Col>
      </Row>
      <Row gutter={[12, 12]}>
        <Col
          className="gutter-row"
          xs={{ span: 24, order: 2 }}
          sm={{ span: 24, order: 2 }}
          md={{ span: 10, order: 2, push: 2 }}
          lg={{ span: 10, order: 2, push: 4 }}
        >
          <div className="space50"></div>
          <Descriptions title={`Client : ${currentErp.client.company}`} column={1}>
            <Descriptions.Item label="E-mail">{currentErp.client.email}</Descriptions.Item>
            <Descriptions.Item label="Phone">{currentErp.client.phone}</Descriptions.Item>
            <Divider dashed />
            <Descriptions.Item label="Payment Status">{currentErp.paymentStatus}</Descriptions.Item>
            <Descriptions.Item label="SubTotal">
              {money.amountFormatter({ amount: currentErp.subTotal })}
            </Descriptions.Item>
            <Descriptions.Item label="Total">
              {money.amountFormatter({ amount: currentErp.total })}
            </Descriptions.Item>
            <Descriptions.Item label="Discount">
              {money.amountFormatter({ amount: currentErp.discount })}
            </Descriptions.Item>
            <Descriptions.Item label="Balance">
              {money.amountFormatter({ amount: currentErp.credit })}
            </Descriptions.Item>
          </Descriptions>
        </Col>

        <Col
          className="gutter-row"
          xs={{ span: 24, order: 1 }}
          sm={{ span: 24, order: 1 }}
          md={{ span: 12, order: 1 }}
          lg={{ span: 10, order: 1, push: 2 }}
        >
          <RecordPayment config={config} />
        </Col>
      </Row>
    </>
  );
}

export default function ReadItem({ config }) {
  const { entity, ENTITY_NAME } = config;
  const dispatch = useDispatch();
  const { erpContextAction } = useErpContext();
  const { moneyFormatter } = useMoney();

  const { result: currentResult } = useSelector(selectCurrentItem);

  const { readPanel, updatePanel } = erpContextAction;

  const [itemslist, setItemsList] = useState([]);
  const [currentErp, setCurrentErp] = useState({
    status: '',
    client: {
      company: '',
      email: '',
      phone: '',
      address: '',
    },
    subTotal: 0,
    taxTotal: 0,
    taxRate: 0,
    total: 0,
    credit: 0,
    number: 0,
    year: 0,
  });

  useEffect(() => {
    if (currentResult) {
      const { items } = currentResult;

      setItemsList(items);
      setCurrentErp(currentResult);
    }
  }, [currentResult]);

  useEffect(() => {
    console.info('itemslist', itemslist);
  }, [itemslist]);

  return (
    <>
      <PageHeader
        onBack={() => readPanel.close()}
        title={`${ENTITY_NAME} # ${currentErp.number}/${currentErp.year || ''}`}
        ghost={false}
        tags={<Tag color="volcano">{currentErp.paymentStatus || currentErp.status}</Tag>}
        // subTitle="This is cuurent erp page"
        extra={[
          <Button
            key={`${uniqueId()}`}
            onClick={() => readPanel.close()}
            icon={<CloseCircleOutlined />}
          >
            Close
          </Button>,
          <Button
            key={`${uniqueId()}`}
            onClick={() => {
              window.open(
                `${DOWNLOAD_BASE_URL}${entity}/${entity}-${currentErp._id}.pdf`,
                '_blank'
              );
            }}
            icon={<FilePdfOutlined />}
          >
            Download PDF
          </Button>,
          <Button
            key={`${uniqueId()}`}
            onClick={() => {
              dispatch(
                erp.currentAction({
                  actionType: 'update',
                  data: currentErp,
                })
              );
              updatePanel.open();
            }}
            type="primary"
            icon={<EditOutlined />}
          >
            Edit Erp
          </Button>,
        ]}
        style={{
          padding: '20px 0px',
        }}
      >
        <Row>
          <Statistic title="Status" value={currentErp.status} />
          <Statistic
            title="SubTotal"
            value={moneyFormatter({ amount: currentErp.subTotal })}
            style={{
              margin: '0 32px',
            }}
          />
          <Statistic
            title="Total"
            value={moneyFormatter({ amount: currentErp.total })}
            style={{
              margin: '0 32px',
            }}
          />
          <Statistic
            title="Balance"
            value={moneyFormatter({ amount: currentErp.credit })}
            style={{
              margin: '0 32px',
            }}
          />
        </Row>
      </PageHeader>
      <Divider dashed />
      <Descriptions title={`Client : ${currentErp.client.company}`}>
        <Descriptions.Item label="Address">{currentErp.client.address}</Descriptions.Item>
        <Descriptions.Item label="E-mail">{currentErp.client.email}</Descriptions.Item>
        <Descriptions.Item label="Phone">{currentErp.client.phone}</Descriptions.Item>
      </Descriptions>
      <Divider />
      <Row gutter={[12, 0]}>
        <Col className="gutter-row" span={11}>
          <p>
            <strong>ITEM</strong>
          </p>
        </Col>
        <Col className="gutter-row" span={4}>
          <p
            style={{
              textAlign: 'right',
            }}
          >
            <strong>PRICE</strong>
          </p>
        </Col>
        <Col className="gutter-row" span={4}>
          <p
            style={{
              textAlign: 'right',
            }}
          >
            <strong>QUANTITY</strong>
          </p>
        </Col>
        <Col className="gutter-row" span={5}>
          <p
            style={{
              textAlign: 'right',
            }}
          >
            <strong>TOTAL</strong>
          </p>
        </Col>
        <Divider />
      </Row>
      {itemslist.map((item) => (
        <Item key={item._id} item={item}></Item>
      ))}
      <div
        style={{
          width: '300px',
          float: 'right',
          textAlign: 'right',
          fontWeight: '700',
        }}
      >
        <Row gutter={[12, -5]}>
          <Col className="gutter-row" span={12}>
            <p>Sub Total :</p>
          </Col>

          <Col className="gutter-row" span={12}>
            <p>{moneyFormatter({ amount: currentErp.subTotal })}</p>
          </Col>
          <Col className="gutter-row" span={12}>
            <p>Tax Total ({currentErp.taxRate * 100} %) :</p>
          </Col>
          <Col className="gutter-row" span={12}>
            <p>{moneyFormatter({ amount: currentErp.taxTotal })}</p>
          </Col>
          <Col className="gutter-row" span={12}>
            <p>Total :</p>
          </Col>
          <Col className="gutter-row" span={12}>
            <p>{moneyFormatter({ amount: currentErp.total })}</p>
          </Col>
        </Row>
      </div>
    </>
  );
}

export default function UpdateItem({ config, UpdateForm }) {
  let { entity, UPDATE_ENTITY } = config;
  const { erpContextAction } = useErpContext();
  const { updatePanel } = erpContextAction;
  const dispatch = useDispatch();
  const { current, isLoading, isSuccess } = useSelector(selectUpdatedItem);
  const [form] = Form.useForm();
  const [subTotal, setSubTotal] = useState(0);
  const [autoCompleteValue, setAutoCompleteValue] = useState('');

  const handelValuesChange = (changedValues, values) => {
    const items = values['items'];
    let subTotal = 0;

    if (items) {
      items.map((item) => {
        if (item) {
          if (item.quantity && item.price) {
            let total = item['quantity'] * item['price'];
            //sub total
            subTotal += total;
          }
        }
      });
      setSubTotal(subTotal);
    }
  };

  const onSubmit = (fieldsValue) => {
    if (fieldsValue) {
      // if (fieldsValue.expiredDate) {
      //   fieldsValue = {
      //     ...fieldsValue,
      //     expiredDate: fieldsValue["expiredDate"].format("DD/MM/YYYY"),
      //   };
      // }
      // if (fieldsValue.date) {
      //   fieldsValue = {
      //     ...fieldsValue,
      //     date: fieldsValue["date"].format("DD/MM/YYYY"),
      //   };
      // }
      if (fieldsValue.items) {
        let newList = [...fieldsValue.items];
        newList.map((item) => {
          item.total = item.quantity * item.price;
        });
        fieldsValue = {
          ...fieldsValue,
          items: newList,
        };
      }
    }

    const id = current._id;
    dispatch(erp.update({ entity, id, jsonData: fieldsValue }));
  };
  useEffect(() => {
    if (isSuccess) {
      form.resetFields();
      setSubTotal(0);
      dispatch(erp.resetAction({ actionType: 'update' }));
      updatePanel.close();
      dispatch(erp.list({ entity }));
    }
  }, [isSuccess]);

  useEffect(() => {
    if (current) {
      // if (current.client) {
      //   const tmpValue = { ...current.client };
      //   setAutoCompleteValue(tmpValue);

      //   current.client = undefined;
      // }
      if (current.date) {
        current.date = dayjs(current.date);
      }
      if (current.expiredDate) {
        current.expiredDate = dayjs(current.expiredDate);
      }
      if (!current.taxRate) {
        current.taxRate = 0;
      }

      const { subTotal } = current;

      form.setFieldsValue(current);
      setSubTotal(subTotal);
    }
  }, [current]);

  return (
    <>
      <PageHeader
        onBack={() => updatePanel.close()}
        title={UPDATE_ENTITY}
        ghost={false}
        // tags={<Tag color="volcano">Draft</Tag>}
        // subTitle="This is update page"
        extra={[
          <Button
            key={`${uniqueId()}`}
            onClick={() => updatePanel.close()}
            icon={<CloseCircleOutlined />}
          >
            Cancel
          </Button>,
          <SaveForm config={config} form={form} key={`${uniqueId()}`} />,
        ]}
        style={{
          padding: '20px 0px',
        }}
      ></PageHeader>
      <Divider dashed />
      <Loading isLoading={isLoading}>
        <Form form={form} layout="vertical" onFinish={onSubmit} onValuesChange={handelValuesChange}>
          <UpdateForm subTotal={subTotal} current={current} />
        </Form>
      </Loading>
    </>
  );
}