Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 72x 3x 139x 20x | import { MultiSelect } from "../../ui/multi-select";
import type { ServiceCategory } from "../../../lib/api";
interface CategorySectionProps {
scope: ("design" | "material" | "execution")[];
workedAreaIds: string[];
serviceCategories: ServiceCategory[];
onScopeChange: (values: ("design" | "material" | "execution")[]) => void;
onWorkedAreaIdsChange: (values: string[]) => void;
}
export function CategorySection({
scope,
workedAreaIds,
serviceCategories,
onScopeChange,
onWorkedAreaIdsChange,
}: CategorySectionProps) {
return (
<div className="space-y-4">
<h3 className="text-md font-semibold text-foreground-default border-b pb-2">
Project Category
</h3>
<div>
<label
htmlFor="scope-of-work"
className="block text-sm font-medium text-foreground-default mb-1"
>
Scope of Work
</label>
<MultiSelect
id="scope-of-work"
options={[
{ value: "design", label: "Design" },
{ value: "material", label: "Material" },
{ value: "execution", label: "Execution" },
]}
selected={scope}
onChange={(values) => {
onScopeChange(values as ("design" | "material" | "execution")[]);
}}
placeholder="Select scope..."
/>
</div>
<div>
<label
htmlFor="worked-areas"
className="block text-sm font-medium text-foreground-default mb-1"
>
Worked Areas
</label>
<MultiSelect
id="worked-areas"
options={[
// Special full-property options
{ value: "full_home", label: "Full Home" },
{ value: "full_office", label: "Full Office" },
// Room types from service categories
...serviceCategories.flatMap((cat) =>
cat.children && cat.children.length > 0
? cat.children.map((child) => ({
value: child.id,
label: child.name,
}))
: [{ value: cat.id, label: cat.name }],
),
]}
selected={workedAreaIds}
onChange={onWorkedAreaIdsChange}
placeholder="Select worked areas..."
/>
</div>
</div>
);
}
|