when I click on edit nothing happens

src/components/admin/flow-canvas.tsx

@@ -1,7 +1,7 @@
 
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { MoreVertical, Trash2, Edit, Plus, Move } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -11,9 +11,28 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '../ui/textarea';
 
-// Mock data for the flow steps. In a real app, this would come from a database.
-const flowSteps = [
+type FlowStep = {
+  id: number;
+  title: string;
+  type: string;
+  description: string;
+};
+
+// Mock data for the flow steps.
+const initialFlowSteps: FlowStep[] = [
   { id: 1, title: 'Project Type', type: 'Step 1', description: 'What are you looking to build?' },
   { id: 2, title: 'Service Type', type: 'Step 2', description: 'Choose a service.' },
   { id: 3, title: 'Project Stage', type: 'Step 3', description: 'Choose the stage of your project.' },
@@ -28,7 +47,70 @@ const flowSteps = [
   { id: 12, title: 'Results', type: 'Results', description: 'Show the project estimate.' },
 ];
 
-function FlowStepCard({ step }: { step: typeof flowSteps[0] }) {
+function EditStepDialog({
+  step,
+  isOpen,
+  onOpenChange,
+  onSave,
+}: {
+  step: FlowStep | null;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSave: (updatedStep: FlowStep) => void;
+}) {
+  const [editedStep, setEditedStep] = useState<FlowStep | null>(step);
+
+  React.useEffect(() => {
+    setEditedStep(step);
+  }, [step]);
+
+  if (!editedStep) return null;
+
+  const handleSave = () => {
+    onSave(editedStep);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Step: {step?.title}</DialogTitle>
+          <DialogDescription>
+            Modify the details for this step in your flow.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="step-title">Title</Label>
+            <Input
+              id="step-title"
+              value={editedStep.title}
+              onChange={(e) => setEditedStep({ ...editedStep, title: e.target.value })}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="step-description">Description</Label>
+            <Textarea
+              id="step-description"
+              value={editedStep.description}
+              onChange={(e) => setEditedStep({ ...editedStep, description: e.target.value })}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button onClick={handleSave}>Save Changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+
+function FlowStepCard({ step, onEdit }: { step: FlowStep, onEdit: (step: FlowStep) => void }) {
   return (
     <Card className="w-72 shadow-md hover:shadow-lg transition-shadow bg-card">
        <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -47,7 +129,7 @@ function FlowStepCard({ step }: { step: typeof flowSteps[0] }) {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onEdit(step)}>
                 <Edit className="mr-2 h-4 w-4" />
                 <span>Edit</span>
               </DropdownMenuItem>
@@ -67,6 +149,20 @@ function FlowStepCard({ step }: { step: typeof flowSteps[0] }) {
 }
 
 export function FlowCanvas() {
+  const [steps, setSteps] = useState<FlowStep[]>(initialFlowSteps);
+  const [editingStep, setEditingStep] = useState<FlowStep | null>(null);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+
+  const handleEditClick = (step: FlowStep) => {
+    setEditingStep(step);
+    setIsEditDialogOpen(true);
+  };
+
+  const handleSaveStep = (updatedStep: FlowStep) => {
+    setSteps(steps.map(s => s.id === updatedStep.id ? updatedStep : s));
+  };
+
+
   return (
     <div className="space-y-4">
       <Card>
@@ -79,8 +175,8 @@ export function FlowCanvas() {
         <CardContent>
           <div className="relative rounded-lg border border-dashed bg-muted/50 p-8 min-h-[500px]">
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-              {flowSteps.map((step) => (
-                <FlowStepCard key={step.id} step={step} />
+              {steps.map((step) => (
+                <FlowStepCard key={step.id} step={step} onEdit={handleEditClick} />
               ))}
                 <Button variant="outline" className="w-72 h-full min-h-[150px] border-dashed flex flex-col gap-2 items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary">
                     <Plus className="h-8 w-8" />
@@ -90,6 +186,12 @@ export function FlowCanvas() {
           </div>
         </CardContent>
       </Card>
+      <EditStepDialog
+        step={editingStep}
+        isOpen={isEditDialogOpen}
+        onOpenChange={setIsEditDialogOpen}
+        onSave={handleSaveStep}
+      />
     </div>
   );
 }