From 9fe44a9cdc4d55af9604cdd928ae1b7110cda30e Mon Sep 17 00:00:00 2001
From: Dilmurod <dilmurod8829@gmail.com>
Date: Fri, 12 Dec 2025 11:45:35 +0500
Subject: [PATCH] Update page added status Archived

---
 src/Components/Updates/Update.tsx      |   1 +
 src/Components/Updates/UpdateEdit.tsx  |  41 ++-
 src/Components/Updates/UpdateTable.tsx | 431 +++++++++++--------------
 3 files changed, 218 insertions(+), 255 deletions(-)

diff --git a/src/Components/Updates/Update.tsx b/src/Components/Updates/Update.tsx
index ceec203..101b68d 100644
--- a/src/Components/Updates/Update.tsx
+++ b/src/Components/Updates/Update.tsx
@@ -143,6 +143,7 @@ const Update = () => {
           <Option value="Done">Done</Option>
           <Option value="Paper">Paper</Option>
           <Option value="Setup">Setup</Option>
+          <Option value="Archived">Archived</Option>
         </Select>
 
         <Select
diff --git a/src/Components/Updates/UpdateEdit.tsx b/src/Components/Updates/UpdateEdit.tsx
index 90b7e9b..63c2d03 100644
--- a/src/Components/Updates/UpdateEdit.tsx
+++ b/src/Components/Updates/UpdateEdit.tsx
@@ -13,6 +13,8 @@ import {
   Button,
   Select,
   Upload,
+  Modal,
+  notification,
 } from "antd";
 import { updateController } from "../../API/LayoutApi/update";
 import {
@@ -55,7 +57,10 @@ const UpdateEdit = () => {
         refetch();
         document.location.replace("/#/updates/");
       } else {
-        alert("solution is empty!!!!!!!!!!!!!!!!!!!!!");
+        notification.error({
+          message: "Error",
+          description: "Solution cannot be empty!",
+        });
       }
     } else {
       await updateController.updatePut(value, id);
@@ -123,15 +128,31 @@ const UpdateEdit = () => {
     }
   }, [data]);
 
+  // const ClickDelete = () => {
+  //   const shouldDelete = window.confirm(
+  //     "Вы уверены, что хотите удалить эту задачу?"
+  //   );
+  //   if (shouldDelete && id !== undefined) {
+  //     updateController.deleteUpdateController(id).then((data: any) => {
+  //       document.location.replace(`/#/updates/`);
+  //     });
+  //   }
+  // };
+
   const ClickDelete = () => {
-    const shouldDelete = window.confirm(
-      "Вы уверены, что хотите удалить эту задачу?"
-    );
-    if (shouldDelete && id !== undefined) {
-      updateController.deleteUpdateController(id).then((data: any) => {
-        document.location.replace(`/#/updates/`);
-      });
-    }
+    Modal.confirm({
+      title: "Are you sure you want to delete this task?",
+      okText: "Yes",
+      okType: "danger",
+      cancelText: "No",
+      onOk() {
+        if (id) {
+          updateController.deleteUpdateController(id).then(() => {
+            document.location.replace("/#/updates/");
+          });
+        }
+      },
+    });
   };
   const [imgname, setImgname] = useState<any>([]);
   function handlePaste(event: any) {
@@ -301,7 +322,7 @@ const UpdateEdit = () => {
                                 danger
                                 onClick={ClickDelete}
                               >
-                                Delete
+                                Archived
                               </Button>
                             )}
                             <Button
diff --git a/src/Components/Updates/UpdateTable.tsx b/src/Components/Updates/UpdateTable.tsx
index 5a2644e..d334953 100644
--- a/src/Components/Updates/UpdateTable.tsx
+++ b/src/Components/Updates/UpdateTable.tsx
@@ -1,9 +1,6 @@
-import { Button, Space, Table, Tooltip, theme } from "antd";
+import { Button, Space, Table, Tooltip, theme, Tag } from "antd";
 import { PushpinOutlined } from "@ant-design/icons";
 import moment from "moment";
-import { useCompanyData } from "../../Hooks/Companies";
-import { useCustomerData } from "../../Hooks/Customers";
-import { useUserData } from "../../Hooks/Users";
 import { updateController } from "../../API/LayoutApi/update";
 import {
   QueryObserverResult,
@@ -40,9 +37,8 @@ const UpdateTable = ({
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<TUpdate[], unknown>>;
 }) => {
-  // const CompanyData = useCompanyData({});
-  // const CustomerData = useCustomerData({});
-  // const AdminData = useUserData({});
+  // Jadvalda kamida bitta is_active === false yozuv borligini aniqlaymiz
+  const hasInactive = data?.some((item) => item.is_active === false);
 
   const [isTextSelected, setIsTextSelected] = useState(false);
 
@@ -67,6 +63,7 @@ const UpdateTable = ({
       document.location.replace(`/#/updates/${record.id}`);
     }
   };
+
   const getImageSource = (source: string) => {
     switch (source) {
       case "Zippy":
@@ -86,263 +83,207 @@ const UpdateTable = ({
 
   const { token } = theme.useToken();
 
+  // Asosiy ustunlar
+  const baseColumns = [
+    {
+      title: <img src={tagIcon} alt="" />,
+      dataIndex: "no",
+      width: "4%",
+      align: "center",
+    },
+    {
+      title: "Company",
+      dataIndex: "company",
+      ellipsis: { showTitle: false },
+      width: "10%",
+      render: (text: any) => (
+        <Tooltip placement="topLeft" title={text?.name}>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            {text?.source && (
+              <img
+                src={getImageSource(text?.source)}
+                alt=""
+                style={{ width: 20, height: 20, marginRight: 10 }}
+              />
+            )}
+            {text?.name}
+          </div>
+        </Tooltip>
+      ),
+    },
+    {
+      title: "Driver",
+      dataIndex: "customer",
+      ellipsis: { showTitle: false },
+      width: "10%",
+      render: (item: { name: string }) => (
+        <Tooltip placement="topLeft" title={item?.name}>
+          {item?.name}
+        </Tooltip>
+      ),
+    },
+    {
+      title: "Created by",
+      dataIndex: "provider",
+      ellipsis: { showTitle: false },
+      responsive: ["xl"],
+      width: "10%",
+      render: (provider: { username: string }) => (
+        <Tooltip placement="topLeft" title={provider?.username}>
+          {provider?.username}
+        </Tooltip>
+      ),
+    },
+    {
+      title: "Completed by",
+      dataIndex: "executor",
+      ellipsis: { showTitle: false },
+      responsive: ["lg"],
+      width: "10%",
+      render: (executor: { username: string }) => (
+        <Tooltip placement="topLeft" title={executor?.username}>
+          {executor?.username}
+        </Tooltip>
+      ),
+    },
+  ];
+
+  const archivedColumn = {
+    title: "Status",
+    dataIndex: "is_active",
+    width: "8%",
+    render: (is_active: boolean) =>
+      is_active === false ? <Tag color="gray">Archived</Tag> : null,
+  };
+
+  // Qolgan ustunlar
+  const otherColumns = [
+    {
+      title: hasInactive ? "Status Before Deletion" : "Status",
+      dataIndex: "status",
+      ellipsis: { showTitle: false },
+      width: "10%",
+      render: (status: string) => (
+        <span>
+          {status === "Done" && <p className="status-done">Done</p>}
+          {status === "In Progress" && (
+            <p className="status-in-progress">In Progress</p>
+          )}
+          {status === "New" && <p className="status-new">New</p>}
+          {status === "Setup" && <p className="status-new">Setup</p>}
+          {status === "Paper" && <p className="status-new">Paper</p>}
+        </span>
+      ),
+    },
+    {
+      title: "Note",
+      dataIndex: "note",
+      width: "10%",
+      ellipsis: { showTitle: false },
+      render: (note: string) => (
+        <Tooltip placement="topLeft" title={note}>
+          {note}
+        </Tooltip>
+      ),
+    },
+    {
+      title: "Solution",
+      dataIndex: "solution",
+      width: "10%",
+      responsive: ["lg"],
+      ellipsis: { showTitle: false },
+      render: (note: string) => (
+        <Tooltip placement="topLeft" title={note}>
+          {note}
+        </Tooltip>
+      ),
+    },
+    {
+      title: "Created at",
+      dataIndex: "created",
+      ellipsis: { showTitle: false },
+      responsive: ["xxl"],
+      width: "10%",
+      render: (note: string) => (
+        <Tooltip placement="topLeft" title={note}>
+          {note}
+        </Tooltip>
+      ),
+    },
+    {
+      title: "Actions",
+      dataIndex: "action",
+      width: "6%",
+      align: "center",
+      render: (record: TUpdate) => {
+        return (
+          <div className="notedit">
+            {record.status !== "Done" && (
+              <Space>
+                {record.is_pinned ? (
+                  <Button
+                    style={{ background: "#f99e2c", color: "#fff" }}
+                    onClick={() => {
+                      const updateData = { is_pinned: false };
+                      updateController
+                        .updatePatch(updateData, record.id)
+                        .then(() => {
+                          refetch();
+                        });
+                    }}
+                    icon={<PushpinOutlined />}
+                  />
+                ) : (
+                  <Button
+                    onClick={() => {
+                      const updateData = { is_pinned: true };
+                      updateController
+                        .updatePatch(updateData, record.id)
+                        .then(() => {
+                          refetch();
+                        });
+                    }}
+                    icon={<PushpinOutlined />}
+                  />
+                )}
+              </Space>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+
+  // Oxirida ustunlar massivini yaratamiz
+  // Agar is_active false bo‘lgan yozuvlar bor bo‘lsa, archivedColumn qo‘shiladi
+  const columns: any = hasInactive
+    ? [...baseColumns, archivedColumn, ...otherColumns]
+    : [...baseColumns, ...otherColumns];
+
   return (
     <div style={{ paddingBottom: 40 }}>
       <Table
         onRow={(record) => ({
-          onClick: (event) => Row(record, event),
+          onClick:
+            record.is_active === false
+              ? undefined
+              : (event) => Row(record, event),
         })}
         dataSource={data?.map((u, i) => ({
           no: i + 1,
           ...u,
-          // company_name: CompanyData?.data?.find(
-          //   (company: any) => company.id === u.company_id
-          // )?.name,
-          // customer_name: CustomerData?.data?.data?.find(
-          //   (customer: any) => customer.id === u.customer_id
-          // )?.name,
-          // in_charge_name: AdminData?.data?.find(
-          //   (admin: any) => admin.id === u.provider_id
-          // )?.username,
-          // executor_name: AdminData?.data?.find(
-          //   (admin: any) => admin.id === u.executor_id
-          // )?.username,
           created: moment(u?.created_at, "YYYY-MM-DD HH:mm:ss").format(
             "DD.MM.YYYY HH:mm"
           ),
           action: { ...u },
         }))}
-        columns={[
-          {
-            title: <img src={tagIcon} alt="" />,
-            dataIndex: "no",
-            width: "4%",
-            align: "center",
-          },
-          {
-            title: "Company",
-            dataIndex: "company",
-            ellipsis: {
-              showTitle: false,
-            },
-            width: "10%",
-            render: (text: any, record: any) => (
-              <Tooltip placement="topLeft" title={text?.name}>
-                <div style={{ display: "flex", alignItems: "center" }}>
-                  {text?.source && (
-                    <img
-                      src={getImageSource(text?.source)}
-                      alt=""
-                      style={{ width: 20, height: 20, marginRight: 10 }}
-                    />
-                  )}
-                  {text?.name}
-                </div>
-              </Tooltip>
-            ),
-          },
-          {
-            title: "Driver",
-            dataIndex: "customer",
-            ellipsis: {
-              showTitle: false,
-            },
-            width: "10%",
-            render: (item: { name: string }) => (
-              <Tooltip placement="topLeft" title={item?.name}>
-                {item?.name}
-              </Tooltip>
-            ),
-          },
-          {
-            title: "Created by",
-            dataIndex: "provider",
-            ellipsis: {
-              showTitle: false,
-            },
-            responsive: ["xl"],
-            width: "10%",
-            render: (provider: { username: string }) => (
-              <Tooltip placement="topLeft" title={provider?.username}>
-                {provider?.username}
-              </Tooltip>
-            ),
-          },
-          {
-            title: "Completed by",
-            dataIndex: "executor",
-            ellipsis: {
-              showTitle: false,
-            },
-            responsive: ["lg"],
-            width: "10%",
-            render: (executor: { username: string }) => (
-              <Tooltip placement="topLeft" title={executor?.username}>
-                {executor?.username}
-              </Tooltip>
-            ),
-          },
-          {
-            title: "Status",
-            dataIndex: "status",
-            ellipsis: {
-              showTitle: false,
-            },
-            width: "10%",
-            render: (status: string) => (
-              <span>
-                {status === "Done" && <p className="status-done">Done</p>}
-                {status === "In Progress" && (
-                  <p className="status-in-progress">In Progress</p>
-                )}
-                {status === "New" && <p className="status-new">New</p>}
-                {status === "Setup" && <p className="status-new">Setup</p>}
-                {status === "Paper" && <p className="status-new">Paper</p>}
-              </span>
-            ),
-          },
-          {
-            title: "Note",
-            dataIndex: "note",
-            width: "10%",
-            ellipsis: {
-              showTitle: false,
-            },
-            render: (note: string) => (
-              <Tooltip placement="topLeft" title={note}>
-                {note}
-              </Tooltip>
-            ),
-          },
-          {
-            title: "Solution",
-            dataIndex: "solution",
-            width: "10%",
-            responsive: ["lg"],
-            ellipsis: {
-              showTitle: false,
-            },
-            render: (note: string) => (
-              <Tooltip placement="topLeft" title={note}>
-                {note}
-              </Tooltip>
-            ),
-          },
-          {
-            title: "Created at",
-            dataIndex: "created",
-            ellipsis: {
-              showTitle: false,
-            },
-            responsive: ["xxl"],
-            width: "10%",
-            render: (note: string) => (
-              <Tooltip placement="topLeft" title={note}>
-                {note}
-              </Tooltip>
-            ),
-          },
-          {
-            title: "Actions",
-            dataIndex: "action",
-            width: "6%",
-            align: "center",
-            render: (record: TUpdate) => {
-              return (
-                <div className="notedit">
-                  {record.status !== "Done" && (
-                    <Space>
-                      {record.is_pinned ? (
-                        // <button
-                        //   className="btn-unpin"
-                        //   onClick={(e) => {
-                        //     const updateData = {
-                        //       is_pinned: false,
-                        //     };
-                        //     updateController
-                        //       .updatePatch(updateData, record.id)
-                        //       .then(() => {
-                        //         refetch();
-                        //       });
-                        //   }}
-                        // >
-                        //   <img src={unpin} alt="" />
-                        // </button>
-                        <Button
-                          style={{ background: "#f99e2c", color: "#fff" }}
-                          onClick={(e) => {
-                            const updateData = {
-                              is_pinned: false,
-                            };
-                            updateController
-                              .updatePatch(updateData, record.id)
-                              .then(() => {
-                                refetch();
-                              });
-                          }}
-                          icon={<PushpinOutlined />}
-                        ></Button>
-                      ) : (
-                        // <button
-                        //   className="btn-pin"
-                        //   style={{ paddingTop: 2 }}
-                        //   onClick={(e) => {
-                        //     const updateData = {
-                        //       is_pinned: true,
-                        //     };
-                        //     updateController
-                        //       .updatePatch(updateData, record.id)
-                        //       .then(() => {
-                        //         refetch();
-                        //       });
-                        //   }}
-                        // >
-                        //   <img src={pin} alt="" />
-                        // </button>
-                        <Button
-                          onClick={(e) => {
-                            const updateData = {
-                              is_pinned: true,
-                            };
-                            updateController
-                              .updatePatch(updateData, record.id)
-                              .then(() => {
-                                refetch();
-                              });
-                          }}
-                          icon={<PushpinOutlined />}
-                        ></Button>
-                      )}
-                    </Space>
-                  )}
-                </div>
-              );
-            },
-          },
-        ]}
+        columns={columns}
         rowClassName={(record, index) =>
           index % 2 === 0 ? "odd-row" : "even-row"
         }
         loading={isLoading}
         size="small"
         scroll={{ x: "768px" }}
-        // pagination={{
-        //   pageSize: 10,
-        //   size: "default",
-        //   style: {
-        //     margin: 0,
-        //     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,
-        //   },
-        //   showLessItems: true,
-        // }}
         pagination={false}
         bordered
       />