malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Update Quick Actions page with PageHeader and wizard flow
Some checks failed
Deploy to Production / deploy (push) Failing after 0s
Details
Test / backend-test (push) Failing after 0s
Details
Test / frontend-test (push) Failing after 0s
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-11 11:33:39 -08:00
parent f8a368be62
commit d05fcf6b74
1 changed files with 69 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
frontend/src/pages/TouchPointPage.tsx
View file

@ -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 { Loader2, Droplets, Utensils, Scissors, Dumbbell, Search, ShieldCheck, Shovel, Sprout } from 'lucide-react';
import { touchPointsApi } from '../lib/touchPointsApi';
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,41 +58,52 @@ export default function TouchPointPage() {
if (isLoading) return <div className="flex justify-center p-8"><Loader2 className="animate-spin" /></div>;
if (!selectedBatch) {
return (
<div className="space-y-4">
<h1 className="text-2xl font-bold">Select Batch</h1>
<div className="space-y-6">
<PageHeader
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>
);
}
if (!actionType) {
return (
) : !actionType ? (
<div className="space-y-6">
<button onClick={() => setSelectedBatch(null)} className="text-sm text-slate-500">← Back to Batches</button>
<div className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-emerald-500/20">
<h2 className="text-xl font-bold">{selectedBatch.name}</h2>
<p className="text-sm text-slate-500">Record Interaction</p>
<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>
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
{actions.map(action => (
<button
key={action.id}
onClick={() => setActionType(action.id)}
className={`p-6 rounded-xl border-2 flex flex-col items-center gap-3 transition-all active:scale-95 ${action.color}`}
className={`p-6 rounded-xl border-2 flex flex-col items-center gap-3 transition-all active:scale-95 hover:shadow-md ${action.color}`}
>
<action.icon className="w-8 h-8" />
<span className="font-bold">{action.label}</span>
@ -99,35 +111,36 @@ export default function TouchPointPage() {
))}
</div>
</div>
);
}
return (
) : (
<div className="space-y-6">
<button onClick={() => setActionType(null)} className="text-sm text-slate-500">← Back to Actions</button>
<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}</span>
<span className="text-slate-400">for {selectedBatch.name?.replace('[DEMO] ', '')}</span>
</h1>
<div className="space-y-4">
<label className="block text-sm font-medium">Notes (Optional)</label>
<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 bg-white dark:bg-slate-800 shadow-sm h-32"
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..."
/>
<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"
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"
>
{submitting ? 'Saving...' : 'Save Record'}
</button>
</div>
</div>
)}
</div>
);
}