57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
|
|
|
|
import { usePromocodeStore } from "@root/stores/promocodes";
|
|
|
|
import theme from "@root/theme";
|
|
|
|
const columns: GridColDef[] = [
|
|
{ field: "id", headerName: "ID", width: 30, sortable: false },
|
|
{
|
|
field: "name",
|
|
headerName: "Название промокода",
|
|
width: 200,
|
|
sortable: false,
|
|
},
|
|
{ field: "endless", headerName: "Бесконечный", width: 120, sortable: false },
|
|
{ field: "from", headerName: "От", width: 120, sortable: false },
|
|
{ field: "dueTo", headerName: "До", width: 120, sortable: false },
|
|
{
|
|
field: "privileges",
|
|
headerName: "Привилегии",
|
|
width: 210,
|
|
sortable: false,
|
|
},
|
|
];
|
|
|
|
export const PromocodesList = () => {
|
|
const { promocodes } = usePromocodeStore();
|
|
|
|
return (
|
|
<Box style={{ width: "80%", marginTop: "55px" }}>
|
|
<Box style={{ height: 400 }}>
|
|
<DataGrid
|
|
checkboxSelection={true}
|
|
rows={promocodes}
|
|
columns={columns}
|
|
sx={{
|
|
color: theme.palette.secondary.main,
|
|
"& .MuiDataGrid-iconSeparator": { display: "none" },
|
|
"& .css-levciy-MuiTablePagination-displayedRows": {
|
|
color: theme.palette.secondary.main,
|
|
},
|
|
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main },
|
|
"& .MuiTablePagination-selectLabel": {
|
|
color: theme.palette.secondary.main,
|
|
},
|
|
"& .MuiInputBase-root": { color: theme.palette.secondary.main },
|
|
"& .MuiButton-text": { color: theme.palette.secondary.main },
|
|
}}
|
|
components={{ Toolbar: GridToolbar }}
|
|
onSelectionModelChange={(ids) => console.log("datagrid select")}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|