@hed-hog/operations 0.0.318 → 0.0.321

package/hedhog/frontend/app/_components/operations-calendar-view.tsx.ejs

@@ -0,0 +1,306 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import {
+  addDays,
+  addMonths,
+  eachDayOfInterval,
+  endOfWeek,
+  isSameDay,
+  isSameMonth,
+  startOfMonth,
+  startOfWeek,
+  subMonths,
+} from 'date-fns';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+type CalendarItem = {
+  id: number | string;
+  date: string;
+  title: string;
+  subtitle?: string | null;
+  meta?: string | null;
+  kind?: string | null;
+  statusLabel?: string | null;
+  badgeClassName?: string | null;
+};
+
+function formatMonthLabel(date: Date, locale: string) {
+  return new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    year: 'numeric',
+  }).format(date);
+}
+
+function formatDayNumber(date: Date, locale: string) {
+  return new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+  }).format(date);
+}
+
+function formatDateKey(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function buildWeekdayLabels(locale: string) {
+  const monday = new Date(Date.UTC(2024, 0, 1, 12, 0, 0));
+
+  return Array.from({ length: 7 }, (_, index) =>
+    new Intl.DateTimeFormat(locale, { weekday: 'short' })
+      .format(addDays(monday, index))
+      .slice(0, 3)
+  );
+}
+
+export function OperationsCalendarView({
+  locale,
+  items,
+  emptyLabel,
+  onOpenItem,
+  onDateSelect,
+  actionLabel,
+  onMonthChange,
+}: {
+  locale: string;
+  items: CalendarItem[];
+  emptyLabel: string;
+  onOpenItem: (item: CalendarItem) => void;
+  onDateSelect?: (date: string, items: CalendarItem[]) => void;
+  actionLabel: string;
+  onMonthChange?: (year: number, month: number) => void;
+}) {
+  const [currentMonth, setCurrentMonth] = useState(() => new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+  const weekdayLabels = useMemo(() => buildWeekdayLabels(locale), [locale]);
+
+  const onMonthChangeRef = useRef(onMonthChange);
+  onMonthChangeRef.current = onMonthChange;
+
+  useEffect(() => {
+    onMonthChangeRef.current?.(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth() + 1
+    );
+  }, [currentMonth]);
+
+  const itemMap = useMemo(() => {
+    const mapped = new Map<string, CalendarItem[]>();
+
+    items.forEach((item) => {
+      const key = item.date;
+      const current = mapped.get(key) ?? [];
+      current.push(item);
+      mapped.set(key, current);
+    });
+
+    return mapped;
+  }, [items]);
+
+  const gridStart = startOfWeek(startOfMonth(currentMonth), {
+    weekStartsOn: 1,
+  });
+  const gridEnd = endOfWeek(addDays(gridStart, 41), {
+    weekStartsOn: 1,
+  });
+  const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
+
+  const selectedItems = selectedDate
+    ? (itemMap.get(formatDateKey(selectedDate)) ?? [])
+    : [];
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between rounded-2xl border border-border/70 bg-muted/20 px-3 py-2.5">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="cursor-pointer rounded-full"
+          onClick={() => {
+            setCurrentMonth((current) => subMonths(current, 1));
+            setSelectedDate(null);
+          }}
+        >
+          <ChevronLeft className="size-4" />
+        </Button>
+        <div className="text-sm font-semibold capitalize text-foreground">
+          {formatMonthLabel(currentMonth, locale)}
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="cursor-pointer rounded-full"
+          onClick={() => {
+            setCurrentMonth((current) => addMonths(current, 1));
+            setSelectedDate(null);
+          }}
+        >
+          <ChevronRight className="size-4" />
+        </Button>
+      </div>
+
+      <div className="rounded-3xl border border-border/70 bg-card p-3 shadow-xs lg:p-4">
+        <div className="mb-2 grid grid-cols-7">
+          {weekdayLabels.map((label, index) => (
+            <div
+              key={`${label}-${index}`}
+              className="py-1 text-center text-[11px] font-medium uppercase tracking-wide text-muted-foreground"
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-7 gap-1 lg:gap-2">
+          {days.map((day) => {
+            const key = formatDateKey(day);
+            const dayItems = itemMap.get(key) ?? [];
+            const inMonth = isSameMonth(day, currentMonth);
+            const isSelected =
+              selectedDate !== null && isSameDay(day, selectedDate);
+
+            return (
+              <button
+                key={key}
+                type="button"
+                disabled={!inMonth}
+                onClick={() => {
+                  const nextDate =
+                    selectedDate !== null && isSameDay(selectedDate, day)
+                      ? null
+                      : day;
+                  setSelectedDate(nextDate);
+                  if (nextDate) {
+                    onDateSelect?.(key, dayItems);
+                  }
+                }}
+                className={cn(
+                  'min-h-24 rounded-2xl border border-border/60 p-2 text-left transition-colors lg:min-h-32',
+                  inMonth
+                    ? 'cursor-pointer bg-background/90 hover:border-border hover:bg-muted/30'
+                    : 'cursor-default bg-muted/20 opacity-35',
+                  isSelected && 'ring-1 ring-primary/35'
+                )}
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <span
+                    className={cn(
+                      'flex size-8 items-center justify-center rounded-full text-sm',
+                      isSelected
+                        ? 'bg-primary font-semibold text-primary-foreground'
+                        : 'text-foreground'
+                    )}
+                  >
+                    {formatDayNumber(day, locale)}
+                  </span>
+                  {dayItems.length ? (
+                    <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">
+                      {dayItems.length}
+                    </span>
+                  ) : null}
+                </div>
+
+                {inMonth && dayItems.length ? (
+                  <div className="mt-2 hidden space-y-1 lg:block">
+                    {dayItems.slice(0, 3).map((item) => (
+                      <div
+                        key={`${item.id}-${item.kind ?? 'item'}`}
+                        className={cn(
+                          'truncate rounded-md px-2 py-1 text-[10px] font-medium',
+                          item.badgeClassName ?? 'bg-muted text-foreground'
+                        )}
+                        title={item.title}
+                      >
+                        {item.title}
+                      </div>
+                    ))}
+                    {dayItems.length > 3 ? (
+                      <div className="text-center text-[10px] text-muted-foreground">
+                        +{dayItems.length - 3}
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
+
+                {inMonth && dayItems.length ? (
+                  <div className="mt-2 flex justify-center gap-1 lg:hidden">
+                    {dayItems.slice(0, 3).map((item) => (
+                      <span
+                        key={`${item.id}-${item.kind ?? 'item'}`}
+                        className={cn(
+                          'size-1.5 rounded-full',
+                          item.badgeClassName?.split(' ')[0] ?? 'bg-primary'
+                        )}
+                      />
+                    ))}
+                  </div>
+                ) : null}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-border/70 bg-card p-4">
+        {selectedDate && selectedItems.length ? (
+          <div className="space-y-3">
+            {selectedItems.map((item) => (
+              <div
+                key={`${item.id}-${item.kind ?? 'item'}`}
+                className="flex flex-col gap-3 rounded-xl border border-border/60 px-4 py-3 lg:flex-row lg:items-center lg:justify-between"
+              >
+                <div className="min-w-0 space-y-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <div className="truncate font-medium text-foreground">
+                      {item.title}
+                    </div>
+                    {item.statusLabel ? (
+                      <span
+                        className={cn(
+                          'rounded-full px-2 py-0.5 text-[11px] font-medium',
+                          item.badgeClassName ?? 'bg-muted text-foreground'
+                        )}
+                      >
+                        {item.statusLabel}
+                      </span>
+                    ) : null}
+                  </div>
+                  {item.subtitle ? (
+                    <div className="text-sm text-muted-foreground">
+                      {item.subtitle}
+                    </div>
+                  ) : null}
+                  {item.meta ? (
+                    <div className="text-xs text-muted-foreground">
+                      {item.meta}
+                    </div>
+                  ) : null}
+                </div>
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="cursor-pointer"
+                  onClick={() => onOpenItem(item)}
+                >
+                  {actionLabel}
+                </Button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-sm text-muted-foreground">{emptyLabel}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export type { CalendarItem as OperationsCalendarItem };