diff --git a/myems-web/src/components/MyEMS/Ticket/TicketAgent.js b/myems-web/src/components/MyEMS/Ticket/TicketAgent.js
index 8c8d3040..e77ebb1f 100644
--- a/myems-web/src/components/MyEMS/Ticket/TicketAgent.js
+++ b/myems-web/src/components/MyEMS/Ticket/TicketAgent.js
@@ -8,9 +8,7 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownToggle,
-  Form,
   FormGroup,
-  Input,
   Label,
   Media,
   Row,
@@ -36,6 +34,11 @@ import { withTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
+import { Steps, Timeline, Collapse, Popconfirm, message, Form, Input, Checkbox, textarea } from 'antd';
+
+const { Step } = Steps;
+const { Panel } = Collapse;
+const { TextArea } = Input;
 
 const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
   useEffect(() => {
@@ -65,14 +68,12 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
   const [ticketList, setTicketList] = useState([]);
   const [ticketListAll, setTicketListAll] = useState([]);
 
-  const [ticketApplicationPayload, setTicketApplicationPayload] = useState({});
-
-  const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
-  const [cascaderOptions, setCascaderOptions] = useState(undefined);
-  const [equipmentList, setEquipmentList] = useState([]);
-  const [spinnerHidden, setSpinnerHidden] = useState(false);
-  const [exportButtonHidden, setExportButtonHidden] = useState(true);
-  const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
+  const [modalIsShown, setModalIsShown] = useState(false);
+  // status
+  const [ticketStatus, setTicketStatus] = useState({});
+  // ticket field
+  const [ticketFields, setTicketFields] = useState({});
+  const [ticketTransitionField, setTicketTransitionField] = useState('');
 
   useEffect(() => {
     let isResponseOK = false;
@@ -148,11 +149,123 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
         <FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
       </DropdownToggle>
       <DropdownMenu right className="border py-2">
-        <DropdownItem onClick={() => console.log('Edit: ', id)}>{t('Edit Equipment')}</DropdownItem>
+        <DropdownItem onClick={viewTicket.bind(this, id)}>{t('Handle Ticket')}</DropdownItem>
       </DropdownMenu>
     </UncontrolledDropdown>
   );
 
+  let hiddenModal = () => {
+    setModalIsShown(false);
+  };
+
+  let viewTicket = (id, e) => {
+    console.log('View Ticket Status', id);
+    // Get Ticket Status
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/ticket/status/' + id, {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          console.log('/ticket/status ---', json);
+          let temp = json.data;
+          let current_id;
+          temp.value.map((item, index) => {
+            console.log(
+              '/ticket/status ---',
+              item.state_id,
+              temp.current_state_id,
+              item.state_id == temp.current_state_id
+            );
+            if (item.state_id == temp.current_state_id) {
+              current_id = index;
+            }
+          });
+          console.log('temp', temp);
+          setTicketStatus({ ...temp, current_id: current_id });
+          setModalIsShown(true);
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+
+    // Get Ticket Field
+    isResponseOK = false;
+    fetch(APIBaseURL + '/ticket/fields/' + id, {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          console.log('/ticket/fields ---', json);
+          let temp = json.data;
+          console.log('fields temp', temp);
+          setTicketFields({ ...temp });
+          setModalIsShown(true);
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+
+    // Get Ticket Transition Field
+    isResponseOK = false;
+    fetch(APIBaseURL + '/ticket/transition/' + id, {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          console.log('/ticket/transition ---', json);
+          let temp = json.data;
+          console.log('transition temp', temp);
+          setTicketTransitionField({ ...temp });
+          setModalIsShown(true);
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
   const columns = [
     {
       key: 'a00',
@@ -247,6 +360,20 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
     setTicketList(ticketListAll.filter(item => item.ticket_type === selectedTicketTypeName));
   };
 
+  let callback = key => {
+    console.log(key);
+  };
+
+  let submitApplication = target => {
+    hiddenModal();
+  };
+  let confirmButton = () => {
+    message.info('Clicked on Yes.');
+  };
+
+  const text = `
+Hello world
+`;
   useEffect(() => {
     console.log('ticketList', ticketList);
   }, [ticketList]);
@@ -264,8 +391,11 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
   }, [ticketTypes]);
 
   useEffect(() => {
-    console.log('ticketApplicationPayload', ticketApplicationPayload);
-  }, [ticketApplicationPayload]);
+    console.log('ticketFields', ticketFields);
+  }, [ticketFields]);
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  };
   return (
     <Fragment>
       <div>
@@ -307,6 +437,118 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
           </Form>
         </CardBody>
       </Card>
+      <Modal size="xl" isOpen={modalIsShown}>
+        <ModalHeader>{t('Ticket')}</ModalHeader>;
+        <ModalBody>
+          <Collapse accordion onChange={callback}>
+            <Panel header={t('Ticket Workflow')} key="1">
+              <p>{text}</p>
+            </Panel>
+            <Panel header={t('Ticket Record')} key="2">
+              {ticketStatus && ticketStatus.value && (
+                <Timeline size="small" mode="left">
+                  <Timeline.Item key={100} label={''} />
+                  {ticketStatus.value
+                    .filter(item => item.state_flow_log_list.length > 0)
+                    .map((item, index) => {
+                      let description_user = item.state_flow_log_list[0].participant_info.participant_alias;
+                      let description_time = item.state_flow_log_list[0].gmt_created;
+                      let description_operation = item.state_flow_log_list[0].transition.transition_name;
+                      let description = "用户'" + description_user + "'发起了'" + description_operation + "'操作";
+                      return (
+                        <Timeline.Item key={index} label={description_time}>
+                          {description}
+                        </Timeline.Item>
+                      );
+                    })}
+                  <Timeline.Item key={999} label={''} />
+                </Timeline>
+              )}
+            </Panel>
+            <Panel header={t('Ticket Status')} key="3">
+              {ticketStatus && ticketStatus.value && (
+                <Steps current={ticketStatus.current_id}>
+                  {ticketStatus.value.map((item, index) => {
+                    let description = '';
+                    if (index < ticketStatus.current_id) {
+                      let description_user = item.state_flow_log_list[0].participant_info.participant_alias;
+                      let description_operation = item.state_flow_log_list[0].gmt_created;
+                      let description_time = item.state_flow_log_list[0].transition.transition_name;
+                      description = description_user + description_operation + '@' + description_time;
+                    }
+                    return <Step key={item.state_id} title={item.state_name} description={description} />;
+                  })}
+                </Steps>
+              )}
+            </Panel>
+            <Panel header={t('Ticket Fields')} key="4">
+              <Form
+              onFinish={onFinish}>
+                {ticketFields &&
+                  ticketFields.value &&
+                  ticketFields.value.field_list &&
+                  ticketFields.value.field_list.map((item, index) => {
+                    switch (item.field_type_id) {
+                      case 5:
+                        console.log('5');
+
+                        return (
+                          <Form.Item key={index} label={item.field_name} name={item.field_name}>
+                            <Input defaultValue={item.field_value}  disabled={item.field_attribute==1?true:false}/>
+                          </Form.Item>
+                        );
+
+                      case 55:
+                        console.log('55');
+
+                        return (
+                          <Form.Item key={index} label={item.field_name} name={item.field_name}>
+                            <TextArea defaultValue={item.field_value}  disabled={item.field_attribute==1?true:false}/>
+                          </Form.Item>
+                          // <InputGroup key={index}>
+                          //   <InputGroupText>{item.field_name}</InputGroupText>
+                          //   <textarea value={item.field_value} disabled />
+                          // </InputGroup>
+                        );
+                        break;
+                      default:
+                        console.log('default');
+                        break;
+                    }
+                  })}
+              </Form>
+            </Panel>
+          </Collapse>
+        </ModalBody>
+        <ModalFooter>
+          {ticketTransitionField &&
+            ticketTransitionField.value &&
+            ticketTransitionField.value.map((item, index) => {
+              if (item.alert_enable) {
+                return (
+                  <Popconfirm
+                    key={index}
+                    placement="top"
+                    title={text}
+                    onConfirm={submitApplication}
+                    okText="Yes"
+                    cancelText="No"
+                  >
+                    <Button color="primary">{item.transition_name}</Button>
+                  </Popconfirm>
+                );
+              } else {
+                return (
+                  <Button key={index} color="primary" onClick={submitApplication}>
+                    {item.transition_name}
+                  </Button>
+                );
+              }
+            })}
+
+          <Button onClick={hiddenModal}>{t('Close')}</Button>
+        </ModalFooter>
+      </Modal>
 
       <DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
     </Fragment>
diff --git a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js b/myems-web/src/components/MyEMS/Ticket/TicketApplication.js
index 406a4c55..3ac8f543 100644
--- a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js
+++ b/myems-web/src/components/MyEMS/Ticket/TicketApplication.js
@@ -37,10 +37,10 @@ import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
 import { join } from 'lodash';
-import { Steps, Timeline } from 'antd';
+import { Steps, Timeline, Collapse } from 'antd';
 
 const { Step } = Steps;
-
+const { Panel } = Collapse;
 const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   useEffect(() => {
     let is_logged_in = getCookieValue('is_logged_in');
@@ -504,6 +504,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
           <ModalBody>
             {ticketStatus && (
               <Timeline mode="left">
+                <Timeline.Item key={100} label={""}></Timeline.Item>
                 {ticketStatus.value
                   .filter(item => item.state_flow_log_list.length > 0)
                   .map((item, index) => {
@@ -517,7 +518,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
                       </Timeline.Item>
                     );
                   })}
-
+                <Timeline.Item key={999} label={""}></Timeline.Item>
               </Timeline>
             )}
           </ModalBody>