Add report not before date

src/components/step.tsx

@@ -5,6 +5,7 @@ import React, { ReactChild, useMemo } from "react";
 import { StepIcon } from "@/components/stepIcon";
 
 type StepProps = StepperStepProps & {
+    notBefore?: Moment;
     until?: Moment;
     completedOn?: Moment;
     label: string;
@@ -17,7 +18,7 @@ type StepProps = StepperStepProps & {
 const now = moment();
 
 export const Step = (props: StepProps) => {
-    const { until, label, completedOn, children, completed = false, declined = false, waiting = false, state = null, ...rest } = props;
+    const { until, notBefore, label, completedOn, children, completed = false, declined = false, waiting = false, state = null, ...rest } = props;
     const { t } = useTranslation();
 
     const isLate = useMemo(() => until?.isBefore(completedOn || now), [completedOn, until]);
@@ -26,18 +27,22 @@ export const Step = (props: StepProps) => {
     return <StepperStep { ...rest } completed={ completed }>
         <StepLabel error={ declined } StepIconComponent={ StepIcon } StepIconProps={{ ...props, waiting } as any}>
             { label }
-            { until && <Box>
+            <Box>
-                { state && <>
+                { state && <Typography variant="subtitle2" display="inline">{ state }</Typography> }
-                    <Typography variant="subtitle2" display="inline">{ state }</Typography>
+                { notBefore &&
+                    <Typography variant="subtitle2" color="textSecondary" display="inline">
+                        { t('not-before', { date: notBefore }) }
+                    </Typography> }
+                { until && <>
                     <Typography variant="subtitle2" display="inline" color="textSecondary"> • </Typography>
+                    <Typography variant="subtitle2" color="textSecondary" display="inline">
+                        { t('until', { date: until }) }
+                        { isLate && <Typography color="error" display="inline"
+                                                variant="body2"> - { t('late', { by: moment.duration(now.diff(until)) }) }</Typography> }
+                        { !isLate && !completed && <Typography display="inline" variant="body2"> - { t('left', { left: left }) }</Typography> }
+                    </Typography>
                 </> }
-                <Typography variant="subtitle2" color="textSecondary" display="inline">
+            </Box>
-                    { t('until', { date: until }) }
-                    { isLate && <Typography color="error" display="inline"
-                                            variant="body2"> - { t('late', { by: moment.duration(now.diff(until)) }) }</Typography> }
-                    { !isLate && !completed && <Typography display="inline" variant="body2"> - { t('left', { left: left }) }</Typography> }
-                </Typography>
-            </Box> }
         </StepLabel>
         { children && <StepContent>{ children }</StepContent> }
     </StepperStep>

src/pages/main.tsx

@@ -13,7 +13,7 @@ import { PlanStep } from "@/pages/steps/plan";
 import { InsuranceState } from "@/state/reducer/insurance";
 import { InsuranceStep } from "@/pages/steps/insurance";
 import { StudentStep } from "@/pages/steps/student";
-import { useDeadlines } from "@/hooks";
+import { useCurrentEdition, useDeadlines } from "@/hooks";
 import api from "@/api";
 import { AppDispatch, InternshipPlanActions, InternshipProposalActions, useDispatch } from "@/state/actions";
 import { internshipRegistrationDtoTransformer } from "@/api/dto/internship-registration";
@@ -51,6 +51,7 @@ export const MainPage = () => {
     const deadlines = useDeadlines();
     const insurance = useSelector<AppState, InsuranceState>(root => root.insurance);
     const dispatch = useDispatch();
+    const edition = useCurrentEdition();
 
     useEffect(() => {
         dispatch(updateInternshipInfo);
@@ -68,13 +69,15 @@ export const MainPage = () => {
         if (insurance.required)
             yield <InsuranceStep key="insurance"/>;
 
-        yield <Step label={ t('steps.report.header') } until={ deadlines.report } key="report"/>
+        yield <Step label={ t('steps.report.header') } until={ deadlines.report } notBefore={ edition?.reportingStart } key="report"/>
         yield <Step label={ t('steps.grade.header') } key="grade"/>
     }
 
-    return <Page my={ 6 }>
+    return <Page>
+        <Page.Header>
+            <Page.Title>{ t("pages.my-internship.header") }</Page.Title>
+        </Page.Header>
         <Container>
-            <Typography variant="h2">{ t("pages.my-internship.header") }</Typography>
             <Stepper orientation="vertical" nonLinear>
                 { Array.from(getSteps()) }
             </Stepper>

src/pages/steps/plan.tsx

@@ -26,7 +26,7 @@ const PlanActions = () => {
     const history = useHistory();
 
     const FormAction = ({ children = t('steps.plan.submit'), ...props }: ButtonProps) =>
-        <Button to={ route("internship_plan") } variant="contained" color="primary" component={ RouterLink } startIcon={ <FileUploadOutline /> }>
+        <Button to={ route("internship_plan") } variant="contained" color="primary" component={ RouterLink } startIcon={ <FileUploadOutline /> } { ...props as any }>
             { children }
         </Button>
 

translations/pl.yaml

@@ -7,6 +7,7 @@ logout: wyloguj się
 logged-in-as: zalogowany jako <1>{{ name }}</1>
 
 until: do {{ date, DD MMMM YYYY }}
+not-before: od {{ date, DD MMMM YYYY }}
 late: '{{ by, humanize }} spóźnienia'
 left: jeszcze {{ left, humanize }}