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:
153
src/components/inbox/inbox-page-shell.tsx
Normal file
153
src/components/inbox/inbox-page-shell.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Bell, ChevronDown, ShieldAlert } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { PageHeader } from '@/components/shared/page-header';
|
||||
import { AlertsPageShell } from '@/components/alerts/alerts-page-shell';
|
||||
import { ReminderList } from '@/components/reminders/reminder-list';
|
||||
import { useAlertCount } from '@/components/alerts/use-alerts';
|
||||
|
||||
/**
|
||||
* Merged "Inbox" surface — replaces the previously-separate /alerts and
|
||||
* /reminders pages. Two stacked sections (Alerts first, Reminders second)
|
||||
* preserve the source distinction (system-flagged vs user-set) while
|
||||
* giving reps a single "things demanding my attention" surface.
|
||||
*
|
||||
* Sections are collapsible; collapsed state persists in localStorage per
|
||||
* section so reps can default to the layout they prefer.
|
||||
*
|
||||
* URL anchors:
|
||||
* /inbox#alerts → ensures Alerts section is expanded + scrolls to it
|
||||
* /inbox#reminders → ensures Reminders section is expanded + scrolls to it
|
||||
*
|
||||
* The legacy /alerts and /reminders routes redirect here with the
|
||||
* appropriate hash, so old bookmarks land in the right place.
|
||||
*/
|
||||
export function InboxPageShell() {
|
||||
const [alertsOpen, setAlertsOpen] = useState(true);
|
||||
const [remindersOpen, setRemindersOpen] = useState(true);
|
||||
const { data: alertCount } = useAlertCount();
|
||||
|
||||
// Hydrate collapsed state from localStorage on mount. Stored as
|
||||
// 'true'/'false' strings; missing keys default to expanded.
|
||||
useEffect(() => {
|
||||
const a = localStorage.getItem('inbox.alerts.open');
|
||||
const r = localStorage.getItem('inbox.reminders.open');
|
||||
if (a === 'false') setAlertsOpen(false);
|
||||
if (r === 'false') setRemindersOpen(false);
|
||||
}, []);
|
||||
|
||||
// Honor URL hash: ensure the targeted section is expanded then scroll.
|
||||
// Runs once on mount AND on hashchange so deep-linking from another tab
|
||||
// / page works the same as initial navigation.
|
||||
useEffect(() => {
|
||||
function applyHash() {
|
||||
const hash = window.location.hash.replace('#', '');
|
||||
if (hash === 'alerts') {
|
||||
setAlertsOpen(true);
|
||||
document.getElementById('inbox-section-alerts')?.scrollIntoView({ behavior: 'smooth' });
|
||||
} else if (hash === 'reminders') {
|
||||
setRemindersOpen(true);
|
||||
document.getElementById('inbox-section-reminders')?.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
applyHash();
|
||||
window.addEventListener('hashchange', applyHash);
|
||||
return () => window.removeEventListener('hashchange', applyHash);
|
||||
}, []);
|
||||
|
||||
function toggleAlerts() {
|
||||
const next = !alertsOpen;
|
||||
setAlertsOpen(next);
|
||||
localStorage.setItem('inbox.alerts.open', String(next));
|
||||
}
|
||||
function toggleReminders() {
|
||||
const next = !remindersOpen;
|
||||
setRemindersOpen(next);
|
||||
localStorage.setItem('inbox.reminders.open', String(next));
|
||||
}
|
||||
|
||||
const activeAlerts = alertCount?.total ?? 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Alerts & Reminders"
|
||||
eyebrow="Action items"
|
||||
description="Alerts the system has flagged plus your scheduled follow-ups, in one place."
|
||||
variant="gradient"
|
||||
/>
|
||||
|
||||
<section id="inbox-section-alerts" className="rounded-lg border bg-card shadow-xs">
|
||||
<SectionHeader
|
||||
icon={<ShieldAlert className="size-4 text-muted-foreground" aria-hidden />}
|
||||
label="Alerts"
|
||||
count={activeAlerts}
|
||||
open={alertsOpen}
|
||||
onToggle={toggleAlerts}
|
||||
/>
|
||||
{alertsOpen ? (
|
||||
<div className="border-t px-4 pb-4 pt-3">
|
||||
<AlertsPageShell embedded />
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section id="inbox-section-reminders" className="rounded-lg border bg-card shadow-xs">
|
||||
<SectionHeader
|
||||
icon={<Bell className="size-4 text-muted-foreground" aria-hidden />}
|
||||
label="Reminders"
|
||||
open={remindersOpen}
|
||||
onToggle={toggleReminders}
|
||||
/>
|
||||
{remindersOpen ? (
|
||||
<div className="border-t px-4 pb-4 pt-3">
|
||||
<ReminderList embedded />
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionHeader({
|
||||
icon,
|
||||
label,
|
||||
count,
|
||||
open,
|
||||
onToggle,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
count?: number;
|
||||
open: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
aria-expanded={open}
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between gap-2 px-4 py-3 text-left',
|
||||
'min-h-[48px] hover:bg-muted/30',
|
||||
)}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
{icon}
|
||||
<span className="text-sm font-semibold text-foreground">{label}</span>
|
||||
{count !== undefined && count > 0 ? (
|
||||
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
||||
{count}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={cn('size-4 text-muted-foreground transition-transform', open && 'rotate-180')}
|
||||
aria-hidden
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user