From c587b4f5d142acdbe9b8ee73cd0c881c273b6024 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 10:31:07 -0700
Subject: [PATCH 01/25] :cherry_blossom: Add press enter keyboard shortcut to
 move down to next field in SectionTable.vue

---
 .../SectionTable.vue                          | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
index 6c785f64..6ebccb36 100644
--- a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
+++ b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
@@ -40,9 +40,11 @@
       </td>
       <td>
         <v-text-field
+          ref="estimatesFields"
           v-model.number="line.estimatedChildOccupancyRate"
           density="compact"
           hide-details
+          @keydown.enter="goToLowerEstimatesField(lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -53,9 +55,11 @@
       </td>
       <td>
         <v-text-field
+          ref="actualsFields"
           v-model.number="line.actualChildOccupancyRate"
           density="compact"
           hide-details
+          @keydown.enter="goToLowerActualsField(lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -109,10 +113,13 @@
 </template>
 
 <script lang="ts" setup>
-import { FundingLineValue } from "@/api/funding-submission-line-jsons-api"
+import { computed, ref } from "vue"
+import { isNil } from "lodash"
+
 import { formatMoney } from "@/utils"
+import { FundingLineValue } from "@/api/funding-submission-line-jsons-api"
 
-defineProps<{
+const props = defineProps<{
   lines: FundingLineValue[]
 }>()
 
@@ -120,6 +127,9 @@ const emit = defineEmits<{
   lineChanged: [{ line: FundingLineValue; lineIndex: number }]
 }>()
 
+const estimatesFields = ref<HTMLInputElement[]>([])
+const actualsFields = ref<HTMLInputElement[]>([])
+
 function refreshLineTotals(line: FundingLineValue) {
   line.estimatedComputedTotal = line.monthlyAmount * line.estimatedChildOccupancyRate
   line.actualComputedTotal = line.monthlyAmount * line.actualChildOccupancyRate
@@ -133,6 +143,27 @@ function changeLineAndPropagate(line: FundingLineValue, lineIndex: number) {
   emit("lineChanged", { line, lineIndex })
 }
 
+// TODO: figure out why I can't pass the template refs directly to the function.
+// Why I can't pass a string, and then look up the template ref from a computed property,
+// and have to make a custom fuction instead, I have no idea.
+function goToLowerEstimatesField(lineIndex: number) {
+  goToLowerField(estimatesFields.value, lineIndex)
+}
+
+function goToLowerActualsField(lineIndex: number) {
+  goToLowerField(actualsFields.value, lineIndex)
+}
+
+function goToLowerField(fields: HTMLInputElement[], lineIndex: number) {
+  if (lineIndex < props.lines.length - 1) {
+    const nextIndex = lineIndex + 1
+    const nextField = fields[nextIndex]
+    if (isNil(nextField)) return
+
+    nextField.focus()
+  }
+}
+
 defineExpose({
   refreshLineTotals,
 })

From d8ed414503a8deb3353e05b37b144a96d2491578 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 10:33:20 -0700
Subject: [PATCH 02/25] :cherry_blossom: Add shift+enter to navigate to higher
 fields.

---
 .../SectionTable.vue                          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
index 6ebccb36..8a6e8588 100644
--- a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
+++ b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
@@ -45,6 +45,7 @@
           density="compact"
           hide-details
           @keydown.enter="goToLowerEstimatesField(lineIndex)"
+          @keydown.shift.enter="goToHigherEstimatesField(lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -60,6 +61,7 @@
           density="compact"
           hide-details
           @keydown.enter="goToLowerActualsField(lineIndex)"
+          @keydown.shift.enter="goToHigherActualsField(lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -154,6 +156,14 @@ function goToLowerActualsField(lineIndex: number) {
   goToLowerField(actualsFields.value, lineIndex)
 }
 
+function goToHigherEstimatesField(lineIndex: number) {
+  goToHigherField(estimatesFields.value, lineIndex)
+}
+
+function goToHigherActualsField(lineIndex: number) {
+  goToHigherField(actualsFields.value, lineIndex)
+}
+
 function goToLowerField(fields: HTMLInputElement[], lineIndex: number) {
   if (lineIndex < props.lines.length - 1) {
     const nextIndex = lineIndex + 1
@@ -164,6 +174,16 @@ function goToLowerField(fields: HTMLInputElement[], lineIndex: number) {
   }
 }
 
+function goToHigherField(fields: HTMLInputElement[], lineIndex: number) {
+  if (lineIndex > 0) {
+    const previousIndex = lineIndex - 1
+    const previousField = fields[previousIndex]
+    if (isNil(previousField)) return
+
+    previousField.focus()
+  }
+}
+
 defineExpose({
   refreshLineTotals,
 })

From be258e3bef365d64f4a4163f4c6e49f4056e332d Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 10:44:15 -0700
Subject: [PATCH 03/25] :recycle: Use cleaner implementation for navigating
 between fields.

---
 .../SectionTable.vue                          | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
index 8a6e8588..80d05593 100644
--- a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
+++ b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
@@ -44,8 +44,8 @@
           v-model.number="line.estimatedChildOccupancyRate"
           density="compact"
           hide-details
-          @keydown.enter="goToLowerEstimatesField(lineIndex)"
-          @keydown.shift.enter="goToHigherEstimatesField(lineIndex)"
+          @keydown.enter="goToLowerField('estimatesFields', lineIndex)"
+          @keydown.shift.enter="goToHigherField('estimatesFields', lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -60,8 +60,8 @@
           v-model.number="line.actualChildOccupancyRate"
           density="compact"
           hide-details
-          @keydown.enter="goToLowerActualsField(lineIndex)"
-          @keydown.shift.enter="goToHigherActualsField(lineIndex)"
+          @keydown.enter="goToLowerField('actualsFields', lineIndex)"
+          @keydown.shift.enter="goToHigherField('actualsFields', lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue"
+import { reactive, ref } from "vue"
 import { isNil } from "lodash"
 
 import { formatMoney } from "@/utils"
@@ -129,8 +129,14 @@ const emit = defineEmits<{
   lineChanged: [{ line: FundingLineValue; lineIndex: number }]
 }>()
 
+type FieldsNames = "estimatesFields" | "actualsFields"
+
 const estimatesFields = ref<HTMLInputElement[]>([])
 const actualsFields = ref<HTMLInputElement[]>([])
+const fieldsMap = reactive({
+  estimatesFields,
+  actualsFields,
+})
 
 function refreshLineTotals(line: FundingLineValue) {
   line.estimatedComputedTotal = line.monthlyAmount * line.estimatedChildOccupancyRate
@@ -145,26 +151,9 @@ function changeLineAndPropagate(line: FundingLineValue, lineIndex: number) {
   emit("lineChanged", { line, lineIndex })
 }
 
-// TODO: figure out why I can't pass the template refs directly to the function.
-// Why I can't pass a string, and then look up the template ref from a computed property,
-// and have to make a custom fuction instead, I have no idea.
-function goToLowerEstimatesField(lineIndex: number) {
-  goToLowerField(estimatesFields.value, lineIndex)
-}
-
-function goToLowerActualsField(lineIndex: number) {
-  goToLowerField(actualsFields.value, lineIndex)
-}
-
-function goToHigherEstimatesField(lineIndex: number) {
-  goToHigherField(estimatesFields.value, lineIndex)
-}
+function goToLowerField(fieldsName: FieldsNames, lineIndex: number) {
+  const fields = fieldsMap[fieldsName]
 
-function goToHigherActualsField(lineIndex: number) {
-  goToHigherField(actualsFields.value, lineIndex)
-}
-
-function goToLowerField(fields: HTMLInputElement[], lineIndex: number) {
   if (lineIndex < props.lines.length - 1) {
     const nextIndex = lineIndex + 1
     const nextField = fields[nextIndex]
@@ -174,7 +163,9 @@ function goToLowerField(fields: HTMLInputElement[], lineIndex: number) {
   }
 }
 
-function goToHigherField(fields: HTMLInputElement[], lineIndex: number) {
+function goToHigherField(fieldsName: FieldsNames, lineIndex: number) {
+  const fields = fieldsMap[fieldsName]
+
   if (lineIndex > 0) {
     const previousIndex = lineIndex - 1
     const previousField = fields[previousIndex]

From fcf8a1193da057e24c5a2d9d3c6b481f2e620ddb Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 11:01:27 -0700
Subject: [PATCH 04/25] :hammer: Fix front-end linting.

I'm not sure why this works. I copied this from https://github.com/icefoganalytics/wrap
and seems to make VSCode happy.
---
 web/{eslint.config.js => .eslintrc.cjs} | 12 ++++++++++--
 web/tsconfig.json                       |  9 ++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)
 rename web/{eslint.config.js => .eslintrc.cjs} (78%)

diff --git a/web/eslint.config.js b/web/.eslintrc.cjs
similarity index 78%
rename from web/eslint.config.js
rename to web/.eslintrc.cjs
index 4342b325..959f3700 100644
--- a/web/eslint.config.js
+++ b/web/.eslintrc.cjs
@@ -1,5 +1,5 @@
 // https://github.com/typescript-eslint/typescript-eslint/issues/251
-export default {
+module.exports = {
   root: true,
   env: {
     browser: true,
@@ -23,5 +23,13 @@ export default {
     sourceType: "module",
   },
   plugins: ["vue", "@typescript-eslint"],
-  rules: {},
+  rules: {
+    // Override/add rules' settings here
+    "vue/valid-v-slot": [
+      "error",
+      {
+        allowModifiers: true,
+      },
+    ],
+  },
 }
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 95ae9033..d90d25ba 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -18,6 +18,13 @@
       "@models": ["../api/src/data/models"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.js"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/**/*.js",
+    ".eslintrc.cjs"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

From e5f1cfebcd6c67002888e7ec147ea6e5029d6f6f Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 11:18:53 -0700
Subject: [PATCH 05/25] :bug: Fix some type modeling in funding submission line
 jsons api.

What? The FundingSubmissionLineJson model has a "virtual" field for "lines".
---
 web/src/api/funding-submission-line-jsons-api.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/web/src/api/funding-submission-line-jsons-api.ts b/web/src/api/funding-submission-line-jsons-api.ts
index 7d90b5c1..269196fe 100644
--- a/web/src/api/funding-submission-line-jsons-api.ts
+++ b/web/src/api/funding-submission-line-jsons-api.ts
@@ -21,15 +21,13 @@ export type FundingSubmissionLineJson = {
   values: string
   createdAt: string
   updatedAt: string
-}
 
-export type FundingSubmissionLineJsonAsDetailed = Omit<FundingSubmissionLineJson, "values"> & {
+  // Virtual Attributes
   lines: FundingLineValue[]
 }
 
-export type FundingSubmissionLineJsonAsIndex = Omit<FundingSubmissionLineJson, "values"> & {
-  lines: FundingLineValue[]
-}
+export type FundingSubmissionLineJsonAsIndex = Omit<FundingSubmissionLineJson, "values">
+export type FundingSubmissionLineJsonAsDetailed = Omit<FundingSubmissionLineJson, "values">
 
 export type FundingSubmissionLineJsonWhereOptions = {
   centreId?: number
@@ -74,7 +72,7 @@ export const fundingSubmissionLineJsonsApi = {
   },
   async update(
     fundingSubmissionLineJsonId: number,
-    attributes: any
+    attributes: Partial<FundingSubmissionLineJson>
   ): Promise<{ fundingSubmissionLineJson: FundingSubmissionLineJsonAsDetailed }> {
     const { data } = await http.patch(
       `/api/funding-submission-line-jsons/${fundingSubmissionLineJsonId}`,

From ace290e235e13a4bcaf8089ddb055dbbb80b9c44 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 11:22:07 -0700
Subject: [PATCH 06/25] :recycle: Split out FundingSubmissionLineJsonEditSheet
 from CentreDashboardWorksheetsMonthlyWorksheetPage.

---
 .../FundingSubmissionLineJsonEditSheet.vue    | 143 ++++++++++++++++++
 ...ashboardWorksheetsMonthlyWorksheetPage.vue | 126 ++-------------
 .../use/use-funding-submission-line-json.ts   |  59 ++++++++
 3 files changed, 212 insertions(+), 116 deletions(-)
 create mode 100644 web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
 create mode 100644 web/src/use/use-funding-submission-line-json.ts

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
new file mode 100644
index 00000000..991935bd
--- /dev/null
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-skeleton-loader
+    v-if="isLoading"
+    type="table"
+  />
+  <v-sheet v-else>
+    <v-btn
+      color="primary"
+      class="float-right"
+      :loading="isSaving"
+      @click="saveFundingSubmissionLineJson"
+      >Save</v-btn
+    >
+
+    <h2 class="mb-3">{{ dateName }} {{ calendarYear }}</h2>
+    <v-btn
+      v-if="dateName == FIRST_FISCAL_MONTH_NAME"
+      :loading="isReplicatingEstimates"
+      color="yg_sun"
+      class="float-right mb-3"
+      size="small"
+      @click="replicateEstimatesForward"
+    >
+      <v-icon>mdi-content-copy</v-icon> Replicate Estimates
+    </v-btn>
+
+    <div
+      v-for="({ sectionName, lines }, sectionIndex) in sections"
+      :key="`${sectionName}-${sectionIndex}`"
+      style="clear: both"
+    >
+      <h4>{{ sectionName }}</h4>
+
+      <SectionTable
+        ref="sectionTables"
+        :lines="lines"
+        @line-changed="propagateUpdatesAsNeeded(sectionIndex, $event)"
+      />
+    </div>
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+import { DateTime } from "luxon"
+import { computed, ref, toRefs } from "vue"
+import { groupBy, isEmpty, isNil } from "lodash"
+
+import fundingSubmissionLineJsonsApi, {
+  type FundingLineValue,
+} from "@/api/funding-submission-line-jsons-api"
+import { useNotificationStore } from "@/store/NotificationStore"
+import useFundingSubmissionLineJson from "@/use/use-funding-submission-line-json"
+
+import SectionTable from "@/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue"
+
+const FIRST_FISCAL_MONTH_NAME = "April"
+const notificationStore = useNotificationStore()
+
+const props = defineProps<{
+  fundingSubmissionLineJsonId: number
+}>()
+
+const { fundingSubmissionLineJsonId } = toRefs(props)
+const { fundingSubmissionLineJson, isLoading } = useFundingSubmissionLineJson(
+  fundingSubmissionLineJsonId
+)
+
+const isSaving = ref(false)
+const isReplicatingEstimates = ref(false)
+const dateName = computed(() => fundingSubmissionLineJson.value?.dateName)
+const calendarYear = computed(() => {
+  if (isNil(fundingSubmissionLineJson.value)) {
+    return "..."
+  }
+
+  const { dateStart } = fundingSubmissionLineJson.value
+  return DateTime.fromISO(dateStart).toFormat("yyyy")
+})
+
+const sections = computed<{ sectionName: string; lines: FundingLineValue[] }[]>(() => {
+  if (isEmpty(fundingSubmissionLineJson.value)) {
+    return []
+  }
+
+  const lines = fundingSubmissionLineJson.value.lines
+  const sectionGroups = groupBy(lines, "sectionName")
+  return Object.entries(sectionGroups).map(([sectionName, lines]) => {
+    return { sectionName, lines }
+  })
+})
+const sectionTables = ref<InstanceType<typeof SectionTable>[]>([])
+
+async function saveFundingSubmissionLineJson() {
+  isSaving.value = true
+  try {
+    const lines = sections.value.flatMap((section) => section.lines)
+    await fundingSubmissionLineJsonsApi.update(fundingSubmissionLineJsonId.value, { lines })
+  } catch (error) {
+    console.error(error)
+    notificationStore.notify({
+      text: `Failed to save worksheet: ${error}`,
+      variant: "error",
+    })
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function replicateEstimatesForward() {
+  isReplicatingEstimates.value = true
+  try {
+    await saveFundingSubmissionLineJson()
+    await fundingSubmissionLineJsonsApi.replicateEstimates(fundingSubmissionLineJsonId.value)
+  } catch (error) {
+    notificationStore.notify({
+      text: `Failed to replicate estimates: ${error}`,
+      variant: "error",
+    })
+  } finally {
+    isReplicatingEstimates.value = false
+  }
+}
+
+function propagateUpdatesAsNeeded(
+  sectionIndex: number,
+  { line, lineIndex }: { line: FundingLineValue; lineIndex: number }
+) {
+  // Bind section 1 to sections 2 and 3
+  // When you update the values in section 1, it will propagated the values to section 2 and 3
+  if (sectionIndex === 0) {
+    const section1Line = sections.value[1].lines[lineIndex]
+    section1Line.estimatedChildOccupancyRate = line.estimatedChildOccupancyRate
+    section1Line.actualChildOccupancyRate = line.actualChildOccupancyRate
+
+    sectionTables.value[1].refreshLineTotals(section1Line)
+
+    const section2Line = sections.value[2].lines[lineIndex]
+    section2Line.estimatedChildOccupancyRate = line.estimatedChildOccupancyRate
+    section2Line.actualChildOccupancyRate = line.actualChildOccupancyRate
+    sectionTables.value[2].refreshLineTotals(section2Line)
+  }
+}
+</script>
diff --git a/web/src/modules/centre/pages/CentreDashboardWorksheetsMonthlyWorksheetPage.vue b/web/src/modules/centre/pages/CentreDashboardWorksheetsMonthlyWorksheetPage.vue
index ade91273..36e9be32 100644
--- a/web/src/modules/centre/pages/CentreDashboardWorksheetsMonthlyWorksheetPage.vue
+++ b/web/src/modules/centre/pages/CentreDashboardWorksheetsMonthlyWorksheetPage.vue
@@ -14,66 +14,28 @@
       color="primary"
       size="small"
       class="mt-3"
+      :loading="isInitializing"
       @click="initializeWorksheetsForFiscalYear"
       >Add worksheets for {{ fiscalYear }}</v-btn
     >
   </div>
-  <div
+  <FundingSubmissionLineJsonEditSheet
     v-else
+    :funding-submission-line-json-id="fundingSubmissionLineJsonId"
     class="ma-4"
-  >
-    <v-btn
-      color="primary"
-      class="float-right"
-      @click="saveFundingSubmissionLineJson"
-      :loading="isSaving"
-      >Save</v-btn
-    >
-
-    <h2 class="mb-3">{{ dateName }} {{ calendarYear }}</h2>
-    <v-btn
-      v-if="dateName == FIRST_FISCAL_MONTH_NAME"
-      :loading="isReplicatingEstimates"
-      color="yg_sun"
-      class="float-right mb-3"
-      size="small"
-      @click="replicateEstimatesForward"
-    >
-      <v-icon>mdi-content-copy</v-icon> Replicate Estimates
-    </v-btn>
-
-    <div
-      v-for="({ sectionName, lines }, sectionIndex) in sections"
-      :key="`${sectionName}-${sectionIndex}`"
-      style="clear: both"
-    >
-      <h4>{{ sectionName }}</h4>
-
-      <SectionTable
-        ref="sectionTables"
-        :lines="lines"
-        @line-changed="propagateUpdatesAsNeeded(sectionIndex, $event)"
-      />
-    </div>
-  </div>
+  />
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from "vue"
-import { groupBy, isEmpty, upperFirst } from "lodash"
-import { DateTime } from "luxon"
+import { isEmpty, upperFirst } from "lodash"
 
 import centresApi from "@/api/centres-api"
 import { FiscalPeriodMonths } from "@/api/fiscal-periods-api"
-import fundingSubmissionLineJsonsApi from "@/api/funding-submission-line-jsons-api"
 import { useNotificationStore } from "@/store/NotificationStore"
-import useFundingSubmissionLineJsons, {
-  type FundingLineValue,
-} from "@/use/use-funding-submission-line-jsons"
-
-import SectionTable from "@/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue"
+import useFundingSubmissionLineJsons from "@/use/use-funding-submission-line-jsons"
 
-const FIRST_FISCAL_MONTH_NAME = "April"
+import FundingSubmissionLineJsonEditSheet from "@/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue"
 
 const notificationStore = useNotificationStore()
 
@@ -101,28 +63,11 @@ const {
 
 const fundingSubmissionLineJson = computed(() => fundingSubmissionLineJsons.value[0])
 const fundingSubmissionLineJsonId = computed(() => fundingSubmissionLineJson.value?.id)
-const dateName = computed(() => fundingSubmissionLineJson.value?.dateName)
 
-const isSaving = ref(false)
-const isReplicatingEstimates = ref(false)
-const calendarYear = computed(() =>
-  DateTime.fromISO(fundingSubmissionLineJson.value?.dateStart).toFormat("yyyy")
-)
-const sections = computed<{ sectionName: string; lines: FundingLineValue[] }[]>(() => {
-  if (isEmpty(fundingSubmissionLineJson.value)) {
-    return []
-  }
-
-  const lines = fundingSubmissionLineJson.value.lines
-  const sectionGroups = groupBy(lines, "sectionName")
-  return Object.entries(sectionGroups).map(([sectionName, lines]) => {
-    return { sectionName, lines }
-  })
-})
-const sectionTables = ref<InstanceType<typeof SectionTable>[]>([])
+const isInitializing = ref(false)
 
 async function initializeWorksheetsForFiscalYear() {
-  isSaving.value = true
+  isInitializing.value = true
   try {
     await centresApi.fiscalYear.create(props.centreId, fiscalYear.value)
     notificationStore.notify({
@@ -131,58 +76,7 @@ async function initializeWorksheetsForFiscalYear() {
     })
     await refreshFundingSubmissionLineJsons()
   } finally {
-    isSaving.value = false
-  }
-}
-
-async function saveFundingSubmissionLineJson() {
-  isSaving.value = true
-  try {
-    const lines = sections.value.flatMap((section) => section.lines)
-    await fundingSubmissionLineJsonsApi.update(fundingSubmissionLineJsonId.value, { lines })
-  } catch (error) {
-    console.error(error)
-    notificationStore.notify({
-      text: `Failed to save worksheet: ${error}`,
-      variant: "error",
-    })
-  } finally {
-    isSaving.value = false
-  }
-}
-
-async function replicateEstimatesForward() {
-  isReplicatingEstimates.value = true
-  try {
-    await saveFundingSubmissionLineJson()
-    await fundingSubmissionLineJsonsApi.replicateEstimates(fundingSubmissionLineJsonId.value)
-  } catch (error) {
-    notificationStore.notify({
-      text: `Failed to replicate estimates: ${error}`,
-      variant: "error",
-    })
-  } finally {
-    isReplicatingEstimates.value = false
-  }
-}
-
-function propagateUpdatesAsNeeded(
-  sectionIndex: number,
-  { line, lineIndex }: { line: FundingLineValue; lineIndex: number }
-) {
-  // Bind section 1 to sections 2 and 3
-  // When you update the values in section 1, it will propagated the values to section 2 and 3
-  if (sectionIndex === 0) {
-    const section1Line = sections.value[1].lines[lineIndex]
-    section1Line.estimatedChildOccupancyRate = line.estimatedChildOccupancyRate
-    section1Line.actualChildOccupancyRate = line.actualChildOccupancyRate
-
-    sectionTables.value[1].refreshLineTotals(section1Line)
-
-    const section2Line = sections.value[2].lines[lineIndex]
-    section2Line.estimatedChildOccupancyRate = line.estimatedChildOccupancyRate
-    section2Line.actualChildOccupancyRate = line.actualChildOccupancyRate
-    sectionTables.value[2].refreshLineTotals(section2Line)
+    isInitializing.value = false
   }
 }
 </script>
diff --git a/web/src/use/use-funding-submission-line-json.ts b/web/src/use/use-funding-submission-line-json.ts
new file mode 100644
index 00000000..d07b6847
--- /dev/null
+++ b/web/src/use/use-funding-submission-line-json.ts
@@ -0,0 +1,59 @@
+import { type Ref, reactive, toRefs, unref, watch } from "vue"
+import { isNil } from "lodash"
+
+import fundingSubmissionLineJsonsApi, {
+  type FundingSubmissionLineJsonAsDetailed,
+} from "@/api/funding-submission-line-jsons-api"
+
+export { type FundingSubmissionLineJsonAsDetailed }
+
+export function useFundingSubmissionLineJsonAsDetailed(id: Ref<number | null | undefined>) {
+  const state = reactive<{
+    fundingSubmissionLineJson: FundingSubmissionLineJsonAsDetailed | null
+    isLoading: boolean
+    isErrored: boolean
+  }>({
+    fundingSubmissionLineJson: null,
+    isLoading: false,
+    isErrored: false,
+  })
+
+  async function fetch(): Promise<FundingSubmissionLineJsonAsDetailed> {
+    const staticId = unref(id)
+    if (isNil(staticId)) {
+      throw new Error("id is required")
+    }
+
+    state.isLoading = true
+    try {
+      const { fundingSubmissionLineJson } = await fundingSubmissionLineJsonsApi.get(staticId)
+      state.isErrored = false
+      state.fundingSubmissionLineJson = fundingSubmissionLineJson
+      return fundingSubmissionLineJson
+    } catch (error) {
+      console.error("Failed to fetch funding submission line json:", error)
+      state.isErrored = true
+      throw error
+    } finally {
+      state.isLoading = false
+    }
+  }
+
+  watch(
+    () => unref(id),
+    async (newId) => {
+      if (isNil(newId)) return
+
+      await fetch()
+    },
+    { immediate: true }
+  )
+
+  return {
+    ...toRefs(state),
+    fetch,
+    refresh: fetch,
+  }
+}
+
+export default useFundingSubmissionLineJsonAsDetailed

From 8fcb529a8aff4a73456ab107c9d7e78ccce064e3 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 11:28:10 -0700
Subject: [PATCH 07/25] :truck: Standardize location of MonthlyWorksheetPage
 component.

Pattern is pages/url/segment/ComponentName.vue

e.g.
/child-care-centres/1/2024-25/worksheets/may
->
pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue

Note:
/child-care-centres/1/2024-25/worksheets/may
should probably be
/child-care-centres/some-center-slug/fiscal-years/2024-25/worksheets/may
---
 .../modules/centre/pages/CentreDashboardWorksheetsPage.vue    | 4 ++--
 web/src/modules/centre/routes.ts                              | 4 ++--
 .../fiscal-years/worksheets/MonthlyWorksheetPage.vue}         | 0
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename web/src/{modules/centre/pages/CentreDashboardWorksheetsMonthlyWorksheetPage.vue => pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue} (100%)

diff --git a/web/src/modules/centre/pages/CentreDashboardWorksheetsPage.vue b/web/src/modules/centre/pages/CentreDashboardWorksheetsPage.vue
index b78187a7..21989ce2 100644
--- a/web/src/modules/centre/pages/CentreDashboardWorksheetsPage.vue
+++ b/web/src/modules/centre/pages/CentreDashboardWorksheetsPage.vue
@@ -15,7 +15,7 @@
           v-for="{ id, month } in fiscalPeriods"
           :key="id"
           :to="{
-            name: 'CentreDashboardWorksheetsMonthlyWorksheetPage',
+            name: 'child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage',
             params: {
               centreId,
               fiscalYearSlug,
@@ -67,7 +67,7 @@ watchEffect(async () => {
   }
 
   await router.push({
-    name: "CentreDashboardWorksheetsMonthlyWorksheetPage",
+    name: "child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage",
     params: {
       centreId: props.centreId,
       fiscalYearSlug: props.fiscalYearSlug,
diff --git a/web/src/modules/centre/routes.ts b/web/src/modules/centre/routes.ts
index 5dcc3982..49ff5b94 100644
--- a/web/src/modules/centre/routes.ts
+++ b/web/src/modules/centre/routes.ts
@@ -84,10 +84,10 @@ const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: ":month",
-                name: "CentreDashboardWorksheetsMonthlyWorksheetPage",
+                name: "child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage",
                 component: () =>
                   import(
-                    "@/modules/centre/pages/CentreDashboardWorksheetsMonthlyWorksheetPage.vue"
+                    "@/pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue"
                   ),
                 props: (route) => ({
                   centreId: parseInt(route.params.centreId as string),
diff --git a/web/src/modules/centre/pages/CentreDashboardWorksheetsMonthlyWorksheetPage.vue b/web/src/pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue
similarity index 100%
rename from web/src/modules/centre/pages/CentreDashboardWorksheetsMonthlyWorksheetPage.vue
rename to web/src/pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue

From a655e54e16be1da18e8a18b42e43dd6eb08872bc Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 11:43:17 -0700
Subject: [PATCH 08/25] :pencil: Add pages readme, to describe a new convention
 for pages.

---
 web/src/pages/README.md | 60 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 web/src/pages/README.md

diff --git a/web/src/pages/README.md b/web/src/pages/README.md
new file mode 100644
index 00000000..8603d318
--- /dev/null
+++ b/web/src/pages/README.md
@@ -0,0 +1,60 @@
+# Pages
+
+Any component that is directly routeable is considered a page.
+Pages are to be placed in the `pages` directory with a patch matching their URL.
+The name of the page component should end in `Page`.
+
+The current naming conventions for pages is pretty random, but over time it will hopefully become more consistent and similar to this example.
+
+## Constraints
+
+1. It should take minimal effort to figure out where to add a new page component, and what to call if for a given user-centric URL.
+2. It should be easy to add page variations. e.g. edit vs. non-edit
+3. Route names must be unique.
+4. It should be easy to find a component given the vue-router route name.
+5. It should be easy to find the page component for a given URL.
+
+## Directory Structure
+
+For example
+
+```bash
+src/
+├── pages/
+│   ├── child-care-centres/
+│   │   ├── CentreDashboardPage.vue
+│   │   ├── worksheets/
+│   │   │   ├── MonthlyWorksheetsPage.vue
+│   │   │   ├── MonthlyWorksheetPage.vue
+```
+
+## Routes
+
+For example
+
+```ts
+const routes = [
+  {
+    path: "/child-care-centres/:centreSlug/:fiscalYearSlug?",
+    name: "child-care-centres/CentreDashboardPage",
+    component: () => import("@/pages/child-care-centres/CentreDashboardPage.vue"),
+    props: true,
+    children: [
+      {
+        path: "worksheets",
+        name: "child-care-centres/worksheets/MonthlyWorksheetsPage",
+        component: () => import("@/pages/child-care-centres/worksheets/MonthlyWorksheetsPage.vue"),
+        children: [
+          {
+            path: ":month",
+            name: "child-care-centres/worksheets/MonthlyWorksheetPage",
+            component: () =>
+              import("@/pages/child-care-centres/worksheets/MonthlyWorksheetPage.vue"),
+            props: true,
+          },
+        ],
+      },
+    ],
+  },
+]
+```

From c95f63e9b1469bb1b4e8cae8b9929460e16e760d Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 11:43:39 -0700
Subject: [PATCH 09/25] :truck: Standardize the location and route name for the
 monthly worksheet page.

Why? To make it easier to find page components.
---
 .../modules/centre/pages/CentreDashboardWorksheetsPage.vue  | 4 ++--
 web/src/modules/centre/routes.ts                            | 6 ++----
 .../{fiscal-years => }/worksheets/MonthlyWorksheetPage.vue  | 0
 3 files changed, 4 insertions(+), 6 deletions(-)
 rename web/src/pages/child-care-centres/{fiscal-years => }/worksheets/MonthlyWorksheetPage.vue (100%)

diff --git a/web/src/modules/centre/pages/CentreDashboardWorksheetsPage.vue b/web/src/modules/centre/pages/CentreDashboardWorksheetsPage.vue
index 21989ce2..74406e26 100644
--- a/web/src/modules/centre/pages/CentreDashboardWorksheetsPage.vue
+++ b/web/src/modules/centre/pages/CentreDashboardWorksheetsPage.vue
@@ -15,7 +15,7 @@
           v-for="{ id, month } in fiscalPeriods"
           :key="id"
           :to="{
-            name: 'child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage',
+            name: 'child-care-centres/worksheets/MonthlyWorksheetPage',
             params: {
               centreId,
               fiscalYearSlug,
@@ -67,7 +67,7 @@ watchEffect(async () => {
   }
 
   await router.push({
-    name: "child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage",
+    name: "child-care-centres/worksheets/MonthlyWorksheetPage",
     params: {
       centreId: props.centreId,
       fiscalYearSlug: props.fiscalYearSlug,
diff --git a/web/src/modules/centre/routes.ts b/web/src/modules/centre/routes.ts
index 49ff5b94..bffdf835 100644
--- a/web/src/modules/centre/routes.ts
+++ b/web/src/modules/centre/routes.ts
@@ -84,11 +84,9 @@ const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: ":month",
-                name: "child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage",
+                name: "child-care-centres/worksheets/MonthlyWorksheetPage",
                 component: () =>
-                  import(
-                    "@/pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue"
-                  ),
+                  import("@/pages/child-care-centres/worksheets/MonthlyWorksheetPage.vue"),
                 props: (route) => ({
                   centreId: parseInt(route.params.centreId as string),
                   fiscalYearSlug: route.params.fiscalYearSlug,
diff --git a/web/src/pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue b/web/src/pages/child-care-centres/worksheets/MonthlyWorksheetPage.vue
similarity index 100%
rename from web/src/pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue
rename to web/src/pages/child-care-centres/worksheets/MonthlyWorksheetPage.vue

From 79297baad6889b55e5b4e3600518972af0e44be2 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 11:45:22 -0700
Subject: [PATCH 10/25] :art: Add key to v-for loop in SectionTable.vue

My linter now tells me about this kind of stuff :tada:!
---
 .../SectionTable.vue                                             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
index 80d05593..e5a6c08f 100644
--- a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
+++ b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
@@ -30,6 +30,7 @@
     </tr>
     <tr
       v-for="(line, lineIndex) in lines"
+      :key="`${line.lineName}-${lineIndex}`"
       class="monospace"
     >
       <td>{{ line.lineName }}</td>

From 55cbbc0e4c043ba197509932240b64c90d581ce9 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 13:26:00 -0700
Subject: [PATCH 11/25] :recycle: Basic go to next and previous section.

---
 .../FundingSubmissionLineJsonEditSheet.vue    | 26 ++++++++-
 .../SectionTable.vue                          | 54 ++++++++++++++-----
 2 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
index 991935bd..14f4a91e 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
@@ -34,6 +34,8 @@
       <SectionTable
         ref="sectionTables"
         :lines="lines"
+        @focus-on-next-in-column="goToNextSection(sectionIndex, $event)"
+        @focus-on-previous-in-column="goToPreviousSection(sectionIndex, $event)"
         @line-changed="propagateUpdatesAsNeeded(sectionIndex, $event)"
       />
     </div>
@@ -51,7 +53,9 @@ import fundingSubmissionLineJsonsApi, {
 import { useNotificationStore } from "@/store/NotificationStore"
 import useFundingSubmissionLineJson from "@/use/use-funding-submission-line-json"
 
-import SectionTable from "@/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue"
+import SectionTable, {
+  ColumnNames,
+} from "@/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue"
 
 const FIRST_FISCAL_MONTH_NAME = "April"
 const notificationStore = useNotificationStore()
@@ -140,4 +144,24 @@ function propagateUpdatesAsNeeded(
     sectionTables.value[2].refreshLineTotals(section2Line)
   }
 }
+
+function goToNextSection(sectionIndex: number, columnName: ColumnNames) {
+  if (sectionIndex < sections.value.length - 1) {
+    const nextIndex = sectionIndex + 1
+    const nextSection = sectionTables.value[nextIndex]
+    if (isNil(nextSection)) return
+
+    nextSection.focusOnFirstInColumn(columnName)
+  }
+}
+
+function goToPreviousSection(sectionIndex: number, columnName: ColumnNames) {
+  if (sectionIndex > 0) {
+    const previousIndex = sectionIndex - 1
+    const previousSection = sectionTables.value[previousIndex]
+    if (isNil(previousSection)) return
+
+    previousSection.focusOnLastInColumn(columnName)
+  }
+}
 </script>
diff --git a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
index e5a6c08f..a5ed4c26 100644
--- a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
+++ b/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
@@ -45,8 +45,8 @@
           v-model.number="line.estimatedChildOccupancyRate"
           density="compact"
           hide-details
-          @keydown.enter="goToLowerField('estimatesFields', lineIndex)"
-          @keydown.shift.enter="goToHigherField('estimatesFields', lineIndex)"
+          @keydown.enter="focusOnNextInColumn('estimates', lineIndex)"
+          @keydown.shift.enter="focusOnPreviousInColumn('estimates', lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -61,8 +61,8 @@
           v-model.number="line.actualChildOccupancyRate"
           density="compact"
           hide-details
-          @keydown.enter="goToLowerField('actualsFields', lineIndex)"
-          @keydown.shift.enter="goToHigherField('actualsFields', lineIndex)"
+          @keydown.enter="focusOnNextInColumn('actuals', lineIndex)"
+          @keydown.shift.enter="focusOnPreviousInColumn('actuals', lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -116,27 +116,31 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from "vue"
+import { reactive, Ref, ref } from "vue"
 import { isNil } from "lodash"
 
 import { formatMoney } from "@/utils"
 import { FundingLineValue } from "@/api/funding-submission-line-jsons-api"
 
+export type ColumnNames = "estimates" | "actuals"
+
 const props = defineProps<{
   lines: FundingLineValue[]
 }>()
 
 const emit = defineEmits<{
   lineChanged: [{ line: FundingLineValue; lineIndex: number }]
+  focusOnNextInColumn: [column: ColumnNames]
+  focusOnPreviousInColumn: [column: ColumnNames]
 }>()
 
-type FieldsNames = "estimatesFields" | "actualsFields"
-
 const estimatesFields = ref<HTMLInputElement[]>([])
 const actualsFields = ref<HTMLInputElement[]>([])
-const fieldsMap = reactive({
-  estimatesFields,
-  actualsFields,
+const fieldsMap = reactive<{
+  [key in ColumnNames]: Ref<HTMLInputElement[]>
+}>({
+  estimates: estimatesFields,
+  actuals: actualsFields,
 })
 
 function refreshLineTotals(line: FundingLineValue) {
@@ -152,8 +156,8 @@ function changeLineAndPropagate(line: FundingLineValue, lineIndex: number) {
   emit("lineChanged", { line, lineIndex })
 }
 
-function goToLowerField(fieldsName: FieldsNames, lineIndex: number) {
-  const fields = fieldsMap[fieldsName]
+function focusOnNextInColumn(columnName: ColumnNames, lineIndex: number) {
+  const fields = fieldsMap[columnName]
 
   if (lineIndex < props.lines.length - 1) {
     const nextIndex = lineIndex + 1
@@ -161,11 +165,13 @@ function goToLowerField(fieldsName: FieldsNames, lineIndex: number) {
     if (isNil(nextField)) return
 
     nextField.focus()
+  } else {
+    emit("focusOnNextInColumn", columnName)
   }
 }
 
-function goToHigherField(fieldsName: FieldsNames, lineIndex: number) {
-  const fields = fieldsMap[fieldsName]
+function focusOnPreviousInColumn(columnName: ColumnNames, lineIndex: number) {
+  const fields = fieldsMap[columnName]
 
   if (lineIndex > 0) {
     const previousIndex = lineIndex - 1
@@ -173,11 +179,31 @@ function goToHigherField(fieldsName: FieldsNames, lineIndex: number) {
     if (isNil(previousField)) return
 
     previousField.focus()
+  } else {
+    emit("focusOnPreviousInColumn", columnName)
   }
 }
 
+function focusOnFirstInColumn(columnName: ColumnNames) {
+  const fields = fieldsMap[columnName]
+  const field = fields[0]
+  if (isNil(field)) return
+
+  field.focus()
+}
+
+function focusOnLastInColumn(columnName: ColumnNames) {
+  const fields = fieldsMap[columnName]
+  const field = fields[fields.length - 1]
+  if (isNil(field)) return
+
+  field.focus()
+}
+
 defineExpose({
   refreshLineTotals,
+  focusOnFirstInColumn,
+  focusOnLastInColumn,
 })
 </script>
 

From 80500597aec6514ac47322e26cef178700f56112 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 13:18:07 -0700
Subject: [PATCH 12/25] :truck: Simplify location of funding submission line
 json component.

Move component to a model based location for easier re-use.
---
 .../FundingSubmissionLineJsonEditSheet.vue                    | 4 ++--
 .../FundingSubmissionLineJsonSectionTable.vue}                | 0
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename web/src/{modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue => components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue} (100%)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
index 14f4a91e..6a17c145 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
@@ -54,8 +54,8 @@ import { useNotificationStore } from "@/store/NotificationStore"
 import useFundingSubmissionLineJson from "@/use/use-funding-submission-line-json"
 
 import SectionTable, {
-  ColumnNames,
-} from "@/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue"
+  type ColumnNames,
+} from "@/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue"
 
 const FIRST_FISCAL_MONTH_NAME = "April"
 const notificationStore = useNotificationStore()
diff --git a/web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
similarity index 100%
rename from web/src/modules/centre/components/centre-dashboard-worksheets-tab-monthly-worksheet-tab/SectionTable.vue
rename to web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue

From e014e5f942d48cfa3067866e40f301e41bcdf2ee Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 13:27:41 -0700
Subject: [PATCH 13/25] :japanese_castle: Merge event checks so you don't
 bounce at the top and bottom.

---
 .../FundingSubmissionLineJsonSectionTable.vue      | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
index a5ed4c26..d6438007 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
@@ -45,8 +45,7 @@
           v-model.number="line.estimatedChildOccupancyRate"
           density="compact"
           hide-details
-          @keydown.enter="focusOnNextInColumn('estimates', lineIndex)"
-          @keydown.shift.enter="focusOnPreviousInColumn('estimates', lineIndex)"
+          @keydown="changeFocusInColumn($event, 'estimates', lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -61,8 +60,7 @@
           v-model.number="line.actualChildOccupancyRate"
           density="compact"
           hide-details
-          @keydown.enter="focusOnNextInColumn('actuals', lineIndex)"
-          @keydown.shift.enter="focusOnPreviousInColumn('actuals', lineIndex)"
+          @keydown="changeFocusInColumn($event, 'actuals', lineIndex)"
           @change="changeLineAndPropagate(line, lineIndex)"
         ></v-text-field>
       </td>
@@ -156,6 +154,14 @@ function changeLineAndPropagate(line: FundingLineValue, lineIndex: number) {
   emit("lineChanged", { line, lineIndex })
 }
 
+function changeFocusInColumn(event: KeyboardEvent, columnName: ColumnNames, lineIndex: number) {
+  if (event.key === "Enter" && !event.shiftKey) {
+    focusOnNextInColumn(columnName, lineIndex)
+  } else if (event.key === "Enter" && event.shiftKey) {
+    focusOnPreviousInColumn(columnName, lineIndex)
+  }
+}
+
 function focusOnNextInColumn(columnName: ColumnNames, lineIndex: number) {
   const fields = fieldsMap[columnName]
 

From 0c99d2c652ce518aed32a2fadaa1dbfdcfd71aa3 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 13:58:33 -0700
Subject: [PATCH 14/25] :sparkles: Basic arrow key navigation.

NOTE: navigation only triggers when at the beginning or end of input text.
---
 .../FundingSubmissionLineJsonSectionTable.vue | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
index d6438007..5aafa806 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
@@ -155,10 +155,24 @@ function changeLineAndPropagate(line: FundingLineValue, lineIndex: number) {
 }
 
 function changeFocusInColumn(event: KeyboardEvent, columnName: ColumnNames, lineIndex: number) {
+  const input = event.target as HTMLInputElement | null
+
   if (event.key === "Enter" && !event.shiftKey) {
     focusOnNextInColumn(columnName, lineIndex)
   } else if (event.key === "Enter" && event.shiftKey) {
     focusOnPreviousInColumn(columnName, lineIndex)
+  } else if (event.key === "ArrowUp") {
+    focusOnPreviousInColumn(columnName, lineIndex)
+  } else if (event.key === "ArrowDown") {
+    focusOnNextInColumn(columnName, lineIndex)
+  } else if (event.key === "ArrowLeft" && !isNil(input) && input.selectionStart === 0) {
+    focusOnPreviousColumn(columnName, lineIndex)
+  } else if (
+    event.key === "ArrowRight" &&
+    !isNil(input) &&
+    input.selectionEnd === input.value.length
+  ) {
+    focusOnNextColumn(columnName, lineIndex)
   }
 }
 
@@ -190,6 +204,18 @@ function focusOnPreviousInColumn(columnName: ColumnNames, lineIndex: number) {
   }
 }
 
+function focusOnNextColumn(columnName: ColumnNames, lineIndex: number) {
+  if (columnName === "actuals") return
+
+  focusOnNextInColumn("actuals", lineIndex - 1)
+}
+
+function focusOnPreviousColumn(columnName: ColumnNames, lineIndex: number) {
+  if (columnName === "estimates") return
+
+  focusOnNextInColumn("estimates", lineIndex - 1)
+}
+
 function focusOnFirstInColumn(columnName: ColumnNames) {
   const fields = fieldsMap[columnName]
   const field = fields[0]

From 65fff3beb7f8d393c626fac577dfa862ed37de3f Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 14:03:55 -0700
Subject: [PATCH 15/25] :japanese_castle: Select text after focusing on the
 next/previous field.

NOTE: this only works for "enter" due to the nature of the arrow events.
---
 .../FundingSubmissionLineJsonSectionTable.vue                 | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
index 5aafa806..db3de36e 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
@@ -185,6 +185,7 @@ function focusOnNextInColumn(columnName: ColumnNames, lineIndex: number) {
     if (isNil(nextField)) return
 
     nextField.focus()
+    nextField.select()
   } else {
     emit("focusOnNextInColumn", columnName)
   }
@@ -199,6 +200,7 @@ function focusOnPreviousInColumn(columnName: ColumnNames, lineIndex: number) {
     if (isNil(previousField)) return
 
     previousField.focus()
+    previousField.select()
   } else {
     emit("focusOnPreviousInColumn", columnName)
   }
@@ -222,6 +224,7 @@ function focusOnFirstInColumn(columnName: ColumnNames) {
   if (isNil(field)) return
 
   field.focus()
+  field.select()
 }
 
 function focusOnLastInColumn(columnName: ColumnNames) {
@@ -230,6 +233,7 @@ function focusOnLastInColumn(columnName: ColumnNames) {
   if (isNil(field)) return
 
   field.focus()
+  field.select()
 }
 
 defineExpose({

From 6f7e3b34f7397460a2e94331530fbeea4ccd1fe8 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 14:06:47 -0700
Subject: [PATCH 16/25] :art: Use more descriptive event names for some focus
 events.

---
 .../FundingSubmissionLineJsonEditSheet.vue                | 4 ++--
 .../FundingSubmissionLineJsonSectionTable.vue             | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
index 6a17c145..d32cde40 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
@@ -34,8 +34,8 @@
       <SectionTable
         ref="sectionTables"
         :lines="lines"
-        @focus-on-next-in-column="goToNextSection(sectionIndex, $event)"
-        @focus-on-previous-in-column="goToPreviousSection(sectionIndex, $event)"
+        @focus-beyond-last-in-column="goToNextSection(sectionIndex, $event)"
+        @focus-beyond-first-in-column="goToPreviousSection(sectionIndex, $event)"
         @line-changed="propagateUpdatesAsNeeded(sectionIndex, $event)"
       />
     </div>
diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
index db3de36e..0a581aca 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
@@ -128,8 +128,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   lineChanged: [{ line: FundingLineValue; lineIndex: number }]
-  focusOnNextInColumn: [column: ColumnNames]
-  focusOnPreviousInColumn: [column: ColumnNames]
+  focusBeyondLastInColumn: [column: ColumnNames]
+  focusBeyondFirstInColumn: [column: ColumnNames]
 }>()
 
 const estimatesFields = ref<HTMLInputElement[]>([])
@@ -187,7 +187,7 @@ function focusOnNextInColumn(columnName: ColumnNames, lineIndex: number) {
     nextField.focus()
     nextField.select()
   } else {
-    emit("focusOnNextInColumn", columnName)
+    emit("focusBeyondLastInColumn", columnName)
   }
 }
 
@@ -202,7 +202,7 @@ function focusOnPreviousInColumn(columnName: ColumnNames, lineIndex: number) {
     previousField.focus()
     previousField.select()
   } else {
-    emit("focusOnPreviousInColumn", columnName)
+    emit("focusBeyondFirstInColumn", columnName)
   }
 }
 

From 1d12466ea1640823adf4f0c12077d666baa75de7 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 14:13:01 -0700
Subject: [PATCH 17/25] :cherry_blossom: Make focus follow the cursor when
 navigating with the keyboard.

---
 .../FundingSubmissionLineJsonSectionTable.vue  | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
index 0a581aca..3c9fd7fb 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
@@ -184,8 +184,7 @@ function focusOnNextInColumn(columnName: ColumnNames, lineIndex: number) {
     const nextField = fields[nextIndex]
     if (isNil(nextField)) return
 
-    nextField.focus()
-    nextField.select()
+    focusOnField(nextField)
   } else {
     emit("focusBeyondLastInColumn", columnName)
   }
@@ -199,8 +198,7 @@ function focusOnPreviousInColumn(columnName: ColumnNames, lineIndex: number) {
     const previousField = fields[previousIndex]
     if (isNil(previousField)) return
 
-    previousField.focus()
-    previousField.select()
+    focusOnField(previousField)
   } else {
     emit("focusBeyondFirstInColumn", columnName)
   }
@@ -223,8 +221,7 @@ function focusOnFirstInColumn(columnName: ColumnNames) {
   const field = fields[0]
   if (isNil(field)) return
 
-  field.focus()
-  field.select()
+  focusOnField(field)
 }
 
 function focusOnLastInColumn(columnName: ColumnNames) {
@@ -232,8 +229,17 @@ function focusOnLastInColumn(columnName: ColumnNames) {
   const field = fields[fields.length - 1]
   if (isNil(field)) return
 
+  focusOnField(field)
+}
+
+function focusOnField(field: HTMLInputElement) {
   field.focus()
   field.select()
+  field.scrollIntoView({
+    behavior: "smooth", // Scroll smoothly
+    block: "center", // Center vertically in the viewport
+    inline: "center", // Center horizontally if needed
+  })
 }
 
 defineExpose({

From c25d33ee9a8bbcf28e25903a6b3f06219a13202f Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 14:27:19 -0700
Subject: [PATCH 18/25] :japanese_castle: Make arrow key navigation trigger
 focus.

Arrow navigation on a selected text now drops the selection and moves to the beginning or end of the text.
---
 .../FundingSubmissionLineJsonSectionTable.vue | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
index 3c9fd7fb..bf09e3fb 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue
@@ -156,22 +156,30 @@ function changeLineAndPropagate(line: FundingLineValue, lineIndex: number) {
 
 function changeFocusInColumn(event: KeyboardEvent, columnName: ColumnNames, lineIndex: number) {
   const input = event.target as HTMLInputElement | null
+  const isTextFullySelected =
+    input?.selectionStart === 0 && input.selectionEnd === input.value.length
 
   if (event.key === "Enter" && !event.shiftKey) {
     focusOnNextInColumn(columnName, lineIndex)
   } else if (event.key === "Enter" && event.shiftKey) {
     focusOnPreviousInColumn(columnName, lineIndex)
   } else if (event.key === "ArrowUp") {
+    event.preventDefault()
     focusOnPreviousInColumn(columnName, lineIndex)
   } else if (event.key === "ArrowDown") {
+    event.preventDefault()
     focusOnNextInColumn(columnName, lineIndex)
-  } else if (event.key === "ArrowLeft" && !isNil(input) && input.selectionStart === 0) {
+  } else if (event.key === "ArrowLeft" && isTextFullySelected) {
+    event.preventDefault()
+    input.setSelectionRange(0, 0)
+  } else if (event.key === "ArrowLeft" && input?.selectionStart === 0) {
+    event.preventDefault()
     focusOnPreviousColumn(columnName, lineIndex)
-  } else if (
-    event.key === "ArrowRight" &&
-    !isNil(input) &&
-    input.selectionEnd === input.value.length
-  ) {
+  } else if (event.key === "ArrowRight" && isTextFullySelected) {
+    event.preventDefault()
+    input.setSelectionRange(input.value.length, input.value.length)
+  } else if (event.key === "ArrowRight" && input?.selectionEnd === input?.value.length) {
+    event.preventDefault()
     focusOnNextColumn(columnName, lineIndex)
   }
 }

From 77a9e6de5254413adb5ae0a14bd2d19595a0683a Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 14:35:24 -0700
Subject: [PATCH 19/25] :bug: Fix styling of headers in worksheets.

This style was missed when splitting the edit sheet out from the main page.
---
 .../FundingSubmissionLineJsonEditSheet.vue           | 12 ++++++++++++
 .../worksheets/MonthlyWorksheetPage.vue              | 12 +-----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
index d32cde40..81dd4aea 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
@@ -165,3 +165,15 @@ function goToPreviousSection(sectionIndex: number, columnName: ColumnNames) {
   }
 }
 </script>
+
+<style scoped>
+h4 {
+  margin-bottom: 10px;
+  font-weight: 400;
+  background-color: #55b6c2;
+  margin-left: -8px;
+  padding: 8px;
+  border-radius: 4px;
+  margin-top: 13px;
+}
+</style>
diff --git a/web/src/pages/child-care-centres/worksheets/MonthlyWorksheetPage.vue b/web/src/pages/child-care-centres/worksheets/MonthlyWorksheetPage.vue
index 36e9be32..4ca14976 100644
--- a/web/src/pages/child-care-centres/worksheets/MonthlyWorksheetPage.vue
+++ b/web/src/pages/child-care-centres/worksheets/MonthlyWorksheetPage.vue
@@ -81,14 +81,4 @@ async function initializeWorksheetsForFiscalYear() {
 }
 </script>
 
-<style scoped>
-h4 {
-  margin-bottom: 10px;
-  font-weight: 400;
-  background-color: #55b6c2;
-  margin-left: -8px;
-  padding: 8px;
-  border-radius: 4px;
-  margin-top: 13px;
-}
-</style>
+<style scoped></style>

From 5ea67f48f15b1cfffcdab54c775066433d9cf01d Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 15:56:39 -0700
Subject: [PATCH 20/25] :art: Move notification store definition nearer to
 usage.

---
 .../FundingSubmissionLineJsonEditSheet.vue                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
index 81dd4aea..63cd7261 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
@@ -58,7 +58,6 @@ import SectionTable, {
 } from "@/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue"
 
 const FIRST_FISCAL_MONTH_NAME = "April"
-const notificationStore = useNotificationStore()
 
 const props = defineProps<{
   fundingSubmissionLineJsonId: number
@@ -93,6 +92,7 @@ const sections = computed<{ sectionName: string; lines: FundingLineValue[] }[]>(
   })
 })
 const sectionTables = ref<InstanceType<typeof SectionTable>[]>([])
+const notificationStore = useNotificationStore()
 
 async function saveFundingSubmissionLineJson() {
   isSaving.value = true

From be40d227c5456d00523f0a62f70183a75fba0bdb Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 15:57:49 -0700
Subject: [PATCH 21/25] :cherry_blossom: Add keyboard shortcuts modal.

Why? To make it easier for users to figure out the keyboard shortcuts available.
---
 .../common/KeyboardShortcutsModal.vue         | 51 +++++++++++++++++++
 .../FundingSubmissionLineJsonEditSheet.vue    | 33 +++++++++++-
 2 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/common/KeyboardShortcutsModal.vue

diff --git a/web/src/components/common/KeyboardShortcutsModal.vue b/web/src/components/common/KeyboardShortcutsModal.vue
new file mode 100644
index 00000000..a350d5cb
--- /dev/null
+++ b/web/src/components/common/KeyboardShortcutsModal.vue
@@ -0,0 +1,51 @@
+<template>
+  <v-dialog
+    v-model="show"
+    max-width="500px"
+  >
+    <v-card>
+      <v-card-title><h2>Keyboard Shortcuts</h2></v-card-title>
+      <v-divider class="border-opacity-50" />
+      <v-card-text>
+        Use keyboard shortcuts to navigate between inputs:
+        <ul>
+          <li><strong>Enter</strong>: Move down the column</li>
+          <li><strong>Shift + Enter</strong>: Move up the column</li>
+          <li><strong>Arrow Up</strong>: Move up the column</li>
+          <li><strong>Arrow Down</strong>: Move down the column</li>
+          <li><strong>Arrow Left</strong> (at start): Move to previous column</li>
+          <li><strong>Arrow Right</strong> (at end): Move to next column</li>
+          <li><strong>Arrow Left</strong> (text selected): Move to start of input</li>
+          <li><strong>Arrow Right</strong> (text selected): Move to end of input</li>
+          <li><strong>Ctrl + /</strong>: Show help text</li>
+        </ul>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          color="primary"
+          @click="close"
+          >Close</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+
+const show = ref(false)
+
+function close() {
+  show.value = false
+}
+
+function open() {
+  show.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped></style>
diff --git a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
index 63cd7261..c490e2c4 100644
--- a/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
+++ b/web/src/components/funding-submission-line-jsons/FundingSubmissionLineJsonEditSheet.vue
@@ -3,7 +3,10 @@
     v-if="isLoading"
     type="table"
   />
-  <v-sheet v-else>
+  <v-sheet
+    v-else
+    @keydown="activateKeyboardShortcutsModalIfCorrectEvent($event)"
+  >
     <v-btn
       color="primary"
       class="float-right"
@@ -29,7 +32,17 @@
       :key="`${sectionName}-${sectionIndex}`"
       style="clear: both"
     >
-      <h4>{{ sectionName }}</h4>
+      <h4 class="d-flex justify-space-between align-center">
+        {{ sectionName }}
+
+        <v-icon
+          title="Show keyboard shortcuts"
+          class="included"
+          @click="showKeyboardShortcutsModal"
+        >
+          mdi-keyboard
+        </v-icon>
+      </h4>
 
       <SectionTable
         ref="sectionTables"
@@ -39,6 +52,7 @@
         @line-changed="propagateUpdatesAsNeeded(sectionIndex, $event)"
       />
     </div>
+    <KeyboardShortcutsModal ref="keyboardShortcutsModal" />
   </v-sheet>
 </template>
 
@@ -53,6 +67,7 @@ import fundingSubmissionLineJsonsApi, {
 import { useNotificationStore } from "@/store/NotificationStore"
 import useFundingSubmissionLineJson from "@/use/use-funding-submission-line-json"
 
+import KeyboardShortcutsModal from "@/components/common/KeyboardShortcutsModal.vue"
 import SectionTable, {
   type ColumnNames,
 } from "@/components/funding-submission-line-jsons/FundingSubmissionLineJsonSectionTable.vue"
@@ -164,6 +179,20 @@ function goToPreviousSection(sectionIndex: number, columnName: ColumnNames) {
     previousSection.focusOnLastInColumn(columnName)
   }
 }
+
+const keyboardShortcutsModal = ref<InstanceType<typeof KeyboardShortcutsModal> | null>(null)
+
+function activateKeyboardShortcutsModalIfCorrectEvent(event: KeyboardEvent) {
+  if (event.ctrlKey && event.key === "/") {
+    showKeyboardShortcutsModal()
+  }
+}
+
+function showKeyboardShortcutsModal() {
+  if (isNil(keyboardShortcutsModal.value)) return
+
+  keyboardShortcutsModal.value.open()
+}
 </script>
 
 <style scoped>

From 5f4edf6a1397fb77c539ac1cc258596e4428fee0 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 16:16:57 -0700
Subject: [PATCH 22/25] :cherry_blossom: Make keyboard shortcuts modal less
 ugly.

---
 .../common/KeyboardShortcutsModal.vue         | 170 +++++++++++++++---
 1 file changed, 145 insertions(+), 25 deletions(-)

diff --git a/web/src/components/common/KeyboardShortcutsModal.vue b/web/src/components/common/KeyboardShortcutsModal.vue
index a350d5cb..c802dd58 100644
--- a/web/src/components/common/KeyboardShortcutsModal.vue
+++ b/web/src/components/common/KeyboardShortcutsModal.vue
@@ -1,33 +1,153 @@
 <template>
   <v-dialog
     v-model="show"
-    max-width="500px"
+    max-width="800px"
   >
     <v-card>
-      <v-card-title><h2>Keyboard Shortcuts</h2></v-card-title>
-      <v-divider class="border-opacity-50" />
-      <v-card-text>
-        Use keyboard shortcuts to navigate between inputs:
-        <ul>
-          <li><strong>Enter</strong>: Move down the column</li>
-          <li><strong>Shift + Enter</strong>: Move up the column</li>
-          <li><strong>Arrow Up</strong>: Move up the column</li>
-          <li><strong>Arrow Down</strong>: Move down the column</li>
-          <li><strong>Arrow Left</strong> (at start): Move to previous column</li>
-          <li><strong>Arrow Right</strong> (at end): Move to next column</li>
-          <li><strong>Arrow Left</strong> (text selected): Move to start of input</li>
-          <li><strong>Arrow Right</strong> (text selected): Move to end of input</li>
-          <li><strong>Ctrl + /</strong>: Show help text</li>
-        </ul>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
+      <div class="d-flex justify-space-between align-center px-4 py-3">
+        <h2 class="text-h6 font-weight-bold">Keyboard shortcuts</h2>
         <v-btn
-          color="primary"
+          icon
+          aria-label="Close"
+          variant="outlined"
           @click="close"
-          >Close</v-btn
         >
-      </v-card-actions>
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </div>
+
+      <v-divider class="border-opacity-50" />
+
+      <!-- Shortcuts Section -->
+      <v-card-text class="py-4">
+        <v-row>
+          <v-col cols="6">
+            <div class="mb-3 d-flex justify-space-between">
+              <span>Move down the column</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Enter</v-chip
+                >
+              </div>
+            </div>
+
+            <div class="mb-3 d-flex justify-space-between">
+              <span>Move up the column</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Shift</v-chip
+                >
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  class="ml-2"
+                  >Enter</v-chip
+                >
+              </div>
+            </div>
+
+            <div class="mb-3 d-flex justify-space-between">
+              <span>Move up the column</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Arrow Up</v-chip
+                >
+              </div>
+            </div>
+
+            <div class="mb-3 d-flex justify-space-between">
+              <span>Move down the column</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Arrow Down</v-chip
+                >
+              </div>
+            </div>
+
+            <div class="mb-3 d-flex justify-space-between">
+              <span>Move to left column</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Arrow Left</v-chip
+                >
+              </div>
+            </div>
+          </v-col>
+
+          <v-col cols="6">
+            <div class="mb-3 d-flex justify-space-between">
+              <span>Move to right column</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Arrow Right</v-chip
+                >
+              </div>
+            </div>
+
+            <div class="mb-3 d-flex justify-space-between">
+              <span>(text selected) Move to start of input</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Arrow Left</v-chip
+                >
+              </div>
+            </div>
+
+            <div class="mb-3 d-flex justify-space-between">
+              <span>(text selected) Move to end of input</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Arrow Right</v-chip
+                >
+              </div>
+            </div>
+
+            <div class="mb-3 d-flex justify-space-between">
+              <span>Show help text</span>
+              <div>
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  >Ctrl</v-chip
+                >
+                <v-chip
+                  variant="outlined"
+                  label
+                  small
+                  class="ml-2"
+                  >/</v-chip
+                >
+              </div>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
     </v-card>
   </v-dialog>
 </template>
@@ -45,7 +165,7 @@ function open() {
   show.value = true
 }
 
-defineExpose({ open })
+defineExpose({
+  open,
+})
 </script>
-
-<style scoped></style>

From a863e27e41d5bc2543ced8d457cd01922b394a12 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 16:33:12 -0700
Subject: [PATCH 23/25] :heavy_plus_sign: Add vueuse/router, because
 useRouteQuery is amazing.

It's good for modals state and table queries stored in the url.
---
 web/package-lock.json | 110 ++++++++++++++++++++++++++++++++++++++++++
 web/package.json      |   1 +
 2 files changed, 111 insertions(+)

diff --git a/web/package-lock.json b/web/package-lock.json
index 62908553..5c363d22 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@auth0/auth0-vue": "^2.0.0",
         "@mdi/font": "^7.1.96",
+        "@vueuse/router": "^11.1.0",
         "apexcharts": "^3.37.1",
         "axios": "^1.3.3",
         "lodash": "^4.17.21",
@@ -1379,6 +1380,82 @@
         "vuetify": "^3.0.0"
       }
     },
+    "node_modules/@vueuse/router": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/router/-/router-11.1.0.tgz",
+      "integrity": "sha512-OjTNIOzX5jD1HDzmDApMke2QsCZ+gWKaydfndKJ3j9ttn41Pr11cQbSY6ZBp+bNjctAR+jhQBV/DGtL3iKpuHg==",
+      "dependencies": {
+        "@vueuse/shared": "11.1.0",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue-router": ">=4.0.0-rc.1"
+      }
+    },
+    "node_modules/@vueuse/router/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+      "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+      "dependencies": {
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -5004,6 +5081,39 @@
         "upath": "^2.0.1"
       }
     },
+    "@vueuse/router": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/router/-/router-11.1.0.tgz",
+      "integrity": "sha512-OjTNIOzX5jD1HDzmDApMke2QsCZ+gWKaydfndKJ3j9ttn41Pr11cQbSY6ZBp+bNjctAR+jhQBV/DGtL3iKpuHg==",
+      "requires": {
+        "@vueuse/shared": "11.1.0",
+        "vue-demi": ">=0.14.10"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.10",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/shared": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+      "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+      "requires": {
+        "vue-demi": ">=0.14.10"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.10",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+          "requires": {}
+        }
+      }
+    },
     "acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
diff --git a/web/package.json b/web/package.json
index 9af12df9..0bf48872 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@auth0/auth0-vue": "^2.0.0",
     "@mdi/font": "^7.1.96",
+    "@vueuse/router": "^11.1.0",
     "apexcharts": "^3.37.1",
     "axios": "^1.3.3",
     "lodash": "^4.17.21",

From 77595f9045e8c09f3d638f5098a180b1fdeee458 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 16:33:58 -0700
Subject: [PATCH 24/25] :cherry_blossom: Add modal state to url.

Why? Accessibility and ease of debugging and texting.
---
 .../components/common/KeyboardShortcutsModal.vue    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/components/common/KeyboardShortcutsModal.vue b/web/src/components/common/KeyboardShortcutsModal.vue
index c802dd58..6648586d 100644
--- a/web/src/components/common/KeyboardShortcutsModal.vue
+++ b/web/src/components/common/KeyboardShortcutsModal.vue
@@ -2,6 +2,7 @@
   <v-dialog
     v-model="show"
     max-width="800px"
+    @esc="close"
   >
     <v-card>
       <div class="d-flex justify-space-between align-center px-4 py-3">
@@ -18,7 +19,6 @@
 
       <v-divider class="border-opacity-50" />
 
-      <!-- Shortcuts Section -->
       <v-card-text class="py-4">
         <v-row>
           <v-col cols="6">
@@ -153,9 +153,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue"
+import { useRouteQuery } from "@vueuse/router"
 
-const show = ref(false)
+// @ts-expect-error - boolean default works just fine.
+const show = useRouteQuery<string, boolean>("showKeyboardShortcuts", false, {
+  transform: (value) => {
+    if (value === "true") return true
+
+    return false
+  },
+})
 
 function close() {
   show.value = false

From e2a14a82c33cf255ee6defe5c2d5c821f78b5262 Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Fri, 4 Oct 2024 16:40:29 -0700
Subject: [PATCH 25/25] :hammer: Add pull request editor dev plugin.

Why? To get AI auto-completion as I type.
Taken from https://github.com/icefoganalytics/travel-authorization/commit/1d1dd563ff395207d574bd9a4eeae846e9aaedca
---
 bin/dev                    | 11 ++++++
 bin/pull-request-editor.rb | 78 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 bin/pull-request-editor.rb

diff --git a/bin/dev b/bin/dev
index ad1d9af6..a3258d7c 100755
--- a/bin/dev
+++ b/bin/dev
@@ -1,6 +1,7 @@
 #!/usr/bin/env ruby
 
 require_relative "./jira_api"
+require_relative "./pull-request-editor"
 
 class DevHelper
   # Support dashes in command names
@@ -9,6 +10,7 @@ class DevHelper
     "branch-from" => :branch_from,
     "description-from" => :description_from,
     "check-types" => :check_types,
+    "edit-pr" => :edit_pr,
   }
   METHOD_TO_COMMAND = COMMAND_TO_METHOD.invert
 
@@ -198,6 +200,15 @@ class DevHelper
     puts description
   end
 
+  ##
+  # Edits the description of a pull request.
+  # Example:
+  #   dev edit-pr https://github.com/icefoganalytics/travel-authorization/pull/218
+  def edit_pr(pull_request_url, *args, **kwargs)
+    PullRequestEditor.edit_pull_request_description(pull_request_url, *args, **kwargs)
+    exit(0)
+  end
+
   def bash_completions
     completions =
       public_methods(false)
diff --git a/bin/pull-request-editor.rb b/bin/pull-request-editor.rb
new file mode 100644
index 00000000..d90970b7
--- /dev/null
+++ b/bin/pull-request-editor.rb
@@ -0,0 +1,78 @@
+require "tempfile"
+require "open3"
+
+##
+# Supports fetching and editing PR descriptions from a full GitHub PR URL using SSH and GitHub CLI.
+#
+# Example usage:
+#   - PullRequestEditor.edit_pull_request_description('https://github.com/icefoganalytics/travel-authorization/pull/218')
+class PullRequestEditor
+  # Edits the pull request description using GitHub CLI and VS Code
+  def self.edit_pull_request_description(pull_request_url)
+    if ENV["GITHUB_TOKEN"].nil?
+      puts "\nPlease set the GITHUB_TOKEN environment variable."
+      exit(1)
+    end
+
+    repo, pull_request_number = extract_repo_and_pull_request_number(pull_request_url)
+
+    pull_request_body = fetch_pull_request_body(repo, pull_request_number)
+
+    tmp_dir = File.join(Dir.home, "tmp")
+    Dir.mkdir(tmp_dir) unless Dir.exist?(tmp_dir)
+
+    Tempfile.create(["pull_request_description_#{pull_request_number}", ".md"], tmp_dir) do |file|
+      file.write(pull_request_body)
+      file.flush
+
+      system("code --wait #{file.path}")
+
+      updated_pull_request_body = File.read(file.path)
+
+      if updated_pull_request_body.strip != pull_request_body.strip
+        update_pull_request_body(repo, pull_request_number, file.path)
+      else
+        puts "No changes made to the PR description."
+      end
+    end
+  end
+
+  private
+
+  # Extracts the repository name and PR number from a full GitHub PR URL
+  def self.extract_repo_and_pull_request_number(pull_request_url)
+    match_data = pull_request_url.match(%r{github.com/([^/]+)/([^/]+)/pull/(\d+)})
+    repo = "#{match_data[1]}/#{match_data[2]}"
+    pull_request_number = match_data[3]
+    [repo, pull_request_number]
+  end
+
+  # Fetches the PR body using the GitHub CLI
+  def self.fetch_pull_request_body(repo, pull_request_number)
+    command = "gh pr view #{pull_request_number} --repo #{repo} --json body --jq .body"
+    puts "running: #{command}"
+    stdout, stderr, status = Open3.capture3(command)
+
+    if status.success?
+      stdout.strip
+    else
+      puts "Error fetching PR description: #{stderr}"
+      exit(1)
+    end
+  end
+
+  # Updates the PR body using the GitHub CLI
+  def self.update_pull_request_body(repo, pull_request_number, new_body_file_path)
+    command =
+      "gh pr edit #{pull_request_number} --repo #{repo} --body-file \"#{new_body_file_path}\""
+    puts "running: #{command}"
+    stdout, stderr, status = Open3.capture3(command)
+
+    if status.success?
+      puts "stdout: #{stdout}"
+      puts "PR description updated successfully."
+    else
+      puts "Error updating PR description: #{stderr}"
+    end
+  end
+end