improvement: v1 standalone treatment/case creation made possible.

2026-08-19 15:05:58 +03:30
parent e5c39c6b7e
commit 8bfa8c88fe
39 changed files with 3296 additions and 387 deletions
--- a/frontend/src/components/ui/treatment/DayStripCard.tsx
+++ b/frontend/src/components/ui/treatment/DayStripCard.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { Trash2 } from 'lucide-react';
+import { Card } from '@/components/ui/shared/Card';
+import { treatmentTypeBannerStyle } from '@/components/shared/treatmentTypeDisplay';
+import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
+import type { DayStripItem } from '@/components/treatment/dayStrip';
+
+interface DayStripCardProps {
+  item: DayStripItem;
+  selected: boolean;
+  treatmentCatalog: TreatmentCatalogEntry[];
+  onSelect: () => void;
+  canDelete?: boolean;
+  onDelete?: () => void;
+  deleteAriaLabel?: string;
+}
+
+export function DayStripCard({
+  item,
+  selected,
+  treatmentCatalog,
+  onSelect,
+  canDelete = false,
+  onDelete,
+  deleteAriaLabel,
+}: DayStripCardProps) {
+  const purposeIndex = treatmentCatalog.findIndex((e) => e.code === item.colorCode);
+  const bannerStyle = treatmentTypeBannerStyle(item.colorCode, purposeIndex < 0 ? 0 : purposeIndex);
+  const selectedClass = selected
+    ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]'
+    : 'hover:brightness-110';
+  const shellClass = `
+        text-start rounded-[var(--radius-sm)] w-full sm:w-auto sm:min-w-[200px] sm:max-w-[280px] transition-shadow min-h-[52px]
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
+        ${selectedClass}
+      `;
+
+  const body = (
+    <>
+      {item.timeLabel ? (
+        <p className="text-[11px] font-medium tabular-nums opacity-95">{item.timeLabel}</p>
+      ) : (
+        <p className="text-[11px] font-medium opacity-95">{item.subtitle}</p>
+      )}
+      <p className="text-sm font-medium leading-tight truncate mt-0.5">
+        {item.patientFirstName} {item.patientLastName}
+      </p>
+      {item.timeLabel ? (
+        <p className="text-[11px] opacity-90 mt-0.5 truncate">{item.subtitle}</p>
+      ) : null}
+    </>
+  );
+
+  if (!canDelete || !onDelete) {
+    return (
+      <Card
+        as="button"
+        type="button"
+        onClick={onSelect}
+        padding="none"
+        style={bannerStyle}
+        className={`${shellClass} px-3 py-2`}
+      >
+        {body}
+      </Card>
+    );
+  }
+
+  return (
+    <Card
+      padding="none"
+      style={bannerStyle}
+      className={`${shellClass} flex items-stretch overflow-hidden`}
+    >
+      <button
+        type="button"
+        onClick={onSelect}
+        className="min-w-0 flex-1 text-start px-3 py-2 focus:outline-none"
+      >
+        {body}
+      </button>
+      <button
+        type="button"
+        onClick={(event) => {
+          event.stopPropagation();
+          onDelete();
+        }}
+        aria-label={deleteAriaLabel}
+        title={deleteAriaLabel}
+        className="shrink-0 self-center pe-2.5 ps-1 opacity-80 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45 rounded-[var(--radius-sm)] text-inherit"
+      >
+        <Trash2 className="h-4 w-4 text-inherit" aria-hidden />
+      </button>
+    </Card>
+  );
+}