feat(web): договори — обзор (лещи време/CPV/кръстосано)

apps/web/app/components/ComboTrendChart.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import type { TrendGranularity, TrendPoint } from '@sigma/api-contract';
+import { monthYear } from '@sigma/shared';
+import { periodLabel, yearAxisTicks } from '../lib/trendAxis';
+
+// Reference oracle: ComboTrendChart's x-axis tick logic before it was extracted into
+// lib/trendAxis.ts (byte-identical to TrendChart's prior inline copy — that duplication is what
+// review thread ComboTrendChart.tsx:62 / TrendChart.tsx:36 flagged).
+function ticksBefore(points: TrendPoint[], granularity: TrendGranularity) {
+  const yearStart = granularity === 'year' ? null : granularity === 'quarter' ? '-Q1' : '-01';
+  return points
+    .map((p, i) => ({ i, year: p.period.slice(0, 4) }))
+    .filter(({ i }) => yearStart == null || points[i]!.period.endsWith(yearStart));
+}
+
+// Reference oracle: ComboTrendChart's own periodLabel before the move to lib/trendAxis.ts.
+function periodLabelBefore(period: string, granularity: TrendGranularity): string {
+  if (granularity === 'year') return period;
+  if (granularity === 'quarter') {
+    const [y, q] = period.split('-Q');
+    return `Q${q} ${y}`;
+  }
+  return monthYear(period);
+}
+
+const points: TrendPoint[] = [
+  { period: '2023-11', valueEur: 10, contracts: 2, partial: false },
+  { period: '2023-12', valueEur: 20, contracts: 3, partial: false },
+  { period: '2024-01', valueEur: 30, contracts: 4, partial: false },
+  { period: '2024-02', valueEur: 5, contracts: 1, partial: true },
+];
+
+describe('yearAxisTicks (shared helper used by ComboTrendChart)', () => {
+  it('matches ComboTrendChart’s prior inline tick logic exactly across granularities', () => {
+    for (const granularity of ['month', 'quarter', 'year'] as const) {
+      expect(yearAxisTicks(points, granularity)).toEqual(ticksBefore(points, granularity));
+    }
+  });
+});
+
+describe('periodLabel (shared helper used by ComboTrendChart’s hover tooltip)', () => {
+  it('matches ComboTrendChart’s prior inline periodLabel exactly for every granularity', () => {
+    expect(periodLabel('2024-02', 'month')).toBe(periodLabelBefore('2024-02', 'month'));
+    expect(periodLabel('2024-Q1', 'quarter')).toBe(periodLabelBefore('2024-Q1', 'quarter'));
+    expect(periodLabel('2024', 'year')).toBe(periodLabelBefore('2024', 'year'));
+  });
+});

apps/web/app/components/ComboTrendChart.test.tsx

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import type { TrendPoint } from '@sigma/api-contract';
+
+import { ComboTrendChart } from './ComboTrendChart';
+
+describe('ComboTrendChart', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  function comboLinePartial() {
+    return container.querySelector('path.combo-line-partial');
+  }
+
+  // Regression: the partial-is-always-last invariant can be violated upstream. When the
+  // partial period lands at index 0 instead of last, `hasPartial` must still detect it —
+  // `partialIdx > 0` treats index 0 as "no partial period" and silently renders the whole
+  // series as solid.
+  it('detects a partial period at index 0 and renders the dashed-partial path', () => {
+    const points: TrendPoint[] = [
+      { period: '2024-01', valueEur: 5, contracts: 1, partial: true },
+      { period: '2024-02', valueEur: 10, contracts: 2, partial: false },
+      { period: '2024-03', valueEur: 20, contracts: 3, partial: false },
+    ];
+    act(() => {
+      root.render(<ComboTrendChart points={points} granularity="month" />);
+    });
+    expect(comboLinePartial()).not.toBeNull();
+  });
+
+  it('detects a partial period at the last index (the normal case)', () => {
+    const points: TrendPoint[] = [
+      { period: '2024-01', valueEur: 5, contracts: 1, partial: false },
+      { period: '2024-02', valueEur: 10, contracts: 2, partial: false },
+      { period: '2024-03', valueEur: 20, contracts: 3, partial: true },
+    ];
+    act(() => {
+      root.render(<ComboTrendChart points={points} granularity="month" />);
+    });
+    expect(comboLinePartial()).not.toBeNull();
+  });
+
+  it('renders no dashed-partial path when nothing is partial', () => {
+    const points: TrendPoint[] = [
+      { period: '2024-01', valueEur: 5, contracts: 1, partial: false },
+      { period: '2024-02', valueEur: 10, contracts: 2, partial: false },
+    ];
+    act(() => {
+      root.render(<ComboTrendChart points={points} granularity="month" />);
+    });
+    expect(comboLinePartial()).toBeNull();
+  });
+});

apps/web/app/components/ComboTrendChart.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react';
+import type { TrendGranularity, TrendPoint } from '@sigma/api-contract';
+import { count, money } from '@sigma/shared';
+import { periodLabel, yearAxisTicks } from '../lib/trendAxis';
+
+// Bar + line combo for the contracts overview (/trends): bars carry the contract count, the ink line
+// the € volume. Server-rendered SVG like TrendChart; the only client behavior is the hover tooltip
+// (React state after hydration — SSR renders the chart without it, so no-JS still gets the picture).
+// The accessible data lives in the year cards next to the chart, matching the TrendChart pattern.
+
+const W = 1000;
+const H = 300;
+const TOP = 10;
+const BOT = 272;
+const PAD = 8;
+
+export function ComboTrendChart({
+  points,
+  granularity,
+  cssHeight = 240,
+  interactive = true,
+  ariaLabel = 'Брой договори и € обем във времето',
+}: {
+  points: TrendPoint[];
+  granularity: TrendGranularity;
+  cssHeight?: number;
+  interactive?: boolean;
+  ariaLabel?: string;
+}) {
+  const [hover, setHover] = useState<number | null>(null);
+  if (points.length < 2) return null;
+
+  const n = points.length;
+  const vMax = Math.max(1, ...points.map((p) => p.valueEur)) * 1.12;
+  const cMax = Math.max(1, ...points.map((p) => p.contracts));
+  const x = (i: number) => (n > 1 ? PAD + (i * (W - 2 * PAD)) / (n - 1) : W / 2);
+  const yV = (v: number) => BOT - (v / vMax) * (BOT - TOP);
+  const yC = (c: number) => BOT - (c / cMax) * (BOT - TOP) * 0.62;
+  const bw = Math.max(2, ((W - 2 * PAD) / n) * 0.66);
+
+  // Final period is partial (still filling): dashed line tail + faded bar, like TrendChart.
+  // findIndex returns -1 when no point is partial — that's the canonical "none" sentinel here,
+  // not 0, so `hasPartial` must not rely on index truthiness (a partial period at index 0 is a
+  // real partial period, not "no partial period").
+  const partialIdx = points.findIndex((p) => p.partial);
+  const hasPartial = partialIdx !== -1;
+  if (import.meta.env.DEV && partialIdx === 0 && n > 1) {
+    console.warn(
+      `ComboTrendChart: partial period at index 0 of ${n} — the partial-is-always-last ` +
+        'invariant is broken upstream; the chart will render with no solid segment before it.',
+    );
+  } else if (import.meta.env.DEV && partialIdx > 0 && partialIdx !== n - 1) {
+    console.warn(
+      `ComboTrendChart: partial period at index ${partialIdx} of ${n} is not last — the ` +
+        'partial-is-always-last invariant is broken upstream; the dashed tail will connect from the wrong point.',
+    );
+  }
+  const solidEnd = hasPartial ? partialIdx - 1 : n - 1;
+  const xy = (i: number) => `${x(i).toFixed(1)} ${yV(points[i]!.valueEur).toFixed(1)}`;
+  const line = points
+    .slice(0, solidEnd + 1)
+    .map((_p, i) => `${i ? 'L' : 'M'}${xy(i)}`)
+    .join(' ');
+  const dashed = hasPartial && solidEnd >= 0 ? `M${xy(solidEnd)} L${xy(partialIdx)}` : '';
+
+  const ticks = yearAxisTicks(points, granularity);
+
+  const hp = hover != null ? points[hover] : null;
+
+  return (
+    <div className="combo-chart" onMouseLeave={() => interactive && setHover(null)}>
+      <svg
+        viewBox={`0 0 ${W} ${H}`}
+        preserveAspectRatio="none"
+        style={{ display: 'block', width: '100%', height: cssHeight }}
+        role="img"
+        aria-label={ariaLabel}
+      >
+        {[0, 1 / 3, 2 / 3, 1].map((f) => (
+          <line
+            key={f}
+            className="combo-grid"
+            x1={0}
+            y1={yV(vMax * f).toFixed(1)}
+            x2={W}
+            y2={yV(vMax * f).toFixed(1)}
+            vectorEffect="non-scaling-stroke"
+          />
+        ))}
+        {points.map((p, i) => (
+          <rect
+            key={p.period}
+            className={`combo-bar${hover === i ? ' is-hover' : ''}${p.partial ? ' is-partial' : ''}`}
+            x={(x(i) - bw / 2).toFixed(1)}
+            y={yC(p.contracts).toFixed(1)}
+            width={bw.toFixed(1)}
+            height={(BOT - yC(p.contracts)).toFixed(1)}
+            onMouseEnter={interactive ? () => setHover(i) : undefined}
+          />
+        ))}
+        <path className="combo-line" d={line} vectorEffect="non-scaling-stroke" />
+        {hasPartial && (
+          <path className="combo-line-partial" d={dashed} vectorEffect="non-scaling-stroke" />
+        )}
+        {hp && hover != null && (
+          <>
+            <line
+              className="combo-cursor"
+              x1={x(hover).toFixed(1)}
+              y1={6}
+              x2={x(hover).toFixed(1)}
+              y2={BOT}
+              vectorEffect="non-scaling-stroke"
+            />
+            <circle
+              className="combo-dot"
+              cx={x(hover).toFixed(1)}
+              cy={yV(hp.valueEur).toFixed(1)}
+              r={4}
+              vectorEffect="non-scaling-stroke"
+            />
+          </>
+        )}
+      </svg>
+      <div className="combo-xlab" aria-hidden="true">
+        {ticks.map((t) => (
+          <span key={t.i}>{t.year}</span>
+        ))}
+      </div>
+      {hp && hover != null && (
+        <div
+          className="combo-tip"
+          role="status"
+          style={{
+            left: `${((x(hover) / W) * 100).toFixed(1)}%`,
+            top: (yV(hp.valueEur) / H) * cssHeight - 4,
+          }}
+        >
+          <div className="combo-tip-label">
+            {periodLabel(hp.period, granularity)}
+            {hp.partial ? ' · частично' : ''}
+          </div>
+          <div className="combo-tip-row">
+            <span>€ обем</span>
+            <strong>{money(hp.valueEur)}</strong>
+          </div>
+          <div className="combo-tip-row">
+            <span>договори</span>
+            <strong>{count(hp.contracts)}</strong>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/app/components/FullscreenButton.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Toggle the native Fullscreen API on a container ref. SSR-safe: the listener and the
+ * `document` reads only run in the browser effect. `requestFullscreen` is feature-detected,
+ * so the button no-ops gracefully where the API is unavailable.
+ */
+export function useFullscreen<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const onChange = () => setIsFullscreen(document.fullscreenElement === ref.current);
+    document.addEventListener('fullscreenchange', onChange);
+    return () => document.removeEventListener('fullscreenchange', onChange);
+  }, []);
+
+  const toggle = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (document.fullscreenElement) {
+      document.exitFullscreen?.();
+    } else {
+      el.requestFullscreen?.().catch(() => {});
+    }
+  }, []);
+
+  return { ref, isFullscreen, toggle };
+}
+
+export function FullscreenButton({ active, onToggle }: { active: boolean; onToggle: () => void }) {
+  return (
+    <button
+      type="button"
+      className="fs-btn"
+      onClick={onToggle}
+      aria-pressed={active}
+      aria-label={active ? 'Изход от цял екран' : 'Разгледай графиката на цял екран'}
+      title={active ? 'Изход от цял екран' : 'На цял екран'}
+    >
+      <svg
+        aria-hidden="true"
+        width="13"
+        height="13"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        {active ? (
+          <>
+            <path d="M6 2v4H2" />
+            <path d="M10 2v4h4" />
+            <path d="M6 14v-4H2" />
+            <path d="M10 14v-4h4" />
+          </>
+        ) : (
+          <>
+            <path d="M2 6V2h4" />
+            <path d="M14 6V2h-4" />
+            <path d="M2 10v4h4" />
+            <path d="M14 10v4h-4" />
+          </>
+        )}
+      </svg>
+      <span>{active ? 'Изход' : 'Цял екран'}</span>
+    </button>
+  );
+}