mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-01 09:43:11 +00:00
feat(work-orders): add board advanced search UI
This commit is contained in:
Arthur Bassi
parent
df2b5803a1
commit
4550acf1ea
5 changed files with 513 additions and 0 deletions
|
|
@ -0,0 +1,78 @@
|
|||
import { DotTogglePill } from "@/components/ui/dot-toggle-pill";
|
||||
|
||||
import { TogglePill } from "@/components/ui/toggle-pill";
|
||||
|
||||
import { ToggleSegment } from "@/components/ui/toggle-segment";
|
||||
|
||||
type AdvFilterPillProps = {
|
||||
label: string;
|
||||
|
||||
selected: boolean;
|
||||
|
||||
onClick: () => void;
|
||||
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function AdvFilterPill({ label, selected, onClick, className }: AdvFilterPillProps) {
|
||||
return (
|
||||
<TogglePill selected={selected} onClick={onClick} className={className}>
|
||||
{label}
|
||||
</TogglePill>
|
||||
);
|
||||
}
|
||||
|
||||
type AdvStatusPillProps = {
|
||||
label: string;
|
||||
|
||||
dotColor: string;
|
||||
|
||||
selected: boolean;
|
||||
|
||||
selectedBg?: string;
|
||||
|
||||
selectedText?: string;
|
||||
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export function AdvStatusPill({
|
||||
label,
|
||||
|
||||
dotColor,
|
||||
|
||||
selected,
|
||||
|
||||
selectedBg,
|
||||
|
||||
selectedText,
|
||||
|
||||
onClick,
|
||||
}: AdvStatusPillProps) {
|
||||
return (
|
||||
<DotTogglePill
|
||||
label={label}
|
||||
dotColor={dotColor}
|
||||
selected={selected}
|
||||
selectedBg={selectedBg}
|
||||
selectedText={selectedText}
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
type AdvDocPillProps = {
|
||||
label: string;
|
||||
|
||||
selected: boolean;
|
||||
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export function AdvDocPill({ label, selected, onClick }: AdvDocPillProps) {
|
||||
return (
|
||||
<ToggleSegment selected={selected} onClick={onClick}>
|
||||
{label}
|
||||
</ToggleSegment>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
import { useState, type ReactNode } from "react";
|
||||
|
||||
import { CheckboxListItem } from "@/components/ui/checkbox-list-item";
|
||||
|
||||
import { SearchInput } from "@/components/ui/search-input";
|
||||
|
||||
import { SelectAllAction } from "@/components/ui/select-all-action";
|
||||
|
||||
type AdvMultiSelectOption = {
|
||||
value: string;
|
||||
|
||||
label: string;
|
||||
};
|
||||
|
||||
type AdvMultiSelectProps = {
|
||||
options: AdvMultiSelectOption[];
|
||||
|
||||
selected: Set<string>;
|
||||
|
||||
onToggle: (value: string) => void;
|
||||
|
||||
onBulkToggle?: (values: string[], select: boolean) => void;
|
||||
|
||||
placeholder: string;
|
||||
|
||||
renderLeft?: (value: string) => ReactNode;
|
||||
};
|
||||
|
||||
export function AdvMultiSelect({
|
||||
options,
|
||||
|
||||
selected,
|
||||
|
||||
onToggle,
|
||||
|
||||
onBulkToggle,
|
||||
|
||||
placeholder,
|
||||
|
||||
renderLeft,
|
||||
}: AdvMultiSelectProps) {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const list = query
|
||||
? options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))
|
||||
: options;
|
||||
|
||||
const anySelected = selected.size > 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SearchInput
|
||||
value={query}
|
||||
onChange={setQuery}
|
||||
placeholder={placeholder}
|
||||
fullWidth
|
||||
className="mb-2"
|
||||
/>
|
||||
|
||||
<div className="mb-1.5 flex items-center justify-between">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{selected.size} of {options.length} selected
|
||||
</span>
|
||||
|
||||
<SelectAllAction
|
||||
anySelected={anySelected}
|
||||
onClick={() =>
|
||||
anySelected
|
||||
? onBulkToggle?.(
|
||||
options.map((option) => option.value),
|
||||
|
||||
false,
|
||||
)
|
||||
: onBulkToggle?.(
|
||||
list.map((option) => option.value),
|
||||
|
||||
true,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-h-48 overflow-y-auto rounded-lg border border-border p-1">
|
||||
{list.map((option) => (
|
||||
<CheckboxListItem
|
||||
key={option.value}
|
||||
selected={selected.has(option.value)}
|
||||
label={option.label}
|
||||
left={renderLeft?.(option.value)}
|
||||
onClick={() => onToggle(option.value)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{list.length === 0 && (
|
||||
<div className="px-2 py-3 text-center text-xs text-muted-foreground">No matches</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import type { ElementType, ReactNode } from "react";
|
||||
|
||||
import { CollapsibleSection } from "@/components/ui/collapsible-section";
|
||||
|
||||
type AdvSectionProps = {
|
||||
icon?: ElementType;
|
||||
|
||||
label: string;
|
||||
|
||||
count?: number;
|
||||
|
||||
defaultOpen?: boolean;
|
||||
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export function AdvSection(props: AdvSectionProps) {
|
||||
return <CollapsibleSection {...props} />;
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { SelectAllAction } from "@/components/ui/select-all-action";
|
||||
|
||||
import { ToggleCard } from "@/components/ui/toggle-card";
|
||||
|
||||
import {
|
||||
WO_TYPE_DESCRIPTIONS,
|
||||
WO_TYPES,
|
||||
} from "@/domain/work-orders/types/work-order-advanced-filters";
|
||||
|
||||
import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
|
||||
|
||||
type AdvTypeGridProps = {
|
||||
selected: Set<WOType>;
|
||||
|
||||
onToggle: (type: WOType) => void;
|
||||
|
||||
onSelectAll: (types: WOType[], select: boolean) => void;
|
||||
};
|
||||
|
||||
export function AdvTypeGrid({ selected, onToggle, onSelectAll }: AdvTypeGridProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex justify-end">
|
||||
<SelectAllAction
|
||||
anySelected={selected.size > 0}
|
||||
onClick={() => onSelectAll([...WO_TYPES], selected.size === 0)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{WO_TYPES.map((type) => (
|
||||
<ToggleCard
|
||||
key={type}
|
||||
selected={selected.has(type)}
|
||||
title={type}
|
||||
description={WO_TYPE_DESCRIPTIONS[type]}
|
||||
onClick={() => onToggle(type)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,273 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
CalendarDays,
|
||||
CheckCircle2,
|
||||
FileText,
|
||||
Flame,
|
||||
MapPin,
|
||||
SlidersHorizontal,
|
||||
Tag,
|
||||
Truck,
|
||||
UserX,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { AdvDocPill, AdvFilterPill, AdvStatusPill } from "./adv-filter-pill";
|
||||
import { AdvMultiSelect } from "./adv-multi-select";
|
||||
import { AdvSection } from "./adv-section";
|
||||
import { AdvTypeGrid } from "./adv-type-grid";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DateField } from "@/components/ui/date-input";
|
||||
import { IconCloseButton } from "@/components/ui/icon-close-button";
|
||||
import { SelectAllAction } from "@/components/ui/select-all-action";
|
||||
import { SideSheet } from "@/components/ui/side-sheet";
|
||||
import {
|
||||
ALL_WIZARD_STATUSES,
|
||||
ASSIGNEE_FILTER_UNASSIGNED,
|
||||
COMPLETION_DOC_OPTIONS,
|
||||
DATE_RANGE_OPTIONS,
|
||||
DOC_FILTER_LABELS,
|
||||
EMPTY_ADVANCED_FILTERS,
|
||||
type AdvancedFilterSetKey,
|
||||
type WorkOrderAdvancedFilters,
|
||||
} from "@/domain/work-orders/types/work-order-advanced-filters";
|
||||
import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
|
||||
import { WIZARD_STATUS_DOTS } from "@/domain/work-orders/types/work-order-wizard";
|
||||
import {
|
||||
cloneAdvancedFilters,
|
||||
countAdvancedFilters,
|
||||
isDefaultDateRange,
|
||||
} from "@/domain/work-orders/utils/advanced-filters-utils";
|
||||
|
||||
type WorkOrdersAdvancedSearchSheetProps = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
initial: WorkOrderAdvancedFilters;
|
||||
onApply: (filters: WorkOrderAdvancedFilters) => void;
|
||||
onClearAll: () => void;
|
||||
sites: { id: string | number; name: string }[];
|
||||
users: WorkOrderUser[];
|
||||
pmTypes: string[];
|
||||
vendorTechs: string[];
|
||||
};
|
||||
|
||||
export function WorkOrdersAdvancedSearchSheet({
|
||||
open,
|
||||
onOpenChange,
|
||||
initial,
|
||||
onApply,
|
||||
onClearAll,
|
||||
sites,
|
||||
users,
|
||||
pmTypes,
|
||||
vendorTechs,
|
||||
}: WorkOrdersAdvancedSearchSheetProps) {
|
||||
const [draft, setDraft] = useState<WorkOrderAdvancedFilters>(initial);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setDraft(cloneAdvancedFilters(initial));
|
||||
}
|
||||
}, [open, initial]);
|
||||
|
||||
const activeCount = countAdvancedFilters(draft);
|
||||
|
||||
const toggleIn = (key: AdvancedFilterSetKey, value: string) => {
|
||||
setDraft((prev) => {
|
||||
const next = new Set(prev[key] as Set<string>);
|
||||
if (next.has(value)) {
|
||||
next.delete(value);
|
||||
} else {
|
||||
next.add(value);
|
||||
}
|
||||
return { ...prev, [key]: next };
|
||||
});
|
||||
};
|
||||
|
||||
const setMany = (key: AdvancedFilterSetKey, values: string[], select: boolean) => {
|
||||
setDraft((prev) => {
|
||||
const next = new Set(prev[key] as Set<string>);
|
||||
values.forEach((value) => (select ? next.add(value) : next.delete(value)));
|
||||
return { ...prev, [key]: next };
|
||||
});
|
||||
};
|
||||
|
||||
const selectAllRow = (key: AdvancedFilterSetKey, all: string[], selectedSize: number) => (
|
||||
<div className="mb-2 flex justify-end">
|
||||
<SelectAllAction
|
||||
anySelected={selectedSize > 0}
|
||||
onClick={() => setMany(key, all, selectedSize === 0)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const handleClearAll = () => {
|
||||
setDraft(cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS));
|
||||
onClearAll();
|
||||
};
|
||||
|
||||
const handleApply = () => {
|
||||
onApply(cloneAdvancedFilters(draft));
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<SideSheet open={open} onClose={() => onOpenChange(false)} aria-label="Advanced Filters">
|
||||
<span className="sr-only">Advanced Filters</span>
|
||||
|
||||
<div className="flex h-14 shrink-0 items-center justify-between border-b border-border px-4">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="flex items-center gap-2">
|
||||
<SlidersHorizontal size={16} className="text-primary" />
|
||||
<span className="font-display text-[15px] font-bold text-foreground">
|
||||
Advanced Filters
|
||||
</span>
|
||||
</span>
|
||||
{activeCount > 0 && (
|
||||
<span className="text-xs text-muted-foreground">· {activeCount} active</span>
|
||||
)}
|
||||
</div>
|
||||
<IconCloseButton onClick={() => onOpenChange(false)} />
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4">
|
||||
<AdvSection
|
||||
icon={CalendarDays}
|
||||
label="Date range"
|
||||
count={isDefaultDateRange(draft.dateRange) ? 0 : 1}
|
||||
>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{DATE_RANGE_OPTIONS.map((option) => (
|
||||
<AdvFilterPill
|
||||
key={option.key}
|
||||
label={option.label}
|
||||
selected={draft.dateRange === option.key}
|
||||
onClick={() => setDraft((prev) => ({ ...prev, dateRange: option.key }))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{draft.dateRange === "custom" && (
|
||||
<div className="mt-2.5 flex items-center gap-2">
|
||||
<DateField
|
||||
label="From"
|
||||
value={draft.customFrom}
|
||||
onChange={(value) => setDraft((prev) => ({ ...prev, customFrom: value }))}
|
||||
/>
|
||||
<DateField
|
||||
label="To"
|
||||
value={draft.customTo}
|
||||
onChange={(value) => setDraft((prev) => ({ ...prev, customTo: value }))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</AdvSection>
|
||||
|
||||
<AdvSection icon={MapPin} label="Site" count={draft.sites.size}>
|
||||
<AdvMultiSelect
|
||||
options={sites.map((site) => ({
|
||||
value: String(site.id),
|
||||
label: site.name,
|
||||
}))}
|
||||
selected={draft.sites}
|
||||
onToggle={(value) => toggleIn("sites", value)}
|
||||
onBulkToggle={(values, select) => setMany("sites", values, select)}
|
||||
placeholder="Search site…"
|
||||
/>
|
||||
</AdvSection>
|
||||
|
||||
<AdvSection icon={Tag} label="Type of WO" count={draft.types.size}>
|
||||
<AdvTypeGrid
|
||||
selected={draft.types}
|
||||
onToggle={(type) => toggleIn("types", type)}
|
||||
onSelectAll={(types, select) => setMany("types", types, select)}
|
||||
/>
|
||||
</AdvSection>
|
||||
|
||||
<AdvSection icon={Users} label="Assigned to" count={draft.dispatchers.size}>
|
||||
<AdvMultiSelect
|
||||
options={[
|
||||
{ value: ASSIGNEE_FILTER_UNASSIGNED, label: "Unassigned" },
|
||||
...users.map((user) => ({ value: String(user.id), label: user.name })),
|
||||
]}
|
||||
selected={draft.dispatchers}
|
||||
onToggle={(value) => toggleIn("dispatchers", value)}
|
||||
onBulkToggle={(values, select) => setMany("dispatchers", values, select)}
|
||||
placeholder="Search assigned to…"
|
||||
renderLeft={(id) =>
|
||||
id === ASSIGNEE_FILTER_UNASSIGNED ? (
|
||||
<UserX size={14} className="shrink-0 text-muted-foreground" />
|
||||
) : (
|
||||
<span className="size-2 shrink-0 rounded-full bg-muted-foreground" />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</AdvSection>
|
||||
|
||||
<AdvSection icon={CheckCircle2} label="Status" count={draft.statuses.size}>
|
||||
{selectAllRow("statuses", [...ALL_WIZARD_STATUSES], draft.statuses.size)}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{ALL_WIZARD_STATUSES.map((status) => (
|
||||
<AdvStatusPill
|
||||
key={status}
|
||||
label={status}
|
||||
dotColor={WIZARD_STATUS_DOTS[status]}
|
||||
selected={draft.statuses.has(status)}
|
||||
selectedBg="var(--color-primary-tint)"
|
||||
onClick={() => toggleIn("statuses", status)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</AdvSection>
|
||||
|
||||
<AdvSection icon={Flame} label="PM type" count={draft.pmTypes.size}>
|
||||
<AdvMultiSelect
|
||||
options={pmTypes.map((pmType) => ({ value: pmType, label: pmType }))}
|
||||
selected={draft.pmTypes}
|
||||
onToggle={(value) => toggleIn("pmTypes", value)}
|
||||
onBulkToggle={(values, select) => setMany("pmTypes", values, select)}
|
||||
placeholder="Search pm type…"
|
||||
/>
|
||||
</AdvSection>
|
||||
|
||||
<AdvSection icon={Truck} label="Vendor / tech" count={draft.vendorTechs.size}>
|
||||
<AdvMultiSelect
|
||||
options={vendorTechs.map((name) => ({ value: name, label: name }))}
|
||||
selected={draft.vendorTechs}
|
||||
onToggle={(value) => toggleIn("vendorTechs", value)}
|
||||
onBulkToggle={(values, select) => setMany("vendorTechs", values, select)}
|
||||
placeholder="Search vendor / tech…"
|
||||
/>
|
||||
</AdvSection>
|
||||
|
||||
<AdvSection icon={FileText} label="Completion doc" count={draft.docs.size}>
|
||||
{selectAllRow("docs", [...COMPLETION_DOC_OPTIONS], draft.docs.size)}
|
||||
<div className="flex items-center gap-2">
|
||||
{COMPLETION_DOC_OPTIONS.map((doc) => (
|
||||
<AdvDocPill
|
||||
key={doc}
|
||||
label={DOC_FILTER_LABELS[doc]}
|
||||
selected={draft.docs.has(doc)}
|
||||
onClick={() => toggleIn("docs", doc)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</AdvSection>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-2 border-t border-border px-4 py-3">
|
||||
<Button variant="ghost" className="text-xs" onClick={handleClearAll}>
|
||||
Clear all
|
||||
</Button>
|
||||
<div className="flex flex-1 justify-center">
|
||||
{activeCount > 0 && (
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
{activeCount} filter set
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button className="px-5 text-xs" onClick={handleApply}>
|
||||
Apply filters
|
||||
</Button>
|
||||
</div>
|
||||
</SideSheet>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue