EU Regulatory Monitor Dashboard

// lib/moonlit.ts
const BASE_URL = "https://api.moonlit.ai/v1.1";
const API_KEY = process.env.NEXT_PUBLIC_MOONLIT_API_KEY!;

const headers = {
  "Ocp-Apim-Subscription-Key": API_KEY,
  "Content-Type": "application/json",
};

export async function getJurisdictions() {
  const res = await fetch(`${BASE_URL}/search/filters/jurisdictions_portals`, { headers });
  return res.json();
}

export async function getFieldsOfLaw() {
  const res = await fetch(`${BASE_URL}/search/filters/trees`, { headers });
  return res.json();
}

export async function getDocumentTypes() {
  const res = await fetch(`${BASE_URL}/search/filters/documenttypes`, { headers });
  return res.json();
}

export async function searchDocuments(params: {
  query: string;
  jurisdictions?: string[];
  documentTypes?: string[];
  fieldsOfLaw?: string[];
  from_date?: string;
  sort_type?: number;
  page?: number;
}) {
  const res = await fetch(`${BASE_URL}/search/hybrid_search`, {
    method: "POST",
    headers,
    body: JSON.stringify({ ...params, num_results: 20, facets: true }),
  });
  return res.json();
}

// components/FilterPanel.tsx
"use client";

import { useEffect, useState } from "react";
import { getJurisdictions, getFieldsOfLaw } from "@/lib/moonlit";

interface FilterPanelProps {
  onFilterChange: (filters: Record<string, string[]>) => void;
}

export function FilterPanel({ onFilterChange }: FilterPanelProps) {
  const [jurisdictions, setJurisdictions] = useState([]);
  const [fields, setFields] = useState([]);
  const [selected, setSelected] = useState<Record<string, string[]>>({
    jurisdictions: ["European Union"],
    documentTypes: ["legislation", "case_law"],
    fieldsOfLaw: [],
  });

  useEffect(() => {
    getJurisdictions().then((d) => setJurisdictions(d));
    getFieldsOfLaw().then((d) => setFields(d.FieldsOfLaw));
  }, []);

  const toggle = (key: string, value: string) => {
    setSelected((prev) => {
      const arr = prev[key] || [];
      const next = arr.includes(value)
        ? arr.filter((v) => v !== value)
        : [...arr, value];
      const updated = { ...prev, [key]: next };
      onFilterChange(updated);
      return updated;
    });
  };

  return (
    <aside className="w-64 space-y-6 p-4 border-r">
      <div>
        <h3 className="font-semibold mb-2">Jurisdictions</h3>
        {jurisdictions.map((j: any) => (
          <label key={j.name} className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={selected.jurisdictions.includes(j.name)}
              onChange={() => toggle("jurisdictions", j.name)}
            />
            {j.name} ({j.count})
          </label>
        ))}
      </div>
      {/* Similar checkbox groups for documentTypes and fieldsOfLaw */}
    </aside>
  );
}

// components/ResultsDashboard.tsx
"use client";

import { searchDocuments } from "@/lib/moonlit";
import { useEffect, useState } from "react";

interface Props {
  query: string;
  filters: Record<string, string[]>;
}

export function ResultsDashboard({ query, filters }: Props) {
  const [data, setData] = useState<any>(null);
  const [sortField, setSortField] = useState<string>("score");

  useEffect(() => {
    if (!query) return;
    searchDocuments({
      query,
      jurisdictions: filters.jurisdictions,
      documentTypes: filters.documentTypes,
      fieldsOfLaw: filters.fieldsOfLaw,
      sort_type: sortField === "date" ? 1 : 0,
    }).then(setData);
  }, [query, filters, sortField]);

  if (!data) return <p>Enter a query to begin monitoring.</p>;

  return (
    <div className="flex-1 p-6">
      {/* Facet summary cards */}
      <div className="grid grid-cols-2 gap-4 mb-6">
        <div className="border rounded p-4">
          <h4 className="font-semibold mb-2">By Jurisdiction</h4>
          {Object.entries(data.facets?.jurisdictions || {}).map(([k, v]) => (
            <div key={k} className="flex justify-between text-sm">
              <span>{k}</span>
              <span className="font-mono">{v as number}</span>
            </div>
          ))}
        </div>
        <div className="border rounded p-4">
          <h4 className="font-semibold mb-2">By Document Type</h4>
          {Object.entries(data.facets?.document_types || {}).map(([k, v]) => (
            <div key={k} className="flex justify-between text-sm">
              <span>{k}</span>
              <span className="font-mono">{v as number}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Results table */}
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b text-left">
            <th className="py-2">ECLI</th>
            <th>Source</th>
            <th className="cursor-pointer" onClick={() => setSortField("date")}>
              Date {sortField === "date" ? "(sorted)" : ""}
            </th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          {data.result?.results?.map((r: any) => (
            <tr key={r.identifier} className="border-b hover:bg-gray-50">
              <td className="py-2 font-mono text-xs">{r.identifier}</td>
              <td>{r.source}</td>
              <td>{r.date}</td>
              <td className="max-w-md truncate">{r.title}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}