From fcb3d0f86042ed771d2bdd94f78fc315c55b5a3e Mon Sep 17 00:00:00 2001
From: Carsten Koch <carstenbkoch@gmail.com>
Date: Mon, 9 Dec 2024 15:54:23 +0100
Subject: [PATCH 1/2] chore: clean up

---
 .../planning/week/ProcessCrmUpdates.tsx       | 17 +++++++
 .../planning/week/ProcessFinancialUpdates.tsx | 25 ++++++++++
 components/planning/week/ProcessInbox.tsx     | 11 +++++
 components/planning/week/ProcessProjects.tsx  | 29 ++++++++++++
 pages/planweek.tsx                            | 46 ++++---------------
 5 files changed, 90 insertions(+), 38 deletions(-)
 create mode 100644 components/planning/week/ProcessCrmUpdates.tsx
 create mode 100644 components/planning/week/ProcessFinancialUpdates.tsx
 create mode 100644 components/planning/week/ProcessInbox.tsx
 create mode 100644 components/planning/week/ProcessProjects.tsx

diff --git a/components/planning/week/ProcessCrmUpdates.tsx b/components/planning/week/ProcessCrmUpdates.tsx
new file mode 100644
index 000000000..5c4022c7d
--- /dev/null
+++ b/components/planning/week/ProcessCrmUpdates.tsx
@@ -0,0 +1,17 @@
+import useMrrLatestUpload from "@/api/useLatestUploadsWork";
+import ImportProjectData from "@/components/crm/import-project-data";
+import PlanWeekAction from "@/components/planning/week/PlanWeekAction";
+import { FC } from "react";
+
+interface ProcessCrmUpdatesProps {
+  mutateSfdc: ReturnType<typeof useMrrLatestUpload>["mutateSfdc"];
+}
+
+const ProcessCrmUpdates: FC<ProcessCrmUpdatesProps> = ({ mutateSfdc }) => (
+  <>
+    <PlanWeekAction label="Upload Salesforce Opportunities" />
+    <ImportProjectData reloader={mutateSfdc} />
+  </>
+);
+
+export default ProcessCrmUpdates;
diff --git a/components/planning/week/ProcessFinancialUpdates.tsx b/components/planning/week/ProcessFinancialUpdates.tsx
new file mode 100644
index 000000000..9eeb76df7
--- /dev/null
+++ b/components/planning/week/ProcessFinancialUpdates.tsx
@@ -0,0 +1,25 @@
+import useMrrLatestUpload from "@/api/useLatestUploadsWork";
+import InstructionsUploadMrr from "@/components/analytics/instructions/instructions-upload-mrr";
+import { MrrFilterProvider } from "@/components/analytics/useMrrFilter";
+import PlanWeekAction from "@/components/planning/week/PlanWeekAction";
+import { Accordion } from "@/components/ui/accordion";
+import { FC } from "react";
+
+interface ProcessFinancialUpdatesProps {
+  mutateMrr: ReturnType<typeof useMrrLatestUpload>["mutateMrr"];
+}
+
+const ProcessFinancialUpdates: FC<ProcessFinancialUpdatesProps> = ({
+  mutateMrr,
+}) => (
+  <>
+    <PlanWeekAction label="Upload Customer Financials" />
+    <MrrFilterProvider>
+      <Accordion type="single" collapsible>
+        <InstructionsUploadMrr reloader={mutateMrr} />
+      </Accordion>
+    </MrrFilterProvider>
+  </>
+);
+
+export default ProcessFinancialUpdates;
diff --git a/components/planning/week/ProcessInbox.tsx b/components/planning/week/ProcessInbox.tsx
new file mode 100644
index 000000000..9055ef1d7
--- /dev/null
+++ b/components/planning/week/ProcessInbox.tsx
@@ -0,0 +1,11 @@
+import ProcessInboxItem from "@/components/inbox/ProcessInboxItem";
+import PlanWeekAction from "@/components/planning/week/PlanWeekAction";
+
+const ProcessInbox = () => (
+  <>
+    <PlanWeekAction label="Process Inbox Items" />
+    <ProcessInboxItem />
+  </>
+);
+
+export default ProcessInbox;
diff --git a/components/planning/week/ProcessProjects.tsx b/components/planning/week/ProcessProjects.tsx
new file mode 100644
index 000000000..785970c0d
--- /dev/null
+++ b/components/planning/week/ProcessProjects.tsx
@@ -0,0 +1,29 @@
+import { PlanningProjectFilterProvider } from "@/components/planning/usePlanningProjectFilter";
+import PlanWeekAction from "@/components/planning/week/PlanWeekAction";
+import PlanWeekContextNotWork from "@/components/planning/week/PlanWeekContextNotWork";
+import PlanWeekContextWork from "@/components/planning/week/PlanWeekContextWork";
+import PlanWeekFilter from "@/components/planning/week/PlanWeekFilter";
+import PlanWeekStatistics from "@/components/planning/week/PlanWeekStatistics";
+import { useContextContext } from "@/contexts/ContextContext";
+import { FC } from "react";
+
+interface ProcessProjectsProps {}
+
+const ProcessProjects: FC<ProcessProjectsProps> = (props) => {
+  const { context } = useContextContext();
+  return (
+    <>
+      <PlanWeekAction label="Review Projects" />
+      <PlanningProjectFilterProvider>
+        <PlanWeekStatistics />
+
+        <PlanWeekFilter />
+
+        {context !== "work" && <PlanWeekContextNotWork />}
+        {context === "work" && <PlanWeekContextWork />}
+      </PlanningProjectFilterProvider>
+    </>
+  );
+};
+
+export default ProcessProjects;
diff --git a/pages/planweek.tsx b/pages/planweek.tsx
index 03f4b6029..d35f30168 100644
--- a/pages/planweek.tsx
+++ b/pages/planweek.tsx
@@ -1,24 +1,17 @@
 import useInbox from "@/api/useInbox";
 import useMrrLatestUpload from "@/api/useLatestUploadsWork";
-import InstructionsUploadMrr from "@/components/analytics/instructions/instructions-upload-mrr";
-import { MrrFilterProvider } from "@/components/analytics/useMrrFilter";
-import ImportProjectData from "@/components/crm/import-project-data";
-import ProcessInboxItem from "@/components/inbox/ProcessInboxItem";
 import ApiLoadingError from "@/components/layouts/ApiLoadingError";
 import MainLayout from "@/components/layouts/MainLayout";
 import ContextSwitcher from "@/components/navigation-menu/ContextSwitcher";
-import { PlanningProjectFilterProvider } from "@/components/planning/usePlanningProjectFilter";
 import {
   useWeekPlanContext,
   withWeekPlan,
 } from "@/components/planning/useWeekPlanContext";
-import PlanWeekAction from "@/components/planning/week/PlanWeekAction";
-import PlanWeekContextNotWork from "@/components/planning/week/PlanWeekContextNotWork";
-import PlanWeekContextWork from "@/components/planning/week/PlanWeekContextWork";
-import PlanWeekFilter from "@/components/planning/week/PlanWeekFilter";
 import PlanWeekForm from "@/components/planning/week/PlanWeekForm";
-import PlanWeekStatistics from "@/components/planning/week/PlanWeekStatistics";
-import { Accordion } from "@/components/ui/accordion";
+import ProcessCrmUpdates from "@/components/planning/week/ProcessCrmUpdates";
+import ProcessFinancialUpdates from "@/components/planning/week/ProcessFinancialUpdates";
+import ProcessInbox from "@/components/planning/week/ProcessInbox";
+import ProcessProjects from "@/components/planning/week/ProcessProjects";
 import { useContextContext } from "@/contexts/ContextContext";
 
 const WeeklyPlanningPage = () => {
@@ -40,36 +33,13 @@ const WeeklyPlanningPage = () => {
         </div>
 
         {inbox && inbox.length > 0 ? (
-          <>
-            <PlanWeekAction label="Process Inbox Items" />
-            <ProcessInboxItem />
-          </>
+          <ProcessInbox />
         ) : context === "work" && mrrUploadTooOld ? (
-          <>
-            <PlanWeekAction label="Upload Customer Financials" />
-            <MrrFilterProvider>
-              <Accordion type="single" collapsible>
-                <InstructionsUploadMrr reloader={mutateMrr} />
-              </Accordion>
-            </MrrFilterProvider>
-          </>
+          <ProcessFinancialUpdates {...{ mutateMrr }} />
         ) : context === "work" && sfdcUploadTooOld ? (
-          <>
-            <PlanWeekAction label="Upload Salesforce Opportunities" />
-            <ImportProjectData reloader={mutateSfdc} />
-          </>
+          <ProcessCrmUpdates {...{ mutateSfdc }} />
         ) : (
-          <>
-            <PlanWeekAction label="Review Projects" />
-            <PlanningProjectFilterProvider>
-              <PlanWeekStatistics />
-
-              <PlanWeekFilter />
-
-              {context !== "work" && <PlanWeekContextNotWork />}
-              {context === "work" && <PlanWeekContextWork />}
-            </PlanningProjectFilterProvider>
-          </>
+          <ProcessProjects />
         )}
       </div>
     </MainLayout>

From 130414b18293ee51460bf2be82af8b1c3e7bc14c Mon Sep 17 00:00:00 2001
From: Carsten Koch <carstenbkoch@gmail.com>
Date: Mon, 9 Dec 2024 16:06:08 +0100
Subject: [PATCH 2/2] fix: ui for weekly planning; now more clarity

---
 components/planning/DecisionButton.tsx        |  2 +-
 components/planning/DecisionSection.tsx       |  2 +-
 .../planning/project/MakeProjectDecision.tsx  |  2 +-
 .../planning/week/PlanWeekContextWork.tsx     | 20 +++++++------
 components/planning/week/ProcessProjects.tsx  | 28 ++++++++++---------
 5 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/components/planning/DecisionButton.tsx b/components/planning/DecisionButton.tsx
index ffae91b02..19e3731c4 100644
--- a/components/planning/DecisionButton.tsx
+++ b/components/planning/DecisionButton.tsx
@@ -18,10 +18,10 @@ const DecisionButton: FC<DecisionButtonProps> = ({
   disabled,
 }) => (
   <Button
-    size="sm"
     onClick={makeDecision}
     variant={selected ? "default" : "outline"}
     disabled={!!isLoading || disabled}
+    className="px-2 h-8"
   >
     {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
     {label}
diff --git a/components/planning/DecisionSection.tsx b/components/planning/DecisionSection.tsx
index ba2b3395c..ee0082df2 100644
--- a/components/planning/DecisionSection.tsx
+++ b/components/planning/DecisionSection.tsx
@@ -41,7 +41,7 @@ const DecisionSection: FC<DecisionSectionProps> = ({
   return (
     weekPlan && (
       <div className={cn(className)}>
-        <Label htmlFor={`${project.id}-decision`} className="font-semibold">
+        <Label htmlFor={`${project.id}-decision`}>
           Can you make progress on this project this week?
         </Label>
 
diff --git a/components/planning/project/MakeProjectDecision.tsx b/components/planning/project/MakeProjectDecision.tsx
index 110a5d400..c08404fa9 100644
--- a/components/planning/project/MakeProjectDecision.tsx
+++ b/components/planning/project/MakeProjectDecision.tsx
@@ -18,7 +18,7 @@ const MakeProjectDecision: FC<MakeProjectDecisionProps> = ({
 
       <DecisionSection
         project={project}
-        className="flex flex-col space-y-2"
+        className="mx-1 md:mx-2 flex flex-col space-y-2"
         saveOnHoldDate={saveOnHoldDate}
       />
     </div>
diff --git a/components/planning/week/PlanWeekContextWork.tsx b/components/planning/week/PlanWeekContextWork.tsx
index e19bde8a6..982c26b8f 100644
--- a/components/planning/week/PlanWeekContextWork.tsx
+++ b/components/planning/week/PlanWeekContextWork.tsx
@@ -33,15 +33,17 @@ const PlanWeekContextWork = () => {
             value={id}
           >
             <Accordion type="single" collapsible>
-              {projects.map((project) => (
-                <MakeProjectDecision
-                  key={project.id}
-                  project={project}
-                  saveOnHoldDate={(onHoldTill) =>
-                    saveProjectDates({ projectId: project.id, onHoldTill })
-                  }
-                />
-              ))}
+              <div className="space-y-6">
+                {projects.map((project) => (
+                  <MakeProjectDecision
+                    key={project.id}
+                    project={project}
+                    saveOnHoldDate={(onHoldTill) =>
+                      saveProjectDates({ projectId: project.id, onHoldTill })
+                    }
+                  />
+                ))}
+              </div>
             </Accordion>
           </DefaultAccordionItem>
         ))}
diff --git a/components/planning/week/ProcessProjects.tsx b/components/planning/week/ProcessProjects.tsx
index 785970c0d..f2fa6fa2c 100644
--- a/components/planning/week/ProcessProjects.tsx
+++ b/components/planning/week/ProcessProjects.tsx
@@ -1,3 +1,4 @@
+import useWeekPlan from "@/api/useWeekPlan";
 import { PlanningProjectFilterProvider } from "@/components/planning/usePlanningProjectFilter";
 import PlanWeekAction from "@/components/planning/week/PlanWeekAction";
 import PlanWeekContextNotWork from "@/components/planning/week/PlanWeekContextNotWork";
@@ -5,24 +6,25 @@ import PlanWeekContextWork from "@/components/planning/week/PlanWeekContextWork"
 import PlanWeekFilter from "@/components/planning/week/PlanWeekFilter";
 import PlanWeekStatistics from "@/components/planning/week/PlanWeekStatistics";
 import { useContextContext } from "@/contexts/ContextContext";
-import { FC } from "react";
 
-interface ProcessProjectsProps {}
-
-const ProcessProjects: FC<ProcessProjectsProps> = (props) => {
+const ProcessProjects = () => {
   const { context } = useContextContext();
+  const { weekPlan } = useWeekPlan();
+
   return (
-    <>
-      <PlanWeekAction label="Review Projects" />
-      <PlanningProjectFilterProvider>
-        <PlanWeekStatistics />
+    weekPlan && (
+      <>
+        <PlanWeekAction label="Review Projects" />
+        <PlanningProjectFilterProvider>
+          <PlanWeekStatistics />
 
-        <PlanWeekFilter />
+          <PlanWeekFilter />
 
-        {context !== "work" && <PlanWeekContextNotWork />}
-        {context === "work" && <PlanWeekContextWork />}
-      </PlanningProjectFilterProvider>
-    </>
+          {context !== "work" && <PlanWeekContextNotWork />}
+          {context === "work" && <PlanWeekContextWork />}
+        </PlanningProjectFilterProvider>
+      </>
+    )
   );
 };