diff --git a/src/components/OrderProfile.jsx b/src/components/OrderProfile.jsx
index b6eb710..dc150fd 100644
--- a/src/components/OrderProfile.jsx
+++ b/src/components/OrderProfile.jsx
@@ -1,168 +1,172 @@
-import {
-  WhatsAppOutlined, FileAddOutlined, MailOutlined,
-  PhoneOutlined,
-  UserOutlined,
-  FieldNumberOutlined,
-  SaveOutlined, CompassOutlined, CalendarOutlined,
-  HeartTwoTone,
-  MoneyCollectTwoTone,
-  FolderOutlined,
-  DeleteOutlined, EditOutlined,
-  FormOutlined
-} from '@ant-design/icons'
+import { WhatsAppOutlined, FileAddOutlined, MailOutlined, PhoneOutlined, UserOutlined, FieldNumberOutlined, CompassOutlined, CalendarOutlined, EditOutlined, CheckOutlined } from '@ant-design/icons'
 
-import { useCallback, useEffect, useState } from 'react'
-import {
-  Flex,Select,Tooltip,
-  Button, Space, Divider, Typography,
-  Input, Radio,Skeleton ,Checkbox,
-} from 'antd'
-import { InboxIcon, MailCheckIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
-import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions, fetchSetRemindStateAction, remindStatusOptionsMapped } from "@/stores/OrderStore";
-import { copy, isEmpty } from "@/utils/commons";
-const OrderProfile = ({coliSN, ...props}) => {
+import { useEffect, useState } from 'react'
+import { App, Flex, Select, Tooltip, Tabs, Button, Divider, Typography, Skeleton, Checkbox } from 'antd'
+import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
+import { copy } from '@/utils/commons'
+const OrderProfile = ({ coliSN, ...props }) => {
+  const { notification, message } = App.useApp()
 
-	const [loading, setLoading] = useState(false);
-    const orderLabelOptions = copy(OrderLabelDefaultOptions);
-    orderLabelOptions.unshift({ value: 0, label: "未设置", disabled: true });
+  const [loading, setLoading] = useState(false)
+  const orderLabelOptions = copy(OrderLabelDefaultOptions)
+  orderLabelOptions.unshift({ value: 0, label: '未设置', disabled: true })
 
-	const orderStatusOptions = copy(OrderStatusDefaultOptions);
-  const [
-    orderDetail, customerDetail, lastQuotation, quotationList, fetchOrderDetail, setOrderPropValue, appendOrderComment, fetchOtherEmail, otherEmailList, fetchHistoryOrder
-   ] = useOrderStore(s => [
-    s.orderDetail, s.customerDetail, s.lastQuotation, s.quotationList, s.fetchOrderDetail, s.setOrderPropValue, s.appendOrderComment, s.fetchOtherEmail, s.otherEmailList, s.fetchHistoryOrder
+  const orderStatusOptions = copy(OrderStatusDefaultOptions)
+  const [orderDetail, customerDetail, fetchOrderDetail, setOrderPropValue, appendOrderComment] = useOrderStore((s) => [
+    s.orderDetail,
+    s.customerDetail,
+    s.fetchOrderDetail,
+    s.setOrderPropValue,
+    s.appendOrderComment,
   ])
 
   useEffect(() => {
-		if (coliSN) {
-			setLoading(true);
-			fetchOrderDetail(coliSN)
-        .then(result => {
+    if (coliSN) {
+      setLoading(true)
+      fetchOrderDetail(coliSN)
+        .then((result) => {
           console.info(result)
         })
-				.finally(() => setLoading(false))
-				// .catch(reason => {
-				// 	notification.error({
-				// 		message: "查询出错",
-				// 		description: reason.message,
-				// 		placement: "top",
-				// 		duration: 60,
-				// 	});
-				// });
-		}
+        .finally(() => setLoading(false))
+        .catch((reason) => {
+          notification.error({
+            message: '查询出错',
+            description: reason.message,
+            placement: 'top',
+            duration: 60,
+          })
+        })
+    }
     return () => {}
-	}, [coliSN]);
+  }, [coliSN])
 
   const regularText = () => {
-    if (orderDetail.buytime > 0) return "(R" + orderDetail.buytime + ")"
+    if (orderDetail.buytime > 0) return '(R' + orderDetail.buytime + ')'
     return ''
   }
 
-
   return (
     <>
-    <Skeleton active loading={loading}>
-      <Flex gap='small' vertical={true} justify='space-between'>
-        <Typography.Text>
-          <FieldNumberOutlined className='pr-1' />
-          {orderDetail.order_no}
-        </Typography.Text>
-        <Typography.Text>
-          <UserOutlined className=' pr-1' />
-          {customerDetail.name + regularText()}
-        </Typography.Text>
-        <Typography.Text>
-          <CompassOutlined className=' pr-1' />
-          Thailand
-        </Typography.Text>
-        <Typography.Text>
-          <PhoneOutlined className=' pr-1' />
-          <Button type='link' size={'small'} onClick={() => {}}>
+      {/* <Tabs
+        tabPosition={'right'}
+        onTabClick={(key) => {
+          console.info(key)
+        }}
+        items={Array.from({ length: 3 }).map((_, i) => {
+          const id = String(i + 1)
+          return {
+            label: `Tab ${id}`,
+            key: id,
+            children: `Content of Tab ${id}`,
+          }
+        })}
+      /> */}
+      <Skeleton active loading={loading}>
+        <Flex gap='small' vertical={true} justify='space-between'>
+          <Typography.Text>
+            <FieldNumberOutlined className='pr-1' />
+            {orderDetail.order_no}
+          </Typography.Text>
+          <Typography.Text>
+            <UserOutlined className=' pr-1' />
+            {customerDetail.name + regularText()}
+          </Typography.Text>
+          <Typography.Text>
+            <CompassOutlined className=' pr-1' />
+            Thailand
+          </Typography.Text>
+
+          <Typography.Link href={'/callcenter/call/' + customerDetail.phone}>
+            <PhoneOutlined className=' pr-1' />
             {customerDetail.phone}
-          </Button>
-        </Typography.Text>
-        <Typography.Text>
-          <MailOutlined className=' pr-1' />
-          {customerDetail.email}
-        </Typography.Text>
-        <Typography.Text>
-          <WhatsAppOutlined className='pr-1' />
-          <Button type='link' size={'small'} onClick={() => {}}>
+          </Typography.Link>
+          <Typography.Text>
+            <MailOutlined className='pr-1' />
+            {customerDetail.email}
+          </Typography.Text>
+          <Typography.Link
+            href='#'
+            onClick={() => {
+              console.info('whatsapp clicked.')
+            }}>
+            <WhatsAppOutlined className=' pr-1' />
             {customerDetail.whatsapp_phone_number}
-          </Button>
-        </Typography.Text>
-        <Typography.Text>
-          <CalendarOutlined className='pr-1' />
-          <span>出发日期：</span>2025-09-18，已下计划
-        </Typography.Text>
-
-      </Flex>
-      <Divider orientation="left">
-            <Typography.Text strong>订单状态</Typography.Text>
-          </Divider>
-          <Flex gap='small' vertical={true} justify='space-between'>
-      <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
-								key={"orderlabel"}
-								size="small"
-								style={{
-									width: "100%",
-								}}
-								variant="underlined"
-								onSelect={value => {
-								}}
-								value={orderDetail.tags}
-								options={orderLabelOptions}
-							/>
-              <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
-								key={"orderstatus"}
-								size="small"
-								style={{
-									width: "100%",
-								}}
-								variant="underlined"
-								onSelect={value => {
-								}}
-								value={orderDetail.states}
-								options={orderStatusOptions}
-							/>
-              </Flex>
-
-              <Divider orientation="left">
-            <Typography.Text strong>催信</Typography.Text>
-          </Divider>
-          <Checkbox.Group key='substatus' className="px-2"  options={remindStatusOptions}  />
+          </Typography.Link>
+          <Typography.Text>
+            <Tooltip title='出发日期'>
+              <CalendarOutlined className='pr-1' />
+              2025-09-18
+            </Tooltip>
+          </Typography.Text>
+          <Typography.Text>
+            <Tooltip title='计划'>
+              <CheckOutlined className='pr-1' />
+              已下计划
+            </Tooltip>
+          </Typography.Text>
+        </Flex>
+        <Divider orientation='left'>
+          <Typography.Text strong>订单状态</Typography.Text>
+        </Divider>
+        <Flex gap='small' vertical={false} justify='space-between'>
+          <Select
+            className={`[&_.ant-select-selection-item]:text-gray-950`}
+            key={'orderlabel'}
+            size='small'
+            style={{
+              width: '100%',
+            }}
+            variant='underlined'
+            onSelect={(value) => {}}
+            value={orderDetail.tags}
+            options={orderLabelOptions}
+          />
+          <Select
+            className={`[&_.ant-select-selection-item]:text-gray-950`}
+            key={'orderstatus'}
+            size='small'
+            style={{
+              width: '100%',
+            }}
+            variant='underlined'
+            onSelect={(value) => {}}
+            value={orderDetail.states}
+            options={orderStatusOptions}
+          />
+        </Flex>
 
-<Divider orientation='left'>
-        <Typography.Text strong>表单信息</Typography.Text>
-        <Tooltip title='添加'>
-        <FileAddOutlined className='pl-1' />
-        </Tooltip>
-      </Divider>
-      <p className="p-2 overflow-auto m-0 break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
+        <Divider orientation='left'>
+          <Typography.Text strong>催信</Typography.Text>
+        </Divider>
+        <Checkbox.Group key='substatus' className='px-2' options={remindStatusOptions} />
 
-        <Divider orientation="left">
-            <Typography.Text strong>特殊要求</Typography.Text>
-          </Divider>
-        <Typography.Text>
-          {orderDetail.customer_request}
-        </Typography.Text>
-        <Divider orientation="left">
-            <Typography.Text strong>外联备注</Typography.Text>
-          </Divider>
-        <Typography.Text>
-          {orderDetail.wl_memo}
-        </Typography.Text>
+        <Divider orientation='left'>
+          <Typography.Text strong>表单信息</Typography.Text>
+          <Tooltip title='添加'>
+            <FileAddOutlined className='pl-1' />
+          </Tooltip>
+        </Divider>
+        <p className='p-2 overflow-auto m-0 break-words whitespace-pre-wrap' dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
 
+        <Divider orientation='left'>
+          <Typography.Text strong>特殊要求</Typography.Text>
+        </Divider>
+        <Typography.Text>{orderDetail.customer_request}</Typography.Text>
+        <Divider orientation='left'>
+          <Typography.Text strong>外联备注</Typography.Text>
+          <Tooltip title='修改'>
+            <EditOutlined className='pl-1' />
+          </Tooltip>
+        </Divider>
+        <Typography.Text>{orderDetail.wl_memo}</Typography.Text>
 
-      <Divider orientation='left'>
-        <Typography.Text strong>附加信息</Typography.Text>
-        <Tooltip title='修改'>
-        <EditOutlined className='pl-1' />
-        </Tooltip>
-      </Divider>
-      <Typography.Text>
-          泰国马来水灯节
-      </Typography.Text>
+        <Divider orientation='left'>
+          <Typography.Text strong>附加信息</Typography.Text>
+          <Tooltip title='修改'>
+            <EditOutlined className='pl-1' />
+          </Tooltip>
+        </Divider>
+        <Typography.Text>泰国马来水灯节</Typography.Text>
       </Skeleton>
     </>
   )