[3a58bd6] | 1 | import styled from 'styled-components';
|
---|
| 2 | import T from '@mui/material/Table';
|
---|
| 3 | import TH from '@mui/material/TableHead';
|
---|
| 4 | import TContainer from '@mui/material/TableContainer';
|
---|
| 5 | import TR from '@mui/material/TableRow';
|
---|
| 6 | import TB from '@mui/material/TableBody';
|
---|
| 7 | import TC from '@mui/material/TableCell';
|
---|
| 8 |
|
---|
| 9 | import Button from '@mui/material/Button';
|
---|
| 10 | import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
|
---|
| 11 | import TextField from '@mui/material/TextField';
|
---|
| 12 | import PermIdentityIcon from '@mui/icons-material/PermIdentity';
|
---|
| 13 |
|
---|
| 14 | import Paper from '@mui/material/Paper';
|
---|
| 15 | import { Typography } from '@mui/material';
|
---|
| 16 |
|
---|
| 17 | export const TableContainer = styled(TContainer).attrs({
|
---|
| 18 | component: Paper,
|
---|
| 19 | })`
|
---|
| 20 | max-width: 1000px;
|
---|
| 21 | margin-top: 20px;
|
---|
| 22 | margin-left: 30px;
|
---|
| 23 | box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
|
---|
| 24 | `;
|
---|
| 25 |
|
---|
| 26 | export const TableHeaderWrapper = styled.div`
|
---|
| 27 | display: flex;
|
---|
| 28 | flex-direction: row;
|
---|
| 29 | justify-content: space-between;
|
---|
| 30 | align-content: center;
|
---|
| 31 | width: 100%;
|
---|
| 32 | border: 1px solid grey;
|
---|
| 33 | border-bottom: none;
|
---|
| 34 | padding: 10px 16px;
|
---|
| 35 | background-color: ${(props) => props.theme.palette.grey[400]};
|
---|
| 36 | `;
|
---|
| 37 |
|
---|
| 38 | export const TableTitle = styled(Typography).attrs({
|
---|
| 39 | variant: 'h4',
|
---|
| 40 | })`
|
---|
| 41 | font-size: 2rem;
|
---|
| 42 | font-weight: 600;
|
---|
| 43 | `;
|
---|
| 44 |
|
---|
| 45 | export const CreateEmployeeButton = styled(Button).attrs((props) => ({
|
---|
| 46 | variant: 'contained',
|
---|
| 47 | size: 'large',
|
---|
| 48 | sx: {
|
---|
| 49 | backgroundColor: `${props.theme.palette.primary.main}`,
|
---|
| 50 | },
|
---|
| 51 | }))`
|
---|
| 52 | padding-left: 11px;
|
---|
| 53 |
|
---|
| 54 | :hover {
|
---|
| 55 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 56 | }
|
---|
| 57 | `;
|
---|
| 58 |
|
---|
| 59 | export const AddIcon = styled(AddCircleOutlineIcon)`
|
---|
| 60 | margin-right: 11px;
|
---|
| 61 | `;
|
---|
| 62 |
|
---|
| 63 | export const Table = styled(T).attrs({})`
|
---|
| 64 | th,
|
---|
| 65 | td {
|
---|
| 66 | padding: 20px;
|
---|
| 67 | font-size: 1rem;
|
---|
| 68 | }
|
---|
| 69 | `;
|
---|
| 70 |
|
---|
| 71 | export const IdentityIcon = styled(PermIdentityIcon).attrs((props) => ({
|
---|
| 72 | sx: {
|
---|
| 73 | color: `${props.theme.palette.primary.dark}`,
|
---|
| 74 | },
|
---|
| 75 | }))``;
|
---|
| 76 |
|
---|
| 77 | export const TableHead = styled(TH).attrs({})`
|
---|
| 78 | tr {
|
---|
| 79 | background-color: ${(props) => `${props.theme.palette.grey[900]}`};
|
---|
| 80 | th {
|
---|
| 81 | color: white;
|
---|
| 82 | }
|
---|
| 83 | }
|
---|
| 84 | `;
|
---|
| 85 |
|
---|
| 86 | export const TableRow = styled(TR).attrs({})``;
|
---|
| 87 |
|
---|
| 88 | export const TableBody = styled(TB).attrs({})`
|
---|
| 89 | tr:last-child td,
|
---|
| 90 | tr:last-child th {
|
---|
| 91 | border: none;
|
---|
| 92 | }
|
---|
| 93 |
|
---|
| 94 | tr:nth-of-type(odd) {
|
---|
| 95 | background-color: ${(props) => `${props.theme.palette.grey[400]}`};
|
---|
| 96 | :hover {
|
---|
| 97 | cursor: pointer;
|
---|
| 98 | background-color: ${(props) => `${props.theme.palette.grey[500]}`};
|
---|
| 99 | }
|
---|
| 100 | }
|
---|
| 101 |
|
---|
| 102 | tr:nth-of-type(even) {
|
---|
| 103 | background-color: ${(props) => `${props.theme.palette.grey[200]}`};
|
---|
| 104 | :hover {
|
---|
| 105 | cursor: pointer;
|
---|
| 106 | background-color: ${(props) => `${props.theme.palette.grey[300]}`};
|
---|
| 107 | }
|
---|
| 108 | }
|
---|
| 109 | `;
|
---|
| 110 |
|
---|
| 111 | export const TableCell = styled(TC).attrs({})``;
|
---|
| 112 |
|
---|
| 113 | export const ButtonTableCell = styled(TC).attrs({
|
---|
| 114 | sx: {
|
---|
| 115 | padding: 0,
|
---|
| 116 | },
|
---|
| 117 | })`
|
---|
| 118 | z-index: 100;
|
---|
| 119 | `;
|
---|
| 120 |
|
---|
| 121 | export const ToggleAccoutStatusButton = styled(Button).attrs((props) => ({
|
---|
| 122 | variant: 'contained',
|
---|
| 123 | size: 'medium',
|
---|
| 124 | sx: {
|
---|
| 125 | backgroundColor: props.$enabled
|
---|
| 126 | ? `${props.theme.palette.primary.main}`
|
---|
| 127 | : `${props.theme.palette.error.main}`,
|
---|
| 128 | },
|
---|
| 129 | }))`
|
---|
| 130 | :hover {
|
---|
| 131 | background-color: ${(props) =>
|
---|
| 132 | props.$enabled
|
---|
| 133 | ? `${props.theme.palette.primary.light}`
|
---|
| 134 | : `${props.theme.palette.error.light}`};
|
---|
| 135 | }
|
---|
| 136 | `;
|
---|
| 137 |
|
---|
| 138 | export const SearchField = styled(TextField).attrs({
|
---|
| 139 | variant: 'standard',
|
---|
| 140 | })`
|
---|
| 141 | > div:before {
|
---|
| 142 | border-bottom: 1px solid ${(props) => props.theme.palette.primary.dark};
|
---|
| 143 | }
|
---|
| 144 | input {
|
---|
| 145 | color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 146 | font-weight: 600;
|
---|
| 147 | }
|
---|
| 148 | `;
|
---|