letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

chore(audit-drain): rip out next-intl, RTL lint, sweeps, polish

Browse Source 
Drain the long-tail audit queue captured in alpha-uat-master.md.

- next-intl ripped out (zero useTranslations callers ever existed):
  package.json, next.config.ts plugin wrap, src/i18n/, messages/, and
  the layout NextIntlClientProvider all gone; <html lang="en"> hardcoded.
- RTL lint nudge added: warn-only no-restricted-syntax on physical
  Tailwind utilities (ml-/mr-/pl-/pr-/text-left/text-right/border-l/
  border-r/rounded-l-/rounded-r-) inside JSX className literals.
  Existing ~1,000 sites grandfathered; new code trends toward logical.
- Icon-only button accessibility lint: jsx-a11y/control-has-associated-
  label enabled at warn; 4 empty <th>/<td> action placeholders gain
  sr-only labels.
- Currency: SUPPORTED_CURRENCIES drops the hardcoded English labels;
  new currencyLabel(code, locale?) helper resolves via Intl.DisplayNames.
  CurrencySelect + settings-manager migrated.
- Date locale sweep: 7 surfaces flip from toLocaleString('en-GB'|'en-US')
  to toLocaleString(undefined, ...) so dates honour runtime locale.
- Dialog/Sheet width: 10 document/EOI/entity-form dialogs gain a
  lg:max-w-4xl or lg:max-w-5xl step so wide desktops get breathing room.
- PaymentsSection collapsed-bar: slim one-line bar showing
  "Payments - Not received yet" or "Payments - \$X received - N payments
  - Expand"; per-interest collapse state persists in localStorage; the
  RecordPayment flow auto-expands.
- muted-foreground opacity sweep: 10 text-bearing
  text-muted-foreground/{60,70,80} hits dropped to plain
  text-muted-foreground for AA contrast on muted bg. Icon-only
  (aria-hidden) opacity hits left as-is.
- Micro-type bump: text-[10px] and text-[11px] -> text-xs (12px)
  across 87 files in src/components + src/app. Pure mechanical sweep.
- Audit-doc cleanup: alpha-uat-master.md stale 2026-05-25 summary
  rewritten with cumulative state through today. Items genuinely still
  open are now a short long-tail list.
- New docs/marketing-site-followups.md: Umami Phase 4a/3/5, email
  pixel E2E verification, and website-cutover work parked here so
  they don't get lost in the CRM audit doc.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-05-26 18:48:46 +02:00
parent 353a31323e
commit e9509dc45c
115 changed files with 528 additions and 776 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(auth)/setup/page.tsx
View File

@@ -192,7 +192,7 @@ export default function SetupPage() {
</Button>
</form>
<p className="text-center text-[11px] text-muted-foreground">
<p className="text-center text-xs text-muted-foreground">
This screen is only available until the first administrator is created. After that,
subsequent users are added through Admin &rarr; Users.
</p>

2
src/app/(dashboard)/[portSlug]/admin/pipeline-rules/page.tsx
View File

@@ -256,7 +256,7 @@ function PresetButton({
>
<p className="text-sm font-semibold">{label}</p>
<p className="text-xs text-muted-foreground">{description}</p>
<p className="mt-1 text-[10px] uppercase tracking-wide text-muted-foreground">
<p className="mt-1 text-xs uppercase tracking-wide text-muted-foreground">
{name === 'aggressive' ? 'auto for all triggers' : 'suggest for all triggers'}
</p>
</button>

10
src/app/layout.tsx
View File

@@ -2,8 +2,6 @@ import type { Metadata, Viewport } from 'next';
import Script from 'next/script';
import { headers } from 'next/headers';
import { Inter, JetBrains_Mono } from 'next/font/google';
import { NextIntlClientProvider } from 'next-intl';
import { getLocale, getMessages } from 'next-intl/server';
import { Toaster } from 'sonner';
import { classifyFormFactor } from '@/lib/form-factor';
import { ReactGrabViewportSync } from '@/components/dev/react-grab-viewport-sync';
@@ -64,11 +62,9 @@ export async function generateMetadata(): Promise<Metadata> {
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const headerList = await headers();
const formFactor = classifyFormFactor(headerList.get('user-agent'));
const locale = await getLocale();
const messages = await getMessages();
return (
<html lang={locale} suppressHydrationWarning>
<html lang="en" suppressHydrationWarning>
<head>
{process.env.NODE_ENV === 'development' && (
<Script
@@ -82,9 +78,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
data-form-factor={formFactor}
className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
>
<NextIntlClientProvider locale={locale} messages={messages}>
{children}
</NextIntlClientProvider>
{children}
<Toaster richColors position="top-right" />
{process.env.NODE_ENV === 'development' && <ReactGrabViewportSync />}
</body>

4
src/app/public/supplemental-info/[token]/page.tsx
View File

@@ -220,7 +220,7 @@ export default function SupplementalInfoPage({ params }: PageProps) {
<div className="space-y-1.5">
<Label htmlFor="phone">Phone</Label>
<PhoneInput id="phone" value={phone} onChange={setPhone} placeholder="Phone number" />
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Use a different number than the one you signed up with if you&apos;d prefer to be
reached there instead.
</p>
@@ -298,7 +298,7 @@ export default function SupplementalInfoPage({ params }: PageProps) {
{submitting ? 'Submitting…' : 'Submit'}
</Button>
<p className="text-center text-[11px] text-muted-foreground">
<p className="text-center text-xs text-muted-foreground">
This link is private to you and expires after one use.
</p>
</form>

4
src/components/admin/admin-sections-browser.tsx
View File

@@ -550,9 +550,7 @@ function SectionCard({
<div className="flex-1">
<CardTitle className="text-base">{section.label}</CardTitle>
{groupTitle ? (
<p className="text-[10px] uppercase tracking-wider text-muted-foreground">
{groupTitle}
</p>
<p className="text-xs uppercase tracking-wider text-muted-foreground">{groupTitle}</p>
) : null}
</div>
</CardHeader>

12
src/components/admin/audit/audit-log-card.tsx
View File

@@ -127,11 +127,9 @@ export function AuditLogCard({ entry }: AuditLogCardProps) {
<ListCardMeta icon={<Clock className="h-3 w-3" aria-hidden />}>
{formatDistanceToNow(new Date(entry.createdAt), { addSuffix: true })}
</ListCardMeta>
{entry.ipAddress ? (
<span className="font-mono text-[11px]">{entry.ipAddress}</span>
) : null}
{entry.ipAddress ? <span className="font-mono text-xs">{entry.ipAddress}</span> : null}
{entry.severity && entry.severity !== 'info' ? (
<span className="uppercase font-semibold tracking-wide text-[10px]">
<span className="uppercase font-semibold tracking-wide text-xs">
{entry.severity}
</span>
) : null}
@@ -190,7 +188,7 @@ export function AuditLogCard({ entry }: AuditLogCardProps) {
<summary className="cursor-pointer font-semibold text-muted-foreground">
Old value
</summary>
<pre className="mt-1 max-h-64 overflow-auto rounded bg-background p-2 font-mono text-[11px]">
<pre className="mt-1 max-h-64 overflow-auto rounded bg-background p-2 font-mono text-xs">
{JSON.stringify(entry.oldValue, null, 2)}
</pre>
</details>
@@ -200,7 +198,7 @@ export function AuditLogCard({ entry }: AuditLogCardProps) {
<summary className="cursor-pointer font-semibold text-muted-foreground">
New value
</summary>
<pre className="mt-1 max-h-64 overflow-auto rounded bg-background p-2 font-mono text-[11px]">
<pre className="mt-1 max-h-64 overflow-auto rounded bg-background p-2 font-mono text-xs">
{JSON.stringify(entry.newValue, null, 2)}
</pre>
</details>
@@ -210,7 +208,7 @@ export function AuditLogCard({ entry }: AuditLogCardProps) {
<summary className="cursor-pointer font-semibold text-muted-foreground">
Metadata
</summary>
<pre className="mt-1 max-h-64 overflow-auto rounded bg-background p-2 font-mono text-[11px]">
<pre className="mt-1 max-h-64 overflow-auto rounded bg-background p-2 font-mono text-xs">
{JSON.stringify(entry.metadata, null, 2)}
</pre>
</details>

16
src/components/admin/audit/audit-log-list.tsx
View File

@@ -267,7 +267,7 @@ export function AuditLogList() {
</Badge>
{row.original.severity !== 'info' && (
<Badge
className={`${SEVERITY_BADGE[row.original.severity] ?? ''} text-[10px] px-1.5 py-0 uppercase`}
className={`${SEVERITY_BADGE[row.original.severity] ?? ''} text-xs px-1.5 py-0 uppercase`}
variant="outline"
>
{row.original.severity}
@@ -385,36 +385,36 @@ export function AuditLogList() {
</div>
{e.oldValue ? (
<details>
<summary className="cursor-pointer text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<summary className="cursor-pointer text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Old value
</summary>
<pre className="mt-1 max-h-60 overflow-auto rounded bg-muted p-2 font-mono text-[11px]">
<pre className="mt-1 max-h-60 overflow-auto rounded bg-muted p-2 font-mono text-xs">
{JSON.stringify(e.oldValue, null, 2)}
</pre>
</details>
) : null}
{e.newValue ? (
<details open>
<summary className="cursor-pointer text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<summary className="cursor-pointer text-xs font-semibold uppercase tracking-wide text-muted-foreground">
New value
</summary>
<pre className="mt-1 max-h-60 overflow-auto rounded bg-muted p-2 font-mono text-[11px]">
<pre className="mt-1 max-h-60 overflow-auto rounded bg-muted p-2 font-mono text-xs">
{JSON.stringify(e.newValue, null, 2)}
</pre>
</details>
) : null}
{e.metadata ? (
<details>
<summary className="cursor-pointer text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<summary className="cursor-pointer text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Metadata
</summary>
<pre className="mt-1 max-h-60 overflow-auto rounded bg-muted p-2 font-mono text-[11px]">
<pre className="mt-1 max-h-60 overflow-auto rounded bg-muted p-2 font-mono text-xs">
{JSON.stringify(e.metadata, null, 2)}
</pre>
</details>
) : null}
{e.ipAddress || e.userAgent ? (
<dl className="grid grid-cols-[88px_1fr] gap-x-2 gap-y-1 text-[11px]">
<dl className="grid grid-cols-[88px_1fr] gap-x-2 gap-y-1 text-xs">
{e.ipAddress ? (
<>
<dt className="font-semibold text-muted-foreground">IP address</dt>

4
src/components/admin/backup-admin-panel.tsx
View File

@@ -145,7 +145,7 @@ export function BackupAdminPanel() {
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span
className={`text-[10px] uppercase font-medium px-1.5 py-0.5 rounded-full ${STATUS_TONE[j.status]}`}
className={`text-xs uppercase font-medium px-1.5 py-0.5 rounded-full ${STATUS_TONE[j.status]}`}
>
{j.status}
</span>
@@ -153,7 +153,7 @@ export function BackupAdminPanel() {
{new Date(j.startedAt).toLocaleString()}
</span>
{j.trigger === 'cron' && (
<span className="text-[10px] text-muted-foreground">cron</span>
<span className="text-xs text-muted-foreground">cron</span>
)}
</div>
{j.errorMessage && (

14
src/components/admin/bulk-add-berths-wizard.tsx
View File

@@ -255,7 +255,7 @@ export function BulkAddBerthsWizard() {
className="h-9 w-20 font-mono"
/>
</div>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Any uppercase letter sequence. Common ports use A-E; mark a custom letter when
expanding to F+ or letter-pairs like AA.
</p>
@@ -388,10 +388,12 @@ export function BulkAddBerthsWizard() {
<th scope="col" className="py-2 pr-2">
Currency
</th>
<th scope="col" className="py-2 pr-2" />
<th scope="col" className="py-2 pr-2">
<span className="sr-only">Actions</span>
</th>
</tr>
<tr className="border-b bg-muted/30">
<td className="py-1 pr-2 text-[10px] text-muted-foreground">apply to all →</td>
<td className="py-1 pr-2 text-xs text-muted-foreground">apply to all →</td>
{(
[
['lengthFt', 'number'],
@@ -444,7 +446,9 @@ export function BulkAddBerthsWizard() {
className="h-7 text-xs"
/>
</td>
<td />
<td>
<span className="sr-only">Actions placeholder</span>
</td>
</tr>
</thead>
<tbody>
@@ -460,7 +464,7 @@ export function BulkAddBerthsWizard() {
<td className="py-1 pr-2 font-medium">
{row.mooringNumber}
{isDup ? (
<span className="ml-1 inline-flex items-center rounded-sm bg-amber-200/70 px-1 text-[10px] font-semibold uppercase tracking-wide text-amber-900">
<span className="ml-1 inline-flex items-center rounded-sm bg-amber-200/70 px-1 text-xs font-semibold uppercase tracking-wide text-amber-900">
Dup
</span>
) : null}

4
src/components/admin/documenso/embedded-signing-card.tsx
View File

@@ -167,7 +167,7 @@ export function EmbeddedSigningCard() {
))}
</ul>
) : null}
<p className="mt-1 text-[11px] opacity-70">{result.at.toLocaleTimeString()}</p>
<p className="mt-1 text-xs opacity-70">{result.at.toLocaleTimeString()}</p>
</div>
</div>
</div>
@@ -204,7 +204,7 @@ export function EmbeddedSigningCard() {
tracking which slot the signer is in.
</p>
<p className="mt-1 text-muted-foreground">Minimum Next.js example:</p>
<pre className="mt-1 overflow-x-auto rounded bg-muted p-2 font-mono text-[11px]">
<pre className="mt-1 overflow-x-auto rounded bg-muted p-2 font-mono text-xs">
{`// app/sign/[role]/[token]/page.tsx
export default function SignPage({ params }) {
const documenseUrl = \`\${env.DOCUMENSO_URL}/sign/\${params.token}\`;

38
src/components/admin/documenso/template-sync-button.tsx
View File

@@ -179,7 +179,7 @@ export function TemplateSyncButton() {
<CheckCircle2 className="size-4" />{' '}
{lastResult.title || `Template #${lastResult.templateId}`}
</div>
<span className="text-[11px] font-normal text-muted-foreground">
<span className="text-xs font-normal text-muted-foreground">
Last synced {formatRelative(lastResult.syncedAt)}
</span>
</div>
@@ -202,11 +202,11 @@ export function TemplateSyncButton() {
</>
)}
{r.mappedSettingKey ? (
<span className="ml-auto rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-medium text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300">
<span className="ml-auto rounded bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300">
→ {r.mappedSettingKey}
</span>
) : (
<span className="ml-auto rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-300">
<span className="ml-auto rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-300">
no slot match
</span>
)}
@@ -216,13 +216,13 @@ export function TemplateSyncButton() {
{lastResult.templateMeta && (
<div className="pt-1.5 rounded-md bg-muted/60 px-2 py-1.5">
<div className="font-medium text-muted-foreground">Template-level settings</div>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Read from the template itself on Documenso. These values are bound to the
template, so every envelope generated from it inherits them -{' '}
<code>/template/use</code> does <strong>not</strong> accept overrides for these.
Change them in Documenso&apos;s template editor.
</p>
<ul className="mt-1 space-y-0.5 text-[11px]">
<ul className="mt-1 space-y-0.5 text-xs">
<li>
<span className="text-muted-foreground">Signing order:</span>{' '}
<span className="font-mono">
@@ -235,7 +235,7 @@ export function TemplateSyncButton() {
{lastResult.templateMeta.distributionMethod ?? 'unset'}
</span>
{lastResult.templateMeta.distributionMethod === 'EMAIL' && (
<span className="ml-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-900 dark:bg-amber-950 dark:text-amber-200">
<span className="ml-1 rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-900 dark:bg-amber-950 dark:text-amber-200">
⚠️ Documenso will email recipients directly - the CRM&apos;s branded email
is in addition. Set to NONE on the template to let the CRM be the sole
sender.
@@ -273,7 +273,7 @@ export function TemplateSyncButton() {
{lastResult.matchedFields.map((f) => (
<span
key={f.fieldId}
className="rounded bg-emerald-100 px-1.5 py-0.5 font-mono text-[10px] text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200"
className="rounded bg-emerald-100 px-1.5 py-0.5 font-mono text-xs text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200"
>
{f.label} → #{f.fieldId}
</span>
@@ -288,7 +288,7 @@ export function TemplateSyncButton() {
⚠️ Template fields the CRM doesn&apos;t recognize (
{lastResult.unmatchedTemplateFields.length})
</div>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
These won&apos;t be filled. Rename them in the Documenso template editor to match
a CRM-expected label (Name, Email, Address, Yacht Name, Length, Width, Draft,
Berth Number, Lease_10, Purchase), or ignore if they&apos;re signature/date fields
@@ -298,7 +298,7 @@ export function TemplateSyncButton() {
{lastResult.unmatchedTemplateFields.map((f) => (
<span
key={f.fieldId}
className="rounded bg-amber-100 px-1.5 py-0.5 font-mono text-[10px] text-amber-900 dark:bg-amber-950 dark:text-amber-200"
className="rounded bg-amber-100 px-1.5 py-0.5 font-mono text-xs text-amber-900 dark:bg-amber-950 dark:text-amber-200"
>
{f.label} → #{f.fieldId}
</span>
@@ -312,7 +312,7 @@ export function TemplateSyncButton() {
<div className="font-medium text-foreground">
PDF AcroForm fields (the <code>formValues</code> path)
</div>
<p className="pt-0.5 text-[11px] text-muted-foreground">
<p className="pt-0.5 text-xs text-muted-foreground">
These are the fillable fields actually in the PDF binary on Documenso. The CRM
fills them by name at send time - this is the same mechanism the prod v1 server
uses.
@@ -320,11 +320,11 @@ export function TemplateSyncButton() {
{lastResult.acroForm.map((report) => (
<div key={report.envelopeItemId} className="mt-1.5 space-y-1">
{report.error ? (
<div className="rounded bg-destructive/10 px-2 py-1 text-[11px] text-destructive">
<div className="rounded bg-destructive/10 px-2 py-1 text-xs text-destructive">
Couldn&apos;t inspect this PDF: {report.error}
</div>
) : report.fields.length === 0 ? (
<div className="rounded bg-amber-100 px-2 py-1 text-[11px] text-amber-900 dark:bg-amber-950 dark:text-amber-200">
<div className="rounded bg-amber-100 px-2 py-1 text-xs text-amber-900 dark:bg-amber-950 dark:text-amber-200">
⚠️ This PDF has no AcroForm fields. The CRM&apos;s <code>formValues</code>{' '}
path will fill nothing. Re-export your PDF with form fields enabled, or
place overlays inside Documenso&apos;s editor and use{' '}
@@ -341,7 +341,7 @@ export function TemplateSyncButton() {
{report.matchedFieldNames.map((n) => (
<span
key={n}
className="rounded bg-emerald-100 px-1.5 py-0.5 font-mono text-[10px] text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200"
className="rounded bg-emerald-100 px-1.5 py-0.5 font-mono text-xs text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200"
>
{n}
</span>
@@ -354,7 +354,7 @@ export function TemplateSyncButton() {
<div className="font-medium text-amber-700 dark:text-amber-400">
⚠️ CRM tokens missing from the PDF ({report.missingFieldNames.length})
</div>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
These exact names need AcroForm text/checkbox fields in the PDF, or
they&apos;ll be dropped at send time.
</p>
@@ -362,7 +362,7 @@ export function TemplateSyncButton() {
{report.missingFieldNames.map((n) => (
<span
key={n}
className="rounded bg-amber-100 px-1.5 py-0.5 font-mono text-[10px] text-amber-900 dark:bg-amber-950 dark:text-amber-200"
className="rounded bg-amber-100 px-1.5 py-0.5 font-mono text-xs text-amber-900 dark:bg-amber-950 dark:text-amber-200"
>
{n}
</span>
@@ -375,7 +375,7 @@ export function TemplateSyncButton() {
<div className="font-medium text-muted-foreground">
PDF fields the CRM has no token for ({report.extraFieldNames.length})
</div>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Usually signature blocks or other fields the recipient fills in
directly. Safe to ignore.
</p>
@@ -383,7 +383,7 @@ export function TemplateSyncButton() {
{report.extraFieldNames.map((n) => (
<span
key={n}
className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground"
className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground"
>
{n}
</span>
@@ -404,7 +404,7 @@ export function TemplateSyncButton() {
CRM data points not in <code>prefillFields</code> (
{lastResult.missingFromTemplate.length})
</div>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
These would also be available as <code>prefillFields</code> if you added matching
overlays inside Documenso&apos;s template editor.
</p>
@@ -412,7 +412,7 @@ export function TemplateSyncButton() {
{lastResult.missingFromTemplate.map((label) => (
<span
key={label}
className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground"
className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground"
>
{label}
</span>

2
src/components/admin/document-templates/template-form.tsx
View File

@@ -112,7 +112,7 @@ export function TemplateForm({ open, onOpenChange, template, onSuccess }: Templa
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="w-full max-w-2xl overflow-y-auto sm:max-w-2xl">
<SheetContent className="w-full max-w-2xl overflow-y-auto sm:max-w-2xl lg:max-w-4xl">
<SheetHeader>
<SheetTitle>{isEdit ? 'Edit Template' : 'New Document Template'}</SheetTitle>
</SheetHeader>

2
src/components/admin/document-templates/template-version-history.tsx
View File

@@ -112,7 +112,7 @@ export function TemplateVersionHistory({
</div>
<p className="text-xs text-muted-foreground">
Saved{' '}
{new Date(v.changedAt).toLocaleString('en-GB', {
{new Date(v.changedAt).toLocaleString(undefined, {
day: '2-digit',
month: 'short',
year: 'numeric',

6
src/components/admin/duplicates/duplicates-review-queue.tsx
View File

@@ -123,7 +123,7 @@ function CandidateRow({
<div className="rounded-lg border bg-card p-4">
<div className="mb-3 flex items-baseline justify-between gap-3">
<div>
<span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
<span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
score {pair.score}
</span>{' '}
<span className="text-xs text-muted-foreground">{pair.reasons.join(' · ')}</span>
@@ -203,11 +203,11 @@ function ClientCard({
)}
>
<p className="text-sm font-medium">{client.fullName}</p>
<p className="mt-0.5 text-[11px] text-muted-foreground">
<p className="mt-0.5 text-xs text-muted-foreground">
Created {new Date(client.createdAt).toLocaleDateString()}
</p>
{isSelected ? (
<span className="mt-1 inline-block rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
<span className="mt-1 inline-block rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-semibold text-primary">
KEEP
</span>
) : null}

4
src/components/admin/forms/form-template-form.tsx
View File

@@ -158,7 +158,7 @@ function FormTemplateFormBody({ open, onOpenChange, template, onSaved }: Props)
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="overflow-y-auto sm:max-w-2xl">
<SheetContent className="overflow-y-auto sm:max-w-2xl lg:max-w-4xl">
<SheetHeader>
<SheetTitle>{template ? 'Edit form template' : 'New form template'}</SheetTitle>
</SheetHeader>
@@ -230,7 +230,7 @@ function FormTemplateFormBody({ open, onOpenChange, template, onSaved }: Props)
</SelectContent>
</Select>
{f.bindTo ? (
<Badge variant="secondary" className="text-[10px] font-normal">
<Badge variant="secondary" className="text-xs font-normal">
Autofills from + writes back to {getBindableField(f.bindTo)?.label} ·{' '}
{f.bindTo}
</Badge>

4
src/components/admin/invitations/invitations-manager.tsx
View File

@@ -111,7 +111,9 @@ export function InvitationsManager() {
<th className="text-left font-medium px-3 py-2">Role</th>
<th className="text-left font-medium px-3 py-2">Status</th>
<th className="text-left font-medium px-3 py-2">Expires</th>
<th className="px-3 py-2"></th>
<th className="px-3 py-2">
<span className="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody>

6
src/components/admin/onboarding-checklist.tsx
View File

@@ -326,15 +326,15 @@ export function OnboardingChecklist() {
</Link>
<p className="mt-0.5 text-xs text-muted-foreground">{step.description}</p>
{auto && (
<p className="mt-1 text-[11px] text-emerald-700">
<p className="mt-1 text-xs text-emerald-700">
Auto-detected complete via{' '}
<code className="text-[10px]">
<code className="text-xs">
{step.autoCheckSettingKey ??
step.autoCheckSettingKeysAll?.join(' + ') ??
step.autoCheckListEndpoint}
</code>
{autoSources[step.id] && autoSources[step.id] !== 'port' ? (
<span className="ml-1 text-[10px] text-amber-700">
<span className="ml-1 text-xs text-amber-700">
· resolving from{' '}
<strong className="font-medium">
{autoSources[step.id] === 'env'

4
src/components/admin/qualification-criteria-admin.tsx
View File

@@ -265,7 +265,7 @@ function CriterionEditableRow({
onChange={(e) => setLabel(e.target.value)}
className="h-7 max-w-md text-sm font-medium"
/>
<code className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
<code className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
{criterion.key}
</code>
<div className="ml-auto flex items-center gap-2">
@@ -363,7 +363,7 @@ function CreateCriterionDialog({
placeholder="e.g. budget_confirmed"
/>
{key && !/^[a-z][a-z0-9_]*$/.test(key) ? (
<p className="text-[11px] text-rose-700">
<p className="text-xs text-rose-700">
Must start with a letter; lowercase alphanumeric and underscores only.
</p>
) : null}

6
src/components/admin/queue-overview.tsx
View File

@@ -26,9 +26,7 @@ function StatPill({ label, value, highlight }: StatPillProps) {
>
{value}
</span>
<span className="text-[10px] text-muted-foreground mt-0.5 uppercase tracking-wide">
{label}
</span>
<span className="text-xs text-muted-foreground mt-0.5 uppercase tracking-wide">{label}</span>
</div>
);
}
@@ -65,7 +63,7 @@ export function QueueOverview({ queues }: QueueOverviewProps) {
<StatPill label="failed" value={queue.failed} highlight />
</div>
{queue.delayed > 0 && (
<p className="text-[10px] text-muted-foreground text-center mt-1">
<p className="text-xs text-muted-foreground text-center mt-1">
{queue.delayed} delayed
</p>
)}

6
src/components/admin/residential-stages-admin.tsx
View File

@@ -152,7 +152,7 @@ export function ResidentialStagesAdmin() {
<GripVertical className="h-4 w-4 text-muted-foreground" aria-hidden />
<div className="flex-1 grid grid-cols-1 sm:grid-cols-3 gap-2">
<div className="space-y-1">
<Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
<Label className="text-xs uppercase tracking-wide text-muted-foreground">
Id
</Label>
<Input
@@ -162,7 +162,7 @@ export function ResidentialStagesAdmin() {
/>
</div>
<div className="space-y-1">
<Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
<Label className="text-xs uppercase tracking-wide text-muted-foreground">
Label
</Label>
<Input
@@ -172,7 +172,7 @@ export function ResidentialStagesAdmin() {
/>
</div>
<div className="space-y-1">
<Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
<Label className="text-xs uppercase tracking-wide text-muted-foreground">
Terminal
</Label>
<Select

4
src/components/admin/roles/role-list.tsx
View File

@@ -282,8 +282,8 @@ export function RoleList() {
key={action}
className={
allowed
? 'inline-flex items-center rounded-full bg-emerald-50 text-emerald-900 px-2 py-0.5 text-[11px] font-medium'
: 'inline-flex items-center rounded-full bg-muted text-muted-foreground px-2 py-0.5 text-[11px] font-medium line-through opacity-60'
? 'inline-flex items-center rounded-full bg-emerald-50 text-emerald-900 px-2 py-0.5 text-xs font-medium'
: 'inline-flex items-center rounded-full bg-muted text-muted-foreground px-2 py-0.5 text-xs font-medium line-through opacity-60'
}
>
{action.replace(/_/g, ' ')}

2
src/components/admin/sales-email-config-card.tsx
View File

@@ -435,7 +435,7 @@ export function SalesEmailConfigCard() {
<div className="flex-1">
<p className="font-medium">{lastTest.ok ? 'SMTP test sent' : 'SMTP test failed'}</p>
<p className="text-xs">{lastTest.message}</p>
<p className="mt-0.5 text-[11px] opacity-70">{lastTest.at.toLocaleTimeString()}</p>
<p className="mt-0.5 text-xs opacity-70">{lastTest.at.toLocaleTimeString()}</p>
</div>
</div>
) : null}

4
src/components/admin/settings/settings-manager.tsx
View File

@@ -20,7 +20,7 @@ import {
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { apiFetch } from '@/lib/api/client';
import { SUPPORTED_CURRENCIES } from '@/lib/utils/currency';
import { SUPPORTED_CURRENCIES, currencyLabel } from '@/lib/utils/currency';
interface Setting {
key: string;
@@ -234,7 +234,7 @@ const KNOWN_SETTINGS: Array<{
defaultValue: 'USD',
options: SUPPORTED_CURRENCIES.map((c) => ({
value: c.code,
label: `${c.code} - ${c.label}`,
label: `${c.code} - ${currencyLabel(c.code)}`,
})),
},
];

6
src/components/admin/shared/registry-driven-form.tsx
View File

@@ -394,7 +394,11 @@ function SettingField({
)}
</div>
</div>
{entry.description && <p className="text-xs text-muted-foreground">{entry.description}</p>}
{entry.description && (
<p id={`${entry.key}-description`} className="text-xs text-muted-foreground">
{entry.description}
</p>
)}
<FieldInput
entry={entry}

4
src/components/admin/shared/settings-form-card.tsx
View File

@@ -450,7 +450,7 @@ function ImageUploadField({
className="h-full w-full object-contain"
/>
) : (
<span className="text-[10px] text-muted-foreground">No image</span>
<span className="text-xs text-muted-foreground">No image</span>
)}
</div>
<div className="flex-1 space-y-2">
@@ -476,7 +476,7 @@ function ImageUploadField({
placeholder="https://example.com/logo.png"
className="text-xs"
/>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Upload to use the platform&apos;s storage backend, or paste an external URL.
</p>
</div>

12
src/components/admin/shared/template-token-picker.tsx
View File

@@ -58,13 +58,13 @@ export function TemplateTokenPicker() {
<div className="space-y-4">
{Object.entries(MERGE_FIELDS).map(([scope, fields]) => (
<div key={scope}>
<p className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{SCOPE_LABELS[scope] ?? scope}
</p>
<div className="grid grid-cols-1 gap-x-3 gap-y-0.5 text-[11px] sm:grid-cols-2">
<div className="grid grid-cols-1 gap-x-3 gap-y-0.5 text-xs sm:grid-cols-2">
{fields.map((f) => (
<div key={f.token} className="flex items-baseline gap-1.5">
<code className="rounded bg-muted px-1 font-mono text-[11px]">{f.token}</code>
<code className="rounded bg-muted px-1 font-mono text-xs">{f.token}</code>
<span className="truncate text-muted-foreground">{f.label}</span>
</div>
))}
@@ -74,10 +74,10 @@ export function TemplateTokenPicker() {
{customFields.length > 0 ? (
<div>
<p className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Custom (port-specific)
</p>
<div className="grid grid-cols-1 gap-x-3 gap-y-0.5 text-[11px] sm:grid-cols-2">
<div className="grid grid-cols-1 gap-x-3 gap-y-0.5 text-xs sm:grid-cols-2">
{customFields
.slice()
.sort((a, b) =>
@@ -87,7 +87,7 @@ export function TemplateTokenPicker() {
)
.map((f) => (
<div key={f.id} className="flex items-baseline gap-1.5">
<code className="rounded bg-muted px-1 font-mono text-[11px]">
<code className="rounded bg-muted px-1 font-mono text-xs">
{`{{custom.${f.fieldName}}}`}
</code>
<span className="truncate text-muted-foreground">

2
src/components/admin/templates/template-editor.tsx
View File

@@ -801,7 +801,7 @@ function MarkerOverlay({
width: `${(marker.w ?? DEFAULT_MARKER_W) * 100}%`,
height: `${(marker.h ?? DEFAULT_MARKER_H) * 100}%`,
}}
className="cursor-move rounded border-2 border-primary/70 bg-primary/15 px-1 py-0.5 text-[10px] font-medium text-primary"
className="cursor-move rounded border-2 border-primary/70 bg-primary/15 px-1 py-0.5 text-xs font-medium text-primary"
onMouseDown={onMouseDown}
onContextMenu={onContextMenu}
>

2
src/components/admin/users/user-permission-matrix.tsx
View File

@@ -258,7 +258,7 @@ export function UserPermissionMatrix({ userId }: UserPermissionMatrixProps) {
>
<div className="text-sm">
<Label className="text-sm">{formatAction(action)}</Label>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Inherits: {inherited ? 'granted' : 'denied'}
</p>
</div>

2
src/components/alerts/alert-bell.tsx
View File

@@ -43,7 +43,7 @@ export function AlertBell() {
key={total}
data-testid="alert-bell-badge"
className={cn(
'absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white shadow-sm ring-2 ring-background animate-badge-pop',
'absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xs font-bold text-white shadow-sm ring-2 ring-background animate-badge-pop',
critical > 0 ? 'bg-destructive' : 'bg-amber-500',
)}
>

6
src/components/alerts/alert-card.tsx
View File

@@ -51,16 +51,16 @@ export function AlertCard({ alert, readOnly = false }: AlertCardProps) {
<div className="flex items-baseline gap-2">
<p className="truncate text-sm font-medium text-foreground">{alert.title}</p>
{acknowledged ? (
<span className="text-[10px] uppercase tracking-wide text-muted-foreground">ack</span>
<span className="text-xs uppercase tracking-wide text-muted-foreground">ack</span>
) : null}
</div>
{alert.body ? (
<p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{alert.body}</p>
) : null}
<div className="mt-1 flex items-center gap-2 text-[11px] text-muted-foreground">
<div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
<span>{fired}</span>
<span aria-hidden>·</span>
<span className="font-mono text-[10px]">{alert.ruleId}</span>
<span className="font-mono text-xs">{alert.ruleId}</span>
</div>
</div>
{!readOnly ? (

2
src/components/berths/active-interests-popover.tsx
View File

@@ -84,7 +84,7 @@ export function ActiveInterestsPopover({ berthId, portSlug, count }: Props) {
<span className="truncate">{row.clientName}</span>
</span>
<span
className={`shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${stageBadgeClass(
className={`shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${stageBadgeClass(
row.pipelineStage,
)}`}
>

2
src/components/berths/berth-columns.tsx
View File

@@ -158,7 +158,7 @@ function StatusBadge({ status }: { status: string }) {
function ManualBadge() {
return (
<span
className="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-800"
className="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-xs font-medium uppercase tracking-wide text-amber-800"
title="Status set manually with no backing interest - needs catch-up"
>
Manual

2
src/components/berths/berth-detail-header.tsx
View File

@@ -420,7 +420,7 @@ function InterestLinkPicker({
<span className="flex-1 truncate">{opt.clientName || '(unnamed)'}</span>
<span
className={cn(
'inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[10px] font-medium',
'inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium',
stageBadgeClass(opt.pipelineStage),
)}
>

8
src/components/berths/berth-interest-pulse.tsx
View File

@@ -101,7 +101,7 @@ export function BerthInterestPulse({ berthId }: { berthId: string }) {
<CardTitle className="flex items-center gap-1.5 text-sm font-medium">
<Users className="size-3.5" aria-hidden />
Interested parties
<span className="ml-1 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
<span className="ml-1 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
{active.length}
</span>
</CardTitle>
@@ -136,7 +136,7 @@ export function BerthInterestPulse({ berthId }: { berthId: string }) {
</span>
<span
className={cn(
'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium',
'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
stageBadgeClass(i.pipelineStage),
)}
>
@@ -147,7 +147,7 @@ export function BerthInterestPulse({ berthId }: { berthId: string }) {
key={b.id}
title={b.detail}
className={cn(
'inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium',
'inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium',
b.className,
)}
>
@@ -156,7 +156,7 @@ export function BerthInterestPulse({ berthId }: { berthId: string }) {
))}
</div>
{lastActivity ? (
<p className="text-[11px] tabular-nums text-muted-foreground">
<p className="text-xs tabular-nums text-muted-foreground">
Last activity {lastActivity}
</p>
) : null}

4
src/components/berths/berth-interests-tab.tsx
View File

@@ -161,7 +161,9 @@ export function BerthInterestsTab({ berthId }: BerthInterestsTabProps) {
<th scope="col" className="px-3 py-2">
Last activity
</th>
<th scope="col" className="px-3 py-2 text-right" />
<th scope="col" className="px-3 py-2 text-right">
<span className="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody>

4
src/components/clients/bulk-hard-delete-dialog.tsx
View File

@@ -193,9 +193,7 @@ function BulkHardDeleteDialogBody({ onOpenChange, clientIds, onDeleted }: Props)
<tbody>
{skipped.map((row) => (
<tr key={row.clientId} className="border-t">
<td className="px-2 py-1.5 font-mono text-[11px]">
{row.clientId.slice(0, 8)}…
</td>
<td className="px-2 py-1.5 font-mono text-xs">{row.clientId.slice(0, 8)}…</td>
<td className="px-2 py-1.5">{row.reason}</td>
</tr>
))}

2
src/components/clients/client-card.tsx
View File

@@ -123,7 +123,7 @@ export function ClientCard({ client, portSlug, onEdit, onArchive }: ClientCardPr
<span className="truncate">{interestBerthLabel}</span>
<span aria-hidden>·</span>
<span
className={`shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${interestStageBadge}`}
className={`shrink-0 rounded-full px-1.5 py-0.5 text-xs font-medium ${interestStageBadge}`}
>
{interestStageLabel}
</span>

6
src/components/clients/client-channel-editor.tsx
View File

@@ -251,7 +251,7 @@ function ContactRowItem({
)}
<span className="truncate text-sm">{displayValue}</span>
{row.label ? (
<span className="shrink-0 rounded-sm bg-muted px-1 text-[10px] text-muted-foreground">
<span className="shrink-0 rounded-sm bg-muted px-1 text-xs text-muted-foreground">
{row.label}
</span>
) : null}
@@ -265,7 +265,7 @@ function ContactRowItem({
onClick={() => promote.mutate()}
disabled={promote.isPending}
title="Set as primary"
className={cn('h-6 px-1.5 text-[11px]')}
className={cn('h-6 px-1.5 text-xs')}
>
Make primary
</Button>
@@ -341,7 +341,7 @@ function AddContactRow({
return (
<div className="mt-1 space-y-2 rounded-md border bg-muted/30 p-2">
<div className="space-y-1">
<Label htmlFor={`new-${channel}`} className="text-[11px] uppercase tracking-wide">
<Label htmlFor={`new-${channel}`} className="text-xs uppercase tracking-wide">
New {channel}
</Label>
<Input

2
src/components/clients/client-columns.tsx
View File

@@ -234,7 +234,7 @@ export function getClientColumns({
className="w-64 p-1"
onClick={(e) => e.stopPropagation()}
>
<div className="px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<div className="px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
All linked berths
</div>
<div className="space-y-0.5">

2
src/components/clients/client-form.tsx
View File

@@ -300,7 +300,7 @@ export function ClientForm({
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="w-full sm:max-w-2xl overflow-y-auto">
<SheetContent className="w-full sm:max-w-2xl lg:max-w-4xl overflow-y-auto">
<SheetHeader>
<SheetTitle>{isEdit ? 'Edit Client' : 'New Client'}</SheetTitle>
</SheetHeader>

2
src/components/clients/client-interests-tab.tsx
View File

@@ -67,7 +67,7 @@ function InterestRowItem({
</h3>
<span
className={cn(
'shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium',
'shrink-0 rounded-full px-2 py-0.5 text-xs font-medium',
STAGE_BADGE[stage],
)}
>

8
src/components/clients/client-pipeline-summary.tsx
View File

@@ -209,7 +209,7 @@ function HeroVariant({ clientId, portSlug }: { clientId: string; portSlug: strin
<span className="truncate text-sm font-semibold text-foreground">{berthLabel}</span>
<span
className={cn(
'shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium',
'shrink-0 rounded-full px-2 py-0.5 text-xs font-medium',
STAGE_BADGE[stage],
)}
>
@@ -282,7 +282,7 @@ function PanelVariant({ clientId, portSlug }: { clientId: string; portSlug: stri
return (
<div className="space-y-3">
<div className="flex items-center justify-between gap-2">
<span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Sales pipeline · {interests.length} active
</span>
<Link
@@ -313,7 +313,7 @@ function PanelVariant({ clientId, portSlug }: { clientId: string; portSlug: stri
</span>
<span
className={cn(
'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium',
'shrink-0 rounded-full px-2 py-0.5 text-xs font-medium',
STAGE_BADGE[stage],
)}
>
@@ -331,7 +331,7 @@ function PanelVariant({ clientId, portSlug }: { clientId: string; portSlug: stri
if (dims.length > 0) summary.push(`Wants ${dims.join(' × ')}`);
if (i.source) summary.push(i.source);
return summary.length > 0 ? (
<div className="mt-0.5 truncate text-[11px] text-muted-foreground">
<div className="mt-0.5 truncate text-xs text-muted-foreground">
{summary.join(' · ')}
</div>
) : null;

2
src/components/clients/contacts-editor.tsx
View File

@@ -273,7 +273,7 @@ function ContactRow({
{contact.source === 'eoi-custom-input' && !contact.isPrimary ? (
<span
className="inline-flex items-center rounded bg-amber-100 px-1 text-[10px] font-medium text-amber-800"
className="inline-flex items-center rounded bg-amber-100 px-1 text-xs font-medium text-amber-800"
title={
contact.sourceDocumentId
? 'Spawned from an EOI - open the source document for details.'

6
src/components/clients/dedup-suggestion-panel.tsx
View File

@@ -149,13 +149,13 @@ export function DedupSuggestionPanel({
<div className="flex items-center gap-2">
<p className="truncate text-sm font-medium">{top.fullName}</p>
{isArchived && (
<span className="shrink-0 rounded-full bg-slate-200 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-800 dark:bg-slate-700 dark:text-slate-200">
<span className="shrink-0 rounded-full bg-slate-200 px-1.5 py-0.5 text-xs font-medium uppercase tracking-wide text-slate-800 dark:bg-slate-700 dark:text-slate-200">
archived
</span>
)}
<span
className={cn(
'shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide',
'shrink-0 rounded-full px-1.5 py-0.5 text-xs font-medium uppercase tracking-wide',
isHigh
? 'bg-amber-200 text-amber-900 dark:bg-amber-800 dark:text-amber-100'
: 'bg-muted text-muted-foreground',
@@ -177,7 +177,7 @@ export function DedupSuggestionPanel({
</span>
)}
</div>
<p className="mt-1.5 text-[11px] text-muted-foreground">{top.reasons.join(' · ')}</p>
<p className="mt-1.5 text-xs text-muted-foreground">{top.reasons.join(' · ')}</p>
</div>
<div className="mt-3 flex flex-wrap items-center gap-2">
{isArchived ? (

6
src/components/companies/company-form.tsx
View File

@@ -262,7 +262,7 @@ export function CompanyForm({ open, onOpenChange, company, prefill }: CompanyFor
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="w-full sm:max-w-2xl overflow-y-auto">
<SheetContent className="w-full sm:max-w-2xl lg:max-w-4xl overflow-y-auto">
<SheetHeader>
<SheetTitle>{isEdit ? 'Edit Company' : 'New Company'}</SheetTitle>
</SheetHeader>
@@ -420,7 +420,7 @@ export function CompanyForm({ open, onOpenChange, company, prefill }: CompanyFor
selectedIds={attachedClientIds}
onChange={setAttachedClientIds}
/>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Each pick becomes a company member with role=member. You can refine roles
afterwards on the Members tab.
</p>
@@ -434,7 +434,7 @@ export function CompanyForm({ open, onOpenChange, company, prefill }: CompanyFor
selectedIds={attachedYachtIds}
onChange={setAttachedYachtIds}
/>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Adding a yacht transfers its ownership to this company (logged in the
yacht&apos;s audit trail). Skip if you only want to associate without changing
ownership.

2
src/components/dashboard/activity-feed.tsx
View File

@@ -318,7 +318,7 @@ function ActivityFeedInner() {
{diffLine}
</p>
) : null}
<p className="text-[11px] text-muted-foreground/80 mt-0.5">
<p className="text-xs text-muted-foreground mt-0.5">
{formatDistanceToNow(new Date(item.createdAt), { addSuffix: true })}
</p>
</div>

2
src/components/dashboard/customize-widgets-menu.tsx
View File

@@ -293,7 +293,7 @@ export function CustomizeWidgetsMenu() {
function Section({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div className="py-2 first:pt-1">
<div className="px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<div className="px-1 pb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{title}
</div>
{children}

2
src/components/dashboard/hot-deals-card.tsx
View File

@@ -96,7 +96,7 @@ export function HotDealsCard() {
) : null}
</p>
</div>
<Badge variant="secondary" className="shrink-0 text-[10px]">
<Badge variant="secondary" className="shrink-0 text-xs">
{STAGE_LABELS[d.stage] ?? d.stage}
</Badge>
</Link>

4
src/components/dashboard/my-reminders-rail.tsx
View File

@@ -136,14 +136,14 @@ export function MyRemindersRail() {
<Badge
variant="outline"
className={cn(
'border-transparent text-[10px]',
'border-transparent text-xs',
PRIORITY_BADGE[r.priority] ?? 'bg-muted text-muted-foreground',
)}
>
{r.priority}
</Badge>
) : null}
<span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
{isOverdue
? formatDistanceToNowStrict(due) + ' overdue'
: isUpcoming

2
src/components/dashboard/onboarding-tile.tsx
View File

@@ -57,7 +57,7 @@ export function OnboardingTile() {
</div>
{data.nextStep ? (
<div className="rounded-md border border-dashed border-brand-200 bg-white/60 p-2">
<p className="text-[10px] font-semibold uppercase tracking-wide text-brand-700">
<p className="text-xs font-semibold uppercase tracking-wide text-brand-700">
Next step
</p>
<p className="mt-0.5 text-xs text-foreground">{data.nextStep.label}</p>

14
src/components/dashboard/pipeline-value-tile.tsx
View File

@@ -126,7 +126,7 @@ export function PipelineValueTile({ range }: { range?: DateRange } = {}) {
yields the weighted forecast - a defensible &ldquo;what will likely land&rdquo;
number, vs the gross which assumes every deal closes at full value.
</p>
<div className="mt-3 grid grid-cols-[1fr_auto] gap-x-3 gap-y-1 rounded-md bg-muted/50 p-2.5 text-[11px]">
<div className="mt-3 grid grid-cols-[1fr_auto] gap-x-3 gap-y-1 rounded-md bg-muted/50 p-2.5 text-xs">
{PIPELINE_STAGES.map((s) => {
const dbWeight = forecast.data?.stageBreakdown.find((r) => r.stage === s)?.weight;
const weight = dbWeight ?? STAGE_WEIGHTS[s];
@@ -140,7 +140,7 @@ export function PipelineValueTile({ range }: { range?: DateRange } = {}) {
);
})}
</div>
<p className="mt-3 text-[11px] text-muted-foreground">
<p className="mt-3 text-xs text-muted-foreground">
{forecast.data?.weightsSource === 'db'
? 'Using per-port weights (admins tune these in Settings → Pipeline).'
: 'Using system defaults. Admins can override per port in Settings → Pipeline.'}
@@ -153,7 +153,7 @@ export function PipelineValueTile({ range }: { range?: DateRange } = {}) {
{/* ── Headline numbers ─────────────────────────────────────── */}
<div className="flex items-end justify-between gap-4">
<div className="min-w-0">
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Gross
</p>
{isLoading ? (
@@ -168,7 +168,7 @@ export function PipelineValueTile({ range }: { range?: DateRange } = {}) {
)}
</div>
<div className="text-right">
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Weighted forecast
</p>
{isLoading ? (
@@ -222,12 +222,12 @@ export function PipelineValueTile({ range }: { range?: DateRange } = {}) {
<span className="sm:hidden">{fmtCompact(s.grossValue)}</span>
<span className="hidden sm:inline">{fmt(s.grossValue)}</span>
</p>
<p className="text-[11px] text-muted-foreground tabular-nums">
<p className="text-xs text-muted-foreground tabular-nums">
{s.count} {s.count === 1 ? 'deal' : 'deals'} · {Math.round(s.weight * 100)}%
</p>
{s.dealsMissingPrice > 0 ? (
<p
className="mt-0.5 inline-flex items-center gap-1 text-[10px] font-medium text-warning"
className="mt-0.5 inline-flex items-center gap-1 text-xs font-medium text-warning"
title={`${s.dealsMissingPrice} of ${s.count} ${s.count === 1 ? 'deal has' : 'deals have'} a berth with no price set - gross is undercounted here.`}
>
<AlertTriangle className="size-3" aria-hidden />
@@ -244,7 +244,7 @@ export function PipelineValueTile({ range }: { range?: DateRange } = {}) {
)}
{forecast.data?.weightsSource === 'default' ? (
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Using default stage weights. Tune them in Settings → Pipeline.
</p>
) : null}

2
src/components/dashboard/website-glance-tile.tsx
View File

@@ -68,7 +68,7 @@ export function WebsiteGlanceTile({ range = '30d' }: Props) {
<div className="absolute inset-x-0 top-0 h-1 bg-mint" aria-hidden />
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground sm:text-xs">
<div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground sm:text-xs">
<Globe className="h-3 w-3" aria-hidden />
Website · {shortRangeLabel(range)}
</div>

2
src/components/documents/aggregated-section.tsx
View File

@@ -113,7 +113,7 @@ function GroupBlock<K extends AggregatedItemKind['kind']>({
<div className="px-3 py-2">
<header className="mb-1 text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground">
{group.label}
<span className="ml-1.5 text-muted-foreground/70 tabular-nums">· {group.total}</span>
<span className="ml-1.5 text-muted-foreground tabular-nums">· {group.total}</span>
</header>
<ul className="space-y-1">
{items.map((item) => (

2
src/components/documents/documents-hub.tsx
View File

@@ -460,7 +460,7 @@ function FlatFolderListing({
{childFolders.length > 0 ? (
<div>
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1.5">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1.5">
Subfolders
</p>
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">

4
src/components/documents/entity-folder-view.tsx
View File

@@ -107,7 +107,7 @@ export function EntityFolderView({ portSlug, entityType, entityId }: Props) {
<span className="truncate group-hover:underline">{f.filename}</span>
{signedFromDocumentId ? (
<span
className="ml-1 inline-flex shrink-0 items-center rounded-full bg-emerald-50 px-1.5 py-px text-[10px] font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300"
className="ml-1 inline-flex shrink-0 items-center rounded-full bg-emerald-50 px-1.5 py-px text-xs font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300"
title="This file is a signed copy of a Documenso/uploaded workflow"
>
Signed
@@ -117,7 +117,7 @@ export function EntityFolderView({ portSlug, entityType, entityId }: Props) {
<Link
href={`/${portSlug}/interests/${f.interestId}`}
onClick={(e) => e.stopPropagation()}
className="ml-1 inline-flex shrink-0 items-center rounded-full border bg-muted/40 px-1.5 py-px text-[10px] font-medium text-muted-foreground hover:border-primary/40 hover:bg-accent/40 hover:text-foreground"
className="ml-1 inline-flex shrink-0 items-center rounded-full border bg-muted/40 px-1.5 py-px text-xs font-medium text-muted-foreground hover:border-primary/40 hover:bg-accent/40 hover:text-foreground"
title={`Linked to interest ${f.interestBerthLabel}`}
>
{f.interestBerthLabel}

54
src/components/documents/eoi-generate-dialog.tsx
View File

@@ -610,7 +610,7 @@ export function EoiGenerateDialog({
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="w-full sm:max-w-2xl overflow-y-auto">
<SheetContent className="w-full sm:max-w-2xl lg:max-w-4xl overflow-y-auto">
<SheetHeader>
<SheetTitle className="flex items-center gap-2">
<FileSignature className="size-4" aria-hidden />
@@ -654,7 +654,7 @@ export function EoiGenerateDialog({
) : ctx ? (
<div className="space-y-3 rounded-md border bg-muted/20 p-3">
<div className="space-y-1">
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Required (Section 2 of the EOI)
</p>
<dl className="space-y-1.5">
@@ -690,12 +690,12 @@ export function EoiGenerateDialog({
</div>
<div className="space-y-1 border-t pt-2">
<div className="flex items-center justify-between gap-2">
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Section 3 - yacht details
</p>
<div className="flex items-center gap-2">
{ctx.yacht ? (
<label className="inline-flex cursor-pointer items-center gap-1.5 text-[11px] text-muted-foreground">
<label className="inline-flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
<input
type="checkbox"
checked={includeYachtDetails}
@@ -707,7 +707,7 @@ export function EoiGenerateDialog({
</label>
) : null}
{ctx.yacht && includeYachtDetails ? (
<div className="inline-flex rounded-md border bg-muted/30 p-0.5 text-[11px]">
<div className="inline-flex rounded-md border bg-muted/30 p-0.5 text-xs">
<button
type="button"
onClick={() => setDimensionUnit('ft')}
@@ -739,7 +739,7 @@ export function EoiGenerateDialog({
</div>
</div>
{ctx.yacht && !includeYachtDetails ? (
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Yacht details will be omitted from the EOI even though a yacht is linked.
</p>
) : null}
@@ -759,7 +759,7 @@ export function EoiGenerateDialog({
<button
type="button"
onClick={() => setYachtSpawnOpen(true)}
className="mt-0.5 shrink-0 text-[11px] text-primary hover:underline"
className="mt-0.5 shrink-0 text-xs text-primary hover:underline"
title="Create a new yacht linked to this client"
>
+ New yacht
@@ -782,11 +782,11 @@ export function EoiGenerateDialog({
{linkedBerthsRes && linkedBerthsRes.data.length > 0 ? (
<div className="border-t pt-2 space-y-2">
<div>
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
EOI scope ({linkedBerthsRes.data.length} linked berth
{linkedBerthsRes.data.length === 1 ? '' : 's'})
</p>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Confirm signature scope and public-map visibility for each berth before
generating. Defaults reflect what&apos;s saved on the interest.
</p>
@@ -805,7 +805,7 @@ export function EoiGenerateDialog({
<div className="flex items-center gap-2 min-w-0">
<span className="font-mono text-sm">{link.mooringNumber ?? '-'}</span>
{link.isPrimary ? (
<span className="text-[10px] uppercase tracking-wide text-primary">
<span className="text-xs uppercase tracking-wide text-primary">
Primary
</span>
) : null}
@@ -845,7 +845,7 @@ export function EoiGenerateDialog({
);
})}
</div>
<p className="text-[10px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
<strong>In EOI</strong>: covered by this signed envelope.{' '}
<strong>Public map</strong>: shown as &quot;Under Offer&quot; on the marketing
site.
@@ -854,7 +854,7 @@ export function EoiGenerateDialog({
) : null}
{portSlug && clientId && (
<div className="border-t pt-2 space-y-1">
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Editing name / yacht name above patches the underlying records directly. For
phone, address, or to manage linked berths, jump to the canonical page:
</p>
@@ -889,7 +889,7 @@ export function EoiGenerateDialog({
<p className="text-xs font-medium text-amber-900">
Missing required client details
</p>
<p className="text-[11px] text-amber-800/80">
<p className="text-xs text-amber-800/80">
Fill the fields below - they&apos;ll be saved to the client&apos;s record before
the EOI renders.
</p>
@@ -1236,7 +1236,7 @@ function OverridableContactField({
<span className="flex-1">
{effective ?? (missing ? 'Missing - required' : 'Not set')}
{override?.value != null ? (
<span className="ml-1 inline-flex items-center rounded bg-amber-100 px-1 text-[10px] font-medium text-amber-800">
<span className="ml-1 inline-flex items-center rounded bg-amber-100 px-1 text-xs font-medium text-amber-800">
[EOI]
</span>
) : null}
@@ -1245,7 +1245,7 @@ function OverridableContactField({
<button
type="button"
onClick={() => setExpanded(true)}
className="text-[11px] text-primary hover:underline"
className="text-xs text-primary hover:underline"
>
{override?.value != null ? 'Edit override' : 'Override'}
</button>
@@ -1253,7 +1253,7 @@ function OverridableContactField({
<button
type="button"
onClick={collapseAndClear}
className="text-[11px] text-muted-foreground hover:underline"
className="text-xs text-muted-foreground hover:underline"
>
Clear & close
</button>
@@ -1329,7 +1329,7 @@ function OverridableContactField({
/>
) : null}
<div className="space-y-1">
<label className="flex items-start gap-2 text-[11px] text-muted-foreground cursor-pointer">
<label className="flex items-start gap-2 text-xs text-muted-foreground cursor-pointer">
<input
type="checkbox"
className="mt-0.5"
@@ -1348,12 +1348,12 @@ function OverridableContactField({
/>
<span>
Use only for this EOI
<span className="block text-[10px]">
<span className="block text-xs">
Records the deviation on this document; canonical record untouched.
</span>
</span>
</label>
<label className="flex items-start gap-2 text-[11px] text-muted-foreground cursor-pointer">
<label className="flex items-start gap-2 text-xs text-muted-foreground cursor-pointer">
<input
type="checkbox"
className="mt-0.5"
@@ -1370,7 +1370,7 @@ function OverridableContactField({
/>
<span>
Set as default for future docs
<span className="block text-[10px]">
<span className="block text-xs">
Promotes this value to the canonical primary on save.
</span>
</span>
@@ -1497,7 +1497,7 @@ function OverridableAddressField({
<span className="flex-1">
{effectiveSummary ?? (missing ? 'Missing - required' : 'Not set')}
{override ? (
<span className="ml-1 inline-flex items-center rounded bg-amber-100 px-1 text-[10px] font-medium text-amber-800">
<span className="ml-1 inline-flex items-center rounded bg-amber-100 px-1 text-xs font-medium text-amber-800">
[EOI]
</span>
) : null}
@@ -1506,7 +1506,7 @@ function OverridableAddressField({
<button
type="button"
onClick={() => setExpanded(true)}
className="text-[11px] text-primary hover:underline"
className="text-xs text-primary hover:underline"
>
{override ? 'Edit override' : 'Override'}
</button>
@@ -1517,7 +1517,7 @@ function OverridableAddressField({
setExpanded(false);
onChange(null);
}}
className="text-[11px] text-muted-foreground hover:underline"
className="text-xs text-muted-foreground hover:underline"
>
Clear & close
</button>
@@ -1606,7 +1606,7 @@ function OverridableAddressField({
</div>
<div className="space-y-1">
<label className="flex items-start gap-2 text-[11px] text-muted-foreground cursor-pointer">
<label className="flex items-start gap-2 text-xs text-muted-foreground cursor-pointer">
<input
type="checkbox"
className="mt-0.5"
@@ -1621,12 +1621,12 @@ function OverridableAddressField({
/>
<span>
Use only for this EOI
<span className="block text-[10px]">
<span className="block text-xs">
Records the deviation on this document; canonical address untouched.
</span>
</span>
</label>
<label className="flex items-start gap-2 text-[11px] text-muted-foreground cursor-pointer">
<label className="flex items-start gap-2 text-xs text-muted-foreground cursor-pointer">
<input
type="checkbox"
className="mt-0.5"
@@ -1643,7 +1643,7 @@ function OverridableAddressField({
/>
<span>
Set as default for future docs
<span className="block text-[10px]">
<span className="block text-xs">
Promotes this address to the canonical primary on save.
</span>
</span>

2
src/components/documents/external-eoi-edit-dialog.tsx
View File

@@ -119,7 +119,7 @@ export function ExternalEoiEditDialog({ open, onOpenChange, documentId, initial
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-3xl">
<DialogContent className="sm:max-w-3xl lg:max-w-5xl">
<DialogHeader>
<DialogTitle>Edit document metadata</DialogTitle>
<DialogDescription>

6
src/components/documents/signing-details-dialog.tsx
View File

@@ -55,7 +55,7 @@ export function SigningDetailsDialog({ documentId, open, onOpenChange }: Props)
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-3xl">
<DialogContent className="sm:max-w-3xl lg:max-w-5xl">
<DialogHeader>
<DialogTitle>Signing details</DialogTitle>
<DialogDescription>
@@ -78,7 +78,7 @@ export function SigningDetailsDialog({ documentId, open, onOpenChange }: Props)
</StatusPill>
<span>·</span>
<span>
Created {new Date(data.data.workflow.createdAt).toLocaleString('en-GB')}
Created {new Date(data.data.workflow.createdAt).toLocaleString(undefined)}
</span>
</p>
</section>
@@ -118,7 +118,7 @@ export function SigningDetailsDialog({ documentId, open, onOpenChange }: Props)
{data.data.events.map((e) => (
<li key={e.id} className="flex items-center gap-2 text-muted-foreground">
<span className="tabular-nums">
{new Date(e.createdAt).toLocaleString('en-GB')}
{new Date(e.createdAt).toLocaleString(undefined)}
</span>
<span>{e.eventType.replace(/_/g, ' ')}</span>
</li>

6
src/components/documents/signing-progress.tsx
View File

@@ -311,7 +311,7 @@ export function SigningProgress({ documentId, signers }: SigningProgressProps) {
</span>
<span
className={cn(
'inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
'inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs font-semibold uppercase tracking-wide',
styles.statusChipBg,
styles.statusChipText,
)}
@@ -319,7 +319,7 @@ export function SigningProgress({ documentId, signers }: SigningProgressProps) {
<StatusIcon className="size-2.5" aria-hidden />
{statusLabel}
</span>
<span className="text-[11px] text-muted-foreground">
<span className="text-xs text-muted-foreground">
· {ROLE_LABELS[signer.signerRole] ?? signer.signerRole}
{' · '}
<span className="font-medium">#{signer.signingOrder}</span>
@@ -331,7 +331,7 @@ export function SigningProgress({ documentId, signers }: SigningProgressProps) {
reps in manual-send mode know an action is required.
Once invited, each event surfaces with a precise
timestamp tooltip (the relative-time is the headline). */}
<div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5 text-[11px] text-muted-foreground">
<div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5 text-xs text-muted-foreground">
{!signer.invitedAt && signer.status === 'pending' ? (
<span className="inline-flex items-center gap-1 italic text-amber-700">
<Mail className="size-3" aria-hidden />

10
src/components/documents/upload-for-signing-dialog.tsx
View File

@@ -613,7 +613,7 @@ function DialogBody({
rep needs to re-pick the PDF - the rest of the state
(title, signers, placements, custom note) survives. */}
{draftSavedAt ? (
<div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
<div className="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
<span title={`Draft auto-saved ${new Date(draftSavedAt).toLocaleString()}`}>
Draft saved
</span>
@@ -621,7 +621,7 @@ function DialogBody({
type="button"
variant="ghost"
size="sm"
className="h-6 px-2 text-[11px] text-muted-foreground hover:text-destructive"
className="h-6 px-2 text-xs text-muted-foreground hover:text-destructive"
onClick={discardDraft}
>
Discard
@@ -1551,7 +1551,7 @@ function FieldMetaSubPanel({
if (field.type === 'TEXT') {
return (
<div className="space-y-2 rounded-md border bg-muted/30 p-2">
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Text settings
</p>
<div className="space-y-1">
@@ -1588,7 +1588,7 @@ function FieldMetaSubPanel({
if (field.type === 'NUMBER') {
return (
<div className="space-y-2 rounded-md border bg-muted/30 p-2">
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Number settings
</p>
<div className="space-y-1">
@@ -1641,7 +1641,7 @@ function FieldMetaSubPanel({
const rawValues = (meta.values as Array<{ value: string; checked?: boolean }>) ?? [];
return (
<div className="space-y-2 rounded-md border bg-muted/30 p-2">
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{field.type === 'CHECKBOX'
? 'Checkbox options'
: field.type === 'RADIO'

2
src/components/email/tracked-link-composer-button.tsx
View File

@@ -130,7 +130,7 @@ export function TrackedLinkComposerButton({ sendId, onInsert, variant = 'inline'
Copy
</Button>
</div>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Redirects to{' '}
<a
href={result.targetUrl}

2
src/components/files/file-grid.tsx
View File

@@ -97,7 +97,7 @@ export function FileGrid({
<p className="w-full truncate text-center text-xs font-medium" title={file.filename}>
{file.filename}
</p>
<div className="flex flex-col items-center gap-0.5 text-[10px] text-muted-foreground">
<div className="flex flex-col items-center gap-0.5 text-xs text-muted-foreground">
<span>{formatBytes(file.sizeBytes)}</span>
<span>{format(new Date(file.createdAt), 'MMM d, yyyy')}</span>
</div>

2
src/components/interests/assigned-to-chip.tsx
View File

@@ -77,7 +77,7 @@ export function AssignedToChip({
type="button"
aria-label={`Change deal owner (currently ${label})`}
className={cn(
'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors',
'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors',
currentAssignedTo
? 'border-sky-200 bg-sky-50 text-sky-800 hover:bg-sky-100'
: 'border-border bg-muted/50 text-muted-foreground hover:bg-muted',

8
src/components/interests/deal-pulse-chip.tsx
View File

@@ -45,7 +45,7 @@ export function DealPulseChip({ interest }: { interest: DealHealthInput }) {
<button
type="button"
className={cn(
'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors cursor-pointer',
'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors cursor-pointer',
tint,
)}
aria-label={`Deal pulse: ${label}, score ${health.score}/100. Click for breakdown.`}
@@ -65,7 +65,7 @@ export function DealPulseChip({ interest }: { interest: DealHealthInput }) {
</div>
<div>
<p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
What pushed the score
</p>
{health.signals.length === 0 ? (
@@ -79,7 +79,7 @@ export function DealPulseChip({ interest }: { interest: DealHealthInput }) {
<li key={s.id} className="flex items-start gap-2">
<span
className={cn(
'shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold tabular-nums',
'shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold tabular-nums',
s.delta > 0 ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800',
)}
>
@@ -92,7 +92,7 @@ export function DealPulseChip({ interest }: { interest: DealHealthInput }) {
)}
</div>
<div className="rounded-md bg-muted/40 p-2.5 text-[11px] text-muted-foreground">
<div className="rounded-md bg-muted/40 p-2.5 text-xs text-muted-foreground">
<p className="font-medium text-foreground/80">How this is calculated</p>
<p className="mt-0.5">
Every signal above traces to a specific date or pipeline stage on this deal. Recent

2
src/components/interests/external-eoi-upload-dialog.tsx
View File

@@ -237,7 +237,7 @@ export function ExternalEoiUploadDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-2xl">
<DialogContent className="sm:max-w-2xl lg:max-w-4xl">
<DialogHeader>
<DialogTitle>Upload externally-signed EOI</DialogTitle>
<DialogDescription>

4
src/components/interests/interest-card.tsx
View File

@@ -161,7 +161,7 @@ export function InterestCard({ interest, portSlug, onEdit, onArchive }: Interest
key={b.id}
title={b.detail}
className={cn(
'inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium',
'inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium',
b.className,
)}
>
@@ -185,7 +185,7 @@ export function InterestCard({ interest, portSlug, onEdit, onArchive }: Interest
) : null}
{lastActivity ? (
<p className="mt-1.5 text-[11px] text-muted-foreground tabular-nums">
<p className="mt-1.5 text-xs text-muted-foreground tabular-nums">
Last activity {lastActivity}
</p>
) : null}

2
src/components/interests/interest-columns.tsx
View File

@@ -227,7 +227,7 @@ export function getInterestColumns({
key={b.id}
title={b.detail}
aria-label={b.detail}
className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium ${b.className}`}
className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium ${b.className}`}
>
{b.label}
</span>

12
src/components/interests/interest-contact-log-tab.tsx
View File

@@ -230,7 +230,7 @@ function ContactLogRow({
<div className="min-w-0 flex-1 space-y-1.5">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-sm font-medium text-foreground">{channelMeta.label}</span>
<Badge variant="outline" className="text-[10px] capitalize">
<Badge variant="outline" className="text-xs capitalize">
{entry.direction}
</Badge>
<span className="text-xs text-muted-foreground">
@@ -511,7 +511,7 @@ function ComposeDialogBody({
}
onClick={() => (voice.isListening ? voice.stop() : voice.start())}
className={cn(
'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors',
'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors',
voice.isListening
? 'border-rose-300 bg-rose-50 text-rose-800 animate-pulse'
: 'border-border bg-muted/40 text-muted-foreground hover:bg-muted',
@@ -532,7 +532,7 @@ function ComposeDialogBody({
) : (
<span
title="Voice transcription isn't supported in this browser."
className="inline-flex items-center gap-1 text-[11px] text-muted-foreground"
className="inline-flex items-center gap-1 text-xs text-muted-foreground"
>
<MicOff className="size-3" aria-hidden />
Voice unavailable
@@ -547,10 +547,10 @@ function ComposeDialogBody({
onChange={(e) => setSummary(e.target.value)}
/>
{voice.isListening && voice.interim ? (
<p className="text-[11px] italic text-muted-foreground">{voice.interim}…</p>
<p className="text-xs italic text-muted-foreground">{voice.interim}…</p>
) : null}
{voice.error ? (
<p className="text-[11px] text-rose-700">Voice error: {voice.error}</p>
<p className="text-xs text-rose-700">Voice error: {voice.error}</p>
) : null}
</div>
@@ -589,7 +589,7 @@ function ComposeDialogBody({
onChange={setFollowUpAt}
className="max-w-xs"
/>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
A reminder is created on this interest for the time above.
</p>
</div>

2
src/components/interests/interest-contract-tab.tsx
View File

@@ -414,7 +414,7 @@ function StatusBadge({ status }: { status: DocumentRow['status'] }) {
<Badge
variant="outline"
className={cn(
'border-transparent text-[10px] font-semibold uppercase tracking-wide',
'border-transparent text-xs font-semibold uppercase tracking-wide',
STATUS_TONES[status],
)}
>

2
src/components/interests/interest-detail-header.tsx
View File

@@ -276,7 +276,7 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
)}
{(interest.activeReminderCount ?? 0) > 0 ? (
<span
className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-800"
className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-800"
title={`${interest.activeReminderCount} pending reminder${
interest.activeReminderCount === 1 ? '' : 's'
}`}

4
src/components/interests/interest-eoi-tab.tsx
View File

@@ -402,7 +402,7 @@ function ActiveEoiCard({
local preference here so the UI matches what was sent. */}
<span
className={cn(
'inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide',
'inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs font-medium uppercase tracking-wide',
signingOrder === 'SEQUENTIAL'
? 'border-indigo-200 bg-indigo-50 text-indigo-800'
: 'border-sky-200 bg-sky-50 text-sky-800',
@@ -665,7 +665,7 @@ function StatusBadge({ status }: { status: DocumentRow['status'] }) {
<Badge
variant="outline"
className={cn(
'border-transparent text-[10px] font-semibold uppercase tracking-wide',
'border-transparent text-xs font-semibold uppercase tracking-wide',
STATUS_TONES[status],
)}
>

6
src/components/interests/interest-form.tsx
View File

@@ -355,7 +355,7 @@ export function InterestForm({ open, onOpenChange, defaultClientId, interest }:
requestClose();
}}
>
<SheetContent className="w-full sm:max-w-2xl overflow-y-auto">
<SheetContent className="w-full sm:max-w-2xl lg:max-w-4xl overflow-y-auto">
<SheetHeader>
<SheetTitle>{isEdit ? 'Edit Interest' : 'New Interest'}</SheetTitle>
</SheetHeader>
@@ -533,7 +533,7 @@ export function InterestForm({ open, onOpenChange, defaultClientId, interest }:
/>
<span className="flex-1">{option.label}</span>
{isPrimary && (
<span className="ml-2 rounded bg-primary/15 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary">
<span className="ml-2 rounded bg-primary/15 px-1.5 py-0.5 text-xs font-medium uppercase tracking-wide text-primary">
primary
</span>
)}
@@ -935,7 +935,7 @@ function DimensionInput({
}}
/>
{altValue ? (
<p className="text-[11px] leading-tight text-muted-foreground">≈ {altValue}</p>
<p className="text-xs leading-tight text-muted-foreground">≈ {altValue}</p>
) : null}
</div>
);

2
src/components/interests/interest-reservation-tab.tsx
View File

@@ -410,7 +410,7 @@ function StatusBadge({ status }: { status: DocumentRow['status'] }) {
<Badge
variant="outline"
className={cn(
'border-transparent text-[10px] font-semibold uppercase tracking-wide',
'border-transparent text-xs font-semibold uppercase tracking-wide',
STATUS_TONES[status],
)}
>

16
src/components/interests/interest-tabs.tsx
View File

@@ -363,7 +363,7 @@ function MilestoneAdvanceButton({
onChange={setDate}
placeholder="Pick a date"
/>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Defaults to today - back-date if the event happened earlier.
</p>
</div>
@@ -429,7 +429,7 @@ function MilestoneBackfillButton({
onChange={setDate}
placeholder="Pick a date"
/>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Records the date the milestone happened. Does not change the deal&apos;s pipeline stage.
</p>
</div>
@@ -491,14 +491,14 @@ function MilestoneSection({
<Icon className={cn('size-4', isActive ? 'text-brand-600' : 'text-muted-foreground')} />
<h3 className="text-sm font-semibold tracking-tight text-foreground">{title}</h3>
{isActive ? (
<span className="inline-flex items-center gap-1 rounded-full bg-brand-600 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-white shadow-sm">
<span className="inline-flex items-center gap-1 rounded-full bg-brand-600 px-2 py-0.5 text-xs font-semibold uppercase tracking-[0.08em] text-white shadow-sm">
<span className="size-1.5 rounded-full bg-white/90" aria-hidden />
Next step
</span>
) : null}
</div>
{status ? (
<span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
<span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
{humanizeStatus(status)}
</span>
) : null}
@@ -1004,7 +1004,7 @@ function OverviewTab({
disabled={stageMutation.isPending}
onConfirm={(date) => advance('deposit_paid', date)}
/>
<span className="text-[11px] text-muted-foreground">
<span className="text-xs text-muted-foreground">
Or record a payment in the Payments section.
</span>
</div>
@@ -1119,7 +1119,7 @@ function OverviewTab({
gates the actual stage move). */}
{pastMilestones.length > 0 && (
<div className="rounded-lg border bg-muted/20">
<div className="flex items-center gap-2 border-b px-4 py-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<div className="flex items-center gap-2 border-b px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
<span>Past</span>
</div>
<Accordion type="multiple" className="px-4">
@@ -1129,7 +1129,7 @@ function OverviewTab({
<div className="flex flex-1 items-center gap-2 text-left text-muted-foreground">
<CheckCircle2 className="size-3 shrink-0 text-emerald-600" aria-hidden />
<span className="font-medium text-foreground">{m.title}</span>
<span className="text-[10px]">·</span>
<span className="text-xs">·</span>
<span className="truncate text-xs">{m.pastSummary}</span>
</div>
</AccordionTrigger>
@@ -1406,7 +1406,7 @@ function OverviewTab({
a context hint. */}
<span
className={cn(
'inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[10px] font-medium',
'inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium',
STAGE_BADGE[interest.pipelineStage as PipelineStage] ??
'bg-muted text-muted-foreground',
)}

2
src/components/interests/interest-timeline.tsx
View File

@@ -131,7 +131,7 @@ export function InterestTimeline({ interestId }: InterestTimelineProps) {
<p className="text-sm">
{event.description}
{isAuto ? (
<span className="ml-2 inline-flex items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 align-middle text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
<span className="ml-2 inline-flex items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 align-middle text-xs font-medium uppercase tracking-wide text-muted-foreground">
<Bot className="h-3 w-3" aria-hidden />
Auto
</span>

6
src/components/interests/linked-berths-list.tsx
View File

@@ -378,7 +378,7 @@ function LinkedBerthRowItem({
<HelpCircle className="h-3.5 w-3.5" aria-hidden />
</button>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-xs text-[11px] leading-snug">
<TooltipContent side="top" className="max-w-xs text-xs leading-snug">
Mark this berth as one your client is actively considering. When on, the berth
appears as <strong>Under Offer</strong> on the public map and counts toward the
recommender&apos;s &quot;heat&quot; score. Turn off if the link is legal/EOI-only.
@@ -413,7 +413,7 @@ function LinkedBerthRowItem({
<HelpCircle className="h-3.5 w-3.5" aria-hidden />
</button>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-xs text-[11px] leading-snug">
<TooltipContent side="top" className="max-w-xs text-xs leading-snug">
Include this berth in the EOI&apos;s signed berth range. When on, the berth is
covered by the same signature and shows up in the EOI&apos;s{' '}
<strong>Berth Range</strong> form field (e.g. &quot;A1-A3, B5-B7&quot;). Turn off
@@ -786,7 +786,7 @@ function BerthSection({
) : null}
</h4>
</div>
<p className="text-[11px] text-muted-foreground">{hint}</p>
<p className="text-xs text-muted-foreground">{hint}</p>
</div>
{count === 0 && emptyText ? (
<p className="rounded-md border border-dashed bg-muted/30 px-3 py-2 text-xs text-muted-foreground">

2
src/components/interests/multi-eoi-chip.tsx
View File

@@ -44,7 +44,7 @@ export function MultiEoiChip({ interestId }: { interestId: string }) {
return (
<span
title={`This interest has ${inflight.length} in-flight EOI documents - review on the EOI tab.`}
className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-800"
className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-800"
>
<FileSignature className="size-3" aria-hidden />
{inflight.length} EOIs

107
src/components/interests/payments-section.tsx
View File

@@ -1,8 +1,8 @@
'use client';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Plus, Trash2, Receipt } from 'lucide-react';
import { ChevronDown, ChevronRight, Plus, Trash2, Receipt } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { DatePicker } from '@/components/ui/date-picker';
@@ -77,6 +77,40 @@ function formatDate(iso: string): string {
return new Date(iso).toLocaleDateString();
}
/**
* Per-interest collapse state. Persisted to localStorage so a rep
* who collapses the section on one deal sees it stay collapsed when
* they navigate away and back. Default collapsed (deposits are a
* reference history once the rep stops actively recording them); the
* "add a deposit" flow auto-expands so the new row is visible.
*/
function usePaymentsCollapsed(interestId: string): readonly [boolean, (v: boolean) => void] {
const storageKey = `pn-crm.payments-collapsed.v1.${interestId}`;
const [collapsed, setCollapsedState] = useState<boolean>(true);
// Canonical client-only hydration pattern: server renders the default
// (true), then on mount we read localStorage and reconcile. Initializing
// useState() lazily from localStorage would risk a hydration mismatch
// since the server has no access to the user's browser storage.
useEffect(() => {
try {
const raw = window.localStorage.getItem(storageKey);
// eslint-disable-next-line react-hooks/set-state-in-effect
if (raw !== null) setCollapsedState(raw === '1');
} catch {
// ignore — localStorage may be unavailable in private mode
}
}, [storageKey]);
function setCollapsed(v: boolean): void {
setCollapsedState(v);
try {
window.localStorage.setItem(storageKey, v ? '1' : '0');
} catch {
// ignore
}
}
return [collapsed, setCollapsed] as const;
}
export function PaymentsSection({
interestId,
depositExpectedAmount,
@@ -88,6 +122,7 @@ export function PaymentsSection({
}) {
const queryClient = useQueryClient();
const [recordOpen, setRecordOpen] = useState(false);
const [collapsed, setCollapsed] = usePaymentsCollapsed(interestId);
const { data, isLoading } = useQuery<PaymentsResponse>({
queryKey: ['interest-payments', interestId],
@@ -122,12 +157,65 @@ export function PaymentsSection({
? Math.max(0, expectedAmount - runningTotal)
: null;
// Collapsed summary bar — drops the full section to one line so the
// milestone strip above gets the rep's primary visual focus. Click
// anywhere on the bar (or the chevron) to expand inline.
if (collapsed) {
const summaryText =
payments.length === 0
? 'Not received yet'
: `${formatMoney(total?.total ?? '0', expectedCurrency)} received · ${payments.length} payment${payments.length === 1 ? '' : 's'}`;
return (
<>
<button
type="button"
onClick={() => setCollapsed(false)}
className="group flex w-full items-center justify-between gap-3 rounded-lg border bg-card/40 px-4 py-3 text-left transition-colors hover:bg-card/60"
aria-expanded={false}
aria-controls={`payments-section-${interestId}`}
>
<span className="flex items-center gap-2">
<ChevronRight
className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5"
aria-hidden
/>
<span className="text-sm font-semibold">Payments</span>
<span className="text-xs text-muted-foreground">· {summaryText}</span>
</span>
<span className="text-xs text-muted-foreground">Expand</span>
</button>
<RecordPaymentSheet
open={recordOpen}
onOpenChange={setRecordOpen}
interestId={interestId}
defaultCurrency={expectedCurrency}
onRecorded={() => setCollapsed(false)}
/>
</>
);
}
return (
<section className="rounded-lg border bg-card/40 p-4 space-y-3">
<section
id={`payments-section-${interestId}`}
className="rounded-lg border bg-card/40 p-4 space-y-3"
>
<div className="flex items-center justify-between gap-3">
<div>
<h3 className="text-sm font-semibold">Payments</h3>
<p className="text-xs text-muted-foreground">
<div className="flex-1">
<button
type="button"
onClick={() => setCollapsed(true)}
className="group inline-flex items-center gap-2 text-left"
aria-expanded={true}
aria-controls={`payments-section-${interestId}`}
>
<ChevronDown
className="size-4 text-muted-foreground transition-transform group-hover:translate-y-0.5"
aria-hidden
/>
<h3 className="text-sm font-semibold">Payments</h3>
</button>
<p className="mt-0.5 text-xs text-muted-foreground">
Records that money was received or refunded. No invoices are issued - the bank handles
that.
</p>
@@ -169,7 +257,7 @@ export function PaymentsSection({
<li key={p.id} className="flex items-center justify-between gap-3 px-3 py-2">
<div className="flex items-center gap-2.5">
<span
className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium ${
className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${
TYPE_TINT[p.paymentType] ?? TYPE_TINT.other
}`}
>
@@ -213,6 +301,7 @@ export function PaymentsSection({
onOpenChange={setRecordOpen}
interestId={interestId}
defaultCurrency={expectedCurrency}
onRecorded={() => setCollapsed(false)}
/>
</section>
);
@@ -223,11 +312,13 @@ function RecordPaymentSheet({
onOpenChange,
interestId,
defaultCurrency,
onRecorded,
}: {
open: boolean;
onOpenChange: (v: boolean) => void;
interestId: string;
defaultCurrency: string;
onRecorded?: () => void;
}) {
const queryClient = useQueryClient();
const [paymentType, setPaymentType] = useState<string>('deposit');
@@ -257,7 +348,7 @@ function RecordPaymentSheet({
queryClient.invalidateQueries({ queryKey: ['interest-payments', interestId] });
queryClient.invalidateQueries({ queryKey: ['interests', interestId] });
onOpenChange(false);
// Reset form for next use
onRecorded?.();
setAmount('');
setNotes('');
setAcknowledgedNoReceipt(false);

2
src/components/interests/qualification-checklist.tsx
View File

@@ -188,7 +188,7 @@ export function QualificationChecklist({
</span>
{c.autoSatisfied && (
<span
className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200"
className="rounded bg-emerald-100 px-1.5 py-0.5 text-xs font-medium uppercase tracking-wide text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200"
title="System-derived from data on this interest"
>
Auto

2
src/components/interests/supplemental-info-request-button.tsx
View File

@@ -174,7 +174,7 @@ export function SupplementalInfoRequestButton({ interestId, eoiStatus }: Props)
submitted. Hidden when the list is empty. */}
{tokens.length > 0 ? (
<div className="space-y-1 border-t pt-2">
<div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Issuance history
</div>
<ul className="divide-y">

6
src/components/layout/inbox.tsx
View File

@@ -129,7 +129,7 @@ export function Inbox() {
key={combined}
data-testid="inbox-bell-badge"
className={cn(
'absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white shadow-sm ring-2 ring-background animate-badge-pop',
'absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xs font-bold text-white shadow-sm ring-2 ring-background animate-badge-pop',
// Critical system alerts win the colour war - they need the
// most attention. Otherwise the brand gradient.
systemCritical > 0 ? 'bg-destructive' : 'bg-gradient-brand',
@@ -149,7 +149,7 @@ export function Inbox() {
<Bell className="h-3 w-3" aria-hidden />
Personal
{personalUnread > 0 ? (
<span className="ml-1 rounded-full bg-brand/15 px-1.5 text-[10px] font-semibold text-brand">
<span className="ml-1 rounded-full bg-brand/15 px-1.5 text-xs font-semibold text-brand">
{personalUnread > 99 ? '99+' : personalUnread}
</span>
) : null}
@@ -160,7 +160,7 @@ export function Inbox() {
{systemTotal > 0 ? (
<span
className={cn(
'ml-1 rounded-full px-1.5 text-[10px] font-semibold',
'ml-1 rounded-full px-1.5 text-xs font-semibold',
systemCritical > 0
? 'bg-destructive/15 text-destructive'
: 'bg-amber-500/15 text-amber-600',

2
src/components/layout/mobile/more-sheet.tsx
View File

@@ -111,7 +111,7 @@ export function MoreSheet({
<div className="space-y-4 px-3 pb-4">
{groups.map((group) => (
<section key={group.label}>
<h3 className="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<h3 className="mb-1.5 px-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{group.label}
</h3>
<ul className="grid grid-cols-3 gap-2">

6
src/components/layout/sidebar.tsx
View File

@@ -365,7 +365,7 @@ function SidebarContent({
<div key={section.title}>
{!collapsed && (
<div className="flex items-center justify-between px-1 mb-1">
<span className="text-slate-500 text-[10px] font-semibold uppercase tracking-[0.12em]">
<span className="text-slate-500 text-xs font-semibold uppercase tracking-[0.12em]">
{section.title}
</span>
{section.adminRequired && (
@@ -457,12 +457,12 @@ function SidebarContent({
</p>
<Badge
variant="outline"
className="text-[10px] px-1.5 py-0 text-slate-500 border-slate-300 mt-0.5"
className="text-xs px-1.5 py-0 text-slate-500 border-slate-300 mt-0.5"
>
{isSuperAdmin ? 'Super Admin' : formatRole(portRoles[0]?.role?.name)}
</Badge>
{currentPortName && (
<p className="mt-1 text-[10px] text-slate-400 truncate">{currentPortName}</p>
<p className="mt-1 text-xs text-slate-400 truncate">{currentPortName}</p>
)}
</div>
</button>

2
src/components/notifications/notification-bell.tsx
View File

@@ -80,7 +80,7 @@ export function NotificationBell() {
{unreadCount > 0 && (
<span
key={unreadCount}
className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-gradient-brand text-[10px] font-bold text-white shadow-sm ring-2 ring-background animate-badge-pop"
className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-gradient-brand text-xs font-bold text-white shadow-sm ring-2 ring-background animate-badge-pop"
>
{unreadCount > 99 ? '99+' : unreadCount}
</span>

4
src/components/reminders/reminder-form.tsx
View File

@@ -287,7 +287,7 @@ function ReminderFormBody({
placeholder="e.g. Follow up about EOI, Check insurance docs"
required
/>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Short label so future-you knows what this is at a glance.
</p>
</div>
@@ -378,7 +378,7 @@ function ReminderFormBody({
<Label className="text-xs text-muted-foreground">
Attach to client / deal / berth / yacht
</Label>
<p className="text-[11px] text-muted-foreground">
<p className="text-xs text-muted-foreground">
Linking a reminder pins it onto that record so anyone who opens the page sees it on
the Reminders tab. Useful for &ldquo;chase this client for signed EOI&rdquo;,
&ldquo;recheck B12 power capacity before contract&rdquo;, etc. Pick a client first to

4
src/components/reminders/reminder-list.tsx
View File

@@ -136,7 +136,7 @@ export function ReminderList({ embedded = false }: ReminderListProps = {}) {
header: '',
cell: ({ row }) => {
const config = PRIORITY_CONFIG[row.original.priority];
return <Badge className={`${config.className} text-[10px] px-1.5`}>{config.label}</Badge>;
return <Badge className={`${config.className} text-xs px-1.5`}>{config.label}</Badge>;
},
size: 70,
},
@@ -150,7 +150,7 @@ export function ReminderList({ embedded = false }: ReminderListProps = {}) {
<div className="flex items-center gap-2">
<span className="font-medium">{row.original.title}</span>
{row.original.autoGenerated && (
<Badge variant="outline" className="text-[10px]">
<Badge variant="outline" className="text-xs">
Auto
</Badge>
)}

2
src/components/reminders/reminders-inline.tsx
View File

@@ -117,7 +117,7 @@ export function RemindersInline(props: RemindersInlineProps) {
<p className="truncate font-medium text-foreground">{r.title}</p>
<p
className={cn(
'text-[11px]',
'text-xs',
isPastDue ? 'text-rose-700 font-medium' : 'text-muted-foreground',
)}
>

2
src/components/reports/builders/dashboard-report-builder.tsx
View File

@@ -355,7 +355,7 @@ export function DashboardReportBuilder({ portSlug, initialFrom, initialTo }: Pro
if (items.length === 0) return null;
return (
<div key={category} className="space-y-1">
<div className="px-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
<div className="px-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{label}
</div>
<div className="space-y-0.5">

4
src/components/reports/reports-list.tsx
View File

@@ -118,14 +118,14 @@ export function ReportsList() {
<ReportStatusBadge status={report.status} />
</TableCell>
<TableCell className="text-sm text-muted-foreground">
{new Date(report.createdAt).toLocaleString('en-GB', {
{new Date(report.createdAt).toLocaleString(undefined, {
dateStyle: 'short',
timeStyle: 'short',
})}
</TableCell>
<TableCell className="text-sm text-muted-foreground">
{report.completedAt ? (
new Date(report.completedAt).toLocaleString('en-GB', {
new Date(report.completedAt).toLocaleString(undefined, {
dateStyle: 'short',
timeStyle: 'short',
})

2
src/components/residential/residential-clients-list.tsx
View File

@@ -203,7 +203,7 @@ export function ResidentialClientsList() {
<p className="font-medium text-sm truncate">{c.fullName}</p>
<span
className={cn(
'shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide',
'shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium uppercase tracking-wide',
c.status === 'active'
? 'bg-emerald-100 text-emerald-800'
: c.status === 'inactive'

10
src/components/residential/residential-interest-card.tsx
View File

@@ -28,17 +28,15 @@ export function ResidentialInterestCard({
<div className="min-w-0">
<p className="truncate text-sm font-medium">{interest.clientName ?? '-'}</p>
<div className="mt-1 flex flex-wrap items-center gap-1.5">
<Badge variant="secondary" className="text-[10px]">
<Badge variant="secondary" className="text-xs">
{RESIDENTIAL_STAGE_LABELS[interest.pipelineStage] ?? interest.pipelineStage}
</Badge>
{interest.source ? (
<span className="text-[11px] capitalize text-muted-foreground">
{interest.source}
</span>
<span className="text-xs capitalize text-muted-foreground">{interest.source}</span>
) : null}
</div>
</div>
<span className="shrink-0 text-[11px] text-muted-foreground">
<span className="shrink-0 text-xs text-muted-foreground">
{new Date(interest.updatedAt).toLocaleDateString()}
</span>
</div>
@@ -46,7 +44,7 @@ export function ResidentialInterestCard({
<p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{interest.preferences}</p>
) : null}
{interest.notes ? (
<p className="mt-1 line-clamp-1 text-xs text-muted-foreground/80">{interest.notes}</p>
<p className="mt-1 line-clamp-1 text-xs text-muted-foreground">{interest.notes}</p>
) : null}
</Link>
);

10
src/components/search/command-search.tsx
View File

@@ -630,7 +630,7 @@ function ResultsRegion({
isFocused && 'bg-accent text-foreground',
)}
>
<span className="text-[10px] uppercase tracking-wide text-muted-foreground/70">
<span className="text-xs uppercase tracking-wide text-muted-foreground">
{row.portName}
</span>
<span className="truncate text-foreground">
@@ -659,7 +659,7 @@ function ZeroState({ query, portSlug }: { query: string; portSlug: string | null
<p className="text-sm text-muted-foreground mb-3">
No results for <span className="font-medium text-foreground">&ldquo;{query}&rdquo;</span>
</p>
<p className="text-xs uppercase tracking-wide text-muted-foreground/70 mb-2">Quick create</p>
<p className="text-xs uppercase tracking-wide text-muted-foreground mb-2">Quick create</p>
<div className="flex flex-wrap gap-2">
{/* Land on the list page with `?create=1&prefill_name=…`; the list
page's `useCreateFromUrl` hook pops the create sheet with the
@@ -754,7 +754,7 @@ function ResultRow({
</div>
)}
{row.relatedVia && (
<div className="text-[11px] italic text-muted-foreground/80 truncate mt-0.5">
<div className="text-xs italic text-muted-foreground truncate mt-0.5">
via {row.relatedVia.label}
</div>
)}
@@ -779,7 +779,7 @@ function Badge({
return (
<span
className={cn(
'inline-flex items-center rounded px-1.5 py-0 text-[10px] font-semibold uppercase tracking-wide',
'inline-flex items-center rounded px-1.5 py-0 text-xs font-semibold uppercase tracking-wide',
cls,
)}
>
@@ -790,7 +790,7 @@ function Badge({
function SectionHeading({ icon: Icon, children }: { icon: typeof User; children: ReactNode }) {
return (
<div className="flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<div className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
<Icon className="h-3 w-3" />
<span>{children}</span>
</div>

8
src/components/search/mobile-search-overlay.tsx
View File

@@ -483,7 +483,7 @@ function renderResultRows(
nodes.push(
<div
key={`__bucket_${row.bucket}_${i}`}
className="px-3 pt-3 pb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
className="px-3 pt-3 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
>
{BUCKET_LABELS[row.bucket] ?? row.bucket}
</div>,
@@ -500,7 +500,7 @@ function renderResultRows(
<>
{row.sub ? <HighlightMatch text={row.sub} query={query} /> : null}
{row.relatedVia ? (
<span className="block text-[11px] italic text-muted-foreground/80">
<span className="block text-xs italic text-muted-foreground">
via {row.relatedVia.label}
</span>
) : null}
@@ -562,7 +562,7 @@ function Section({
}) {
return (
<section>
<div className="flex items-center gap-1.5 px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
<div className="flex items-center gap-1.5 px-3 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{icon}
{label}
</div>
@@ -604,7 +604,7 @@ function Row({
<span
key={b.label}
className={cn(
'rounded-full px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide',
'rounded-full px-1.5 py-0.5 text-xs font-medium uppercase tracking-wide',
BADGE_TONE[b.tone],
)}
>

2
src/components/shared/column-picker.tsx
View File

@@ -113,7 +113,7 @@ export function ColumnPicker({
</span>
<span className="flex-1">{col.label}</span>
{col.alwaysVisible && (
<span className="text-[10px] uppercase tracking-wide text-muted-foreground">
<span className="text-xs uppercase tracking-wide text-muted-foreground">
always
</span>
)}

6
src/components/shared/currency-select.tsx
View File

@@ -7,7 +7,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { SUPPORTED_CURRENCIES } from '@/lib/utils/currency';
import { SUPPORTED_CURRENCIES, currencyLabel } from '@/lib/utils/currency';
interface CurrencySelectProps {
value: string | undefined;
@@ -37,9 +37,9 @@ export function CurrencySelect({
<SelectContent>
{SUPPORTED_CURRENCIES.map((c) => (
<SelectItem key={c.code} value={c.code}>
<span className="tabular-nums mr-2">{c.symbol}</span>
<span className="tabular-nums me-2">{c.symbol}</span>
<span className="font-medium">{c.code}</span>
<span className="text-muted-foreground ml-2 text-xs">{c.label}</span>
<span className="text-muted-foreground ms-2 text-xs">{currencyLabel(c.code)}</span>
</SelectItem>
))}
</SelectContent>

4
src/components/shared/field-history.tsx
View File

@@ -127,7 +127,7 @@ export function FieldHistoryIcon({ fieldPath, className }: IconProps) {
<PopoverContent align="start" className="w-80 p-0">
<div className="border-b px-3 py-2">
<div className="text-xs font-medium">{label}</div>
<div className="text-[10px] text-muted-foreground">
<div className="text-xs text-muted-foreground">
{rows.length} override{rows.length === 1 ? '' : 's'}
</div>
</div>
@@ -137,7 +137,7 @@ export function FieldHistoryIcon({ fieldPath, className }: IconProps) {
<li key={r.id} className="px-3 py-2 space-y-1">
<div className="flex items-baseline justify-between gap-2">
<span className="font-medium">{formatSource(r.source)}</span>
<span className="text-[10px] text-muted-foreground">
<span className="text-xs text-muted-foreground">
{formatDistanceToNow(new Date(r.createdAt), { addSuffix: true })}
</span>
</div>

4
src/components/shared/notes-list.tsx
View File

@@ -298,7 +298,7 @@ export function NotesList({
note.source !== SELF_SOURCE[entityType] &&
note.sourceLabel && (
<span
className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium ${SOURCE_BADGE_CLASS[note.source]}`}
className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium ${SOURCE_BADGE_CLASS[note.source]}`}
title={`From ${note.source}`}
>
{SOURCE_LABEL[note.source]} · {note.sourceLabel}
@@ -311,7 +311,7 @@ export function NotesList({
populated for interest notes from 2026-05-15+. */}
{note.pipelineStageAtCreation && (
<span
className="inline-flex items-center rounded-full bg-indigo-50 px-1.5 py-0.5 text-[10px] font-medium text-indigo-900"
className="inline-flex items-center rounded-full bg-indigo-50 px-1.5 py-0.5 text-xs font-medium text-indigo-900"
title="Pipeline stage when note was authored"
>
@ {stageLabel(note.pipelineStageAtCreation)}

2
src/components/shared/owner-picker.tsx
View File

@@ -123,7 +123,7 @@ export function OwnerPicker({
{value.type === 'client' ? 'Client:' : 'Company:'}
</span>
) : (
<span className="rounded-sm border border-border bg-muted px-1.5 py-px text-[10px] uppercase tracking-wide text-muted-foreground">
<span className="rounded-sm border border-border bg-muted px-1.5 py-px text-xs uppercase tracking-wide text-muted-foreground">
Client / Company
</span>
)}

2
src/components/ui/kpi-tile.tsx
View File

@@ -72,7 +72,7 @@ export function KPITile({
<div className={cn('absolute inset-x-0 top-0 h-1', ACCENT_STRIPES[accent])} aria-hidden />
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<div className="flex items-center gap-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground sm:text-xs">
<div className="flex items-center gap-1 text-xs font-medium uppercase tracking-wide text-muted-foreground sm:text-xs">
<span>{title}</span>
{tooltip ? (
<Popover>

2
src/components/website-analytics/realtime-panel.tsx
View File

@@ -173,7 +173,7 @@ export function RealtimePanel() {
function Stat({ label, value }: { label: string; value: number }) {
return (
<div className="rounded-lg border border-border bg-card px-3 py-2">
<div className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
{label}
</div>
<div className="mt-0.5 text-xl font-semibold tabular-nums">{value.toLocaleString()}</div>

Some files were not shown because too many files have changed in this diff Show More