File size: 3,864 Bytes
b010f1b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
// LayoutOptionsPanel - Display 3 layout options with metrics
import React from 'react';
import { Download, Check } from 'lucide-react';
import type { LayoutOption } from '../types';
interface LayoutOptionsPanelProps {
options: LayoutOption[];
selectedOptionId: number | null;
onSelect: (optionId: number) => void;
onExport: (optionId: number) => void;
loading: boolean;
}
export const LayoutOptionsPanel: React.FC<LayoutOptionsPanelProps> = ({
options,
selectedOptionId,
onSelect,
onExport,
loading,
}) => {
if (options.length === 0) {
return (
<div className="options-panel empty">
<p>Generate layouts to see optimization options</p>
</div>
);
}
return (
<div className="options-panel">
<h3>Layout Options</h3>
<div className="options-grid">
{options.map((option) => (
<div
key={option.id}
className={`option-card ${selectedOptionId === option.id ? 'selected' : ''}`}
onClick={() => onSelect(option.id)}
>
<div className="option-header">
<span className="option-icon">{option.icon}</span>
<h4>{option.name}</h4>
{selectedOptionId === option.id && (
<Check size={18} className="selected-check" />
)}
</div>
<p className="option-description">{option.description}</p>
<div className="option-metrics">
<div className="metric">
<span className="metric-label">Plots</span>
<span className="metric-value">{option.metrics.total_plots}</span>
</div>
<div className="metric">
<span className="metric-label">Total Area</span>
<span className="metric-value">{option.metrics.total_area.toLocaleString()} m²</span>
</div>
<div className="metric">
<span className="metric-label">Avg Size</span>
<span className="metric-value">{Math.round(option.metrics.avg_size).toLocaleString()} m²</span>
</div>
<div className="metric">
<span className="metric-label">Fitness</span>
<span className="metric-value fitness">{(option.metrics.fitness * 100).toFixed(0)}%</span>
</div>
</div>
<div className="option-footer">
<span className={`compliance ${option.metrics.compliance === 'PASS' ? 'pass' : 'fail'}`}>
{option.metrics.compliance === 'PASS' ? '✓ Compliant' : '✗ Issues'}
</span>
<button
className="btn btn-sm btn-export"
onClick={(e) => {
e.stopPropagation();
onExport(option.id);
}}
disabled={loading}
>
<Download size={14} />
DXF
</button>
</div>
</div>
))}
</div>
</div>
);
};
export default LayoutOptionsPanel;
|