feat: implement per-person dose tracking and update migration process

- Enhanced the database migration process to ensure compatibility with existing production databases, including detailed steps for adding/modifying columns.
- Updated the client-side logic to support tracking doses taken by multiple users, including changes to the data structure and UI components.
- Added new styles for per-person dose tracking to improve user experience and visual clarity.

frontend/src/styles.css

@@ -907,6 +907,62 @@ textarea.auto-resize {
   color: var(--warning);
 }
 
+/* Per-person dose tracking */
+.dose-checks {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.dose-person {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.dose-person.taken {
+  background: var(--success-bg);
+}
+
+.dose-person.overdue {
+  background: var(--warning-bg);
+}
+
+.dose-person .person-name {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  min-width: 60px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dose-person .person-name.clickable {
+  cursor: pointer;
+}
+
+.dose-person .person-name.clickable:hover {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.dose-person.taken .person-name {
+  color: var(--success);
+}
+
+.dose-person .dose-btn {
+  margin-left: 0;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  min-height: 24px;
+  font-size: 0.8rem;
+}
+
 .time-row.taken {
   opacity: 0.6;
 }