admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

app now responsive for mobile and small devices.

Browse Source
This commit is contained in:
rameen
2026-07-11 17:10:02 +03:30
parent 893cd5b128
commit 2f7df312c1
49 changed files with 1710 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/[locale]/(dashboard)/appointments/page.tsx
View File

@@ -283,7 +283,7 @@ export default function AppointmentsPage() {
return (
<div className="space-y-6">
<div className="flex flex-col gap-1">
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
<p className="text-sm text-text-secondary">{t('subtitle')}</p>
</div>

472
frontend/src/app/[locale]/(dashboard)/billing/page.tsx
View File

@@ -1,6 +1,7 @@
// src/app/(dashboard)/billing/page.tsx
'use client';
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { Pencil } from 'lucide-react';
import { Button } from '@/components/ui/shared/Button';
import { Badge } from '@/components/ui/shared/Badge';
@@ -9,206 +10,287 @@ import { Table } from '@/components/ui/shared/Table';
import { SearchBar } from '@/components/ui/shared/SearchBar';
import { useAuth } from '@/lib/hooks/useAuth';
import { hasPermission } from '@/components/shared/permissions';
// Mock data matching your design
const invoices = [
{ id: '#123456', patient: 'Ali Rahmani', date: '24/9/2026', service: 'Hygiene', amount: 300, paid: 0, status: 'unpaid' },
{ id: '#123457', patient: 'Neda Akbari', date: '01/10/2026', service: 'Filling', amount: 700, paid: 400, status: 'overdue' },
{ id: '#123458', patient: 'Nima Haghi', date: '09/12/2026', service: 'Extraction', amount: 450, paid: 450, status: 'paid' },
type InvoiceStatus = 'paid' | 'unpaid' | 'overdue';
type Invoice = {
id: string;
patient: string;
date: string;
service: string;
amount: number;
paid: number;
status: InvoiceStatus;
};
const invoices: Invoice[] = [
{ id: '#123456', patient: 'Ali Rahmani', date: '24/9/2026', service: 'Hygiene', amount: 300, paid: 0, status: 'unpaid' },
{ id: '#123457', patient: 'Neda Akbari', date: '01/10/2026', service: 'Filling', amount: 700, paid: 400, status: 'overdue' },
{ id: '#123458', patient: 'Nima Haghi', date: '09/12/2026', service: 'Extraction', amount: 450, paid: 450, status: 'paid' },
];
const statusColors = {
paid: 'success',
unpaid: 'warning',
overdue: 'danger',
paid: 'success',
unpaid: 'warning',
overdue: 'danger',
} as const;
const statusFilters = ['all', 'paid', 'unpaid', 'overdue'] as const;
type StatCardColor = 'blue' | 'yellow' | 'green' | 'red';
interface StatCardProps {
title: string;
count: number;
amount: number;
color: StatCardColor;
title: string;
count: number;
amount: number;
color: StatCardColor;
}
export default function BillingPage() {
const { currentOrganization } = useAuth();
const [search, setSearch] = useState('');
const [statusFilter, setStatusFilter] = useState('all');
const canEditBilling = hasPermission(currentOrganization, 'TAB_BILLING_EDIT');
const stats = {
total: { count: 235, amount: 80900 },
unpaid: { count: 30, amount: 2800 },
paid: { count: 190, amount: 80900 },
overdue: { count: 235, amount: 80900 },
};
return (
<div className="space-y-6">
{/* Header */}
<div className="flex justify-between items-center">
<h1 className="text-2xl font-semibold text-text-primary">Billing</h1>
<Button
variant="primary"
disabled={!canEditBilling}
title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
>
New Invoice
</Button>
</div>
{/* Stats Cards - Matching your design */}
<div className="grid grid-cols-4 gap-4">
<StatCard
title="Total Invoices"
count={stats.total.count}
amount={stats.total.amount}
color="blue"
/>
<StatCard
title="Unpaid Invoices"
count={stats.unpaid.count}
amount={stats.unpaid.amount}
color="yellow"
/>
<StatCard
title="Paid Invoices"
count={stats.paid.count}
amount={stats.paid.amount}
color="green"
/>
<StatCard
title="Overdue Invoices"
count={stats.overdue.count}
amount={stats.overdue.amount}
color="red"
/>
</div>
{/* Filters */}
<SearchBar
value={search}
onChange={setSearch}
placeholder="Search patients..."
actions={(
<>
{['all', 'paid', 'unpaid', 'overdue'].map((status) => (
<button
key={status}
onClick={() => setStatusFilter(status)}
className={`px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium capitalize border ${statusFilter === status
? 'bg-primary-soft text-primary border-primary/50'
: 'text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border'
}`}
>
{status}
</button>
))}
</>
)}
/>
{/* Invoices Table - Matching your design */}
<Table
headers={
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Invoice ID
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Patient name
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Date
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Service
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Total amount
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Paid
</th>
<th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Action
</th>
</tr>
}
body={
<>
{invoices.map((invoice) => (
<tr key={invoice.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-1.5 text-sm font-medium text-text-primary">
{invoice.id}
</td>
<td className="px-6 py-1.5 text-sm text-text-primary">
{invoice.patient}
</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">
{invoice.date}
</td>
<td className="px-6 py-1.5 text-sm text-text-primary">
{invoice.service}
</td>
<td className="px-6 py-1.5 text-sm text-text-primary">
${invoice.amount}
</td>
<td className="px-6 py-1.5 text-sm text-text-primary">
${invoice.paid}
</td>
<td className="px-6 py-1.5 text-center align-middle">
<Badge
variant={statusColors[invoice.status as keyof typeof statusColors]}
className="capitalize"
>
{invoice.status}
</Badge>
</td>
<td className="px-6 py-1.5">
<button
className={`p-2 rounded-md ${canEditBilling
? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
: 'text-text-muted cursor-not-allowed opacity-50'}`}
disabled={!canEditBilling}
title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
aria-label="Edit invoice"
>
<Pencil className="w-4 h-4" />
</button>
</td>
</tr>
))}
</>
}
footer={(
<>
<button className="text-sm text-text-secondary hover:text-text-primary">
← Previous
</button>
<div className="text-sm text-text-secondary">
Page 1 of 10
</div>
<button className="text-sm text-text-secondary hover:text-text-primary">
Next →
</button>
</>
)}
/>
</div>
);
}
function StatCard({ title, count, amount, color }: StatCardProps) {
const colors: Record<StatCardColor, string> = {
blue: '!bg-purpose-visit-bg !text-purpose-visit-fg !border-purpose-visit-border',
yellow: '!bg-badge-warning-bg !text-badge-warning-fg !border-badge-warning-border',
green: '!bg-badge-success-bg !text-badge-success-fg !border-badge-success-border',
red: '!bg-badge-danger-bg !text-badge-danger-fg !border-badge-danger-border',
};
return (
<Card className={`${colors[color]}`}>
<p className="text-sm font-medium">{title}</p>
<p className="text-2xl font-bold mt-1">{count}</p>
<p className="text-sm font-medium mt-1">
${amount.toLocaleString()}
</p>
</Card>
);
export default function BillingPage() {
const { currentOrganization } = useAuth();
const [search, setSearch] = useState('');
const [statusFilter, setStatusFilter] = useState<(typeof statusFilters)[number]>('all');
const canEditBilling = hasPermission(currentOrganization, 'TAB_BILLING_EDIT');
const stats = {
total: { count: 235, amount: 80900 },
unpaid: { count: 30, amount: 2800 },
paid: { count: 190, amount: 80900 },
overdue: { count: 235, amount: 80900 },
};
const filteredInvoices = useMemo(() => {
const query = search.trim().toLowerCase();
return invoices.filter((invoice) => {
const matchesStatus = statusFilter === 'all' || invoice.status === statusFilter;
const matchesSearch =
!query ||
invoice.patient.toLowerCase().includes(query) ||
invoice.id.toLowerCase().includes(query) ||
invoice.service.toLowerCase().includes(query);
return matchesStatus && matchesSearch;
});
}, [search, statusFilter]);
return (
<div className="space-y-4 sm:space-y-6">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">Billing</h1>
<Button
variant="primary"
disabled={!canEditBilling}
className="w-full sm:w-auto shrink-0"
title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
>
New Invoice
</Button>
</div>
<div className="grid grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4">
<StatCard title="Total Invoices" count={stats.total.count} amount={stats.total.amount} color="blue" />
<StatCard title="Unpaid Invoices" count={stats.unpaid.count} amount={stats.unpaid.amount} color="yellow" />
<StatCard title="Paid Invoices" count={stats.paid.count} amount={stats.paid.amount} color="green" />
<StatCard title="Overdue Invoices" count={stats.overdue.count} amount={stats.overdue.amount} color="red" />
</div>
<SearchBar
value={search}
onChange={setSearch}
placeholder="Search patients..."
actions={(
<>
{statusFilters.map((status) => (
<button
key={status}
type="button"
onClick={() => setStatusFilter(status)}
className={`px-3 py-1.5 sm:px-4 sm:py-2 rounded-[var(--radius-sm)] text-xs sm:text-sm font-medium capitalize border ${
statusFilter === status
? 'bg-primary-soft text-primary border-primary/50'
: 'text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border'
}`}
>
{status}
</button>
))}
</>
)}
/>
<div className="lg:hidden space-y-3">
{filteredInvoices.length === 0 ? (
<div className="surface-card p-4 text-sm text-text-muted">No invoices match your filters.</div>
) : (
filteredInvoices.map((invoice) => (
<InvoiceMobileCard
key={invoice.id}
invoice={invoice}
canEditBilling={canEditBilling}
/>
))
)}
<InvoicePagination className="surface-card px-3 py-3 sm:px-6" />
</div>
<div className="hidden lg:block">
<Table
headers={
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Invoice ID
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Patient name
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Date
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Service
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Total amount
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Paid
</th>
<th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Action
</th>
</tr>
}
body={
<>
{filteredInvoices.map((invoice) => (
<tr key={invoice.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-1.5 text-sm font-medium text-text-primary">{invoice.id}</td>
<td className="px-6 py-1.5 text-sm text-text-primary">{invoice.patient}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">{invoice.date}</td>
<td className="px-6 py-1.5 text-sm text-text-primary">{invoice.service}</td>
<td className="px-6 py-1.5 text-sm text-text-primary">${invoice.amount}</td>
<td className="px-6 py-1.5 text-sm text-text-primary">${invoice.paid}</td>
<td className="px-6 py-1.5 text-center align-middle">
<Badge variant={statusColors[invoice.status]} className="capitalize">
{invoice.status}
</Badge>
</td>
<td className="px-6 py-1.5">
<InvoiceEditButton canEditBilling={canEditBilling} />
</td>
</tr>
))}
</>
}
footer={<InvoicePagination />}
/>
</div>
</div>
);
}
function InvoiceMobileCard({
invoice,
canEditBilling,
}: {
invoice: Invoice;
canEditBilling: boolean;
}) {
const remaining = invoice.amount - invoice.paid;
return (
<Card padding="sm" className="space-y-3">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<p className="text-sm font-semibold text-text-primary truncate">{invoice.patient}</p>
<p className="text-xs text-text-muted mt-0.5">{invoice.id}</p>
</div>
<Badge variant={statusColors[invoice.status]} fixedWidth={false} className="capitalize shrink-0">
{invoice.status}
</Badge>
</div>
<div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-text-secondary">
<span>{invoice.service}</span>
<span aria-hidden>·</span>
<span>{invoice.date}</span>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 text-sm">
<div>
<p className="text-xs text-text-muted">Total</p>
<p className="font-medium text-text-primary">${invoice.amount}</p>
</div>
<div>
<p className="text-xs text-text-muted">Paid</p>
<p className="font-medium text-text-primary">${invoice.paid}</p>
</div>
<div>
<p className="text-xs text-text-muted">Due</p>
<p className="font-medium text-text-primary">${remaining}</p>
</div>
</div>
<div className="flex justify-end pt-1 border-t border-border/60">
<InvoiceEditButton canEditBilling={canEditBilling} />
</div>
</Card>
);
}
function InvoiceEditButton({ canEditBilling }: { canEditBilling: boolean }) {
return (
<button
type="button"
className={`p-2 rounded-md ${
canEditBilling
? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
: 'text-text-muted cursor-not-allowed opacity-50'
}`}
disabled={!canEditBilling}
title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
aria-label="Edit invoice"
>
<Pencil className="w-4 h-4" />
</button>
);
}
function InvoicePagination({ className = '' }: { className?: string }) {
return (
<div
className={`flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-center ${className}`.trim()}
>
<button type="button" className="text-sm text-text-secondary hover:text-text-primary">
← Previous
</button>
<div className="text-sm text-text-secondary text-center">Page 1 of 10</div>
<button type="button" className="text-sm text-text-secondary hover:text-text-primary">
Next →
</button>
</div>
);
}
function StatCard({ title, count, amount, color }: StatCardProps) {
const colors: Record<StatCardColor, string> = {
blue: '!bg-purpose-visit-bg !text-purpose-visit-fg !border-purpose-visit-border',
yellow: '!bg-badge-warning-bg !text-badge-warning-fg !border-badge-warning-border',
green: '!bg-badge-success-bg !text-badge-success-fg !border-badge-success-border',
red: '!bg-badge-danger-bg !text-badge-danger-fg !border-badge-danger-border',
};
return (
<Card className={`min-w-0 ${colors[color]}`}>
<p className="text-xs sm:text-sm font-medium leading-snug">{title}</p>
<p className="text-xl sm:text-2xl font-bold mt-1 tabular-nums">{count}</p>
<p className="text-xs sm:text-sm font-medium mt-1 tabular-nums truncate">
${amount.toLocaleString()}
</p>
</Card>
);
}

31
frontend/src/app/[locale]/(dashboard)/cases/page.tsx
View File

@@ -19,6 +19,7 @@ import { tasksApi } from '@/lib/api/tasks';
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
import { Button } from '@/components/ui/shared/Button';
import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
import { FORM_SELECT_CLASS } from '@/components/ui/shared/formSelectStyles';
import { SearchBar } from '@/components/ui/shared/SearchBar';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
@@ -60,6 +61,7 @@ export default function CasesPage() {
const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
const [loadingList, setLoadingList] = useState(false);
const [loadingDetail, setLoadingDetail] = useState(false);
@@ -146,9 +148,16 @@ export default function CasesPage() {
const caseIdFromUrl = searchParams.get('caseId');
if (caseIdFromUrl) {
setSelectedCaseId(caseIdFromUrl);
setMobileDetailOpen(true);
}
}, [searchParams]);
useEffect(() => {
if (!selectedCaseId) {
setMobileDetailOpen(false);
}
}, [selectedCaseId]);
useEffect(() => {
const timeout = setTimeout(() => {
void loadCases({
@@ -220,12 +229,16 @@ export default function CasesPage() {
return (
<div className="space-y-4">
<div>
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
<p className="text-sm text-text-muted mt-1">{t('subtitle')}</p>
</div>
<div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr]">
<section className="rounded-lg border border-border bg-surface p-4 space-y-3 flex flex-col min-h-0">
<section
className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 ${
mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
}`}
>
<SearchBar
embedded
value={search}
@@ -322,7 +335,10 @@ export default function CasesPage() {
<li key={item.id}>
<button
type="button"
onClick={() => setSelectedCaseId(item.id)}
onClick={() => {
setSelectedCaseId(item.id);
setMobileDetailOpen(true);
}}
className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${
isActive
? 'border-primary bg-primary/5'
@@ -385,7 +401,14 @@ export default function CasesPage() {
) : null}
</section>
<section className="rounded-lg border border-border bg-surface p-4 min-h-[420px]">
<section
className={`rounded-lg border border-border bg-surface p-3 sm:p-4 min-h-[320px] lg:min-h-[420px] ${
selectedCaseId && !mobileDetailOpen ? 'hidden lg:block' : ''
}`}
>
{mobileDetailOpen && selectedCaseId ? (
<MobileDetailBackButton onClick={() => setMobileDetailOpen(false)} />
) : null}
{!selectedCaseId ? (
<p className="text-sm text-text-muted">{t('selectCaseHint')}</p>
) : loadingDetail || !selectedCase ? (

65
frontend/src/app/[locale]/(dashboard)/layout.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { memo, useEffect } from 'react';
import { memo, useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { Menu } from 'lucide-react';
import { usePathname, useRouter } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import Sidebar from '@/components/ui/shared/Sidebar';
@@ -17,6 +18,22 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
const { user, currentOrganization, isAuthReady } = useAuth();
const router = useRouter();
const pathname = usePathname();
const [sidebarOpen, setSidebarOpen] = useState(false);
useEffect(() => {
setSidebarOpen(false);
}, [pathname]);
useEffect(() => {
if (!sidebarOpen) {
return;
}
const previousOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = previousOverflow;
};
}, [sidebarOpen]);
useEffect(() => {
if (!isAuthReady) return;
@@ -53,14 +70,26 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
}
return (
<div className="flex h-screen app-web-bg text-text-primary">
<Sidebar />
<div className="flex h-[100dvh] app-web-bg text-text-primary">
{sidebarOpen ? (
<button
type="button"
className="fixed inset-0 z-40 bg-black/50 lg:hidden"
aria-label={t('closeMenu')}
onClick={() => setSidebarOpen(false)}
/>
) : null}
<div className="flex-1 flex flex-col">
<DashboardHeader organizationName={currentOrganization.name} />
<Sidebar mobileOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
<main className="p-6 flex-1 min-h-0 overflow-y-auto">
<div className="surface-panel p-6">
<div className="flex-1 flex flex-col min-w-0">
<DashboardHeader
organizationName={currentOrganization.name}
onOpenSidebar={() => setSidebarOpen(true)}
/>
<main className="p-3 sm:p-4 lg:p-6 flex-1 min-h-0 overflow-y-auto">
<div className="surface-panel p-3 sm:p-4 lg:p-6 min-w-0">
{children}
</div>
</main>
@@ -71,14 +100,28 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
const DashboardHeader = memo(function DashboardHeader({
organizationName,
onOpenSidebar,
}: {
organizationName: string;
onOpenSidebar: () => void;
}) {
return (
<header className="relative z-40 h-[71px] flex justify-between items-center gap-4 px-6 border-b border-border/70 backdrop-blur-sm">
<h2 className="text-lg font-medium truncate min-w-0">{organizationName}</h2>
const t = useTranslations('common');
<div className="flex items-center gap-3 shrink-0">
return (
<header className="relative z-50 h-[71px] flex justify-between items-center gap-2 sm:gap-4 px-3 sm:px-6 border-b border-border/70 backdrop-blur-sm shrink-0">
<div className="flex items-center gap-2 min-w-0 flex-1">
<button
type="button"
className="lg:hidden inline-flex items-center justify-center h-10 w-10 rounded-[var(--radius-md)] border border-border/70 text-text-primary hover:bg-background-card/80 shrink-0"
onClick={onOpenSidebar}
aria-label={t('openMenu')}
>
<Menu className="h-5 w-5 icon-flat" />
</button>
<h2 className="text-base sm:text-lg font-medium truncate min-w-0">{organizationName}</h2>
</div>
<div className="flex items-center gap-2 sm:gap-3 shrink-0">
<TopBarControls />
<DashboardAccountMenu />
</div>

53
frontend/src/app/[locale]/(dashboard)/organizations/page.tsx
View File

@@ -15,6 +15,7 @@ import {
} from '@/lib/api/organization';
import { invitationTargetFromConnectionRow } from '@/components/invitations/organizationInviteLinks';
import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
import { OrganizationConnectionsMobileList } from '@/components/ui/organizations/OrganizationConnectionsMobileList';
import { InvitationHistoryDialog } from '@/components/ui/organizations/InvitationHistoryDialog';
import { ConnectionCaseHistoryContent } from '@/components/ui/organizations/ConnectionCaseHistoryContent';
import { Button } from '@/components/ui/shared/Button';
@@ -306,10 +307,10 @@ export default function OrganizationsPage() {
<div className="space-y-6">
<div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
<div>
<h1 className="text-2xl font-semibold text-text-primary">{tabLabel}</h1>
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{tabLabel}</h1>
<p className="text-sm text-text-secondary mt-1">{t('subtitle')}</p>
</div>
<Button type="button" size="sm" onClick={() => void openInvitationHistory()}>
<Button type="button" size="sm" className="w-full sm:w-auto shrink-0" onClick={() => void openInvitationHistory()}>
{t('invitationHistory')}
</Button>
</div>
@@ -344,6 +345,53 @@ export default function OrganizationsPage() {
}
/>
<OrganizationConnectionsMobileList
loading={loading}
mode={mode}
existingRows={existingRows}
searchResults={searchResults}
currentOrganizationId={currentOrganization.id}
counterpart={counterpart}
pendingConnectionRowId={pendingConnectionRowId}
deleteConnectionRowId={deleteConnectionRowId}
copiedId={copiedId}
copyingInvitationId={copyingInvitationId}
showInviteForm={showInviteForm}
manualOrganizationName={manualOrganizationName}
manualOwnerEmail={manualOwnerEmail}
inviteLoading={inviteLoading}
formatConnectionStatusLabel={formatConnectionStatusLabel}
formatTableDate={formatTableDate}
getInvitationTarget={(row) => invitationTargetFromConnectionRow(row, currentOrganization.id)}
onCopyInvitation={(row) => void handleCopyInvitationFromRow(row)}
onRespond={(rowId, action) => void respondToPendingConnection(rowId, action)}
onViewCaseHistory={setCaseHistoryConnection}
onDeleteConnection={(rowId) => void deleteConnection(rowId)}
onSendConnectionRequest={(orgId) => void submitConnectionRequest(orgId)}
onToggleInviteForm={() => setShowInviteForm((v) => !v)}
onManualOrganizationNameChange={setManualOrganizationName}
onManualOwnerEmailChange={setManualOwnerEmail}
onSendInvite={() => void sendInvite()}
labels={{
loading: tCommon('loadingEllipsis'),
emptyConnections: t('emptyConnections'),
noDirectoryResults: t('noDirectoryResults'),
hideInvitationFields: t('hideInvitationFields'),
sendInvitationLink: t('sendInvitationLink'),
counterpartNameLabel: t('counterpartNameLabel', { counterpart }),
ownerEmailLabel: t('ownerEmailLabel'),
sendInvitation: t('sendInvitation'),
sendRequest: t('sendRequest'),
acceptRequest: t('acceptRequest'),
declineRequest: t('declineRequest'),
viewCaseHistory: t('viewCaseHistory'),
removeConnection: t('removeConnection'),
statusToday: t('statusToday'),
statusFound: t('statusFound'),
}}
/>
<div className="hidden lg:block">
<Table
headers={
<tr>
@@ -537,6 +585,7 @@ export default function OrganizationsPage() {
</>
}
/>
</div>
<InvitationHistoryDialog
open={historyOpen}

4
frontend/src/app/[locale]/(dashboard)/patients/page.tsx
View File

@@ -106,8 +106,8 @@ export default function PatientsPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between gap-3">
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
<Button
variant="primary"
disabled={!canEditPatients}

2
frontend/src/app/[locale]/(dashboard)/reports/page.tsx
View File

@@ -1,7 +1,7 @@
export default function ReportsPage() {
return (
<div className="space-y-3">
<h1 className="text-2xl font-semibold text-text-primary">Reports</h1>
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">Reports</h1>
<p className="text-sm text-text-secondary">
Reports module is coming soon.
</p>

4
frontend/src/app/[locale]/(dashboard)/settings/account/page.tsx
View File

@@ -120,13 +120,13 @@ export default function AccountSettingsPage() {
<Link href="/today" className="text-sm text-primary hover:opacity-90">
{tCommon('backToApp')}
</Link>
<h1 className="text-2xl font-semibold text-text-primary mt-4">{t('accountTitle')}</h1>
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary mt-4">{t('accountTitle')}</h1>
<p className="text-text-secondary text-sm mt-2">
{isResetFlow ? t('resetPasswordSubtitle') : t('accountSubtitle')}
</p>
</div>
<div className="surface-card p-6 sm:p-8 max-w-lg">
<div className="surface-card p-4 sm:p-6 max-w-lg">
<h2 className="text-lg font-medium text-text-primary mb-1">
{isResetFlow ? t('resetPasswordTitle') : t('changePasswordTitle')}
</h2>

6
frontend/src/app/[locale]/(dashboard)/settings/subscriptions/page.tsx
View File

@@ -80,20 +80,20 @@ export default function SubscriptionsSettingsPage() {
>
{tCommon('backToApp')}
</Link>
<h1 className="text-2xl font-semibold text-text-primary mt-4">{t('subscriptionsTitle')}</h1>
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary mt-4">{t('subscriptionsTitle')}</h1>
<p className="text-text-secondary text-sm mt-2">
{t('subscriptionsSubtitle', { orgName: currentOrganization.name })}
</p>
</div>
<div className="surface-card p-6 space-y-4">
<div className="surface-card p-4 sm:p-6 space-y-4">
{!hasActiveSubscription && (
<div className="rounded-[var(--radius-md)] border border-amber-500/30 bg-amber-500/10 p-4">
<p className="text-sm text-amber-200">{t('noSubscriptionNotice')}</p>
</div>
)}
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
<div className="grid gap-4 grid-cols-2 lg:grid-cols-5">
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">{t('currentPlan')}</p>
<p className="text-lg font-medium text-text-primary capitalize">

65
frontend/src/app/[locale]/(dashboard)/staff/page.tsx
View File

@@ -36,6 +36,7 @@ import { Checkbox } from '@/components/ui/shared/Checkbox';
import { Table } from '@/components/ui/shared/Table';
import { ToastStack } from '@/components/ui/shared/Toast';
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
import { StaffMembersMobileList } from '@/components/staff/StaffMembersMobileList';
import { useToast } from '@/lib/hooks/useToast';
type StoredInviteLink = {
@@ -502,7 +503,7 @@ export default function StaffPage() {
<div className="space-y-6">
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div>
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
<p className="text-sm text-text-secondary mt-1">{t('subtitle')}</p>
</div>
<Button
@@ -619,6 +620,42 @@ export default function StaffPage() {
{loading ? (
<p className="text-sm text-text-secondary">{t('loadingTeam')}</p>
) : (
<>
<StaffMembersMobileList
members={members}
canEdit={canEdit}
organizationType={currentOrganization?.type}
copiedInviteMembershipId={copiedInviteMembershipId}
copyingInviteMembershipId={copyingInviteMembershipId}
enablingMembershipId={enablingMembershipId}
disablingMembershipId={disablingMembershipId}
formatAccessSummary={(member) =>
formatAccessSummary(member.permissions, currentOrganization?.type, tFeatures)
}
canShareInviteLink={canShareStaffInviteLink}
canEnable={canEnableStaff}
canDisable={canDisableStaff}
onCopyInviteLink={(member) => void copyStaffInviteLink(member)}
onEnable={setEnableTarget}
onDisable={setDisableTarget}
onEdit={openEdit}
onDelete={() => handleDeleteMember()}
labels={{
roleOwner: t('roleOwner'),
roleStaff: t('roleStaff'),
statusActive: t('statusActive'),
statusPending: t('statusPending'),
statusDisabled: t('statusDisabled'),
statusExpired: t('statusExpired'),
allFeatures: t('allFeatures'),
copyInviteLink: t('copyInviteLinkTitle'),
enableMemberTitle: t('enableMemberTitle'),
disableMemberTitle: t('disableMemberTitle'),
editMemberAria: t('editMemberAria'),
deleteMemberAria: t('deleteMemberAria'),
}}
/>
<div className="hidden lg:block">
<Table
headers={
<tr>
@@ -763,12 +800,14 @@ export default function StaffPage() {
</>
}
/>
</div>
</>
)}
{inviteOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50">
<div
className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
className="w-full sm:max-w-lg max-h-[90dvh] overflow-y-auto rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-md)] border border-border bg-background-secondary p-4 sm:p-6 shadow-xl space-y-4"
role="dialog"
aria-modal="true"
aria-labelledby="invite-staff-title"
@@ -824,7 +863,7 @@ export default function StaffPage() {
/>
)}
<div className="flex justify-end gap-2 pt-2">
<div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-2">
<Button
variant="outline"
type="button"
@@ -884,9 +923,9 @@ export default function StaffPage() {
)}
{enableTarget && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/55">
<div
className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
className="surface-card w-full sm:max-w-md max-h-[90dvh] overflow-y-auto p-4 sm:p-5 space-y-4 shadow-xl rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-lg)]"
role="dialog"
aria-modal="true"
aria-labelledby="enable-staff-title"
@@ -913,7 +952,7 @@ export default function StaffPage() {
{!hasAvailableSeat && (
<p className="text-sm text-amber-600 dark:text-amber-400">{t('noSeatsAvailable')}</p>
)}
<div className="flex justify-end gap-2 pt-1">
<div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-1">
<Button
type="button"
variant="outline"
@@ -937,9 +976,9 @@ export default function StaffPage() {
)}
{disableTarget && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/55">
<div
className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
className="surface-card w-full sm:max-w-md max-h-[90dvh] overflow-y-auto p-4 sm:p-5 space-y-4 shadow-xl rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-lg)]"
role="dialog"
aria-modal="true"
aria-labelledby="disable-staff-title"
@@ -963,7 +1002,7 @@ export default function StaffPage() {
<li>{t('disableBullet2')}</li>
<li>{t('disableBullet3')}</li>
</ul>
<div className="flex justify-end gap-2 pt-1">
<div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-1">
<Button
type="button"
variant="outline"
@@ -987,9 +1026,9 @@ export default function StaffPage() {
)}
{editing && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50">
<div
className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
className="w-full sm:max-w-lg max-h-[90dvh] overflow-y-auto rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-md)] border border-border bg-background-secondary p-4 sm:p-6 shadow-xl space-y-4"
role="dialog"
aria-modal="true"
>
@@ -1038,7 +1077,7 @@ export default function StaffPage() {
/>
)}
<div className="flex justify-end gap-2 pt-2">
<div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-2">
<Button
variant="outline"
type="button"

12
frontend/src/app/[locale]/(dashboard)/tasks/page.tsx
View File

@@ -159,7 +159,7 @@ export default function TasksPage() {
return (
<div className="space-y-4">
<header className="space-y-1">
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
<p className="text-sm text-text-secondary">{t('subtitle')}</p>
</header>
@@ -250,7 +250,7 @@ export default function TasksPage() {
return (
<li key={task.id}>
<div className="grid grid-cols-[minmax(0,1fr)_132px_auto] items-center gap-x-3 gap-y-0.5 px-3 py-2">
<div className="flex flex-col gap-3 px-3 py-3 sm:grid sm:grid-cols-[minmax(0,1fr)_132px_auto] sm:items-center sm:gap-x-3 sm:gap-y-0.5 sm:py-2">
<div className="min-w-0">
<div className="flex flex-wrap items-center gap-1.5">
<p className="text-sm font-medium text-text-primary">
@@ -280,7 +280,7 @@ export default function TasksPage() {
</p>
</div>
<div className="flex justify-center">
<div className="flex sm:justify-center">
{canEdit ? (
<select
value={task.status}
@@ -288,7 +288,7 @@ export default function TasksPage() {
onChange={(e) =>
void handleStatusUpdate(task.id, e.target.value as LabTaskStatus)
}
className={`${FORM_SELECT_CLASS} w-full max-w-[132px] font-medium`}
className={`${FORM_SELECT_CLASS} w-full sm:max-w-[132px] font-medium`}
style={labTaskStatusSelectStyle(task.status)}
>
{statusOptions.map((opt) => (
@@ -305,7 +305,7 @@ export default function TasksPage() {
)}
</div>
<div className="flex items-center gap-1.5 shrink-0 justify-end">
<div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end">
{canEdit ? (
<button
type="button"
@@ -327,7 +327,7 @@ export default function TasksPage() {
truncate
title={task.prosthesisTypeLabel}
style={prosthesisTypeBadgeStyle(task.prosthesisTypeCode, index)}
className="w-[7rem]"
className="w-full max-w-[8rem] sm:w-[7rem]"
>
{task.prosthesisTypeLabel}
</Badge>

2
frontend/src/app/[locale]/(dashboard)/today/page.tsx
View File

@@ -13,7 +13,7 @@ export default function TodayPage() {
return (
<div>
<h1 className="text-2xl font-semibold mb-6">
<h1 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6">
{t('welcomeBack')}
</h1>