Skip to content

fix(web): make every table readable on mobile #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeffgicharu merged 1 commit into from
May 19, 2026
Merged

fix(web): make every table readable on mobile #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 48 additions & 1 deletion apps/web/src/app/(admin)/audit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { api } from '@/lib/api-client';
import type { AuditEvent } from '@contractor-os/shared';
import { AuditFilters } from '@/components/audit/audit-filters';
import { AuditDiffViewer } from '@/components/audit/audit-diff-viewer';
import {
MobileCard,
MobileCardList,
MobileCardRow,
} from '@/components/ui/responsive-table';

type AuditEventWithEmail = AuditEvent & { userEmail?: string };

Expand Down Expand Up @@ -107,7 +112,7 @@ export default function AuditPage() {
</div>
) : (
<>
<div className="overflow-x-auto rounded-xl border border-slate-200 bg-white">
<div className="hidden overflow-x-auto rounded-xl border border-slate-200 bg-white sm:block">
<table className="w-full">
<thead>
<tr className="border-b border-slate-200 bg-slate-50/50">
Expand Down Expand Up @@ -185,6 +190,48 @@ export default function AuditPage() {
</table>
</div>

{/* Cards (below sm) */}
<MobileCardList>
{events.map((event) => (
<Fragment key={event.id}>
<MobileCard
onClick={() =>
setExpandedId(
expandedId === event.id ? null : event.id,
)
}
title={<span className="capitalize">{event.entityType}</span>}
subtitle={formatTimestamp(event.createdAt)}
accessory={<ActionBadge action={event.action} />}
>
<MobileCardRow label="User">
{event.userEmail ?? event.userId ?? '—'}
</MobileCardRow>
<MobileCardRow label="Entity ID">
<span className="font-mono text-[12px] text-slate-400">
{event.entityId?.slice(0, 8) ?? '—'}
</span>
</MobileCardRow>
<MobileCardRow label="">
<span className="text-xs text-brand-600">
{expandedId === event.id
? 'Hide changes'
: 'View changes'}
</span>
</MobileCardRow>
</MobileCard>
{expandedId === event.id && (
<div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
<AuditDiffViewer
oldValues={event.oldValues}
newValues={event.newValues}
/>
</div>
)}
</Fragment>
))}
</MobileCardList>

{meta.totalPages > 1 && (
<div className="mt-4 flex items-center justify-between">
<span className="text-sm text-slate-500">
Expand Down
41 changes: 39 additions & 2 deletions apps/web/src/app/(admin)/contractors/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ import {
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { ContractorStatusBadge } from '@/components/contractors/contractor-status-badge';
import {
MobileCard,
MobileCardList,
MobileCardRow,
} from '@/components/ui/responsive-table';
import { useAuth } from '@/hooks/use-auth';

const STATUS_OPTIONS = [
Expand Down Expand Up @@ -135,8 +140,8 @@ export default function ContractorListPage() {
</select>
</div>

{/* Table */}
<div className="mt-4 overflow-x-auto rounded-xl border border-slate-200 bg-white">
{/* Table (sm and up) */}
<div className="mt-4 hidden overflow-x-auto rounded-xl border border-slate-200 bg-white sm:block">
<table className="w-full border-separate border-spacing-0">
<thead>
<tr>
Expand Down Expand Up @@ -220,6 +225,38 @@ export default function ContractorListPage() {
</table>
</div>

{/* Cards (below sm) */}
<MobileCardList className="mt-4">
{isLoading ? (
<div className="rounded-xl border border-slate-200 bg-white py-12 text-center">
<div className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
</div>
) : contractors.length === 0 ? (
<div className="rounded-xl border border-slate-200 bg-white px-4 py-12 text-center text-sm text-slate-500">
{search || statusFilter
? 'No contractors match your filters'
: 'No contractors yet. Add your first contractor to get started.'}
</div>
) : (
contractors.map((contractor) => (
<MobileCard
key={contractor.id}
href={`/contractors/${contractor.id}`}
title={`${contractor.firstName} ${contractor.lastName}`}
accessory={<ContractorStatusBadge status={contractor.status} />}
>
<MobileCardRow label="Email">{contractor.email}</MobileCardRow>
<MobileCardRow label="Type">
<span className="capitalize">{contractor.type}</span>
</MobileCardRow>
<MobileCardRow label="Created">
{formatDate(contractor.createdAt)}
</MobileCardRow>
</MobileCard>
))
)}
</MobileCardList>

{/* Pagination */}
{meta && meta.totalPages > 1 && (
<div className="mt-4 flex items-center justify-between">
Expand Down
88 changes: 77 additions & 11 deletions apps/web/src/app/(admin)/documents/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,25 @@ import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { api } from '@/lib/api-client';
import { DocumentStatusBadge } from '@/components/documents/document-status-badge';
import {
MobileCard,
MobileCardList,
MobileCardRow,
} from '@/components/ui/responsive-table';
import { DOCUMENT_TYPE_LABELS, type TaxDocumentType, type ComplianceReportEntry } from '@contractor-os/shared';

function CompliantBadge({ compliant }: { compliant: boolean }) {
return compliant ? (
<span className="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-md bg-success-50 text-success-700">
Yes
</span>
) : (
<span className="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-md bg-error-50 text-error-700">
No
</span>
);
}

const FILTER_TABS = [
{ label: 'All', value: 'all' },
{ label: 'Compliant', value: 'compliant' },
Expand Down Expand Up @@ -80,8 +97,8 @@ export default function DocumentVaultPage() {
</nav>
</div>

{/* Table */}
<div className="mt-6 rounded-xl border border-slate-200 bg-white overflow-x-auto">
{/* Table (sm and up) */}
<div className="mt-6 hidden rounded-xl border border-slate-200 bg-white overflow-x-auto sm:block">
{isLoading ? (
<div className="flex items-center justify-center py-20">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
Expand Down Expand Up @@ -145,15 +162,7 @@ export default function DocumentVaultPage() {
)}
</td>
<td className="px-4">
{entry.isCompliant ? (
<span className="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-md bg-success-50 text-success-700">
Yes
</span>
) : (
<span className="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-md bg-error-50 text-error-700">
No
</span>
)}
<CompliantBadge compliant={entry.isCompliant} />
</td>
</tr>
);
Expand All @@ -162,6 +171,63 @@ export default function DocumentVaultPage() {
</table>
)}
</div>

{/* Cards (below sm) */}
<MobileCardList className="mt-6">
{isLoading ? (
<div className="rounded-xl border border-slate-200 bg-white py-20 text-center">
<div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
</div>
) : filtered.length === 0 ? (
<div className="rounded-xl border border-slate-200 bg-white py-20 text-center text-sm text-slate-500">
No contractors match this filter.
</div>
) : (
filtered.map((entry) => {
const taxFormType =
entry.contractorType === 'foreign' ? 'w8ben' : 'w9';
const hasTaxForm = entry.currentDocuments.includes(
taxFormType as TaxDocumentType,
);
const hasContract = entry.currentDocuments.includes(
'contract' as TaxDocumentType,
);
return (
<MobileCard
key={entry.contractorId}
href={`/contractors/${entry.contractorId}?tab=Documents`}
title={entry.contractorName}
subtitle={
entry.contractorType === 'foreign' ? 'Foreign' : 'Domestic'
}
accessory={<CompliantBadge compliant={entry.isCompliant} />}
>
<MobileCardRow label="W-9 / W-8BEN">
<DocumentStatusBadge
status={hasTaxForm ? 'current' : 'missing'}
/>
</MobileCardRow>
<MobileCardRow label="Contract">
<DocumentStatusBadge
status={hasContract ? 'current' : 'missing'}
/>
</MobileCardRow>
<MobileCardRow label="Expiring Docs">
{entry.expiringDocuments.length > 0 ? (
<span className="font-medium text-warning-600">
{entry.expiringDocuments
.map((d) => getDocTypeLabel(d.type))
.join(', ')}
</span>
) : (
<span className="text-slate-400">None</span>
)}
</MobileCardRow>
</MobileCard>
);
})
)}
</MobileCardList>
</div>
);
}
13 changes: 8 additions & 5 deletions apps/web/src/app/(admin)/invoices/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Link from 'next/link';
import { api, ApiClientError } from '@/lib/api-client';
import { formatDate, formatCurrency } from '@/lib/format';
import { Button } from '@/components/ui/button';
import { TableScroll } from '@/components/ui/responsive-table';
import { InvoiceStatusBadge } from '@/components/invoices/invoice-status-badge';
import { InvoiceTimeline } from '@/components/invoices/invoice-timeline';
import type { InvoiceDetail, InvoiceStatus } from '@contractor-os/shared';
Expand Down Expand Up @@ -241,20 +242,21 @@ export default function InvoiceDetailPage() {
</div>

{/* Line items table */}
<div className="mt-6 rounded-xl border border-slate-200 bg-white overflow-x-auto">
<div className="mt-6 rounded-xl border border-slate-200 bg-white">
<div className="px-6 py-4 border-b border-slate-50">
<h3 className="text-base font-semibold text-slate-900">Line Items</h3>
</div>
<TableScroll>
<table className="w-full border-separate border-spacing-0">
Comment on lines +249 to 250
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The <table> element should be indented relative to its new parent <TableScroll> to maintain code readability.

        <TableScroll>
          <table className="w-full border-separate border-spacing-0">

<thead>
<tr className="bg-slate-50/50">
<th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-[0.05em] text-slate-400">
Description
</th>
<th className="px-4 py-3 text-right text-xs font-medium uppercase tracking-[0.05em] text-slate-400 hidden sm:table-cell">
<th className="px-4 py-3 text-right text-xs font-medium uppercase tracking-[0.05em] text-slate-400">
Qty
</th>
<th className="px-4 py-3 text-right text-xs font-medium uppercase tracking-[0.05em] text-slate-400 hidden sm:table-cell">
<th className="px-4 py-3 text-right text-xs font-medium uppercase tracking-[0.05em] text-slate-400">
Unit Price
</th>
<th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-[0.05em] text-slate-400">
Expand All @@ -266,10 +268,10 @@ export default function InvoiceDetailPage() {
{invoice.lineItems.map((item) => (
<tr key={item.id} className="border-b border-slate-50">
<td className="px-6 py-3 text-[13px] text-slate-700">{item.description}</td>
<td className="px-4 py-3 text-right text-[13px] font-mono text-slate-700 hidden sm:table-cell">
<td className="px-4 py-3 text-right text-[13px] font-mono text-slate-700">
{item.quantity}
</td>
<td className="px-4 py-3 text-right text-[13px] font-mono text-slate-700 hidden sm:table-cell">
<td className="px-4 py-3 text-right text-[13px] font-mono text-slate-700">
{formatCurrency(item.unitPrice)}
</td>
<td className="px-6 py-3 text-right text-[13px] font-mono font-medium text-slate-900">
Expand All @@ -279,6 +281,7 @@ export default function InvoiceDetailPage() {
))}
</tbody>
</table>
</TableScroll>
</div>

{/* Notes */}
Expand Down
48 changes: 46 additions & 2 deletions apps/web/src/app/(admin)/invoices/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { useRouter } from 'next/navigation';
import { api } from '@/lib/api-client';
import { formatDate, formatCurrency } from '@/lib/format';
import { InvoiceStatusBadge } from '@/components/invoices/invoice-status-badge';
import {
MobileCard,
MobileCardList,
MobileCardRow,
} from '@/components/ui/responsive-table';
import type { InvoiceListItem, PaginationMeta, InvoiceStatus } from '@contractor-os/shared';

const STATUS_TABS = [
Expand Down Expand Up @@ -78,8 +83,8 @@ export default function InvoicesPage() {
</nav>
</div>

{/* Table */}
<div className="mt-6 rounded-xl border border-slate-200 bg-white overflow-x-auto">
{/* Table (sm and up) */}
<div className="mt-6 hidden rounded-xl border border-slate-200 bg-white overflow-x-auto sm:block">
{isLoading ? (
<div className="flex items-center justify-center py-20">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
Expand Down Expand Up @@ -144,6 +149,45 @@ export default function InvoicesPage() {
)}
</div>

{/* Cards (below sm) */}
<MobileCardList className="mt-6">
{isLoading ? (
<div className="rounded-xl border border-slate-200 bg-white py-20 text-center">
<div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
</div>
) : invoices.length === 0 ? (
<div className="rounded-xl border border-slate-200 bg-white py-20 text-center text-sm text-slate-500">
No invoices found.
</div>
) : (
invoices.map((inv) => (
<MobileCard
key={inv.id}
href={`/invoices/${inv.id}`}
title={<span className="font-mono">{inv.invoiceNumber}</span>}
accessory={
<InvoiceStatusBadge status={inv.status as InvoiceStatus} />
}
>
<MobileCardRow label="Contractor">
{inv.contractorName}
</MobileCardRow>
<MobileCardRow label="Amount">
<span className="font-mono text-slate-900">
{formatCurrency(inv.totalAmount)}
</span>
</MobileCardRow>
<MobileCardRow label="Submitted">
{formatDate(inv.submittedAt)}
</MobileCardRow>
<MobileCardRow label="Due Date">
{formatDate(inv.dueDate)}
</MobileCardRow>
</MobileCard>
))
)}
</MobileCardList>

{/* Pagination */}
{meta && meta.totalPages > 1 && (
<div className="mt-4 flex items-center justify-between text-sm">
Expand Down
Loading
Loading