aerimagne/MeshiTrack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Phase 5 cleanup

Browse source
This commit is contained in:
Aerilyn Weber 2026-04-26 18:44:59 +09:00
parent 5536acd67d
commit 76a516a417
136 changed files with 6322 additions and 1985 deletions
Download patch file Download diff file Expand all files Collapse all files

114
packages/web/src/app/(dashboard)/medicines/RegimensTab.tsx
View file

@ -13,7 +13,7 @@ import {
DosageFrequency,
TimeOfDay,
DosageUnit,
MedicineForm,
type MedicineForm,
allowedUnitsForForm,
defaultUnitForForm,
} from '@meshitrack/shared';
@ -99,23 +99,28 @@ function MedicationRow({
<button
type="button"
onClick={() => onRemove(index)}
className="rounded p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
className="mt-btn mt-btn--danger-icon"
title="Remove medication"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Medicine</label>
<label className="mt-field-label">Medicine</label>
<select
required
value={medication.medicineId}
onChange={(e) => handleMedicineChange(e.target.value)}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Select medicine...</option>
{medicines.map((m) => (
@ -128,7 +133,7 @@ function MedicationRow({
<div className="flex gap-2">
<div className="flex-1">
<label className="block text-xs font-medium text-gray-700 mb-1">Dosage</label>
<label className="mt-field-label">Dosage</label>
<input
type="number"
required
@ -136,17 +141,17 @@ function MedicationRow({
step="any"
value={medication.dosage || ''}
onChange={(e) => onChange(index, { ...medication, dosage: Number(e.target.value) })}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div className="flex-1">
<label className="block text-xs font-medium text-gray-700 mb-1">Unit</label>
<label className="mt-field-label">Unit</label>
<select
value={medication.dosageUnit}
onChange={(e) =>
onChange(index, { ...medication, dosageUnit: e.target.value as DosageUnit })
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{allowedUnits.map((u) => (
<option key={u} value={u}>
@ -158,7 +163,7 @@ function MedicationRow({
</div>
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Frequency</label>
<label className="mt-field-label">Frequency</label>
<select
value={medication.frequency}
onChange={(e) =>
@ -171,7 +176,7 @@ function MedicationRow({
: undefined,
})
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{Object.values(DosageFrequency).map((f) => (
<option key={f} value={f}>
@ -183,7 +188,7 @@ function MedicationRow({
{medication.frequency === DosageFrequency.CUSTOM && (
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Times per day</label>
<label className="mt-field-label">Times per day</label>
<input
type="number"
required
@ -193,15 +198,13 @@ function MedicationRow({
onChange={(e) =>
onChange(index, { ...medication, customFrequencyPerDay: Number(e.target.value) })
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
)}
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Time of day (optional)
</label>
<label className="mt-field-label">Time of day (optional)</label>
<select
value={medication.timeOfDay ?? ''}
onChange={(e) =>
@ -210,7 +213,7 @@ function MedicationRow({
timeOfDay: e.target.value ? (e.target.value as TimeOfDay) : undefined,
})
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Any time</option>
{Object.values(TimeOfDay).map((t) => (
@ -222,9 +225,7 @@ function MedicationRow({
</div>
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Instructions (optional)
</label>
<label className="mt-field-label">Instructions (optional)</label>
<input
type="text"
maxLength={500}
@ -233,7 +234,7 @@ function MedicationRow({
onChange(index, { ...medication, instructions: e.target.value || undefined })
}
placeholder="e.g. Take with food"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
</div>
@ -317,17 +318,13 @@ function RegimenForm({
}
return (
<div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card mb-6">
<h2 className="text-lg font-semibold mb-4">{initial ? 'Edit Regimen' : 'New Regimen'}</h2>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
</div>
)}
{error && <div className="mt-alert mt-alert--danger mb-4">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-5">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
<label className="mt-field-label">Name</label>
<input
type="text"
required
@ -335,7 +332,7 @@ function RegimenForm({
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g. Morning routine"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div className="flex items-center gap-3 pt-6">
@ -344,7 +341,7 @@ function RegimenForm({
id="isActive"
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
className="h-4 w-4 rounded border-gray-300"
/>
<label htmlFor="isActive" className="text-sm font-medium text-gray-700">
Active
@ -355,11 +352,7 @@ function RegimenForm({
<div>
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-semibold text-gray-800">Medications</h3>
<button
type="button"
onClick={addMedication}
className="rounded-lg border border-primary-600 px-3 py-1.5 text-xs font-medium text-primary-600 hover:bg-primary-50 transition-colors"
>
<button type="button" onClick={addMedication} className="mt-btn mt-btn--ghost">
+ Add medication
</button>
</div>
@ -382,18 +375,10 @@ function RegimenForm({
</div>
<div className="flex gap-3 pt-2">
<button
type="submit"
disabled={submitting}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={submitting} className="mt-btn mt-btn--primary">
{submitting ? 'Saving...' : initial ? 'Save changes' : 'Create regimen'}
</button>
<button
type="button"
onClick={onCancel}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button type="button" onClick={onCancel} className="mt-btn mt-btn--ghost">
Cancel
</button>
</div>
@ -549,16 +534,14 @@ export function RegimensTab({ householdId }: { householdId: string }) {
<select
value={filterActive}
onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="all">All regimens</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
<button
onClick={handleShowBurnRate}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button onClick={handleShowBurnRate} className="mt-btn mt-btn--ghost">
{showBurnRate ? 'Hide burn rate' : 'Burn rate'}
</button>
</div>
@ -567,14 +550,14 @@ export function RegimensTab({ householdId }: { householdId: string }) {
setEditingRegimen(null);
setShowForm(!showForm);
}}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
className="mt-btn mt-btn--primary"
>
{showForm ? 'Cancel' : 'New Regimen'}
</button>
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
@ -583,7 +566,7 @@ export function RegimensTab({ householdId }: { householdId: string }) {
)}
{showBurnRate && (
<div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
<div className="mb-6 mt-card">
<h2 className="text-lg font-semibold mb-4">Burn Rate &amp; Spending Projections</h2>
{burnRateLoading ? (
<div className="animate-pulse space-y-2">
@ -630,7 +613,7 @@ export function RegimensTab({ householdId }: { householdId: string }) {
))}
</div>
) : regimens.length === 0 ? (
<div className="rounded-xl border bg-white p-6 shadow-sm text-center text-gray-500">
<div className="mt-card text-center" style={{ color: 'var(--ink-muted)' }}>
{filterActive !== 'all'
? `No ${filterActive} regimens found.`
: isFormOpen
@ -640,17 +623,13 @@ export function RegimensTab({ householdId }: { householdId: string }) {
) : (
<div className="space-y-3">
{regimens.map((regimen) => (
<div key={regimen._id} className="rounded-xl border bg-white p-4 shadow-sm">
<div key={regimen._id} className="mt-card">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-gray-900">{regimen.name}</h3>
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${
regimen.isActive
? 'bg-green-100 text-green-700'
: 'bg-gray-100 text-gray-500'
}`}
className={`mt-pill ${regimen.isActive ? 'mt-pill--ok' : 'mt-pill--ghost'}`}
>
{regimen.isActive ? 'Active' : 'Inactive'}
</span>
@ -661,21 +640,20 @@ export function RegimensTab({ householdId }: { householdId: string }) {
</p>
<div className="flex flex-wrap gap-1">
{regimen.medications.map((med, i) => (
<span
key={i}
className="rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700"
>
<span key={i} className="mt-pill mt-pill--info">
{med.medicineName} — {med.dosage} {med.dosageUnit} (
{FREQUENCY_LABELS[med.frequency] ?? med.frequency})
</span>
))}
</div>
<p className="mt-2 text-xs text-gray-400">Created {formatDate(regimen.createdAt)}</p>
<p className="mt-2 text-xs text-gray-400">
Created {formatDate(regimen.createdAt)}
</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<button
onClick={() => handleToggleActive(regimen)}
className="rounded-lg border px-3 py-1.5 text-xs font-medium hover:bg-gray-50 transition-colors"
className="mt-btn mt-btn--ghost"
title={regimen.isActive ? 'Deactivate' : 'Activate'}
>
{regimen.isActive ? 'Deactivate' : 'Activate'}
@ -685,7 +663,7 @@ export function RegimensTab({ householdId }: { householdId: string }) {
setShowForm(false);
setEditingRegimen(regimen);
}}
className="rounded p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 transition-colors"
className="mt-btn mt-btn--icon"
title="Edit"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -699,7 +677,7 @@ export function RegimensTab({ householdId }: { householdId: string }) {
</button>
<button
onClick={() => handleDelete(regimen._id, regimen.name)}
className="rounded p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
className="mt-btn mt-btn--danger-icon"
title="Delete"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">