update BasicTable.js, EditButtons.js and EditRow.js

src/components/Tabels/ReactTable4/BasicTable.js

@@ -146,14 +146,14 @@ const BasicTable = ({
     <>
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
-        <di className="bg-red-400">
+        <div className="bg-red-400">
           <Tabbar
             tabs={tabs}
             delTab={delTab}
             setActivateTab={setActivateTab}
             activeTab={activeTab}
           />
-        </di>
+        </div>
         {/* <div className="">
           <Tabbar
             tabs={tabs}

src/components/Tabels/ReactTable4/EditButtons.js

@@ -10,8 +10,7 @@ export function EditButtons({ setFiltering, filtering, addTab }) {
     <div className="flex flex-row items-center justify-end">
       {/* add new row */}
       <button
-        className="mx-1  flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
+        className="mx-1  flex flex-row items-center bg-[#65A9FF] p-2 text-xs text-white rounded border-b-2 border-blue-600"
-        style={{ backgroundColor: "#65A9FF" }}
         onClick={() => {
           console.log("new!!!");
           addTab({ id: "new", name: "ردیف جدید" });

src/components/Tabels/ReactTable4/EditRow.js

@@ -27,314 +27,174 @@ const EditRow = ({ row, columns }) => {
         </div>
         {/* 2 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2 border-[#65A9FF]"
-          >
             تاریخ سفارش:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.order_date}
           </span>
         </div>
         {/* 3 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             مبلغ سفارش:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.order_price}
           </span>
         </div>
         {/* 4 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             شماره سفارش:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.order_number}
           </span>
         </div>
         {/* 5 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             شغل کاربر:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.user_job}
           </span>
         </div>
         {/* 6 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             وضعیت سفارش:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.order_status}
           </span>
         </div>
         {/* 7 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             سطح اهمیت:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.order_level}
           </span>
         </div>
         {/* 8 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             محل تولد:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.birth_place}
           </span>
         </div>
         {/* 9 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             تلفن محل کار:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.office_phone}
           </span>
         </div>
         {/* 10 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             تحصیلات:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.education}
           </span>
         </div>
         {/* 11 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             تاریخ تولد:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.birth_day}
           </span>
         </div>
         {/* 12 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">شغل:</p>
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شغل:
-          </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.job}
           </span>
         </div>
         {/* 13 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             دانشگاه:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.uni}
           </span>
         </div>
         {/* 14 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
             رشته تحصیلی:
           </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.field_study}
           </span>
         </div>
         {/* 15 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">اخلاق:</p>
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            اخلاق:
-          </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.behaviour}
           </span>
         </div>
         {/* 16 */}
         <div className="flex flex-col my-2 mx-2">
-          <p
+          <p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">نشانی:</p>
-            className="text-xs text-blue-400 mb-2"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            نشانی:
-          </p>
           <span
             role="textbox"
-            style={{
+            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"
-              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"
           >
             {row.address}
           </span>
@@ -342,13 +202,8 @@ const EditRow = ({ row, columns }) => {
       </div>
       {/* title bottom */}
       <div className="flex flex-row items-center mr-2 mt-2 mb-4">
-        <div
+        <div className="w-1 h-4 ml-1 rounded bg-[#65A9FF]"></div>
-          className="w-1 h-4 ml-1 rounded"
+        <p className="text-sm font-sansbold text-[#00253A]">اطلاعات شخصی</p>
-          style={{ backgroundColor: "#65A9FF" }}
-        ></div>
-        <p className="text-sm font-sansbold" style={{ color: "#00253A" }}>
-          اطلاعات شخصی
-        </p>
       </div>
       {/* bottom */}
       <div className="flex flex-row items-center">
@@ -363,11 +218,8 @@ const EditRow = ({ row, columns }) => {
         </div>
         {/* left */}
         <div className="w-2/12 flex justify-end">
-          <button
+          <button className="border rounded text-sm lg:ml-3 py-2 px-4 text-white bg-[#65A9FF]">
-            className="border rounded text-sm lg:ml-3 py-2 px-4 text-white"
+            ذخیره اطلاعات
-            style={{ backgroundColor: "#65A9FF" }}
-          >
-            ذخیره اطلاعات{" "}
           </button>
         </div>
       </div>