lytx 0.3.0

package/src/app/components/reports/useDashboardToolbarControls.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import {
+  DatePicker,
+  FilterModal,
+  HelpTooltip,
+  SpinnerIcon,
+  type DashboardFilters,
+  type DashboardNotice,
+  type DateRange,
+} from "@/app/components/charts/ChartComponents";
+
+type UseDashboardToolbarControlsParams = {
+  filters: DashboardFilters;
+  setFilters: React.Dispatch<React.SetStateAction<DashboardFilters>>;
+  timezone: string;
+  onNotify?: (notice: DashboardNotice) => void;
+  isUpdating?: boolean;
+  deviceTypeOptions?: string[];
+  countryOptions?: string[];
+  cityOptions?: string[];
+  regionOptions?: string[];
+  sourceOptions?: string[];
+  pageUrlOptions?: string[];
+  eventNameOptions?: string[];
+};
+
+type DashboardToolbarControlsResult = {
+  controls: ReactNode;
+  footer: ReactNode;
+  modal: ReactNode;
+};
+
+const getDateRangeDisplay = (dateRange: DateRange) => {
+  if (!dateRange.start || !dateRange.end) {
+    return "Loading dates...";
+  }
+  if (dateRange.preset) {
+    return dateRange.preset;
+  }
+  return `${dateRange.start} to ${dateRange.end}`;
+};
+
+export function useDashboardToolbarControls({
+  filters,
+  setFilters,
+  timezone,
+  onNotify,
+  isUpdating = false,
+  deviceTypeOptions = [],
+  countryOptions = [],
+  cityOptions = [],
+  regionOptions = [],
+  sourceOptions = [],
+  pageUrlOptions = [],
+  eventNameOptions = [],
+}: UseDashboardToolbarControlsParams): DashboardToolbarControlsResult {
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+
+  const handleFiltersChange = useCallback(
+    (nextFilters: DashboardFilters) => {
+      setFilters(nextFilters);
+
+      const hasAnyFilter =
+        !!nextFilters.deviceType ||
+        !!nextFilters.country ||
+        !!nextFilters.city ||
+        !!nextFilters.region ||
+        !!nextFilters.source ||
+        !!nextFilters.pageUrl ||
+        !!nextFilters.eventName;
+
+      onNotify?.({
+        type: "info",
+        message: hasAnyFilter ? "Filters updated." : "All filters cleared.",
+      });
+    },
+    [onNotify, setFilters],
+  );
+
+  const handleDateRangeChange = useCallback(
+    (nextDateRange: DateRange) => {
+      setFilters((prev) => ({ ...prev, dateRange: nextDateRange }));
+      onNotify?.({ type: "info", message: "Date range updated." });
+    },
+    [onNotify, setFilters],
+  );
+
+  const controls = useMemo<ReactNode>(
+    () => (
+      <>
+        <button
+          type="button"
+          onClick={() => setIsFilterModalOpen(true)}
+          aria-haspopup="dialog"
+          aria-expanded={isFilterModalOpen}
+          className="bg-(--theme-bg-secondary) hover:bg-(--theme-bg-tertiary) text-(--theme-text-primary) font-medium h-9 sm:h-auto px-2.5 sm:py-2 sm:px-4 text-sm rounded-md border border-(--theme-border-primary) transition-colors whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-(--theme-border-secondary)"
+        >
+          Filter
+        </button>
+
+        <div className="relative flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setIsDatePickerOpen((prev) => !prev)}
+            aria-haspopup="dialog"
+            aria-expanded={isDatePickerOpen}
+            className="bg-(--theme-bg-secondary) hover:bg-(--theme-bg-tertiary) text-(--theme-text-primary) font-medium h-9 sm:h-auto px-2.5 sm:py-2 sm:px-4 text-sm rounded-md border border-(--theme-border-primary) cursor-pointer transition-colors flex items-center gap-1.5 sm:gap-2 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-(--theme-border-secondary)"
+          >
+            <span className="truncate max-w-32 sm:max-w-56">{getDateRangeDisplay(filters.dateRange)}</span>
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              className="w-4 h-4 shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+
+          <div className="hidden sm:flex">
+            <HelpTooltip text="Change the reporting period. Presets update immediately; custom dates apply when the picker closes." />
+          </div>
+
+          <DatePicker
+            dateRange={filters.dateRange}
+            onDateRangeChange={handleDateRangeChange}
+            isOpen={isDatePickerOpen}
+            onToggle={() => setIsDatePickerOpen((prev) => !prev)}
+            timezone={timezone}
+          />
+        </div>
+      </>
+    ),
+    [filters.dateRange, handleDateRangeChange, isDatePickerOpen, isFilterModalOpen, timezone],
+  );
+
+  const footer = useMemo<ReactNode>(
+    () => {
+      const chips: Array<{ label: string; key: keyof DashboardFilters }> = [];
+      if (filters.deviceType) chips.push({ label: `Device: ${filters.deviceType}`, key: "deviceType" });
+      if (filters.country) chips.push({ label: `Country: ${filters.country}`, key: "country" });
+      if (filters.region) chips.push({ label: `Region: ${filters.region}`, key: "region" });
+      if (filters.city) chips.push({ label: `City: ${filters.city}`, key: "city" });
+      if (filters.source) chips.push({ label: `Source: ${filters.source}`, key: "source" });
+      if (filters.pageUrl) chips.push({ label: `Page: ${filters.pageUrl}`, key: "pageUrl" });
+      if (filters.eventName) chips.push({ label: `Event: ${filters.eventName}`, key: "eventName" });
+
+      return (
+        <>
+          {chips.length > 0 ? (
+            <div className="flex flex-wrap items-center gap-1.5 mt-2">
+              {chips.map((chip) => (
+                <span
+                  key={chip.key}
+                  className="inline-flex items-center gap-1 rounded-full bg-(--theme-bg-tertiary) border border-(--theme-border-primary) px-2.5 py-0.5 text-xs text-(--theme-text-primary)"
+                >
+                  {chip.label}
+                  <button
+                    type="button"
+                    onClick={() => setFilters((prev) => ({ ...prev, [chip.key]: undefined }))}
+                    className="ml-0.5 rounded-full p-0.5 hover:bg-(--theme-bg-secondary) transition-colors focus:outline-none focus:ring-1 focus:ring-(--theme-border-secondary)"
+                    aria-label={`Remove ${chip.label} filter`}
+                  >
+                    <svg aria-hidden="true" className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </span>
+              ))}
+              <button
+                type="button"
+                onClick={() =>
+                  setFilters((prev) => ({
+                    dateRange: prev.dateRange,
+                    siteId: prev.siteId,
+                  }))
+                }
+                className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs text-(--theme-text-secondary) hover:text-(--theme-text-primary) transition-colors focus:outline-none focus:ring-1 focus:ring-(--theme-border-secondary)"
+              >
+                Clear all
+              </button>
+            </div>
+          ) : null}
+
+          {isUpdating ? (
+            <div className="flex items-center gap-2 mt-2 text-xs text-(--theme-text-secondary)">
+              <SpinnerIcon className="w-3 h-3 animate-spin" />
+              <span>Updating dashboard...</span>
+            </div>
+          ) : null}
+        </>
+      );
+    },
+    [filters, isUpdating, setFilters],
+  );
+
+  const modal = useMemo<ReactNode>(
+    () => (
+      <FilterModal
+        filters={filters}
+        onFiltersChange={handleFiltersChange}
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        onNotify={(notice) => onNotify?.(notice)}
+        deviceTypeOptions={deviceTypeOptions}
+        countryOptions={countryOptions}
+        cityOptions={cityOptions}
+        regionOptions={regionOptions}
+        sourceOptions={sourceOptions}
+        pageUrlOptions={pageUrlOptions}
+        eventNameOptions={eventNameOptions}
+      />
+    ),
+    [
+      cityOptions,
+      countryOptions,
+      deviceTypeOptions,
+      eventNameOptions,
+      filters,
+      handleFiltersChange,
+      isFilterModalOpen,
+      onNotify,
+      pageUrlOptions,
+      regionOptions,
+      sourceOptions,
+    ],
+  );
+
+  return { controls, footer, modal };
+}

package/src/app/components/ui/AlertBanner.tsx

@@ -0,0 +1,101 @@
+type AlertTone = "success" | "error" | "info" | "warning";
+
+type AlertToneConfig = {
+  label: string;
+  borderClass: string;
+  bgClass: string;
+  textClass: string;
+};
+
+type AlertOverrides = Partial<AlertToneConfig>;
+
+type AlertBannerProps = {
+  tone?: AlertTone;
+  title?: string;
+  message: string;
+  onDismiss?: () => void;
+  className?: string;
+  accent?: AlertOverrides;
+};
+
+const toneStyles: Record<AlertTone, AlertToneConfig> = {
+  success: {
+    label: "Success",
+    borderClass: "border-emerald-500/60",
+    bgClass: "bg-emerald-500/10",
+    textClass: "text-emerald-400",
+  },
+  error: {
+    label: "Error",
+    borderClass: "border-red-500/70",
+    bgClass: "bg-red-500/10",
+    textClass: "text-red-400",
+  },
+  warning: {
+    label: "Warning",
+    borderClass: "border-amber-500/60",
+    bgClass: "bg-amber-500/10",
+    textClass: "text-amber-400",
+  },
+  info: {
+    label: "Info",
+    borderClass: "border-[var(--theme-border-primary)]",
+    bgClass: "bg-[var(--theme-bg-secondary)]",
+    textClass: "text-[var(--theme-text-primary)]",
+  },
+};
+
+export function AlertBanner({
+  tone = "info",
+  title,
+  message,
+  onDismiss,
+  className,
+  accent,
+}: AlertBannerProps) {
+  const base = toneStyles[tone];
+  const label = title ?? accent?.label ?? base.label;
+  const borderClass = accent?.borderClass ?? base.borderClass;
+  const bgClass = accent?.bgClass ?? base.bgClass;
+  const textClass = accent?.textClass ?? base.textClass;
+
+  return (
+    <div
+      role="status"
+      className={`flex items-start justify-between gap-4 p-4 rounded-md border ${borderClass} ${bgClass} ${className ?? ""}`}
+    >
+      <div className="flex-1">
+        <p className={`text-sm font-semibold ${textClass}`}>{label}</p>
+        <p className="text-sm text-[var(--theme-text-secondary)]">
+          {message}
+        </p>
+      </div>
+      {onDismiss ? (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="text-[var(--theme-text-secondary)] hover:text-[var(--theme-text-primary)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--theme-border-secondary)] rounded"
+          aria-label="Dismiss notification"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            className="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export type { AlertTone, AlertBannerProps };

package/src/app/components/ui/Button.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+	size?: 'sm' | 'md' | 'lg';
+	isLoading?: boolean;
+	children: React.ReactNode;
+}
+
+const buttonVariants = {
+	primary: 'bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white border-transparent',
+	secondary: 'bg-[var(--color-secondary)] hover:bg-[var(--color-secondary-hover)] text-white border-transparent',
+	outline: 'bg-transparent hover:bg-[var(--theme-bg-secondary)] text-[var(--theme-text-primary)] border-[var(--theme-border-primary)]',
+	ghost: 'bg-transparent hover:bg-[var(--theme-bg-secondary)] text-[var(--theme-text-primary)] border-transparent',
+	danger: 'bg-[var(--color-danger)] hover:bg-[var(--color-danger-hover)] text-white border-transparent'
+};
+
+const buttonSizes = {
+	sm: 'px-3 py-1.5 text-sm',
+	md: 'px-4 py-2 text-base',
+	lg: 'px-6 py-3 text-lg'
+};
+
+export const Button: React.FC<ButtonProps> = ({
+	variant = 'primary',
+	size = 'md',
+	isLoading = false,
+	disabled,
+	className = '',
+	children,
+	...props
+}) => {
+	const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed';
+
+	const variantClasses = buttonVariants[variant];
+	const sizeClasses = buttonSizes[size];
+
+	const combinedClasses = `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`.trim();
+
+	return (
+		<button
+			className={combinedClasses}
+			disabled={disabled || isLoading}
+			{...props}
+		>
+			{isLoading && (
+				<svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+					<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+					<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+				</svg>
+			)}
+			{children}
+		</button>
+	);
+};

package/src/app/components/ui/Card.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+export interface CardProps {
+	children: React.ReactNode;
+	className?: string;
+	padding?: 'none' | 'sm' | 'md' | 'lg';
+	shadow?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const paddingVariants = {
+	none: '',
+	sm: 'p-3',
+	md: 'p-4',
+	lg: 'p-6'
+};
+
+const shadowVariants = {
+	none: '',
+	sm: 'shadow-[var(--shadow-sm)]',
+	md: 'shadow-[var(--shadow-md)]',
+	lg: 'shadow-[var(--shadow-lg)]'
+};
+
+export const Card: React.FC<CardProps> = ({
+	children,
+	className = '',
+	padding = 'md',
+	shadow = 'sm'
+}) => {
+	const baseClasses = 'bg-[var(--theme-card-bg)] border border-[var(--theme-card-border)] rounded-lg';
+	const paddingClasses = paddingVariants[padding];
+	const shadowClasses = shadowVariants[shadow];
+	
+	const combinedClasses = `${baseClasses} ${paddingClasses} ${shadowClasses} ${className}`.trim();
+
+	return (
+		<div className={combinedClasses}>
+			{children}
+		</div>
+	);
+};
+
+export interface CardHeaderProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export const CardHeader: React.FC<CardHeaderProps> = ({ children, className = '' }) => {
+	return (
+		<div className={`border-b border-[var(--theme-border-primary)] pb-3 mb-4 ${className}`}>
+			{children}
+		</div>
+	);
+};
+
+export interface CardTitleProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export const CardTitle: React.FC<CardTitleProps> = ({ children, className = '' }) => {
+	return (
+		<h3 className={`text-lg font-semibold text-[var(--theme-text-primary)] ${className}`}>
+			{children}
+		</h3>
+	);
+};
+
+export interface CardContentProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export const CardContent: React.FC<CardContentProps> = ({ children, className = '' }) => {
+	return (
+		<div className={className}>
+			{children}
+		</div>
+	);
+};

package/src/app/components/ui/Input.tsx

@@ -0,0 +1,72 @@
+import React, { useId, forwardRef } from "react";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  variant?: "default" | "filled";
+  inputSize?: "sm" | "md" | "lg";
+}
+
+const inputSizes = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-4 py-3 text-lg",
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((
+  {
+    label,
+    error,
+    helperText,
+    variant = "default",
+    inputSize = "md",
+    className = "",
+    id,
+    ...props
+  },
+  ref) => {
+  const generatedId = useId();
+  const inputId = id || generatedId;
+  const baseClasses =
+    "w-full rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed";
+
+  const variantClasses =
+    variant === "filled"
+      ? "bg-[var(--theme-bg-secondary)] border-transparent"
+      : "bg-[var(--theme-input-bg)] border-[var(--theme-input-border)]";
+
+  const errorClasses = error
+    ? "border-[var(--color-danger)] focus:ring-[var(--color-danger)] focus:border-[var(--color-danger)]"
+    : "";
+
+  const sizeClasses = inputSizes[inputSize];
+
+  const combinedClasses =
+    `${baseClasses} ${variantClasses} ${errorClasses} ${sizeClasses} ${className}`.trim();
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="block text-sm font-medium text-[var(--theme-text-primary)] mb-2"
+        >
+          {label}
+        </label>
+      )}
+      <input ref={ref} id={inputId} className={combinedClasses} {...props} />
+      {error && (
+        <p className="mt-1 text-sm text-[var(--color-danger)]">{error}</p>
+      )}
+      {helperText && !error && (
+        <p className="mt-1 text-sm text-[var(--theme-text-secondary)]">
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+});
+//For development only
+Input.displayName = "Input";

package/src/app/components/ui/Link.tsx

@@ -0,0 +1,23 @@
+"use client";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+
+interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  href: string;
+  children: ReactNode;
+}
+
+/**
+ * A semantic Link component for internal navigation.
+ * View transitions are handled globally in client.tsx for all navigation.
+ */
+export function Link({
+  href,
+  children,
+  ...props
+}: LinkProps) {
+  return (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  );
+}