add task modal

src/App.css

@@ -743,12 +743,6 @@
   cursor: pointer;
 }
 
-.ant-upload-wrapper .ant-upload-drag {
-  border: 0.5px solid rgba(215, 216, 224, 1);
-  padding: 25px 0;
-  color: #333333;
-}
-
 .card_stat {
   /* font-weight: 500; */
   /* font-size: 20px; */
@@ -814,8 +808,8 @@
 }
 
 .ant-upload-list-text {
-  overflow: scroll;
-  height: 50px;
+  /* overflow: scroll; */
+  height: 0;
 }
 
 .ant-modal-mask {

src/App.tsx

@@ -304,7 +304,7 @@ const App: React.FC = () => {
 
   useEffect(() => {
     const handleResize = () => {
-      if (window.innerWidth <= 768) {
+      if (window.innerWidth <= 1000) {
         setCollapsed(true);
       } else {
         setCollapsed(false);

src/Components/Companies/CompaniesEdit.tsx

@@ -15,9 +15,14 @@ import {
   Radio,
   RadioChangeEvent,
   Select,
+  theme,
 } from "antd";
 import { companyController } from "../../API/LayoutApi/companies";
-import { DashboardOutlined } from "@ant-design/icons";
+import {
+  DashboardOutlined,
+  LeftOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
 import Notfound from "../../Utils/Notfound";
 import Table from "antd/es/table";
 import AddDriver from "./AddDriver";
@@ -53,6 +58,8 @@ const CompanyEdit = () => {
   const customerData = useCustomerByComanyData({ page, page_size: 10 }, id);
   const { data, refetch, status } = useCompanyOne(id);
 
+  const { token } = theme.useToken();
+
   const showModal = () => {
     setOpen(true);
   };
@@ -346,17 +353,40 @@ const CompanyEdit = () => {
                       direction="vertical"
                     >
                       <Space
-                        style={{ width: "100%", justifyContent: "flex-end" }}
+                        style={{
+                          justifyContent: "end",
+                          position: "fixed",
+                          bottom: 0,
+                          left: 0,
+                          width: "100%",
+                          // backgroundColor: token.colorBgContainer,
+                          boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+                          padding: "10px 0",
+                          zIndex: 1000,
+                        }}
                         wrap
                       >
                         <Button
-                          type="primary"
-                          icon={<StepBackwardOutlined />}
                           onClick={Previos}
                           disabled={customerData.data?.previous ? false : true}
-                        ></Button>
+                          style={{
+                            backgroundColor: token.colorBgContainer,
+                            color: token.colorText,
+                            border: "none",
+                          }}
+                        >
+                          <LeftOutlined />
+                        </Button>
                         <Input
-                          style={{ width: 50, textAlign: "right" }}
+                          disabled
+                          style={{
+                            width: 40,
+                            textAlign: "center",
+                            background: token.colorBgContainer,
+                            border: "1px solid",
+                            borderColor: token.colorText,
+                            color: token.colorText,
+                          }}
                           value={page}
                           onChange={(e) => {
                             let num = e.target.value;
@@ -366,11 +396,16 @@ const CompanyEdit = () => {
                           }}
                         />
                         <Button
-                          type="primary"
-                          icon={<StepForwardOutlined />}
                           onClick={Next}
                           disabled={customerData.data?.next ? false : true}
-                        ></Button>
+                          style={{
+                            backgroundColor: token.colorBgContainer,
+                            color: token.colorText,
+                            border: "none",
+                          }}
+                        >
+                          <RightOutlined />
+                        </Button>
                       </Space>
                     </Space>
                     {open && (

src/Components/Tasks/AddTask.tsx

@@ -30,6 +30,7 @@ import tt from "../../assets/tticon.svg";
 import addicon from "../../assets/addiconpng.png";
 //ts-ignore
 import fileUpload from "../../assets/upload-file.png";
+import closeIcon from "../../assets/closeIcon.png";
 
 import AddCustomer from "../Customers/AddCustomer";
 import AddDriver from "../Companies/AddDriver";
@@ -183,10 +184,27 @@ const AddTask = ({
       <AddDriver id={companyId} open={driverOpen} setOpen={setDriverOpen} />
       <Modal
         open={open}
-        width={720}
-        title="Add task"
+        width={600}
+        title={
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <span>Add Task</span>
+            <Button type="text" onClick={handleCancel}>
+              <img src={closeIcon} />
+            </Button>
+          </div>
+        }
         okText="Create"
         cancelText="Cancel"
+        centered={false}
+        bodyStyle={{
+          height: 685,
+        }}
         onCancel={handleCancel}
         onOk={() => {
           form.validateFields().then(async (values) => {
@@ -277,10 +295,8 @@ const AddTask = ({
                   onClick={(e) => setDriverOpen(true)}
                   type="primary"
                   style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
                     marginTop: 5,
+                    marginLeft: 3,
                   }}
                   disabled={!companyId}
                 >
@@ -290,7 +306,17 @@ const AddTask = ({
               </div>
             </Col>
 
-            <Col span={12}>
+            <Col span={24}>
+              <FormAnt.Item
+                label="Service"
+                name="service_id"
+                rules={[{ required: true, message: "Please select service!" }]}
+              >
+                <Select options={serviceOptions?.sort(sortByLabel)} />
+              </FormAnt.Item>
+            </Col>
+
+            <Col span={24}>
               <FormAnt.Item
                 label="Assigned to"
                 name="assigned_to_id"
@@ -315,16 +341,6 @@ const AddTask = ({
             </Col>
 
             <Col span={12}>
-              <FormAnt.Item
-                label="Service"
-                name="service_id"
-                rules={[{ required: true, message: "Please select service!" }]}
-              >
-                <Select options={serviceOptions?.sort(sortByLabel)} />
-              </FormAnt.Item>
-            </Col>
-
-            <Col span={isMobile ? 12 : 12}>
               <FormAnt.Item
                 label="Status"
                 name="status"
@@ -343,7 +359,7 @@ const AddTask = ({
               </FormAnt.Item>
             </Col>
 
-            <Col span={isMobile ? 12 : 12}>
+            <Col span={12}>
               <FormAnt.Item
                 label="PTI"
                 name="pti"
@@ -365,7 +381,7 @@ const AddTask = ({
               >
                 <TextArea
                   style={{ padding: "7px 11px" }}
-                  placeholder="note"
+                  placeholder="Note"
                   autoSize={{ minRows: isMobile ? 1 : 2, maxRows: 1 }}
                   onChange={changeText}
                   value={text}
@@ -395,19 +411,18 @@ const AddTask = ({
                     />
                   </div>
                 )}
-                <br />
               </FormAnt.Item>
             </Col>
           </Row>
         </FormAnt>
         <FormAnt>
-          <Row gutter={[16, 16]}>
+          <Row gutter={[16, 0]}>
             <Col span={isMobile ? 6 : 24}>
               <FormAnt.Item name="attachment">
                 <div>
                   <Upload.Dragger
                     name="file"
-                    height={174}
+                    height={100}
                     multiple={true}
                     customRequest={({ file, onSuccess }: any) => {
                       const formData = new FormData();
@@ -425,7 +440,10 @@ const AddTask = ({
                     }}
                   >
                     {!isMobile ? (
-                      <p className={`ant-upload-drag-icon`}>
+                      <p
+                        className={`ant-upload-drag-icon`}
+                        style={{ margin: 0 }}
+                      >
                         <img src={fileUpload} />
                       </p>
                     ) : (
@@ -441,9 +459,8 @@ const AddTask = ({
                           Click to select
                         </span>
                         <br />
-                        <span style={{ fontSize: 13 }}>
-                          Maximum file size is 10 MB <br />
-                          (only .jpeg .jpg .png .pdf)
+                        <span style={{ fontSize: 12 }}>
+                          Maximum file size is 10 MB
                         </span>
                       </p>
                     )}

src/Components/Tasks/TaskModal.tsx

@@ -1,13 +1,5 @@
 import { TTask } from "../../types/Tasks/TTasks";
-import {
-  Dropdown,
-  MenuProps,
-  Modal,
-  Table,
-  Tabs,
-  Tooltip,
-  message,
-} from "antd";
+import { Dropdown, MenuProps, Modal, Table, Tabs, Tooltip, theme } from "antd";
 import TabPane from "antd/es/tabs/TabPane";
 import { role, timeZone } from "../../App";
 import { useTaskHistory } from "../../Hooks/Tasks";
@@ -16,7 +8,11 @@ import { useEffect, useState } from "react";
 import { taskController } from "../../API/LayoutApi/tasks";
 import { useTeamData } from "../../Hooks/Teams";
 import { TTeam } from "../../types/Team/TTeam";
-import { EditOutlined } from "@ant-design/icons";
+import {
+  ArrowRightOutlined,
+  CaretRightOutlined,
+  EditOutlined,
+} from "@ant-design/icons";
 import { TSocket } from "../../types/common/TSocket";
 // @ts-ignore
 import closeIcon from "../../assets/closeIcon.png";
@@ -71,13 +67,15 @@ const TaskModal = ({
   socketData: TSocket | undefined;
 }) => {
   const moment = require("moment-timezone");
-  const theme = localStorage.getItem("theme") === "true" ? true : false;
+  const themes = localStorage.getItem("theme") === "true" ? true : false;
   const [text, setText] = useState<string | undefined>(recordTask?.note);
   const [pti, setPti] = useState<boolean | undefined>(recordTask?.pti);
   const [status, setStatus] = useState(recordTask?.status);
   const [teamName, setTeamName] = useState(recordTask?.assigned_to?.name);
   const { data, isLoading } = useTaskHistory(recordTask?.id);
 
+  const { token } = theme.useToken();
+
   const handleCancel = () => {
     setModalOpen(!modalOpen);
   };
@@ -211,13 +209,13 @@ const TaskModal = ({
       onCancel={handleCancel}
       footer={null}
       open={modalOpen}
-      width={800}
+      width={700}
       maskClosable={true}
       // style={{ position: "fixed", right: 0, top: 0, bottom: 0, height: 1000 }}
     >
-      <div className={!theme ? "TaskModal-header" : "TaskModal-header-dark"}>
-        <div className={!theme ? "TaskModal-title" : "TaskModal-title-dark"}>
-          <p className={!theme ? "p-driver" : "p-driver-dark"}>
+      <div className={!themes ? "TaskModal-header" : "TaskModal-header-dark"}>
+        <div className={!themes ? "TaskModal-title" : "TaskModal-title-dark"}>
+          <p className={!themes ? "p-driver" : "p-driver-dark"}>
             {recordTask?.customer?.name}
           </p>
           <Dropdown
@@ -227,7 +225,11 @@ const TaskModal = ({
             disabled={role === "Checker" && status === "Done"}
           >
             <button
-              style={{ marginLeft: 12, display: "flex", alignItems: "center" }}
+              style={{
+                marginLeft: 12,
+                display: "flex",
+                alignItems: "center",
+              }}
               className={`status-${status}`}
             >
               {status}
@@ -247,16 +249,24 @@ const TaskModal = ({
           >
             <button
               disabled={recordTask?.status !== "New"}
-              style={{ marginRight: 12 }}
-              className={`btn-modal-action-${theme && "dark"}`}
+              style={{
+                marginRight: 12,
+                color: token.colorText,
+                backgroundColor: token.colorBgContainer,
+              }}
+              className={`btn-modal-action-${themes && "dark"}`}
             >
               <img src={forwardIcon} alt="" />
               Forward
             </button>
           </Dropdown>
           <button
-            style={{ marginLeft: 12 }}
-            className={`btn-modal-action-${theme && "dark"}`}
+            style={{
+              marginLeft: 12,
+              color: token.colorText,
+              backgroundColor: token.colorBgContainer,
+            }}
+            className={`btn-modal-action-${themes && "dark"}`}
             onClick={showUploadModal}
           >
             <img src={uploadIcon} alt="" />
@@ -264,8 +274,12 @@ const TaskModal = ({
           </button>
           <button
             onClick={handleCancel}
-            style={{ marginLeft: 20 }}
-            className={`btn-modal-action-${theme && "dark"}`}
+            style={{
+              marginLeft: 20,
+              color: token.colorText,
+              backgroundColor: token.colorBgContainer,
+            }}
+            className={`btn-modal-action-${themes && "dark"}`}
           >
             <img style={{ margin: 2 }} src={closeIcon} alt="" />
           </button>
@@ -301,36 +315,36 @@ const TaskModal = ({
               </p>
               <div className="info-body">
                 <tr>
-                  <p className={!theme ? "sub" : "sub-dark"}>Comapany</p>
-                  <p className={!theme ? "info" : "info-dark"}>
+                  <p className={!themes ? "sub" : "sub-dark"}>Comapany</p>
+                  <p className={!themes ? "info" : "info-dark"}>
                     {recordTask?.company?.name}
                   </p>
                 </tr>
                 <tr>
-                  <p className={!theme ? "sub" : "sub-dark"}>Driver</p>
-                  <p className={!theme ? "info" : "info-dark"}>
+                  <p className={!themes ? "sub" : "sub-dark"}>Driver</p>
+                  <p className={!themes ? "info" : "info-dark"}>
                     {recordTask?.customer?.name}
                   </p>
                 </tr>
                 <tr>
-                  <p className={!theme ? "sub" : "sub-dark"}>Service</p>
-                  <p className={!theme ? "info" : "info-dark"}>
+                  <p className={!themes ? "sub" : "sub-dark"}>Service</p>
+                  <p className={!themes ? "info" : "info-dark"}>
                     {recordTask?.service?.title}
                   </p>
                 </tr>
                 <tr>
-                  <p className={!theme ? "sub" : "sub-dark"}>Team</p>
-                  <p className={!theme ? "info" : "info-dark"}>{teamName}</p>
+                  <p className={!themes ? "sub" : "sub-dark"}>Team</p>
+                  <p className={!themes ? "info" : "info-dark"}>{teamName}</p>
                 </tr>
                 <tr>
-                  <p className={!theme ? "sub" : "sub-dark"}>Assignee</p>
-                  <p className={!theme ? "info" : "info-dark"}>
+                  <p className={!themes ? "sub" : "sub-dark"}>Assignee</p>
+                  <p className={!themes ? "info" : "info-dark"}>
                     {recordTask?.in_charge?.username}
                   </p>
                 </tr>
                 <tr>
-                  <p className={!theme ? "sub" : "sub-dark"}>PTI</p>
-                  <p className={!theme ? "info" : "info-dark"}>
+                  <p className={!themes ? "sub" : "sub-dark"}>PTI</p>
+                  <p className={!themes ? "info" : "info-dark"}>
                     {pti === false ? "Do" : "No need"}
                   </p>
                   <button
@@ -348,8 +362,8 @@ const TaskModal = ({
                   </button>
                 </tr>
                 <tr>
-                  <p className={!theme ? "sub" : "sub-dark"}>Created at</p>
-                  <p className={!theme ? "info" : "info-dark"}>
+                  <p className={!themes ? "sub" : "sub-dark"}>Created at</p>
+                  <p className={!themes ? "info" : "info-dark"}>
                     {moment(
                       recordTask?.created_at,
                       "YYYY-MM-DD HH:mm:ss"
@@ -358,7 +372,7 @@ const TaskModal = ({
                 </tr>
               </div>
               <div style={{ marginTop: 20 }}>
-                <label className={!theme ? "sub" : "sub-dark"}>Note:</label>
+                <label className={!themes ? "sub" : "sub-dark"}>Note:</label>
                 <TextArea
                   style={{ padding: "7px 11px", marginTop: 10 }}
                   placeholder="Description"
@@ -368,8 +382,12 @@ const TaskModal = ({
                 />
               </div>
               <button
-                style={{ marginTop: 20 }}
-                className={`btn-modal-action-${theme && "dark"}`}
+                style={{
+                  marginTop: 20,
+                  color: token.colorText,
+                  backgroundColor: token.colorBgContainer,
+                }}
+                className={`btn-modal-action-${themes && "dark"}`}
                 onClick={(e) => patchTask()}
               >
                 <img src={editIcon} alt="" />
@@ -495,7 +513,7 @@ const TaskModal = ({
                           alignItems: "center",
                           justifyContent: "space-between",
                           borderRadius: 8,
-                          color: !theme ? "rgba(15, 17, 28, 1)" : "#bbb",
+                          color: !themes ? "rgba(15, 17, 28, 1)" : "#bbb",
                           border: "1px solid rgba(215, 216, 224, 1)",
                           boxShadow: "0px 1px 3px 0px rgba(20, 22, 41, 0.1)",
                         }}

src/Components/Tasks/TaskTable.tsx

@@ -327,22 +327,38 @@ const TaskTable = ({
       {
         title: "Created at",
         dataIndex: "created",
-        width: "12%",
+        width: "15%",
         key: "10",
-        responsive: ["xxl"],
+        // responsive: ["xxl"],
         ellipsis: {
           showTitle: false,
         },
-        render: (note: string) => (
-          <Tooltip placement="topLeft" title={note}>
-            {note}
-          </Tooltip>
+        render: (note: string, record: TTask) => (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "start",
+              gap: 5,
+            }}
+          >
+            <Tooltip placement="topLeft" title={note}>
+              {note}
+            </Tooltip>
+            <div>
+              {record?.via_telegram && (
+                <Tooltip placement="topLeft" title={"Created via Telegram"}>
+                  <img src={tgIcon} alt="" style={{ width: 20, height: 20 }} />
+                </Tooltip>
+              )}
+            </div>
+          </div>
         ),
       },
       {
         title: "Actions",
         dataIndex: "action",
-        width: isMobile ? "3%" : "10%",
+        width: "10%",
         key: "11",
         fixed: isMobile ? "right" : false,
         render: (text: string, record: TTask) => {
@@ -429,7 +445,7 @@ const TaskTable = ({
         columns={columns as any}
         loading={isLoading}
         rowClassName={rowClassName}
-        scroll={{ x: "768px" }}
+        scroll={{ x: "800px" }}
         bordered
         // pagination={{
         //   pageSize: 10,