Spaces:
Build error
Build error
| import { useState } from 'react'; | |
| import { | |
| Bot, | |
| Package, | |
| Settings, | |
| Play, | |
| Pause, | |
| RotateCcw, | |
| CheckCircle, | |
| AlertCircle, | |
| Clock, | |
| MapPin, | |
| Wrench | |
| } from 'lucide-react'; | |
| import { useAWPStore } from '../store/awpStore'; | |
| import { AIWorkPackageGenerator } from './AIWorkPackageGenerator'; | |
| import { ElementMetadata } from './ElementMetadata'; | |
| const tabs = [ | |
| { id: 'metadata', label: 'Metadata', icon: Settings }, | |
| { id: 'ai-wp', label: 'AI WP Generator', icon: Bot }, | |
| { id: 'packages', label: 'Work Packages', icon: Package }, | |
| ]; | |
| export function MetadataPanel() { | |
| const [activeTab, setActiveTab] = useState('metadata'); | |
| const { selectedElement, workPackages } = useAWPStore(); | |
| const renderTabContent = () => { | |
| switch (activeTab) { | |
| case 'metadata': | |
| return <ElementMetadata elementId={selectedElement} />; | |
| case 'ai-wp': | |
| return <AIWorkPackageGenerator />; | |
| case 'packages': | |
| return <WorkPackageList packages={workPackages} />; | |
| default: | |
| return null; | |
| } | |
| }; | |
| return ( | |
| <div className="h-full bg-industrial-800 flex flex-col"> | |
| {/* Tab Navigation */} | |
| <div className="flex border-b border-industrial-600"> | |
| {tabs.map((tab) => { | |
| const Icon = tab.icon; | |
| return ( | |
| <button | |
| key={tab.id} | |
| onClick={() => setActiveTab(tab.id)} | |
| className={`flex-1 flex items-center justify-center gap-2 py-3 px-2 text-xs font-medium transition-colors ${ | |
| activeTab === tab.id | |
| ? 'text-accent-cyan border-b-2 border-accent-cyan bg-accent-cyan/10' | |
| : 'text-industrial-400 hover:text-industrial-200 hover:bg-industrial-700' | |
| }`} | |
| > | |
| <Icon className="w-4 h-4" /> | |
| <span className="hidden sm:inline">{tab.label}</span> | |
| </button> | |
| ); | |
| })} | |
| </div> | |
| {/* Tab Content */} | |
| <div className="flex-1 overflow-auto"> | |
| {renderTabContent()} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| function WorkPackageList({ packages }) { | |
| if (packages.length === 0) { | |
| return ( | |
| <div className="h-full flex flex-col items-center justify-center p-6 text-center"> | |
| <Package className="w-12 h-12 text-industrial-600 mb-3" /> | |
| <h3 className="text-sm font-medium text-industrial-300 mb-1">No Work Packages</h3> | |
| <p className="text-xs text-industrial-500"> | |
| Use the AI WP Generator to create installation work packages | |
| </p> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="p-3 space-y-2"> | |
| {packages.map((wp) => ( | |
| <div | |
| key={wp.id} | |
| className="p-3 bg-industrial-700 rounded-lg border border-industrial-600 hover:border-accent-cyan/50 transition-colors" | |
| > | |
| <div className="flex items-start justify-between mb-2"> | |
| <div> | |
| <h4 className="text-sm font-medium text-white">{wp.name}</h4> | |
| <p className="text-xs text-industrial-400">{wp.id}</p> | |
| </div> | |
| <span className={`px-2 py-0.5 rounded text-xs ${ | |
| wp.status === 'optimized' ? 'bg-status-installed/20 text-status-installed' : | |
| wp.status === 'pending' ? 'bg-status-ready/20 text-status-ready' : | |
| 'bg-status-constrained/20 text-status-constrained' | |
| }`}> | |
| {wp.status} | |
| </span> | |
| </div> | |
| <div className="grid grid-cols-2 gap-2 text-xs"> | |
| <div className="flex items-center gap-1.5 text-industrial-300"> | |
| <Clock className="w-3 h-3" /> | |
| <span>{wp.duration}h</span> | |
| </div> | |
| <div className="flex items-center gap-1.5 text-industrial-300"> | |
| <MapPin className="w-3 h-3" /> | |
| <span>{wp.location}</span> | |
| </div> | |
| <div className="flex items-center gap-1.5 text-industrial-300"> | |
| <Wrench className="w-3 h-3" /> | |
| <span>{wp.crew} crew</span> | |
| </div> | |
| <div className="flex items-center gap-1.5 text-industrial-300"> | |
| <CheckCircle className="w-3 h-3" /> | |
| <span>{wp.elements.length} elements</span> | |
| </div> | |
| </div> | |
| {wp.constraints.length > 0 && ( | |
| <div className="mt-2 pt-2 border-t border-industrial-600"> | |
| <p className="text-xs text-industrial-400 mb-1">Constraints:</p> | |
| <div className="flex flex-wrap gap-1"> | |
| {wp.constraints.map((c, i) => ( | |
| <span key={i} className="px-1.5 py-0.5 bg-industrial-600 rounded text-xs text-industrial-300"> | |
| {c} | |
| </span> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| ))} | |
| </div> | |
| ); | |
| } |