From 7b8a4ae1b2935965a0b9f31e554ed6babb0dbb1d Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Tue, 8 Feb 2022 12:13:03 +0330
Subject: [PATCH] update

---
 src/App.js                                    |   6 +-
 src/components/ReactTable3/BasicTable.js      |  76 ++--------
 src/components/ReactTable3/MOCK_DATA.json     | 137 +++++++++++++++++-
 src/components/ReactTable3/OrderLevel.js      |  35 +++++
 src/components/ReactTable3/OrderStatus.js     |  55 +++++++
 src/components/ReactTable3/columns.js         |  10 +-
 .../Sidebar/SidebarDesign2/index.js           |   2 +-
 7 files changed, 248 insertions(+), 73 deletions(-)
 create mode 100644 src/components/ReactTable3/OrderLevel.js
 create mode 100644 src/components/ReactTable3/OrderStatus.js

diff --git a/src/App.js b/src/App.js
index be999cb..fcba004 100644
--- a/src/App.js
+++ b/src/App.js
@@ -80,12 +80,12 @@ function App() {
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
-        <CourseChapter />
+        {/* <CourseChapter /> */}
         {/* <SidebarMenu /> */}
-        {/* <SidebarDesign2 /> */}
+        <SidebarDesign2 />
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
-        <Design1 />
+        {/* <Design1 /> */}
         {/* <Design2 /> */}
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js
index 08bafd1..3f3459a 100644
--- a/src/components/ReactTable3/BasicTable.js
+++ b/src/components/ReactTable3/BasicTable.js
@@ -18,73 +18,14 @@ import { Checkbox } from "./Checkbox";
 
 import MOCK_DATA from "./MOCK_DATA.json";
 
-export function StatusPill({ value }) {
-  return (
-    <div className="">
-      {(() => {
-        if (value === 1) {
-          return (
-            <span
-              style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
-              className="p-2 rounded"
-            >
-              ارسال شده
-            </span>
-          );
-        } else if (value === 2) {
-          return (
-            <span
-              style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
-              className="p-2 rounded"
-            >
-              رسیدگی
-            </span>
-          );
-        } else if (value === 3) {
-          return (
-            <span
-              style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
-              className="p-2 rounded"
-            >
-              لغو شده
-            </span>
-          );
-        } else if (value === 4) {
-          return (
-            <span
-              style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
-              className="p-2 rounded"
-            >
-              پیگیری
-            </span>
-          );
-        } else {
-          return (
-            <span
-              style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
-              className="p-2 rounded"
-            >
-              خطری
-            </span>
-          );
-        }
-      })()}{" "}
-    </div>
-  );
-}
-
-// style={
-//   count > -1
-//     ? count === 0
-//       ? { color: "gray" }
-//       : { color: "green" }
-//     : { color: "red" }
-// }
 
 const BasicTable = () => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
+//   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
+  const isEven = (idx) => idx % 2 === 0;
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -166,6 +107,8 @@ const BasicTable = () => {
             <input
               className="ml-1 text-xs"
               type="number"
+            //   disabled={!canNextPage}
+            //   disabled={!canPreviousPage}
               defaultValue={pageIndex + 1}
               onChange={(e) => {
                 const pageNumber = e.target.value
@@ -264,12 +207,14 @@ const BasicTable = () => {
 
         <tbody
           {...getTableBodyProps()}
-          className="bg-white divide-y divide-gray-200"
+          className="divide-y divide-gray-200 bg-white"
         >
-          {page.map((row) => {
+          {page.map((row, idx) => {
             prepareRow(row);
             return (
-              <tr {...row.getRowProps()}>
+              <tr {...row.getRowProps()} 
+            //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
+              >
                 {row.cells.map((cell) => {
                   return (
                     <td
@@ -316,6 +261,7 @@ const BasicTable = () => {
           )}
         </code>
       </pre> */}
+
       <div className="mt-3 ">
         <span className="text-sm ml-4">
           صفحه{" "}
diff --git a/src/components/ReactTable3/MOCK_DATA.json b/src/components/ReactTable3/MOCK_DATA.json
index bc21815..a4056ca 100644
--- a/src/components/ReactTable3/MOCK_DATA.json
+++ b/src/components/ReactTable3/MOCK_DATA.json
@@ -6,7 +6,7 @@
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
     "order-status": 1,
-    "order-level": 2
+    "order-level": 1
   },
   {
     "name": "مایکروویر سامسونگ مدل 2",
@@ -24,8 +24,53 @@
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
     "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
     "order-level": 2
   },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
   {
     "name": "لپ تاپ مک بوک اپل",
     "order-date": "1410/09/27",
@@ -33,8 +78,53 @@
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
     "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
     "order-level": 2
   },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
   {
     "name": "تبلت اپل",
     "order-date": "1375/09/25",
@@ -42,6 +132,51 @@
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
     "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
     "order-level": 2
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
   }
 ]
diff --git a/src/components/ReactTable3/OrderLevel.js b/src/components/ReactTable3/OrderLevel.js
new file mode 100644
index 0000000..a09965a
--- /dev/null
+++ b/src/components/ReactTable3/OrderLevel.js
@@ -0,0 +1,35 @@
+export function OrderLevel({ value }) {
+    return (
+      <div className="p-2 rounded-3xl border border-gray-300 w-fit">
+        {(() => {
+           switch(value) {
+            case 1:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65FFAD" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت عادی</span>
+                  </div>;
+            case 2:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FF6565" }}></span>
+                      <span style={{ color: "#00253A" }} className="">اعلان سطح هشدار</span>
+                    </div>;
+            case 3:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65DAFF" }}></span>
+                      <span style={{ color: "#00253A" }} className="">بررسی و پیگیری</span>
+                    </div>;
+            case 4:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FFEA65" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت بحرانی</span>
+                    </div>;
+            default:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#CCFF65" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت پایدار</span>
+                    </div>;
+          }
+        })()}
+      </div>
+    );
+  }
diff --git a/src/components/ReactTable3/OrderStatus.js b/src/components/ReactTable3/OrderStatus.js
new file mode 100644
index 0000000..b1403bd
--- /dev/null
+++ b/src/components/ReactTable3/OrderStatus.js
@@ -0,0 +1,55 @@
+export function OrderStatus({ value }) {
+    return (
+      <div className="">
+        {(() => {
+          if (value === 1) {
+            return (
+              <span
+                style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
+                className="p-2 rounded"
+              >
+                ارسال شده
+              </span>
+            );
+          } else if (value === 2) {
+            return (
+              <span
+                style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
+                className="p-2 rounded"
+              >
+                رسیدگی
+              </span>
+            );
+          } else if (value === 3) {
+            return (
+              <span
+                style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
+                className="p-2 rounded"
+              >
+                لغو شده
+              </span>
+            );
+          } else if (value === 4) {
+            return (
+              <span
+                style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
+                className="p-2 rounded"
+              >
+                پیگیری
+              </span>
+            );
+          } else {
+            return (
+              <span
+                style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
+                className="p-2 rounded"
+              >
+                خطری
+              </span>
+            );
+          }
+        })()}{" "}
+      </div>
+    );
+  }
+  
\ No newline at end of file
diff --git a/src/components/ReactTable3/columns.js b/src/components/ReactTable3/columns.js
index 1e56c8e..1c9e408 100644
--- a/src/components/ReactTable3/columns.js
+++ b/src/components/ReactTable3/columns.js
@@ -1,8 +1,12 @@
 import { format } from "date-fns";
-import Table, { StatusPill } from "./BasicTable"; // new
+
+import Table, {  } from "./BasicTable"; // new
 
 import { ColumnFilter } from "./ColumnFilter";
 
+import { OrderStatus } from "./OrderStatus";
+import { OrderLevel } from "./OrderLevel";
+
 export const COLUMNS = [
   {
     Header: "نام و نام خانوادگی",
@@ -38,12 +42,12 @@ export const COLUMNS = [
     Header: "وضعیت سفارش",
     Footer: "وضعیت سفارش",
     accessor: "order-status",
-    Cell: StatusPill,
+    Cell: OrderStatus,
   },
   {
     Header: "سطح اهمیت",
     Footer: "سطح اهمیت",
     accessor: "order-level",
-    Cell: StatusPill,
+    Cell: OrderLevel,
   },
 ];
diff --git a/src/components/Sidebar/SidebarDesign2/index.js b/src/components/Sidebar/SidebarDesign2/index.js
index 5cdea3f..9396dac 100644
--- a/src/components/Sidebar/SidebarDesign2/index.js
+++ b/src/components/Sidebar/SidebarDesign2/index.js
@@ -69,7 +69,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
                     className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300
                       ${activeDropdown === menuItem ? "bg-blue-100" : ""}
                     `}
-                    onClick={() => setActiveDropdown(menuItem)}
+                    onClick={() => setActiveDropdown(activeDropdown === menuItem ? null  : menuItem)}
                   >
                     <img src={menuItem.icon} alt="" className="w-7 h-7" />
                     <p className="text-blue-800 text-sm flex-1 mx-2">