Phase 3c WIP: doses/profiles/tests (pre-solaria-verify)

web/normogen-web/src/components/medication/DoseLogger.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState, type FC } from 'react';
+import { Box, Button, LinearProgress, Stack, Typography } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import { useMedicationStore } from '../../store/useStore';
+
+interface Props {
+  medicationId: string;
+}
+
+/**
+ * Per-medication dose logging + adherence display. Renders inside each
+ * MedicationManager card. Loads adherence on mount and refreshes after a dose
+ * is logged.
+ */
+export const DoseLogger: FC<Props> = ({ medicationId }) => {
+  const { adherence, loadAdherence, logDose } = useMedicationStore();
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    loadAdherence(medicationId);
+  }, [medicationId, loadAdherence]);
+
+  const stats = adherence[medicationId];
+  const rate = stats ? Math.round(stats.adherence_rate) : 0;
+
+  const handleLog = async (taken: boolean) => {
+    setBusy(true);
+    try {
+      await logDose(medicationId, taken);
+    } catch {
+      /* store surfaces error in the MedicationManager banner */
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Box sx={{ mt: 1.5 }}>
+      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
+        <Button
+          size="small"
+          variant="outlined"
+          color="success"
+          startIcon={<CheckIcon />}
+          disabled={busy}
+          onClick={() => handleLog(true)}
+        >
+          Taken
+        </Button>
+        <Button
+          size="small"
+          variant="outlined"
+          color="inherit"
+          startIcon={<CloseIcon />}
+          disabled={busy}
+          onClick={() => handleLog(false)}
+        >
+          Skipped
+        </Button>
+      </Stack>
+
+      {stats && (
+        <Box>
+          <Stack direction="row" justifyContent="space-between" sx={{ mb: 0.5 }}>
+            <Typography variant="caption" color="text.secondary">
+              Adherence (last {stats.period_days}d)
+            </Typography>
+            <Typography variant="caption" fontWeight={600}>
+              {rate}% · {stats.taken_doses}/{stats.total_doses} taken
+            </Typography>
+          </Stack>
+          <LinearProgress
+            variant="determinate"
+            value={rate}
+            color={rate >= 80 ? 'success' : rate >= 50 ? 'warning' : 'error'}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default DoseLogger;

web/normogen-web/src/components/medication/MedicationManager.test.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { mockStoreFactory, setMockStore, resetMockStore } from '../../test/mockStore';
+
+vi.mock('../../store/useStore', () => mockStoreFactory());
+
+// Import AFTER the mock is registered so the component picks up the mock.
+const { MedicationManager } = await import('./MedicationManager');
+const { useAuthStore } = await import('../../store/useStore');
+
+const med = (overrides: Partial<Record<string, unknown>> = {}) => ({
+  medication_id: 'm1',
+  name: 'Ibuprofen',
+  dosage: '200mg',
+  frequency: 'daily',
+  active: true,
+  instructions: undefined,
+  ...overrides,
+});
+
+const baseActions = {
+  loadMedications: vi.fn(),
+  createMedication: vi.fn(),
+  updateMedication: vi.fn(),
+  deleteMedication: vi.fn(),
+  selectMedication: vi.fn(),
+  clearError: vi.fn(),
+  loadAdherence: vi.fn(),
+  logDose: vi.fn(),
+  isLoading: false,
+  error: null,
+  adherence: {},
+  selectedMedication: null,
+};
+
+describe('MedicationManager', () => {
+  beforeEach(() => {
+    resetMockStore();
+    setMockStore({
+      useAuthStore: { user: { user_id: 'u1', username: 'tester' }, profile: {} },
+    });
+    baseActions.loadMedications.mockClear();
+  });
+
+  it('renders the medications from the store', () => {
+    setMockStore({
+      useMedicationStore: {
+        ...baseActions,
+        medications: [med({ name: 'Aspirin' }), med({ medication_id: 'm2', name: 'Warfarin' })],
+      },
+    });
+    render(<MedicationManager />);
+    expect(screen.getByText('Aspirin')).toBeInTheDocument();
+    expect(screen.getByText('Warfarin')).toBeInTheDocument();
+  });
+
+  it('shows the empty state when there are no medications', () => {
+    setMockStore({ useMedicationStore: { ...baseActions, medications: [] } });
+    render(<MedicationManager />);
+    expect(screen.getByText(/No medications yet/i)).toBeInTheDocument();
+  });
+
+  it('loads medications on mount', () => {
+    setMockStore({ useMedicationStore: { ...baseActions, medications: [] } });
+    render(<MedicationManager />);
+    expect(baseActions.loadMedications).toHaveBeenCalled();
+  });
+
+  it('opens the create dialog when Add is clicked', () => {
+    setMockStore({ useMedicationStore: { ...baseActions, medications: [] } });
+    render(<MedicationManager />);
+    fireEvent.click(screen.getByText('Add'));
+    expect(screen.getByText('Add medication')).toBeInTheDocument();
+  });
+
+  it('renders an error banner when the store has an error', () => {
+    setMockStore({
+      useMedicationStore: { ...baseActions, medications: [], error: 'Something broke' },
+    });
+    render(<MedicationManager />);
+    expect(screen.getByText('Something broke')).toBeInTheDocument();
+  });
+});

web/normogen-web/src/components/medication/MedicationManager.tsx

@@ -30,6 +30,7 @@ import type {
   CreateMedicationRequest,
   UpdateMedicationRequest,
 } from '../../types/api';
+import { DoseLogger } from './DoseLogger';
 
 const ROUTES = ['oral', 'topical', 'injection', 'inhalation', 'other'] as const;
 
@@ -66,11 +67,12 @@ export const MedicationManager: FC = () => {
   }, [loadMedications]);
 
   const openCreate = () => {
-    // TODO: real profile management — for now, source profile_id from the user,
-    // falling back to 'default' (the backend accepts any string).
+    // profile_id is deterministic: profile_<user_id>. The backend auto-creates
+    // this profile on register, so the id always resolves to a real profile.
+    const profileId = user?.profile_id ?? `profile_${user?.user_id ?? 'default'}`;
     setCreateForm({
       ...emptyCreate,
-      profile_id: user?.profile_id ?? 'default',
+      profile_id: profileId,
     });
     setCreateOpen(true);
   };
@@ -178,6 +180,7 @@ export const MedicationManager: FC = () => {
                           {med.instructions}
                         </Typography>
                       )}
+                      {med.medication_id && <DoseLogger medicationId={med.medication_id} />}
                     </Box>
                   </Stack>
                 </CardContent>