// ** React Imports import { useState, ChangeEvent, MouseEvent, forwardRef, ForwardedRef } from "react"; // ** Next Imports import Link from "next/link"; import { GetStaticProps, InferGetStaticPropsType } from "next/types"; // ** MUI Imports import Box from "@mui/material/Box"; import Card from "@mui/material/Card"; import Menu from "@mui/material/Menu"; import Grid from "@mui/material/Grid"; import { styled } from "@mui/material/styles"; import MenuItem from "@mui/material/MenuItem"; import IconButton from "@mui/material/IconButton"; import Typography from "@mui/material/Typography"; import { DataGrid, GridColDef } from "@mui/x-data-grid"; // ** Icon Imports import Icon from "src/@core/components/icon"; // ** Store Imports import { useDispatch } from "react-redux"; // ** Types Imports import { AppDispatch } from "src/store"; import { ThemeColor } from "src/@core/layouts/types"; import { ScheduleType } from "src/types/apps/scheduleTypes"; import RadioGroup from "@mui/material/RadioGroup"; import Radio from "@mui/material/Radio"; import FormControlLabel from "@mui/material/FormControlLabel"; import Button from "@mui/material/Button"; import TextField from "@mui/material/TextField"; import DatePicker from 'react-datepicker' import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker' import InputAdornment from '@mui/material/InputAdornment' import { DateType } from 'src/types/forms/reactDatepickerTypes' interface CellType { row: ScheduleType; } const LinkStyled = styled(Link)(({ theme }) => ({ fontWeight: 600, fontSize: "1rem", cursor: "pointer", textDecoration: "none", color: theme.palette.text.secondary, "&:hover": { color: theme.palette.primary.main, }, })); const RowOptions = ({ id }: { id: number | string }) => { // ** State const [anchorEl, setAnchorEl] = useState(null); const rowOptionsOpen = Boolean(anchorEl); const handleRowOptionsClick = (event: MouseEvent) => { setAnchorEl(event.currentTarget); }; const handleRowOptionsClose = () => { setAnchorEl(null); }; return ( <> View Edit Delete ); }; const columns: GridColDef[] = [ { flex: 0.05, minWidth: 150, field: "dateTime", headerName: "日付", renderCell: ({ row }: CellType) => { return ( {row.dateTime} ); }, }, { flex: 0.1, minWidth: 200, field: "scheduleName", headerName: "スケジュール名 顧客種別", renderCell: ({ row }: CellType) => { return ( {row.scheduleName} ); }, }, { flex: 0.2, field: "customer", minWidth: 150, headerName: "顧客", renderCell: ({ row }: CellType) => { return ( {row.customer} ); }, }, { flex: 0.1, minWidth: 120, headerName: "ゴミ品目", field: "waste", renderCell: ({ row }: CellType) => { return ( {row.waste} ); }, }, { flex: 0.1, minWidth: 120, headerName: "ルート名", field: "route", renderCell: ({ row }: CellType) => { return ( {row.route} ); }, }, { flex: 0.1, minWidth: 120, headerName: "担当者", field: "personInChange", renderCell: ({ row }: CellType) => { return ( {row.personInChange} ); }, }, { flex: 0.1, minWidth: 120, headerName: "担当車両", field: "vehicleInChange", renderCell: ({ row }: CellType) => { return ( {row.vehicleInChange} ); }, }, { flex: 0.12, minWidth: 120, headerName: "回収", field: "collection", renderCell: ({ row }: CellType) => { return ( {row.collection} ); }, }, ]; const CustomInputStart = forwardRef(({ ...props }, ref: ForwardedRef) => { return ) }} {...props} /> }) CustomInputStart.displayName = 'CustomInputStart' const CustomInputEnd = forwardRef(({ ...props }, ref: ForwardedRef) => { return ) }} {...props} /> }) CustomInputEnd.displayName = 'CustomInputEnd' const Schedule = () => { // ** State const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 10, }); // ** Hooks const dispatch = useDispatch(); const [skin, setSkin] = useState(""); const [dateStart, setDateStart] = useState(new Date()) const [dateEnd, setDateEnd] = useState(new Date()) const [value, setValue] = useState('checked') const handleChange = (event: ChangeEvent) => { setValue((event.target as HTMLInputElement).value) } const store = [ { id: 1, dateTime: "2024/08/02", scheduleName: "江東区ルート1事業系", customer: "独立行政法人石油天然ガス金属鉱物資源機構", waste: "可燃、不燃", route: "夏季ルート", personInChange: "山田かずお伊藤ゆう", vehicleInChange: "クリーン1号クリーン2号", collection: "10/15", }, { id: 2, dateTime: "2024/08/02", scheduleName: "江東区ルート1事業系", customer: "独立行政法人石油天然ガス金属鉱物資源機構", waste: "可燃、不燃", route: "夏季ルート", personInChange: "山田かずお伊藤ゆう", vehicleInChange: "クリーン1号クリーン2号", collection: "10/15", }, { id: 3, dateTime: "2024/08/02", scheduleName: "江東区ルート1事業系", customer: "独立行政法人石油天然ガス金属鉱物資源機構", waste: "可燃、不燃", route: "夏季ルート", personInChange: "山田かずお伊藤ゆう", vehicleInChange: "クリーン1号クリーン2号", collection: "10/15", }, ]; return ( スケジュール
} onChange={(dateStart: Date) => setDateStart(dateStart)} />
~
} onChange={(dateEnd: Date) => setDateEnd(dateEnd)} />
顧客種別 } label='全ての顧客' /> } label='行政系顧客' /> } label='事業系顧客' />
); }; Schedule.acl = { action: "manage", subject: "admin", }; export default Schedule;