Skip to content

Commit

Permalink
Dashboard (#1429)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TomChapmanGov
TomChapmanGov authored Dec 11, 2023
1 parent f3bbfa1 commit cf6d276
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 42 deletions.
5 changes: 1 addition & 4 deletions epictrack-web/src/components/icons/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,10 +370,7 @@ const EyeIcon = (props: IconProps) => {
const ClockIcon = (props: IconProps) => {
return (
<svg {...commonProps} {...props} width="16" height="16" viewBox="0 0 16 16">
<path
d="M1.5 7.625C1.5 4.04492 4.39453 1.125 8 1.125C11.5801 1.125 14.5 4.04492 14.5 7.625C14.5 11.2305 11.5801 14.125 8 14.125C4.39453 14.125 1.5 11.2305 1.5 7.625ZM8.60938 4.17188C8.60938 3.8418 8.33008 3.5625 8 3.5625C7.64453 3.5625 7.39062 3.8418 7.39062 4.17188V7.01562H5.35938C5.00391 7.01562 4.75 7.29492 4.75 7.625C4.75 7.98047 5.00391 8.23438 5.35938 8.23438H8C8.33008 8.23438 8.60938 7.98047 8.60938 7.625V4.17188Z"
fill="#6D7274"
/>
<path d="M1.5 7.625C1.5 4.04492 4.39453 1.125 8 1.125C11.5801 1.125 14.5 4.04492 14.5 7.625C14.5 11.2305 11.5801 14.125 8 14.125C4.39453 14.125 1.5 11.2305 1.5 7.625ZM8.60938 4.17188C8.60938 3.8418 8.33008 3.5625 8 3.5625C7.64453 3.5625 7.39062 3.8418 7.39062 4.17188V7.01562H5.35938C5.00391 7.01562 4.75 7.29492 4.75 7.625C4.75 7.98047 5.00391 8.23438 5.35938 8.23438H8C8.33008 8.23438 8.60938 7.98047 8.60938 7.625V4.17188Z" />
</svg>
);
};
Expand Down
98 changes: 62 additions & 36 deletions epictrack-web/src/components/myWorkplans/Card/CardBody.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Grid, SxProps, colors } from "@mui/material";
import { Grid } from "@mui/material";
import { Palette } from "../../../styles/theme";
import { ETCaption1, ETCaption2, ETHeading4, ETParagraph } from "../../shared";
import Icons from "../../icons";
Expand All @@ -9,16 +9,31 @@ import dayjs from "dayjs";
import { MONTH_DAY_YEAR } from "../../../constants/application-constant";
import { isStatusOutOfDate } from "../../workPlan/status/shared";
import { Status } from "../../../models/status";
import { When } from "react-if";

const IndicatorSmallIcon: React.FC<IconProps> = Icons["IndicatorSmallIcon"];
const DotIcon: React.FC<IconProps> = Icons["DotIcon"];
const ClockIcon: React.FC<IconProps> = Icons["ClockIcon"];

const CardBody = ({ workplan }: CardProps) => {
const phase_color = workplan.phase_info.work_phase.phase.color;
const phase_color = workplan?.phase_info?.work_phase?.phase?.color;
const statusOutOfDate =
isStatusOutOfDate(workplan.status_info as Status) ||
!workplan.status_info?.posted_date;

const daysLeft = () => {
const daysLeft = workplan?.phase_info?.days_left;
const totalDays = workplan?.phase_info?.total_number_of_days;

if (daysLeft >= 0) {
return `${daysLeft}/${totalDays} days left`;
}

const daysOver = Math.abs(daysLeft);

return `${daysOver} day${daysOver > 1 ? "s" : ""} over`;
};

return (
<Grid
container
Expand Down Expand Up @@ -57,39 +72,50 @@ const CardBody = ({ workplan }: CardProps) => {
spacing={1}
sx={{ paddingBottom: "8px" }}
>
<Grid item container sx={{ marginTop: "2px" }} xs={1}>
<DotIcon fill={phase_color} />
</Grid>
<Grid item container xs={6}>
<ETCaption2
bold
color={phase_color}
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{workplan.phase_info.work_phase.name}
</ETCaption2>
</Grid>
<Grid item container sx={{ marginTop: "4px" }} xs={1}>
<ClockIcon />
</Grid>
<Grid item container xs={4}>
<ETCaption2
bold
color={Palette.neutral.main}
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{workplan.phase_info.days_left}/
{workplan.phase_info.total_number_of_days} days left
</ETCaption2>
</Grid>
<When condition={"phase_info" in workplan}>
<Grid item container sx={{ marginTop: "2px" }} xs={1}>
<DotIcon fill={phase_color} />
</Grid>
<Grid item container xs={5}>
<ETCaption2
bold
color={phase_color}
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{workplan?.phase_info?.work_phase.name}
</ETCaption2>
</Grid>
<Grid item container sx={{ marginTop: "4px" }} xs={1}>
<ClockIcon
fill={
workplan?.phase_info?.days_left > 0
? Palette.neutral.main
: Palette.error.main
}
/>
</Grid>
<Grid item container xs={3}>
<ETCaption2
bold
color={
workplan?.phase_info?.days_left > 0
? Palette.neutral.main
: Palette.error.main
}
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{daysLeft()}
</ETCaption2>
</Grid>
</When>
</Grid>
<Grid item container direction="row" spacing={1}>
<Grid
Expand All @@ -102,7 +128,7 @@ const CardBody = ({ workplan }: CardProps) => {
>
<ETCaption1 color={Palette.neutral.main}>
{`UPCOMING MILESTONE ${dayjs(new Date())
.add(workplan.phase_info.days_left, "days")
.add(workplan?.phase_info?.days_left, "days")
.format(MONTH_DAY_YEAR)
.toUpperCase()}`}
</ETCaption1>
Expand Down
6 changes: 4 additions & 2 deletions epictrack-web/src/components/myWorkplans/Card/CardFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { ETCaption1, ETCaption2, ETParagraph } from "../../shared";
import Icons from "../../icons";
import { IconProps } from "../../icons/type";
import { CardProps } from "./type";
import { useNavigate } from "react-router-dom";

const EyeIcon: React.FC<IconProps> = Icons["EyeIcon"];

const CardFooter = ({ workplan }: CardProps) => {
const navigate = useNavigate();
const team_lead = workplan.staff_info.find((staff: any) => {
if (staff.role.name === "Team Lead") {
return staff.staff.full_name;
Expand Down Expand Up @@ -98,9 +100,9 @@ const CardFooter = ({ workplan }: CardProps) => {
backgroundColor: "inherit",
borderColor: "transparent",
}}
onClick={() => undefined}
onClick={() => navigate(`/work-plan?work_id=${workplan.id}`)}
>
<ETCaption2 bold>View Only</ETCaption2>
<ETCaption2 bold>View</ETCaption2>
</Button>
</Grid>
</Grid>
Expand Down

0 comments on commit cf6d276

Please sign in to comment.