From 61769c3ce5656891bec6fcefc59abc62cfd3981d Mon Sep 17 00:00:00 2001
From: saithsab877 <saithsab877@gmail.com>
Date: Thu, 21 Nov 2024 19:30:33 +0500
Subject: [PATCH] Add Phase Planner view and navigation

---
 src/pages/index.tsx                           |  4 ++
 src/people/widgetViews/PhasePlannerView.tsx   | 29 ++++++++++++
 .../widgetViews/workspace/WorkspacePhase.tsx  | 44 +++++++++++++------
 src/people/widgetViews/workspace/style.ts     | 20 +++++++++
 4 files changed, 84 insertions(+), 13 deletions(-)
 create mode 100644 src/people/widgetViews/PhasePlannerView.tsx

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b356747c..9d30b5ab 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,6 +9,7 @@ import WorkspaceFeature from 'people/widgetViews/WorkspaceFeature';
 import PeopleHeader from '../people/main/Header';
 import TokenRefresh from '../people/utils/TokenRefresh';
 import GenerateStoriesView from '../people/widgetViews/GenerateStoriesView';
+import PhasePlannerView from '../people/widgetViews/PhasePlannerView';
 import BotsBody from './bots/Body';
 import Body from './tribes/Body';
 import Header from './tribes/Header';
@@ -50,6 +51,9 @@ const modeDispatchPages: Record<AppMode, () => React.ReactElement> = {
           <Route path="/workspace/:uuid">
             <WorkspaceMission />
           </Route>
+          <Route path="/feature/:feature_uuid/phase/:phase_uuid/planner">
+            <PhasePlannerView />
+          </Route>
           <Route path="/feature/:feature_uuid/stories">
             <GenerateStoriesView />
           </Route>
diff --git a/src/people/widgetViews/PhasePlannerView.tsx b/src/people/widgetViews/PhasePlannerView.tsx
new file mode 100644
index 00000000..49e580ae
--- /dev/null
+++ b/src/people/widgetViews/PhasePlannerView.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+
+interface PhasePlannerParams {
+  feature_uuid: string;
+  phase_uuid: string;
+}
+
+const PhasePlannerView: React.FC = () => {
+  const { feature_uuid, phase_uuid } = useParams<PhasePlannerParams>();
+
+  return (
+    <Container>
+      <h1>Phase Planner</h1>
+      <p>Feature UUID: {feature_uuid}</p>
+      <p>Phase UUID: {phase_uuid}</p>
+    </Container>
+  );
+};
+
+export default PhasePlannerView;
diff --git a/src/people/widgetViews/workspace/WorkspacePhase.tsx b/src/people/widgetViews/workspace/WorkspacePhase.tsx
index f480e590..5e32c8a2 100644
--- a/src/people/widgetViews/workspace/WorkspacePhase.tsx
+++ b/src/people/widgetViews/workspace/WorkspacePhase.tsx
@@ -175,6 +175,13 @@ const WorkspacePhasingTabs = (props: WorkspacePhaseProps) => {
     history.push(`/feature/${props.workspace_uuid}`);
   };
 
+  const handlePhasePlannerClick = () => {
+    if (phases[selectedIndex]) {
+      const phase = phases[selectedIndex];
+      history.push(`/feature/${phase.feature_uuid}/phase/${phase.uuid}/planner`);
+    }
+  };
+
   const handlePhaseNameChange = (name: string) => setPhaseName(name);
 
   const createOrUpdateFeaturePhase = async (op: PhaseOperationType) => {
@@ -297,19 +304,30 @@ const WorkspacePhasingTabs = (props: WorkspacePhaseProps) => {
           <TabContent>
             <PostABounty>
               {canPostBounty && (
-                <Button
-                  onClick={handlePostBountyClick}
-                  style={{
-                    backgroundColor: '#49C998',
-                    borderRadius: '6px',
-                    gap: '10px'
-                  }}
-                >
-                  <div>
-                    <img src={addBounty} alt="" />
-                    Post a Bounty
-                  </div>
-                </Button>
+                <>
+                  <Button
+                    onClick={handlePhasePlannerClick}
+                    style={{
+                      backgroundColor: '#49C998',
+                      borderRadius: '6px',
+                      padding: '15px 20px'
+                    }}
+                  >
+                    <div>Phase Planner</div>
+                  </Button>
+                  <Button
+                    onClick={handlePostBountyClick}
+                    style={{
+                      backgroundColor: '#49C998',
+                      borderRadius: '6px'
+                    }}
+                  >
+                    <div>
+                      <img src={addBounty} alt="" />
+                      Post a Bounty
+                    </div>
+                  </Button>
+                </>
               )}
             </PostABounty>
             <DisplayBounties>
diff --git a/src/people/widgetViews/workspace/style.ts b/src/people/widgetViews/workspace/style.ts
index bf877adc..7ccac8ca 100644
--- a/src/people/widgetViews/workspace/style.ts
+++ b/src/people/widgetViews/workspace/style.ts
@@ -1328,6 +1328,26 @@ export const PostABounty = styled.div`
   gap: 10px;
   margin-top: 0.5rem;
   margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  direction: row;
+
+  button {
+    div {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    img {
+      vertical-align: middle;
+    }
+  }
+
+  button:first-child {
+    margin-right: 10px;
+  }
 `;
 
 export const DisplayBounties = styled.div`