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