master
mahdi andalib 3 years ago
parent fd4e575552
commit 3a83c2e228
  1. 6
      src/App.js
  2. 351
      src/components/ReactTable5/BasicTable.js
  3. 44
      src/components/ReactTable5/Buttons.js
  4. 35
      src/components/ReactTable5/COLUMNS.js
  5. 21
      src/components/ReactTable5/Checkbox.js
  6. 16
      src/components/ReactTable5/ColumnSearch.js
  7. 51
      src/components/ReactTable5/DropDown.js
  8. 43
      src/components/ReactTable5/EditButtons.js
  9. 398
      src/components/ReactTable5/EditRow.js
  10. 103
      src/components/ReactTable5/GlobalFilter.js
  11. 19
      src/components/ReactTable5/GoToPage.js
  12. 64
      src/components/ReactTable5/History.js
  13. 15
      src/components/ReactTable5/Location.js
  14. 325
      src/components/ReactTable5/MOCK_DATA.json
  15. 56
      src/components/ReactTable5/MOCK_DATA2.json
  16. 24
      src/components/ReactTable5/MultiRangeInput.js
  17. 35
      src/components/ReactTable5/OrderLevel.js
  18. 56
      src/components/ReactTable5/OrderStatus.js
  19. 61
      src/components/ReactTable5/Pagination.js
  20. 269
      src/components/ReactTable5/RenderRowSubComponent.js
  21. 57
      src/components/ReactTable5/SelectColumnFilter.js
  22. 56
      src/components/ReactTable5/SelectColumnFilter2.js
  23. 33
      src/components/ReactTable5/SendForm.js
  24. 39
      src/components/ReactTable5/Settings.js
  25. 31
      src/components/ReactTable5/ShowMoreRows.js
  26. 40
      src/components/ReactTable5/SliderColumnFilter.js
  27. 66
      src/components/ReactTable5/Tabbar.js
  28. 47
      src/components/ReactTable5/ToggleColumns.js
  29. 6
      src/components/ReactTable5/arrow-icon.svg
  30. 4
      src/components/ReactTable5/black-arrow-left.svg
  31. 4
      src/components/ReactTable5/blue-arrow.svg
  32. 12
      src/components/ReactTable5/double-left-arrow.svg
  33. 6
      src/components/ReactTable5/edit.svg
  34. 3
      src/components/ReactTable5/filter.svg
  35. 4
      src/components/ReactTable5/gray-arrow-left.svg
  36. 8
      src/components/ReactTable5/images/ai.svg
  37. 10
      src/components/ReactTable5/images/folder-open.svg
  38. 8
      src/components/ReactTable5/images/image1.svg
  39. 8
      src/components/ReactTable5/images/image2.svg
  40. 8
      src/components/ReactTable5/images/image3.svg
  41. 8
      src/components/ReactTable5/images/image4.svg
  42. 3
      src/components/ReactTable5/images/xls.svg
  43. 97
      src/components/ReactTable5/index.js
  44. 17
      src/components/ReactTable5/index.scss
  45. 8
      src/components/ReactTable5/left-arrow.svg
  46. 8
      src/components/ReactTable5/map.svg
  47. 10
      src/components/ReactTable5/more2.svg
  48. 6
      src/components/ReactTable5/plus.svg
  49. 6
      src/components/ReactTable5/right-arrow.svg
  50. 10
      src/components/ReactTable5/search-normal.svg
  51. 14
      src/components/ReactTable5/settings.svg
  52. 6
      src/components/ReactTable5/zarbedar-icon.svg

@ -44,6 +44,7 @@ import TableDesign1 from "./components/Table/Design1";
import ReactTable2 from "./components/ReactTable2";
import ReactTable3 from "./components/ReactTable3";
import ReactTable4 from "./components/ReactTable4";
import ReactTable5 from "./components/ReactTable5";
import Digikala from "./components/Digikala";
import Switch from "./components/Switch";
import BreadCrumb from "./components/BreadCrumb";
@ -100,7 +101,8 @@ function App() {
{/* <TableDesign1 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
<ReactTable4 />
{/* <ReactTable4 /> */}
<ReactTable5 />
{/* <Digikala /> */}
{/* <HeaderDesign1 />
<div className="flex">
@ -112,7 +114,7 @@ function App() {
</div> */}
{/* <BreadCrumb /> */}
{/* <SearchBox /> */}
<FileManager />
{/* <FileManager /> */}
{/* <Playlist /> */}
{/* <Folderlists /> */}
{/* <Blogs /> */}

@ -0,0 +1,351 @@
import React, { useMemo, useState } from "react";
import "./index.scss";
import Tabbar from "./Tabbar";
import MOCK_DATA2 from "./MOCK_DATA2.json";
import { ColumnSearch } from "./ColumnSearch";
import { GlobalFilter } from "./GlobalFilter";
import { COLUMNS } from "./COLUMNS";
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
import ShowMoreRows from "./ShowMoreRows";
import { Settings } from "./Settings";
import { Checkbox } from "./Checkbox";
import RenderRowSubComponent from "./RenderRowSubComponent";
import EditRow from "./EditRow";
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
useExpanded,
} from "react-table";
const BasicTable = ({
settingsIcon,
thead,
addTab,
tabs,
delTab,
setActivateTab,
activeTab,
}) => {
const data = useMemo(() => MOCK_DATA2, []);
// console.log(data);
// console.log(MOCK_DATA2);
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
updateMyData, // This is a custom function that we supplied to our table instance
}) => {
// We need to keep and update the state of the cell normally
const [value, setValue] = React.useState(initialValue);
const onChange = (e) => {
setValue(e.target.value);
};
// We'll only update the external data when the input is blurred
const onBlur = () => {
updateMyData(index, id, value);
};
// If the initialValue is changed external, sync it up with our state
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return <input value={value} onChange={onChange} onBlur={onBlur} />;
};
const [filtering, setFiltering] = useState(false);
const columns = React.useMemo(
() => COLUMNS({ filtering, setFiltering, addTab }),
[]
);
// const defaultColumn = {
// Cell: EditableCell,
// };
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
const defaultColumn = useMemo(() => {
return {
Filter: ColumnSearch,
};
}, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
const isEven = (idx) => idx % 2 === 0;
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows,
state,
setGlobalFilter,
resetResizing,
} = useTable(
{
columns,
data,
defaultColumn,
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
useExpanded,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
{
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
<Checkbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => (
<Checkbox {...row.getToggleRowSelectedProps()} />
),
},
...columns,
];
});
}
);
const { globalFilter, pageIndex, pageSize } = state;
return (
<>
<div className="flex flex-row items-center justify-between">
{/* right box */}
<di className="bg-red-400">
<Tabbar
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</di>
{/* <div className="">
<Tabbar
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</div> */}
{/* left box */}
{activeTab == 0 ? (
<div
className="flex flex-row items-center p-2 rounded-tl rounded-tr"
style={{ backgroundColor: "#F1F6FF" }}
>
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
<div
className="flex flex-row items-center p-1 rounded"
style={{ backgroundColor: "#F9FBFF" }}
>
{/* go to page */}
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
{/* vertical line */}
<div
className={`w-0.5 h-4 mr-2`}
style={{ backgroundColor: "#65A9FF" }}
></div>
{/* arrows */}
<Pagination
gotoPage={gotoPage}
canPreviousPage={canPreviousPage}
previousPage={previousPage}
canNextPage={canNextPage}
pageCount={pageCount}
nextPage={nextPage}
/>
</div>
{/* settings icon */}
{settingsIcon && (
<Settings
allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/>
)}
</div>
) : null}
</div>
{/* table */}
{activeTab == 0 ? (
<>
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200 mb-5"
>
{thead && (
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(
column.getSortByToggleProps()
)}
scope="col"
className="cursor-pointer py-2 px-4 text-right text-xs font-medium"
style={{ color: "#3287B9" }}
>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))}
</tr>
))}
</thead>
)}
{/* filter row */}
{filtering && (
<thead style={{ backgroundColor: "#F1F5FE" }}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps()}
className="py-2 px-4 text-sm"
>
{column.canFilter ? column.render("Filter") : null}
</th>
))}
</tr>
))}
</thead>
)}
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200"
>
{page.map((row, idx) => {
prepareRow(row);
return (
<React.Fragment key={idx}>
<tr
{...row.getRowProps()}
style={{
backgroundColor: isEven(idx) ? "#F9F9F9" : "fff",
}}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
//
>
{row.cells.map((cell, index) => {
return (
<td
{...cell.getCellProps({
className: cell.column.className,
})}
// className="p-4 whitespace-nowrap text-xs text-right"
style={{
padding: "12px",
fontSize: "13px",
textAlign: "right",
whiteSpace: "nowrap",
}}
key={index}
{...cell.getCellProps()}
// className="p-4 whitespace-nowrap text-xs text-right "
role="cell"
>
{cell.render("Cell")}
</td>
);
})}
</tr>
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{/* {RenderRowSubComponent({
row: row.original,
columns,
addTab,
})} */}
{/* {RenderRowSubComponent({ row: row.values })} */}
<RenderRowSubComponent
columns={columns}
addTab={addTab}
row={row.original}
/>
{console.log(row.original)}
</td>
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
</table>
{/* bottom table */}
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
<ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} />
</>
) : (
<EditRow
row={
rows.find((e) => e.original && +e.original.id === activeTab)
?.original || {}
}
columns={defaultColumn}
/>
)}
</>
);
};
export default BasicTable;
BasicTable.defaultProps = {
settingsIcon: true,
thead: false,
};

@ -0,0 +1,44 @@
import { useState } from "react";
import arrowIcon from "./arrow-icon.svg";
import more from "./more2.svg";
import edit from "./edit.svg";
import DropDown from "./DropDown";
export const Buttons = ({ row, addTab }) => {
const [activeDetails, setActiveDetails] = useState(null);
return (
<div className="flex flex-row items-center justify-end ">
<div
className=""
onClick={() => {
setActiveDetails(!activeDetails);
}}
>
<button
className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300"
{...row.getToggleRowExpandedProps()}
>
جزئیات
<img
src={arrowIcon}
alt=""
className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${
activeDetails ? "rotate-60" : "rotate-90"
}`}
/>
</button>
</div>
<div
className="mx-1 p-2 rounded border border-gray-300 cursor-pointer"
onClick={() => {
addTab({ name: row.original.name, id: row.original.id });
}}
>
<img src={edit} alt="" className="w-4" />
</div>
{/* <img src={more} alt="" className="w-5 cursor-pointer" /> */}
<DropDown />
</div>
);
};

@ -0,0 +1,35 @@
import { format } from "date-fns";
import { OrderStatus } from "./OrderStatus";
import { OrderLevel } from "./OrderLevel";
import { Buttons } from "./Buttons";
import { EditButtons } from "./EditButtons";
import { SelectColumnFilter } from "./SelectColumnFilter.js";
import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
import { SliderColumnFilter } from "./SliderColumnFilter.js";
export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{
Header: "ایکن فایل",
accessor: "filePic",
disableSortBy: true,
className: "bg-red-500 w-7",
},
{
Header: "نام فایل",
accessor: "fileName",
className: "bg-blue-500 w-10",
},
{
Header: "نوع فایل",
accessor: "fileType",
},
{
Header: "سایز فایل",
accessor: "fileSize",
},
{
Header: "تاریخ فایل",
accessor: "fileDate",
},
];

@ -0,0 +1,21 @@
import React from "react";
export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<input
type="checkbox"
className="rounded-sm accent-pink-500"
ref={resolvedRef}
{...rest}
/>
</>
);
});

@ -0,0 +1,16 @@
import React, { useState } from "react";
export const ColumnSearch = ({ column }) => {
const { filterValue, setFilter } = column;
return (
<div className="flex flex-row items-center ">
<input
value={filterValue || ""}
onChange={(e) => setFilter(e.target.value)}
className={`w-8/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/>
</div>
);
};

@ -0,0 +1,51 @@
import React from "react";
import more from "./more2.svg";
export const DropDown = ({}) => {
return (
<div>
<button
className=""
id="dropdownButton"
data-dropdown-toggle="dropdown"
type="button"
>
<img src={more} alt="" className={`cursor-pointer w-5`} />
</button>
<div
style={{ backgroundColor: "#65A9FF" }}
id="dropdown"
className="hidden z-10 text-xs list-none rounded divide-y divide-gray-100 shadow"
>
<ul className="" aria-labelledby="dropdownButton">
<li>
<a
href="#"
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
>
ایتم شماره1
</a>
</li>
<li>
<a
href="#"
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
>
ایتم شماره1
</a>
</li>
<li>
<a
href="#"
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
>
ایتم شماره1
</a>
</li>
</ul>
</div>
</div>
);
};
export default DropDown;

@ -0,0 +1,43 @@
import React, { useState } from "react";
import Table from "./BasicTable";
import DropDown from "./DropDown";
import filter from "./filter.svg";
import plus from "./plus.svg";
export function EditButtons({ setFiltering, filtering, addTab }) {
const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
return (
<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"
style={{ backgroundColor: "#65A9FF" }}
onClick={() => {
console.log("new!!!");
addTab({ id: "new", name: "ردیف جدید" });
}}
>
ثبت جدید
<img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
</button>
{/* filter */}
<img
src={filter}
alt=""
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
${selectedFilterRow ? "border" : "border-0"}`}
onClick={() => {
setFiltering(!selectedFilterRow);
setSelectedFilterRow(!selectedFilterRow);
}}
/>
{/* dropDown */}
<DropDown />
</div>
);
}
EditButtons.defaultProps = {};

@ -0,0 +1,398 @@
import React from "react";
import SendForm from "./SendForm";
import Location from "./Location";
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" }}
>
<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-bold" style={{ color: "#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>
<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"
>
{row.name}
</span>
</div>
{/* 2 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.order_date}
</span>
</div>
{/* 3 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.order_price}
</span>
</div>
{/* 4 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.order_number}
</span>
</div>
{/* 5 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.user_job}
</span>
</div>
{/* 6 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.order_status}
</span>
</div>
{/* 7 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.order_level}
</span>
</div>
{/* 8 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.birth_place}
</span>
</div>
{/* 9 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.office_phone}
</span>
</div>
{/* 10 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.education}
</span>
</div>
{/* 11 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.birth_day}
</span>
</div>
{/* 12 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.job}
</span>
</div>
{/* 13 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.uni}
</span>
</div>
{/* 14 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.field_study}
</span>
</div>
{/* 15 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.behaviour}
</span>
</div>
{/* 16 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#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"
>
{row.address}
</span>
</div>
</div>
{/* title bottom */}
<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-bold" style={{ color: "#00253A" }}>
اطلاعات شخصی
</p>
</div>
{/* bottom */}
<div className="flex flex-row items-center">
{/* right */}
<div className="flex items-center w-10/12">
{/* map */}
<Location />
{/* formInput */}
<SendForm />
{/* previous */}
<History />
</div>
{/* left */}
<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>
);
};
export default EditRow;
EditRow.defaultProps = {};

@ -0,0 +1,103 @@
import React, { useState } from "react";
import { useAsyncDebounce } from "react-table";
import search from "./search-normal.svg";
import cancleIcon from "./zarbedar-icon.svg";
export const GlobalFilter = ({ filter, setFilter }) => {
const [activeSearchBox, setActiveSearchBox] = useState(false);
const [value, setValue] = useState(filter);
const onChange = useAsyncDebounce((value) => {
setFilter(value || undefined);
}, 400);
return (
<div className="flex flex-row-reverse items-center relative ml-2 ">
{activeSearchBox && (
<img
src={cancleIcon}
alt=""
className="w-3 h-3 absolute left-7 cursor-pointer"
onClick={() => setActiveSearchBox(false)}
/>
)}
<img
src={search}
alt=""
className="w-4 h-4 absolute left-2 cursor-pointer"
/>
<input
value={filter || ""}
onChange={(e) => setFilter(e.target.value)}
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" }}
/>
</div>
);
};
{
/* <input
value={value || ""}
onChange={(e) => {
setValue(e.target.value);
onChange(e.target.value);
}}
onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)}
type="text"
className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/> */
}
// ? اگر میخواستم کاری کنم که وقتی رویه سرچ باکس میزدم ایکن ضربدر هاید میشد و ایکن کنسل میومد باید از این کد استفاده میکردم
// import React, { useState } from "react";
// import { useAsyncDebounce } from "react-table";
// import search from "./search-normal.svg";
// import cancleIcon from "./zarbedar-icon.svg";
// export const GlobalFilter = ({ filter, setFilter }) => {
// const [activeSearchBox, setActiveSearchBox] = useState(false);
// const [value, setValue] = useState(filter);
// const onChange = useAsyncDebounce((value) => {
// setFilter(value || undefined);
// }, 400);
// return (
// <div className="flex flex-row-reverse items-center relative ml-2 ">
// {activeSearchBox === true ? (
// <img
// src={cancleIcon}
// alt=""
// className="w-3 h-3 absolute left-2 cursor-pointer"
// />
// ) : (
// <img
// src={search}
// alt=""
// className="w-4 h-4 absolute left-2 cursor-pointer"
// />
// )}
// <input
// value={filter || ""}
// onChange={(e) => setFilter(e.target.value)}
// 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" }}
// />
// {console.log(activeSearchBox)}{" "}
// </div>
// );
// };

@ -0,0 +1,19 @@
import React from "react";
export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => {
return (
<span className="text-xs text-blue-400 mr-1">
صفحه{" "}
<input
className="ml-1 text-xs p-1 rounded border-blue-400 w-9"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
gotoPage(pageNumber);
}}
/>
از {pageOptions.length}
</span>
);
};

@ -0,0 +1,64 @@
import React from "react";
const History = ({ sentForms }) => {
return (
<div className="flex flex-col relative mx-2">
{/* title */}
<span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
توضیحات قبلی:
</span>
{/* content */}
<div
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.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" }}
>
<span>تاریخ:</span>
{" "}
{sentForm.date}
</p>
</div>
{/* border */}
{Number(index) !== sentForms.length - 1 && (
<div className="border" style={{ borderColor: "#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>
);
};
export default History;
History.defaultProps = {
sentForms: [
{ title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
{ title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
{ title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
{ title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
{ title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
{ title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
{ title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
{ title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
],
};

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

@ -0,0 +1,325 @@
[
{
"id": 1,
"name": "خسرو سهرابی",
"order_date": "1400/11/09",
"order_price": 1,
"order_number": "09120023100",
"user_job": "مهندس ساختمان",
"order_status": 1,
"order_level": 1,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 2,
"name": "خسرو شکیبایی",
"order_date": "1340/04/13",
"order_price": 2,
"order_number": "09390646589",
"user_job": "بازیگر",
"order_status": 2,
"order_level": 2,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 3,
"name": "علی علوی",
"order_date": "1330/12/05",
"order_price": 3,
"order_number": "09120403285",
"user_job": "تاجر",
"order_status": 3,
"order_level": 3,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 4,
"name": "پارسا ایرانی",
"order_date": "1372/01/08",
"order_price": 4,
"order_number": "09120336508",
"user_job": "حسابدار",
"order_status": 4,
"order_level": 4,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 5,
"name": "محمد محمدی",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 6,
"name": "خسرو سهرابی",
"order_date": "1400/11/09",
"order_price": 1,
"order_number": "09120023100",
"user_job": "مهندس ساختمان",
"order_status": 1,
"order_level": 1,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 7,
"name": "خسرو شکیبایی",
"order_date": "1340/04/13",
"order_price": 2,
"order_number": "09390646589",
"user_job": "بازیگر",
"order_status": 2,
"order_level": 2,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 8,
"name": "علی علوی",
"order_date": "1330/12/05",
"order_price": 3,
"order_number": "09120403285",
"user_job": "تاجر",
"order_status": 3,
"order_level": 3,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 9,
"name": "پارسا ایرانی",
"order_date": "1372/01/08",
"order_price": 4,
"order_number": "09120336508",
"user_job": "حسابدار",
"order_status": 4,
"order_level": 4,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 10,
"name": "محمد محمدی",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 11,
"name": "محمد fds",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 12,
"name": "fffff fds",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 13,
"name": "fffff fds",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 14,
"name": "jjkjhg",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 15,
"name": "fffff jghjhg",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 16,
"name": "fffff jghjhg",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 17,
"name": "fffff jghjhg",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
}
]

@ -0,0 +1,56 @@
[
{
"id": 1,
"filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "تهران شهری برای آیندگان",
"fileType": "JPG",
"fileSize": "23.5KB",
"fileDate": "1400/02/12"
},
{
"id": 2,
"filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "عکس سال 99 نوروز",
"fileType": "JPG",
"fileSize": "69.5KB",
"fileDate": "1400/02/10"
},
{
"id": 3,
"filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "دری به سوی بی نهایت",
"fileType": "JPG",
"fileSize": "1.5MB",
"fileDate": "1400/04/24"
},
{
"id": 4,
"filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "فایل اکسل دانش آموزان",
"fileType": "JPG",
"fileSize": "20MB",
"fileDate": "1397/04/20"
},
{
"id": 5,
"filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "صحرای بدون شن",
"fileType": "JPG",
"fileSize": "150MB",
"fileDate": "1399/04/20"
},
{
"id": 6,
"filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "فایل ایلاستریتور موارد اصلاحی طرح",
"fileType": "JPG",
"fileSize": "150MB",
"fileDate": "1393/10/20"
}
]

@ -0,0 +1,24 @@
import React, { Component } from "react";
import InputRange from "react-input-range";
export default class MultiRangeInput extends Component {
constructor(props) {
super(props);
this.state = {
value: { min: 2, max: 10 },
};
}
render() {
return (
<div className="bg-red-400">
<InputRange
maxValue={20}
minValue={0}
value={this.state.value}
onChange={(value) => this.setState({ value })}
/>
</div>
);
}
}

@ -0,0 +1,35 @@
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>
);
}

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

@ -0,0 +1,61 @@
import React from "react";
import dobleLeftArrow from "./double-left-arrow.svg";
import leftArrow from "./left-arrow.svg";
import rightArrow from "./right-arrow.svg";
export const Pagination = ({
gotoPage,
canPreviousPage,
previousPage,
canNextPage,
pageCount,
nextPage,
}) => {
return (
<div className="flex flex-row items-center space-x-1">
<button
className="rounded py-1 px-2 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
<img src={dobleLeftArrow} className="rotate-180 w-4 h-4" />
</button>
<button
className="rounded py-1 px-2 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
<img src={rightArrow} className="w-3 h-3" />
</button>
<button
className="rounded py-1 px-2 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
<img src={leftArrow} className="w-3 h-3" />
</button>
<button
className="rounded py-1 px-2 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
<img src={dobleLeftArrow} className="w-4 h-4" />
</button>
</div>
);
};
export default Pagination;
// Pagination.defaultProps = {
// pagintaionButtons: [
// {
// image: { dobleLeftArrow },
// click: gotoPage(0),
// },
// ],
// };

@ -0,0 +1,269 @@
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" }}
>
{/* right */}
<div
className="flex flex-row flex-wrap items-center "
style={{ width: "90%" }}
>
{/* 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" }}
>
نام و نام خانوادگی:
<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" }}
>
تاریخ سفارش:
<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" }}
>
مبلغ سفارش:
<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" }}
>
شماره سفارش:
<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" }}
>
شغل کاربر:
<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>
<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>
<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" }}
>
محل تولد:
<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" }}
>
تلفن محل کار:
<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" }}
>
تحصیلات:
<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" }}
>
تاریخ تولد:
<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" }}
>
شغل:
<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" }}
>
دانشگاه:
<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" }}
>
رشته تحصیلی:
<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" }}
>
اخلاق:
<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" }}
>
نشانی:
<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" }}
>
حذف
</button>
<button
className="border rounded w-8/12 text-xs py-2 bg-white"
style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
onClick={() => {
console.log(row.name);
addTab({ name: row.name, id: row.id });
}}
>
جزئیات بیشتر
</button>
</div>
</div>
);
};
export default RenderRowSubComponent;

@ -0,0 +1,57 @@
import React from "react";
// {columns[5].Cell({ value: row.order_status })}
export const SelectColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id, render, columns },
}) => {
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
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" }}
name={id}
id={id}
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
همه
</option>
{options.map((option, i) => (
<option
key={i}
value={option}
className="text-right text-white px-2"
style={{ backgroundColor: "#65A9FF" }}
>
{(() => {
if (option === 1) {
return "وضعیت عادی";
} else if (option === 2) {
return "اعلان سطح هشدار";
} else if (option === 3) {
return "بررسی و پیگیری";
} else if (option === 4) {
return "وضعیت بحرانی";
} else {
return " وضعیت پایدار";
}
})()}{" "}
</option>
))}
</select>
);
};

@ -0,0 +1,56 @@
import React from "react";
export const SelectColumnFilter2 = ({
column: { filterValue, setFilter, preFilteredRows, id, render },
}) => {
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
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" }}
name={id}
id={id}
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
همه
</option>
{options.map((option, i) => (
<option
key={i}
value={option}
className="text-right text-white px-2"
style={{ backgroundColor: "#65A9FF" }}
>
{(() => {
if (option === 1) {
return "ارسال شده";
} else if (option === 2) {
return "رسیدگی";
} else if (option === 3) {
return "لغو شده";
} else if (option === 4) {
return "پیگیری";
} else {
return "خطری";
}
})()}{" "}
</option>
))}
</select>
);
};

@ -0,0 +1,33 @@
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>
<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",
}}
/>
<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",
}}
></textarea>
</form>
</div>
);
};
export default SendForm;

@ -0,0 +1,39 @@
import React, { useState } from "react";
import { ToggleColumns } from "./ToggleColumns";
import settings from "./settings.svg";
export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
const [openModal, setOpenModal] = useState(false);
console.log(openModal);
return (
<section>
<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"
>
<img src={settings} className="w-6 h-6 cursor-pointer" />
</div>
{/* modal */}
<div
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg bg-opacity-90 bg-gray-600 flex items-center justify-center fixed left-0 top-0
${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
onClick={() => setOpenModal(false)}
>
<div
className="absolute bg-white w-6/12 p-4 rounded"
style={{ top: "10%" }}
onClick={(e) => e.stopPropagation()}
>
<ToggleColumns
allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/>
</div>
</div>
</section>
);
};

@ -0,0 +1,31 @@
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",
}}
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[7, 10, 25, 50].map((pageSize) => (
<option
key={pageSize}
value={pageSize}
className=" text-xs"
style={{
direction: "ltr",
textAlign: "right",
}}
>
نمایش {pageSize}
</option>
))}
</select>
);
};
export default ShowMoreRows;

@ -0,0 +1,40 @@
import React from "react";
import cancleIcon from "./zarbedar-icon.svg";
export const SliderColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id },
}) => {
const [min, max] = React.useMemo(() => {
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
preFilteredRows.forEach((row) => {
min = Math.min(row.values[id], min);
max = Math.max(row.values[id], max);
});
return [min, max];
}, [id, preFilteredRows]);
return (
<div className="flex flex-row items-center justify-between w-10/12">
<input
className=" w-10/12"
type="range"
min={min}
max={max}
value={filterValue || min}
onChange={(e) => {
setFilter(parseInt(e.target.value, 10));
}}
/>
<div className="p-1 rounded bg-blue-300 bg-opacity-20">
<img
src={cancleIcon}
onClick={() => setFilter(undefined)}
className="cursor-pointer w-2 h-2"
/>
</div>
{/* <button onClick={() => setFilter(undefined)}>ریست</button> */}
</div>
);
};

@ -0,0 +1,66 @@
import React from "react";
import "./index.scss";
import cancleIcon from "./zarbedar-icon.svg";
const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
return (
<ul
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
onMouseDown={(e) => {
const slider = window.document.querySelector(".tabbar");
window.isDown = true;
window.startX = e.pageX - slider.offsetLeft;
window.scrollLeft = slider.scrollLeft;
}}
onMouseLeave={(e) => {
window.isDown = false;
}}
onMouseUp={(e) => {
window.isDown = false;
}}
onMouseMove={(e) => {
const slider = window.document.querySelector(".tabbar");
if (!window.isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - window.startX) * 1;
slider.scrollLeft = window.scrollLeft - walk;
}}
>
{tabs.map((el, index) => (
<li
key={index}
onClick={(e) => {
if (window.isDown) return e.preventDefault();
}}
aria-current="page"
className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
style={{
backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
color: activeTab === el.id ? "#fff" : "#000",
}}
>
<div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
{el.name}
</div>
{el.id ? (
<img
src={cancleIcon}
className="w-2 mr-3"
alt=""
onClick={(e) => {
e.preventDefault();
delTab(el.id);
}}
/>
) : null}
</li>
))}
</ul>
);
};
window.isDown = false;
export default Tabbar;

@ -0,0 +1,47 @@
import React from "react";
export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
// console.log(allColumns);
return (
<div>
<h2 className="text-base">
با زدن بر روی هر یک از چک باکس ها میتوانید نمایش ستون هارو خاموش روشن
کنید{" "}
</h2>
<div className="text-sm mt-5">
<input
className="ml-2"
type="checkbox"
{...getToggleHideAllColumnsProps()}
/>{" "}
تاگل کردن همه
</div>
{allColumns.map((column, index) => (
<div key={index}>
<label className="text-sm">
<input
type="checkbox"
className="ml-2 "
{...column.getToggleHiddenProps()}
/>
{column.Footer}
</label>
</div>
))}
{/* اگر میخواستیم فیلتر بزاریم */}
{/* {allColumns
.filter((column) => column.Header === "string")
.map((column, index) => (
<div key={index}>
<label>
<input type="checkbox" {...column.getToggleHiddenProps()} />
{column.Header}
</label>
</div>
))} */}
</div>
);
};
export default ToggleColumns;

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<g id="arrow-down" transform="translate(0)">
<path id="Vector" d="M9.9,0,5.825,4.075a1.241,1.241,0,0,1-1.75,0L0,0" transform="translate(2.55 5.594)" fill="none" stroke="rgba(0,37,58,0.32)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H15V15H0Z" transform="translate(15 15) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 489 B

@ -0,0 +1,4 @@
<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="10.112" height="10.112" viewBox="0 0 10.112 10.112">
<path id="Vector" d="M2.99,6.674.243,3.927a.837.837,0,0,1,0-1.18L2.99,0" transform="translate(3.329 1.719)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,0H10.112V10.112H0Z" transform="translate(10.112 10.112) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 470 B

@ -0,0 +1,4 @@
<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16.237" height="16.237" viewBox="0 0 16.237 16.237">
<path id="Vector" d="M10.716,0,6.305,4.411a1.343,1.343,0,0,1-1.894,0L0,0" transform="translate(2.76 6.055)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H16.237V16.237H0Z" transform="translate(16.237 16.237) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 472 B

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.988" height="11.988" viewBox="0 0 15.988 11.988">
<g id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" transform="translate(15.988 11.988) rotate(180)">
<g id="arrow-right" transform="translate(4)">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
<g id="arrow-right-2" data-name="arrow-right">
<path id="Vector-3" data-name="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.715" height="16.703" viewBox="0 0 16.715 16.703">
<g id="edit" transform="translate(-626.295 -252.999)">
<path id="Vector" d="M8.991,1.271l-7.88,7.88a2.712,2.712,0,0,0-.66,1.32l-.43,3.01a1.424,1.424,0,0,0,1.7,1.7l3.01-.43a2.8,2.8,0,0,0,1.32-.66l7.88-7.88c1.36-1.36,2-2.94,0-4.94S10.351-.089,8.991,1.271Z" transform="translate(627.049 253.749)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0A7.144,7.144,0,0,0,4.94,4.94" transform="translate(634.91 256.15)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 725 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.631" height="22.407" viewBox="0 0 19.631 22.407">
<path id="Vector" d="M2.105,0h13.92a2.107,2.107,0,0,1,2.105,2.105V4.428A3.933,3.933,0,0,1,17.078,6.86L13.613,9.924l-1.072.947A3.417,3.417,0,0,0,11.488,13.3v4.537a2.367,2.367,0,0,1-.944,1.8l-1.47.926a2.145,2.145,0,0,1-3.267-1.8v-5.59a3.962,3.962,0,0,0-.853-2.214L.944,6.733A3.43,3.43,0,0,1,0,4.628V2.214A2.133,2.133,0,0,1,2.105,0Z" transform="translate(0.75 0.75)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 570 B

@ -0,0 +1,4 @@
<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="10.112" height="10.112" viewBox="0 0 10.112 10.112">
<path id="Vector" d="M2.99,6.674.243,3.927a.837.837,0,0,1,0-1.18L2.99,0" transform="translate(3.329 1.719)" fill="none" stroke="#cbcbcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,0H10.112V10.112H0Z" transform="translate(10.112 10.112) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 470 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 9.4 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25.509" height="25.509" viewBox="0 0 25.509 25.509">
<g id="vuesax_linear_folder-open" data-name="vuesax/linear/folder-open" transform="translate(0 0)">
<g id="folder-open" transform="translate(0 0)">
<path id="Vector" d="M18.058,10.109V4.4c0-3.522-.9-4.4-4.517-4.4h-1.35a2.158,2.158,0,0,0-2.168,1.057L8.673,2.818a1.446,1.446,0,0,1-1.446.7H4.517C.9,3.522,0,4.4,0,7.925v2.184" transform="translate(3.731 2.801)" fill="#ffd358" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,25.509H25.509V0H0Z" fill="none" opacity="0"/>
<path id="Vector-3" data-name="Vector" d="M.018,3.507.443,8.822c.159,1.626.287,2.87,3.167,2.87H16.982c2.88,0,3.008-1.244,3.167-2.87l.425-5.314a3.222,3.222,0,0,0-.691-2.328l-.021-.021A3.162,3.162,0,0,0,17.407,0H3.186A3.151,3.151,0,0,0,.752,1.137c-.011.011-.021.021-.021.032A3.109,3.109,0,0,0,.018,3.507Z" transform="translate(2.458 11.692)" fill="#fcefcb" stroke="#fff" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M5.463,0H0" transform="translate(10.023 18.069)" fill="none" stroke="#ffd358" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 66 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 180 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 162 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 179 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 13 KiB

@ -0,0 +1,97 @@
import React, { useRef, useState } from "react";
import BasicTable from "./BasicTable";
import TitleSubtitle from "../TitleSubtitle";
import MultiRangeInput from "./MultiRangeInput";
import grayLeftArrow from "./gray-arrow-left.svg";
import { BreadCrumb } from "../BreadCrumb";
const ReactTable5 = ({ breadCrumbs, subTitle, title }) => {
const [tabs, setTabs] = useState([
{ name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
]);
let [activeTab, setActivateTab] = useState(0);
const stateRef = useRef();
const stateActiveRef = useRef();
stateRef.current = tabs;
stateActiveRef.current = activeTab;
const addTab = (newTab) => {
setActivateTab(newTab.id);
if (stateRef.current.find((e) => e.id === newTab.id)) return;
setTabs([...stateRef.current, newTab]);
};
const delTab = (id) => {
setTabs(stateRef.current.filter((e) => e.id != id));
if (stateActiveRef.current == id) setActivateTab(0);
};
return (
<div className="my-10 w-11/12 mx-auto">
{/* breadCrumb */}
<div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => (
<div className="flex flex-row items-center" key={index}>
<span
className={`cursor-pointer text-xs hover:text-blue-900 ${
breadCrumb.active ? "text-blue-900" : "text-blue-400"
}`}
>
{breadCrumb.name}
</span>
{Number(index) !== breadCrumbs.length - 1 && (
<div
className={`mx-2 ${
breadCrumb.active ? "text-blue-900" : "text-blue-400"
}`}
>
<img src={grayLeftArrow} />
</div>
)}
</div>
))}
</div>
<div className="my-7">
<TitleSubtitle />
</div>
<BasicTable
addTab={addTab}
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</div>
);
};
export default ReactTable5;
ReactTable5.defaultProps = {
breadCrumbs: [
{
name: "صفحه اصلی",
active: false,
},
{
name: "آمار و گزارشات",
active: false,
},
{
name: "فروش محصولات",
active: false,
},
{
name: "سال 1400",
active: true,
},
],
title: "میزان فروش محصولات",
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
};

@ -0,0 +1,17 @@
.customeClass1 .customeClass2 input {
display: none !important;
}
.customeClass1 .customeClass2 span {
display: none !important;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.tabbar {
cursor: pointer;
}
.active2,
.active2 li a {
cursor: move !important;
}

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.988" height="11.988" viewBox="0 0 11.988 11.988">
<g id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" transform="translate(11.988 11.988) rotate(180)">
<g id="arrow-right">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 622 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 378 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_more" data-name="vuesax/linear/more" transform="translate(-188 580) rotate(-90)">
<g id="more">
<path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
<path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
<path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 749 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.72" height="11.72" viewBox="0 0 11.72 11.72">
<g id="Group_1916" data-name="Group 1916" transform="translate(-34.5 -316.547)">
<path id="Vector" d="M0,0H9.72" transform="translate(35.5 322.407)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,9.72V0" transform="translate(40.36 317.547)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 543 B

@ -0,0 +1,6 @@
<svg id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" xmlns="http://www.w3.org/2000/svg" width="11.988" height="11.988" viewBox="0 0 11.988 11.988">
<g id="arrow-right">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 552 B

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="search-normal" transform="translate(-428 -188)">
<g id="Vector" transform="translate(430 190)" fill="none">
<path d="M19,9.5A9.5,9.5,0,1,1,9.5,0,9.5,9.5,0,0,1,19,9.5Z" stroke="none"/>
<path d="M 9.5 1.5 C 5.088789939880371 1.5 1.5 5.088789939880371 1.5 9.5 C 1.5 13.91121006011963 5.088789939880371 17.5 9.5 17.5 C 13.91121006011963 17.5 17.5 13.91121006011963 17.5 9.5 C 17.5 5.088789939880371 13.91121006011963 1.5 9.5 1.5 M 9.5 0 C 14.74670028686523 0 19 4.253290176391602 19 9.5 C 19 14.74670028686523 14.74670028686523 19 9.5 19 C 4.253290176391602 19 0 14.74670028686523 0 9.5 C 0 4.253290176391602 4.253290176391602 0 9.5 0 Z" stroke="none" fill="#65a9ff"/>
</g>
<path id="Vector-2" data-name="Vector" d="M2.552,3.252a.7.7,0,0,1-.49-.2L.2,1.192A.706.706,0,0,1,.2.2a.706.706,0,0,1,.99,0l1.86,1.86a.706.706,0,0,1,0,.99A.738.738,0,0,1,2.552,3.252Z" transform="translate(446.747 206.747)" fill="#65a9ff"/>
<path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(452 212) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.7 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="5.397" height="5.397" viewBox="0 0 5.397 5.397">
<g id="Group_1887" data-name="Group 1887" transform="translate(0.707 0.707)">
<path id="Vector" d="M3.943,3.943,0,0" transform="translate(0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M3.943,0,0,3.943" transform="translate(0 0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 545 B

Loading…
Cancel
Save