fix: Update Quick Actions page with PageHeader and wizard flow

frontend/src/pages/TouchPointPage.tsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { batchesApi, Batch } from '../lib/batchesApi';
-import { touchPointsApi, PlantTouchPoint, IPMSchedule } from '../lib/touchPointsApi';
+import { touchPointsApi } from '../lib/touchPointsApi';
-import { Loader2, Droplets, Utensils, Scissors, Dumbbell, Search, ShieldCheck, Shovel, Sprout } from 'lucide-react';
+import { Loader2, Droplets, Utensils, Scissors, Dumbbell, Search, ShieldCheck, Shovel, Sprout, Fingerprint } from 'lucide-react';
+import { PageHeader } from '../components/layout/PageHeader';
 
 export default function TouchPointPage() {
     const navigate = useNavigate();
@@ -57,77 +58,89 @@ export default function TouchPointPage() {
 
     if (isLoading) return <div className="flex justify-center p-8"><Loader2 className="animate-spin" /></div>;
 
-    if (!selectedBatch) {
+    return (
-        return (
+        <div className="space-y-6">
-            <div className="space-y-4">
+            <PageHeader
-                <h1 className="text-2xl font-bold">Select Batch</h1>
+                title="Quick Actions"
+                description="Record plant interactions and tasks efficiently"
+                icon={Fingerprint}
+                iconColor="text-purple-600"
+            />
+
+            {!selectedBatch ? (
                 <div className="grid gap-4">
+                    <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Select Batch</h3>
                     {batches.map(batch => (
                         <button
                             key={batch.id}
                             onClick={() => setSelectedBatch(batch)}
-                            className="p-4 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 text-left hover:border-emerald-500 transition-colors"
+                            className="p-4 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 text-left hover:border-emerald-500 transition-colors group"
                         >
-                            <div className="font-bold text-lg">{batch.name}</div>
+                            <div className="font-bold text-lg text-slate-900 dark:text-white group-hover:text-emerald-600 transition-colors">
+                                {batch.name?.replace('[DEMO] ', '')}
+                            </div>
                             <div className="text-sm text-slate-500">{batch.strain}</div>
                         </button>
                     ))}
+                    {batches.length === 0 && (
+                        <div className="text-center py-12 text-slate-500">
+                            No active batches found.
+                        </div>
+                    )}
                 </div>
-            </div>
+            ) : !actionType ? (
-        );
+                <div className="space-y-6">
-    }
+                    <button onClick={() => setSelectedBatch(null)} className="text-sm text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors">
+                        ← Back to Batches
+                    </button>
+                    <div className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-emerald-500/20 shadow-sm">
+                        <h2 className="text-xl font-bold text-slate-900 dark:text-white">{selectedBatch.name?.replace('[DEMO] ', '')}</h2>
+                        <p className="text-sm text-slate-500">Select an action to record</p>
+                    </div>
 
-    if (!actionType) {
+                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-        return (
+                        {actions.map(action => (
-            <div className="space-y-6">
+                            <button
-                <button onClick={() => setSelectedBatch(null)} className="text-sm text-slate-500">← Back to Batches</button>
+                                key={action.id}
-                <div className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-emerald-500/20">
+                                onClick={() => setActionType(action.id)}
-                    <h2 className="text-xl font-bold">{selectedBatch.name}</h2>
+                                className={`p-6 rounded-xl border-2 flex flex-col items-center gap-3 transition-all active:scale-95 hover:shadow-md ${action.color}`}
-                    <p className="text-sm text-slate-500">Record Interaction</p>
+                            >
+                                <action.icon className="w-8 h-8" />
+                                <span className="font-bold">{action.label}</span>
+                            </button>
+                        ))}
+                    </div>
                 </div>
+            ) : (
+                <div className="space-y-6">
+                    <button onClick={() => setActionType(null)} className="text-sm text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors">
+                        ← Back to Actions
+                    </button>
+
+                    <h1 className="text-2xl font-bold flex items-center gap-2">
+                        {actions.find(a => a.id === actionType)?.label}
+                        <span className="text-slate-400">for {selectedBatch.name?.replace('[DEMO] ', '')}</span>
+                    </h1>
+
+                    <div className="space-y-4">
+                        <label className="block text-sm font-medium text-slate-900 dark:text-white">Notes (Optional)</label>
+                        <textarea
+                            value={notes}
+                            onChange={e => setNotes(e.target.value)}
+                            className="w-full p-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm h-32 focus:ring-2 focus:ring-emerald-500 outline-none"
+                            placeholder="Add details..."
+                        />
 
-                <div className="grid grid-cols-2 gap-4">
-                    {actions.map(action => (
                         <button
-                            key={action.id}
+                            onClick={handleSubmit}
-                            onClick={() => setActionType(action.id)}
+                            disabled={submitting}
-                            className={`p-6 rounded-xl border-2 flex flex-col items-center gap-3 transition-all active:scale-95 ${action.color}`}
+                            className="w-full py-4 bg-emerald-600 text-white font-bold rounded-xl shadow-lg hover:bg-emerald-700 disabled:opacity-50 transition-colors"
                         >
-                            <action.icon className="w-8 h-8" />
+                            {submitting ? 'Saving...' : 'Save Record'}
-                            <span className="font-bold">{action.label}</span>
                         </button>
-                    ))}
+                    </div>
                 </div>
-            </div>
+            )}
-        );
-    }
-
-    return (
-        <div className="space-y-6">
-            <button onClick={() => setActionType(null)} className="text-sm text-slate-500">← Back to Actions</button>
-
-            <h1 className="text-2xl font-bold flex items-center gap-2">
-                {actions.find(a => a.id === actionType)?.label}
-                <span className="text-slate-400">for {selectedBatch.name}</span>
-            </h1>
-
-            <div className="space-y-4">
-                <label className="block text-sm font-medium">Notes (Optional)</label>
-                <textarea
-                    value={notes}
-                    onChange={e => setNotes(e.target.value)}
-                    className="w-full p-4 rounded-xl border bg-white dark:bg-slate-800 shadow-sm h-32"
-                    placeholder="Add details..."
-                />
-
-                <button
-                    onClick={handleSubmit}
-                    disabled={submitting}
-                    className="w-full py-4 bg-emerald-600 text-white font-bold rounded-xl shadow-lg hover:bg-emerald-700 disabled:opacity-50"
-                >
-                    {submitting ? 'Saving...' : 'Save Record'}
-                </button>
-            </div>
         </div>
     );
 }