feat(ui): broad consistency sweep — sources, dates, comboboxes, milestones
Mobile + responsive - berth-form full-width on phones (was 480px fixed → overflowed iPhone) - currency-input switched to inputMode=decimal with live thousands separator - client-form Country/Timezone/Source/Preferred-Contact full-width <sm - contacts row restructured so Primary toggle + Remove get their own strip - customize-dashboard footer stacks vertically on mobile; Done full-width - interest-form client/berth pickers no longer cmdk-filter on UUID (typing "Carlos" now returns Carlos Vega instead of "No clients found") Data + consistency - SOURCES + SOURCE_LABELS + formatSource() in lib/constants; 9 surfaces now resolve interest/client source from one place - INTEREST_OUTCOMES adds lost_other (picker, badge, timeline) - Berth options natural-sort A1 → A2 → … → A10 via lib/utils/mooring-sort - archiver downgraded ^8 → ^7.0.1 so the GDPR export route compiles - TableBody last-row uses border-b-0 (not border-0); colored left-accent on the bottom berth row now renders - Hide Invite-to-Portal until port setting === true (was !== false default-show) - OwnerPicker primer query resolves entity name on first paint (no more UUID flash before the popover opens) Terminology - Replaced user-facing "Documenso" with "signing service" / "Generated EOI" / "Manual EOI" in 8 components (admin/internal references kept) - Plainer status-change copy on berth-detail-header Forms + editing - InlineEditableField gained a `date` variant (native picker); applied to company incorporation date and ready for other YYYY-MM-DD plaintext fields - Inline source picker on interest-tabs detail (was free text) - TagPicker self-hides when port has no tags AND nothing is selected - New ReminderDaysInput with preset chips (1d / 3d / 1wk / 2wk / 1mo / custom) - Compose dialog follow-up is now a toggle that reveals datetime picker Pipeline milestones - changeStageSchema accepts optional milestoneDate; service stamps it on the matching date column instead of always using now - MilestoneAdvanceButton popover collects a back-date before stage advance - Applied to every "Mark X manually" surface on the interest overview EOI / linked-berths polish - Add-bypass row aligned inline with toggle descriptions - Tooltips on "Specifically pitching" / "Mark in EOI bundle" explain their legal vs. public-map consequences Surfaces - Companies list now has the column picker + persisted hidden-column prefs - NotesList aggregate flag enabled on clients, companies, residential_clients (yachts already aggregated) ft/m unit toggle (interim, before drift fix) - "Berth size desired" gets a section-level ft/m toggle; per-field hint shows the converted value. Storage stays canonical-ft for now; the drift-safe persistence migration is the next step. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
143
src/hooks/use-dashboard-widgets.ts
Normal file
143
src/hooks/use-dashboard-widgets.ts
Normal file
@@ -0,0 +1,143 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { DASHBOARD_WIDGETS, type DashboardWidget } from '@/components/dashboard/widget-registry';
|
||||
import { useDashboardIntegrations } from '@/hooks/use-dashboard-integrations';
|
||||
|
||||
interface PreferencesResponse {
|
||||
data?: {
|
||||
dashboardWidgets?: Record<string, boolean>;
|
||||
// Other fields exist (timezone, locale, …) but we don't need them
|
||||
// here — the typed access is intentionally narrow.
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the dashboard widget list filtered by the user's visibility
|
||||
* preferences and exposes a toggle. Single source of truth for "what's
|
||||
* showing on the dashboard right now" — used by both `DashboardShell`
|
||||
* and the settings UI.
|
||||
*
|
||||
* Stored shape: `preferences.dashboardWidgets: { [widgetId]: boolean }`.
|
||||
* Missing keys fall back to the registry's `defaultVisible`, so a newly
|
||||
* added widget surfaces for everyone without a migration.
|
||||
*/
|
||||
export function useDashboardWidgets() {
|
||||
const queryClient = useQueryClient();
|
||||
const integrations = useDashboardIntegrations();
|
||||
|
||||
const { data, isLoading } = useQuery<PreferencesResponse>({
|
||||
queryKey: ['me', 'preferences', 'dashboard-widgets'],
|
||||
queryFn: () => apiFetch<PreferencesResponse>('/api/v1/users/me/preferences'),
|
||||
staleTime: 60_000,
|
||||
});
|
||||
|
||||
// The registry is the universe of declared widgets. `availableWidgets`
|
||||
// is the universe filtered down to what actually CAN render right now
|
||||
// (i.e. its required integration is connected). The picker iterates
|
||||
// this list, and the visible-widgets render path filters off the same
|
||||
// list so flipping on a widget whose service isn't wired up does
|
||||
// nothing silently — the toggle simply isn't shown.
|
||||
const availableWidgets: DashboardWidget[] = useMemo(
|
||||
() =>
|
||||
DASHBOARD_WIDGETS.filter(
|
||||
(w) => !w.requires || integrations.available[w.requires],
|
||||
),
|
||||
[integrations],
|
||||
);
|
||||
|
||||
const visibility: Record<string, boolean> = useMemo(() => {
|
||||
const stored = data?.data?.dashboardWidgets ?? {};
|
||||
const merged: Record<string, boolean> = {};
|
||||
for (const w of availableWidgets) {
|
||||
merged[w.id] = stored[w.id] ?? w.defaultVisible;
|
||||
}
|
||||
return merged;
|
||||
}, [data, availableWidgets]);
|
||||
|
||||
const visibleWidgets: DashboardWidget[] = useMemo(
|
||||
() => availableWidgets.filter((w) => visibility[w.id]),
|
||||
[availableWidgets, visibility],
|
||||
);
|
||||
|
||||
/**
|
||||
* Persists a single widget's visibility. Optimistically updates the
|
||||
* cache so the dashboard reflows instantly; the server PATCH races in
|
||||
* the background. On failure the cache invalidates and re-reads the
|
||||
* authoritative value.
|
||||
*/
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (next: Record<string, boolean>) =>
|
||||
apiFetch<PreferencesResponse>('/api/v1/users/me/preferences', {
|
||||
method: 'PATCH',
|
||||
body: { dashboardWidgets: next },
|
||||
}),
|
||||
onMutate: async (next) => {
|
||||
await queryClient.cancelQueries({ queryKey: ['me', 'preferences', 'dashboard-widgets'] });
|
||||
const previous = queryClient.getQueryData<PreferencesResponse>([
|
||||
'me',
|
||||
'preferences',
|
||||
'dashboard-widgets',
|
||||
]);
|
||||
queryClient.setQueryData<PreferencesResponse>(
|
||||
['me', 'preferences', 'dashboard-widgets'],
|
||||
(old) => ({
|
||||
data: { ...(old?.data ?? {}), dashboardWidgets: next },
|
||||
}),
|
||||
);
|
||||
return { previous };
|
||||
},
|
||||
onError: (_err, _next, ctx) => {
|
||||
if (ctx?.previous) {
|
||||
queryClient.setQueryData(['me', 'preferences', 'dashboard-widgets'], ctx.previous);
|
||||
}
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['me', 'preferences', 'dashboard-widgets'] });
|
||||
},
|
||||
});
|
||||
|
||||
function setVisible(id: string, visible: boolean) {
|
||||
mutation.mutate({ ...visibility, [id]: visible });
|
||||
}
|
||||
|
||||
function setAll(visible: boolean) {
|
||||
const next: Record<string, boolean> = {};
|
||||
for (const w of availableWidgets) next[w.id] = visible;
|
||||
mutation.mutate(next);
|
||||
}
|
||||
|
||||
/**
|
||||
* Restores each widget's visibility to its registry `defaultVisible`.
|
||||
* Different from `setAll(true)` — it keeps the "off by default" widgets
|
||||
* (KPI tiles, Berth Status donut, Source Conversion, Hot Deals) off so
|
||||
* reps end up with the original out-of-the-box dashboard. Scoped to
|
||||
* `availableWidgets` so disconnected integrations don't sneak in.
|
||||
*/
|
||||
function resetToDefaults() {
|
||||
const next: Record<string, boolean> = {};
|
||||
for (const w of availableWidgets) next[w.id] = w.defaultVisible;
|
||||
mutation.mutate(next);
|
||||
}
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
/**
|
||||
* Widgets that can render right now (registry minus those whose
|
||||
* required integration isn't connected). Use this for the picker
|
||||
* AND for the dashboard render — both surfaces stay in sync.
|
||||
*/
|
||||
allWidgets: availableWidgets,
|
||||
/** Visible widgets, in registry order. */
|
||||
visibleWidgets,
|
||||
/** Map of widgetId → visible. Use for switch state binding. */
|
||||
visibility,
|
||||
setVisible,
|
||||
setAll,
|
||||
resetToDefaults,
|
||||
isSaving: mutation.isPending,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user