Phase 5 cleanup
This commit is contained in:
parent
5536acd67d
commit
76a516a417
136 changed files with 6322 additions and 1985 deletions
|
|
@ -2,82 +2,122 @@
|
|||
|
||||
import Link from 'next/link';
|
||||
import { useApi } from '@/lib/useApi';
|
||||
import { SetPageHeader } from '@/components/layout/SetPageHeader';
|
||||
import { Icon } from '@/components/ui/Icon';
|
||||
import type { IconName } from '@/components/ui/Icon';
|
||||
|
||||
export default function MedicinesPage() {
|
||||
const { householdId, isLoading: sessionLoading } = useApi();
|
||||
|
||||
if (sessionLoading) {
|
||||
return <PageSkeleton />;
|
||||
return (
|
||||
<>
|
||||
<SetPageHeader title="Medicines" subtitle="All known medicines" />
|
||||
<PageSkeleton />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!householdId) {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-4">Medicines</h1>
|
||||
<div className="rounded-xl border bg-white p-6 shadow-sm">
|
||||
<p className="text-gray-500">
|
||||
You need to{' '}
|
||||
<Link href="/settings" className="text-primary-600 underline">
|
||||
create or join a household
|
||||
</Link>{' '}
|
||||
before managing medicines.
|
||||
</p>
|
||||
<>
|
||||
<SetPageHeader title="Medicines" subtitle="All known medicines" />
|
||||
<div style={{ padding: '28px 32px' }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-elev)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--r-md)',
|
||||
padding: 24,
|
||||
}}
|
||||
>
|
||||
<p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
|
||||
You need to{' '}
|
||||
<Link href="/settings" style={{ color: 'var(--brand)', textDecoration: 'underline' }}>
|
||||
create or join a household
|
||||
</Link>{' '}
|
||||
before managing medicines.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6">Medicines</h1>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<SectionCard
|
||||
title="Library"
|
||||
description="Manage your medicines and their products"
|
||||
href="/medicines/library"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Cabinet"
|
||||
description="Track your medicine inventory, quantities and expiry dates"
|
||||
href="/medicines/cabinet"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Regimens"
|
||||
description="Define daily medication schedules and track dosage frequency"
|
||||
href="/medicines/regimens"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Organizer"
|
||||
description="Fill your pill organizer and track cabinet usage"
|
||||
href="/medicines/organizer"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Activity"
|
||||
description="View cabinet event history and spending summaries"
|
||||
href="/medicines/activity"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Stores"
|
||||
description="Manage pharmacies and stores for price tracking"
|
||||
href="/stores"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Prices"
|
||||
description="Track and compare medicine prices across stores"
|
||||
href="/medicine-prices"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Refills"
|
||||
description="Get refill alerts and manage shopping lists"
|
||||
href="/refills"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Purchases"
|
||||
description="Record medicine purchases and track online orders"
|
||||
href="/purchases"
|
||||
/>
|
||||
<>
|
||||
<SetPageHeader title="Medicines" subtitle="All known medicines" />
|
||||
<div style={{ padding: '28px 32px 56px', maxWidth: 1400 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
|
||||
gap: 14,
|
||||
}}
|
||||
>
|
||||
<SectionCard
|
||||
title="Library"
|
||||
description="Manage your medicines and their products"
|
||||
href="/medicines/library"
|
||||
icon="pill"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Cabinet"
|
||||
description="Track your medicine inventory, quantities and expiry dates"
|
||||
href="/medicines/cabinet"
|
||||
icon="cabinet"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Schedule"
|
||||
description="Today's dose log and weekly overview"
|
||||
href="/medicines/schedule"
|
||||
icon="clock"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Regimens"
|
||||
description="Define daily medication schedules"
|
||||
href="/medicines/regimens"
|
||||
icon="list"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Organizer"
|
||||
description="Fill your pill organizer and track cabinet usage"
|
||||
href="/medicines/organizer"
|
||||
icon="calendar"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Activity"
|
||||
description="View cabinet event history and spending summaries"
|
||||
href="/medicines/activity"
|
||||
icon="trend"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Stores"
|
||||
description="Manage pharmacies and stores for price tracking"
|
||||
href="/stores"
|
||||
icon="store"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Prices"
|
||||
description="Track and compare medicine prices across stores"
|
||||
href="/medicine-prices"
|
||||
icon="tag"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Refills"
|
||||
description="Get refill alerts and manage shopping lists"
|
||||
href="/refills"
|
||||
icon="refresh"
|
||||
/>
|
||||
<SectionCard
|
||||
title="Purchases"
|
||||
description="Record medicine purchases and track online orders"
|
||||
href="/purchases"
|
||||
icon="truck"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -85,29 +125,64 @@ function SectionCard({
|
|||
title,
|
||||
description,
|
||||
href,
|
||||
icon,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
icon: IconName;
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className="rounded-xl border bg-white p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 10,
|
||||
padding: 18,
|
||||
background: 'var(--bg-elev)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--r-md)',
|
||||
textDecoration: 'none',
|
||||
transition: 'all 0.15s',
|
||||
}}
|
||||
>
|
||||
<h2 className="text-lg font-semibold">{title}</h2>
|
||||
<p className="mt-1 text-sm text-gray-500">{description}</p>
|
||||
<div
|
||||
style={{
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 'var(--r-sm)',
|
||||
background: 'var(--brand-soft)',
|
||||
color: 'var(--brand)',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Icon name={icon} size={16} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-strong)' }}>{title}</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 2 }}>{description}</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function PageSkeleton() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6">Medicines</h1>
|
||||
<div className="animate-pulse grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div style={{ padding: '28px 32px' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
|
||||
gap: 14,
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<div key={i} className="h-24 rounded-xl bg-gray-200" />
|
||||
<div
|
||||
key={i}
|
||||
style={{ height: 96, borderRadius: 'var(--r-md)', background: 'var(--bg-inset)' }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue