98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
|
|
import { Textarea } from '@components/ui/textarea';
|
|
import { Toggle } from '@components/ui/toggle';
|
|
import { useGlobalState } from '@contexts/state/StateContext';
|
|
|
|
const stages = [
|
|
'Purchase',
|
|
'Delivery',
|
|
'Use',
|
|
'Supplements',
|
|
'Maintenance',
|
|
'Disposal',
|
|
];
|
|
const utilities = [
|
|
'Customer Productivity',
|
|
'Simplicity',
|
|
'Convenience',
|
|
'Risk',
|
|
'Environmental Friendliness',
|
|
'Fun',
|
|
];
|
|
|
|
const UtilityMap = () => {
|
|
const { state, dispatch } = useGlobalState();
|
|
|
|
const toggleCell = (key: string) => {
|
|
dispatch({
|
|
type: 'TOGGLE_UTILITY',
|
|
payload: { key },
|
|
});
|
|
};
|
|
|
|
const updateNotes = (key: string, notes: string) => {
|
|
dispatch({
|
|
type: 'UPDATE_UTILITY_NOTES',
|
|
payload: { key, notes },
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Buyer Utility Map</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr>
|
|
<th className="p-2 border"></th>
|
|
{stages.map((stage) => (
|
|
<th key={stage} className="p-2 border text-center">
|
|
{stage}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{utilities.map((utility) => (
|
|
<tr key={utility}>
|
|
<td className="p-2 border font-medium">{utility}</td>
|
|
{stages.map((stage) => {
|
|
const key = `${utility}-${stage}`;
|
|
return (
|
|
<td key={stage} className="p-2 border">
|
|
<div className="flex flex-col gap-2">
|
|
<Toggle
|
|
pressed={state.utilityMap[key]?.value || false}
|
|
onPressedChange={() => toggleCell(key)}
|
|
className="w-full"
|
|
>
|
|
{state.utilityMap[key]?.value
|
|
? 'Opportunity'
|
|
: 'No opportunity'}
|
|
</Toggle>
|
|
<Textarea
|
|
placeholder="Add notes..."
|
|
value={state.utilityMap[key]?.notes || ''}
|
|
onChange={(e) => updateNotes(key, e.target.value)}
|
|
className="h-24 text-sm"
|
|
/>
|
|
</div>
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default UtilityMap;
|