Skip to content

Commit

Permalink
Merge pull request #536 from coronasafe/develop
Browse files Browse the repository at this point in the history 
UI redesign
  • Loading branch information
@bodhish
bodhish authored Aug 22, 2020
2 parents a501489 + a8c116e commit 39aa16e
Show file tree
Hide file tree
Showing 7 changed files with 528 additions and 449 deletions.
22 changes: 5 additions & 17 deletions src/Components/Facility/BedTypeCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from "react";
import { Grid, Typography, Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import { CapacityModal } from "./models";
import { navigate } from "hookrouter";
import { BED_TYPES } from "../../Common/constants";
Expand All @@ -9,31 +7,21 @@ interface BedTypeProps extends CapacityModal {
facilityId: number;
}

const useStyles = makeStyles({
marginBottom: {
marginBottom: 5
},
countText: {
fontSize: "2.25rem"
}
});

const BedTypeCard = (props: BedTypeProps) => {
const classes = useStyles();
const bed = BED_TYPES.find(i => i.id === props.room_type);
const roomType = bed ? bed.text : "Unknown";
return (
<div className="px-2 py-2 md:w-1/2 w-full">
<div className="flex flex-col items-center shadow rounded-lg p-4">
<div className="px-2 py-2 lg:w-1/5 w-full">
<div className="flex flex-col items-center shadow rounded-lg p-4 h-full justify-between">
<div className="font-semibold text-sm mt-2">{roomType}</div>
<div className="text-bold text-3xl md:text-6xl mt-2">
<div className="text-bold text-xl md:text-3xl mt-2">
{props.current_capacity} / {props.total_capacity}
</div>
<div className="font-bold text-xs mt-2">
<div className="font-bold text-xs mt-2 text-center">
Currently Occupied / Total Capacity
</div>
<div
className="py-2 mt-2 px-6 bg-white rounded-md border border-grey-500 inline-flex items-center justify-center whitespace-no-wrap text-sm font-semibold rounded cursor-pointer hover:bg-gray-300"
className="btn btn-default"
onClick={() =>
navigate(`/facility/${props.facilityId}/bed/${props.room_type}`)
}
Expand Down
19 changes: 5 additions & 14 deletions src/Components/Facility/DoctorsCountCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from "react";
import { Grid, Typography, Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import { navigate } from "hookrouter";
import { DoctorModal } from "./models";
import { DOCTOR_SPECIALIZATION } from "../../Common/constants";
Expand All @@ -9,23 +7,16 @@ interface DoctorsCountProps extends DoctorModal {
facilityId: number;
}

const useStyles = makeStyles({
countText: {
fontSize: "2.25rem"
}
});

const DoctorsCountCard = (props: DoctorsCountProps) => {
const classes = useStyles();
const specialization = DOCTOR_SPECIALIZATION.find(i => i.id === props.area);
const area = specialization ? specialization.text : "Unknown";
return (
<div className="px-2 py-2 md:w-1/2 w-full">
<div className="flex flex-col items-center shadow rounded-lg p-4">
<div className="text-bold text-6xl mt-2">{props.count}</div>
<div className="font-semibold text-xl mt-2">{area} Doctors</div>
<div className="px-2 py-2 lg:w-1/5 w-full">
<div className="flex flex-col items-center shadow rounded-lg p-4 h-full justify-between">
<div className="text-bold text-3xl mt-2">{props.count}</div>
<div className="font-semibold text-md mt-2">{area} Doctors</div>
<div
className="py-2 mt-2 px-6 bg-white rounded-md border border-grey-500 inline-flex items-center justify-center whitespace-no-wrap text-sm font-semibold rounded cursor-pointer hover:bg-gray-300"
className="btn btn-default"
onClick={() =>
navigate(`/facility/${props.facilityId}/doctor/${props.area}`)
}
Expand Down
271 changes: 125 additions & 146 deletions src/Components/Facility/FacilityHome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import {
listDoctor
} from "../../Redux/actions";
import * as Notification from "../../Utils/Notifications.js";
const Loading = loadable( () => import("../Common/Loading"));
const PageTitle = loadable( () => import("../Common/PageTitle"));
const Loading = loadable(() => import("../Common/Loading"));
const PageTitle = loadable(() => import("../Common/PageTitle"));
import BedTypeCard from "./BedTypeCard";
import DoctorsCountCard from "./DoctorsCountCard";
import { CapacityModal, DoctorModal, FacilityModel, PatientStatsModel } from "./models";
Expand Down Expand Up @@ -73,8 +73,6 @@ export const FacilityHome = (props: any) => {
[dispatch, facilityId]
);



useAbortableEffect(
(status: statusType) => {
fetchData(status);
Expand Down Expand Up @@ -126,169 +124,150 @@ export const FacilityHome = (props: any) => {
<td className="border px-4 py-2 text-center">{data.num_patient_referred || "-"}</td>
<td className="border px-4 py-2 text-center">{data.num_patient_confirmed_positive || "-"}</td>
<td className="border px-4 py-2">
<Button
className="py-2 mt-2 px-6 bg-white rounded-md border border-grey-500 inline-flex items-center justify-center whitespace-no-wrap text-sm font-semibold rounded cursor-pointer hover:bg-gray-300"
<button
className="btn btn-default"
onClick={() =>
navigate(`/facility/${facilityId}/triage/${data.id}`)
}>
Edit
</Button></td>
</button></td>
</tr>
);
});

return (
<div className="px-2 pb-2">
<PageTitle
<PageTitle
title={facilityData.name || "Facility"} />
<Card className="mt-4">
<CardContent>
<Grid
container
style={{ padding: "10px", marginBottom: "5px" }}
spacing={2}
<div className="bg-white rounded-lg md:p-6 p-3 shadow">
<div className="md:flex justify-between">
<div>
<Typography
style={{ textTransform: "capitalize" }}
variant="h6"
component="h6"
>
{facilityData.name}
</Typography>
<Typography>Address : {facilityData.address}</Typography>
<Typography>Phone : {facilityData.phone_number}</Typography>
<Typography>
District : {facilityData?.district_object?.name}
</Typography>
<Typography>
Oxygen Capacity :{` ${facilityData.oxygen_capacity} Litres`}
</Typography>
</div>
<div className="flex flex-col">
<button
className="btn-primary btn"
onClick={() => navigate(`/facility/${facilityId}/update`)}
>
<i className="fas fa-pencil-alt text-white mr-2">
</i>
Update Facility
</button>
<button
className="btn-primary btn mt-2"
onClick={() => navigate(`/facility/${facilityId}/inventory`)}
>
<i className="fas fa-dolly-flatbed text-white mr-2">
</i>
Inventory Management
</button>
</div>
</div>
<div>
<button
className="btn-primary btn mt-2 mr-2 w-full md:w-auto"
onClick={() => navigate(`/facility/${facilityId}/patient`)}
>
<Grid item xs={12} md={7}>
<Typography
style={{ textTransform: "capitalize" }}
variant="h6"
component="h6"
>
{facilityData.name}
</Typography>
<Typography>Address : {facilityData.address}</Typography>
<Typography>Phone : {facilityData.phone_number}</Typography>
<Typography>
District : {facilityData?.district_object?.name}
</Typography>
<Typography>
Oxygen Capacity :{` ${facilityData.oxygen_capacity} Litres`}
</Typography>
</Grid>
<Grid item xs={12} md={5}>
<Grid container spacing={1} direction="column">
<Grid item xs={12}>
<Button
fullWidth
variant="contained"
color="primary"
size="small"
onClick={() => navigate(`/facility/${facilityId}/update`)}
>
Update Facility
</Button>
</Grid>
<Grid item xs={12}>
<Button
fullWidth
variant="contained"
color="primary"
size="small"
onClick={() => navigate(`/facility/${facilityId}/bed`)}
disabled={capacityList.length === BED_TYPES.length}
>
Add More Bed Types
</Button>
</Grid>
<Grid item xs={12}>
<Button
fullWidth
variant="contained"
color="primary"
size="small"
onClick={() => navigate(`/facility/${facilityId}/doctor`)}
disabled={
doctorList.length === DOCTOR_SPECIALIZATION.length
}
>
Add More Doctor Types
</Button>
</Grid>
<Grid item xs={12}>
<Button
fullWidth
variant="contained"
color="primary"
size="small"
onClick={() => navigate(`/facility/${facilityId}/triage`)}
>
Add Triage
</Button>
</Grid>
<Grid item xs={12}>
<Button
fullWidth
variant="contained"
color="primary"
size="small"
onClick={() => navigate(`/facility/${facilityId}/inventory`)}
>
Inventory Management
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container style={{ padding: "10px" }} spacing={1}>
<Grid item xs={12} md={6}>
<Button
fullWidth
variant="contained"
color="primary"
size="small"
onClick={() => navigate(`/facility/${facilityId}/patient`)}
>
Add Details of Covid Suspects
</Button>
</Grid>
<Grid item xs={12} md={6}>
<Button
fullWidth
variant="contained"
color="primary"
size="small"
onClick={() => navigate(`/facility/${facilityId}/patients`)}
>
View Suspects / Patients
</Button>
</Grid>
</Grid>
<i className="fas fa-plus text-white mr-2">
</i>
Add Details of Covid Suspects
</button>

<div className="mt-4">
<div className="font-semibold text-xl border-b-2">
<button
className="btn-primary btn mt-2 mr-2 w-full md:w-auto"
onClick={() => navigate(`/facility/${facilityId}/patients`)}
>
<i className="fas fa-user-injured text-white mr-2">
</i>
View Suspects / Patients
</button>
</div>
<div className="mt-4">
<div className="md:flex justify-between md:border-b md:pb-2">
<div className="font-semibold text-xl">
Total Capacity
</div>
<div className="mt-4 flex flex-wrap">{capacityList}</div>
<button
className="btn-primary btn w-full md:w-auto"
onClick={() => navigate(`/facility/${facilityId}/bed`)}
disabled={capacityList.length === BED_TYPES.length}
>
<i className="fas fa-bed text-white mr-2">
</i>
Add More Bed Types
</button>
</div>
<div className="mt-4">
<div className="font-semibold text-xl border-b-2">Doctors List</div>
<div className="mt-4 flex flex-wrap">{doctorList}</div>
<div className="mt-4 flex flex-wrap">{capacityList}</div>
</div>
<div className="mt-4">
<div className="md:flex justify-between md:border-b md:pb-2">
<div className="font-semibold text-xl">
Doctors List
</div>
<button
className="btn-primary btn w-full md:w-auto"
onClick={() => navigate(`/facility/${facilityId}/doctor`)}
disabled={
doctorList.length === DOCTOR_SPECIALIZATION.length
}
>
<i className="fas fa-user-md text-white mr-2">
</i>
Add Doctor Types
</button>
</div>
<div className="mt-4 flex flex-wrap">
{doctorList}
</div>
<div className="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 mt-4">
<div className="font-semibold text-xl border-b-2">
</div>
<div className="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 mt-4">
<div className="md:flex justify-between md:border-b md:pb-2">
<div className="font-semibold text-xl">
Corona Triage
</div>
<div className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200 mt-4">
<table className="min-w-full border-2 rounded overflow-hidden">
<thead>
<tr className="white border">
<th className="border px-4 py-2">Date</th>
<th className="border px-4 py-2">Total Triaged</th>
<th className="border px-4 py-2">
Advised Home Quarantine
<button
className="btn-primary btn w-full md:w-auto"
onClick={() => navigate(`/facility/${facilityId}/triage`)}
>
<i className="fas fa-notes-medical text-white mr-2">
</i>
Add Triage
</button>
</div>
<div className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200 mt-4">
<table className="min-w-full border-2 rounded overflow-hidden">
<thead>
<tr className="white border">
<th className="border px-4 py-2">Date</th>
<th className="border px-4 py-2">Total Triaged</th>
<th className="border px-4 py-2">
Advised Home Quarantine
</th>
<th className="border px-4 py-2">Suspects Isolated</th>
<th className="border px-4 py-2">Referred</th>
<th className="border px-4 py-2">Confirmed Possitives</th>
<th className="border px-4 py-2">Actions</th>
</tr>
</thead>
<tbody>{stats}</tbody>
</table>
</div>
<th className="border px-4 py-2">Suspects Isolated</th>
<th className="border px-4 py-2">Referred</th>
<th className="border px-4 py-2">Confirmed Possitives</th>
<th className="border px-4 py-2">Actions</th>
</tr>
</thead>
<tbody>{stats}</tbody>
</table>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
);
};
Loading

0 comments on commit 39aa16e

Please sign in to comment.