update 12 files

master
mahdi 2 years ago
parent dcd94e355c
commit 909efc7154
  1. 30
      src/components/Tabels/ReactTable4/EditRow.js
  2. 3
      src/components/Tabels/ReactTable4/GlobalFilter.js
  3. 29
      src/components/Tabels/ReactTable4/History.js
  4. 4
      src/components/Tabels/ReactTable4/Location.js
  5. 78
      src/components/Tabels/ReactTable4/OrderLevel.js
  6. 25
      src/components/Tabels/ReactTable4/OrderStatus.js
  7. 187
      src/components/Tabels/ReactTable4/RenderRowSubComponent.js
  8. 12
      src/components/Tabels/ReactTable4/SelectColumnFilter.js
  9. 12
      src/components/Tabels/ReactTable4/SelectColumnFilter2.js
  10. 18
      src/components/Tabels/ReactTable4/SendForm.js
  11. 6
      src/components/Tabels/ReactTable4/Settings.js
  12. 12
      src/components/Tabels/ReactTable4/ShowMoreRows.js

@ -6,38 +6,21 @@ import History from "./History";
const EditRow = ({ row, columns }) => { const EditRow = ({ row, columns }) => {
// console.log(columns); // console.log(columns);
return ( return (
<section <section className=" border-r-4 border-blue-600 bg-[#F1F5FE] p-2">
className=" border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#F1F5FE" }}
>
<div className="flex flex-row items-center mr-2 mt-2 mb-4"> <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> </div>
{/* table data */} {/* table data */}
<div className="flex flex-wrap"> <div className="flex flex-wrap">
{/* 1 */} {/* 1 */}
<div className="flex flex-col my-2 mx-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"
style={{ borderColor: "#65A9FF" }}
>
نام و نام خانوادگی: نام و نام خانوادگی:
</p> </p>
<span <span
role="textbox" 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.name} {row.name}
</span> </span>
@ -45,8 +28,7 @@ const EditRow = ({ row, columns }) => {
{/* 2 */} {/* 2 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
<p <p
className="text-xs text-blue-400 mb-2" className="text-xs text-blue-400 mb-2 border-[#65A9FF]"
style={{ borderColor: "#65A9FF" }}
> >
تاریخ سفارش: تاریخ سفارش:
</p> </p>

@ -31,8 +31,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
onFocus={() => setActiveSearchBox(true)} onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)} // onBlur={() => setActiveSearchBox(false)}
type="text" 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`} 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`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/> />
</div> </div>
); );

@ -4,46 +4,29 @@ const History = ({ sentForms }) => {
return ( return (
<div className="flex flex-col relative mx-2"> <div className="flex flex-col relative mx-2">
{/* title */} {/* title */}
<span className="text-sm mb-4" style={{ color: "#65A9FF" }}> <span className="text-sm mb-4 text-[#65A9FF]">توضیحات قبلی:</span>
توضیحات قبلی:
</span>
{/* content */} {/* content */}
<div <div className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll bg-[#F8FBFF] border-[#C8DEF9]">
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
}}
className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll "
>
{/* {sentForms.slice(0, 4).map((sentForm, index) => ( */} {/* {sentForms.slice(0, 4).map((sentForm, index) => ( */}
{sentForms.map((sentForm, index) => ( {sentForms.map((sentForm, index) => (
<div> <div>
{/* content */} {/* content */}
<div className="p-2"> <div className="p-2">
<p className="text-xs" style={{ color: "#00253A" }}> <p className="text-xs text-[#00253A]">{sentForm.title}</p>
{sentForm.title} <p className="text-xs text-left mt-2 text-[#6397B5]">
</p>
<p
className="text-xs text-left mt-2"
style={{ color: "#6397B5" }}
>
<span>تاریخ:</span> <span>تاریخ:</span>
{" "}
{sentForm.date} {sentForm.date}
</p> </p>
</div> </div>
{/* border */} {/* border */}
{Number(index) !== sentForms.length - 1 && ( {Number(index) !== sentForms.length - 1 && (
<div className="border" style={{ borderColor: "#C8DEF9" }}></div> <div className="border border-[#C8DEF9]"></div>
)} )}
</div> </div>
))} ))}
</div> </div>
{/* left border */} {/* left border */}
<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>
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> </div>
); );
}; };

@ -3,9 +3,7 @@ import React from "react";
const Location = () => { const Location = () => {
return ( return (
<div className="mx-2"> <div className="mx-2">
<span className="text-xs mr-2" style={{ color: "#65A9FF" }}> <span className="text-xs mr-2 text-[#65A9FF]">لوکیشن مد نظر:</span>
لوکیشن مد نظر:
</span>
<img <img
className="mt-1 mr-2 border border-blue-300 rounded" className="mt-1 mr-2 border border-blue-300 rounded"
src="images/ReactTable4map.svg" src="images/ReactTable4map.svg"

@ -1,35 +1,45 @@
export function OrderLevel({ value }) { export function OrderLevel({ value }) {
return ( return (
<div className="p-2 rounded-3xl border border-gray-300 w-fit"> <div className="p-2 rounded-3xl border border-gray-300 w-fit">
{(() => { {(() => {
switch(value) { switch (value) {
case 1: case 1:
return <div className="flex flex-row items-center justify-center "> return (
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65FFAD" }}></span> <div className="flex flex-row items-center justify-center ">
<span style={{ color: "#00253A" }} className="">وضعیت عادی</span> <span className="w-2 h-2 rounded-full ml-2 bg-[#65FFAD]"></span>
</div>; <span className="text-[#00253A]">وضعیت عادی</span>
case 2: </div>
return <div className="flex flex-row items-center justify-center "> );
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FF6565" }}></span> case 2:
<span style={{ color: "#00253A" }} className="">اعلان سطح هشدار</span> return (
</div>; <div className="flex flex-row items-center justify-center ">
case 3: <span className="w-2 h-2 rounded-full ml-2 bg-[#FF6565]"></span>
return <div className="flex flex-row items-center justify-center "> <span className="text-[#00253A]">اعلان سطح هشدار</span>
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65DAFF" }}></span> </div>
<span style={{ color: "#00253A" }} className="">بررسی و پیگیری</span> );
</div>; case 3:
case 4: return (
return <div className="flex flex-row items-center justify-center "> <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FFEA65" }}></span> <span className="w-2 h-2 rounded-full ml-2 bg-[#65DAFF]"></span>
<span style={{ color: "#00253A" }} className="">وضعیت بحرانی</span> <span className="text-[#00253A]">بررسی و پیگیری</span>
</div>; </div>
default: );
return <div className="flex flex-row items-center justify-center "> case 4:
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#CCFF65" }}></span> return (
<span style={{ color: "#00253A" }} className="">وضعیت پایدار</span> <div className="flex flex-row items-center justify-center ">
</div>; <span className="w-2 h-2 rounded-full ml-2 bg-[#FFEA65]"></span>
} <span className="text-[#00253A]">وضعیت بحرانی</span>
})()} </div>
</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>
);
}

@ -6,46 +6,31 @@ export function OrderStatus({ value }) {
{(() => { {(() => {
if (value === 1) { if (value === 1) {
return ( return (
<span <span className="p-2 rounded bg-[#E2FFE377] text-[#00613D]">
style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
className="p-2 rounded"
>
ارسال شده ارسال شده
</span> </span>
); );
} else if (value === 2) { } else if (value === 2) {
return ( return (
<span <span className="p-2 rounded bg-[#FFF78733] text-[#ECF150]">
style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
className="p-2 rounded"
>
رسیدگی رسیدگی
</span> </span>
); );
} else if (value === 3) { } else if (value === 3) {
return ( return (
<span <span className="p-2 rounded bg-[#FFD8CC33] text-[#611100]">
style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
className="p-2 rounded"
>
لغو شده لغو شده
</span> </span>
); );
} else if (value === 4) { } else if (value === 4) {
return ( return (
<span <span className="p-2 rounded bg-[#E2FFFD33] text-[#00614A]">
style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
className="p-2 rounded"
>
پیگیری پیگیری
</span> </span>
); );
} else { } else {
return ( return (
<span <span className="p-2 rounded bg-[#DBCCFF33] text-[#440061]">
style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
className="p-2 rounded"
>
خطری خطری
</span> </span>
); );

@ -2,258 +2,145 @@ import React from "react";
const RenderRowSubComponent = ({ columns, addTab, row }) => { const RenderRowSubComponent = ({ columns, addTab, row }) => {
return ( return (
<div <div className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 bg-[#FBFCFE]">
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 "
style={{ backgroundColor: "#FBFCFE" }}
>
{/* right */} {/* right */}
<div <div className="w-[90%] flex flex-row flex-wrap items-center ">
className="flex flex-row flex-wrap items-center "
style={{ width: "90%" }}
>
{/* 1 */} {/* 1 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
نام و نام خانوادگی: نام و نام خانوادگی:
<span className="mr-1 text-black">{row.name}</span> <span className="mr-1 text-black">{row.name}</span>
</p> </p>
</div> </div>
{/* 2 */} {/* 2 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ سفارش: تاریخ سفارش:
<span className="mr-1 text-black">{row.order_date}</span> <span className="mr-1 text-black">{row.order_date}</span>
</p> </p>
</div> </div>
{/* 3 */} {/* 3 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش: مبلغ سفارش:
<span className="mr-1 text-black">{row.order_price}</span> <span className="mr-1 text-black">{row.order_price}</span>
</p> </p>
</div> </div>
{/* 4 */} {/* 4 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش: شماره سفارش:
<span className="mr-1 text-black">{row.order_number}</span> <span className="mr-1 text-black">{row.order_number}</span>
</p> </p>
</div> </div>
{/* 5 */} {/* 5 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر: شغل کاربر:
<span className="mr-1 text-black">{row.user_job}</span> <span className="mr-1 text-black">{row.user_job}</span>
</p> </p>
</div> </div>
{/* 6 */} {/* 6 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">وضعیت سفارش:</p>
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
</p>
<span className="mr-1 text-black text-xs"> <span className="mr-1 text-black text-xs">
{columns[5].Cell({ value: row.order_status })} {columns[5].Cell({ value: row.order_status })}
</span> </span>
</div> </div>
{/* 7 */} {/* 7 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">سطح اهمیت:</p>
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
سطح اهمیت:
</p>
<span className="mr-1 text-xs text-black"> <span className="mr-1 text-xs text-black">
{columns[6].Cell({ value: row.order_level })} {columns[6].Cell({ value: row.order_level })}
</span> </span>
</div> </div>
{/* 8 */} {/* 8 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
محل تولد: محل تولد:
<span className="mr-1 text-black">{row.birth_place}</span> <span className="mr-1 text-black">{row.birth_place}</span>
</p> </p>
</div> </div>
{/* 9 */} {/* 9 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تلفن محل کار: تلفن محل کار:
<span className="mr-1 text-black">{row.office_phone}</span> <span className="mr-1 text-black">{row.office_phone}</span>
</p> </p>
</div> </div>
{/* 10 */} {/* 10 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تحصیلات: تحصیلات:
<span className="mr-1 text-black">{row.education}</span> <span className="mr-1 text-black">{row.education}</span>
</p> </p>
</div> </div>
{/* 11 */} {/* 11 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ تولد: تاریخ تولد:
<span className="mr-1 text-black">{row.birth_day}</span> <span className="mr-1 text-black">{row.birth_day}</span>
</p> </p>
</div> </div>
{/* 12 */} {/* 12 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل: شغل:
<span className="mr-1 text-black">{row.job}</span> <span className="mr-1 text-black">{row.job}</span>
</p> </p>
</div> </div>
{/* 13 */} {/* 13 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
دانشگاه: دانشگاه:
<span className="mr-1 text-black">{row.uni}</span> <span className="mr-1 text-black">{row.uni}</span>
</p> </p>
</div> </div>
{/* 14 */} {/* 14 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
رشته تحصیلی: رشته تحصیلی:
<span className="mr-1 text-black">{row.field_study}</span> <span className="mr-1 text-black">{row.field_study}</span>
</p> </p>
</div> </div>
{/* 15 */} {/* 15 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
اخلاق: اخلاق:
<span className="mr-1 text-black">{row.behaviour}</span> <span className="mr-1 text-black">{row.behaviour}</span>
</p> </p>
</div> </div>
{/* 16 */} {/* 16 */}
<div className="flex flex-row items-center mr-2 my-2"> <div className="flex flex-row items-center mr-2 my-2">
<div <div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
className="w-1 h-4 ml-1 rounded" <p className="text-xs text-blue-400 border-[#65A9FF]">
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
نشانی: نشانی:
<span className="mr-1 text-black">{row.address}</span> <span className="mr-1 text-black">{row.address}</span>
</p> </p>
</div> </div>
</div> </div>
{/* left */} {/* left */}
<div <div className="w-[10%] flex flex-col items-end justify-end">
className="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">
style={{ width: "10%" }}
>
<button
className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
style={{ borderColor: "#D53921", color: "#D53921" }}
>
حذف حذف
</button> </button>
<button <button
className="border rounded w-8/12 text-xs py-2 bg-white" className="border border-[#65A9FF] text-[#65A9FF] rounded w-8/12 text-xs py-2 bg-white"
style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
onClick={() => { onClick={() => {
console.log(row.name); console.log(row.name);
addTab({ name: row.name, id: row.id }); addTab({ name: row.name, id: row.id });

@ -14,8 +14,7 @@ export const SelectColumnFilter = ({
return ( return (
<select <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" 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"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
name={id} name={id}
id={id} id={id}
value={filterValue} value={filterValue}
@ -23,19 +22,14 @@ export const SelectColumnFilter = ({
setFilter(e.target.value || undefined); setFilter(e.target.value || undefined);
}} }}
> >
<option <option className="text-white bg-[#65A9FF]" value="">
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
همه همه
</option> </option>
{options.map((option, i) => ( {options.map((option, i) => (
<option <option
key={i} key={i}
value={option} value={option}
className="text-right text-white px-2" className="text-right text-white px-2 bg-[#65A9FF]"
style={{ backgroundColor: "#65A9FF" }}
> >
{(() => { {(() => {
if (option === 1) { if (option === 1) {

@ -13,8 +13,7 @@ export const SelectColumnFilter2 = ({
return ( return (
<select <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" 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"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
name={id} name={id}
id={id} id={id}
value={filterValue} value={filterValue}
@ -22,19 +21,14 @@ export const SelectColumnFilter2 = ({
setFilter(e.target.value || undefined); setFilter(e.target.value || undefined);
}} }}
> >
<option <option className="text-white bg-[#65A9FF]" value="">
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
همه همه
</option> </option>
{options.map((option, i) => ( {options.map((option, i) => (
<option <option
key={i} key={i}
value={option} value={option}
className="text-right text-white px-2" className="text-right text-white px-2 bg-[#65A9FF]"
style={{ backgroundColor: "#65A9FF" }}
> >
{(() => { {(() => {
if (option === 1) { if (option === 1) {

@ -3,27 +3,15 @@ import React from "react";
const SendForm = () => { const SendForm = () => {
return ( return (
<div className="flex flex-col flex-1 mx-2"> <div className="flex flex-col flex-1 mx-2">
<span className="text-sm mb-4" style={{ color: "#65A9FF" }}> <span className="text-sm mb-4 text-[#65A9FF]">توضیحات:</span>
توضیحات:
</span>
<form className="flex flex-col "> <form className="flex flex-col ">
<input <input
placeholder="موضوع" 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" 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"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
}}
/> />
<textarea <textarea
placeholder="متن" 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" 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"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
}}
></textarea> ></textarea>
</form> </form>
</div> </div>

@ -10,8 +10,7 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
<div <div
onClick={() => setOpenModal(true)} onClick={() => setOpenModal(true)}
data-modal-toggle="large-modal" data-modal-toggle="large-modal"
style={{ backgroundColor: "#F9FBFF" }} className="mr-2 flex flex-col items-center justify-center p-1 bg-[#F9FBFF] rounded"
className="mr-2 flex flex-col items-center justify-center p-1 rounded"
> >
<img <img
src="images/ReactTable4settings.svg" src="images/ReactTable4settings.svg"
@ -26,8 +25,7 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
onClick={() => setOpenModal(false)} onClick={() => setOpenModal(false)}
> >
<div <div
className="absolute bg-white w-6/12 p-4 rounded" className="absolute top-[10%] bg-white w-6/12 p-4 rounded"
style={{ top: "10%" }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<ToggleColumns <ToggleColumns

@ -3,11 +3,7 @@ import React from "react";
const ShowMoreRows = ({ pageSize, setPageSize }) => { const ShowMoreRows = ({ pageSize, setPageSize }) => {
return ( return (
<select <select
className="text-white text-sm rounded cursor-pointer mr-2" className="text-white text-sm rounded cursor-pointer mr-2 bg-[#65A9FF] bg-[#65A9FF]"
style={{
backgroundColor: "#65A9FF",
borderColor: "#65A9FF",
}}
value={pageSize} value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))} onChange={(e) => setPageSize(Number(e.target.value))}
> >
@ -15,11 +11,7 @@ const ShowMoreRows = ({ pageSize, setPageSize }) => {
<option <option
key={pageSize} key={pageSize}
value={pageSize} value={pageSize}
className=" text-xs" className=" text-xs text-right ltr"
style={{
direction: "ltr",
textAlign: "right",
}}
> >
نمایش {pageSize} نمایش {pageSize}
</option> </option>

Loading…
Cancel
Save