[pickers] Make badge inside my DateCalendar

[b33-buzz]

import { useState, useEffect } from "react";
import {
  Grid,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  TextField,
  TablePagination,
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Badge,
} from "@mui/material";
import gambarBidan from "/bidan.png";
import {
  DateCalendar,
  DayCalendarSkeleton,
  LocalizationProvider,
  PickersDay,
} from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { collection, getDocs } from "firebase/firestore";
import { db } from "../../firebase";
import dayjs from "dayjs";
import { DataGrid } from "@mui/x-data-grid";
import CheckIcon from "@mui/icons-material/Check";

const Bidan = () => {
  const [datas, setDatas] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(0);
  const itemsPerPage = 5;
  const [openModal, setOpenModal] = useState(false);
  const [selectedData, setSelectedData] = useState(null);
  const [value, setValue] = useState(dayjs());
  const [dates, setDates] = useState([]);

  useEffect(() => {
    const getData = async () => {
      const dataCollectionRef = collection(db, "data");
      const dataSnap = await getDocs(dataCollectionRef);
      const data = dataSnap.docs.map((doc) => {
        const dataObj = {
          id: doc.id,
          ...doc.data(),
        };
        return dataObj;
      });
      setDatas(data);
    };
    getData();
  }, []);

  useEffect(() => {
    const getDates = async () => {
      const datesCollectionRef = collection(db, "data"); // Replace "dates" with the actual name of your collection
      const datesSnap = await getDocs(datesCollectionRef);
      const datesData = datesSnap.docs.map((doc) => doc.data().date);
      setDates(datesData);
    };
    getDates();
  }, []);

  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const handleChangePage = (event, newPage) => {
    setCurrentPage(newPage);
  };

  const handleModalOpen = (data) => {
    setSelectedData(data);
    setOpenModal(true);
  };

  const columns = [
    { field: "firstName", headerName: "First Name", width: 125 },
    { field: "lastName", headerName: "Last Name", width: 120 },
    {
      field: "actions",
      headerName: "Actions",
      width: 110,
      renderCell: (params) => (
        <Button
          variant="contained"
          size="small"
          fullWidth={false}
          sx={{ padding: "5px", height: "45px", width: "100px" }}
          onClick={() => handleModalOpen(params.row)}
        >
          Lihat <br /> Status
        </Button>
      ),
    },
  ];

  const rows = datas
    .filter(
      (data) =>
        data.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
        data.lastName.toLowerCase().includes(searchTerm.toLowerCase())
    )
    .slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage)
    .map((data) => ({
      id: data.id,
      firstName: data.firstName,
      lastName: data.lastName,
    }));

  const handleModalClose = () => {
    setOpenModal(false);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Grid
        container
        minHeight={650}
        minWidth={5}
        display={"flex"}
        justifyContent={"center"}
        alignItems={"center"}
        border={"1px solid black"}
        borderRadius={"10px"}
      >
        <Stack
          direction={"column"}
          justifyContent={"center"}
          alignItems={"center"}
        >
          <img src={gambarBidan} alt="Bidan" />
          <Typography
            variant={"h4"}
            fontFamily={"Poppins, sans-serif"}
            fontWeight={500}
            fontSize={"25px"}
            marginTop={3}
          >
            Aplikasi Kontrol Ibu Hamil
          </Typography>
          {/* Search Input */}
          <TextField
            label="Search By Name"
            variant="outlined"
            color="primary"
            fullWidth={true}
            sx={{ width: "max-content" }}
            margin="normal"
            value={searchTerm}
            onChange={handleSearchChange}
          />
          {/* DataGrid */}
          <div style={{ height: 400, width: "100%" }}>
            <DataGrid
              rows={rows}
              columns={columns}
              pageSize={itemsPerPage}
              rowCount={datas.length} // Set the rowCount to the total number of data rows
              sx={{ width: "max-content" }}
              pagination
              onPageChange={(params) => handleChangePage(null, params.page)}
            />
          </div>
          {/* Modal */}
          <Dialog open={openModal} onClose={handleModalClose}>
            <DialogTitle>
              {selectedData &&
                `${selectedData.firstName} ${selectedData.lastName}'s Calendar`}
            </DialogTitle>
            <DialogContent>
              <DateCalendar
                readOnly
                views={["day"]}
                disableFuture
                sx={{ width: "max-content" }}
                renderLoading={() => <DayCalendarSkeleton />}
                value={value}
                onChange={(newValue) => setValue(newValue)}
              />
            </DialogContent>
            <DialogActions>
              <Button onClick={handleModalClose} color="primary">
                Close
              </Button>
            </DialogActions>
          </Dialog>
        </Stack>
      </Grid>
    </LocalizationProvider>
  );
};

export default Bidan;

Can someone help me, I have no idea where I want to start

[flaviendelangle]

If you want help, we would need details about what you are trying to achieve. Pasting your code like that won't help us :+1:

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.