235 lines
8.8 KiB
JavaScript
235 lines
8.8 KiB
JavaScript
import * as React from 'react';
|
|
import { styled } from '@mui/material/styles';
|
|
import Box from '@mui/material/Box';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
// import Paper from '@mui/material/Paper';
|
|
import Grid from '@mui/material/Grid';
|
|
|
|
import Card from '@mui/material/Card';
|
|
import Button from '@mui/material/Button';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
// select
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import Select from '@mui/material/Select';
|
|
import Divider from '@mui/material/Divider';
|
|
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
|
|
import TableContainer from '@mui/material/TableContainer';
|
|
import TableHead from '@mui/material/TableHead';
|
|
import TableRow from '@mui/material/TableRow';
|
|
// import Paper from '@mui/material/Paper';
|
|
|
|
|
|
import AppBarAdmin from '../../components/admin/appBar';
|
|
|
|
function createData(name, calories, fat, carbs, protein) {
|
|
return { name, calories, fat, carbs, protein };
|
|
}
|
|
|
|
const rows = [
|
|
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
|
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
|
createData('Eclair', 262, 16.0, 24, 6.0),
|
|
createData('Cupcake', 305, 3.7, 67, 4.3),
|
|
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
|
];
|
|
|
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
|
[`&.${tableCellClasses.head}`]: {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.common.white,
|
|
}
|
|
}));
|
|
|
|
|
|
|
|
const DrawerHeader = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
padding: theme.spacing(0, 1),
|
|
// necessary for content to be below app bar
|
|
...theme.mixins.toolbar,
|
|
}));
|
|
|
|
function DataPasienPage() {
|
|
const [age, setAge] = React.useState('');
|
|
|
|
const handleChange = (event) => {
|
|
setAge(event.target.value);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Box sx={{ display: 'flex' }}>
|
|
<CssBaseline />
|
|
<AppBarAdmin menu="Pasien" />
|
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
|
<DrawerHeader />
|
|
<Grid container spacing={4}>
|
|
<Grid item xs={12} md={5}>
|
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
|
<Typography variant="h6" gutterBottom sx={{
|
|
fontWeight: 'bold',
|
|
textAlign: 'left',
|
|
paddingLeft: '8%',
|
|
paddingTop: "10px",
|
|
paddingBottom: "10px",
|
|
backgroundColor: "silver",
|
|
}}>Pasien Baru</Typography>
|
|
<Box sx={{ padding: "5px" }}></Box>
|
|
<TextField
|
|
id="nikTextField"
|
|
label="NIK"
|
|
placeholder="Masukkan NIK"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
id="namaTextField"
|
|
label="Nama"
|
|
placeholder="Masukkan Nama"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
id="alamatTextField"
|
|
label="Alamat"
|
|
placeholder="Masukkan Alamat"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
id="NoTelpTextField"
|
|
label="No Telpon"
|
|
placeholder="Masukkan No Telpon"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
|
<InputLabel id="demo-simple-select-helper-label">Jenis Kelamin</InputLabel>
|
|
<Select
|
|
labelId="demo-simple-select-helper-label"
|
|
id="jenisKelaminSelect"
|
|
value={age}
|
|
label="Jenis"
|
|
onChange={handleChange}
|
|
>
|
|
<MenuItem value="">
|
|
<em>None</em>
|
|
</MenuItem>
|
|
<MenuItem value={10}>Ten</MenuItem>
|
|
<MenuItem value={20}>Twenty</MenuItem>
|
|
<MenuItem value={30}>Thirty</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<Divider />
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
id="tanggalPeriksaTextField"
|
|
label="Tanggal Periksa"
|
|
placeholder="Masukkan Tanggal Periksa"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
|
<InputLabel id="demo-simple-select-helper-label">Dokter</InputLabel>
|
|
<Select
|
|
labelId="demo-simple-select-helper-label"
|
|
id="jenisKelaminSelect"
|
|
value={age}
|
|
label="Jenis"
|
|
onChange={handleChange}
|
|
>
|
|
<MenuItem value="">
|
|
<em>None</em>
|
|
</MenuItem>
|
|
<MenuItem value={10}>Ten</MenuItem>
|
|
<MenuItem value={20}>Twenty</MenuItem>
|
|
<MenuItem value={30}>Thirty</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
id="penyakitTextField"
|
|
label="Penyakit"
|
|
placeholder="Masukkan Penyakit"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<Box textAlign="center">
|
|
<Button variant="contained">Tambah</Button>
|
|
</Box>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
</Card>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} md={7}>
|
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
|
<Typography variant="h6" gutterBottom sx={{
|
|
fontWeight: 'bold',
|
|
textAlign: 'left',
|
|
paddingLeft: '3%',
|
|
paddingTop: "10px",
|
|
paddingBottom: "10px",
|
|
backgroundColor: "silver",
|
|
}}>List Pasien</Typography>
|
|
<TableContainer component={Box} sx={{
|
|
padding: "15px",
|
|
}}>
|
|
<Table aria-label="simple table" sx={{
|
|
minWidth: 650,
|
|
boxShadow: 3,
|
|
}}>
|
|
<TableHead>
|
|
<TableRow>
|
|
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
|
<StyledTableCell align="right">Calories</StyledTableCell>
|
|
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
|
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
|
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows.map((row) => (
|
|
<TableRow
|
|
key={row.name}
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
|
>
|
|
<TableCell component="th" scope="row">
|
|
{row.name}
|
|
</TableCell>
|
|
<TableCell align="right">{row.calories}</TableCell>
|
|
<TableCell align="right">{row.fat}</TableCell>
|
|
<TableCell align="right">{row.carbs}</TableCell>
|
|
<TableCell align="right">{row.protein}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Box sx={{ padding: "5px" }}></Box>
|
|
<Box textAlign="center">
|
|
<Button variant="contained">Cetak</Button>
|
|
</Box>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
</Card>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Box>
|
|
</Box>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DataPasienPage;
|