From 909efc7154cca17f7627a08e8384f2325e2494bb Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sun, 22 May 2022 09:45:44 +0430
Subject: [PATCH] update 12 files

---
 src/components/Tabels/ReactTable4/EditRow.js  |  30 +--
 .../Tabels/ReactTable4/GlobalFilter.js        |   3 +-
 src/components/Tabels/ReactTable4/History.js  |  29 +--
 src/components/Tabels/ReactTable4/Location.js |   4 +-
 .../Tabels/ReactTable4/OrderLevel.js          |  78 ++++----
 .../Tabels/ReactTable4/OrderStatus.js         |  25 +--
 .../ReactTable4/RenderRowSubComponent.js      | 187 ++++--------------
 .../Tabels/ReactTable4/SelectColumnFilter.js  |  12 +-
 .../Tabels/ReactTable4/SelectColumnFilter2.js |  12 +-
 src/components/Tabels/ReactTable4/SendForm.js |  18 +-
 src/components/Tabels/ReactTable4/Settings.js |   6 +-
 .../Tabels/ReactTable4/ShowMoreRows.js        |  12 +-
 12 files changed, 113 insertions(+), 303 deletions(-)

diff --git a/src/components/Tabels/ReactTable4/EditRow.js b/src/components/Tabels/ReactTable4/EditRow.js
index 66faa1d..1401190 100644
--- a/src/components/Tabels/ReactTable4/EditRow.js
+++ b/src/components/Tabels/ReactTable4/EditRow.js
@@ -6,38 +6,21 @@ import History from "./History";
 const EditRow = ({ row, columns }) => {
   // console.log(columns);
   return (
-    <section
-      className=" border-r-4 border-blue-600  p-2"
-      style={{ backgroundColor: "#F1F5FE" }}
-    >
+    <section className=" border-r-4 border-blue-600 bg-[#F1F5FE] p-2">
       <div className="flex flex-row items-center mr-2 mt-2 mb-4">
-        <div
-          className="w-1 h-4 ml-1 rounded"
-          style={{ backgroundColor: "#65A9FF" }}
-        ></div>
-        <p className="text-sm font-sansbold" style={{ color: "#00253A" }}>
-          اطلاعات هویتی
-        </p>
+        <div className="w-1 h-4 ml-1 rounded bg-[#65A9FF]"></div>
+        <p className="text-sm font-sansbold text-[#00253A]">اطلاعات هویتی</p>
       </div>
       {/* table data */}
       <div className="flex flex-wrap">
         {/* 1 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
             نام و نام خانوادگی:
           </p>
           <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"
+            className="min-w-[96px] text-xs text-[#00253A] border-[#C8DEF9] bg-[#F8FBFF] rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
           >
             {row.name}
           </span>
@@ -45,8 +28,7 @@ const EditRow = ({ row, columns }) => {
         {/* 2 */}
         <div className="flex flex-col my-2 mx-2">
           <p
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
+            className="text-xs text-blue-400 mb-2 border-[#65A9FF]"
           >
             تاریخ سفارش:
           </p>
diff --git a/src/components/Tabels/ReactTable4/GlobalFilter.js b/src/components/Tabels/ReactTable4/GlobalFilter.js
index ee17e45..55b8d78 100644
--- a/src/components/Tabels/ReactTable4/GlobalFilter.js
+++ b/src/components/Tabels/ReactTable4/GlobalFilter.js
@@ -31,8 +31,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         onFocus={() => setActiveSearchBox(true)}
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
-        className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
-        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+        className={`text-xs text-blue-400 bg-[#F9FBFF] border-[#B5D6FF] rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
       />
     </div>
   );
diff --git a/src/components/Tabels/ReactTable4/History.js b/src/components/Tabels/ReactTable4/History.js
index 5b421a6..5ece274 100644
--- a/src/components/Tabels/ReactTable4/History.js
+++ b/src/components/Tabels/ReactTable4/History.js
@@ -4,46 +4,29 @@ const History = ({ sentForms }) => {
   return (
     <div className="flex flex-col relative mx-2">
       {/* title */}
-      <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
-        توضیحات قبلی:
-      </span>
+      <span className="text-sm mb-4 text-[#65A9FF]">توضیحات قبلی:</span>
       {/* content */}
-      <div
-        style={{
-          backgroundColor: "#F8FBFF",
-          borderColor: "#C8DEF9",
-        }}
-        className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll	"
-      >
+      <div className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll	bg-[#F8FBFF] border-[#C8DEF9]">
         {/* {sentForms.slice(0, 4).map((sentForm, index) => ( */}
         {sentForms.map((sentForm, index) => (
           <div>
             {/* content */}
             <div className="p-2">
-              <p className="text-xs" style={{ color: "#00253A" }}>
-                {sentForm.title}
-              </p>
-              <p
-                className="text-xs text-left mt-2"
-                style={{ color: "#6397B5" }}
-              >
+              <p className="text-xs text-[#00253A]">{sentForm.title}</p>
+              <p className="text-xs text-left mt-2 text-[#6397B5]">
                 <span>تاریخ:</span>
-                {"  "}
                 {sentForm.date}
               </p>
             </div>
             {/* border */}
             {Number(index) !== sentForms.length - 1 && (
-              <div className="border" style={{ borderColor: "#C8DEF9" }}></div>
+              <div className="border border-[#C8DEF9]"></div>
             )}
           </div>
         ))}
       </div>
       {/* left border */}
-      <div
-        style={{ bottom: "33%", backgroundColor: "#C8DEF9" }}
-        className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"
-      ></div>
+      <div className="absolute bottom-[33%] bg-[#C8DEF9] left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"></div>
     </div>
   );
 };
diff --git a/src/components/Tabels/ReactTable4/Location.js b/src/components/Tabels/ReactTable4/Location.js
index f2bc931..c221446 100644
--- a/src/components/Tabels/ReactTable4/Location.js
+++ b/src/components/Tabels/ReactTable4/Location.js
@@ -3,9 +3,7 @@ import React from "react";
 const Location = () => {
   return (
     <div className="mx-2">
-      <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
-        لوکیشن مد نظر:
-      </span>
+      <span className="text-xs mr-2 text-[#65A9FF]">لوکیشن مد نظر:</span>
       <img
         className="mt-1 mr-2 border border-blue-300 rounded"
         src="images/ReactTable4map.svg"
diff --git a/src/components/Tabels/ReactTable4/OrderLevel.js b/src/components/Tabels/ReactTable4/OrderLevel.js
index a09965a..d7960a3 100644
--- a/src/components/Tabels/ReactTable4/OrderLevel.js
+++ b/src/components/Tabels/ReactTable4/OrderLevel.js
@@ -1,35 +1,45 @@
 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>
-    );
-  }
+  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 bg-[#65FFAD]"></span>
+                <span className="text-[#00253A]">وضعیت عادی</span>
+              </div>
+            );
+          case 2:
+            return (
+              <div className="flex flex-row items-center justify-center ">
+                <span className="w-2 h-2 rounded-full ml-2 bg-[#FF6565]"></span>
+                <span className="text-[#00253A]">اعلان سطح هشدار</span>
+              </div>
+            );
+          case 3:
+            return (
+              <div className="flex flex-row items-center justify-center ">
+                <span className="w-2 h-2 rounded-full ml-2 bg-[#65DAFF]"></span>
+                <span className="text-[#00253A]">بررسی و پیگیری</span>
+              </div>
+            );
+          case 4:
+            return (
+              <div className="flex flex-row items-center justify-center ">
+                <span className="w-2 h-2 rounded-full ml-2 bg-[#FFEA65]"></span>
+                <span className="text-[#00253A]">وضعیت بحرانی</span>
+              </div>
+            );
+          default:
+            return (
+              <div className="flex flex-row items-center justify-center ">
+                <span className="w-2 h-2 rounded-full ml-2 bg-[#CCFF65]"></span>
+                <span className="text-[#00253A]">وضعیت پایدار</span>
+              </div>
+            );
+        }
+      })()}
+    </div>
+  );
+}
diff --git a/src/components/Tabels/ReactTable4/OrderStatus.js b/src/components/Tabels/ReactTable4/OrderStatus.js
index 91e6ba6..78361fa 100644
--- a/src/components/Tabels/ReactTable4/OrderStatus.js
+++ b/src/components/Tabels/ReactTable4/OrderStatus.js
@@ -6,46 +6,31 @@ export function OrderStatus({ value }) {
       {(() => {
         if (value === 1) {
           return (
-            <span
-              style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
-              className="p-2 rounded"
-            >
+            <span className="p-2 rounded bg-[#E2FFE377] text-[#00613D]">
               ارسال شده
             </span>
           );
         } else if (value === 2) {
           return (
-            <span
-              style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
-              className="p-2 rounded"
-            >
+            <span className="p-2 rounded bg-[#FFF78733] text-[#ECF150]">
               رسیدگی
             </span>
           );
         } else if (value === 3) {
           return (
-            <span
-              style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
-              className="p-2 rounded"
-            >
+            <span className="p-2 rounded bg-[#FFD8CC33] text-[#611100]">
               لغو شده
             </span>
           );
         } else if (value === 4) {
           return (
-            <span
-              style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
-              className="p-2 rounded"
-            >
+            <span className="p-2 rounded bg-[#E2FFFD33] text-[#00614A]">
               پیگیری
             </span>
           );
         } else {
           return (
-            <span
-              style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
-              className="p-2 rounded"
-            >
+            <span className="p-2 rounded bg-[#DBCCFF33] text-[#440061]">
               خطری
             </span>
           );
diff --git a/src/components/Tabels/ReactTable4/RenderRowSubComponent.js b/src/components/Tabels/ReactTable4/RenderRowSubComponent.js
index ef5a0d5..1384ed7 100644
--- a/src/components/Tabels/ReactTable4/RenderRowSubComponent.js
+++ b/src/components/Tabels/ReactTable4/RenderRowSubComponent.js
@@ -2,258 +2,145 @@ import React from "react";
 
 const RenderRowSubComponent = ({ columns, addTab, row }) => {
   return (
-    <div
-      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 "
-      style={{ backgroundColor: "#FBFCFE" }}
-    >
+    <div className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 bg-[#FBFCFE]">
       {/* right */}
-      <div
-        className="flex flex-row  flex-wrap items-center "
-        style={{ width: "90%" }}
-      >
+      <div className="w-[90%] flex flex-row  flex-wrap items-center ">
         {/* 1 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             نام و نام خانوادگی:
             <span className="mr-1 text-black">{row.name}</span>
           </p>
         </div>
         {/* 2 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             تاریخ سفارش:
             <span className="mr-1 text-black">{row.order_date}</span>
           </p>
         </div>
         {/* 3 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             مبلغ سفارش:
             <span className="mr-1 text-black">{row.order_price}</span>
           </p>
         </div>
         {/* 4 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             شماره سفارش:
             <span className="mr-1 text-black">{row.order_number}</span>
           </p>
         </div>
         {/* 5 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             شغل کاربر:
             <span className="mr-1 text-black">{row.user_job}</span>
           </p>
         </div>
         {/* 6 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            وضعیت سفارش:
-          </p>
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">وضعیت سفارش:</p>
           <span className="mr-1 text-black text-xs">
             {columns[5].Cell({ value: row.order_status })}
           </span>
         </div>
         {/* 7 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            سطح اهمیت:
-          </p>
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">سطح اهمیت:</p>
           <span className="mr-1 text-xs text-black">
             {columns[6].Cell({ value: row.order_level })}
           </span>
         </div>
         {/* 8 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             محل تولد:
             <span className="mr-1 text-black">{row.birth_place}</span>
           </p>
         </div>
         {/* 9 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             تلفن محل کار:
             <span className="mr-1 text-black">{row.office_phone}</span>
           </p>
         </div>
         {/* 10 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             تحصیلات:
             <span className="mr-1 text-black">{row.education}</span>
           </p>
         </div>
         {/* 11 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             تاریخ تولد:
             <span className="mr-1 text-black">{row.birth_day}</span>
           </p>
         </div>
         {/* 12 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             شغل:
             <span className="mr-1 text-black">{row.job}</span>
           </p>
         </div>
         {/* 13 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             دانشگاه:
             <span className="mr-1 text-black">{row.uni}</span>
           </p>
         </div>
         {/* 14 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             رشته تحصیلی:
             <span className="mr-1 text-black">{row.field_study}</span>
           </p>
         </div>
         {/* 15 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             اخلاق:
             <span className="mr-1 text-black">{row.behaviour}</span>
           </p>
         </div>
         {/* 16 */}
         <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
+          <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
+          <p className="text-xs text-blue-400 border-[#65A9FF]">
             نشانی:
             <span className="mr-1 text-black">{row.address}</span>
           </p>
         </div>
       </div>
       {/* left */}
-      <div
-        className="flex flex-col items-end justify-end"
-        style={{ width: "10%" }}
-      >
-        <button
-          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
-          style={{ borderColor: "#D53921", color: "#D53921" }}
-        >
+      <div className="w-[10%] flex flex-col items-end justify-end">
+        <button className="border border-[#D53921] text-[#D53921] rounded w-8/12 text-xs py-2 mb-2 bg-white">
           حذف
         </button>
         <button
-          className="border rounded w-8/12 text-xs py-2 bg-white"
-          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
+          className="border border-[#65A9FF] text-[#65A9FF] rounded w-8/12 text-xs py-2 bg-white"
           onClick={() => {
             console.log(row.name);
             addTab({ name: row.name, id: row.id });
diff --git a/src/components/Tabels/ReactTable4/SelectColumnFilter.js b/src/components/Tabels/ReactTable4/SelectColumnFilter.js
index 0e4fae7..f539a57 100644
--- a/src/components/Tabels/ReactTable4/SelectColumnFilter.js
+++ b/src/components/Tabels/ReactTable4/SelectColumnFilter.js
@@ -14,8 +14,7 @@ export const SelectColumnFilter = ({
 
   return (
     <select
-      className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-      style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      className="text-xs flex bg-[#F9FBFF] border-[#B5D6FF] flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
       name={id}
       id={id}
       value={filterValue}
@@ -23,19 +22,14 @@ export const SelectColumnFilter = ({
         setFilter(e.target.value || undefined);
       }}
     >
-      <option
-        className="text-white"
-        value=""
-        style={{ backgroundColor: "#65A9FF" }}
-      >
+      <option className="text-white bg-[#65A9FF]" value="">
         همه
       </option>
       {options.map((option, i) => (
         <option
           key={i}
           value={option}
-          className="text-right text-white px-2"
-          style={{ backgroundColor: "#65A9FF" }}
+          className="text-right text-white px-2  bg-[#65A9FF]"
         >
           {(() => {
             if (option === 1) {
diff --git a/src/components/Tabels/ReactTable4/SelectColumnFilter2.js b/src/components/Tabels/ReactTable4/SelectColumnFilter2.js
index 36d5c6e..8ad8db2 100644
--- a/src/components/Tabels/ReactTable4/SelectColumnFilter2.js
+++ b/src/components/Tabels/ReactTable4/SelectColumnFilter2.js
@@ -13,8 +13,7 @@ export const SelectColumnFilter2 = ({
 
   return (
     <select
-      className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-      style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      className="text-xs bg-[#F9FBFF] border-[#B5D6FF] flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
       name={id}
       id={id}
       value={filterValue}
@@ -22,19 +21,14 @@ export const SelectColumnFilter2 = ({
         setFilter(e.target.value || undefined);
       }}
     >
-      <option
-        className="text-white"
-        value=""
-        style={{ backgroundColor: "#65A9FF" }}
-      >
+      <option className="text-white bg-[#65A9FF]" value="">
         همه
       </option>
       {options.map((option, i) => (
         <option
           key={i}
           value={option}
-          className="text-right text-white px-2"
-          style={{ backgroundColor: "#65A9FF" }}
+          className="text-right text-white px-2 bg-[#65A9FF]"
         >
           {(() => {
             if (option === 1) {
diff --git a/src/components/Tabels/ReactTable4/SendForm.js b/src/components/Tabels/ReactTable4/SendForm.js
index 5e85902..a75ddbb 100644
--- a/src/components/Tabels/ReactTable4/SendForm.js
+++ b/src/components/Tabels/ReactTable4/SendForm.js
@@ -3,27 +3,15 @@ import React from "react";
 const SendForm = () => {
   return (
     <div className="flex flex-col flex-1 mx-2">
-      <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
-        توضیحات:
-      </span>
+      <span className="text-sm mb-4 text-[#65A9FF]">توضیحات:</span>
       <form className="flex flex-col ">
         <input
           placeholder="موضوع"
-          className="text-xs mb-2 placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-          style={{
-            backgroundColor: "#F8FBFF",
-            borderColor: "#C8DEF9",
-            color: "#00253A",
-          }}
+          className="text-xs border-[#C8DEF9] bg-[#F8FBFF] text-[#00253A] mb-2 placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
         />
         <textarea
           placeholder="متن"
-          className="resize-none w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-          style={{
-            backgroundColor: "#F8FBFF",
-            borderColor: "#C8DEF9",
-            color: "#00253A",
-          }}
+          className="resize-none border-[#C8DEF9] bg-[#F8FBFF] text-[#00253A]  w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
         ></textarea>
       </form>
     </div>
diff --git a/src/components/Tabels/ReactTable4/Settings.js b/src/components/Tabels/ReactTable4/Settings.js
index a8cb526..f6100b3 100644
--- a/src/components/Tabels/ReactTable4/Settings.js
+++ b/src/components/Tabels/ReactTable4/Settings.js
@@ -10,8 +10,7 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
       <div
         onClick={() => setOpenModal(true)}
         data-modal-toggle="large-modal"
-        style={{ backgroundColor: "#F9FBFF" }}
-        className="mr-2 flex flex-col items-center justify-center p-1 rounded"
+        className="mr-2 flex flex-col items-center justify-center p-1 bg-[#F9FBFF] rounded"
       >
         <img
           src="images/ReactTable4settings.svg"
@@ -26,8 +25,7 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
         onClick={() => setOpenModal(false)}
       >
         <div
-          className="absolute bg-white w-6/12 p-4 rounded"
-          style={{ top: "10%" }}
+          className="absolute top-[10%] bg-white w-6/12 p-4 rounded"
           onClick={(e) => e.stopPropagation()}
         >
           <ToggleColumns
diff --git a/src/components/Tabels/ReactTable4/ShowMoreRows.js b/src/components/Tabels/ReactTable4/ShowMoreRows.js
index f871664..a54c507 100644
--- a/src/components/Tabels/ReactTable4/ShowMoreRows.js
+++ b/src/components/Tabels/ReactTable4/ShowMoreRows.js
@@ -3,11 +3,7 @@ import React from "react";
 const ShowMoreRows = ({ pageSize, setPageSize }) => {
   return (
     <select
-      className="text-white text-sm rounded cursor-pointer mr-2"
-      style={{
-        backgroundColor: "#65A9FF",
-        borderColor: "#65A9FF",
-      }}
+      className="text-white text-sm rounded cursor-pointer mr-2 bg-[#65A9FF] bg-[#65A9FF]"
       value={pageSize}
       onChange={(e) => setPageSize(Number(e.target.value))}
     >
@@ -15,11 +11,7 @@ const ShowMoreRows = ({ pageSize, setPageSize }) => {
         <option
           key={pageSize}
           value={pageSize}
-          className=" text-xs"
-          style={{
-            direction: "ltr",
-            textAlign: "right",
-          }}
+          className=" text-xs text-right ltr"
         >
           نمایش {pageSize}
         </option>