{"size": 4665, "ext": "js", "max_stars_repo_path": "new-design/src/pages/TimeOff.js", "max_stars_repo_name": "Shivanshudeveloper/totalmanagment", "max_stars_repo_stars_event_min_datetime": "2022-02-03T13:45:10.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-03T13:45:10.000Z", "max_issues_repo_path": "new-design/src/pages/TimeOff.js", "max_issues_repo_name": "Shivanshudeveloper/totalmanagment", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "new-design/src/pages/TimeOff.js", "max_forks_repo_name": "Shivanshudeveloper/totalmanagment", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.2727272727, "max_line_length": 96, "alphanum_fraction": 0.5337620579}
import * as React from "react";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import { Typography, Card, CardContent } from "@mui/material";



const columns = [
  { id: "name", label: "Absensce Plan", minWidth: 170 },
  { id: "code", label: "Unit of Time", minWidth: 100 },
  {
    id: "population",
    label: "Beginning Year Balance",
    minWidth: 170,
    align: "right",
    format: (value) => value.toLocaleString("en-US"),
  },
  {
    id: "size",
    label: "Accured to Date",
    minWidth: 170,
    align: "right",
    format: (value) => value.toLocaleString("en-US"),
  },
  {
    id: "density",
    label: "Absence Paid Year to Date",
    minWidth: 170,
    align: "right",
    format: (value) => value.toFixed(2),
  },
  {
    id: "density",
    label: "Begining Period Balance",
    minWidth: 170,
    align: "right",
    format: (value) => value.toFixed(2),
  },
  {
    id: "density",
    label: "Accured to Period",
    minWidth: 170,
    align: "right",
    format: (value) => value.toFixed(2),
  },
  {
    id: "density",
    label: "Absence Paid Year to Period",
    minWidth: 170,
    align: "right",
    format: (value) => value.toFixed(2),
  },
  {
    id: "density",
    label: "CarryOver Fortified in Period",
    minWidth: 170,
    align: "right",
    format: (value) => value.toFixed(2),
  },
  {
    id: "density",
    label: "Ending Period Balance",
    minWidth: 170,
    align: "right",
    format: (value) => value.toFixed(2),
  },
  {
    id: "density",
    label: "Ending Period Balance",
    minWidth: 170,
    align: "right",
    format: (value) => value.toFixed(2),
  },
];

function createData(name, code, population, size) {
  const density = population / size;
  return { name, code, population, size, density };
}

const rows = [
  createData("Previously Assured Sick leave", "Hours", 1324171354, 3287263),
  createData("Paid Sick leave", "Hours", 1403500365, 9596961),
  createData("Sick leave", "Hours", 60483973, 301340),
  createData("Paid Time Leave", "Hours", 327167434, 9833520),
  createData("Time Leave", "Hours", 37602103, 9984670),
];

const TimeOff = () => {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

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

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  return (
    <Card
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "100%",
      }}
    >
      <CardContent>
        <Paper sx={{ width: "100%", overflow: "hidden" }}>
          <Typography align="left" color="textPrimary" gutterBottom variant="h6">
            Balances Tracked in Hours
          </Typography>
          <TableContainer sx={{ maxHeight: 440 }}>
            <Table stickyHeader aria-label="sticky table">
              <TableHead>
                <TableRow>
                  {columns.map((column) => (
                    <TableCell
                      key={column.id}
                      align={column.align}
                      style={{ minWidth: column.minWidth }}
                    >
                      {column.label}
                    </TableCell>
                  ))}
                </TableRow>
              </TableHead>
              <TableBody>
                {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
                  return (
                    <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
                      {columns.map((column) => {
                        const value = row[column.id];
                        return (
                          <TableCell key={column.id} align={column.align}>
                            {column.format && typeof value === "number"
                              ? column.format(value)
                              : value}
                          </TableCell>
                        );
                      })}
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </TableContainer>
        </Paper>
      </CardContent>
    </Card>
  );
};

// TimeOff.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;

export default TimeOff;
