From 6df3d69c81220713fd8e95f36d438275b799e32c Mon Sep 17 00:00:00 2001
From: Roshan Bellary <roshan.bellary@gmail.com>
Date: Tue, 7 Jan 2025 17:03:59 -0800
Subject: [PATCH] Adding Year Selection for submission forms and fixing span
 gap problem for graphs

---
 client/src/SubmissionForms/KitchenOutcome.tsx | 49 +++++++++++++++---
 client/src/SubmissionForms/ProgramOutcome.tsx | 50 ++++++++++++++++---
 .../src/Visualizations/ProgramOutcomesViz.tsx |  5 +-
 3 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/client/src/SubmissionForms/KitchenOutcome.tsx b/client/src/SubmissionForms/KitchenOutcome.tsx
index c676379a..99022ae5 100644
--- a/client/src/SubmissionForms/KitchenOutcome.tsx
+++ b/client/src/SubmissionForms/KitchenOutcome.tsx
@@ -33,6 +33,7 @@ export default function KitchenOutcome() {
   type FormState = {
     email: string | null;
     year: Date;
+    currYear: number;
     orgId: string | null;
     shareSurvey: boolean;
     responderName: string;
@@ -109,6 +110,7 @@ export default function KitchenOutcome() {
   const noFormState: FormState = {
     email: user.email,
     year: new Date(new Date().getFullYear()),
+    currYear: new Date().getFullYear(),
     orgId: null,
     shareSurvey: true,
     responderName: '',
@@ -187,6 +189,7 @@ export default function KitchenOutcome() {
       formState.mealsFemale +
       formState.mealsMale +
       formState.mealsNonBinary +
+      formState.mealsTrangender +
       formState.mealsGenderUnknown;
     const mealFundingSum =
       formState.mealFundingPublic +
@@ -302,6 +305,16 @@ export default function KitchenOutcome() {
     fetchOrganizationNameById();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formState.orgId]);
+  useEffect(() => {
+    const setYearValue = () => {
+      setFormState({
+        ...formState,
+        year: new Date(`1/1/${formState.currYear}`),
+      });
+    };
+    setYearValue();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formState.currYear]);
 
   const currYear = new Date().getFullYear();
 
@@ -342,14 +355,36 @@ export default function KitchenOutcome() {
           fullWidth
         />
       </Box>
+      <h4>Submission Year</h4>
+      <p>
+        While it is preferred to submit data for the current calendar year, this
+        section of the form allows you to select a different submission year if
+        needed.
+      </p>
+      <Box mb={2}>
+        <TextField
+          id="outlined-basic"
+          label="Year of Submission"
+          variant="outlined"
+          type="number"
+          value={formState.currYear}
+          fullWidth
+          onChange={(e) => {
+            setFormState({
+              ...formState,
+              currYear: Number(e.target.value),
+            });
+          }}
+        />
+      </Box>
       <h4>Hunger Relief Impact Funding</h4>
       <p>
         Hunger Relief Meals Served: Total number of meals prepared for low
-        income individuals in {currYear} by your organization. Hunger Relief
-        Meals are prepared meals: hot, cold, frozen, ready-to-eat or reheat.{' '}
-        <br /> <br /> They do not include grocery/pantry boxes. Meal kits,
-        specific boxed mix of perishable and non-perishable ingredients with
-        recipes(e.g. “Blue Apron style”) are included in community meals.
+        income individuals in {formState.currYear} by your organization. Hunger
+        Relief Meals are prepared meals: hot, cold, frozen, ready-to-eat or
+        reheat. <br /> <br /> They do not include grocery/pantry boxes. Meal
+        kits, specific boxed mix of perishable and non-perishable ingredients
+        with recipes(e.g. “Blue Apron style”) are included in community meals.
         Include all prepared meals whether sold on contract or funded through
         grants or fundraising.
       </p>
@@ -1147,8 +1182,8 @@ export default function KitchenOutcome() {
 
       <h4>Retail Social Enterprise Revenue</h4>
       <p>
-        Total combined gross revenue in {currYear} from all foodservice social
-        enterprises, excluding contract hunger relief
+        Total combined gross revenue in {formState.currYear} from all
+        foodservice social enterprises, excluding contract hunger relief
       </p>
       <Box mb={2}>
         <TextField
diff --git a/client/src/SubmissionForms/ProgramOutcome.tsx b/client/src/SubmissionForms/ProgramOutcome.tsx
index c4001ddb..f7eb6e7f 100644
--- a/client/src/SubmissionForms/ProgramOutcome.tsx
+++ b/client/src/SubmissionForms/ProgramOutcome.tsx
@@ -76,6 +76,7 @@ export default function ProgramOutcome() {
     emailAddress: string;
     orgId: string;
     year: Date;
+    currYear: number;
     shareSurvey: boolean;
     organizationName: string;
     responderName: string;
@@ -218,6 +219,7 @@ export default function ProgramOutcome() {
   const noState: FormState = {
     emailAddress: '',
     orgId: '',
+    currYear: new Date().getFullYear(),
     year: new Date(new Date().getFullYear()),
     shareSurvey: false,
     organizationName: '',
@@ -333,6 +335,16 @@ export default function ProgramOutcome() {
     fetchOrganizationId();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user.email]);
+  useEffect(() => {
+    const setYearValue = () => {
+      setFormState({
+        ...formState,
+        year: new Date(`1/1/${formState.currYear}`),
+      });
+    };
+    setYearValue();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formState.currYear]);
   useEffect(() => {
     const fetchOrganizationNameById = async () => {
       if (formState.orgId) {
@@ -972,6 +984,28 @@ export default function ProgramOutcome() {
         <a href="info@catalystkitchens.org">info@catalystkitchens.org</a>. All
         comments are welcome.
       </p>
+      <h4>Submission Year</h4>
+      <p>
+        While it is preferred to submit data for the current calendar year, this
+        section of the form allows you to select a different submission year if
+        needed.
+      </p>
+      <Box mb={2}>
+        <TextField
+          id="outlined-basic"
+          label="Year of Submission"
+          variant="outlined"
+          type="number"
+          value={formState.currYear}
+          fullWidth
+          onChange={(e) => {
+            setFormState({
+              ...formState,
+              currYear: Number(e.target.value),
+            });
+          }}
+        />
+      </Box>
       <h3>Organization Details</h3>
       <Box mb={2}>
         <h4>Share Survey</h4>
@@ -1079,8 +1113,8 @@ export default function ProgramOutcome() {
           <Box mb={2}>
             <h4>Youth: Trained</h4>
             Total # of youth who participated in foodservice job training
-            programming in {currYear} or during the most recent 12-month period
-            for which you have complete data. This is the{' '}
+            programming in {formState.currYear} or during the most recent
+            12-month period for which you have complete data. This is the{' '}
             <b>total number enrolled</b> in all your youth specific programs.
             <br />
             <br />
@@ -3097,11 +3131,11 @@ export default function ProgramOutcome() {
       {/* Other Fields */}
       <h4>Minimum Wage in Currnet Year</h4>
       <p>
-        What was your local minimum wage for most of {currYear}? If your city,
-        county, and/or state minimum wages are different, please list the one
-        that reflects where most of your graduates are placed in jobs. If your
-        local minimum wage has different tiers (i.e. by size of employer), list
-        the highest rate.
+        What was your local minimum wage for most of {formState.currYear}? If
+        your city, county, and/or state minimum wages are different, please list
+        the one that reflects where most of your graduates are placed in jobs.
+        If your local minimum wage has different tiers (i.e. by size of
+        employer), list the highest rate.
       </p>
       <Box mb={2}>
         <TextField
@@ -3189,7 +3223,7 @@ export default function ProgramOutcome() {
       <h4>Alumni Hired by Org</h4>
       <p>
         The number of alumni of your training programs that worked for your
-        organization in {currYear}? Approximate number is OK.
+        organization in {formState.currYear}? Approximate number is OK.
       </p>
       <p>
         This number should refer to hires, whether full time or part time, in
diff --git a/client/src/Visualizations/ProgramOutcomesViz.tsx b/client/src/Visualizations/ProgramOutcomesViz.tsx
index d47f20f2..530f0990 100644
--- a/client/src/Visualizations/ProgramOutcomesViz.tsx
+++ b/client/src/Visualizations/ProgramOutcomesViz.tsx
@@ -632,6 +632,7 @@ function AdultSummaryBox({
 const lineChartOptions: ChartOptions<'line'> = {
   responsive: true,
   maintainAspectRatio: false,
+  spanGaps: true,
   scales: {
     y: {
       beginAtZero: true,
@@ -2060,8 +2061,8 @@ function ProgramOutcomesVisualization() {
                     {
                       label: 'Initial Wage',
                       data: historicalData.wages.initial.orgValues,
-                      borderColor: chartColors.org,
-                      backgroundColor: chartColors.org,
+                      borderColor: chartColors.network,
+                      backgroundColor: chartColors.network,
                       pointStyle: 'circle',
                       pointRadius: 6,
                       tension: 0.1,