revert back... tyou are trylly awfull

src/app/admin/flows/[id]/page.tsx

@@ -1,161 +1,156 @@
 
 'use client';
 
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
+import { useEffect, useState } from 'react';
+import { useActionState } from 'react';
+import { useRouter } from 'next/navigation';
+import { getFlow, saveFlow, type Flow } from '@/lib/actions/flows';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { Badge } from '@/components/ui/badge';
-import { 
-  Play, 
-  Share2, 
-  MessageSquare, 
-  Pencil, 
-  Settings, 
-  Bike, 
-  Footprints, 
-  MoreHorizontal,
-  Plus,
-  Minus,
-  Code2
-} from 'lucide-react';
-import { FlowNode, FlowNodeInput, FlowNodeOption, FlowNodeMessage } from '@/components/admin/flow-node';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/hooks/use-toast';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+type FlowFormPageProps = {
+  params: { id: string };
+};
+
+function SubmitButton() {
+  // useFormStatus is not used here because we are not in a form, but we can simulate the pending state
+  // from the formAction. For a real app, you might use the pending state from useFormStatus.
+  // For now, let's just show a static text.
+  return <Button type="submit">Save Changes</Button>;
+}
+
+export default function FlowFormPage({ params }: FlowFormPageProps) {
+  const [state, formAction] = useActionState(saveFlow, { success: false, message: '', errors: null });
+  const [flow, setFlow] = useState<Flow | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const isNew = params.id === 'new';
+  const pageTitle = isNew ? 'Add New Flow' : 'Edit Flow';
+  const pageDescription = isNew
+    ? 'Create a new interactive flow for your application.'
+    : 'Modify the details of an existing flow.';
+
+  useEffect(() => {
+    if (!isNew) {
+      const id = parseInt(params.id, 10);
+      if (isNaN(id)) {
+        router.push('/admin/flows');
+        return;
+      }
+      setIsLoading(true);
+      getFlow(id)
+        .then((data) => {
+          if (data) {
+            setFlow(data);
+          } else {
+            toast({
+              variant: 'destructive',
+              title: 'Error',
+              description: 'Flow not found.',
+            });
+            router.push('/admin/flows');
+          }
+        })
+        .finally(() => setIsLoading(false));
+    } else {
+      setIsLoading(false);
+    }
+  }, [params.id, isNew, router, toast]);
+
+  useEffect(() => {
+    if (state.success) {
+      toast({
+        title: 'Success!',
+        description: state.message,
+      });
+      // The redirect is handled in the server action, but as a fallback
+      router.push('/admin/flows');
+    } else if (state.message) {
+      // This handles general errors, not validation ones.
+      if(!state.errors || state.errors.length === 0) {
+        toast({
+          variant: 'destructive',
+          title: 'Error',
+          description: state.message,
+        });
+      }
+    }
+  }, [state, router, toast]);
+
+  const getError = (field: string) => {
+    return state.errors?.find(e => e.path[0] === field)?.message;
+  }
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
 
-export default function FlowEditorPage() {
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/40">
-      {/* Header */}
-      <header className="flex items-center justify-between p-2 border-b bg-background">
-        <div className="flex items-center gap-4">
-          <h1 className="text-lg font-semibold">Quick Carb Calculator</h1>
-          <nav className="flex items-center gap-2">
-            <Button variant="ghost" size="sm" className="bg-muted">Flow</Button>
-            <Button variant="ghost" size="sm">Theme</Button>
-            <Button variant="ghost" size="sm">Settings</Button>
-            <Button variant="ghost" size="sm">Share</Button>
-          </nav>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm">
-            <Share2 className="mr-2 h-4 w-4" />
-            Share
-          </Button>
-          <Button variant="outline" size="sm">
-            <Play className="mr-2 h-4 w-4" />
-            Test
-          </Button>
-          <Button size="sm">Publish</Button>
-        </div>
-      </header>
-      
-      {/* Main Content */}
-      <div className="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-2 p-2">
-        {/* Flow Canvas */}
-        <div className="lg:col-span-2 relative bg-dotted-pattern bg-background rounded-lg border overflow-hidden">
-            {/* This is a static representation. A real implementation would use a library like React Flow. */}
-            <div className="absolute top-10 left-10">
-                <FlowNode title="Start" icon={<Play />} />
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">{pageTitle}</h1>
+        <p className="mt-2 text-muted-foreground">{pageDescription}</p>
       </div>
 
-            <div className="absolute top-10 left-64 w-80">
-                <FlowNode title="Sport">
-                    <FlowNodeMessage text="Welcome to the Quick Carb Calculator!" />
-                    <FlowNodeMessage text="I'll help you figure out how much fuel you'll need to perform at your best. Let's get started! ✨" />
-                    <FlowNodeMessage text="First, what are you fueling for?" />
-                    <FlowNodeOption icon={<Bike />} text="Ride" />
-                    <FlowNodeOption icon={<Footprints />} text="Run" />
-                    <FlowNodeOption icon={<MoreHorizontal />} text="Other" />
-                    <div className="p-2 border rounded-md mt-2">
-                        <p className="text-xs text-muted-foreground">Default</p>
-                        <Badge variant="secondary" className="mt-1">Set Sport</Badge>
-                    </div>
-                </FlowNode>
-            </div>
+      <form action={formAction}>
+        {flow && <input type="hidden" name="id" value={flow.id} />}
 
-             <div className="absolute top-10 left-[48rem]">
-                 <FlowNode title="What sport?">
-                    <FlowNodeInput placeholder="Type your answer..." variable="Sport" />
-                 </FlowNode>
+        <Card>
+          <CardHeader>
+            <CardTitle>Flow Details</CardTitle>
+            <CardDescription>
+              Provide the name, description, and URL path for this flow.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                name="name"
+                placeholder="e.g., Cost Estimator"
+                defaultValue={flow?.name}
+                required
+              />
+              {getError('name') && <p className="text-sm text-destructive">{getError('name')}</p>}
             </div>
-
-            <div className="absolute top-64 left-[48rem]">
-                 <FlowNode title="Duration">
-                    <FlowNodeMessage text="Great! How long will you be doing this activity?" />
-                    <FlowNodeInput placeholder="Type your answer..." variable="Duration" />
-                 </FlowNode>
+            <div className="space-y-2">
+              <Label htmlFor="description">Description (Optional)</Label>
+              <Textarea
+                id="description"
+                name="description"
+                placeholder="A short description of what this flow does."
+                defaultValue={flow?.description || ''}
+              />
             </div>
-            
-            <div className="absolute top-64 left-[72rem]">
-                 <FlowNode title="Intensity">
-                    <FlowNodeMessage text="Understood! Now, how hard will you be going?" />
-                    <FlowNodeInput placeholder="Type your answer..." variable="Intensity" />
-                 </FlowNode>
-            </div>
-
-            <div className="absolute top-[34rem] left-[72rem]">
-                 <FlowNode title="AI gen">
-                    <FlowNodeMessage text="Create ..." />
-                    <Badge variant="secondary" className="mt-1">Set Assistant</Badge>
-                 </FlowNode>
-            </div>
-
-
-            {/* Canvas Controls */}
-            <div className="absolute top-4 right-4 flex flex-col gap-2">
-                <Card className="p-1">
-                    <Button variant="ghost" size="icon"><Code2 className="h-4 w-4" /></Button>
-                    <Button variant="ghost" size="icon"><MoreHorizontal className="h-4 w-4" /></Button>
-                </Card>
-                 <Card className="p-1">
-                    <Button variant="ghost" size="icon"><Plus className="h-4 w-4" /></Button>
-                     <Button variant="ghost" size="icon"><Minus className="h-4 w-4" /></Button>
-                </Card>
-            </div>
-        </div>
-
-        {/* Phone Preview */}
-        <div className="lg:col-span-1 bg-background rounded-lg border flex justify-center items-center p-4">
-            <Card className="w-full max-w-sm h-full max-h-[800px] shadow-lg flex flex-col">
-                <CardContent className="p-2 flex-1 overflow-y-auto">
-                    <div className="flex flex-col gap-3 p-2">
-                        {/* Chat messages */}
-                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs">
-                           First, what are you fueling for?
-                        </div>
-                        <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs flex items-center gap-2">
-                            <Bike className="h-4 w-4" /> Ride
-                        </div>
-                        <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs flex items-center gap-2">
-                            <Footprints className="h-4 w-4" /> Run
-                        </div>
-                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs flex items-center gap-2">
-                            <MoreHorizontal className="h-4 w-4" /> Other
-                        </div>
-
-                        <div className="p-3 rounded-lg bg-green-200 text-green-900 self-end max-w-xs flex items-center gap-2">
-                           Run <Footprints className="h-4 w-4" />
-                        </div>
-
-                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs">
-                           Great! How long will you be doing this activity?
-                        </div>
-                        <div className="p-3 rounded-lg bg-green-200 text-green-900 self-end max-w-xs">
-                           I'll try 3h30
-                        </div>
-                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs">
-                            Understood! Now, how hard will you be going?
-                        </div>
-                        <div className="p-3 rounded-lg bg-green-200 text-green-900 self-end max-w-xs">
-                           I'd say a good 8 out of 10
-                        </div>
-                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs">
-                           Total carbs: 90-120g
-                        </div>
-
+            <div className="space-y-2">
+              <Label htmlFor="path">Path</Label>
+              <Input
+                id="path"
+                name="path"
+                placeholder="/cost-estimator"
+                defaultValue={flow?.path}
+                required
+              />
+              <p className="text-xs text-muted-foreground">
+                The URL path where this flow will be accessible. Must start with a `/`.
+              </p>
+               {getError('path') && <p className="text-sm text-destructive">{getError('path')}</p>}
             </div>
           </CardContent>
+          <CardFooter>
+            <SubmitButton />
+          </CardFooter>
         </Card>
-        </div>
-      </div>
+      </form>
+
     </div>
   );
 }

src/app/globals.css

@@ -56,9 +56,4 @@
   body {
     @apply bg-background text-foreground;
   }
-  .bg-dotted-pattern {
-    background-color: hsl(var(--card));
-    background-image: radial-gradient(hsl(var(--border)) 1px, transparent 0);
-    background-size: 20px 20px;
-  }
 }

src/components/admin/flow-node.tsx

@@ -1,86 +0,0 @@
-
-'use client';
-
-import React from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { MessageSquare, Pencil, Type } from 'lucide-react';
-
-interface FlowNodeProps {
-  title: string;
-  icon?: React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export function FlowNode({ title, icon, children, className }: FlowNodeProps) {
-  return (
-    <Card className={`w-72 bg-background shadow-lg ${className}`}>
-      <CardHeader className="flex flex-row items-center justify-between p-2 border-b">
-        <div className="flex items-center gap-2">
-            {icon}
-            <CardTitle className="text-sm font-medium">{title}</CardTitle>
-        </div>
-      </CardHeader>
-      <CardContent className="p-2 space-y-2">
-        {children}
-      </CardContent>
-    </Card>
-  );
-}
-
-interface FlowNodeElementProps {
-    className?: string;
-    children?: React.ReactNode;
-}
-
-function FlowNodeElement({className, children}: FlowNodeElementProps) {
-    return (
-        <div className={`group relative p-2 text-sm rounded-md border bg-card hover:bg-muted/50 ${className}`}>
-           {children}
-            <Button variant="ghost" size="icon" className="absolute top-1 right-1 h-6 w-6 opacity-0 group-hover:opacity-100">
-                <Pencil className="h-3 w-3" />
-            </Button>
-        </div>
-    )
-}
-
-export function FlowNodeMessage({ text }: { text: string }) {
-  return (
-     <FlowNodeElement>
-        <div className="flex items-start gap-2">
-            <MessageSquare className="h-4 w-4 text-muted-foreground mt-0.5" />
-            <p className="flex-1">{text}</p>
-        </div>
-     </FlowNodeElement>
-  );
-}
-
-export function FlowNodeInput({ placeholder, variable }: { placeholder: string; variable: string }) {
-    return (
-        <FlowNodeElement>
-            <div className="flex items-start gap-2">
-                 <Type className="h-4 w-4 text-muted-foreground mt-0.5" />
-                 <div className='flex-1'>
-                    <Input disabled placeholder={placeholder} className="text-xs h-7 bg-transparent disabled:cursor-text disabled:opacity-100" />
-                    <div className="mt-2">
-                        <Badge variant="secondary">Set {variable}</Badge>
-                    </div>
-                 </div>
-            </div>
-        </FlowNodeElement>
-    )
-}
-
-export function FlowNodeOption({ text, icon }: { text: string; icon?: React.ReactNode }) {
-    return (
-        <FlowNodeElement>
-            <div className="flex items-center gap-2">
-                {icon}
-                <p>{text}</p>
-            </div>
-        </FlowNodeElement>
-    )
-}