Add spending insights page with filtering and summary features.

src/components/reports/insights/InsightCard.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Badge } from "primereact/badge";
+import { SpendingInsight } from "../../../types/types";
+import DateComponent from "../../../components/format/date.component";
+import { i10n } from "../../../config/prime-locale";
+import { getSeverityClass, getInsightTypeLabel } from "./utils";
+
+interface InsightCardProps {
+  insight: SpendingInsight;
+}
+
+/**
+ * Component for displaying a single insight card
+ */
+const InsightCard: React.FC<InsightCardProps> = ({ insight }) => {
+  return (
+    <div className="p-4 border rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
+      <div className="flex justify-between items-start mb-2">
+        <Badge 
+          value={getInsightTypeLabel(insight.type)} 
+          className={`${getSeverityClass(insight.severity)} px-2 py-1 text-xs font-medium rounded-full`} 
+        />
+        <span className="text-sm text-gray-500">
+          <DateComponent date={insight.detectedDate} />
+        </span>
+      </div>
+      <h3 className="font-medium text-lg mb-2">{insight.category}</h3>
+      <p className="text-gray-700 mb-3">{i10n(insight.message)}</p>
+      <div className="mt-2 flex items-center">
+        <span className="text-sm text-gray-500 mr-2">{i10n('insight.score')}:</span>
+        <div className="w-full bg-gray-200 rounded-full h-2.5">
+          <div 
+            className="bg-blue-600 h-2.5 rounded-full" 
+            style={{ width: `${Math.round(insight.score * 100)}%` }}
+          ></div>
+        </div>
+        <span className="ml-2 text-sm font-medium">{Math.round(insight.score * 100)}%</span>
+      </div>
+
+      {/* Metadata section */}
+      {insight.metadata && Object.keys(insight.metadata).length > 0 && (
+        <div className="mt-3 pt-3 border-t border-gray-200">
+          <h4 className="text-sm font-medium text-gray-700 mb-2">{i10n('insight.metadata') || 'Metadata'}</h4>
+          <div className="grid grid-cols-2 gap-2">
+            {Object.entries(insight.metadata).map(([key, value]) => (
+              <div key={key} className="flex flex-col">
+                <span className="text-xs text-gray-500">{i10n('insight.metadata.' + key)}</span>
+                <span className="text-sm">{String(value)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InsightCard;

src/components/reports/insights/InsightFilters.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { InputText } from "primereact/inputtext";
+import { Dropdown } from "primereact/dropdown";
+import { Slider } from "primereact/slider";
+import { Button } from "primereact/button";
+import { getInsightTypeOptions, getSeverityOptions, i10nWithFallback } from "./utils";
+
+interface InsightFiltersProps {
+  searchTerm: string;
+  setSearchTerm: (value: string) => void;
+  insightTypeFilter: string | null;
+  setInsightTypeFilter: (value: string | null) => void;
+  insightSeverityFilter: string | null;
+  setInsightSeverityFilter: (value: string | null) => void;
+  insightScoreFilter: number;
+  setInsightScoreFilter: (value: number) => void;
+  resetFilters: () => void;
+}
+
+/**
+ * Component for filtering insights
+ */
+const InsightFilters: React.FC<InsightFiltersProps> = ({
+  searchTerm,
+  setSearchTerm,
+  insightTypeFilter,
+  setInsightTypeFilter,
+  insightSeverityFilter,
+  setInsightSeverityFilter,
+  insightScoreFilter,
+  setInsightScoreFilter,
+  resetFilters
+}) => {
+  return (
+    <div className="mb-4 p-3 bg-gray-50 rounded-lg">
+      <div className="flex flex-col md:flex-row gap-3 mb-3">
+        <div className="flex-1">
+          <span className="p-input-icon-left w-full">
+            <i className="pi pi-search" />
+            <InputText 
+              value={searchTerm} 
+              onChange={(e) => setSearchTerm(e.target.value)} 
+              placeholder={i10nWithFallback('search')}
+              className="w-full"
+            />
+          </span>
+        </div>
+        <div className="flex flex-1 gap-2">
+          <Dropdown
+            value={insightTypeFilter}
+            options={getInsightTypeOptions()}
+            onChange={(e) => setInsightTypeFilter(e.value)}
+            placeholder={i10nWithFallback('filter.by.type')}
+            className="w-full"
+          />
+          <Dropdown
+            value={insightSeverityFilter}
+            options={getSeverityOptions()}
+            onChange={(e) => setInsightSeverityFilter(e.value)}
+            placeholder={i10nWithFallback('filter.by.severity')}
+            className="w-full"
+          />
+        </div>
+      </div>
+      <div className="flex flex-col md:flex-row items-center gap-3">
+        <div className="flex-1">
+          <label htmlFor="score-filter" className="block mb-1">
+            {i10nWithFallback('filter.by.score')}: {insightScoreFilter}%
+          </label>
+          <Slider 
+            id="score-filter"
+            value={insightScoreFilter} 
+            onChange={(e) => setInsightScoreFilter(e.value as number)} 
+            className="w-full" 
+            step={5}
+            max={100}
+          />
+        </div>
+        <Button 
+          icon="pi pi-filter-slash" 
+          label={i10nWithFallback('reset.filters')} 
+          className="p-button-outlined" 
+          onClick={resetFilters}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default InsightFilters;

src/components/reports/insights/LoadingComponent.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Card } from "primereact/card";
+import { Panel } from "primereact/panel";
+import { ProgressBar } from "primereact/progressbar";
+import { i10n } from "../../../config/prime-locale";
+
+/**
+ * Component that displays a loading state for the insights page
+ */
+const LoadingComponent: React.FC = () => {
+  return (
+    <div className="mt-4">
+      <Card title={i10n('page.reports.insights.title')}>
+        <div className="flex items-center justify-center p-6">
+          <div className="text-center">
+            <ProgressBar mode="indeterminate" style={{ height: '6px' }} className="mb-3 w-64" />
+            <p className="text-gray-600">{i10n('loading.data')}</p>
+          </div>
+        </div>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+        <div className="col-span-1">
+          <Panel header={i10n('page.reports.insights.insights')}>
+            <div className="animate-pulse">
+              <div className="h-24 bg-gray-200 rounded-lg mb-3"></div>
+              <div className="h-24 bg-gray-200 rounded-lg mb-3"></div>
+              <div className="h-24 bg-gray-200 rounded-lg"></div>
+            </div>
+          </Panel>
+        </div>
+        <div className="col-span-1">
+          <Panel header={i10n('page.reports.insights.patterns')}>
+            <div className="animate-pulse">
+              <div className="h-24 bg-gray-200 rounded-lg mb-3"></div>
+              <div className="h-24 bg-gray-200 rounded-lg mb-3"></div>
+              <div className="h-24 bg-gray-200 rounded-lg"></div>
+            </div>
+          </Panel>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingComponent;

src/components/reports/insights/PatternCard.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Badge } from "primereact/badge";
+import { SpendingPattern } from "../../../types/types";
+import DateComponent from "../../../components/format/date.component";
+import { i10n } from "../../../config/prime-locale";
+import { getPatternTypeLabel } from "./utils";
+
+interface PatternCardProps {
+  pattern: SpendingPattern;
+}
+
+/**
+ * Component for displaying a single pattern card
+ */
+const PatternCard: React.FC<PatternCardProps> = ({ pattern }) => {
+  return (
+    <div className="p-4 border rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
+      <div className="flex justify-between items-start mb-2">
+        <Badge 
+          value={getPatternTypeLabel(pattern.type)} 
+          className="bg-green-100 text-green-800 px-2 py-1 text-xs font-medium rounded-full" 
+        />
+        <span className="text-sm text-gray-500">
+          <DateComponent date={pattern.detectedDate} />
+        </span>
+      </div>
+      <h3 className="font-medium text-lg mb-2">{pattern.category}</h3>
+      <div className="mt-2 flex items-center">
+        <span className="text-sm text-gray-500 mr-2">{i10n('pattern.confidence')}:</span>
+        <div className="w-full bg-gray-200 rounded-full h-2.5">
+          <div 
+            className="bg-green-600 h-2.5 rounded-full" 
+            style={{ width: `${pattern.confidence * 100}%` }}
+          ></div>
+        </div>
+        <span className="ml-2 text-sm font-medium">{Math.round(pattern.confidence * 100)}%</span>
+      </div>
+
+      {/* Metadata section */}
+      {pattern.metadata && Object.keys(pattern.metadata).length > 0 && (
+        <div className="mt-3 pt-3 border-t border-gray-200">
+          <h4 className="text-sm font-medium text-gray-700 mb-2">{i10n('pattern.metadata') || 'Metadata'}</h4>
+          <div className="grid grid-cols-2 gap-2">
+            {Object.entries(pattern.metadata).map(([key, value]) => (
+              <div key={key} className="flex flex-col">
+                <span className="text-xs text-gray-500">{i10n('pattern.metadata.' + key)}</span>
+                <span className="text-sm">{String(value)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PatternCard;

src/components/reports/insights/PatternFilters.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { InputText } from "primereact/inputtext";
+import { Dropdown } from "primereact/dropdown";
+import { Slider } from "primereact/slider";
+import { Button } from "primereact/button";
+import { getPatternTypeOptions, i10nWithFallback } from "./utils";
+
+interface PatternFiltersProps {
+  searchTerm: string;
+  setSearchTerm: (value: string) => void;
+  patternTypeFilter: string | null;
+  setPatternTypeFilter: (value: string | null) => void;
+  patternConfidenceFilter: number;
+  setPatternConfidenceFilter: (value: number) => void;
+  resetFilters: () => void;
+}
+
+/**
+ * Component for filtering patterns
+ */
+const PatternFilters: React.FC<PatternFiltersProps> = ({
+  searchTerm,
+  setSearchTerm,
+  patternTypeFilter,
+  setPatternTypeFilter,
+  patternConfidenceFilter,
+  setPatternConfidenceFilter,
+  resetFilters
+}) => {
+  return (
+    <div className="mb-4 p-3 bg-gray-50 rounded-lg">
+      <div className="flex flex-col md:flex-row gap-3 mb-3">
+        <div className="flex-1">
+          <span className="p-input-icon-left w-full">
+            <i className="pi pi-search" />
+            <InputText 
+              value={searchTerm} 
+              onChange={(e) => setSearchTerm(e.target.value)} 
+              placeholder={i10nWithFallback('search')}
+              className="w-full"
+            />
+          </span>
+        </div>
+        <div className="flex-1">
+          <Dropdown
+            value={patternTypeFilter}
+            options={getPatternTypeOptions()}
+            onChange={(e) => setPatternTypeFilter(e.value)}
+            placeholder={i10nWithFallback('filter.by.type')}
+            className="w-full"
+          />
+        </div>
+      </div>
+      <div className="flex flex-col md:flex-row items-center gap-3">
+        <div className="flex-1">
+          <label htmlFor="confidence-filter" className="block mb-1">
+            {i10nWithFallback('filter.by.confidence')}: {patternConfidenceFilter}%
+          </label>
+          <Slider 
+            id="confidence-filter"
+            value={patternConfidenceFilter} 
+            onChange={(e) => setPatternConfidenceFilter(e.value as number)} 
+            className="w-full" 
+            step={5}
+            max={100}
+          />
+        </div>
+        <Button 
+          icon="pi pi-filter-slash" 
+          label={i10nWithFallback('reset.filters')} 
+          className="p-button-outlined" 
+          onClick={resetFilters}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PatternFilters;