feat: Complete JTBD-aligned bakery dashboard redesign
Implements comprehensive dashboard redesign based on Jobs To Be Done methodology
focused on answering: "What requires my attention right now?"
## Backend Implementation
### Dashboard Service (NEW)
- Health status calculation (green/yellow/red traffic light)
- Action queue prioritization (critical/important/normal)
- Orchestration summary with narrative format
- Production timeline transformation
- Insights calculation and consequence prediction
### API Endpoints (NEW)
- GET /dashboard/health-status - Overall bakery health indicator
- GET /dashboard/orchestration-summary - What system did automatically
- GET /dashboard/action-queue - Prioritized tasks requiring attention
- GET /dashboard/production-timeline - Today's production schedule
- GET /dashboard/insights - Key metrics (savings, inventory, waste, deliveries)
### Enhanced Models
- PurchaseOrder: Added reasoning, consequence, reasoning_data fields
- ProductionBatch: Added reasoning, reasoning_data fields
- Enables transparency into automation decisions
## Frontend Implementation
### API Hooks (NEW)
- useBakeryHealthStatus() - Real-time health monitoring
- useOrchestrationSummary() - System transparency
- useActionQueue() - Prioritized action management
- useProductionTimeline() - Production tracking
- useInsights() - Glanceable metrics
### Dashboard Components (NEW)
- HealthStatusCard: Traffic light indicator with checklist
- ActionQueueCard: Prioritized actions with reasoning/consequences
- OrchestrationSummaryCard: Narrative of what system did
- ProductionTimelineCard: Chronological production view
- InsightsGrid: 2x2 grid of key metrics
### Main Dashboard Page (REPLACED)
- Complete rewrite with mobile-first design
- All sections integrated with error handling
- Real-time refresh and quick action links
- Old dashboard backed up as DashboardPage.legacy.tsx
## Key Features
### Automation-First
- Shows what orchestrator did overnight
- Builds trust through transparency
- Explains reasoning for all automated decisions
### Action-Oriented
- Prioritizes tasks over information display
- Clear consequences for each action
- Large touch-friendly buttons
### Progressive Disclosure
- Shows 20% of info that matters 80% of time
- Expandable details when needed
- No overwhelming metrics
### Mobile-First
- One-handed operation
- Large touch targets (min 44px)
- Responsive grid layouts
### Trust-Building
- Narrative format ("I planned your day")
- Reasoning inputs transparency
- Clear status indicators
## User Segments Supported
1. Solo Bakery Owner (Primary)
- Simple health indicator
- Action checklist (max 3-5 items)
- Mobile-optimized
2. Multi-Location Owner
- Multi-tenant support (existing)
- Comparison capabilities
- Delegation ready
3. Enterprise/Central Bakery (Future)
- Network topology support
- Advanced analytics ready
## JTBD Analysis Delivered
Main Job: "Help me quickly understand bakery status and know what needs my intervention"
Emotional Jobs Addressed:
- Feel in control despite automation
- Reduce daily anxiety
- Feel competent with technology
- Trust system as safety net
Social Jobs Addressed:
- Demonstrate professional management
- Avoid being bottleneck
- Show sustainability
## Technical Stack
Backend: Python, FastAPI, SQLAlchemy, PostgreSQL
Frontend: React, TypeScript, TanStack Query, Tailwind CSS
Architecture: Microservices with circuit breakers
## Breaking Changes
- Complete dashboard page rewrite (old version backed up)
- New API endpoints require orchestrator service deployment
- Database migrations needed for reasoning fields
## Migration Required
Run migrations to add new model fields:
- purchase_orders: reasoning, consequence, reasoning_data
- production_batches: reasoning, reasoning_data
## Documentation
See DASHBOARD_REDESIGN_SUMMARY.md for complete implementation details,
JTBD analysis, success metrics, and deployment guide.
BREAKING CHANGE: Dashboard page completely redesigned with new data structures
This commit is contained in:
Claude
241
frontend/src/components/dashboard/OrchestrationSummaryCard.tsx
Normal file
241
frontend/src/components/dashboard/OrchestrationSummaryCard.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
// ================================================================
|
||||
// frontend/src/components/dashboard/OrchestrationSummaryCard.tsx
|
||||
// ================================================================
|
||||
/**
|
||||
* Orchestration Summary Card - What the system did for you
|
||||
*
|
||||
* Builds trust by showing transparency into automation decisions.
|
||||
* Narrative format makes it feel like a helpful assistant.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Bot,
|
||||
TrendingUp,
|
||||
Package,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
FileText,
|
||||
Users,
|
||||
Database,
|
||||
Brain,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from 'lucide-react';
|
||||
import { OrchestrationSummary } from '../../api/hooks/newDashboard';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
interface OrchestrationSummaryCardProps {
|
||||
summary: OrchestrationSummary;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSummaryCardProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-md p-6">
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gray-200 rounded-full"></div>
|
||||
<div className="h-6 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle case where no orchestration has run yet
|
||||
if (summary.status === 'no_runs') {
|
||||
return (
|
||||
<div className="bg-blue-50 border-2 border-blue-200 rounded-xl p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<Bot className="w-10 h-10 text-blue-600 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-blue-900 mb-2">
|
||||
Ready to Plan Your Bakery Day
|
||||
</h3>
|
||||
<p className="text-blue-700 mb-4">{summary.message}</p>
|
||||
<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors duration-200">
|
||||
Run Daily Planning
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const runTime = summary.runTimestamp
|
||||
? formatDistanceToNow(new Date(summary.runTimestamp), { addSuffix: true })
|
||||
: 'recently';
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl shadow-md p-6 border border-purple-100">
|
||||
{/* Header */}
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="bg-purple-100 p-3 rounded-full">
|
||||
<Bot className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-1">
|
||||
Last Night I Planned Your Day
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Orchestration run #{summary.runNumber} • {runTime}</span>
|
||||
{summary.durationSeconds && (
|
||||
<span className="text-gray-400">• Took {summary.durationSeconds}s</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Purchase Orders Created */}
|
||||
{summary.purchaseOrdersCreated > 0 && (
|
||||
<div className="bg-white rounded-lg p-4 mb-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
<h3 className="font-bold text-gray-900">
|
||||
Created {summary.purchaseOrdersCreated} purchase order
|
||||
{summary.purchaseOrdersCreated !== 1 ? 's' : ''}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{summary.purchaseOrdersSummary.length > 0 && (
|
||||
<ul className="space-y-2 ml-8">
|
||||
{summary.purchaseOrdersSummary.map((po, index) => (
|
||||
<li key={index} className="text-sm text-gray-700">
|
||||
<span className="font-medium">{po.supplierName}</span>
|
||||
{' • '}
|
||||
{po.itemCategories.slice(0, 2).join(', ')}
|
||||
{po.itemCategories.length > 2 && ` +${po.itemCategories.length - 2} more`}
|
||||
{' • '}
|
||||
<span className="font-semibold">€{po.totalAmount.toFixed(2)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Production Batches Created */}
|
||||
{summary.productionBatchesCreated > 0 && (
|
||||
<div className="bg-white rounded-lg p-4 mb-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
<h3 className="font-bold text-gray-900">
|
||||
Scheduled {summary.productionBatchesCreated} production batch
|
||||
{summary.productionBatchesCreated !== 1 ? 'es' : ''}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{summary.productionBatchesSummary.length > 0 && (
|
||||
<ul className="space-y-2 ml-8">
|
||||
{summary.productionBatchesSummary.slice(0, expanded ? undefined : 3).map((batch, index) => (
|
||||
<li key={index} className="text-sm text-gray-700">
|
||||
<span className="font-semibold">{batch.quantity}</span> {batch.productName}
|
||||
{' • '}
|
||||
<span className="text-gray-500">
|
||||
ready by {new Date(batch.readyByTime).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
})}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{summary.productionBatchesSummary.length > 3 && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="ml-8 mt-2 flex items-center gap-1 text-sm text-purple-600 hover:text-purple-800 font-medium"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
Show less
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
Show {summary.productionBatchesSummary.length - 3} more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No actions created */}
|
||||
{summary.purchaseOrdersCreated === 0 && summary.productionBatchesCreated === 0 && (
|
||||
<div className="bg-white rounded-lg p-4 mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-gray-400" />
|
||||
<p className="text-gray-600">No new actions needed - everything is on track!</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reasoning Inputs (How decisions were made) */}
|
||||
<div className="bg-white/60 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Brain className="w-5 h-5 text-purple-600" />
|
||||
<h3 className="font-bold text-gray-900">Based on:</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 ml-7">
|
||||
{summary.reasoningInputs.customerOrders > 0 && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Users className="w-4 h-4 text-gray-600" />
|
||||
<span className="text-gray-700">
|
||||
{summary.reasoningInputs.customerOrders} customer order
|
||||
{summary.reasoningInputs.customerOrders !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{summary.reasoningInputs.historicalDemand && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<TrendingUp className="w-4 h-4 text-gray-600" />
|
||||
<span className="text-gray-700">Historical demand</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{summary.reasoningInputs.inventoryLevels && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Package className="w-4 h-4 text-gray-600" />
|
||||
<span className="text-gray-700">Inventory levels</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{summary.reasoningInputs.aiInsights && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Brain className="w-4 h-4 text-purple-600" />
|
||||
<span className="text-gray-700 font-medium">AI optimization</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions Required Footer */}
|
||||
{summary.userActionsRequired > 0 && (
|
||||
<div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-amber-600" />
|
||||
<p className="text-sm font-medium text-amber-900">
|
||||
{summary.userActionsRequired} item{summary.userActionsRequired !== 1 ? 's' : ''} need
|
||||
{summary.userActionsRequired === 1 ? 's' : ''} your approval before proceeding
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user