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

fix: Expose Generate Zone button and refine styling (remove italics/caps, improve contrast)
Some checks are pending
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-27 15:03:36 -08:00
parent 1950651102
commit e88814afef
7 changed files with 37 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/index.css
View file

@ -40,7 +40,7 @@
/* Light mode text */ /* Light mode text */
--color-text-primary: #0F172A; --color-text-primary: #0F172A;
--color-text-secondary: #334155; --color-text-secondary: #334155;
--color-text-tertiary: #64748B; --color-text-tertiary: #475569;
--color-text-quaternary: #94A3B8; --color-text-quaternary: #94A3B8;
--color-text-inverse: #F9FAFB; --color-text-inverse: #F9FAFB;

14
frontend/src/pages/AuditLogPage.tsx
View file

@ -91,7 +91,7 @@ export default function AuditLogPage() {
header: 'Timestamp', header: 'Timestamp',
cell: (log) => ( cell: (log) => (
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-xs font-extra-bold text-[var(--color-text-primary)] font-mono tracking-tight"> <span className="text-xs font-bold text-[var(--color-text-primary)] font-mono tracking-tight">
{new Date(log.timestamp).toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })} {new Date(log.timestamp).toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}
</span> </span>
<span className="text-[10px] text-[var(--color-text-tertiary)] font-bold uppercase tracking-tighter"> <span className="text-[10px] text-[var(--color-text-tertiary)] font-bold uppercase tracking-tighter">
@ -122,7 +122,7 @@ export default function AuditLogPage() {
const Icon = config.icon; const Icon = config.icon;
return ( return (
<div className={cn( <div className={cn(
"inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-black uppercase tracking-[0.15em]", "inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-bold uppercase tracking-[0.15em]",
config.color config.color
)}> )}>
<Icon size={10} /> <Icon size={10} />
@ -136,7 +136,7 @@ export default function AuditLogPage() {
header: 'Resource', header: 'Resource',
cell: (log) => ( cell: (log) => (
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-xs font-bold text-[var(--color-text-primary)] uppercase italic tracking-tight"> <span className="text-xs font-bold text-[var(--color-text-primary)] tracking-tight">
{ENTITY_LABELS[log.entity] || log.entity} {ENTITY_LABELS[log.entity] || log.entity}
</span> </span>
{log.entityName && ( {log.entityName && (
@ -218,7 +218,7 @@ export default function AuditLogPage() {
> >
<Terminal size={14} className="rotate-180" /> <Terminal size={14} className="rotate-180" />
</button> </button>
<div className="flex items-center px-4 text-xs font-black text-[var(--color-text-primary)] bg-slate-100 dark:bg-slate-800 rounded border border-[var(--color-border-subtle)]"> <div className="flex items-center px-4 text-xs font-bold text-[var(--color-text-primary)] bg-slate-100 dark:bg-slate-800 rounded border border-[var(--color-border-subtle)]">
{pagination.page} / {pagination.pages} {pagination.page} / {pagination.pages}
</div> </div>
<button <button
@ -254,9 +254,9 @@ export default function AuditLogPage() {
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<Terminal size={14} className="text-[var(--color-accent)]" /> <Terminal size={14} className="text-[var(--color-accent)]" />
<h3 className="text-xs font-black text-[var(--color-text-tertiary)] uppercase tracking-[0.2em]">Transaction_Inspector</h3> <h3 className="text-xs font-bold text-[var(--color-text-tertiary)] uppercase tracking-wide">Transaction_Inspector</h3>
</div> </div>
<h3 className="text-xl font-extra-bold text-white uppercase italic tracking-tight">Record Object Detail</h3> <h3 className="text-xl font-bold text-white tracking-tight">Record Object Detail</h3>
</div> </div>
<button onClick={() => setSelectedLog(null)} className="p-2 text-[var(--color-text-tertiary)] hover:text-white transition-colors"> <button onClick={() => setSelectedLog(null)} className="p-2 text-[var(--color-text-tertiary)] hover:text-white transition-colors">
<X size={20} /> <X size={20} />
@ -283,7 +283,7 @@ export default function AuditLogPage() {
<div className="space-y-3"> <div className="space-y-3">
{Object.entries(selectedLog.changes).map(([key, val]: [string, any]) => ( {Object.entries(selectedLog.changes).map(([key, val]: [string, any]) => (
<div key={key} className="p-4 bg-slate-900/50 rounded-xl border border-slate-800/50"> <div key={key} className="p-4 bg-slate-900/50 rounded-xl border border-slate-800/50">
<div className="text-[10px] font-black text-[var(--color-text-tertiary)] mb-3 uppercase tracking-widest italic">{key}</div> <div className="text-[10px] font-bold text-[var(--color-text-tertiary)] mb-3 uppercase tracking-widest italic">{key}</div>
<div className="grid grid-cols-1 md:grid-cols-[1fr,24px,1fr] items-center gap-4"> <div className="grid grid-cols-1 md:grid-cols-[1fr,24px,1fr] items-center gap-4">
<div className="p-3 bg-[var(--color-error)]/5 border border-rose-500/10 rounded font-mono text-xs text-[var(--color-error)]/80 whitespace-pre-wrap break-all"> <div className="p-3 bg-[var(--color-error)]/5 border border-rose-500/10 rounded font-mono text-xs text-[var(--color-error)]/80 whitespace-pre-wrap break-all">
<div className="text-[8px] uppercase font-bold text-[var(--color-error)]/50 mb-1">Previous_State</div> <div className="text-[8px] uppercase font-bold text-[var(--color-error)]/50 mb-1">Previous_State</div>

8
frontend/src/pages/BatchDetailPage.tsx
View file

@ -66,11 +66,11 @@ export default function BatchDetailPage() {
<div> <div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<h1 className="text-4xl font-black tracking-tight text-[var(--color-text-primary)] uppercase italic"> <h1 className="text-4xl font-bold tracking-tight text-[var(--color-text-primary)] ">
{batch.name} {batch.name}
</h1> </h1>
<span className={cn( <span className={cn(
"px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.2em] border shadow-sm", "px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide border shadow-sm",
batch.stage === 'FLOWERING' batch.stage === 'FLOWERING'
? "bg-purple-500/10 border-purple-500/20 text-purple-500" ? "bg-purple-500/10 border-purple-500/20 text-purple-500"
: "bg-[var(--color-primary)]/10 border-emerald-500/20 text-[var(--color-primary)]" : "bg-[var(--color-primary)]/10 border-emerald-500/20 text-[var(--color-primary)]"
@ -122,7 +122,7 @@ export default function BatchDetailPage() {
{/* Vertical Timeline - Left Column */} {/* Vertical Timeline - Left Column */}
<div className="xl:col-span-3 space-y-6"> <div className="xl:col-span-3 space-y-6">
<div className="flex items-center justify-between px-2"> <div className="flex items-center justify-between px-2">
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Batch Lifecycle</h3> <h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Batch Lifecycle</h3>
<History size={14} className="text-[var(--color-text-tertiary)]" /> <History size={14} className="text-[var(--color-text-tertiary)]" />
</div> </div>
@ -347,7 +347,7 @@ function TimelineEvent({ status, title, date, desc, icon: Icon }: any) {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Icon size={12} className={status === 'completed' ? "text-[var(--color-primary)]" : "text-[var(--color-text-tertiary)]"} /> <Icon size={12} className={status === 'completed' ? "text-[var(--color-primary)]" : "text-[var(--color-text-tertiary)]"} />
<h5 className={cn( <h5 className={cn(
"text-[11px] font-black uppercase tracking-widest", "text-[11px] font-bold uppercase tracking-widest",
status === 'completed' ? "text-[var(--color-text-primary)]" : "text-[var(--color-text-tertiary)]" status === 'completed' ? "text-[var(--color-text-primary)]" : "text-[var(--color-text-tertiary)]"
)}>{title}</h5> )}>{title}</h5>
</div> </div>

2
frontend/src/pages/BatchesPage.tsx
View file

@ -29,7 +29,7 @@ function StageBadge({ stage }: { stage: string }) {
const Icon = info.icon; const Icon = info.icon;
return ( return (
<span className={cn("inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-black uppercase tracking-widest", info.color)}> <span className={cn("inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-bold uppercase tracking-widest", info.color)}>
{Icon && <Icon size={10} />} {Icon && <Icon size={10} />}
{info.label} {info.label}
</span> </span>

4
frontend/src/pages/RoomDetailPage.tsx
View file

@ -65,11 +65,11 @@ export default function RoomDetailPage() {
<div> <div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<h1 className="text-4xl font-black tracking-tight text-[var(--color-text-primary)] uppercase italic"> <h1 className="text-4xl font-bold tracking-tight text-[var(--color-text-primary)] ">
{room.name?.replace('[DEMO] ', '')} {room.name?.replace('[DEMO] ', '')}
</h1> </h1>
<span className={cn( <span className={cn(
"px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.2em] border shadow-sm", "px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide border shadow-sm",
room.type === 'FLOWER' room.type === 'FLOWER'
? "bg-purple-500/10 border-purple-500/20 text-purple-500" ? "bg-purple-500/10 border-purple-500/20 text-purple-500"
: "bg-[var(--color-primary)]/10 border-emerald-500/20 text-[var(--color-primary)]" : "bg-[var(--color-primary)]/10 border-emerald-500/20 text-[var(--color-primary)]"

22
frontend/src/pages/RoomsPage.tsx
View file

@ -60,22 +60,22 @@ export default function RoomsPage() {
</div> </div>
</div> </div>
{isManager && (
<div className="flex gap-3"> <div className="flex gap-3">
<button <button
onClick={() => setIsWizardOpen(true)} onClick={() => setIsWizardOpen(true)}
className="flex items-center gap-2 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/50 px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all" className="flex items-center gap-2 bg-[var(--color-primary)]/10 hover:bg-[var(--color-primary)]/20 text-[var(--color-primary)] border border-[var(--color-primary)]/20 px-4 py-2.5 rounded-xl font-bold text-sm shadow-sm transition-all"
> >
<Wand2 size={18} /> <Wand2 size={18} />
Generate Zone Generate Zone
</button> </button>
{isManager && (
<button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all"> <button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all">
<Plus size={18} /> <Plus size={18} />
Add Zone Add Zone
</button> </button>
</div>
)} )}
</div> </div>
</div>
{/* KPI Strip */} {/* KPI Strip */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
@ -171,7 +171,7 @@ export default function RoomsPage() {
<div className={cn("px-5 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between", accentClasses[accent as keyof typeof accentClasses])}> <div className={cn("px-5 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between", accentClasses[accent as keyof typeof accentClasses])}>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Icon size={16} /> <Icon size={16} />
<span className="text-[10px] font-black uppercase tracking-[0.2em]">{room.type}</span> <span className="text-xs font-bold">{room.type}</span>
</div> </div>
<ArrowRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" /> <ArrowRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
</div> </div>
@ -179,10 +179,10 @@ export default function RoomsPage() {
{/* Body */} {/* Body */}
<div className="p-5 space-y-4"> <div className="p-5 space-y-4">
<div> <div>
<h3 className="text-lg font-extra-bold text-[var(--color-text-primary)] uppercase italic tracking-tight"> <h3 className="text-lg font-bold text-[var(--color-text-primary)]">
{room.name?.replace('[DEMO] ', '')} {room.name?.replace('[DEMO] ', '')}
</h3> </h3>
<p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest mt-1"> <p className="text-xs font-medium text-[var(--color-text-tertiary)] mt-1">
{room.sqft?.toLocaleString()} sqft • Capacity {room.capacity || '—'} {room.sqft?.toLocaleString()} sqft • Capacity {room.capacity || '—'}
</p> </p>
</div> </div>
@ -190,18 +190,18 @@ export default function RoomsPage() {
{/* Environmental Vitals */} {/* Environmental Vitals */}
<div className="grid grid-cols-2 gap-4 py-4 border-y border-[var(--color-border-subtle)]"> <div className="grid grid-cols-2 gap-4 py-4 border-y border-[var(--color-border-subtle)]">
<div className="text-center"> <div className="text-center">
<div className="flex items-center justify-center gap-1.5 text-xl font-black tracking-tighter text-[var(--color-text-primary)]"> <div className="flex items-center justify-center gap-1.5 text-xl font-bold tracking-tight text-[var(--color-text-primary)]">
<Thermometer size={14} className="text-[var(--color-error)]" /> <Thermometer size={14} className="text-[var(--color-error)]" />
{room.targetTemp || '—'}°F {room.targetTemp || '—'}°F
</div> </div>
<span className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">Target Temp</span> <span className="text-xs font-medium text-[var(--color-text-tertiary)]">Target Temp</span>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="flex items-center justify-center gap-1.5 text-xl font-black tracking-tighter text-[var(--color-text-primary)]"> <div className="flex items-center justify-center gap-1.5 text-xl font-bold tracking-tight text-[var(--color-text-primary)]">
<Droplets size={14} className="text-[var(--color-accent)]" /> <Droplets size={14} className="text-[var(--color-accent)]" />
{room.targetHumidity || '—'}% {room.targetHumidity || '—'}%
</div> </div>
<span className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">Target RH</span> <span className="text-xs font-medium text-[var(--color-text-tertiary)]">Target RH</span>
</div> </div>
</div> </div>
@ -213,7 +213,7 @@ export default function RoomsPage() {
{room.batches?.length || 0} Active Batch{room.batches?.length === 1 ? '' : 'es'} {room.batches?.length || 0} Active Batch{room.batches?.length === 1 ? '' : 'es'}
</span> </span>
</div> </div>
<span className="text-[10px] font-bold text-[var(--color-primary)] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity"> <span className="text-xs font-bold text-[var(--color-primary)] opacity-0 group-hover:opacity-100 transition-opacity">
Enter → Enter →
</span> </span>
</div> </div>

6
frontend/src/pages/TasksPage.tsx
View file

@ -141,7 +141,7 @@ export default function TasksPage() {
{/* Active Tasks Section */} {/* Active Tasks Section */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between px-2"> <div className="flex items-center justify-between px-2">
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Active Board</h3> <h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Active Board</h3>
<span className="text-[10px] font-bold text-[var(--color-text-tertiary)]">{pendingTasks.length} ITEMS</span> <span className="text-[10px] font-bold text-[var(--color-text-tertiary)]">{pendingTasks.length} ITEMS</span>
</div> </div>
@ -176,7 +176,7 @@ export default function TasksPage() {
{completedTasks.length > 0 && ( {completedTasks.length > 0 && (
<div className="space-y-4 pt-4 border-t border-[var(--color-border-subtle)]"> <div className="space-y-4 pt-4 border-t border-[var(--color-border-subtle)]">
<div className="flex items-center justify-between px-2"> <div className="flex items-center justify-between px-2">
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Archive / Verification</h3> <h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Archive / Verification</h3>
<button className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest hover:text-[var(--color-primary)]">View History</button> <button className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest hover:text-[var(--color-primary)]">View History</button>
</div> </div>
<div className="opacity-60 saturate-50 hover:opacity-100 transition-all duration-500 space-y-2"> <div className="opacity-60 saturate-50 hover:opacity-100 transition-all duration-500 space-y-2">
@ -266,7 +266,7 @@ function TaskRow({ task, onComplete }: any) {
{task.title} {task.title}
</h4> </h4>
{task.priority === 'URGENT' && ( {task.priority === 'URGENT' && (
<span className="px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-[0.2em] bg-[var(--color-error)] text-white animate-pulse"> <span className="px-2 py-0.5 rounded text-[8px] font-bold uppercase tracking-wide bg-[var(--color-error)] text-white animate-pulse">
Priority: High Priority: High
</span> </span>
)} )}