Move new Decision edit workflow out of prototype and into /organisation/{orgId}/decision/{decisionId}/edit

Author: mrdavidlaing-mo

app/admin/prototypes/page.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import WorkflowAccordion from '@/components/workflow/WorkflowAccordion'
+import { notFound } from 'next/navigation'
+import { useState } from 'react'
+import { DecisionWorkflowStep, DecisionWorkflowSteps } from '@/lib/domain/Decision'
+
+interface EditDecisionClientProps {
+  organisationId: string
+  id: string
+}
+
+export default function EditDecisionClient({ organisationId, id }: EditDecisionClientProps) {
+  const [currentStep, setCurrentStep] = useState<DecisionWorkflowStep>(DecisionWorkflowSteps.IDENTIFY)
+
+  if (!organisationId || !id) {
+    return notFound()
+  }
+
+  const handleStepChange = (nextStep: DecisionWorkflowStep) => {
+    setCurrentStep(nextStep)
+  }
+
+  return (
+    <div className="container mx-auto py-8">
+      <WorkflowAccordion
+        organisationId={organisationId}
+        decisionId={id}
+        currentStep={currentStep}
+        onStepChange={handleStepChange}
+      />
+    </div>
+  )
+} 

app/organisation/[organisationId]/decision/[id]/edit/EditDecisionClient.tsx

@@ -0,0 +1,20 @@
+import { use } from 'react'
+import EditDecisionClient from './EditDecisionClient'
+
+interface EditDecisionPageProps {
+  params: {
+    organisationId: string
+    id: string
+  }
+}
+
+export default function EditDecisionPage({ params }: EditDecisionPageProps) {
+  const resolvedParams = use(Promise.resolve(params))
+
+  return (
+    <EditDecisionClient
+      organisationId={resolvedParams.organisationId}
+      id={resolvedParams.id}
+    />
+  )
+} 

app/organisation/[organisationId]/decision/[id]/edit/page.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useEffect } from 'react'
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import {
   Accordion,
   AccordionContent,
@@ -7,6 +9,7 @@ import {
 } from "@/components/ui/accordion"
 import {
   DecisionWorkflowStep,
+  DecisionWorkflowSteps,
   DecisionWorkflowStepsSequence,
   WorkflowNavigator,
   Cost,
@@ -48,16 +51,16 @@ import { STYLE_CLASSES } from './WorkflowAccordionConstants'
 import { StepHeader, ProgressBar, NextButton } from './WorkflowAccordionComponents'
 
 interface WorkflowAccordionProps {
-  currentStep: DecisionWorkflowStep
-  onStepComplete?: (step: DecisionWorkflowStep) => void
+  currentStep?: DecisionWorkflowStep
+  onStepChange?: (nextStep: DecisionWorkflowStep) => void
   className?: string
   organisationId?: string
   decisionId?: string
 }
 
 export default function WorkflowAccordion({
-  currentStep,
-  onStepComplete,
+  currentStep = DecisionWorkflowSteps.IDENTIFY,
+  onStepChange,
   className,
   organisationId = "9HY1YTkOdqxOTFOMZe8r",
   decisionId = "KRWdpmQTU2DRR76jrlC4"
@@ -217,6 +220,13 @@ export default function WorkflowAccordion({
     updateDecisionCriteria(newCriteria)
   }
 
+  const handleStepComplete = useCallback((step: DecisionWorkflowStep) => {
+    const nextStep = WorkflowNavigator.getNextStep(step);
+    if (nextStep && onStepChange) {
+      onStepChange(nextStep);
+    }
+  }, [onStepChange]);
+
   const renderStepContent = (step: DecisionWorkflowStep) => {
     if (step.key === 'identify' && decision && stakeholders) {
       const uniqueOrgStakeholders = stakeholders.sort((a, b) => a.displayName.localeCompare(b.displayName));
@@ -583,7 +593,9 @@ export default function WorkflowAccordion({
               {isCurrent && (
                 <div className="flex justify-between items-center mt-8">
                   <NextButton 
-                    onComplete={() => onStepComplete?.(step)} 
+                    onComplete={() => {
+                      handleStepComplete(step);
+                    }}
                     stepLabel={step.label} 
                   />
                   <ProgressBar 

…p/admin/prototypes/WorkflowAccordion.tsx components/workflow/WorkflowAccordion.tsxapp/admin/prototypes/WorkflowAccordion.tsx renamed to components/workflow/WorkflowAccordion.tsx app/admin/prototypes/WorkflowAccordion.tsx renamed to components/workflow/WorkflowAccordion.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { cn } from '@/lib/utils'
 import { ArrowDown } from 'lucide-react'
 import { DecisionWorkflowStep, DecisionWorkflowStepKey, StepRoles } from '@/lib/domain/Decision'
@@ -82,10 +84,16 @@ interface NextButtonProps {
 }
 
 export function NextButton({ onComplete, stepLabel }: NextButtonProps) {
+  if (typeof onComplete !== 'function') {
+    return null;
+  }
+
   return (
     <button
-      onClick={onComplete}
-      className="mr-4 px-4 py-2 bg-primary text-primary-foreground rounded-md inline-flex items-center gap-2 hover:bg-primary/90 transition-colors"
+      onClick={() => {
+        onComplete();
+      }}
+      className="mr-4 px-4 py-2 bg-primary text-primary-foreground rounded-md inline-flex items-center gap-2 hover:bg-primary/90 transition-colors hover:scale-105 active:scale-95"
       aria-label={`Complete ${stepLabel} and proceed to next step`}
     >
       Next