update

src/App.js

@@ -90,17 +90,17 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        <ReactTable4 />
+        {/* <ReactTable4 /> */}
         {/* <Digikala /> */}
         {/* <DigikalaShop /> */}
-        {/* <HeaderDesign1 />
+        <HeaderDesign1 />
         <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">
             <ReactTable4 />
             <FooterDesign1 />
           </span>
-        </div> */}
+        </div>
       </div>
     </Provider>
   );

src/components/Header/desgin1/HeaderDesign1.js

@@ -51,7 +51,9 @@ const HeaderDesign1 = ({ username, userJob }) => {
         </div>
 
         <div className="flex justify-end items-center ">
-          <Switch />
+          <div className="ml-4">
+            <Switch />
+          </div>
           <div className="flex flex-row-reverse items-center relative w-60 ml-3">
             <img
               src={search}

src/components/ReactTable4/EditRow.js

@@ -28,16 +28,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             نام و نام خانوادگی:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.name}
-          />
+          >
+            {row.name}
+          </span>
         </div>
         {/* 2 */}
         <div className="flex flex-col my-2 mx-2">
@@ -47,16 +49,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             تاریخ سفارش:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.order_date}
-          />
+          >
+            {row.order_date}
+          </span>
         </div>
         {/* 3 */}
         <div className="flex flex-col my-2 mx-2">
@@ -66,16 +70,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             مبلغ سفارش:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.order_price}
-          />
+          >
+            {row.order_price}
+          </span>
         </div>
         {/* 4 */}
         <div className="flex flex-col my-2 mx-2">
@@ -85,16 +91,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             شماره سفارش:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.order_number}
-          />
+          >
+            {row.order_number}
+          </span>
         </div>
         {/* 5 */}
         <div className="flex flex-col my-2 mx-2">
@@ -104,16 +112,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             شغل کاربر:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.user_job}
-          />
+          >
+            {row.user_job}
+          </span>
         </div>
         {/* 6 */}
         <div className="flex flex-col my-2 mx-2">
@@ -123,16 +133,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             وضعیت سفارش:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.order_status}
-          />
+          >
+            {row.order_status}
+          </span>
         </div>
         {/* 7 */}
         <div className="flex flex-col my-2 mx-2">
@@ -140,18 +152,20 @@ const EditRow = ({ row, columns, sentForms }) => {
             className="text-xs text-blue-400 mb-2"
             style={{ borderColor: "#65A9FF" }}
           >
-            وضعیت سفارش:
+            سطح اهمیت:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.order_status}
-          />
+          >
+            {row.order_level}
+          </span>
         </div>
         {/* 8 */}
         <div className="flex flex-col my-2 mx-2">
@@ -161,16 +175,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             محل تولد:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.birth_place}
-          />
+          >
+            {row.birth_place}
+          </span>
         </div>
         {/* 9 */}
         <div className="flex flex-col my-2 mx-2">
@@ -180,16 +196,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             تلفن محل کار:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.office_phone}
-          />
+          >
+            {row.office_phone}
+          </span>
         </div>
         {/* 10 */}
         <div className="flex flex-col my-2 mx-2">
@@ -199,16 +217,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             تحصیلات:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.education}
-          />
+          >
+            {row.education}
+          </span>
         </div>
         {/* 11 */}
         <div className="flex flex-col my-2 mx-2">
@@ -218,16 +238,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             تاریخ تولد:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.birth_day}
-          />
+          >
+            {row.birth_day}
+          </span>
         </div>
         {/* 12 */}
         <div className="flex flex-col my-2 mx-2">
@@ -237,16 +259,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             شغل:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.job}
-          />
+          >
+            {row.job}
+          </span>
         </div>
         {/* 13 */}
         <div className="flex flex-col my-2 mx-2">
@@ -256,16 +280,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             دانشگاه:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.uni}
-          />
+          >
+            {row.uni}
+          </span>
         </div>
         {/* 14 */}
         <div className="flex flex-col my-2 mx-2">
@@ -275,16 +301,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             رشته تحصیلی:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.field_study}
-          />
+          >
+            {row.field_study}
+          </span>
         </div>
         {/* 15 */}
         <div className="flex flex-col my-2 mx-2">
@@ -294,16 +322,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             اخلاق:
           </p>
-          <input
-            type="text"
+          <span
+            role="textbox"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.behaviour}
-          />
+          >
+            {row.behaviour}
+          </span>
         </div>
         {/* 16 */}
         <div className="flex flex-col my-2 mx-2">
@@ -313,23 +343,18 @@ const EditRow = ({ row, columns, sentForms }) => {
           >
             نشانی:
           </p>
-          {/* <span
+          <span
             role="textbox"
-            className="text-xs rounded-sm bo,                color: "#00253A",
-rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-          >
-            {row.address}{" "}
-          </span> */}
-          <input
-            type="text"
             style={{
               backgroundColor: "#F8FBFF",
               borderColor: "#C8DEF9",
               color: "#00253A",
+              minWidth: "96px",
             }}
             className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-            value={row.address}
-          />
+          >
+            {row.address}
+          </span>
         </div>
       </div>
       {/* title bottom */}
@@ -347,18 +372,18 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
         {/* right */}
         <div className="flex items-center w-10/12">
           {/* map */}
-          <div className=" mx-2">
+          <div className="mx-2">
             <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
               لوکیشن مد نظر:
             </span>
             <img
-              className="my-2 mr-2 border border-blue-300 rounded"
+              className="mt-1 mr-2 border border-blue-300 rounded"
               src={map}
             />
           </div>
           {/* formInput */}
           <div className="flex flex-col flex-1 mx-2">
-            <span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
+            <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
               توضیحات:
             </span>
             <form className="flex flex-col ">
@@ -385,7 +410,7 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
           {/* previous */}
           <div className="flex flex-col relative mx-2">
             {/* title */}
-            <span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
+            <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
               توضیحات قبلی:
             </span>
             {/* content */}
@@ -431,7 +456,14 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
           </div>
         </div>
         {/* left */}
-        <div className="w-2/12 flex justify-end">dfsfdsdfs</div>
+        <div className="w-2/12 flex justify-end">
+          <button
+            className="border rounded text-sm lg:ml-3 py-2 px-4 text-white"
+            style={{ backgroundColor: "#65A9FF" }}
+          >
+            ذخیره اطلاعات{" "}
+          </button>
+        </div>
       </div>
     </section>
   );

src/components/ReactTable4/SelectColumnFilter.js

@@ -1,7 +1,8 @@
 import React from "react";
+// {columns[5].Cell({ value: row.order_status })}
 
 export const SelectColumnFilter = ({
-  column: { filterValue, setFilter, preFilteredRows, id, render },
+  column: { filterValue, setFilter, preFilteredRows, id, render, columns },
 }) => {
   const options = React.useMemo(() => {
     const options = new Set();

src/components/Switch/index.js

@@ -3,10 +3,13 @@ import "./index.scss";
 
 const Switch = () => {
   return (
-    <div className="switch">
-      <input type="checkbox" id="toggle" />
-      <label for="toggle"></label>
-    </div>
+    <label for="toogleA" class="cursor-pointer">
+      <div class="relative">
+        <input id="toogleA" type="checkbox" class="sr-only" />
+        <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
+        <div class="dot absolute w-6 h-6 bg-gray-200 rounded-full shadow -left-1 -top-1 transition"></div>
+      </div>
+    </label>
   );
 };
 

src/components/Switch/index.scss

@@ -1,52 +1,9 @@
-// *, *:after, *:before {
-// 	// box-sizing: border-box;
-// }
-
-// body {
-// 	min-height: 100vh;
-// 	display: flex;
-// 	align-items: center;
-// 	justify-content: center;
-// }
-
-.switch {
-	position: relative;
-  input[type="checkbox"] {
-    visibility: hidden;
-	position : absolute;
-    &:checked + label {
-      transform: rotate(0deg);
-      background-color: #000;
-      &:before {
-        transform: translateX(35.5px);
-        background-color: #fff;
-      }
-    }
-  }
-
-  label {
-    display: flex;
-    width: 70px;
-    height: 34px;
-    border: 3px solid;
-    border-radius: 99em;
-    position: relative;
-    transition: transform 0.3s ease-in-out;
-    transform-origin: 50% 50%;
-    cursor: pointer;
+input:checked ~ .dot {
+  transform: translateX(100%);
+  background-color: #65a9ff;
+}
 
-    &:before {
-      transition: transform 0.3s ease;
-      transition-delay: 0s;
-      content: "";
-      display: block;
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      background-color: #000;
-      border-radius: 50%;
-      top: 2px;
-      left: 3px;
-    }
-  }
+input:checked ~ .dot {
+  transform: translateX(100%);
+  background-color: #65a9ff;
 }