merge: resolve trend-charts conflicts with export and tracked endpoints

Keeps both analytics/trends endpoint and export endpoint from main.
2026-03-26 12:12:09 +00:00
parent 52972bbff0 f0edc5a3ae
commit 03f8f7fa79
28 changed files with 1243 additions and 72 deletions
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { analysisApi } from '../api/client';
-import { Search, CheckCircle, AlertCircle, Clock, FileText } from 'lucide-react';
+import { analysisApi, exportApi } from '../api/client';
+import { Search, CheckCircle, AlertCircle, Clock, FileText, Download } from 'lucide-react';
 import type { CompanyAnalysis } from '../types';

 export function Analysis() {
@@ -106,9 +106,18 @@ export function Analysis() {
          {/* Analysis Content */}
          {result.success && result.analysis && (
            <div className="bg-bg-card/60 backdrop-blur-lg border border-primary/15 rounded-2xl p-6">
-              <h3 className="text-lg font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-4">
-                AI Analysis Results
-              </h3>
+              <div className="flex items-center justify-between border-b-2 border-primary/30 pb-2 mb-4">
+                <h3 className="text-lg font-semibold text-text-primary">
+                  AI Analysis Results
+                </h3>
+                <button
+                  onClick={() => exportApi.exportCsv(result.company_name)}
+                  className="flex items-center gap-2 text-sm bg-primary/20 hover:bg-primary/30 text-primary font-medium px-3 py-1.5 rounded-lg transition-colors"
+                >
+                  <Download size={14} />
+                  Export CSV
+                </button>
+              </div>
              <div className="prose prose-invert max-w-none">
                <div className="text-text-primary whitespace-pre-wrap leading-relaxed">
                  {result.analysis}
@@ -9,7 +9,7 @@ const COLORS = ['#6366f1', '#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'
 export function AnalyticsPage() {
  const [days, setDays] = useState(30);

-  const { data, isLoading, isError } = useQuery({
+  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ['analytics', days],
    queryFn: () => analyticsApi.getAnalytics(days),
  });
@@ -21,8 +21,31 @@ export function AnalyticsPage() {

  if (isLoading) {
    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-2">
+            Analytics Dashboard
+          </h2>
+          <p className="text-text-secondary">Loading analytics data...</p>
+        </div>
+        {/* Skeleton cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="bg-gradient-to-br from-primary/10 to-secondary/10 border border-primary/20 rounded-xl p-5 text-center animate-pulse">
+              <div className="h-9 w-16 bg-primary/20 rounded mx-auto mb-2" />
+              <div className="h-4 w-24 bg-primary/10 rounded mx-auto" />
+            </div>
+          ))}
+        </div>
+        {/* Skeleton charts */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {[1, 2].map((i) => (
+            <div key={i} className="bg-bg-card/60 border border-primary/15 rounded-2xl p-6 animate-pulse">
+              <div className="h-5 w-40 bg-primary/20 rounded mb-4" />
+              <div className="h-[300px] bg-primary/5 rounded" />
+            </div>
+          ))}
+        </div>
      </div>
    );
  }
@@ -38,15 +61,18 @@ export function AnalyticsPage() {
        <div className="bg-gradient-to-br from-primary/10 to-secondary/5 border border-primary/20 rounded-xl p-6">
          <div className="flex items-center gap-3 text-warning mb-2">
            <Database size={24} />
-            <span className="font-semibold">Database Not Connected</span>
+            <span className="font-semibold">Unable to Load Analytics</span>
          </div>
          <p className="text-text-secondary">
-            Set <code className="bg-bg-card px-2 py-1 rounded">USE_DATABASE=true</code> in your .env file to enable analytics tracking.
+            Could not connect to the analytics database. Ensure PostgreSQL is running and
+            <code className="bg-bg-card px-2 py-1 rounded mx-1">DATABASE_URL</code> is configured correctly.
          </p>
-        </div>
-        <div className="flex items-center gap-2 bg-secondary/10 border border-secondary/20 text-secondary rounded-xl px-4 py-3">
-          <AlertCircle size={18} />
-          <span>Analytics features require storing analysis results in PostgreSQL for historical tracking.</span>
+          <button
+            onClick={() => refetch()}
+            className="mt-3 text-sm bg-primary/20 hover:bg-primary/30 text-primary font-medium px-4 py-2 rounded-lg transition-colors"
+          >
+            Retry
+          </button>
        </div>
      </div>
    );
@@ -114,9 +114,21 @@ export function Batch() {

      {/* Error */}
      {mutation.isError && (
-        <div className="flex items-center gap-2 bg-error/10 border border-error/20 text-error rounded-xl px-4 py-3">
-          <AlertCircle size={18} />
-          <span>Batch analysis failed. Please try again.</span>
+        <div className="bg-error/10 border border-error/20 rounded-xl px-4 py-3">
+          <div className="flex items-center gap-2 text-error">
+            <AlertCircle size={18} />
+            <span className="font-semibold">Batch analysis failed</span>
+          </div>
+          <p className="text-text-secondary text-sm mt-1 ml-7">
+            {mutation.error instanceof Error ? mutation.error.message : 'An unexpected error occurred.'}
+            {' '}Check your connection and try again.
+          </p>
+          <button
+            onClick={() => mutation.reset()}
+            className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline"
+          >
+            Dismiss
+          </button>
        </div>
      )}

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { analysisApi } from '../api/client';
+import { GitCompareArrows, AlertCircle, FileText, Clock } from 'lucide-react';
+import type { CompanyAnalysis } from '../types';
+
+function CompanyPanel({ data, isLoading, isError }: { data?: CompanyAnalysis; isLoading: boolean; isError: boolean }) {
+  if (isLoading) {
+    return (
+      <div className="bg-bg-card/60 border border-primary/15 rounded-2xl p-6 animate-pulse">
+        <div className="h-6 w-32 bg-primary/20 rounded mb-4" />
+        <div className="space-y-3">
+          <div className="h-4 bg-primary/10 rounded w-full" />
+          <div className="h-4 bg-primary/10 rounded w-3/4" />
+          <div className="h-4 bg-primary/10 rounded w-5/6" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="bg-error/10 border border-error/20 rounded-2xl p-6">
+        <div className="flex items-center gap-2 text-error">
+          <AlertCircle size={18} />
+          <span>Failed to load analysis. Check the company name and try again.</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <div className="bg-bg-card/60 border border-primary/15 rounded-2xl p-6 space-y-4">
+      <h3 className="text-lg font-bold text-text-primary border-b-2 border-primary/30 pb-2">
+        {data.company_name.toUpperCase()}
+      </h3>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="bg-primary/10 rounded-lg p-3 text-center">
+          <FileText className="mx-auto mb-1 text-primary" size={18} />
+          <div className="text-xl font-bold text-text-primary">{data.patent_count}</div>
+          <div className="text-xs text-text-secondary uppercase">Patents</div>
+        </div>
+        <div className="bg-primary/10 rounded-lg p-3 text-center">
+          <Clock className="mx-auto mb-1 text-primary" size={18} />
+          <div className="text-sm font-medium text-text-primary">
+            {new Date(data.timestamp).toLocaleDateString()}
+          </div>
+          <div className="text-xs text-text-secondary uppercase">Analyzed</div>
+        </div>
+      </div>
+
+      {data.success && data.analysis ? (
+        <div className="text-text-primary whitespace-pre-wrap leading-relaxed text-sm">
+          {data.analysis}
+        </div>
+      ) : (
+        <div className="text-error text-sm">{data.error || 'Analysis not available'}</div>
+      )}
+    </div>
+  );
+}
+
+export function Compare() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [companyA, setCompanyA] = useState(searchParams.get('a') || '');
+  const [companyB, setCompanyB] = useState(searchParams.get('b') || '');
+
+  const queryA = searchParams.get('a') || '';
+  const queryB = searchParams.get('b') || '';
+
+  const resultA = useQuery({
+    queryKey: ['analyze', queryA],
+    queryFn: () => analysisApi.analyzeCompany(queryA),
+    enabled: !!queryA,
+  });
+
+  const resultB = useQuery({
+    queryKey: ['analyze', queryB],
+    queryFn: () => analysisApi.analyzeCompany(queryB),
+    enabled: !!queryB,
+  });
+
+  const handleCompare = (e: React.FormEvent) => {
+    e.preventDefault();
+    const a = companyA.trim();
+    const b = companyB.trim();
+    if (a && b) {
+      setSearchParams({ a, b });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h2 className="text-xl font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-2">
+          Portfolio Comparison
+        </h2>
+        <p className="text-text-secondary">
+          Compare patent portfolios of two companies side by side.
+        </p>
+      </div>
+
+      {/* Input Form */}
+      <form onSubmit={handleCompare} className="flex flex-col sm:flex-row gap-3 items-end">
+        <div className="flex-1">
+          <label className="block text-sm font-medium text-text-secondary mb-1">Company A</label>
+          <input
+            type="text"
+            value={companyA}
+            onChange={(e) => setCompanyA(e.target.value)}
+            placeholder="e.g. nvidia"
+            className="w-full bg-bg-card/80 border border-primary/30 rounded-xl px-4 py-2.5 text-text-primary placeholder-text-secondary/50 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
+          />
+        </div>
+        <div className="flex-1">
+          <label className="block text-sm font-medium text-text-secondary mb-1">Company B</label>
+          <input
+            type="text"
+            value={companyB}
+            onChange={(e) => setCompanyB(e.target.value)}
+            placeholder="e.g. intel"
+            className="w-full bg-bg-card/80 border border-primary/30 rounded-xl px-4 py-2.5 text-text-primary placeholder-text-secondary/50 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={!companyA.trim() || !companyB.trim() || resultA.isLoading || resultB.isLoading}
+          className="bg-gradient-to-r from-primary to-primary-dark text-white font-semibold py-2.5 px-6 rounded-xl hover:shadow-lg hover:shadow-primary/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+        >
+          <GitCompareArrows size={18} />
+          Compare
+        </button>
+      </form>
+
+      {/* Comparison Panels */}
+      {(queryA || queryB) && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {queryA && (
+            <CompanyPanel
+              data={resultA.data}
+              isLoading={resultA.isLoading}
+              isError={resultA.isError}
+            />
+          )}
+          {queryB && (
+            <CompanyPanel
+              data={resultB.data}
+              isLoading={resultB.isLoading}
+              isError={resultB.isError}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -31,7 +31,7 @@ export function Login() {
  };

  return (
-    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-indigo-950 flex items-center justify-center px-4">
+    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-slate-100 dark:to-indigo-950 flex items-center justify-center px-4">
      <div className="w-full max-w-md">
        {/* Brand */}
        <div className="text-center mb-8">
@@ -40,7 +40,7 @@ export function Register() {
  };

  return (
-    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-indigo-950 flex items-center justify-center px-4">
+    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-slate-100 dark:to-indigo-950 flex items-center justify-center px-4">
      <div className="w-full max-w-md">
        {/* Brand */}
        <div className="text-center mb-8">