Implement medicine library and cabinet

packages/web/src/app/(dashboard)/medicines/page.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import Link from 'next/link';
+import { useApi } from '@/lib/useApi';
+
+export default function MedicinesPage() {
+  const { householdId, isLoading: sessionLoading } = useApi();
+
+  if (sessionLoading) {
+    return <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>
+        </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"
+        />
+      </div>
+    </div>
+  );
+}
+
+function SectionCard({
+  title,
+  description,
+  href,
+}: {
+  title: string;
+  description: string;
+  href: string;
+}) {
+  return (
+    <Link
+      href={href}
+      className="rounded-xl border bg-white p-6 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <h2 className="text-lg font-semibold">{title}</h2>
+      <p className="mt-1 text-sm text-gray-500">{description}</p>
+    </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 className="h-24 rounded-xl bg-gray-200" />
+        <div className="h-24 rounded-xl bg-gray-200" />
+      </div>
+    </div>
+  );
+}