parent
fd4e575552
commit
3a83c2e228
52 changed files with 2633 additions and 2 deletions
@ -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; |
||||||
|
After Width: | Height: | Size: 489 B |
|
After Width: | Height: | Size: 470 B |
|
After Width: | Height: | Size: 472 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 725 B |
|
After Width: | Height: | Size: 570 B |
|
After Width: | Height: | Size: 470 B |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 179 KiB |
|
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; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 622 B |
|
After Width: | Height: | Size: 378 KiB |
|
After Width: | Height: | Size: 749 B |
|
After Width: | Height: | Size: 543 B |
|
After Width: | Height: | Size: 552 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 545 B |
Loading…
Reference in new issue