update status added

src/components/ReactTable3/BasicTable.js

@@ -18,6 +18,69 @@ 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, []);
@@ -87,7 +150,7 @@ const BasicTable = () => {
 
   const { globalFilter, pageIndex, pageSize } = state;
   // const firstPageRows = rows.slice(0, 10);
-
+  console.log(rows.length);
   return (
     <>
       <div className="flex flex-row items-center justify-between mb-3 mx-4">
@@ -95,7 +158,7 @@ const BasicTable = () => {
         <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
         {/* pagination */}
         <div
-          className="border border-blue-400 rounded p-1 flex flex-items-center"
+          className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
           style={{}}
         >
           {/* go to page */}
@@ -112,8 +175,13 @@ const BasicTable = () => {
               }}
               style={{ width: "50px" }}
             />
-            <span className="text-sm"> برو به صفحه </span>
+            <span className={`text-xs`} style={{ color: "#65A9FF" }}>
+              {" "}
+              برو به صفحه{" "}
+            </span>
           </div>
+          {/*  */}
+          <div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
           {/* arrows */}
           <button
             className="rounded py-1 px-2 mx-1 text-xs"
@@ -149,6 +217,7 @@ const BasicTable = () => {
           </button>
         </div>
       </div>
+      {/*  */}
       {/* toggle columns */}
       {/* <div>
         <div>
@@ -163,22 +232,20 @@ const BasicTable = () => {
           </div>
         ))}
       </div> */}
-
       {/* Change Column Order */}
       {/* <button onClick={changeOrder}> Change Column Order </button> */}
-
       <table
         {...getTableProps()}
         className="min-w-full divide-y divide-gray-200"
       >
-        <thead className="bg-gray-300">
+        <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
           {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
                 <th
                   {...column.getHeaderProps(column.getSortByToggleProps())}
                   scope="col"
-                  className="cursor-pointer px-4 py-2 text-right text-xs"
+                  className="cursor-pointer p-4 text-right text-sm font-medium"
                   style={{ color: "#3287B9" }}
                 >
                   {column.render("Header")}
@@ -207,7 +274,7 @@ const BasicTable = () => {
                   return (
                     <td
                       {...cell.getCellProps()}
-                      className="px-4 py-4 whitespace-nowrap text-sm"
+                      className="p-4 whitespace-nowrap text-sm"
                       role="cell"
                       style={{ color: "#00253A" }}
                     >
@@ -221,7 +288,7 @@ const BasicTable = () => {
         </tbody>
 
         <tfoot
-          className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`}
+          className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
         >
           {footerGroups.map((footerGroup) => (
             <tr {...footerGroup.getFooterGroupProps()}>
@@ -229,7 +296,7 @@ const BasicTable = () => {
                 <td
                   {...column.getFooterProps}
                   className="px-4 py-2 text-right text-xs"
-                  style={{ color: "#3287B9" }}
+                  style={{ color: "#fff" }}
                 >
                   {column.render("Footer")}
                 </td>
@@ -238,8 +305,7 @@ const BasicTable = () => {
           ))}
         </tfoot>
       </table>
-
+      {/* <pre>
-      <pre>
         <code>
           {JSON.stringify(
             {
@@ -249,24 +315,36 @@ const BasicTable = () => {
             2
           )}
         </code>
-      </pre>
+      </pre> */}
-
+      <div className="mt-3 ">
-      <div>
+        <span className="text-sm ml-4">
-        <span>
+          صفحه{" "}
-          Page{" "}
+          <strong className="text-indigo-500">
-          <strong>
+            {pageIndex + 1} از {pageOptions.length}
-            {pageIndex + 1} of {pageOptions.length}
           </strong>
           {""}
         </span>
 
         <select
+          className="text-white text-sm rounded cursor-pointer"
+          style={{
+            backgroundColor: "#65A9FF",
+            borderColor: "#65A9FF",
+          }}
           value={pageSize}
           onChange={(e) => setPageSize(Number(e.target.value))}
         >
           {[7, 10, 25, 50].map((pageSize) => (
-            <option key={pageSize} value={pageSize}>
+            <option
-              Show {pageSize}
+              key={pageSize}
+              value={pageSize}
+              className=" text-sm"
+              style={{
+                direction: "ltr",
+                textAlign: "right",
+              }}
+            >
+              نمایش {pageSize}
             </option>
           ))}
         </select>

src/components/ReactTable3/MOCK_DATA.json

@@ -14,7 +14,7 @@
     "order-price": 26,
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
-      "order-status": 1,
+    "order-status": 2,
     "order-level": 2
   },
   {
@@ -23,7 +23,7 @@
     "order-price": 44,
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
-      "order-status": 1,
+    "order-status": 3,
     "order-level": 2
   },
   {
@@ -32,7 +32,7 @@
     "order-price": 73,
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
-      "order-status": 1,
+    "order-status": 4,
     "order-level": 2
   },
   {
@@ -41,160 +41,7 @@
     "order-price": 96,
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
-      "order-status": 1,
+    "order-status": 5,
-      "order-level": 2
-    },
-    {
-      "name": "کیس استوک",
-      "order-date": "1396/09/22",
-      "order-price": 75,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 2",
-      "order-date": "1399/09/25",
-      "order-price": 26,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 2",
-      "order-date": "1399/09/25",
-      "order-price": 26,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 3",
-      "order-date": "1399/09/22",
-      "order-price": 44,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "لپ تاپ مک بوک اپل",
-      "order-date": "1410/09/27",
-      "order-price": 73,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "تبلت اپل",
-      "order-date": "1375/09/25",
-      "order-price": 96,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 3",
-      "order-date": "1399/09/22",
-      "order-price": 44,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "لپ تاپ مک بوک اپل",
-      "order-date": "1410/09/27",
-      "order-price": 73,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "تبلت اپل",
-      "order-date": "1375/09/25",
-      "order-price": 96,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "کیس استوک",
-      "order-date": "1396/09/22",
-      "order-price": 75,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 1",
-      "order-date": "1399/09/27",
-      "order-price": 27,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "کیس استوک",
-      "order-date": "1396/09/22",
-      "order-price": 75,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 2",
-      "order-date": "1399/09/25",
-      "order-price": 26,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 3",
-      "order-date": "1399/09/22",
-      "order-price": 44,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "لپ تاپ مک بوک اپل",
-      "order-date": "1410/09/27",
-      "order-price": 73,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "تبلت اپل",
-      "order-date": "1375/09/25",
-      "order-price": 96,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "کیس استوک",
-      "order-date": "1396/09/22",
-      "order-price": 75,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
     "order-level": 2
   }
 ]

src/components/ReactTable3/columns.js

@@ -1,45 +1,49 @@
-import {format} from 'date-fns'
+import { format } from "date-fns";
+import Table, { StatusPill } from "./BasicTable"; // new
 
-import {ColumnFilter} from './ColumnFilter';
+import { ColumnFilter } from "./ColumnFilter";
 
 export const COLUMNS = [
   {
-        Header: 'نام و نام خانوادگی',
+    Header: "نام و نام خانوادگی",
-        Footer: 'نام و نام خانوادگی',
+    Footer: "نام و نام خانوادگی",
-        accessor: 'name',
+    accessor: "name",
     disableSortBy: true,
   },
   {
-        Header: 'تاریخ سفارش',
+    Header: "تاریخ سفارش",
-        Footer: 'تاریخ سفارش',
+    Footer: "تاریخ سفارش",
-        accessor: 'order-date',
+    accessor: "order-date",
-        Cell: ({ value }) => { return format(new Date (value), 'dd/MM/yyyy') }
+    Cell: ({ value }) => {
+      return format(new Date(value), "dd/MM/yyyy");
+    },
   },
   {
-        Header: 'مبلغ سفارش',
+    Header: "مبلغ سفارش",
-        Footer: 'مبلغ سفارش',
+    Footer: "مبلغ سفارش",
-        accessor: 'order-price',
+    accessor: "order-price",
-        Filter: ColumnFilter
+    Filter: ColumnFilter,
   },
   {
-        Header: 'شماره سفارش',
+    Header: "شماره سفارش",
-        Footer: 'شماره سفارش',
+    Footer: "شماره سفارش",
-        accessor: 'order-number',
+    accessor: "order-number",
   },
   {
-        Header: 'شغل کاربر',
+    Header: "شغل کاربر",
-        Footer: 'شغل کاربر',
+    Footer: "شغل کاربر",
-        accessor: 'user-job',
+    accessor: "user-job",
   },
   {
-        Header: 'وضعیت سفارش',
+    Header: "وضعیت سفارش",
-        Footer: 'وضعیت سفارش',
+    Footer: "وضعیت سفارش",
-        accessor: 'order-status',
+    accessor: "order-status",
+    Cell: StatusPill,
   },
   {
-        Header: 'سطح اهمیت',
+    Header: "سطح اهمیت",
-        Footer: 'سطح اهمیت',
+    Footer: "سطح اهمیت",
-        accessor: 'order-level',
+    accessor: "order-level",
-        disableSortBy: true,
+    Cell: StatusPill,
   },
-]
+];