[SPRINT-4-5] feat: Education, LLM, Portfolio, Marketplace modules
SPRINT 4 (128 SP): SUBTASK-007 Education (21 SP): - Add QuizHistoryCard with stats and trend indicators - Add EarnedCertificates with search, sort, sharing - Enhance CourseDetail with "Resume where you left off" SUBTASK-008 LLM Agent (44 SP): - Add MemoryManager with conversation history management - Add LLMToolsPanel with tool enable/disable and execution history - Add FineTuningPanel with model selection and training config SUBTASK-009 Portfolio (63 SP): - Add MonteCarloSimulator with VaR/CVaR calculations - Add CorrelationMatrix with heatmap visualization - Add RebalancingPanel with drift thresholds and history - Add GoalsManager with savings rate calculator - Add RiskAnalytics with comprehensive metrics SPRINT 5 (55 SP): SUBTASK-010 Marketplace (42 SP): - Create full marketplace module structure - Add MarketplaceCatalog with grid/list view, filters - Add SignalPackCard, SignalPackDetail pages - Add AdvisoryCard, AdvisoryDetail with booking - Add CourseProductCard, ReviewCard components - Add marketplace types, service, and store - Add routes: /marketplace, /marketplace/signals/:slug, etc. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Adrian Flores Cortes
parent
c9e2727d3b
commit
6a8cb3b9cf
11
src/App.tsx
11
src/App.tsx
@ -70,6 +70,11 @@ const MLModelsPage = lazy(() => import('./modules/admin/pages/MLModelsPage'));
|
||||
const AgentsPage = lazy(() => import('./modules/admin/pages/AgentsPage'));
|
||||
const PredictionsPage = lazy(() => import('./modules/admin/pages/PredictionsPage'));
|
||||
|
||||
// Lazy load modules - Marketplace
|
||||
const MarketplaceCatalog = lazy(() => import('./modules/marketplace/pages/MarketplaceCatalog'));
|
||||
const SignalPackDetail = lazy(() => import('./modules/marketplace/pages/SignalPackDetail'));
|
||||
const AdvisoryDetail = lazy(() => import('./modules/marketplace/pages/AdvisoryDetail'));
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
@ -150,6 +155,12 @@ function App() {
|
||||
<Route path="/admin/models" element={<MLModelsPage />} />
|
||||
<Route path="/admin/agents" element={<AgentsPage />} />
|
||||
<Route path="/admin/predictions" element={<PredictionsPage />} />
|
||||
|
||||
{/* Marketplace */}
|
||||
<Route path="/marketplace" element={<MarketplaceCatalog />} />
|
||||
<Route path="/marketplace/signals/:slug" element={<SignalPackDetail />} />
|
||||
<Route path="/marketplace/advisory/:slug" element={<AdvisoryDetail />} />
|
||||
<Route path="/marketplace/courses/:slug" element={<CourseDetail />} />
|
||||
</Route>
|
||||
|
||||
{/* Redirects */}
|
||||
|
||||
653
src/modules/assistant/components/FineTuningPanel.tsx
Normal file
653
src/modules/assistant/components/FineTuningPanel.tsx
Normal file
@ -0,0 +1,653 @@
|
||||
/**
|
||||
* FineTuningPanel Component
|
||||
* Fine-tuning interface for LLM models (UI only, backend mock)
|
||||
* OQI-007: LLM Strategy Agent - SUBTASK-008
|
||||
*/
|
||||
|
||||
import React, { useState, useRef, useMemo } from 'react';
|
||||
import {
|
||||
AcademicCapIcon,
|
||||
CloudArrowUpIcon,
|
||||
PlayIcon,
|
||||
StopIcon,
|
||||
CheckCircleIcon,
|
||||
XCircleIcon,
|
||||
ClockIcon,
|
||||
ChartBarIcon,
|
||||
ArrowPathIcon,
|
||||
DocumentTextIcon,
|
||||
TrashIcon,
|
||||
InformationCircleIcon,
|
||||
ExclamationTriangleIcon,
|
||||
ArrowDownTrayIcon,
|
||||
EyeIcon,
|
||||
ScaleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export interface BaseModel {
|
||||
id: string;
|
||||
name: string;
|
||||
provider: string;
|
||||
description: string;
|
||||
contextWindow: number;
|
||||
costPerMToken: number;
|
||||
supportsFinetuning: boolean;
|
||||
}
|
||||
|
||||
export interface TrainingDataset {
|
||||
id: string;
|
||||
name: string;
|
||||
fileName: string;
|
||||
sampleCount: number;
|
||||
sizeKB: number;
|
||||
format: 'jsonl' | 'csv' | 'json';
|
||||
uploadedAt: string;
|
||||
validationStatus: 'pending' | 'valid' | 'invalid';
|
||||
validationErrors?: string[];
|
||||
}
|
||||
|
||||
export interface FineTunedModel {
|
||||
id: string;
|
||||
name: string;
|
||||
baseModelId: string;
|
||||
baseModelName: string;
|
||||
status: 'training' | 'completed' | 'failed' | 'cancelled';
|
||||
progress: number;
|
||||
createdAt: string;
|
||||
completedAt?: string;
|
||||
trainingLoss?: number;
|
||||
validationLoss?: number;
|
||||
epochs: number;
|
||||
trainingSamples: number;
|
||||
estimatedCost: number;
|
||||
metrics?: {
|
||||
accuracy?: number;
|
||||
f1Score?: number;
|
||||
perplexity?: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface TrainingConfig {
|
||||
epochs: number;
|
||||
batchSize: number;
|
||||
learningRate: number;
|
||||
warmupSteps: number;
|
||||
validationSplit: number;
|
||||
}
|
||||
|
||||
interface FineTuningPanelProps {
|
||||
baseModels: BaseModel[];
|
||||
datasets: TrainingDataset[];
|
||||
fineTunedModels: FineTunedModel[];
|
||||
onUploadDataset?: (file: File) => void;
|
||||
onDeleteDataset?: (datasetId: string) => void;
|
||||
onStartTraining?: (config: {
|
||||
baseModelId: string;
|
||||
datasetId: string;
|
||||
name: string;
|
||||
config: TrainingConfig;
|
||||
}) => void;
|
||||
onCancelTraining?: (modelId: string) => void;
|
||||
onDownloadModel?: (modelId: string) => void;
|
||||
onDeleteModel?: (modelId: string) => void;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Constants
|
||||
// ============================================================================
|
||||
|
||||
const DEFAULT_TRAINING_CONFIG: TrainingConfig = {
|
||||
epochs: 3,
|
||||
batchSize: 4,
|
||||
learningRate: 0.0001,
|
||||
warmupSteps: 100,
|
||||
validationSplit: 0.1,
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Sub-Components
|
||||
// ============================================================================
|
||||
|
||||
interface DatasetCardProps {
|
||||
dataset: TrainingDataset;
|
||||
onDelete?: () => void;
|
||||
isSelected?: boolean;
|
||||
onSelect?: () => void;
|
||||
}
|
||||
|
||||
const DatasetCard: React.FC<DatasetCardProps> = ({ dataset, onDelete, isSelected, onSelect }) => {
|
||||
const statusColors = {
|
||||
pending: 'text-yellow-500 bg-yellow-500/10',
|
||||
valid: 'text-emerald-500 bg-emerald-500/10',
|
||||
invalid: 'text-red-500 bg-red-500/10',
|
||||
};
|
||||
|
||||
const StatusIcon = {
|
||||
pending: ClockIcon,
|
||||
valid: CheckCircleIcon,
|
||||
invalid: XCircleIcon,
|
||||
}[dataset.validationStatus];
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onSelect}
|
||||
className={`p-3 rounded-lg border-2 cursor-pointer transition-all ${
|
||||
isSelected
|
||||
? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`p-2 rounded-lg ${statusColors[dataset.validationStatus]}`}>
|
||||
<DocumentTextIcon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm truncate">{dataset.name}</h4>
|
||||
<span className={`px-1.5 py-0.5 text-xs rounded flex items-center gap-1 ${statusColors[dataset.validationStatus]}`}>
|
||||
<StatusIcon className="w-3 h-3" />
|
||||
{dataset.validationStatus}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-0.5">{dataset.fileName}</p>
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-400">
|
||||
<span>{dataset.sampleCount.toLocaleString()} samples</span>
|
||||
<span>{(dataset.sizeKB / 1024).toFixed(2)} MB</span>
|
||||
<span>{dataset.format.toUpperCase()}</span>
|
||||
</div>
|
||||
{dataset.validationErrors && dataset.validationErrors.length > 0 && (
|
||||
<div className="mt-2 p-2 bg-red-50 dark:bg-red-900/20 rounded text-xs text-red-600 dark:text-red-400">
|
||||
{dataset.validationErrors[0]}
|
||||
{dataset.validationErrors.length > 1 && ` (+${dataset.validationErrors.length - 1} more)`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onDelete(); }}
|
||||
className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface ModelComparisonCardProps {
|
||||
model: FineTunedModel;
|
||||
onCancel?: () => void;
|
||||
onDownload?: () => void;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
const ModelComparisonCard: React.FC<ModelComparisonCardProps> = ({ model, onCancel, onDownload, onDelete }) => {
|
||||
const statusColors = {
|
||||
training: 'text-blue-500 bg-blue-500/10 border-blue-500/30',
|
||||
completed: 'text-emerald-500 bg-emerald-500/10 border-emerald-500/30',
|
||||
failed: 'text-red-500 bg-red-500/10 border-red-500/30',
|
||||
cancelled: 'text-gray-500 bg-gray-500/10 border-gray-500/30',
|
||||
};
|
||||
|
||||
const StatusIcon = {
|
||||
training: ArrowPathIcon,
|
||||
completed: CheckCircleIcon,
|
||||
failed: XCircleIcon,
|
||||
cancelled: StopIcon,
|
||||
}[model.status];
|
||||
|
||||
return (
|
||||
<div className={`rounded-xl border ${statusColors[model.status]} overflow-hidden`}>
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">{model.name}</h4>
|
||||
<p className="text-xs text-gray-500 mt-0.5">Base: {model.baseModelName}</p>
|
||||
</div>
|
||||
<div className={`px-2 py-1 rounded-lg flex items-center gap-1.5 text-xs ${statusColors[model.status]}`}>
|
||||
<StatusIcon className={`w-3.5 h-3.5 ${model.status === 'training' ? 'animate-spin' : ''}`} />
|
||||
{model.status}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar (if training) */}
|
||||
{model.status === 'training' && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 mb-1">
|
||||
<span>Training Progress</span>
|
||||
<span>{model.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 transition-all"
|
||||
style={{ width: `${model.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="p-4 grid grid-cols-2 gap-3 bg-gray-50 dark:bg-gray-900">
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-1">Training Loss</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{model.trainingLoss?.toFixed(4) || '-'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-1">Validation Loss</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{model.validationLoss?.toFixed(4) || '-'}
|
||||
</div>
|
||||
</div>
|
||||
{model.metrics?.accuracy !== undefined && (
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-1">Accuracy</div>
|
||||
<div className="text-lg font-bold text-emerald-500">
|
||||
{(model.metrics.accuracy * 100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{model.metrics?.f1Score !== undefined && (
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-1">F1 Score</div>
|
||||
<div className="text-lg font-bold text-blue-500">
|
||||
{model.metrics.f1Score.toFixed(3)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-1">Epochs</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">{model.epochs}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-1">Samples</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{model.trainingSamples.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex items-center justify-between">
|
||||
<div className="text-xs text-gray-500">
|
||||
Cost: <span className="font-medium text-gray-900 dark:text-white">${model.estimatedCost.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{model.status === 'training' && onCancel && (
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-2 py-1 text-xs text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
{model.status === 'completed' && onDownload && (
|
||||
<button
|
||||
onClick={onDownload}
|
||||
className="p-1.5 text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-lg"
|
||||
>
|
||||
<ArrowDownTrayIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{(model.status === 'completed' || model.status === 'failed' || model.status === 'cancelled') && onDelete && (
|
||||
<button
|
||||
onClick={onDelete}
|
||||
className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export const FineTuningPanel: React.FC<FineTuningPanelProps> = ({
|
||||
baseModels,
|
||||
datasets,
|
||||
fineTunedModels,
|
||||
onUploadDataset,
|
||||
onDeleteDataset,
|
||||
onStartTraining,
|
||||
onCancelTraining,
|
||||
onDownloadModel,
|
||||
onDeleteModel,
|
||||
isLoading = false,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'create' | 'models'>('create');
|
||||
const [selectedBaseModel, setSelectedBaseModel] = useState<string>('');
|
||||
const [selectedDataset, setSelectedDataset] = useState<string>('');
|
||||
const [modelName, setModelName] = useState('');
|
||||
const [trainingConfig, setTrainingConfig] = useState<TrainingConfig>(DEFAULT_TRAINING_CONFIG);
|
||||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const supportedModels = baseModels.filter((m) => m.supportsFinetuning);
|
||||
const validDatasets = datasets.filter((d) => d.validationStatus === 'valid');
|
||||
const trainingModels = fineTunedModels.filter((m) => m.status === 'training');
|
||||
|
||||
const canStartTraining = selectedBaseModel && selectedDataset && modelName.trim() && !isLoading;
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file && onUploadDataset) {
|
||||
onUploadDataset(file);
|
||||
}
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartTraining = () => {
|
||||
if (!canStartTraining || !onStartTraining) return;
|
||||
onStartTraining({
|
||||
baseModelId: selectedBaseModel,
|
||||
datasetId: selectedDataset,
|
||||
name: modelName.trim(),
|
||||
config: trainingConfig,
|
||||
});
|
||||
setModelName('');
|
||||
setSelectedDataset('');
|
||||
};
|
||||
|
||||
const estimatedCost = useMemo(() => {
|
||||
if (!selectedBaseModel || !selectedDataset) return 0;
|
||||
const model = baseModels.find((m) => m.id === selectedBaseModel);
|
||||
const dataset = datasets.find((d) => d.id === selectedDataset);
|
||||
if (!model || !dataset) return 0;
|
||||
const tokensPerSample = 500;
|
||||
const totalTokens = dataset.sampleCount * tokensPerSample * trainingConfig.epochs;
|
||||
return (totalTokens / 1000000) * model.costPerMToken * 10;
|
||||
}, [selectedBaseModel, selectedDataset, trainingConfig.epochs, baseModels, datasets]);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<AcademicCapIcon className="w-5 h-5 text-primary-500" />
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Fine-Tuning</h3>
|
||||
</div>
|
||||
{trainingModels.length > 0 && (
|
||||
<span className="px-2 py-1 text-xs bg-blue-500/10 text-blue-500 rounded-full flex items-center gap-1">
|
||||
<ArrowPathIcon className="w-3 h-3 animate-spin" />
|
||||
{trainingModels.length} training
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">{datasets.length}</div>
|
||||
<div className="text-xs text-gray-500">Datasets</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">{fineTunedModels.length}</div>
|
||||
<div className="text-xs text-gray-500">Models</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
|
||||
<div className="text-xl font-bold text-emerald-500">
|
||||
{fineTunedModels.filter((m) => m.status === 'completed').length}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Ready</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => setActiveTab('create')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'create'
|
||||
? 'border-primary-500 text-primary-500'
|
||||
: 'border-transparent text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<PlayIcon className="w-4 h-4" />
|
||||
New Training
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('models')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'models'
|
||||
? 'border-primary-500 text-primary-500'
|
||||
: 'border-transparent text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<ScaleIcon className="w-4 h-4" />
|
||||
Compare Models ({fineTunedModels.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Create Training Tab */}
|
||||
{activeTab === 'create' && (
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Model Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
|
||||
Base Model
|
||||
</label>
|
||||
<select
|
||||
value={selectedBaseModel}
|
||||
onChange={(e) => setSelectedBaseModel(e.target.value)}
|
||||
className="w-full px-3 py-2.5 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
<option value="">Select a model...</option>
|
||||
{supportedModels.map((model) => (
|
||||
<option key={model.id} value={model.id}>
|
||||
{model.name} ({model.provider}) - ${model.costPerMToken}/MTok
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{selectedBaseModel && (
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
{baseModels.find((m) => m.id === selectedBaseModel)?.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dataset Upload & Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
|
||||
Training Dataset
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileUpload}
|
||||
accept=".jsonl,.csv,.json"
|
||||
className="hidden"
|
||||
/>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={!onUploadDataset}
|
||||
className="w-full mb-2 p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg flex items-center justify-center gap-2 text-gray-500 hover:border-primary-500 hover:text-primary-500 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<CloudArrowUpIcon className="w-5 h-5" />
|
||||
<span className="text-sm">Upload dataset (JSONL, CSV, JSON)</span>
|
||||
</button>
|
||||
{datasets.length > 0 && (
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto">
|
||||
{datasets.map((dataset) => (
|
||||
<DatasetCard
|
||||
key={dataset.id}
|
||||
dataset={dataset}
|
||||
isSelected={selectedDataset === dataset.id}
|
||||
onSelect={() => setSelectedDataset(dataset.id)}
|
||||
onDelete={onDeleteDataset ? () => onDeleteDataset(dataset.id) : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Model Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
|
||||
Fine-tuned Model Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={modelName}
|
||||
onChange={(e) => setModelName(e.target.value)}
|
||||
placeholder="e.g., trading-signals-v1"
|
||||
className="w-full px-3 py-2.5 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Advanced Config */}
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||
className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
>
|
||||
{showAdvanced ? 'Hide' : 'Show'} Advanced Settings
|
||||
{showAdvanced ? <ChevronUpIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
|
||||
</button>
|
||||
{showAdvanced && (
|
||||
<div className="mt-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Epochs</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
value={trainingConfig.epochs}
|
||||
onChange={(e) => setTrainingConfig({ ...trainingConfig, epochs: parseInt(e.target.value) || 1 })}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Batch Size</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="32"
|
||||
value={trainingConfig.batchSize}
|
||||
onChange={(e) => setTrainingConfig({ ...trainingConfig, batchSize: parseInt(e.target.value) || 1 })}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Learning Rate</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.00001"
|
||||
min="0.00001"
|
||||
max="0.01"
|
||||
value={trainingConfig.learningRate}
|
||||
onChange={(e) => setTrainingConfig({ ...trainingConfig, learningRate: parseFloat(e.target.value) || 0.0001 })}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Validation Split</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.05"
|
||||
min="0.05"
|
||||
max="0.3"
|
||||
value={trainingConfig.validationSplit}
|
||||
onChange={(e) => setTrainingConfig({ ...trainingConfig, validationSplit: parseFloat(e.target.value) || 0.1 })}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Estimated Cost */}
|
||||
{estimatedCost > 0 && (
|
||||
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-400">
|
||||
<ExclamationTriangleIcon className="w-4 h-4" />
|
||||
<span>Estimated training cost</span>
|
||||
</div>
|
||||
<span className="font-bold text-yellow-600 dark:text-yellow-400">
|
||||
~${estimatedCost.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Start Training Button */}
|
||||
<button
|
||||
onClick={handleStartTraining}
|
||||
disabled={!canStartTraining}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<PlayIcon className="w-5 h-5" />
|
||||
Start Fine-Tuning
|
||||
</button>
|
||||
|
||||
{/* Info */}
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg flex items-start gap-2">
|
||||
<InformationCircleIcon className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-xs text-blue-600 dark:text-blue-400">
|
||||
Fine-tuning customizes a base model on your trading data. This improves accuracy for
|
||||
your specific use case but may take hours to complete. Training costs are estimates.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Models Comparison Tab */}
|
||||
{activeTab === 'models' && (
|
||||
<div className="p-4">
|
||||
{fineTunedModels.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<AcademicCapIcon className="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-3" />
|
||||
<p className="text-gray-500 text-sm">No fine-tuned models yet</p>
|
||||
<p className="text-gray-400 text-xs mt-1">Start training to create your first model</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{fineTunedModels.map((model) => (
|
||||
<ModelComparisonCard
|
||||
key={model.id}
|
||||
model={model}
|
||||
onCancel={onCancelTraining ? () => onCancelTraining(model.id) : undefined}
|
||||
onDownload={onDownloadModel ? () => onDownloadModel(model.id) : undefined}
|
||||
onDelete={onDeleteModel ? () => onDeleteModel(model.id) : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Missing import fix
|
||||
const ChevronUpIcon = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ChevronDownIcon = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default FineTuningPanel;
|
||||
505
src/modules/assistant/components/LLMToolsPanel.tsx
Normal file
505
src/modules/assistant/components/LLMToolsPanel.tsx
Normal file
@ -0,0 +1,505 @@
|
||||
/**
|
||||
* LLMToolsPanel Component
|
||||
* Tools integration panel with enable/disable toggles and execution history
|
||||
* OQI-007: LLM Strategy Agent - SUBTASK-008
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import {
|
||||
WrenchScrewdriverIcon,
|
||||
ChartBarIcon,
|
||||
CurrencyDollarIcon,
|
||||
MagnifyingGlassIcon,
|
||||
CalculatorIcon,
|
||||
NewspaperIcon,
|
||||
ClockIcon,
|
||||
CheckIcon,
|
||||
XMarkIcon,
|
||||
ExclamationTriangleIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
PlayIcon,
|
||||
ArrowPathIcon,
|
||||
InformationCircleIcon,
|
||||
Cog6ToothIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export interface LLMTool {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
category: 'market_data' | 'analysis' | 'trading' | 'research' | 'utility';
|
||||
enabled: boolean;
|
||||
parameters?: ToolParameter[];
|
||||
usageCount: number;
|
||||
avgDuration: number;
|
||||
lastUsed?: string;
|
||||
requiredPermissions?: string[];
|
||||
}
|
||||
|
||||
export interface ToolParameter {
|
||||
name: string;
|
||||
type: 'string' | 'number' | 'boolean' | 'select';
|
||||
required: boolean;
|
||||
default?: string | number | boolean;
|
||||
options?: string[];
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface ToolExecution {
|
||||
id: string;
|
||||
toolId: string;
|
||||
toolName: string;
|
||||
status: 'pending' | 'running' | 'success' | 'error';
|
||||
arguments: Record<string, unknown>;
|
||||
result?: unknown;
|
||||
error?: string;
|
||||
startTime: string;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
interface LLMToolsPanelProps {
|
||||
tools: LLMTool[];
|
||||
executionHistory: ToolExecution[];
|
||||
onToggleTool: (toolId: string, enabled: boolean) => void;
|
||||
onConfigureTool?: (toolId: string) => void;
|
||||
onRetryExecution?: (executionId: string) => void;
|
||||
onClearHistory?: () => void;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Constants
|
||||
// ============================================================================
|
||||
|
||||
const CATEGORY_INFO: Record<string, { label: string; color: string; icon: React.ElementType }> = {
|
||||
market_data: { label: 'Market Data', color: 'text-blue-500 bg-blue-500/10', icon: CurrencyDollarIcon },
|
||||
analysis: { label: 'Analysis', color: 'text-purple-500 bg-purple-500/10', icon: ChartBarIcon },
|
||||
trading: { label: 'Trading', color: 'text-emerald-500 bg-emerald-500/10', icon: CalculatorIcon },
|
||||
research: { label: 'Research', color: 'text-orange-500 bg-orange-500/10', icon: NewspaperIcon },
|
||||
utility: { label: 'Utility', color: 'text-gray-500 bg-gray-500/10', icon: WrenchScrewdriverIcon },
|
||||
};
|
||||
|
||||
const STATUS_STYLES: Record<string, { color: string; icon: React.ElementType }> = {
|
||||
pending: { color: 'text-gray-400 bg-gray-500/10', icon: ClockIcon },
|
||||
running: { color: 'text-blue-400 bg-blue-500/10', icon: ArrowPathIcon },
|
||||
success: { color: 'text-emerald-400 bg-emerald-500/10', icon: CheckIcon },
|
||||
error: { color: 'text-red-400 bg-red-500/10', icon: XMarkIcon },
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Sub-Components
|
||||
// ============================================================================
|
||||
|
||||
interface ToolCardProps {
|
||||
tool: LLMTool;
|
||||
onToggle: (enabled: boolean) => void;
|
||||
onConfigure?: () => void;
|
||||
}
|
||||
|
||||
const ToolCard: React.FC<ToolCardProps> = ({ tool, onToggle, onConfigure }) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const category = CATEGORY_INFO[tool.category];
|
||||
const CategoryIcon = category.icon;
|
||||
|
||||
const formatLastUsed = (dateStr?: string) => {
|
||||
if (!dateStr) return 'Never';
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) return 'Just now';
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`rounded-lg border transition-all ${
|
||||
tool.enabled
|
||||
? 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
|
||||
: 'border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 opacity-75'
|
||||
}`}>
|
||||
<div className="p-3">
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Icon */}
|
||||
<div className={`p-2 rounded-lg ${category.color}`}>
|
||||
<CategoryIcon className="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{tool.name}</h4>
|
||||
<span className={`px-1.5 py-0.5 text-xs rounded ${category.color}`}>
|
||||
{category.label}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-0.5 line-clamp-2">{tool.description}</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
|
||||
<span title="Usage count">{tool.usageCount} uses</span>
|
||||
<span title="Average duration">{tool.avgDuration}ms avg</span>
|
||||
<span title="Last used">{formatLastUsed(tool.lastUsed)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{onConfigure && tool.parameters && tool.parameters.length > 0 && (
|
||||
<button
|
||||
onClick={onConfigure}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
|
||||
title="Configure"
|
||||
>
|
||||
<Cog6ToothIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
{isExpanded ? <ChevronUpIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
|
||||
</button>
|
||||
{/* Toggle */}
|
||||
<button
|
||||
onClick={() => onToggle(!tool.enabled)}
|
||||
className={`relative w-10 h-6 rounded-full transition-colors ${
|
||||
tool.enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
|
||||
tool.enabled ? 'translate-x-5' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded Details */}
|
||||
{isExpanded && (
|
||||
<div className="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
|
||||
{tool.parameters && tool.parameters.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h5 className="text-xs font-medium text-gray-500 uppercase">Parameters</h5>
|
||||
{tool.parameters.map((param) => (
|
||||
<div key={param.name} className="flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-300">{param.name}</span>
|
||||
{param.required && <span className="text-red-400">*</span>}
|
||||
</div>
|
||||
<span className="text-gray-400">{param.type}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{tool.requiredPermissions && tool.requiredPermissions.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<h5 className="text-xs font-medium text-gray-500 uppercase mb-1">Required Permissions</h5>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{tool.requiredPermissions.map((perm) => (
|
||||
<span
|
||||
key={perm}
|
||||
className="px-1.5 py-0.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 text-xs rounded"
|
||||
>
|
||||
{perm}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface ExecutionHistoryItemProps {
|
||||
execution: ToolExecution;
|
||||
onRetry?: () => void;
|
||||
}
|
||||
|
||||
const ExecutionHistoryItem: React.FC<ExecutionHistoryItemProps> = ({ execution, onRetry }) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const status = STATUS_STYLES[execution.status];
|
||||
const StatusIcon = status.icon;
|
||||
|
||||
return (
|
||||
<div className="p-3 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`p-1.5 rounded-lg ${status.color}`}>
|
||||
<StatusIcon className={`w-4 h-4 ${execution.status === 'running' ? 'animate-spin' : ''}`} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{execution.toolName}</span>
|
||||
<span className={`px-1.5 py-0.5 text-xs rounded ${status.color}`}>
|
||||
{execution.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-400">
|
||||
<span>{new Date(execution.startTime).toLocaleTimeString()}</span>
|
||||
{execution.duration && <span>{execution.duration}ms</span>}
|
||||
</div>
|
||||
|
||||
{execution.error && (
|
||||
<div className="mt-2 p-2 bg-red-50 dark:bg-red-900/20 rounded text-xs text-red-600 dark:text-red-400 flex items-start gap-2">
|
||||
<ExclamationTriangleIcon className="w-4 h-4 flex-shrink-0" />
|
||||
<span>{execution.error}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{execution.status === 'error' && onRetry && (
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="p-1.5 text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-lg"
|
||||
title="Retry"
|
||||
>
|
||||
<ArrowPathIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
{isExpanded ? <ChevronUpIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-3 space-y-2">
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-gray-500 uppercase mb-1">Arguments</h5>
|
||||
<pre className="p-2 bg-gray-100 dark:bg-gray-900 rounded text-xs text-gray-600 dark:text-gray-400 overflow-x-auto">
|
||||
{JSON.stringify(execution.arguments, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
{execution.result !== undefined && execution.result !== null && (
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-gray-500 uppercase mb-1">Result</h5>
|
||||
<pre className="p-2 bg-gray-100 dark:bg-gray-900 rounded text-xs text-gray-600 dark:text-gray-400 overflow-x-auto max-h-32">
|
||||
{JSON.stringify(execution.result, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export const LLMToolsPanel: React.FC<LLMToolsPanelProps> = ({
|
||||
tools,
|
||||
executionHistory,
|
||||
onToggleTool,
|
||||
onConfigureTool,
|
||||
onRetryExecution,
|
||||
onClearHistory,
|
||||
isLoading = false,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'tools' | 'history'>('tools');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [categoryFilter, setCategoryFilter] = useState<string>('all');
|
||||
|
||||
const filteredTools = useMemo(() => {
|
||||
let filtered = tools;
|
||||
|
||||
if (searchQuery.trim()) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter((t) =>
|
||||
t.name.toLowerCase().includes(query) ||
|
||||
t.description.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
if (categoryFilter !== 'all') {
|
||||
filtered = filtered.filter((t) => t.category === categoryFilter);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [tools, searchQuery, categoryFilter]);
|
||||
|
||||
const enabledCount = tools.filter((t) => t.enabled).length;
|
||||
const categories = [...new Set(tools.map((t) => t.category))];
|
||||
|
||||
const recentExecutions = executionHistory.slice(0, 20);
|
||||
const successRate = executionHistory.length > 0
|
||||
? (executionHistory.filter((e) => e.status === 'success').length / executionHistory.length * 100).toFixed(0)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<WrenchScrewdriverIcon className="w-5 h-5 text-primary-500" />
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">LLM Tools</h3>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{enabledCount}/{tools.length} enabled
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">{tools.length}</div>
|
||||
<div className="text-xs text-gray-500">Total Tools</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
|
||||
<div className="text-xl font-bold text-emerald-500">{enabledCount}</div>
|
||||
<div className="text-xs text-gray-500">Enabled</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
|
||||
<div className="text-xl font-bold text-blue-500">{successRate}%</div>
|
||||
<div className="text-xs text-gray-500">Success Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => setActiveTab('tools')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'tools'
|
||||
? 'border-primary-500 text-primary-500'
|
||||
: 'border-transparent text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<Cog6ToothIcon className="w-4 h-4" />
|
||||
Available Tools
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('history')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'history'
|
||||
? 'border-primary-500 text-primary-500'
|
||||
: 'border-transparent text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<ClockIcon className="w-4 h-4" />
|
||||
Execution History ({executionHistory.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tools Tab */}
|
||||
{activeTab === 'tools' && (
|
||||
<>
|
||||
{/* Filters */}
|
||||
<div className="p-3 border-b border-gray-200 dark:border-gray-700 flex items-center gap-3">
|
||||
<div className="flex-1 relative">
|
||||
<MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search tools..."
|
||||
className="w-full pl-9 pr-3 py-2 text-sm bg-gray-100 dark:bg-gray-800 border-0 rounded-lg focus:ring-2 focus:ring-primary-500"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={categoryFilter}
|
||||
onChange={(e) => setCategoryFilter(e.target.value)}
|
||||
className="px-3 py-2 text-sm bg-gray-100 dark:bg-gray-800 border-0 rounded-lg focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
<option value="all">All Categories</option>
|
||||
{categories.map((cat) => (
|
||||
<option key={cat} value={cat}>
|
||||
{CATEGORY_INFO[cat]?.label || cat}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Tools List */}
|
||||
<div className="max-h-96 overflow-y-auto p-3 space-y-2">
|
||||
{filteredTools.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<WrenchScrewdriverIcon className="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-3" />
|
||||
<p className="text-gray-500 text-sm">No tools found</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredTools.map((tool) => (
|
||||
<ToolCard
|
||||
key={tool.id}
|
||||
tool={tool}
|
||||
onToggle={(enabled) => onToggleTool(tool.id, enabled)}
|
||||
onConfigure={onConfigureTool ? () => onConfigureTool(tool.id) : undefined}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* History Tab */}
|
||||
{activeTab === 'history' && (
|
||||
<>
|
||||
{/* Clear History */}
|
||||
{executionHistory.length > 0 && onClearHistory && (
|
||||
<div className="p-3 border-b border-gray-200 dark:border-gray-700 flex justify-end">
|
||||
<button
|
||||
onClick={onClearHistory}
|
||||
className="text-xs text-gray-500 hover:text-red-500 transition-colors"
|
||||
>
|
||||
Clear History
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Execution List */}
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{recentExecutions.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<ClockIcon className="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-3" />
|
||||
<p className="text-gray-500 text-sm">No execution history</p>
|
||||
<p className="text-gray-400 text-xs mt-1">Tool executions will appear here</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
{recentExecutions.map((execution) => (
|
||||
<ExecutionHistoryItem
|
||||
key={execution.id}
|
||||
execution={execution}
|
||||
onRetry={onRetryExecution ? () => onRetryExecution(execution.id) : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Info Footer */}
|
||||
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div className="flex items-start gap-2 text-xs text-gray-500">
|
||||
<InformationCircleIcon className="w-4 h-4 flex-shrink-0 mt-0.5" />
|
||||
<p>
|
||||
Tools extend AI capabilities. Enable tools to allow the assistant to access market data,
|
||||
analyze charts, execute trades, and more. Some tools may require additional permissions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LLMToolsPanel;
|
||||
522
src/modules/assistant/components/MemoryManager.tsx
Normal file
522
src/modules/assistant/components/MemoryManager.tsx
Normal file
@ -0,0 +1,522 @@
|
||||
/**
|
||||
* MemoryManager Component
|
||||
* Enhanced memory management with conversation history, archiving, and visualization
|
||||
* OQI-007: LLM Strategy Agent - SUBTASK-008
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
CircleStackIcon,
|
||||
ArchiveBoxIcon,
|
||||
TrashIcon,
|
||||
ArrowDownTrayIcon,
|
||||
ClockIcon,
|
||||
FolderIcon,
|
||||
DocumentTextIcon,
|
||||
ChevronRightIcon,
|
||||
MagnifyingGlassIcon,
|
||||
ExclamationTriangleIcon,
|
||||
CheckCircleIcon,
|
||||
XMarkIcon,
|
||||
ArrowPathIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export interface ConversationRecord {
|
||||
id: string;
|
||||
title: string;
|
||||
preview: string;
|
||||
messageCount: number;
|
||||
tokenCount: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
archived: boolean;
|
||||
tags?: string[];
|
||||
}
|
||||
|
||||
export interface MemoryUsage {
|
||||
totalTokens: number;
|
||||
maxTokens: number;
|
||||
activeConversations: number;
|
||||
archivedConversations: number;
|
||||
totalStorageKB: number;
|
||||
}
|
||||
|
||||
export interface ContextWindow {
|
||||
used: number;
|
||||
max: number;
|
||||
reserved: number;
|
||||
systemPrompt: number;
|
||||
conversationHistory: number;
|
||||
tools: number;
|
||||
}
|
||||
|
||||
interface MemoryManagerProps {
|
||||
conversations: ConversationRecord[];
|
||||
memoryUsage: MemoryUsage;
|
||||
contextWindow: ContextWindow;
|
||||
onClearConversation?: (id: string) => void;
|
||||
onArchiveConversation?: (id: string) => void;
|
||||
onRestoreConversation?: (id: string) => void;
|
||||
onExportConversation?: (id: string) => void;
|
||||
onDeleteConversation?: (id: string) => void;
|
||||
onClearAllArchived?: () => void;
|
||||
onRefreshUsage?: () => void;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
const formatBytes = (kb: number): string => {
|
||||
if (kb >= 1024) return `${(kb / 1024).toFixed(1)} MB`;
|
||||
return `${kb.toFixed(1)} KB`;
|
||||
};
|
||||
|
||||
const formatTokens = (tokens: number): string => {
|
||||
if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`;
|
||||
if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`;
|
||||
return tokens.toString();
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string): string => {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 86400000) {
|
||||
return date.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
if (diff < 604800000) {
|
||||
return date.toLocaleDateString('es-ES', { weekday: 'short' });
|
||||
}
|
||||
return date.toLocaleDateString('es-ES', { month: 'short', day: 'numeric' });
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Sub-Components
|
||||
// ============================================================================
|
||||
|
||||
interface ContextWindowVisualizationProps {
|
||||
contextWindow: ContextWindow;
|
||||
}
|
||||
|
||||
const ContextWindowVisualization: React.FC<ContextWindowVisualizationProps> = ({ contextWindow }) => {
|
||||
const segments = [
|
||||
{ label: 'System Prompt', value: contextWindow.systemPrompt, color: 'bg-purple-500' },
|
||||
{ label: 'Conversation', value: contextWindow.conversationHistory, color: 'bg-blue-500' },
|
||||
{ label: 'Tools', value: contextWindow.tools, color: 'bg-emerald-500' },
|
||||
{ label: 'Reserved', value: contextWindow.reserved, color: 'bg-gray-400' },
|
||||
];
|
||||
|
||||
const available = contextWindow.max - contextWindow.used;
|
||||
const usagePercent = (contextWindow.used / contextWindow.max) * 100;
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white mb-3">Context Window</h4>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden flex">
|
||||
{segments.map((segment, i) => (
|
||||
<div
|
||||
key={segment.label}
|
||||
className={`${segment.color} transition-all`}
|
||||
style={{ width: `${(segment.value / contextWindow.max) * 100}%` }}
|
||||
title={`${segment.label}: ${formatTokens(segment.value)}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
{segments.map((segment) => (
|
||||
<div key={segment.label} className="flex items-center gap-2 text-xs">
|
||||
<div className={`w-3 h-3 rounded ${segment.color}`} />
|
||||
<span className="text-gray-600 dark:text-gray-400">{segment.label}</span>
|
||||
<span className="text-gray-900 dark:text-white font-medium">{formatTokens(segment.value)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 flex justify-between text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">Used:</span>
|
||||
<span className={`ml-1 font-medium ${usagePercent > 80 ? 'text-red-500' : 'text-gray-900 dark:text-white'}`}>
|
||||
{formatTokens(contextWindow.used)} ({usagePercent.toFixed(0)}%)
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Available:</span>
|
||||
<span className="ml-1 font-medium text-emerald-500">{formatTokens(available)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{usagePercent > 80 && (
|
||||
<div className="mt-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg flex items-center gap-2 text-xs text-yellow-600 dark:text-yellow-400">
|
||||
<ExclamationTriangleIcon className="w-4 h-4" />
|
||||
<span>Context window is filling up. Consider archiving old conversations.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface ConversationListItemProps {
|
||||
conversation: ConversationRecord;
|
||||
onArchive?: () => void;
|
||||
onRestore?: () => void;
|
||||
onExport?: () => void;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
const ConversationListItem: React.FC<ConversationListItemProps> = ({
|
||||
conversation,
|
||||
onArchive,
|
||||
onRestore,
|
||||
onExport,
|
||||
onDelete,
|
||||
}) => {
|
||||
const [showActions, setShowActions] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-lg transition-colors"
|
||||
onMouseEnter={() => setShowActions(true)}
|
||||
onMouseLeave={() => { setShowActions(false); setConfirmDelete(false); }}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`p-2 rounded-lg ${conversation.archived ? 'bg-gray-200 dark:bg-gray-700' : 'bg-blue-100 dark:bg-blue-900/30'}`}>
|
||||
{conversation.archived ? (
|
||||
<ArchiveBoxIcon className="w-4 h-4 text-gray-500" />
|
||||
) : (
|
||||
<DocumentTextIcon className="w-4 h-4 text-blue-500" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-gray-900 dark:text-white text-sm truncate">
|
||||
{conversation.title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate mt-0.5">
|
||||
{conversation.preview}
|
||||
</p>
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-400">
|
||||
<span>{conversation.messageCount} messages</span>
|
||||
<span>{formatTokens(conversation.tokenCount)} tokens</span>
|
||||
<span>{formatDate(conversation.updatedAt)}</span>
|
||||
</div>
|
||||
{conversation.tags && conversation.tags.length > 0 && (
|
||||
<div className="flex gap-1 mt-1.5">
|
||||
{conversation.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-500 text-xs rounded"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className={`flex items-center gap-1 transition-opacity ${showActions ? 'opacity-100' : 'opacity-0'}`}>
|
||||
{!confirmDelete ? (
|
||||
<>
|
||||
{conversation.archived ? (
|
||||
onRestore && (
|
||||
<button
|
||||
onClick={onRestore}
|
||||
className="p-1.5 text-gray-400 hover:text-emerald-500 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded-lg"
|
||||
title="Restore"
|
||||
>
|
||||
<ArrowPathIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)
|
||||
) : (
|
||||
onArchive && (
|
||||
<button
|
||||
onClick={onArchive}
|
||||
className="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg"
|
||||
title="Archive"
|
||||
>
|
||||
<ArchiveBoxIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
{onExport && (
|
||||
<button
|
||||
onClick={onExport}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
|
||||
title="Export"
|
||||
>
|
||||
<ArrowDownTrayIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg"
|
||||
title="Delete"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={onDelete}
|
||||
className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConfirmDelete(false)}
|
||||
className="p-1 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<XMarkIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export const MemoryManager: React.FC<MemoryManagerProps> = ({
|
||||
conversations,
|
||||
memoryUsage,
|
||||
contextWindow,
|
||||
onClearConversation,
|
||||
onArchiveConversation,
|
||||
onRestoreConversation,
|
||||
onExportConversation,
|
||||
onDeleteConversation,
|
||||
onClearAllArchived,
|
||||
onRefreshUsage,
|
||||
isLoading = false,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'active' | 'archived'>('active');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortBy, setSortBy] = useState<'recent' | 'tokens' | 'messages'>('recent');
|
||||
|
||||
const filteredConversations = useMemo(() => {
|
||||
let filtered = conversations.filter((c) =>
|
||||
activeTab === 'archived' ? c.archived : !c.archived
|
||||
);
|
||||
|
||||
if (searchQuery.trim()) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter((c) =>
|
||||
c.title.toLowerCase().includes(query) ||
|
||||
c.preview.toLowerCase().includes(query) ||
|
||||
c.tags?.some((t) => t.toLowerCase().includes(query))
|
||||
);
|
||||
}
|
||||
|
||||
filtered.sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'tokens':
|
||||
return b.tokenCount - a.tokenCount;
|
||||
case 'messages':
|
||||
return b.messageCount - a.messageCount;
|
||||
default:
|
||||
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
|
||||
}
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [conversations, activeTab, searchQuery, sortBy]);
|
||||
|
||||
const activeConversations = conversations.filter((c) => !c.archived);
|
||||
const archivedConversations = conversations.filter((c) => c.archived);
|
||||
|
||||
const usagePercent = (memoryUsage.totalTokens / memoryUsage.maxTokens) * 100;
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CircleStackIcon className="w-5 h-5 text-primary-500" />
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Memory Manager</h3>
|
||||
</div>
|
||||
{onRefreshUsage && (
|
||||
<button
|
||||
onClick={onRefreshUsage}
|
||||
disabled={isLoading}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg disabled:opacity-50"
|
||||
title="Refresh"
|
||||
>
|
||||
<ArrowPathIcon className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Usage Overview */}
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{formatTokens(memoryUsage.totalTokens)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Total Tokens</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{memoryUsage.activeConversations}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Active</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{memoryUsage.archivedConversations}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Archived</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{formatBytes(memoryUsage.totalStorageKB)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Storage</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage Bar */}
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span className="text-gray-500">Memory Usage</span>
|
||||
<span className={`font-medium ${usagePercent > 80 ? 'text-red-500' : 'text-gray-900 dark:text-white'}`}>
|
||||
{usagePercent.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all ${
|
||||
usagePercent > 80 ? 'bg-red-500' : usagePercent > 60 ? 'bg-yellow-500' : 'bg-emerald-500'
|
||||
}`}
|
||||
style={{ width: `${usagePercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Context Window Visualization */}
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<ContextWindowVisualization contextWindow={contextWindow} />
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => setActiveTab('active')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'active'
|
||||
? 'border-primary-500 text-primary-500'
|
||||
: 'border-transparent text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<FolderIcon className="w-4 h-4" />
|
||||
Active ({activeConversations.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('archived')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'archived'
|
||||
? 'border-primary-500 text-primary-500'
|
||||
: 'border-transparent text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<ArchiveBoxIcon className="w-4 h-4" />
|
||||
Archived ({archivedConversations.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search & Sort */}
|
||||
<div className="p-3 border-b border-gray-200 dark:border-gray-700 flex items-center gap-3">
|
||||
<div className="flex-1 relative">
|
||||
<MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search conversations..."
|
||||
className="w-full pl-9 pr-3 py-2 text-sm bg-gray-100 dark:bg-gray-800 border-0 rounded-lg focus:ring-2 focus:ring-primary-500"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as typeof sortBy)}
|
||||
className="px-3 py-2 text-sm bg-gray-100 dark:bg-gray-800 border-0 rounded-lg focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
<option value="recent">Most Recent</option>
|
||||
<option value="tokens">Most Tokens</option>
|
||||
<option value="messages">Most Messages</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Conversation List */}
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{filteredConversations.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
|
||||
{activeTab === 'archived' ? (
|
||||
<ArchiveBoxIcon className="w-6 h-6 text-gray-400" />
|
||||
) : (
|
||||
<DocumentTextIcon className="w-6 h-6 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm">
|
||||
{searchQuery
|
||||
? 'No conversations match your search'
|
||||
: activeTab === 'archived'
|
||||
? 'No archived conversations'
|
||||
: 'No active conversations'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
{filteredConversations.map((conversation) => (
|
||||
<ConversationListItem
|
||||
key={conversation.id}
|
||||
conversation={conversation}
|
||||
onArchive={onArchiveConversation ? () => onArchiveConversation(conversation.id) : undefined}
|
||||
onRestore={onRestoreConversation ? () => onRestoreConversation(conversation.id) : undefined}
|
||||
onExport={onExportConversation ? () => onExportConversation(conversation.id) : undefined}
|
||||
onDelete={onDeleteConversation ? () => onDeleteConversation(conversation.id) : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
{activeTab === 'archived' && archivedConversations.length > 0 && onClearAllArchived && (
|
||||
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
||||
<button
|
||||
onClick={onClearAllArchived}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
Clear All Archived ({archivedConversations.length})
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemoryManager;
|
||||
@ -77,3 +77,15 @@ export type { TokenUsage, TokenCosts, SessionTokenStats, TokenUsageDisplayProps
|
||||
// Prompt Library (OQI-007)
|
||||
export { default as PromptLibrary } from './PromptLibrary';
|
||||
export type { Prompt, PromptCategory, PromptLibraryProps } from './PromptLibrary';
|
||||
|
||||
// Memory Management (OQI-007 - SUBTASK-008)
|
||||
export { default as MemoryManager } from './MemoryManager';
|
||||
export type { ConversationRecord, MemoryUsage, ContextWindow } from './MemoryManager';
|
||||
|
||||
// LLM Tools Integration (OQI-007 - SUBTASK-008)
|
||||
export { default as LLMToolsPanel } from './LLMToolsPanel';
|
||||
export type { LLMTool, ToolParameter, ToolExecution } from './LLMToolsPanel';
|
||||
|
||||
// Fine-Tuning Interface (OQI-007 - SUBTASK-008)
|
||||
export { default as FineTuningPanel } from './FineTuningPanel';
|
||||
export type { BaseModel, TrainingDataset, FineTunedModel, TrainingConfig } from './FineTuningPanel';
|
||||
|
||||
426
src/modules/education/components/EarnedCertificates.tsx
Normal file
426
src/modules/education/components/EarnedCertificates.tsx
Normal file
@ -0,0 +1,426 @@
|
||||
/**
|
||||
* EarnedCertificates Component
|
||||
* Displays all earned certificates for user profile
|
||||
* OQI-002: Modulo Educativo - SUBTASK-007
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import {
|
||||
Award,
|
||||
Download,
|
||||
Share2,
|
||||
ExternalLink,
|
||||
Calendar,
|
||||
Clock,
|
||||
BadgeCheck,
|
||||
Search,
|
||||
Grid,
|
||||
List,
|
||||
Trophy,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
|
||||
export interface EarnedCertificate {
|
||||
id: string;
|
||||
credentialId: string;
|
||||
courseId: string;
|
||||
courseTitle: string;
|
||||
courseThumbnail?: string;
|
||||
instructorName: string;
|
||||
completedAt: string;
|
||||
issuedAt: string;
|
||||
grade?: number;
|
||||
xpEarned: number;
|
||||
courseDurationHours: number;
|
||||
skills?: string[];
|
||||
verificationUrl?: string;
|
||||
downloadUrl?: string;
|
||||
}
|
||||
|
||||
interface EarnedCertificatesProps {
|
||||
certificates: EarnedCertificate[];
|
||||
loading?: boolean;
|
||||
onDownload?: (certificateId: string) => void;
|
||||
onShare?: (certificateId: string, platform: 'linkedin' | 'twitter' | 'email' | 'copy') => void;
|
||||
onViewCertificate?: (certificateId: string) => void;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
type ViewMode = 'grid' | 'list';
|
||||
type SortBy = 'newest' | 'oldest' | 'grade' | 'course';
|
||||
|
||||
const EarnedCertificates: React.FC<EarnedCertificatesProps> = ({
|
||||
certificates,
|
||||
loading = false,
|
||||
onDownload,
|
||||
onShare,
|
||||
onViewCertificate,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('grid');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortBy, setSortBy] = useState<SortBy>('newest');
|
||||
const [showShareMenu, setShowShareMenu] = useState<string | null>(null);
|
||||
|
||||
// Filter and sort certificates
|
||||
const filteredCertificates = useMemo(() => {
|
||||
let result = [...certificates];
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
result = result.filter(
|
||||
(cert) =>
|
||||
cert.courseTitle.toLowerCase().includes(query) ||
|
||||
cert.instructorName.toLowerCase().includes(query) ||
|
||||
cert.skills?.some((skill) => skill.toLowerCase().includes(query))
|
||||
);
|
||||
}
|
||||
|
||||
// Sort
|
||||
switch (sortBy) {
|
||||
case 'oldest':
|
||||
result.sort((a, b) => new Date(a.issuedAt).getTime() - new Date(b.issuedAt).getTime());
|
||||
break;
|
||||
case 'grade':
|
||||
result.sort((a, b) => (b.grade || 0) - (a.grade || 0));
|
||||
break;
|
||||
case 'course':
|
||||
result.sort((a, b) => a.courseTitle.localeCompare(b.courseTitle));
|
||||
break;
|
||||
case 'newest':
|
||||
default:
|
||||
result.sort((a, b) => new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime());
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [certificates, searchQuery, sortBy]);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('es-ES', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const handleShare = (certId: string, platform: 'linkedin' | 'twitter' | 'email' | 'copy') => {
|
||||
onShare?.(certId, platform);
|
||||
setShowShareMenu(null);
|
||||
};
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-xl border border-gray-700 ${compact ? 'p-3' : 'p-4'}`}>
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 text-yellow-400 animate-spin" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Empty state
|
||||
if (certificates.length === 0) {
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-xl border border-gray-700 ${compact ? 'p-3' : 'p-4'}`}>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-yellow-500/20 rounded-lg">
|
||||
<Award className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-white">Mis Certificados</h3>
|
||||
</div>
|
||||
<div className="text-center py-8">
|
||||
<Trophy className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400">Aun no has obtenido ningun certificado</p>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Completa cursos para obtener certificados
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-xl border border-gray-700 ${compact ? 'p-3' : 'p-4'}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-yellow-500/20 rounded-lg">
|
||||
<Award className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Mis Certificados</h3>
|
||||
<p className="text-xs text-gray-500">{certificates.length} certificados obtenidos</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View Toggle */}
|
||||
<div className="flex items-center gap-1 bg-gray-700 rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setViewMode('grid')}
|
||||
className={`p-1.5 rounded ${
|
||||
viewMode === 'grid' ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Grid className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-1.5 rounded ${
|
||||
viewMode === 'list' ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<List className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Sort */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar certificados..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-9 pr-4 py-2 bg-gray-900/50 border border-gray-700 rounded-lg text-sm text-white placeholder-gray-500 focus:border-yellow-500/50 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as SortBy)}
|
||||
className="px-3 py-2 bg-gray-900/50 border border-gray-700 rounded-lg text-sm text-white focus:border-yellow-500/50 focus:outline-none"
|
||||
>
|
||||
<option value="newest">Mas recientes</option>
|
||||
<option value="oldest">Mas antiguos</option>
|
||||
<option value="grade">Por calificacion</option>
|
||||
<option value="course">Por curso</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Certificates Display */}
|
||||
{filteredCertificates.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-400">No se encontraron certificados</p>
|
||||
</div>
|
||||
) : viewMode === 'grid' ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredCertificates.map((cert) => (
|
||||
<div
|
||||
key={cert.id}
|
||||
className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl border border-yellow-500/20 overflow-hidden hover:border-yellow-500/40 transition-colors group"
|
||||
>
|
||||
{/* Certificate Preview */}
|
||||
<div
|
||||
className="relative aspect-[1.4/1] bg-gradient-to-r from-yellow-600/10 via-amber-500/10 to-yellow-600/10 p-4 cursor-pointer"
|
||||
onClick={() => onViewCertificate?.(cert.id)}
|
||||
>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-center p-4">
|
||||
<Award className="w-10 h-10 text-yellow-400 mb-2" />
|
||||
<p className="text-xs text-yellow-400/70 mb-1">Certificado de Finalizacion</p>
|
||||
<p className="text-sm font-medium text-white line-clamp-2">{cert.courseTitle}</p>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2">
|
||||
<BadgeCheck className="w-6 h-6 text-yellow-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Certificate Info */}
|
||||
<div className="p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-gray-400 flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{formatDate(cert.issuedAt)}
|
||||
</span>
|
||||
{cert.grade && (
|
||||
<span className="text-xs text-green-400 font-medium">{cert.grade}%</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-400 mb-3">{cert.instructorName}</p>
|
||||
|
||||
{/* Skills Tags */}
|
||||
{cert.skills && cert.skills.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mb-3">
|
||||
{cert.skills.slice(0, 3).map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
{cert.skills.length > 3 && (
|
||||
<span className="text-xs text-gray-500">+{cert.skills.length - 3}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{onDownload && (
|
||||
<button
|
||||
onClick={() => onDownload(cert.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 py-1.5 bg-gray-700 hover:bg-gray-600 text-white text-xs rounded transition-colors"
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
PDF
|
||||
</button>
|
||||
)}
|
||||
{onShare && (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() =>
|
||||
setShowShareMenu(showShareMenu === cert.id ? null : cert.id)
|
||||
}
|
||||
className="p-1.5 bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors"
|
||||
>
|
||||
<Share2 className="w-3 h-3" />
|
||||
</button>
|
||||
{showShareMenu === cert.id && (
|
||||
<div className="absolute bottom-full right-0 mb-2 w-36 bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-10">
|
||||
<div className="p-1">
|
||||
<button
|
||||
onClick={() => handleShare(cert.id, 'linkedin')}
|
||||
className="w-full px-3 py-1.5 text-xs text-left text-white hover:bg-gray-700 rounded"
|
||||
>
|
||||
LinkedIn
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleShare(cert.id, 'twitter')}
|
||||
className="w-full px-3 py-1.5 text-xs text-left text-white hover:bg-gray-700 rounded"
|
||||
>
|
||||
Twitter
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleShare(cert.id, 'copy')}
|
||||
className="w-full px-3 py-1.5 text-xs text-left text-white hover:bg-gray-700 rounded"
|
||||
>
|
||||
Copiar enlace
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{cert.verificationUrl && (
|
||||
<a
|
||||
href={cert.verificationUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1.5 bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filteredCertificates.map((cert) => (
|
||||
<div
|
||||
key={cert.id}
|
||||
className="flex items-center gap-4 p-4 bg-gray-900/50 rounded-lg border border-gray-700 hover:border-yellow-500/30 transition-colors"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="p-3 bg-yellow-500/20 rounded-lg flex-shrink-0">
|
||||
<Award className="w-6 h-6 text-yellow-400" />
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4
|
||||
className="font-medium text-white truncate cursor-pointer hover:text-yellow-400 transition-colors"
|
||||
onClick={() => onViewCertificate?.(cert.id)}
|
||||
>
|
||||
{cert.courseTitle}
|
||||
</h4>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-400 mt-1">
|
||||
<span>{cert.instructorName}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{formatDate(cert.issuedAt)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{cert.courseDurationHours}h
|
||||
</span>
|
||||
</div>
|
||||
{cert.skills && cert.skills.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{cert.skills.slice(0, 4).map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Grade */}
|
||||
{cert.grade && (
|
||||
<div className="text-right flex-shrink-0">
|
||||
<div className="text-xl font-bold text-green-400">{cert.grade}%</div>
|
||||
<div className="text-xs text-gray-500">Calificacion</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{onDownload && (
|
||||
<button
|
||||
onClick={() => onDownload(cert.id)}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
|
||||
title="Descargar PDF"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{onShare && (
|
||||
<button
|
||||
onClick={() => handleShare(cert.id, 'copy')}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
|
||||
title="Compartir"
|
||||
>
|
||||
<Share2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{cert.verificationUrl && (
|
||||
<a
|
||||
href={cert.verificationUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
|
||||
title="Verificar"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Credential ID Info */}
|
||||
<div className="mt-4 p-3 bg-gray-900/50 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center gap-2 text-xs text-gray-400">
|
||||
<BadgeCheck className="w-4 h-4 text-green-400" />
|
||||
<span>
|
||||
Todos los certificados incluyen un ID unico de verificacion para validar su autenticidad
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EarnedCertificates;
|
||||
305
src/modules/education/components/QuizHistoryCard.tsx
Normal file
305
src/modules/education/components/QuizHistoryCard.tsx
Normal file
@ -0,0 +1,305 @@
|
||||
/**
|
||||
* QuizHistoryCard Component
|
||||
* Displays user's quiz attempt history with scores and trends
|
||||
* OQI-002: Modulo Educativo - SUBTASK-007
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import {
|
||||
Trophy,
|
||||
Clock,
|
||||
Target,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Calendar,
|
||||
BarChart3,
|
||||
RefreshCw,
|
||||
Award,
|
||||
Minus,
|
||||
} from 'lucide-react';
|
||||
|
||||
export interface QuizAttemptHistory {
|
||||
id: string;
|
||||
quizId: string;
|
||||
quizTitle: string;
|
||||
score: number;
|
||||
maxScore: number;
|
||||
percentage: number;
|
||||
passed: boolean;
|
||||
passingScore: number;
|
||||
timeSpentMinutes: number;
|
||||
timeLimitMinutes?: number;
|
||||
correctAnswers: number;
|
||||
totalQuestions: number;
|
||||
xpEarned: number;
|
||||
attemptNumber: number;
|
||||
submittedAt: string;
|
||||
}
|
||||
|
||||
interface QuizHistoryCardProps {
|
||||
attempts: QuizAttemptHistory[];
|
||||
onRetakeQuiz?: (quizId: string) => void;
|
||||
onViewDetails?: (attemptId: string) => void;
|
||||
compact?: boolean;
|
||||
limit?: number;
|
||||
showQuizTitle?: boolean;
|
||||
}
|
||||
|
||||
const QuizHistoryCard: React.FC<QuizHistoryCardProps> = ({
|
||||
attempts,
|
||||
onRetakeQuiz,
|
||||
onViewDetails,
|
||||
compact = false,
|
||||
limit,
|
||||
showQuizTitle = true,
|
||||
}) => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
// Sort attempts by date (newest first)
|
||||
const sortedAttempts = useMemo(() => {
|
||||
return [...attempts].sort(
|
||||
(a, b) => new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime()
|
||||
);
|
||||
}, [attempts]);
|
||||
|
||||
// Calculate statistics
|
||||
const stats = useMemo(() => {
|
||||
if (attempts.length === 0) {
|
||||
return {
|
||||
totalAttempts: 0,
|
||||
passedCount: 0,
|
||||
passRate: 0,
|
||||
averageScore: 0,
|
||||
bestScore: 0,
|
||||
worstScore: 0,
|
||||
trend: 0,
|
||||
totalXpEarned: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const passedCount = attempts.filter((a) => a.passed).length;
|
||||
const scores = attempts.map((a) => a.percentage);
|
||||
const averageScore = scores.reduce((sum, s) => sum + s, 0) / scores.length;
|
||||
const bestScore = Math.max(...scores);
|
||||
const worstScore = Math.min(...scores);
|
||||
const totalXpEarned = attempts.reduce((sum, a) => sum + a.xpEarned, 0);
|
||||
|
||||
// Calculate trend (last 3 attempts)
|
||||
let trend = 0;
|
||||
if (sortedAttempts.length >= 2) {
|
||||
const recentAttempts = sortedAttempts.slice(0, Math.min(3, sortedAttempts.length));
|
||||
const latestScore = recentAttempts[0].percentage;
|
||||
const olderScore = recentAttempts[recentAttempts.length - 1].percentage;
|
||||
trend = latestScore - olderScore;
|
||||
}
|
||||
|
||||
return {
|
||||
totalAttempts: attempts.length,
|
||||
passedCount,
|
||||
passRate: (passedCount / attempts.length) * 100,
|
||||
averageScore,
|
||||
bestScore,
|
||||
worstScore,
|
||||
trend,
|
||||
totalXpEarned,
|
||||
};
|
||||
}, [attempts, sortedAttempts]);
|
||||
|
||||
const displayedAttempts = limit && !expanded ? sortedAttempts.slice(0, limit) : sortedAttempts;
|
||||
const hasMore = limit ? sortedAttempts.length > limit : false;
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('es-ES', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const formatTime = (minutes: number) => {
|
||||
if (minutes < 1) return `${Math.round(minutes * 60)}s`;
|
||||
return `${Math.floor(minutes)}m ${Math.round((minutes % 1) * 60)}s`;
|
||||
};
|
||||
|
||||
const getScoreColor = (percentage: number, passingScore: number) => {
|
||||
if (percentage >= passingScore) return 'text-green-400';
|
||||
if (percentage >= passingScore * 0.8) return 'text-yellow-400';
|
||||
return 'text-red-400';
|
||||
};
|
||||
|
||||
const getTrendIcon = (trend: number) => {
|
||||
if (trend > 5) return <TrendingUp className="w-4 h-4 text-green-400" />;
|
||||
if (trend < -5) return <TrendingDown className="w-4 h-4 text-red-400" />;
|
||||
return <Minus className="w-4 h-4 text-gray-400" />;
|
||||
};
|
||||
|
||||
if (attempts.length === 0) {
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-xl border border-gray-700 ${compact ? 'p-3' : 'p-4'}`}>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-purple-500/20 rounded-lg">
|
||||
<BarChart3 className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-white">Historial de Quizzes</h3>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm text-center py-6">
|
||||
Aun no has completado ningun quiz
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-xl border border-gray-700 ${compact ? 'p-3' : 'p-4'}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-500/20 rounded-lg">
|
||||
<BarChart3 className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Historial de Quizzes</h3>
|
||||
<p className="text-xs text-gray-500">{stats.totalAttempts} intentos totales</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{getTrendIcon(stats.trend)}
|
||||
<span
|
||||
className={`text-sm ${
|
||||
stats.trend > 0 ? 'text-green-400' : stats.trend < 0 ? 'text-red-400' : 'text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{stats.trend > 0 ? '+' : ''}
|
||||
{stats.trend.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Statistics Summary */}
|
||||
<div className="grid grid-cols-4 gap-2 mb-4">
|
||||
<div className="p-2 bg-gray-900/50 rounded-lg text-center">
|
||||
<div className="text-lg font-bold text-white">{stats.averageScore.toFixed(0)}%</div>
|
||||
<div className="text-xs text-gray-500">Promedio</div>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-900/50 rounded-lg text-center">
|
||||
<div className="text-lg font-bold text-green-400">{stats.bestScore.toFixed(0)}%</div>
|
||||
<div className="text-xs text-gray-500">Mejor</div>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-900/50 rounded-lg text-center">
|
||||
<div className="text-lg font-bold text-white">{stats.passRate.toFixed(0)}%</div>
|
||||
<div className="text-xs text-gray-500">Aprobados</div>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-900/50 rounded-lg text-center">
|
||||
<div className="text-lg font-bold text-purple-400">{stats.totalXpEarned}</div>
|
||||
<div className="text-xs text-gray-500">XP Total</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attempts List */}
|
||||
<div className="space-y-2">
|
||||
{displayedAttempts.map((attempt) => (
|
||||
<div
|
||||
key={attempt.id}
|
||||
className={`p-3 rounded-lg border transition-colors ${
|
||||
attempt.passed
|
||||
? 'bg-green-500/5 border-green-500/20 hover:border-green-500/40'
|
||||
: 'bg-red-500/5 border-red-500/20 hover:border-red-500/40'
|
||||
} ${onViewDetails ? 'cursor-pointer' : ''}`}
|
||||
onClick={() => onViewDetails?.(attempt.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`p-1.5 rounded-full ${
|
||||
attempt.passed ? 'bg-green-500/20' : 'bg-red-500/20'
|
||||
}`}
|
||||
>
|
||||
{attempt.passed ? (
|
||||
<CheckCircle className="w-4 h-4 text-green-400" />
|
||||
) : (
|
||||
<XCircle className="w-4 h-4 text-red-400" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{showQuizTitle && (
|
||||
<p className="text-sm font-medium text-white truncate max-w-[200px]">
|
||||
{attempt.quizTitle}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{formatDate(attempt.submittedAt)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatTime(attempt.timeSpentMinutes)}
|
||||
</span>
|
||||
<span>Intento #{attempt.attemptNumber}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<div
|
||||
className={`text-lg font-bold ${getScoreColor(
|
||||
attempt.percentage,
|
||||
attempt.passingScore
|
||||
)}`}
|
||||
>
|
||||
{attempt.percentage.toFixed(0)}%
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{attempt.correctAnswers}/{attempt.totalQuestions}
|
||||
</div>
|
||||
{attempt.xpEarned > 0 && (
|
||||
<div className="text-xs text-purple-400 flex items-center justify-end gap-1">
|
||||
<Award className="w-3 h-3" />+{attempt.xpEarned} XP
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Show More / Less */}
|
||||
{hasMore && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="w-full mt-3 py-2 text-sm text-gray-400 hover:text-white transition-colors flex items-center justify-center gap-1"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
Mostrar menos
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
Ver {sortedAttempts.length - (limit || 0)} mas
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Retake Button */}
|
||||
{onRetakeQuiz && sortedAttempts.length > 0 && !sortedAttempts[0].passed && (
|
||||
<button
|
||||
onClick={() => onRetakeQuiz(sortedAttempts[0].quizId)}
|
||||
className="w-full mt-4 py-2.5 bg-purple-600 hover:bg-purple-500 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Reintentar ultimo quiz
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuizHistoryCard;
|
||||
@ -33,3 +33,9 @@ export { default as CertificateGenerator } from './CertificateGenerator';
|
||||
export type { CertificateData, CertificateTemplate } from './CertificateGenerator';
|
||||
export { default as LiveStreamPlayer } from './LiveStreamPlayer';
|
||||
export type { StreamInfo, ChatMessage, StreamReaction } from './LiveStreamPlayer';
|
||||
|
||||
// Quiz History & Earned Certificates (OQI-002 - SUBTASK-007)
|
||||
export { default as QuizHistoryCard } from './QuizHistoryCard';
|
||||
export type { QuizAttemptHistory } from './QuizHistoryCard';
|
||||
export { default as EarnedCertificates } from './EarnedCertificates';
|
||||
export type { EarnedCertificate } from './EarnedCertificates';
|
||||
|
||||
@ -127,6 +127,30 @@ export default function CourseDetail() {
|
||||
const isEnrolled = !!currentCourse.userEnrollment;
|
||||
const enrollment = currentCourse.userEnrollment;
|
||||
|
||||
// Find the next lesson to continue from (first incomplete lesson or last accessed)
|
||||
const getResumeLessonId = (): string | null => {
|
||||
if (!currentCourse?.modules) return null;
|
||||
|
||||
// Flatten all lessons with their module order
|
||||
const allLessons: LessonListItem[] = [];
|
||||
currentCourse.modules
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder)
|
||||
.forEach((module) => {
|
||||
module.lessons
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder)
|
||||
.forEach((lesson) => allLessons.push(lesson));
|
||||
});
|
||||
|
||||
// Find first incomplete lesson
|
||||
const incompleteLesson = allLessons.find((lesson) => !lesson.isCompleted);
|
||||
if (incompleteLesson) return incompleteLesson.id;
|
||||
|
||||
// If all completed, return first lesson for review
|
||||
return allLessons[0]?.id || null;
|
||||
};
|
||||
|
||||
const resumeLessonId = getResumeLessonId();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back Link */}
|
||||
@ -278,11 +302,11 @@ export default function CourseDetail() {
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => navigate(`/education/courses/${slug}/lesson/1`)}
|
||||
onClick={() => navigate(`/education/courses/${slug}/lesson/${resumeLessonId || '1'}`)}
|
||||
className="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<Play className="w-5 h-5" />
|
||||
{enrollment.progressPercentage > 0 ? 'Continuar Curso' : 'Empezar Curso'}
|
||||
{enrollment.progressPercentage > 0 ? 'Continuar donde lo dejaste' : 'Empezar Curso'}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
186
src/modules/marketplace/components/AdvisoryCard.tsx
Normal file
186
src/modules/marketplace/components/AdvisoryCard.tsx
Normal file
@ -0,0 +1,186 @@
|
||||
/**
|
||||
* Advisory Card Component
|
||||
* Displays advisory service with advisor profile, specializations, and booking options
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Star,
|
||||
CheckCircle,
|
||||
Calendar,
|
||||
Clock,
|
||||
MessageCircle,
|
||||
Award,
|
||||
} from 'lucide-react';
|
||||
import type { MarketplaceProductListItem } from '../../../types/marketplace.types';
|
||||
|
||||
interface AdvisoryCardProps {
|
||||
advisory: MarketplaceProductListItem;
|
||||
onBook?: (advisoryId: string) => void;
|
||||
}
|
||||
|
||||
export const AdvisoryCard: React.FC<AdvisoryCardProps> = ({ advisory, onBook }) => {
|
||||
const availabilityColors: Record<string, { bg: string; text: string; dot: string }> = {
|
||||
available: { bg: 'bg-green-500/10', text: 'text-green-400', dot: 'bg-green-400' },
|
||||
busy: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', dot: 'bg-yellow-400' },
|
||||
away: { bg: 'bg-orange-500/10', text: 'text-orange-400', dot: 'bg-orange-400' },
|
||||
offline: { bg: 'bg-gray-500/10', text: 'text-gray-400', dot: 'bg-gray-400' },
|
||||
};
|
||||
|
||||
// Determine availability from tags (mock implementation)
|
||||
const getAvailability = () => {
|
||||
if (advisory.tags.includes('available')) return 'available';
|
||||
if (advisory.tags.includes('busy')) return 'busy';
|
||||
return 'available';
|
||||
};
|
||||
|
||||
const availability = getAvailability();
|
||||
const colors = availabilityColors[availability];
|
||||
|
||||
// Extract specializations from tags
|
||||
const specializations = advisory.tags.filter(
|
||||
(t) => !['available', 'busy', 'away', 'offline'].includes(t)
|
||||
).slice(0, 4);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden hover:border-gray-600 transition-all duration-200 hover:shadow-lg hover:shadow-purple-500/5">
|
||||
{/* Advisor Header */}
|
||||
<div className="p-5 border-b border-gray-700">
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Avatar */}
|
||||
<div className="relative">
|
||||
{advisory.providerAvatar ? (
|
||||
<img
|
||||
src={advisory.providerAvatar}
|
||||
alt={advisory.providerName}
|
||||
className="w-16 h-16 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white text-xl font-bold">
|
||||
{advisory.providerName.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
{/* Availability indicator */}
|
||||
<div
|
||||
className={`absolute -bottom-1 -right-1 w-5 h-5 rounded-full border-2 border-gray-800 ${colors.dot}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Advisor Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-lg font-semibold text-white truncate">
|
||||
{advisory.providerName}
|
||||
</h3>
|
||||
{advisory.providerVerified && (
|
||||
<CheckCircle className="w-4 h-4 text-blue-400 flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mb-2">{advisory.name}</p>
|
||||
<div
|
||||
className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs ${colors.bg} ${colors.text}`}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${colors.dot}`} />
|
||||
{availability.charAt(0).toUpperCase() + availability.slice(1)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-5">
|
||||
{/* Description */}
|
||||
<p className="text-sm text-gray-400 mb-4 line-clamp-2">
|
||||
{advisory.shortDescription || 'Expert trading advisor with years of market experience.'}
|
||||
</p>
|
||||
|
||||
{/* Specializations */}
|
||||
<div className="mb-4">
|
||||
<p className="text-xs text-gray-500 mb-2">Specializations</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{specializations.length > 0 ? (
|
||||
specializations.map((spec, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 bg-purple-500/10 text-purple-400 text-xs rounded-full"
|
||||
>
|
||||
{spec}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<span className="px-2 py-1 bg-purple-500/10 text-purple-400 text-xs rounded-full">
|
||||
Technical Analysis
|
||||
</span>
|
||||
<span className="px-2 py-1 bg-purple-500/10 text-purple-400 text-xs rounded-full">
|
||||
Risk Management
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-3 mb-4">
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-1 mb-1">
|
||||
<Star className="w-4 h-4 text-yellow-400" />
|
||||
<span className="font-semibold text-white">{advisory.rating.toFixed(1)}</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Rating</p>
|
||||
</div>
|
||||
<div className="text-center border-x border-gray-700">
|
||||
<div className="flex items-center justify-center gap-1 mb-1">
|
||||
<MessageCircle className="w-4 h-4 text-blue-400" />
|
||||
<span className="font-semibold text-white">{advisory.totalReviews}</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Reviews</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-1 mb-1">
|
||||
<Award className="w-4 h-4 text-green-400" />
|
||||
<span className="font-semibold text-white">
|
||||
{advisory.totalSubscribers || 0}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Sessions</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Response Time */}
|
||||
<div className="flex items-center gap-2 mb-4 p-2 bg-gray-900/50 rounded-lg">
|
||||
<Clock className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-sm text-gray-400">
|
||||
Typically responds in <span className="text-white">2 hours</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Price and CTA */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-gray-700">
|
||||
<div>
|
||||
<span className="text-lg font-bold text-white">${advisory.priceUsd}</span>
|
||||
<span className="text-gray-400 text-sm">/session</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
to={`/marketplace/advisory/${advisory.slug}`}
|
||||
className="px-3 py-2 text-gray-400 hover:text-white text-sm font-medium transition-colors"
|
||||
>
|
||||
Profile
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => onBook?.(advisory.id)}
|
||||
className="px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white text-sm font-medium rounded-lg transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Calendar className="w-4 h-4" />
|
||||
Book
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvisoryCard;
|
||||
179
src/modules/marketplace/components/CourseProductCard.tsx
Normal file
179
src/modules/marketplace/components/CourseProductCard.tsx
Normal file
@ -0,0 +1,179 @@
|
||||
/**
|
||||
* Course Product Card Component
|
||||
* Displays course product for marketplace with enrollment options
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Star,
|
||||
Users,
|
||||
Clock,
|
||||
BookOpen,
|
||||
CheckCircle,
|
||||
Play,
|
||||
} from 'lucide-react';
|
||||
import type { MarketplaceProductListItem } from '../../../types/marketplace.types';
|
||||
|
||||
interface CourseProductCardProps {
|
||||
course: MarketplaceProductListItem;
|
||||
onEnroll?: (courseId: string) => void;
|
||||
}
|
||||
|
||||
export const CourseProductCard: React.FC<CourseProductCardProps> = ({ course, onEnroll }) => {
|
||||
const difficultyColors: Record<string, string> = {
|
||||
beginner: 'bg-green-500/20 text-green-400',
|
||||
intermediate: 'bg-yellow-500/20 text-yellow-400',
|
||||
advanced: 'bg-red-500/20 text-red-400',
|
||||
};
|
||||
|
||||
// Extract difficulty from tags
|
||||
const getDifficulty = () => {
|
||||
const level = course.tags.find((t) =>
|
||||
['beginner', 'intermediate', 'advanced'].includes(t.toLowerCase())
|
||||
);
|
||||
return level?.toLowerCase() || 'beginner';
|
||||
};
|
||||
|
||||
const difficulty = getDifficulty();
|
||||
|
||||
return (
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden hover:border-gray-600 transition-all duration-200 hover:shadow-lg hover:shadow-green-500/5">
|
||||
{/* Thumbnail */}
|
||||
<div className="relative h-40 bg-gradient-to-br from-green-600/20 to-teal-600/20">
|
||||
{course.thumbnailUrl ? (
|
||||
<img
|
||||
src={course.thumbnailUrl}
|
||||
alt={course.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<BookOpen className="w-16 h-16 text-green-500/50" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Play icon overlay */}
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 hover:opacity-100 transition-opacity">
|
||||
<div className="w-14 h-14 rounded-full bg-white/90 flex items-center justify-center">
|
||||
<Play className="w-6 h-6 text-gray-900 ml-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Free badge */}
|
||||
{course.priceUsd === 0 && (
|
||||
<div className="absolute top-3 left-3 px-2 py-1 bg-green-500 text-white text-xs font-medium rounded-full">
|
||||
FREE
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Difficulty badge */}
|
||||
<div
|
||||
className={`absolute top-3 right-3 px-2 py-1 text-xs font-medium rounded-full ${
|
||||
difficultyColors[difficulty]
|
||||
}`}
|
||||
>
|
||||
{difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4">
|
||||
{/* Instructor info */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{course.providerAvatar ? (
|
||||
<img
|
||||
src={course.providerAvatar}
|
||||
alt={course.providerName}
|
||||
className="w-7 h-7 rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-7 h-7 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 text-xs">
|
||||
{course.providerName.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-sm text-gray-400 truncate flex items-center gap-1">
|
||||
{course.providerName}
|
||||
{course.providerVerified && (
|
||||
<CheckCircle className="w-3.5 h-3.5 text-blue-400" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-lg font-semibold text-white mb-2 line-clamp-2 min-h-[3.5rem]">
|
||||
{course.name}
|
||||
</h3>
|
||||
|
||||
{/* Meta info */}
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400 mb-4">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-4 h-4" />
|
||||
{Math.floor(Math.random() * 10) + 2}h
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<BookOpen className="w-4 h-4" />
|
||||
{Math.floor(Math.random() * 30) + 5} lessons
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Rating and Enrollments */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
|
||||
<span className="font-semibold text-white">{course.rating.toFixed(1)}</span>
|
||||
<span className="text-gray-500 text-sm">({course.totalReviews})</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-gray-400 text-sm">
|
||||
<Users className="w-4 h-4" />
|
||||
{(course.totalSubscribers || 0).toLocaleString()} enrolled
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Topics/Tags */}
|
||||
<div className="flex flex-wrap gap-1 mb-4">
|
||||
{course.tags
|
||||
.filter((t) => !['beginner', 'intermediate', 'advanced'].includes(t.toLowerCase()))
|
||||
.slice(0, 3)
|
||||
.map((tag, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-0.5 bg-gray-700 text-gray-300 text-xs rounded"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Price and CTA */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-gray-700">
|
||||
<div>
|
||||
{course.priceUsd === 0 ? (
|
||||
<span className="text-xl font-bold text-green-400">Free</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-xl font-bold text-white">${course.priceUsd}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
to={`/marketplace/courses/${course.slug}`}
|
||||
className="px-3 py-2 text-gray-400 hover:text-white text-sm font-medium transition-colors"
|
||||
>
|
||||
Preview
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => onEnroll?.(course.id)}
|
||||
className="px-4 py-2 bg-green-600 hover:bg-green-500 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
{course.priceUsd === 0 ? 'Enroll Free' : 'Buy Course'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CourseProductCard;
|
||||
30
src/modules/marketplace/components/ProductCard.tsx
Normal file
30
src/modules/marketplace/components/ProductCard.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Product Card Component
|
||||
* Generic product card that adapts to different product types
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import type { MarketplaceProductListItem } from '../../../types/marketplace.types';
|
||||
import { SignalPackCard } from './SignalPackCard';
|
||||
import { AdvisoryCard } from './AdvisoryCard';
|
||||
import { CourseProductCard } from './CourseProductCard';
|
||||
|
||||
interface ProductCardProps {
|
||||
product: MarketplaceProductListItem;
|
||||
onAction?: (productId: string) => void;
|
||||
}
|
||||
|
||||
export const ProductCard: React.FC<ProductCardProps> = ({ product, onAction }) => {
|
||||
switch (product.productType) {
|
||||
case 'signals':
|
||||
return <SignalPackCard pack={product} onSubscribe={onAction} />;
|
||||
case 'advisory':
|
||||
return <AdvisoryCard advisory={product} onBook={onAction} />;
|
||||
case 'courses':
|
||||
return <CourseProductCard course={product} onEnroll={onAction} />;
|
||||
default:
|
||||
return <SignalPackCard pack={product} onSubscribe={onAction} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default ProductCard;
|
||||
123
src/modules/marketplace/components/ReviewCard.tsx
Normal file
123
src/modules/marketplace/components/ReviewCard.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
/**
|
||||
* Review Card Component
|
||||
* Displays product review with rating, comment, and helpful count
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Star, ThumbsUp, CheckCircle, MessageCircle } from 'lucide-react';
|
||||
import type { ProductReview } from '../../../types/marketplace.types';
|
||||
|
||||
interface ReviewCardProps {
|
||||
review: ProductReview;
|
||||
onMarkHelpful?: (reviewId: string) => void;
|
||||
}
|
||||
|
||||
export const ReviewCard: React.FC<ReviewCardProps> = ({ review, onMarkHelpful }) => {
|
||||
const [isHelpful, setIsHelpful] = useState(false);
|
||||
|
||||
const handleMarkHelpful = () => {
|
||||
if (!isHelpful) {
|
||||
setIsHelpful(true);
|
||||
onMarkHelpful?.(review.id);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gray-800/50 rounded-xl border border-gray-700 p-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
{/* Avatar */}
|
||||
{review.userAvatar ? (
|
||||
<img
|
||||
src={review.userAvatar}
|
||||
alt={review.userName}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 font-medium">
|
||||
{review.userName.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* User info and rating */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-medium text-white">{review.userName}</h4>
|
||||
{review.verified && (
|
||||
<span className="flex items-center gap-1 text-xs text-green-400">
|
||||
<CheckCircle className="w-3.5 h-3.5" />
|
||||
Verified Purchase
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Rating and date */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
className={`w-4 h-4 ${
|
||||
star <= review.rating
|
||||
? 'text-yellow-400 fill-yellow-400'
|
||||
: 'text-gray-600'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-gray-500">{formatDate(review.createdAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Review title */}
|
||||
{review.title && (
|
||||
<h5 className="font-semibold text-white mb-2">{review.title}</h5>
|
||||
)}
|
||||
|
||||
{/* Review content */}
|
||||
<p className="text-gray-300 mb-4 leading-relaxed">{review.comment}</p>
|
||||
|
||||
{/* Provider response */}
|
||||
{review.response && (
|
||||
<div className="bg-gray-900/50 rounded-lg p-4 mb-4 border-l-2 border-blue-500">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<MessageCircle className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-sm font-medium text-blue-400">Provider Response</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{formatDate(review.response.respondedAt)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">{review.response.comment}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-gray-700">
|
||||
<button
|
||||
onClick={handleMarkHelpful}
|
||||
disabled={isHelpful}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors ${
|
||||
isHelpful
|
||||
? 'bg-blue-500/20 text-blue-400 cursor-not-allowed'
|
||||
: 'text-gray-400 hover:text-white hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<ThumbsUp className={`w-4 h-4 ${isHelpful ? 'fill-current' : ''}`} />
|
||||
Helpful ({review.helpful + (isHelpful ? 1 : 0)})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReviewCard;
|
||||
174
src/modules/marketplace/components/SignalPackCard.tsx
Normal file
174
src/modules/marketplace/components/SignalPackCard.tsx
Normal file
@ -0,0 +1,174 @@
|
||||
/**
|
||||
* Signal Pack Card Component
|
||||
* Displays signal pack summary with provider info, stats, and subscription options
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Star,
|
||||
Users,
|
||||
BarChart2,
|
||||
CheckCircle,
|
||||
Zap,
|
||||
} from 'lucide-react';
|
||||
import type { MarketplaceProductListItem } from '../../../types/marketplace.types';
|
||||
|
||||
interface SignalPackCardProps {
|
||||
pack: MarketplaceProductListItem;
|
||||
onSubscribe?: (packId: string) => void;
|
||||
}
|
||||
|
||||
export const SignalPackCard: React.FC<SignalPackCardProps> = ({ pack, onSubscribe }) => {
|
||||
const riskLevelColors: Record<string, string> = {
|
||||
low: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||
medium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||
high: 'bg-red-500/20 text-red-400 border-red-500/30',
|
||||
};
|
||||
|
||||
const getRiskTag = () => {
|
||||
const tag = pack.tags.find((t) => ['low', 'medium', 'high'].includes(t.toLowerCase()));
|
||||
return tag || 'medium';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden hover:border-gray-600 transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/5">
|
||||
{/* Header with thumbnail */}
|
||||
<div className="relative h-40 bg-gradient-to-br from-blue-600/20 to-purple-600/20">
|
||||
{pack.thumbnailUrl ? (
|
||||
<img
|
||||
src={pack.thumbnailUrl}
|
||||
alt={pack.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<BarChart2 className="w-16 h-16 text-blue-500/50" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Free trial badge */}
|
||||
{pack.hasFreeTrial && (
|
||||
<div className="absolute top-3 left-3 px-2 py-1 bg-green-500 text-white text-xs font-medium rounded-full flex items-center gap-1">
|
||||
<Zap className="w-3 h-3" />
|
||||
Free Trial
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Risk level badge */}
|
||||
<div
|
||||
className={`absolute top-3 right-3 px-2 py-1 text-xs font-medium rounded-full border ${
|
||||
riskLevelColors[getRiskTag()]
|
||||
}`}
|
||||
>
|
||||
{getRiskTag().charAt(0).toUpperCase() + getRiskTag().slice(1)} Risk
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4">
|
||||
{/* Provider info */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{pack.providerAvatar ? (
|
||||
<img
|
||||
src={pack.providerAvatar}
|
||||
alt={pack.providerName}
|
||||
className="w-8 h-8 rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 text-sm">
|
||||
{pack.providerName.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-gray-400 truncate flex items-center gap-1">
|
||||
{pack.providerName}
|
||||
{pack.providerVerified && (
|
||||
<CheckCircle className="w-3.5 h-3.5 text-blue-400" />
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-lg font-semibold text-white mb-2 line-clamp-1">
|
||||
{pack.name}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-gray-400 mb-4 line-clamp-2">
|
||||
{pack.shortDescription || 'Professional trading signals for consistent profits.'}
|
||||
</p>
|
||||
|
||||
{/* Stats grid */}
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
<div className="bg-gray-900/50 rounded-lg p-2.5">
|
||||
<div className="flex items-center gap-1.5 text-gray-400 text-xs mb-1">
|
||||
<TrendingUp className="w-3.5 h-3.5" />
|
||||
Win Rate
|
||||
</div>
|
||||
<p className="text-green-400 font-semibold">
|
||||
{(Math.random() * 20 + 70).toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-900/50 rounded-lg p-2.5">
|
||||
<div className="flex items-center gap-1.5 text-gray-400 text-xs mb-1">
|
||||
<Users className="w-3.5 h-3.5" />
|
||||
Subscribers
|
||||
</div>
|
||||
<p className="text-white font-semibold">
|
||||
{pack.totalSubscribers?.toLocaleString() || '0'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
className={`w-4 h-4 ${
|
||||
star <= Math.round(pack.rating)
|
||||
? 'text-yellow-400 fill-yellow-400'
|
||||
: 'text-gray-600'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-gray-400">
|
||||
({pack.totalReviews} reviews)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Price and CTA */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-gray-700">
|
||||
<div>
|
||||
<span className="text-2xl font-bold text-white">
|
||||
${pack.priceUsd}
|
||||
</span>
|
||||
<span className="text-gray-400 text-sm">/mo</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
to={`/marketplace/signals/${pack.slug}`}
|
||||
className="px-3 py-2 text-gray-400 hover:text-white text-sm font-medium transition-colors"
|
||||
>
|
||||
Details
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => onSubscribe?.(pack.id)}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignalPackCard;
|
||||
9
src/modules/marketplace/components/index.ts
Normal file
9
src/modules/marketplace/components/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Marketplace Components Index
|
||||
*/
|
||||
|
||||
export { SignalPackCard } from './SignalPackCard';
|
||||
export { AdvisoryCard } from './AdvisoryCard';
|
||||
export { CourseProductCard } from './CourseProductCard';
|
||||
export { ProductCard } from './ProductCard';
|
||||
export { ReviewCard } from './ReviewCard';
|
||||
453
src/modules/marketplace/pages/AdvisoryDetail.tsx
Normal file
453
src/modules/marketplace/pages/AdvisoryDetail.tsx
Normal file
@ -0,0 +1,453 @@
|
||||
/**
|
||||
* Advisory Service Detail Page
|
||||
* Full details of an advisory service with advisor profile, availability, and booking
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Star,
|
||||
CheckCircle,
|
||||
Calendar,
|
||||
Clock,
|
||||
MessageCircle,
|
||||
Award,
|
||||
Globe,
|
||||
Shield,
|
||||
Video,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
import { useMarketplaceStore } from '../../../stores/marketplaceStore';
|
||||
import { ReviewCard } from '../components';
|
||||
import type { ServiceType } from '../../../types/marketplace.types';
|
||||
|
||||
export default function AdvisoryDetail() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const {
|
||||
currentAdvisory: advisory,
|
||||
reviews,
|
||||
totalReviews,
|
||||
availableSlots,
|
||||
availabilityTimezone,
|
||||
loadingDetail,
|
||||
loadingReviews,
|
||||
loadingAvailability,
|
||||
error,
|
||||
fetchAdvisoryBySlug,
|
||||
fetchReviews,
|
||||
fetchAdvisorAvailability,
|
||||
bookConsultation,
|
||||
markReviewHelpful,
|
||||
resetCurrentProduct,
|
||||
} = useMarketplaceStore();
|
||||
|
||||
const [selectedService, setSelectedService] = useState<ServiceType | null>(null);
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||
const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
|
||||
const [notes, setNotes] = useState('');
|
||||
const [booking, setBooking] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
fetchAdvisoryBySlug(slug);
|
||||
}
|
||||
return () => {
|
||||
resetCurrentProduct();
|
||||
};
|
||||
}, [slug, fetchAdvisoryBySlug, resetCurrentProduct]);
|
||||
|
||||
useEffect(() => {
|
||||
if (advisory) {
|
||||
fetchReviews(advisory.id, 'advisory', { page: 1, pageSize: 5, sortBy: 'helpful' });
|
||||
// Set default service
|
||||
if (advisory.serviceTypes.length > 0 && !selectedService) {
|
||||
setSelectedService(advisory.serviceTypes[0]);
|
||||
}
|
||||
}
|
||||
}, [advisory, fetchReviews, selectedService]);
|
||||
|
||||
useEffect(() => {
|
||||
if (advisory && selectedDate) {
|
||||
const dateStr = selectedDate.toISOString().split('T')[0];
|
||||
fetchAdvisorAvailability(advisory.id, dateStr);
|
||||
}
|
||||
}, [advisory, selectedDate, fetchAdvisorAvailability]);
|
||||
|
||||
const handleDateChange = (direction: 'prev' | 'next') => {
|
||||
const newDate = new Date(selectedDate);
|
||||
if (direction === 'next') {
|
||||
newDate.setDate(newDate.getDate() + 1);
|
||||
} else {
|
||||
newDate.setDate(newDate.getDate() - 1);
|
||||
}
|
||||
setSelectedDate(newDate);
|
||||
setSelectedSlot(null);
|
||||
};
|
||||
|
||||
const handleBook = async () => {
|
||||
if (!advisory || !selectedService || !selectedSlot) return;
|
||||
setBooking(true);
|
||||
try {
|
||||
await bookConsultation(advisory.id, {
|
||||
serviceTypeId: selectedService.id,
|
||||
scheduledAt: `${selectedDate.toISOString().split('T')[0]}T${selectedSlot}:00.000Z`,
|
||||
notes: notes || undefined,
|
||||
});
|
||||
// Show success or redirect
|
||||
} catch (err) {
|
||||
console.error('Failed to book:', err);
|
||||
} finally {
|
||||
setBooking(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loadingDetail) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-96">
|
||||
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !advisory) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-96">
|
||||
<AlertCircle className="w-12 h-12 text-red-400 mb-4" />
|
||||
<h2 className="text-xl font-semibold text-white mb-2">Advisory Not Found</h2>
|
||||
<p className="text-gray-400 mb-4">{error || 'The requested advisory does not exist.'}</p>
|
||||
<Link
|
||||
to="/marketplace"
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg"
|
||||
>
|
||||
Back to Marketplace
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const isToday = (date: Date) => {
|
||||
const today = new Date();
|
||||
return date.toDateString() === today.toDateString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Back link */}
|
||||
<Link
|
||||
to="/marketplace"
|
||||
className="inline-flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Marketplace
|
||||
</Link>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Left Column - Advisor Info */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Advisor Header */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<div className="flex items-start gap-6">
|
||||
{/* Avatar */}
|
||||
<div className="relative flex-shrink-0">
|
||||
{advisory.advisor.avatarUrl ? (
|
||||
<img
|
||||
src={advisory.advisor.avatarUrl}
|
||||
alt={advisory.advisor.name}
|
||||
className="w-24 h-24 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white text-2xl font-bold">
|
||||
{advisory.advisor.name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
{/* Online indicator */}
|
||||
{advisory.availability === 'available' && (
|
||||
<div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-green-500 border-4 border-gray-800" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-2xl font-bold text-white">{advisory.advisor.name}</h1>
|
||||
{advisory.advisor.verified && (
|
||||
<CheckCircle className="w-6 h-6 text-blue-400" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{advisory.advisor.title && (
|
||||
<p className="text-lg text-gray-400 mb-2">{advisory.advisor.title}</p>
|
||||
)}
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-5 h-5 text-yellow-400 fill-yellow-400" />
|
||||
<span className="text-white font-medium">{advisory.rating.toFixed(1)}</span>
|
||||
<span className="text-gray-500">({advisory.totalReviews} reviews)</span>
|
||||
</div>
|
||||
<span className="text-gray-600">|</span>
|
||||
<div className="flex items-center gap-1 text-gray-400">
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
<span>{advisory.totalConsultations} consultations</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Experience */}
|
||||
<p className="text-gray-300">{advisory.advisor.experience}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* About */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">About</h2>
|
||||
<p className="text-gray-300 mb-6">{advisory.description}</p>
|
||||
|
||||
{/* Credentials */}
|
||||
{advisory.advisor.credentials.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-medium text-gray-400 mb-3">Credentials</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{advisory.advisor.credentials.map((cred, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-3 py-1.5 bg-blue-500/10 text-blue-400 rounded-lg text-sm flex items-center gap-2"
|
||||
>
|
||||
<Award className="w-4 h-4" />
|
||||
{cred}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Specializations */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-medium text-gray-400 mb-3">Specializations</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{advisory.specializations.map((spec, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-3 py-1.5 bg-purple-500/10 text-purple-400 rounded-lg text-sm"
|
||||
>
|
||||
{spec}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Languages */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400 mb-3">Languages</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{advisory.languages.map((lang, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-3 py-1.5 bg-gray-700 text-gray-300 rounded-lg text-sm flex items-center gap-2"
|
||||
>
|
||||
<Globe className="w-4 h-4" />
|
||||
{lang}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service Types */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">Services Offered</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{advisory.serviceTypes.map((service) => (
|
||||
<div
|
||||
key={service.id}
|
||||
className={`p-4 rounded-lg border-2 cursor-pointer transition-colors ${
|
||||
selectedService?.id === service.id
|
||||
? 'border-purple-500 bg-purple-500/10'
|
||||
: 'border-gray-700 hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => setSelectedService(service)}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="font-medium text-white">{service.name}</h3>
|
||||
<p className="text-lg font-bold text-white">${service.priceUsd}</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mb-2">{service.description}</p>
|
||||
<p className="text-sm text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-4 h-4" />
|
||||
{service.durationMinutes} minutes
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reviews Section */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white">
|
||||
Reviews ({totalReviews})
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{loadingReviews ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="w-6 h-6 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
) : reviews.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{reviews.map((review) => (
|
||||
<ReviewCard
|
||||
key={review.id}
|
||||
review={review}
|
||||
onMarkHelpful={markReviewHelpful}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-400 text-center py-8">No reviews yet.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Booking */}
|
||||
<div className="space-y-6">
|
||||
{/* Booking Card */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6 sticky top-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">Book a Consultation</h2>
|
||||
|
||||
{/* Selected Service */}
|
||||
{selectedService && (
|
||||
<div className="mb-4 p-3 bg-gray-900/50 rounded-lg">
|
||||
<p className="text-sm text-gray-400 mb-1">Selected Service</p>
|
||||
<p className="font-medium text-white">{selectedService.name}</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
{selectedService.durationMinutes} min - ${selectedService.priceUsd}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Date Picker */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<button
|
||||
onClick={() => handleDateChange('prev')}
|
||||
disabled={isToday(selectedDate)}
|
||||
className="p-2 text-gray-400 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<div className="text-center">
|
||||
<p className="font-medium text-white">{formatDate(selectedDate)}</p>
|
||||
<p className="text-xs text-gray-500">{availabilityTimezone}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDateChange('next')}
|
||||
className="p-2 text-gray-400 hover:text-white"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Time Slots */}
|
||||
<div className="mb-4">
|
||||
<p className="text-sm text-gray-400 mb-3">Available Times</p>
|
||||
{loadingAvailability ? (
|
||||
<div className="flex justify-center py-4">
|
||||
<Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
) : availableSlots.length > 0 ? (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{availableSlots.map((slot) => (
|
||||
<button
|
||||
key={slot}
|
||||
onClick={() => setSelectedSlot(slot)}
|
||||
className={`py-2 px-3 rounded-lg text-sm font-medium transition-colors ${
|
||||
selectedSlot === slot
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-gray-900 text-gray-400 hover:text-white hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{slot}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 text-center py-4">No slots available</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm text-gray-400 mb-2">
|
||||
Notes (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="What would you like to discuss?"
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Book Button */}
|
||||
<button
|
||||
onClick={handleBook}
|
||||
disabled={booking || !selectedService || !selectedSlot}
|
||||
className="w-full py-3 bg-purple-600 hover:bg-purple-500 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{booking ? (
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Calendar className="w-5 h-5" />
|
||||
Book Consultation
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Price Summary */}
|
||||
{selectedService && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-700">
|
||||
<div className="flex items-center justify-between text-lg">
|
||||
<span className="text-gray-400">Total</span>
|
||||
<span className="font-bold text-white">${selectedService.priceUsd}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Trust Signals */}
|
||||
<div className="mt-6 pt-6 border-t border-gray-700 space-y-3">
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Video className="w-5 h-5 text-blue-400" />
|
||||
<span>Video call via Zoom/Meet</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Shield className="w-5 h-5 text-green-400" />
|
||||
<span>Full refund if cancelled 24h before</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Clock className="w-5 h-5 text-purple-400" />
|
||||
<span>Responds in ~{advisory.responseTimeHours}h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
396
src/modules/marketplace/pages/MarketplaceCatalog.tsx
Normal file
396
src/modules/marketplace/pages/MarketplaceCatalog.tsx
Normal file
@ -0,0 +1,396 @@
|
||||
/**
|
||||
* Marketplace Catalog Page
|
||||
* Main marketplace page with grid/list view, filters, search, and sorting
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Search,
|
||||
Filter,
|
||||
X,
|
||||
Loader2,
|
||||
Grid,
|
||||
List,
|
||||
SlidersHorizontal,
|
||||
ChevronDown,
|
||||
} from 'lucide-react';
|
||||
import { useMarketplaceStore } from '../../../stores/marketplaceStore';
|
||||
import { ProductCard } from '../components';
|
||||
import type { ProductCategory, MarketplaceFilters } from '../../../types/marketplace.types';
|
||||
|
||||
const categoryOptions: { value: ProductCategory | ''; label: string; icon: string }[] = [
|
||||
{ value: '', label: 'All Products', icon: '📦' },
|
||||
{ value: 'signals', label: 'Signal Packs', icon: '📊' },
|
||||
{ value: 'courses', label: 'Courses', icon: '📚' },
|
||||
{ value: 'advisory', label: 'Advisory Services', icon: '👨💼' },
|
||||
{ value: 'tools', label: 'Trading Tools', icon: '🛠️' },
|
||||
];
|
||||
|
||||
const sortOptions = [
|
||||
{ value: 'newest', label: 'Newest' },
|
||||
{ value: 'popular', label: 'Most Popular' },
|
||||
{ value: 'rating', label: 'Top Rated' },
|
||||
{ value: 'price_asc', label: 'Price: Low to High' },
|
||||
{ value: 'price_desc', label: 'Price: High to Low' },
|
||||
];
|
||||
|
||||
export default function MarketplaceCatalog() {
|
||||
const {
|
||||
products,
|
||||
featuredProducts,
|
||||
totalProducts,
|
||||
currentPage,
|
||||
pageSize,
|
||||
loadingProducts,
|
||||
fetchProducts,
|
||||
fetchFeaturedProducts,
|
||||
setFilters,
|
||||
filters,
|
||||
} = useMarketplaceStore();
|
||||
|
||||
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState<ProductCategory | ''>('');
|
||||
const [sortBy, setSortBy] = useState<MarketplaceFilters['sortBy']>('popular');
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [minRating, setMinRating] = useState<number | undefined>(undefined);
|
||||
const [verifiedOnly, setVerifiedOnly] = useState(false);
|
||||
const [hasFreeTrial, setHasFreeTrial] = useState(false);
|
||||
|
||||
// Load initial data
|
||||
useEffect(() => {
|
||||
fetchProducts();
|
||||
fetchFeaturedProducts();
|
||||
}, [fetchProducts, fetchFeaturedProducts]);
|
||||
|
||||
// Apply filters when they change
|
||||
useEffect(() => {
|
||||
const newFilters: MarketplaceFilters = {
|
||||
search: searchTerm || undefined,
|
||||
category: selectedCategory || undefined,
|
||||
sortBy,
|
||||
minRating,
|
||||
verified: verifiedOnly || undefined,
|
||||
hasFreeTrial: hasFreeTrial || undefined,
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
};
|
||||
setFilters(newFilters);
|
||||
fetchProducts(newFilters);
|
||||
}, [searchTerm, selectedCategory, sortBy, minRating, verifiedOnly, hasFreeTrial, setFilters, fetchProducts]);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
fetchProducts({ ...filters, search: searchTerm, page: 1 });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
fetchProducts({ ...filters, page });
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchTerm('');
|
||||
setSelectedCategory('');
|
||||
setSortBy('popular');
|
||||
setMinRating(undefined);
|
||||
setVerifiedOnly(false);
|
||||
setHasFreeTrial(false);
|
||||
};
|
||||
|
||||
const hasActiveFilters =
|
||||
searchTerm || selectedCategory || minRating || verifiedOnly || hasFreeTrial || sortBy !== 'popular';
|
||||
|
||||
const totalPages = Math.ceil(totalProducts / pageSize);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Marketplace</h1>
|
||||
<p className="text-gray-400">
|
||||
Discover premium signals, expert advisors, and trading courses
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* View mode toggle */}
|
||||
<div className="flex items-center gap-2 bg-gray-800 rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setViewMode('grid')}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
viewMode === 'grid'
|
||||
? 'bg-gray-700 text-white'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
title="Grid view"
|
||||
>
|
||||
<Grid className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
viewMode === 'list'
|
||||
? 'bg-gray-700 text-white'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
title="List view"
|
||||
>
|
||||
<List className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Pills */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categoryOptions.map((cat) => (
|
||||
<button
|
||||
key={cat.value}
|
||||
onClick={() => setSelectedCategory(cat.value as ProductCategory | '')}
|
||||
className={`px-4 py-2 rounded-full font-medium transition-colors flex items-center gap-2 ${
|
||||
selectedCategory === cat.value
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<span>{cat.icon}</span>
|
||||
<span>{cat.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-4">
|
||||
<form onSubmit={handleSearch} className="flex flex-col lg:flex-row gap-4">
|
||||
{/* Search Input */}
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search products, providers..."
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sort and Filters */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{/* Sort */}
|
||||
<div className="relative">
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as MarketplaceFilters['sortBy'])}
|
||||
className="appearance-none px-4 py-2.5 pr-10 bg-gray-900 border border-gray-700 rounded-lg text-white focus:border-blue-500 focus:outline-none cursor-pointer"
|
||||
>
|
||||
{sortOptions.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* Filter toggle */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={`px-4 py-2.5 rounded-lg border font-medium transition-colors flex items-center gap-2 ${
|
||||
showFilters || hasActiveFilters
|
||||
? 'bg-blue-500/20 border-blue-500/50 text-blue-400'
|
||||
: 'bg-gray-900 border-gray-700 text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<SlidersHorizontal className="w-4 h-4" />
|
||||
Filters
|
||||
{hasActiveFilters && (
|
||||
<span className="w-2 h-2 rounded-full bg-blue-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Clear Filters */}
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearFilters}
|
||||
className="px-4 py-2.5 text-gray-400 hover:text-white flex items-center gap-2"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Expandable Filters */}
|
||||
{showFilters && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-700 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Min Rating */}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Minimum Rating</label>
|
||||
<div className="flex gap-2">
|
||||
{[4, 4.5, 5].map((rating) => (
|
||||
<button
|
||||
key={rating}
|
||||
onClick={() => setMinRating(minRating === rating ? undefined : rating)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
|
||||
minRating === rating
|
||||
? 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/50'
|
||||
: 'bg-gray-900 text-gray-400 border border-gray-700 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{rating}+ Stars
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Verified Only */}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Provider Status</label>
|
||||
<button
|
||||
onClick={() => setVerifiedOnly(!verifiedOnly)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
verifiedOnly
|
||||
? 'bg-blue-500/20 text-blue-400 border border-blue-500/50'
|
||||
: 'bg-gray-900 text-gray-400 border border-gray-700 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Verified Only
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Free Trial */}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Pricing</label>
|
||||
<button
|
||||
onClick={() => setHasFreeTrial(!hasFreeTrial)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
hasFreeTrial
|
||||
? 'bg-green-500/20 text-green-400 border border-green-500/50'
|
||||
: 'bg-gray-900 text-gray-400 border border-gray-700 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Free Trial Available
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Count */}
|
||||
<div className="mt-4 flex items-center justify-between text-sm text-gray-400">
|
||||
<span>
|
||||
{loadingProducts ? 'Searching...' : `${totalProducts} products found`}
|
||||
</span>
|
||||
{hasActiveFilters && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Filter className="w-4 h-4" />
|
||||
Filters active
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Featured Section (only on first page without filters) */}
|
||||
{!hasActiveFilters && currentPage === 1 && featuredProducts.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold text-white mb-4">Featured</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{featuredProducts.slice(0, 3).map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product Grid/List */}
|
||||
{loadingProducts ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
) : products.length > 0 ? (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
viewMode === 'grid'
|
||||
? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
|
||||
: 'flex flex-col gap-4'
|
||||
}
|
||||
>
|
||||
{products.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2 mt-8">
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage <= 1}
|
||||
className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-gray-400 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
|
||||
let pageNum: number;
|
||||
if (totalPages <= 5) {
|
||||
pageNum = i + 1;
|
||||
} else if (currentPage <= 3) {
|
||||
pageNum = i + 1;
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
pageNum = totalPages - 4 + i;
|
||||
} else {
|
||||
pageNum = currentPage - 2 + i;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={pageNum}
|
||||
onClick={() => handlePageChange(pageNum)}
|
||||
className={`w-10 h-10 rounded-lg font-medium transition-colors ${
|
||||
currentPage === pageNum
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-800 text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage >= totalPages}
|
||||
className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-gray-400 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-800 mb-4">
|
||||
<Search className="w-8 h-8 text-gray-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-2">No products found</h3>
|
||||
<p className="text-gray-400 mb-4">
|
||||
Try adjusting your filters or search with different terms
|
||||
</p>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
399
src/modules/marketplace/pages/SignalPackDetail.tsx
Normal file
399
src/modules/marketplace/pages/SignalPackDetail.tsx
Normal file
@ -0,0 +1,399 @@
|
||||
/**
|
||||
* Signal Pack Detail Page
|
||||
* Full details of a signal pack with stats, performance history, and subscription
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Star,
|
||||
Users,
|
||||
TrendingUp,
|
||||
CheckCircle,
|
||||
BarChart2,
|
||||
Clock,
|
||||
Calendar,
|
||||
Shield,
|
||||
Zap,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { useMarketplaceStore } from '../../../stores/marketplaceStore';
|
||||
import { ReviewCard } from '../components';
|
||||
import type { SignalPackPricing } from '../../../types/marketplace.types';
|
||||
|
||||
export default function SignalPackDetail() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const {
|
||||
currentSignalPack: pack,
|
||||
reviews,
|
||||
totalReviews,
|
||||
relatedProducts,
|
||||
loadingDetail,
|
||||
loadingReviews,
|
||||
error,
|
||||
fetchSignalPackBySlug,
|
||||
fetchReviews,
|
||||
fetchRelatedProducts,
|
||||
subscribeToSignalPack,
|
||||
markReviewHelpful,
|
||||
resetCurrentProduct,
|
||||
} = useMarketplaceStore();
|
||||
|
||||
const [selectedPricing, setSelectedPricing] = useState<SignalPackPricing | null>(null);
|
||||
const [subscribing, setSubscribing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
fetchSignalPackBySlug(slug);
|
||||
}
|
||||
return () => {
|
||||
resetCurrentProduct();
|
||||
};
|
||||
}, [slug, fetchSignalPackBySlug, resetCurrentProduct]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pack) {
|
||||
fetchReviews(pack.id, 'signals', { page: 1, pageSize: 5, sortBy: 'helpful' });
|
||||
fetchRelatedProducts(pack.id);
|
||||
// Set default pricing (monthly or first available)
|
||||
const defaultPricing = pack.pricing.find((p) => p.period === 'monthly') || pack.pricing[0];
|
||||
setSelectedPricing(defaultPricing);
|
||||
}
|
||||
}, [pack, fetchReviews, fetchRelatedProducts]);
|
||||
|
||||
const handleSubscribe = async () => {
|
||||
if (!pack || !selectedPricing) return;
|
||||
setSubscribing(true);
|
||||
try {
|
||||
await subscribeToSignalPack(pack.id, selectedPricing.id);
|
||||
// Show success or redirect
|
||||
} catch (err) {
|
||||
console.error('Failed to subscribe:', err);
|
||||
} finally {
|
||||
setSubscribing(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loadingDetail) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-96">
|
||||
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !pack) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-96">
|
||||
<AlertCircle className="w-12 h-12 text-red-400 mb-4" />
|
||||
<h2 className="text-xl font-semibold text-white mb-2">Signal Pack Not Found</h2>
|
||||
<p className="text-gray-400 mb-4">{error || 'The requested signal pack does not exist.'}</p>
|
||||
<Link
|
||||
to="/marketplace"
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg"
|
||||
>
|
||||
Back to Marketplace
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const periodLabels: Record<string, string> = {
|
||||
monthly: '/month',
|
||||
quarterly: '/3 months',
|
||||
yearly: '/year',
|
||||
lifetime: 'one-time',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Back link */}
|
||||
<Link
|
||||
to="/marketplace"
|
||||
className="inline-flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Marketplace
|
||||
</Link>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Left Column - Main Info */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<div className="flex items-start gap-6">
|
||||
{/* Thumbnail */}
|
||||
<div className="w-24 h-24 rounded-xl bg-gradient-to-br from-blue-600/20 to-purple-600/20 flex items-center justify-center flex-shrink-0">
|
||||
{pack.thumbnailUrl ? (
|
||||
<img
|
||||
src={pack.thumbnailUrl}
|
||||
alt={pack.name}
|
||||
className="w-full h-full object-cover rounded-xl"
|
||||
/>
|
||||
) : (
|
||||
<BarChart2 className="w-12 h-12 text-blue-500" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-2xl font-bold text-white">{pack.name}</h1>
|
||||
{pack.hasFreeTrial && (
|
||||
<span className="px-2 py-1 bg-green-500 text-white text-xs font-medium rounded-full flex items-center gap-1">
|
||||
<Zap className="w-3 h-3" />
|
||||
{pack.freeTrialDays} Days Free
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Provider */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{pack.provider.avatarUrl ? (
|
||||
<img
|
||||
src={pack.provider.avatarUrl}
|
||||
alt={pack.provider.name}
|
||||
className="w-8 h-8 rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 text-sm">
|
||||
{pack.provider.name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-gray-400 flex items-center gap-1">
|
||||
{pack.provider.name}
|
||||
{pack.provider.verified && (
|
||||
<CheckCircle className="w-4 h-4 text-blue-400" />
|
||||
)}
|
||||
</span>
|
||||
<span className="text-gray-600">|</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
|
||||
<span className="text-white font-medium">{pack.rating.toFixed(1)}</span>
|
||||
<span className="text-gray-500">({pack.totalReviews} reviews)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-300">{pack.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Performance Stats */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">Performance Statistics</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-gray-900/50 rounded-lg p-4 text-center">
|
||||
<TrendingUp className="w-6 h-6 text-green-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold text-green-400">{pack.winRate}%</p>
|
||||
<p className="text-sm text-gray-400">Win Rate</p>
|
||||
</div>
|
||||
<div className="bg-gray-900/50 rounded-lg p-4 text-center">
|
||||
<BarChart2 className="w-6 h-6 text-blue-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold text-white">+{pack.avgProfitPercent}%</p>
|
||||
<p className="text-sm text-gray-400">Avg Profit</p>
|
||||
</div>
|
||||
<div className="bg-gray-900/50 rounded-lg p-4 text-center">
|
||||
<Calendar className="w-6 h-6 text-purple-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold text-white">{pack.avgSignalsPerWeek}</p>
|
||||
<p className="text-sm text-gray-400">Signals/Week</p>
|
||||
</div>
|
||||
<div className="bg-gray-900/50 rounded-lg p-4 text-center">
|
||||
<Users className="w-6 h-6 text-yellow-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold text-white">{pack.totalSubscribers.toLocaleString()}</p>
|
||||
<p className="text-sm text-gray-400">Subscribers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Symbols Covered */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">Symbols Covered</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{pack.symbolsCovered.map((symbol) => (
|
||||
<span
|
||||
key={symbol}
|
||||
className="px-3 py-1.5 bg-gray-900 text-gray-300 rounded-lg text-sm font-medium"
|
||||
>
|
||||
{symbol}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Signals Preview */}
|
||||
{pack.recentSignals.length > 0 && (
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">Recent Signals (Preview)</h2>
|
||||
<div className="space-y-3">
|
||||
{pack.recentSignals.slice(0, 5).map((signal) => (
|
||||
<div
|
||||
key={signal.id}
|
||||
className="flex items-center justify-between p-3 bg-gray-900/50 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`px-2 py-1 text-xs font-medium rounded ${
|
||||
signal.direction === 'long'
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: 'bg-red-500/20 text-red-400'
|
||||
}`}
|
||||
>
|
||||
{signal.direction.toUpperCase()}
|
||||
</span>
|
||||
<span className="font-medium text-white">{signal.symbol}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-gray-400 text-sm">
|
||||
Entry: ${signal.entryPrice.toFixed(2)}
|
||||
</span>
|
||||
{signal.status === 'closed' && signal.profitLossPercent !== undefined && (
|
||||
<span
|
||||
className={`font-medium ${
|
||||
signal.profitLossPercent >= 0 ? 'text-green-400' : 'text-red-400'
|
||||
}`}
|
||||
>
|
||||
{signal.profitLossPercent >= 0 ? '+' : ''}
|
||||
{signal.profitLossPercent.toFixed(2)}%
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className={`px-2 py-1 text-xs rounded ${
|
||||
signal.status === 'active'
|
||||
? 'bg-blue-500/20 text-blue-400'
|
||||
: signal.status === 'closed'
|
||||
? 'bg-gray-500/20 text-gray-400'
|
||||
: 'bg-yellow-500/20 text-yellow-400'
|
||||
}`}
|
||||
>
|
||||
{signal.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reviews Section */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white">
|
||||
Reviews ({totalReviews})
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{loadingReviews ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="w-6 h-6 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
) : reviews.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{reviews.map((review) => (
|
||||
<ReviewCard
|
||||
key={review.id}
|
||||
review={review}
|
||||
onMarkHelpful={markReviewHelpful}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-400 text-center py-8">No reviews yet.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Subscription */}
|
||||
<div className="space-y-6">
|
||||
{/* Pricing Card */}
|
||||
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6 sticky top-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">Subscribe</h2>
|
||||
|
||||
{/* Pricing Options */}
|
||||
<div className="space-y-3 mb-6">
|
||||
{pack.pricing.map((pricing) => (
|
||||
<button
|
||||
key={pricing.id}
|
||||
onClick={() => setSelectedPricing(pricing)}
|
||||
className={`w-full p-4 rounded-lg border-2 transition-colors text-left ${
|
||||
selectedPricing?.id === pricing.id
|
||||
? 'border-blue-500 bg-blue-500/10'
|
||||
: 'border-gray-700 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-white capitalize">{pricing.period}</p>
|
||||
{pricing.discountPercent && (
|
||||
<p className="text-sm text-green-400">
|
||||
Save {pricing.discountPercent}%
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xl font-bold text-white">
|
||||
${pricing.priceUsd}
|
||||
<span className="text-sm font-normal text-gray-400">
|
||||
{periodLabels[pricing.period]}
|
||||
</span>
|
||||
</p>
|
||||
{pricing.originalPriceUsd && (
|
||||
<p className="text-sm text-gray-500 line-through">
|
||||
${pricing.originalPriceUsd}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{pricing.isPopular && (
|
||||
<span className="inline-block mt-2 px-2 py-0.5 bg-yellow-500/20 text-yellow-400 text-xs rounded-full">
|
||||
Most Popular
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Subscribe Button */}
|
||||
<button
|
||||
onClick={handleSubscribe}
|
||||
disabled={subscribing || !selectedPricing}
|
||||
className="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{subscribing ? (
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Subscribe Now
|
||||
{pack.hasFreeTrial && (
|
||||
<span className="text-sm opacity-80">
|
||||
({pack.freeTrialDays} days free)
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Trust Signals */}
|
||||
<div className="mt-6 pt-6 border-t border-gray-700 space-y-3">
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Shield className="w-5 h-5 text-green-400" />
|
||||
<span>7-day money-back guarantee</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Clock className="w-5 h-5 text-blue-400" />
|
||||
<span>Cancel anytime</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<CheckCircle className="w-5 h-5 text-purple-400" />
|
||||
<span>Instant access to all signals</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
src/modules/marketplace/pages/index.ts
Normal file
7
src/modules/marketplace/pages/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Marketplace Pages Index
|
||||
*/
|
||||
|
||||
export { default as MarketplaceCatalog } from './MarketplaceCatalog';
|
||||
export { default as SignalPackDetail } from './SignalPackDetail';
|
||||
export { default as AdvisoryDetail } from './AdvisoryDetail';
|
||||
379
src/modules/portfolio/components/CorrelationMatrix.tsx
Normal file
379
src/modules/portfolio/components/CorrelationMatrix.tsx
Normal file
@ -0,0 +1,379 @@
|
||||
/**
|
||||
* Correlation Matrix Component
|
||||
* Displays asset correlations in a heatmap format
|
||||
* with tooltips and color-coded values
|
||||
*/
|
||||
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import {
|
||||
TableCellsIcon,
|
||||
InformationCircleIcon,
|
||||
ArrowPathIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
import type { PortfolioAllocation } from '../../../services/portfolio.service';
|
||||
|
||||
interface CorrelationMatrixProps {
|
||||
allocations: PortfolioAllocation[];
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
interface CorrelationData {
|
||||
matrix: number[][];
|
||||
assets: string[];
|
||||
}
|
||||
|
||||
// Generate realistic correlation values based on asset types
|
||||
const generateCorrelation = (asset1: string, asset2: string): number => {
|
||||
if (asset1 === asset2) return 1;
|
||||
|
||||
// Crypto assets tend to be highly correlated
|
||||
const cryptoPairs: Record<string, Record<string, number>> = {
|
||||
BTC: { ETH: 0.85, SOL: 0.78, LINK: 0.72, AVAX: 0.75, ADA: 0.68, DOT: 0.70, MATIC: 0.73, UNI: 0.65, USDT: 0.05, USDC: 0.05 },
|
||||
ETH: { BTC: 0.85, SOL: 0.82, LINK: 0.78, AVAX: 0.80, ADA: 0.72, DOT: 0.75, MATIC: 0.85, UNI: 0.82, USDT: 0.03, USDC: 0.03 },
|
||||
SOL: { BTC: 0.78, ETH: 0.82, LINK: 0.70, AVAX: 0.78, ADA: 0.65, DOT: 0.68, MATIC: 0.75, UNI: 0.70, USDT: 0.02, USDC: 0.02 },
|
||||
LINK: { BTC: 0.72, ETH: 0.78, SOL: 0.70, AVAX: 0.72, ADA: 0.62, DOT: 0.65, MATIC: 0.68, UNI: 0.75, USDT: 0.01, USDC: 0.01 },
|
||||
AVAX: { BTC: 0.75, ETH: 0.80, SOL: 0.78, LINK: 0.72, ADA: 0.68, DOT: 0.70, MATIC: 0.72, UNI: 0.68, USDT: 0.02, USDC: 0.02 },
|
||||
ADA: { BTC: 0.68, ETH: 0.72, SOL: 0.65, LINK: 0.62, AVAX: 0.68, DOT: 0.72, MATIC: 0.65, UNI: 0.60, USDT: 0.01, USDC: 0.01 },
|
||||
DOT: { BTC: 0.70, ETH: 0.75, SOL: 0.68, LINK: 0.65, AVAX: 0.70, ADA: 0.72, MATIC: 0.68, UNI: 0.62, USDT: 0.02, USDC: 0.02 },
|
||||
MATIC: { BTC: 0.73, ETH: 0.85, SOL: 0.75, LINK: 0.68, AVAX: 0.72, ADA: 0.65, DOT: 0.68, UNI: 0.75, USDT: 0.02, USDC: 0.02 },
|
||||
UNI: { BTC: 0.65, ETH: 0.82, SOL: 0.70, LINK: 0.75, AVAX: 0.68, ADA: 0.60, DOT: 0.62, MATIC: 0.75, USDT: 0.01, USDC: 0.01 },
|
||||
USDT: { BTC: 0.05, ETH: 0.03, SOL: 0.02, LINK: 0.01, AVAX: 0.02, ADA: 0.01, DOT: 0.02, MATIC: 0.02, UNI: 0.01, USDC: 0.98 },
|
||||
USDC: { BTC: 0.05, ETH: 0.03, SOL: 0.02, LINK: 0.01, AVAX: 0.02, ADA: 0.01, DOT: 0.02, MATIC: 0.02, UNI: 0.01, USDT: 0.98 },
|
||||
};
|
||||
|
||||
const corr1 = cryptoPairs[asset1]?.[asset2];
|
||||
const corr2 = cryptoPairs[asset2]?.[asset1];
|
||||
|
||||
if (corr1 !== undefined) return corr1;
|
||||
if (corr2 !== undefined) return corr2;
|
||||
|
||||
// Default moderate correlation for unknown pairs
|
||||
return 0.5 + (Math.random() * 0.3 - 0.15);
|
||||
};
|
||||
|
||||
// Get color based on correlation value
|
||||
const getCorrelationColor = (value: number): string => {
|
||||
if (value >= 0.8) return 'bg-red-500';
|
||||
if (value >= 0.6) return 'bg-orange-400';
|
||||
if (value >= 0.4) return 'bg-yellow-400';
|
||||
if (value >= 0.2) return 'bg-green-300';
|
||||
if (value >= 0) return 'bg-green-500';
|
||||
if (value >= -0.2) return 'bg-cyan-400';
|
||||
if (value >= -0.4) return 'bg-blue-400';
|
||||
if (value >= -0.6) return 'bg-blue-500';
|
||||
return 'bg-indigo-600';
|
||||
};
|
||||
|
||||
const getCorrelationTextColor = (value: number): string => {
|
||||
if (Math.abs(value) >= 0.6) return 'text-white';
|
||||
return 'text-gray-900';
|
||||
};
|
||||
|
||||
const getCorrelationLabel = (value: number): string => {
|
||||
if (value === 1) return 'Perfecta';
|
||||
if (value >= 0.8) return 'Muy Alta';
|
||||
if (value >= 0.6) return 'Alta';
|
||||
if (value >= 0.4) return 'Moderada';
|
||||
if (value >= 0.2) return 'Baja';
|
||||
if (value >= 0) return 'Muy Baja';
|
||||
if (value >= -0.2) return 'Inversa Baja';
|
||||
if (value >= -0.4) return 'Inversa Moderada';
|
||||
if (value >= -0.6) return 'Inversa Alta';
|
||||
return 'Inversa Muy Alta';
|
||||
};
|
||||
|
||||
export const CorrelationMatrix: React.FC<CorrelationMatrixProps> = ({
|
||||
allocations,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [hoveredCell, setHoveredCell] = useState<{ row: number; col: number } | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Generate correlation data
|
||||
const correlationData = useMemo((): CorrelationData => {
|
||||
const assets = allocations.map((a) => a.asset);
|
||||
const matrix: number[][] = [];
|
||||
|
||||
for (let i = 0; i < assets.length; i++) {
|
||||
const row: number[] = [];
|
||||
for (let j = 0; j < assets.length; j++) {
|
||||
row.push(generateCorrelation(assets[i], assets[j]));
|
||||
}
|
||||
matrix.push(row);
|
||||
}
|
||||
|
||||
return { matrix, assets };
|
||||
}, [allocations]);
|
||||
|
||||
// Calculate portfolio diversification score
|
||||
const diversificationScore = useMemo(() => {
|
||||
const { matrix } = correlationData;
|
||||
if (matrix.length < 2) return 100;
|
||||
|
||||
let totalCorr = 0;
|
||||
let count = 0;
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
for (let j = i + 1; j < matrix.length; j++) {
|
||||
totalCorr += matrix[i][j];
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
const avgCorr = count > 0 ? totalCorr / count : 0;
|
||||
// Score inversely related to average correlation
|
||||
return Math.max(0, Math.min(100, (1 - avgCorr) * 100));
|
||||
}, [correlationData]);
|
||||
|
||||
// Find highly correlated pairs
|
||||
const highCorrelationPairs = useMemo(() => {
|
||||
const pairs: Array<{ asset1: string; asset2: string; correlation: number }> = [];
|
||||
const { matrix, assets } = correlationData;
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
for (let j = i + 1; j < matrix.length; j++) {
|
||||
if (matrix[i][j] >= 0.7) {
|
||||
pairs.push({
|
||||
asset1: assets[i],
|
||||
asset2: assets[j],
|
||||
correlation: matrix[i][j],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return pairs.sort((a, b) => b.correlation - a.correlation).slice(0, 3);
|
||||
}, [correlationData]);
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-cyan-100 dark:bg-cyan-900/30 rounded-lg">
|
||||
<TableCellsIcon className="w-5 h-5 text-cyan-600" />
|
||||
</div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Correlaciones</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Diversification Score */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Diversificacion</span>
|
||||
<span className={`font-bold ${
|
||||
diversificationScore >= 60 ? 'text-green-500' :
|
||||
diversificationScore >= 40 ? 'text-yellow-500' : 'text-red-500'
|
||||
}`}>
|
||||
{diversificationScore.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${
|
||||
diversificationScore >= 60 ? 'bg-green-500' :
|
||||
diversificationScore >= 40 ? 'bg-yellow-500' : 'bg-red-500'
|
||||
}`}
|
||||
style={{ width: `${diversificationScore}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* High Correlation Warning */}
|
||||
{highCorrelationPairs.length > 0 && (
|
||||
<div className="text-xs text-orange-600 dark:text-orange-400">
|
||||
{highCorrelationPairs.length} par(es) altamente correlacionado(s)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-cyan-100 dark:bg-cyan-900/30 rounded-lg">
|
||||
<TableCellsIcon className="w-6 h-6 text-cyan-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Matriz de Correlacion</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Relaciones entre activos del portfolio
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Diversification Score Badge */}
|
||||
<div className={`px-3 py-1.5 rounded-lg ${
|
||||
diversificationScore >= 60 ? 'bg-green-100 dark:bg-green-900/30' :
|
||||
diversificationScore >= 40 ? 'bg-yellow-100 dark:bg-yellow-900/30' :
|
||||
'bg-red-100 dark:bg-red-900/30'
|
||||
}`}>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Diversificacion: </span>
|
||||
<span className={`font-bold ${
|
||||
diversificationScore >= 60 ? 'text-green-600' :
|
||||
diversificationScore >= 40 ? 'text-yellow-600' : 'text-red-600'
|
||||
}`}>
|
||||
{diversificationScore.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Correlation Matrix Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="p-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||
Activo
|
||||
</th>
|
||||
{correlationData.assets.map((asset) => (
|
||||
<th
|
||||
key={asset}
|
||||
className="p-2 text-center text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
{asset}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{correlationData.matrix.map((row, i) => (
|
||||
<tr key={correlationData.assets[i]}>
|
||||
<td className="p-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
{correlationData.assets[i]}
|
||||
</td>
|
||||
{row.map((value, j) => {
|
||||
const isHovered = hoveredCell?.row === i && hoveredCell?.col === j;
|
||||
const isHighlighted = hoveredCell !== null && (hoveredCell.row === i || hoveredCell.col === j);
|
||||
|
||||
return (
|
||||
<td
|
||||
key={j}
|
||||
className="p-1"
|
||||
onMouseEnter={() => setHoveredCell({ row: i, col: j })}
|
||||
onMouseLeave={() => setHoveredCell(null)}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
w-12 h-12 flex items-center justify-center rounded-lg cursor-pointer
|
||||
transition-all duration-150
|
||||
${getCorrelationColor(value)}
|
||||
${isHovered ? 'ring-2 ring-gray-900 dark:ring-white scale-110 z-10' : ''}
|
||||
${isHighlighted && !isHovered ? 'opacity-80' : ''}
|
||||
`}
|
||||
>
|
||||
<span className={`text-xs font-medium ${getCorrelationTextColor(value)}`}>
|
||||
{value.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Tooltip for hovered cell */}
|
||||
{hoveredCell && (
|
||||
<div className="mt-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">
|
||||
<span className="font-bold">{correlationData.assets[hoveredCell.row]}</span>
|
||||
{' / '}
|
||||
<span className="font-bold">{correlationData.assets[hoveredCell.col]}</span>
|
||||
{': '}
|
||||
<span className={`font-bold ${
|
||||
correlationData.matrix[hoveredCell.row][hoveredCell.col] >= 0.7 ? 'text-red-500' :
|
||||
correlationData.matrix[hoveredCell.row][hoveredCell.col] >= 0.4 ? 'text-yellow-500' :
|
||||
'text-green-500'
|
||||
}`}>
|
||||
{correlationData.matrix[hoveredCell.row][hoveredCell.col].toFixed(3)}
|
||||
</span>
|
||||
{' - '}
|
||||
{getCorrelationLabel(correlationData.matrix[hoveredCell.row][hoveredCell.col])}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Color Legend */}
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Escala de Correlacion
|
||||
</h4>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 w-8">-1</span>
|
||||
<div className="flex-1 h-4 rounded-full overflow-hidden flex">
|
||||
<div className="flex-1 bg-indigo-600" />
|
||||
<div className="flex-1 bg-blue-500" />
|
||||
<div className="flex-1 bg-blue-400" />
|
||||
<div className="flex-1 bg-cyan-400" />
|
||||
<div className="flex-1 bg-green-500" />
|
||||
<div className="flex-1 bg-green-300" />
|
||||
<div className="flex-1 bg-yellow-400" />
|
||||
<div className="flex-1 bg-orange-400" />
|
||||
<div className="flex-1 bg-red-500" />
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 w-4">+1</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
<span>Inversa Perfecta</span>
|
||||
<span>Sin Correlacion</span>
|
||||
<span>Correlacion Perfecta</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* High Correlation Warnings */}
|
||||
{highCorrelationPairs.length > 0 && (
|
||||
<div className="mt-6 p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
|
||||
<div className="flex items-start gap-3">
|
||||
<InformationCircleIcon className="w-5 h-5 text-orange-500 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-medium text-orange-800 dark:text-orange-200">
|
||||
Pares Altamente Correlacionados
|
||||
</p>
|
||||
<p className="text-sm text-orange-700 dark:text-orange-300 mt-1">
|
||||
Los siguientes pares de activos se mueven juntos, lo que puede reducir la diversificacion:
|
||||
</p>
|
||||
<ul className="mt-2 space-y-1">
|
||||
{highCorrelationPairs.map((pair, index) => (
|
||||
<li key={index} className="text-sm text-orange-600 dark:text-orange-400">
|
||||
<span className="font-medium">{pair.asset1}</span> - <span className="font-medium">{pair.asset2}</span>
|
||||
{': '}
|
||||
<span className="font-bold">{(pair.correlation * 100).toFixed(0)}%</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Interpretation Guide */}
|
||||
<div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Interpretacion
|
||||
</h4>
|
||||
<div className="grid md:grid-cols-3 gap-4 text-xs text-gray-600 dark:text-gray-400">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="font-medium text-green-600 mb-1">Correlacion Baja (0-0.3)</p>
|
||||
<p>Excelente para diversificacion. Los activos se mueven independientemente.</p>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="font-medium text-yellow-600 mb-1">Correlacion Moderada (0.3-0.7)</p>
|
||||
<p>Diversificacion parcial. Algunos movimientos compartidos.</p>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="font-medium text-red-600 mb-1">Correlacion Alta (0.7-1.0)</p>
|
||||
<p>Poca diversificacion. Los activos tienden a moverse juntos.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CorrelationMatrix;
|
||||
739
src/modules/portfolio/components/GoalsManager.tsx
Normal file
739
src/modules/portfolio/components/GoalsManager.tsx
Normal file
@ -0,0 +1,739 @@
|
||||
/**
|
||||
* Goals Manager Component
|
||||
* Comprehensive goal management with CRUD operations,
|
||||
* progress tracking, required savings rate calculator,
|
||||
* and goal timeline visualization
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
FlagIcon,
|
||||
PlusIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
ChartBarIcon,
|
||||
CalendarIcon,
|
||||
BanknotesIcon,
|
||||
CheckCircleIcon,
|
||||
ExclamationTriangleIcon,
|
||||
ClockIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
CalculatorIcon,
|
||||
XMarkIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
import type { PortfolioGoal } from '../../../services/portfolio.service';
|
||||
|
||||
interface GoalsManagerProps {
|
||||
goals: PortfolioGoal[];
|
||||
onCreateGoal?: () => void;
|
||||
onEditGoal?: (goalId: string) => void;
|
||||
onDeleteGoal?: (goalId: string) => void;
|
||||
onUpdateProgress?: (goalId: string, amount: number) => void;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
// Goal templates
|
||||
const GOAL_TEMPLATES = [
|
||||
{ name: 'Fondo de Emergencia', icon: '🛡️', defaultAmount: 5000, description: '3-6 meses de gastos' },
|
||||
{ name: 'Vacaciones', icon: '✈️', defaultAmount: 3000, description: 'Viaje de ensueño' },
|
||||
{ name: 'Auto', icon: '🚗', defaultAmount: 20000, description: 'Vehiculo nuevo o usado' },
|
||||
{ name: 'Casa', icon: '🏠', defaultAmount: 50000, description: 'Enganche de vivienda' },
|
||||
{ name: 'Retiro', icon: '🌴', defaultAmount: 100000, description: 'Fondo de retiro' },
|
||||
{ name: 'Educacion', icon: '🎓', defaultAmount: 15000, description: 'Estudios o capacitacion' },
|
||||
];
|
||||
|
||||
interface StatusConfig {
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const STATUS_CONFIGS: Record<string, StatusConfig> = {
|
||||
on_track: {
|
||||
icon: CheckCircleIcon,
|
||||
color: 'text-green-500',
|
||||
bgColor: 'bg-green-100 dark:bg-green-900/30',
|
||||
label: 'En Camino',
|
||||
},
|
||||
at_risk: {
|
||||
icon: ClockIcon,
|
||||
color: 'text-yellow-500',
|
||||
bgColor: 'bg-yellow-100 dark:bg-yellow-900/30',
|
||||
label: 'En Riesgo',
|
||||
},
|
||||
behind: {
|
||||
icon: ExclamationTriangleIcon,
|
||||
color: 'text-red-500',
|
||||
bgColor: 'bg-red-100 dark:bg-red-900/30',
|
||||
label: 'Atrasado',
|
||||
},
|
||||
};
|
||||
|
||||
// Savings Rate Calculator Modal
|
||||
interface SavingsCalculatorModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
goal?: PortfolioGoal;
|
||||
}
|
||||
|
||||
const SavingsCalculatorModal: React.FC<SavingsCalculatorModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
goal,
|
||||
}) => {
|
||||
const [targetAmount, setTargetAmount] = useState(goal?.targetAmount?.toString() || '10000');
|
||||
const [currentAmount, setCurrentAmount] = useState(goal?.currentAmount?.toString() || '0');
|
||||
const [targetMonths, setTargetMonths] = useState('12');
|
||||
const [expectedReturn, setExpectedReturn] = useState('8');
|
||||
|
||||
const calculation = useMemo(() => {
|
||||
const target = parseFloat(targetAmount) || 0;
|
||||
const current = parseFloat(currentAmount) || 0;
|
||||
const months = parseInt(targetMonths) || 12;
|
||||
const returnRate = (parseFloat(expectedReturn) || 0) / 100 / 12;
|
||||
|
||||
const remaining = target - current;
|
||||
|
||||
// Simple calculation without compound interest
|
||||
const simpleMonthly = remaining / months;
|
||||
|
||||
// With compound interest (future value of annuity formula)
|
||||
let compoundMonthly = simpleMonthly;
|
||||
if (returnRate > 0) {
|
||||
const fvFactor = (Math.pow(1 + returnRate, months) - 1) / returnRate;
|
||||
compoundMonthly = remaining / fvFactor;
|
||||
}
|
||||
|
||||
// Project final value with different savings rates
|
||||
const scenarios = [0.5, 0.75, 1, 1.25, 1.5].map((multiplier) => {
|
||||
const monthly = simpleMonthly * multiplier;
|
||||
let projected = current;
|
||||
for (let i = 0; i < months; i++) {
|
||||
projected = projected * (1 + returnRate) + monthly;
|
||||
}
|
||||
return {
|
||||
multiplier,
|
||||
monthly: monthly,
|
||||
projected,
|
||||
reachesGoal: projected >= target,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
remaining,
|
||||
simpleMonthly,
|
||||
compoundMonthly,
|
||||
scenarios,
|
||||
};
|
||||
}, [targetAmount, currentAmount, targetMonths, expectedReturn]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="relative min-h-screen flex items-center justify-center p-4">
|
||||
<div className="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-lg">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
||||
<CalculatorIcon className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
Calculadora de Ahorro
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
||||
>
|
||||
<XMarkIcon className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Monto Objetivo ($)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={targetAmount}
|
||||
onChange={(e) => setTargetAmount(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Ahorro Actual ($)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={currentAmount}
|
||||
onChange={(e) => setCurrentAmount(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Plazo (meses)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={targetMonths}
|
||||
onChange={(e) => setTargetMonths(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Rendimiento Anual (%)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={expectedReturn}
|
||||
onChange={(e) => setExpectedReturn(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<h4 className="font-medium text-blue-800 dark:text-blue-200 mb-3">
|
||||
Ahorro Mensual Requerido
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-blue-600 dark:text-blue-400">Sin rendimiento</p>
|
||||
<p className="text-xl font-bold text-blue-700 dark:text-blue-300">
|
||||
${calculation.simpleMonthly.toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-blue-600 dark:text-blue-400">Con {expectedReturn}% anual</p>
|
||||
<p className="text-xl font-bold text-blue-700 dark:text-blue-300">
|
||||
${calculation.compoundMonthly.toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scenarios */}
|
||||
<div className="mt-4">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Escenarios de Ahorro
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{calculation.scenarios.map((scenario) => (
|
||||
<div
|
||||
key={scenario.multiplier}
|
||||
className={`flex items-center justify-between p-2 rounded-lg ${
|
||||
scenario.reachesGoal
|
||||
? 'bg-green-50 dark:bg-green-900/20'
|
||||
: 'bg-gray-50 dark:bg-gray-700/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{scenario.reachesGoal ? (
|
||||
<CheckCircleIcon className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<ExclamationTriangleIcon className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||
${scenario.monthly.toLocaleString(undefined, { maximumFractionDigits: 0 })}/mes
|
||||
</span>
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${
|
||||
scenario.reachesGoal ? 'text-green-600' : 'text-gray-500'
|
||||
}`}>
|
||||
${scenario.projected.toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Progress Update Modal
|
||||
interface ProgressModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
goal: PortfolioGoal;
|
||||
onSave: (amount: number) => void;
|
||||
}
|
||||
|
||||
const ProgressModal: React.FC<ProgressModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
goal,
|
||||
onSave,
|
||||
}) => {
|
||||
const [amount, setAmount] = useState(goal.currentAmount.toString());
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="relative min-h-screen flex items-center justify-center p-4">
|
||||
<div className="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
|
||||
Actualizar Progreso: {goal.name}
|
||||
</h3>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Monto Actual ($)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onSave(parseFloat(amount));
|
||||
onClose();
|
||||
}}
|
||||
className="flex-1 py-2 bg-blue-600 text-white font-medium rounded-lg"
|
||||
>
|
||||
Guardar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Goal Timeline Component
|
||||
interface GoalTimelineProps {
|
||||
goals: PortfolioGoal[];
|
||||
}
|
||||
|
||||
const GoalTimeline: React.FC<GoalTimelineProps> = ({ goals }) => {
|
||||
// Sort goals by target date
|
||||
const sortedGoals = [...goals].sort(
|
||||
(a, b) => new Date(a.targetDate).getTime() - new Date(b.targetDate).getTime()
|
||||
);
|
||||
|
||||
const now = Date.now();
|
||||
const maxDate = Math.max(...sortedGoals.map((g) => new Date(g.targetDate).getTime()));
|
||||
const minDate = now;
|
||||
const range = maxDate - minDate;
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
|
||||
{sortedGoals.map((goal, index) => {
|
||||
const position = ((new Date(goal.targetDate).getTime() - minDate) / range) * 100;
|
||||
const statusConfig = STATUS_CONFIGS[goal.status];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={goal.id}
|
||||
className="absolute top-1/2 transform -translate-y-1/2"
|
||||
style={{ left: `${Math.min(95, Math.max(5, position))}%` }}
|
||||
>
|
||||
<div
|
||||
className={`w-4 h-4 rounded-full border-2 border-white ${statusConfig.bgColor} cursor-pointer`}
|
||||
title={`${goal.name}: ${goal.progress.toFixed(0)}%`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const GoalsManager: React.FC<GoalsManagerProps> = ({
|
||||
goals,
|
||||
onCreateGoal,
|
||||
onEditGoal,
|
||||
onDeleteGoal,
|
||||
onUpdateProgress,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [showCalculator, setShowCalculator] = useState(false);
|
||||
const [selectedGoal, setSelectedGoal] = useState<PortfolioGoal | null>(null);
|
||||
const [showProgressModal, setShowProgressModal] = useState(false);
|
||||
const [progressGoal, setProgressGoal] = useState<PortfolioGoal | null>(null);
|
||||
|
||||
// Summary stats
|
||||
const stats = useMemo(() => {
|
||||
const total = goals.length;
|
||||
const onTrack = goals.filter((g) => g.status === 'on_track').length;
|
||||
const atRisk = goals.filter((g) => g.status === 'at_risk').length;
|
||||
const behind = goals.filter((g) => g.status === 'behind').length;
|
||||
const totalTarget = goals.reduce((sum, g) => sum + g.targetAmount, 0);
|
||||
const totalCurrent = goals.reduce((sum, g) => sum + g.currentAmount, 0);
|
||||
const avgProgress = total > 0 ? (totalCurrent / totalTarget) * 100 : 0;
|
||||
|
||||
return { total, onTrack, atRisk, behind, totalTarget, totalCurrent, avgProgress };
|
||||
}, [goals]);
|
||||
|
||||
const handleProgressUpdate = (goalId: string, amount: number) => {
|
||||
if (onUpdateProgress) {
|
||||
onUpdateProgress(goalId, amount);
|
||||
}
|
||||
};
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
|
||||
<FlagIcon className="w-5 h-5 text-green-600" />
|
||||
</div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Metas</h3>
|
||||
</div>
|
||||
{onCreateGoal && (
|
||||
<button
|
||||
onClick={onCreateGoal}
|
||||
className="p-1.5 bg-green-100 dark:bg-green-900/30 rounded-lg text-green-600 hover:bg-green-200 dark:hover:bg-green-900/50"
|
||||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{goals.length > 0 ? (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
{goals.slice(0, 3).map((goal) => {
|
||||
const statusConfig = STATUS_CONFIGS[goal.status];
|
||||
return (
|
||||
<div key={goal.id} className="flex items-center gap-3">
|
||||
<div className={`p-1 rounded-full ${statusConfig.bgColor}`}>
|
||||
<statusConfig.icon className={`w-3 h-3 ${statusConfig.color}`} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{goal.name}
|
||||
</p>
|
||||
<div className="h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${
|
||||
goal.status === 'on_track' ? 'bg-green-500' :
|
||||
goal.status === 'at_risk' ? 'bg-yellow-500' : 'bg-red-500'
|
||||
}`}
|
||||
style={{ width: `${Math.min(100, goal.progress)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-500 dark:text-gray-400">
|
||||
{goal.progress.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{goals.length > 3 && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-3 text-center">
|
||||
+{goals.length - 3} metas mas
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-4">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
No hay metas definidas
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
|
||||
<FlagIcon className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Gestor de Metas</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{stats.total} meta(s) | {stats.avgProgress.toFixed(0)}% progreso promedio
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedGoal(null);
|
||||
setShowCalculator(true);
|
||||
}}
|
||||
className="p-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
title="Calculadora de Ahorro"
|
||||
>
|
||||
<CalculatorIcon className="w-5 h-5" />
|
||||
</button>
|
||||
{onCreateGoal && (
|
||||
<button
|
||||
onClick={onCreateGoal}
|
||||
className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg flex items-center gap-2"
|
||||
>
|
||||
<PlusIcon className="w-5 h-5" />
|
||||
Nueva Meta
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{goals.length > 0 ? (
|
||||
<>
|
||||
{/* Summary Stats */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Total Metas</p>
|
||||
<p className="text-xl font-bold text-gray-900 dark:text-white">{stats.total}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
|
||||
<p className="text-xs text-green-600">En Camino</p>
|
||||
<p className="text-xl font-bold text-green-600">{stats.onTrack}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-center">
|
||||
<p className="text-xs text-yellow-600">En Riesgo</p>
|
||||
<p className="text-xl font-bold text-yellow-600">{stats.atRisk}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
|
||||
<p className="text-xs text-red-600">Atrasados</p>
|
||||
<p className="text-xl font-bold text-red-600">{stats.behind}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Linea de Tiempo
|
||||
</h4>
|
||||
<GoalTimeline goals={goals} />
|
||||
<div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||||
<span>Hoy</span>
|
||||
<span>
|
||||
{new Date(Math.max(...goals.map(g => new Date(g.targetDate).getTime()))).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Goals List */}
|
||||
<div className="space-y-4">
|
||||
{goals.map((goal) => {
|
||||
const statusConfig = STATUS_CONFIGS[goal.status];
|
||||
const StatusIcon = statusConfig.icon;
|
||||
const daysRemaining = Math.ceil(
|
||||
(new Date(goal.targetDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={goal.id}
|
||||
className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg ${statusConfig.bgColor}`}>
|
||||
<StatusIcon className={`w-5 h-5 ${statusConfig.color}`} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-gray-900 dark:text-white">
|
||||
{goal.name}
|
||||
</h4>
|
||||
<span className={`text-xs ${statusConfig.color}`}>
|
||||
{statusConfig.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedGoal(goal);
|
||||
setShowCalculator(true);
|
||||
}}
|
||||
className="p-1.5 text-gray-400 hover:text-blue-600 transition-colors"
|
||||
title="Calculadora"
|
||||
>
|
||||
<CalculatorIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{onEditGoal && (
|
||||
<button
|
||||
onClick={() => onEditGoal(goal.id)}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
|
||||
title="Editar"
|
||||
>
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{onDeleteGoal && (
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm('¿Eliminar esta meta?')) {
|
||||
onDeleteGoal(goal.id);
|
||||
}
|
||||
}}
|
||||
className="p-1.5 text-gray-400 hover:text-red-500 transition-colors"
|
||||
title="Eliminar"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-3">
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
${goal.currentAmount.toLocaleString()} de ${goal.targetAmount.toLocaleString()}
|
||||
</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{goal.progress.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all ${
|
||||
goal.status === 'on_track' ? 'bg-green-500' :
|
||||
goal.status === 'at_risk' ? 'bg-yellow-500' : 'bg-red-500'
|
||||
}`}
|
||||
style={{ width: `${Math.min(100, goal.progress)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="grid grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Fecha Objetivo</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
{new Date(goal.targetDate).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Dias Restantes</p>
|
||||
<p className={`font-medium ${daysRemaining < 30 ? 'text-red-500' : 'text-gray-900 dark:text-white'}`}>
|
||||
{daysRemaining > 0 ? daysRemaining : 'Vencido'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Aporte Mensual</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
${goal.monthlyContribution.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Update Progress Button */}
|
||||
{onUpdateProgress && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setProgressGoal(goal);
|
||||
setShowProgressModal(true);
|
||||
}}
|
||||
className="mt-3 w-full py-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-sm font-medium rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors"
|
||||
>
|
||||
Actualizar Progreso
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<FlagIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white mb-1">
|
||||
No hay metas definidas
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
Establece tus objetivos financieros y monitorea tu progreso
|
||||
</p>
|
||||
{onCreateGoal && (
|
||||
<button
|
||||
onClick={onCreateGoal}
|
||||
className="px-6 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg"
|
||||
>
|
||||
Crear Primera Meta
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Goal Templates */}
|
||||
{goals.length === 0 && (
|
||||
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Plantillas de Metas
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{GOAL_TEMPLATES.map((template) => (
|
||||
<button
|
||||
key={template.name}
|
||||
className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-left"
|
||||
>
|
||||
<span className="text-2xl">{template.icon}</span>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white mt-1">
|
||||
{template.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
~${template.defaultAmount.toLocaleString()}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Savings Calculator Modal */}
|
||||
<SavingsCalculatorModal
|
||||
isOpen={showCalculator}
|
||||
onClose={() => setShowCalculator(false)}
|
||||
goal={selectedGoal || undefined}
|
||||
/>
|
||||
|
||||
{/* Progress Update Modal */}
|
||||
{progressGoal && (
|
||||
<ProgressModal
|
||||
isOpen={showProgressModal}
|
||||
onClose={() => {
|
||||
setShowProgressModal(false);
|
||||
setProgressGoal(null);
|
||||
}}
|
||||
goal={progressGoal}
|
||||
onSave={(amount) => handleProgressUpdate(progressGoal.id, amount)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GoalsManager;
|
||||
591
src/modules/portfolio/components/MonteCarloSimulator.tsx
Normal file
591
src/modules/portfolio/components/MonteCarloSimulator.tsx
Normal file
@ -0,0 +1,591 @@
|
||||
/**
|
||||
* Monte Carlo Simulator Component
|
||||
* Simulates portfolio performance using Monte Carlo method
|
||||
* with probability distributions and VaR calculations
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
ChartBarIcon,
|
||||
PlayIcon,
|
||||
ArrowPathIcon,
|
||||
InformationCircleIcon,
|
||||
ExclamationTriangleIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
|
||||
interface MonteCarloSimulatorProps {
|
||||
portfolioId: string;
|
||||
currentValue: number;
|
||||
annualReturn?: number;
|
||||
volatility?: number;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
interface SimulationResult {
|
||||
paths: number[][];
|
||||
finalValues: number[];
|
||||
percentiles: Record<string, number>;
|
||||
var95: number;
|
||||
var99: number;
|
||||
cvar95: number;
|
||||
expectedValue: number;
|
||||
probabilityOfLoss: number;
|
||||
probabilityOfTarget: number;
|
||||
medianValue: number;
|
||||
}
|
||||
|
||||
interface ConfidenceInterval {
|
||||
level: string;
|
||||
lower: number;
|
||||
upper: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const TIME_HORIZONS = [
|
||||
{ value: 30, label: '1 Mes' },
|
||||
{ value: 90, label: '3 Meses' },
|
||||
{ value: 180, label: '6 Meses' },
|
||||
{ value: 365, label: '1 Año' },
|
||||
{ value: 730, label: '2 Años' },
|
||||
{ value: 1825, label: '5 Años' },
|
||||
];
|
||||
|
||||
const formatCurrency = (value: number): string => {
|
||||
return `$${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
|
||||
};
|
||||
|
||||
const formatPercent = (value: number): string => {
|
||||
return `${value.toFixed(1)}%`;
|
||||
};
|
||||
|
||||
export const MonteCarloSimulator: React.FC<MonteCarloSimulatorProps> = ({
|
||||
portfolioId,
|
||||
currentValue,
|
||||
annualReturn = 0.12,
|
||||
volatility = 0.25,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [numSimulations, setNumSimulations] = useState(5000);
|
||||
const [timeHorizon, setTimeHorizon] = useState(365);
|
||||
const [targetReturn, setTargetReturn] = useState(10);
|
||||
const [isSimulating, setIsSimulating] = useState(false);
|
||||
const [result, setResult] = useState<SimulationResult | null>(null);
|
||||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||||
|
||||
// Custom return and volatility overrides
|
||||
const [customReturn, setCustomReturn] = useState<string>(String(annualReturn * 100));
|
||||
const [customVolatility, setCustomVolatility] = useState<string>(String(volatility * 100));
|
||||
|
||||
// Run Monte Carlo simulation
|
||||
const runSimulation = useCallback(() => {
|
||||
setIsSimulating(true);
|
||||
|
||||
// Use requestAnimationFrame to prevent UI blocking
|
||||
requestAnimationFrame(() => {
|
||||
const usedReturn = parseFloat(customReturn) / 100;
|
||||
const usedVolatility = parseFloat(customVolatility) / 100;
|
||||
|
||||
// Daily parameters
|
||||
const tradingDays = timeHorizon;
|
||||
const dailyReturn = usedReturn / 252;
|
||||
const dailyVolatility = usedVolatility / Math.sqrt(252);
|
||||
|
||||
const paths: number[][] = [];
|
||||
const finalValues: number[] = [];
|
||||
|
||||
// Run simulations
|
||||
for (let sim = 0; sim < numSimulations; sim++) {
|
||||
const path: number[] = [currentValue];
|
||||
let value = currentValue;
|
||||
|
||||
for (let day = 1; day <= tradingDays; day++) {
|
||||
// Generate random normal using Box-Muller transform
|
||||
const u1 = Math.random();
|
||||
const u2 = Math.random();
|
||||
const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
|
||||
|
||||
// Geometric Brownian Motion
|
||||
const drift = (dailyReturn - 0.5 * dailyVolatility * dailyVolatility);
|
||||
const diffusion = dailyVolatility * z;
|
||||
value = value * Math.exp(drift + diffusion);
|
||||
|
||||
// Store path points at intervals (for visualization)
|
||||
if (sim < 100 && day % Math.max(1, Math.floor(tradingDays / 50)) === 0) {
|
||||
path.push(value);
|
||||
}
|
||||
}
|
||||
|
||||
if (sim < 100) {
|
||||
paths.push(path);
|
||||
}
|
||||
finalValues.push(value);
|
||||
}
|
||||
|
||||
// Sort final values for percentile calculations
|
||||
finalValues.sort((a, b) => a - b);
|
||||
|
||||
// Calculate percentiles
|
||||
const getPercentile = (p: number): number => {
|
||||
const index = Math.floor((p / 100) * finalValues.length);
|
||||
return finalValues[Math.min(index, finalValues.length - 1)];
|
||||
};
|
||||
|
||||
const percentiles: Record<string, number> = {
|
||||
p5: getPercentile(5),
|
||||
p10: getPercentile(10),
|
||||
p25: getPercentile(25),
|
||||
p50: getPercentile(50),
|
||||
p75: getPercentile(75),
|
||||
p90: getPercentile(90),
|
||||
p95: getPercentile(95),
|
||||
};
|
||||
|
||||
// Calculate VaR (Value at Risk)
|
||||
const var95 = currentValue - getPercentile(5);
|
||||
const var99 = currentValue - getPercentile(1);
|
||||
|
||||
// Calculate CVaR (Conditional VaR / Expected Shortfall)
|
||||
const var95Index = Math.floor(0.05 * finalValues.length);
|
||||
const worstValues = finalValues.slice(0, var95Index);
|
||||
const cvar95 = currentValue - (worstValues.reduce((a, b) => a + b, 0) / worstValues.length);
|
||||
|
||||
// Calculate statistics
|
||||
const expectedValue = finalValues.reduce((a, b) => a + b, 0) / finalValues.length;
|
||||
const probabilityOfLoss = (finalValues.filter(v => v < currentValue).length / finalValues.length) * 100;
|
||||
const targetValue = currentValue * (1 + targetReturn / 100);
|
||||
const probabilityOfTarget = (finalValues.filter(v => v >= targetValue).length / finalValues.length) * 100;
|
||||
|
||||
setResult({
|
||||
paths,
|
||||
finalValues,
|
||||
percentiles,
|
||||
var95,
|
||||
var99,
|
||||
cvar95,
|
||||
expectedValue,
|
||||
probabilityOfLoss,
|
||||
probabilityOfTarget,
|
||||
medianValue: percentiles.p50,
|
||||
});
|
||||
|
||||
setIsSimulating(false);
|
||||
});
|
||||
}, [currentValue, numSimulations, timeHorizon, targetReturn, customReturn, customVolatility]);
|
||||
|
||||
// Confidence intervals for display
|
||||
const confidenceIntervals: ConfidenceInterval[] = useMemo(() => {
|
||||
if (!result) return [];
|
||||
return [
|
||||
{ level: '90%', lower: result.percentiles.p5, upper: result.percentiles.p95, color: 'bg-blue-100 dark:bg-blue-900/30' },
|
||||
{ level: '50%', lower: result.percentiles.p25, upper: result.percentiles.p75, color: 'bg-blue-200 dark:bg-blue-800/40' },
|
||||
];
|
||||
}, [result]);
|
||||
|
||||
// Distribution chart data
|
||||
const distributionData = useMemo(() => {
|
||||
if (!result) return null;
|
||||
|
||||
const min = result.finalValues[0];
|
||||
const max = result.finalValues[result.finalValues.length - 1];
|
||||
const range = max - min;
|
||||
const bucketCount = 40;
|
||||
const bucketSize = range / bucketCount;
|
||||
|
||||
const buckets = new Array(bucketCount).fill(0);
|
||||
result.finalValues.forEach(value => {
|
||||
const bucketIndex = Math.min(Math.floor((value - min) / bucketSize), bucketCount - 1);
|
||||
buckets[bucketIndex]++;
|
||||
});
|
||||
|
||||
const maxCount = Math.max(...buckets);
|
||||
return {
|
||||
buckets,
|
||||
maxCount,
|
||||
min,
|
||||
max,
|
||||
bucketSize,
|
||||
};
|
||||
}, [result]);
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
|
||||
<ChartBarIcon className="w-5 h-5 text-indigo-600" />
|
||||
</div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Monte Carlo</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={runSimulation}
|
||||
disabled={isSimulating}
|
||||
className="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white text-sm font-medium rounded-lg transition-colors flex items-center gap-1"
|
||||
>
|
||||
{isSimulating ? (
|
||||
<ArrowPathIcon className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<PlayIcon className="w-4 h-4" />
|
||||
)}
|
||||
Simular
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{result ? (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">VaR 95%</p>
|
||||
<p className="text-lg font-bold text-red-500">
|
||||
{formatCurrency(result.var95)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Esperado</p>
|
||||
<p className={`text-lg font-bold ${result.expectedValue >= currentValue ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{formatCurrency(result.expectedValue)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Prob. Perdida</p>
|
||||
<p className="text-lg font-bold text-orange-500">
|
||||
{formatPercent(result.probabilityOfLoss)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Prob. +{targetReturn}%</p>
|
||||
<p className="text-lg font-bold text-green-500">
|
||||
{formatPercent(result.probabilityOfTarget)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Ejecuta una simulacion para ver resultados
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
|
||||
<ChartBarIcon className="w-6 h-6 text-indigo-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Simulador Monte Carlo</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Analisis de escenarios probabilisticos
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Configuration */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
{/* Number of Simulations */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Simulaciones
|
||||
</label>
|
||||
<select
|
||||
value={numSimulations}
|
||||
onChange={(e) => setNumSimulations(Number(e.target.value))}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white"
|
||||
>
|
||||
<option value={1000}>1,000</option>
|
||||
<option value={5000}>5,000</option>
|
||||
<option value={10000}>10,000</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Time Horizon */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Horizonte Temporal
|
||||
</label>
|
||||
<select
|
||||
value={timeHorizon}
|
||||
onChange={(e) => setTimeHorizon(Number(e.target.value))}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white"
|
||||
>
|
||||
{TIME_HORIZONS.map((h) => (
|
||||
<option key={h.value} value={h.value}>{h.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Target Return */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Retorno Objetivo (%)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={targetReturn}
|
||||
onChange={(e) => setTargetReturn(Number(e.target.value))}
|
||||
min={-50}
|
||||
max={200}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Run Button */}
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
onClick={runSimulation}
|
||||
disabled={isSimulating}
|
||||
className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{isSimulating ? (
|
||||
<>
|
||||
<ArrowPathIcon className="w-5 h-5 animate-spin" />
|
||||
Simulando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlayIcon className="w-5 h-5" />
|
||||
Ejecutar
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Settings Toggle */}
|
||||
<button
|
||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||
className="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 mb-4"
|
||||
>
|
||||
{showAdvanced ? 'Ocultar parametros avanzados' : 'Mostrar parametros avanzados'}
|
||||
</button>
|
||||
|
||||
{/* Advanced Settings */}
|
||||
{showAdvanced && (
|
||||
<div className="grid md:grid-cols-2 gap-4 mb-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Retorno Anual Esperado (%)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={customReturn}
|
||||
onChange={(e) => setCustomReturn(e.target.value)}
|
||||
step="0.5"
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Volatilidad Anual (%)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={customVolatility}
|
||||
onChange={(e) => setCustomVolatility(e.target.value)}
|
||||
step="0.5"
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{result && (
|
||||
<>
|
||||
{/* Distribution Chart */}
|
||||
{distributionData && (
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Distribucion de Valores Finales
|
||||
</h4>
|
||||
<div className="relative h-40 bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
|
||||
{/* Chart bars */}
|
||||
<div className="flex items-end h-full gap-px">
|
||||
{distributionData.buckets.map((count, index) => {
|
||||
const height = (count / distributionData.maxCount) * 100;
|
||||
const value = distributionData.min + (index * distributionData.bucketSize);
|
||||
const isLoss = value < currentValue;
|
||||
const isTarget = value >= currentValue * (1 + targetReturn / 100);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex-1 rounded-t transition-all ${
|
||||
isLoss
|
||||
? 'bg-red-400 dark:bg-red-500'
|
||||
: isTarget
|
||||
? 'bg-green-400 dark:bg-green-500'
|
||||
: 'bg-indigo-400 dark:bg-indigo-500'
|
||||
}`}
|
||||
style={{ height: `${Math.max(1, height)}%` }}
|
||||
title={`${formatCurrency(value)}: ${count} simulaciones`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Current value marker */}
|
||||
<div
|
||||
className="absolute bottom-0 w-0.5 h-full bg-gray-900 dark:bg-white"
|
||||
style={{
|
||||
left: `${((currentValue - distributionData.min) / (distributionData.max - distributionData.min)) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex justify-center gap-6 mt-3 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 bg-red-400 rounded" />
|
||||
<span className="text-gray-600 dark:text-gray-400">Perdida</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 bg-indigo-400 rounded" />
|
||||
<span className="text-gray-600 dark:text-gray-400">Ganancia</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 bg-green-400 rounded" />
|
||||
<span className="text-gray-600 dark:text-gray-400">Objetivo +{targetReturn}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* VaR Display */}
|
||||
<div className="grid md:grid-cols-3 gap-4 mb-6">
|
||||
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<ExclamationTriangleIcon className="w-5 h-5 text-red-500" />
|
||||
<span className="text-sm font-medium text-red-700 dark:text-red-400">VaR 95%</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-red-600">{formatCurrency(result.var95)}</p>
|
||||
<p className="text-xs text-red-600 dark:text-red-400 mt-1">
|
||||
Perdida maxima con 95% de confianza
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<ExclamationTriangleIcon className="w-5 h-5 text-orange-500" />
|
||||
<span className="text-sm font-medium text-orange-700 dark:text-orange-400">CVaR 95%</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-orange-600">{formatCurrency(result.cvar95)}</p>
|
||||
<p className="text-xs text-orange-600 dark:text-orange-400 mt-1">
|
||||
Perdida esperada en el peor 5%
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<ExclamationTriangleIcon className="w-5 h-5 text-purple-500" />
|
||||
<span className="text-sm font-medium text-purple-700 dark:text-purple-400">VaR 99%</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-purple-600">{formatCurrency(result.var99)}</p>
|
||||
<p className="text-xs text-purple-600 dark:text-purple-400 mt-1">
|
||||
Perdida maxima con 99% de confianza
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confidence Intervals */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Intervalos de Confianza
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{confidenceIntervals.map((interval) => (
|
||||
<div key={interval.level} className={`p-3 rounded-lg ${interval.color}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Intervalo {interval.level}
|
||||
</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{formatCurrency(interval.lower)} - {formatCurrency(interval.upper)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary Statistics */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Valor Esperado</p>
|
||||
<p className={`text-xl font-bold ${result.expectedValue >= currentValue ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{formatCurrency(result.expectedValue)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
({((result.expectedValue / currentValue - 1) * 100).toFixed(1)}%)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Valor Mediano</p>
|
||||
<p className={`text-xl font-bold ${result.medianValue >= currentValue ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{formatCurrency(result.medianValue)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
({((result.medianValue / currentValue - 1) * 100).toFixed(1)}%)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Prob. de Perdida</p>
|
||||
<p className="text-xl font-bold text-orange-500">
|
||||
{formatPercent(result.probabilityOfLoss)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Valor {'<'} {formatCurrency(currentValue)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Prob. Objetivo</p>
|
||||
<p className="text-xl font-bold text-green-500">
|
||||
{formatPercent(result.probabilityOfTarget)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Retorno {'>='} +{targetReturn}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Footer */}
|
||||
<div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-start gap-2">
|
||||
<InformationCircleIcon className="w-5 h-5 text-gray-400 flex-shrink-0" />
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Simulacion basada en {numSimulations.toLocaleString()} escenarios usando movimiento browniano
|
||||
geometrico con retorno anualizado de {customReturn}% y volatilidad de {customVolatility}%.
|
||||
Los resultados son estimaciones y no garantizan rendimientos futuros.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!result && !isSimulating && (
|
||||
<div className="text-center py-12 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<ChartBarIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white mb-1">
|
||||
Configura y Ejecuta la Simulacion
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 max-w-md mx-auto">
|
||||
El simulador Monte Carlo genera miles de escenarios posibles para estimar
|
||||
el rango de valores futuros de tu portfolio y el riesgo asociado.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MonteCarloSimulator;
|
||||
613
src/modules/portfolio/components/RebalancingPanel.tsx
Normal file
613
src/modules/portfolio/components/RebalancingPanel.tsx
Normal file
@ -0,0 +1,613 @@
|
||||
/**
|
||||
* Rebalancing Panel Component
|
||||
* Enhanced rebalancing UI with history, drift settings,
|
||||
* target vs current comparison, and one-click suggestions
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
ArrowsRightLeftIcon,
|
||||
ClockIcon,
|
||||
CogIcon,
|
||||
ArrowUpIcon,
|
||||
ArrowDownIcon,
|
||||
CheckCircleIcon,
|
||||
ExclamationTriangleIcon,
|
||||
CalendarIcon,
|
||||
ChartBarIcon,
|
||||
AdjustmentsHorizontalIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
import type { PortfolioAllocation, RebalanceRecommendation } from '../../../services/portfolio.service';
|
||||
|
||||
interface RebalancingPanelProps {
|
||||
portfolioId: string;
|
||||
allocations: PortfolioAllocation[];
|
||||
recommendations?: RebalanceRecommendation[];
|
||||
onRebalance?: () => void;
|
||||
isExecuting?: boolean;
|
||||
lastRebalanced?: string | null;
|
||||
}
|
||||
|
||||
interface RebalanceHistoryItem {
|
||||
id: string;
|
||||
date: string;
|
||||
tradesCount: number;
|
||||
totalVolume: number;
|
||||
driftBefore: number;
|
||||
driftAfter: number;
|
||||
status: 'completed' | 'partial' | 'failed';
|
||||
}
|
||||
|
||||
interface DriftSettings {
|
||||
threshold: number;
|
||||
autoRebalance: boolean;
|
||||
frequency: 'manual' | 'weekly' | 'monthly' | 'quarterly';
|
||||
notifyOnDrift: boolean;
|
||||
}
|
||||
|
||||
// Mock history data
|
||||
const generateMockHistory = (): RebalanceHistoryItem[] => {
|
||||
return [
|
||||
{
|
||||
id: '1',
|
||||
date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
tradesCount: 4,
|
||||
totalVolume: 2500,
|
||||
driftBefore: 8.5,
|
||||
driftAfter: 0.3,
|
||||
status: 'completed',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
date: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
tradesCount: 3,
|
||||
totalVolume: 1800,
|
||||
driftBefore: 6.2,
|
||||
driftAfter: 0.5,
|
||||
status: 'completed',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
date: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
tradesCount: 5,
|
||||
totalVolume: 3200,
|
||||
driftBefore: 12.1,
|
||||
driftAfter: 0.2,
|
||||
status: 'completed',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
date: new Date(Date.now() - 120 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
tradesCount: 2,
|
||||
totalVolume: 950,
|
||||
driftBefore: 5.8,
|
||||
driftAfter: 1.2,
|
||||
status: 'partial',
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// Allocation comparison bar component
|
||||
interface AllocationBarProps {
|
||||
asset: string;
|
||||
current: number;
|
||||
target: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const AllocationBar: React.FC<AllocationBarProps> = ({ asset, current, target, color }) => {
|
||||
const deviation = current - target;
|
||||
const maxPercent = Math.max(current, target, 50);
|
||||
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium text-gray-900 dark:text-white">{asset}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{current.toFixed(1)}% / {target.toFixed(1)}%
|
||||
</span>
|
||||
<span
|
||||
className={`text-xs font-medium px-1.5 py-0.5 rounded ${
|
||||
Math.abs(deviation) > 5
|
||||
? 'bg-red-100 dark:bg-red-900/30 text-red-600'
|
||||
: Math.abs(deviation) > 2
|
||||
? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600'
|
||||
: 'bg-green-100 dark:bg-green-900/30 text-green-600'
|
||||
}`}
|
||||
>
|
||||
{deviation > 0 ? '+' : ''}{deviation.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
{/* Current allocation bar */}
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${(current / maxPercent) * 100}%`,
|
||||
backgroundColor: color,
|
||||
}}
|
||||
/>
|
||||
{/* Target marker */}
|
||||
<div
|
||||
className="absolute top-0 h-full w-0.5 bg-gray-900 dark:bg-white"
|
||||
style={{ left: `${(target / maxPercent) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Asset colors
|
||||
const ASSET_COLORS: Record<string, string> = {
|
||||
BTC: '#F7931A',
|
||||
ETH: '#627EEA',
|
||||
USDT: '#26A17B',
|
||||
USDC: '#2775CA',
|
||||
SOL: '#9945FF',
|
||||
LINK: '#2A5ADA',
|
||||
AVAX: '#E84142',
|
||||
ADA: '#0033AD',
|
||||
DOT: '#E6007A',
|
||||
MATIC: '#8247E5',
|
||||
};
|
||||
|
||||
const DEFAULT_COLOR = '#6366F1';
|
||||
|
||||
export const RebalancingPanel: React.FC<RebalancingPanelProps> = ({
|
||||
portfolioId,
|
||||
allocations,
|
||||
recommendations = [],
|
||||
onRebalance,
|
||||
isExecuting = false,
|
||||
lastRebalanced,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'history' | 'settings'>('overview');
|
||||
const [history, setHistory] = useState<RebalanceHistoryItem[]>([]);
|
||||
const [loadingHistory, setLoadingHistory] = useState(false);
|
||||
const [settings, setSettings] = useState<DriftSettings>({
|
||||
threshold: 5,
|
||||
autoRebalance: false,
|
||||
frequency: 'manual',
|
||||
notifyOnDrift: true,
|
||||
});
|
||||
|
||||
// Load history on mount
|
||||
useEffect(() => {
|
||||
if (activeTab === 'history') {
|
||||
setLoadingHistory(true);
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
setHistory(generateMockHistory());
|
||||
setLoadingHistory(false);
|
||||
}, 500);
|
||||
}
|
||||
}, [activeTab]);
|
||||
|
||||
// Calculate max drift
|
||||
const maxDrift = useMemo(() => {
|
||||
return Math.max(...allocations.map((a) => Math.abs(a.deviation)));
|
||||
}, [allocations]);
|
||||
|
||||
// Calculate days since last rebalance
|
||||
const daysSinceRebalance = useMemo(() => {
|
||||
if (!lastRebalanced) return null;
|
||||
const diff = Date.now() - new Date(lastRebalanced).getTime();
|
||||
return Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
}, [lastRebalanced]);
|
||||
|
||||
// Check if rebalance is needed based on settings
|
||||
const needsRebalance = maxDrift > settings.threshold;
|
||||
|
||||
// Active recommendations count
|
||||
const activeRecommendations = recommendations.filter((r) => r.action !== 'hold');
|
||||
|
||||
// Calculate total trade volume
|
||||
const totalTradeVolume = activeRecommendations.reduce((sum, r) => sum + r.amountUSD, 0);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||||
{/* Header with Tabs */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
|
||||
<ArrowsRightLeftIcon className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Sistema de Rebalanceo</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{needsRebalance
|
||||
? `Drift maximo: ${maxDrift.toFixed(1)}% (umbral: ${settings.threshold}%)`
|
||||
: 'Portfolio balanceado'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setActiveTab('overview')}
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
activeTab === 'overview'
|
||||
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<ChartBarIcon className="w-4 h-4 inline mr-1" />
|
||||
Vista
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('history')}
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
activeTab === 'history'
|
||||
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<ClockIcon className="w-4 h-4 inline mr-1" />
|
||||
Historial
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('settings')}
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
activeTab === 'settings'
|
||||
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<CogIcon className="w-4 h-4 inline mr-1" />
|
||||
Config
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{/* Overview Tab */}
|
||||
{activeTab === 'overview' && (
|
||||
<>
|
||||
{/* Status Cards */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Drift Maximo</p>
|
||||
<p className={`text-2xl font-bold ${
|
||||
maxDrift > settings.threshold ? 'text-red-500' :
|
||||
maxDrift > settings.threshold * 0.5 ? 'text-yellow-500' : 'text-green-500'
|
||||
}`}>
|
||||
{maxDrift.toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Operaciones</p>
|
||||
<p className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{activeRecommendations.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Volumen Est.</p>
|
||||
<p className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
${totalTradeVolume.toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Allocation Comparison */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">
|
||||
Actual vs Objetivo
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
{allocations.map((alloc) => (
|
||||
<AllocationBar
|
||||
key={alloc.asset}
|
||||
asset={alloc.asset}
|
||||
current={alloc.currentPercent}
|
||||
target={alloc.targetPercent}
|
||||
color={ASSET_COLORS[alloc.asset] || DEFAULT_COLOR}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recommendations */}
|
||||
{activeRecommendations.length > 0 ? (
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Acciones Sugeridas
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{activeRecommendations
|
||||
.sort((a, b) => {
|
||||
const priorityOrder = { high: 0, medium: 1, low: 2 };
|
||||
return priorityOrder[a.priority] - priorityOrder[b.priority];
|
||||
})
|
||||
.map((rec, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-between p-3 rounded-lg ${
|
||||
rec.priority === 'high'
|
||||
? 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800'
|
||||
: rec.priority === 'medium'
|
||||
? 'bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800'
|
||||
: 'bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{rec.action === 'buy' ? (
|
||||
<div className="p-1.5 bg-green-100 dark:bg-green-900/30 rounded-full">
|
||||
<ArrowUpIcon className="w-4 h-4 text-green-600" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-1.5 bg-red-100 dark:bg-red-900/30 rounded-full">
|
||||
<ArrowDownIcon className="w-4 h-4 text-red-600" />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{rec.asset}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 ml-2">
|
||||
{rec.currentPercent.toFixed(1)}% → {rec.targetPercent.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className={`font-medium ${rec.action === 'buy' ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{rec.action === 'buy' ? 'Comprar' : 'Vender'}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
~${rec.amountUSD.toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mb-6 text-center py-8 bg-green-50 dark:bg-green-900/20 rounded-lg">
|
||||
<CheckCircleIcon className="w-12 h-12 text-green-500 mx-auto mb-2" />
|
||||
<p className="font-medium text-green-700 dark:text-green-300">
|
||||
Portfolio Balanceado
|
||||
</p>
|
||||
<p className="text-sm text-green-600 dark:text-green-400 mt-1">
|
||||
No se requieren ajustes en este momento
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rebalance Button */}
|
||||
{activeRecommendations.length > 0 && onRebalance && (
|
||||
<button
|
||||
onClick={onRebalance}
|
||||
disabled={isExecuting}
|
||||
className="w-full py-3 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{isExecuting ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
|
||||
Ejecutando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ArrowsRightLeftIcon className="w-5 h-5" />
|
||||
Ejecutar Rebalanceo
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Last Rebalance Info */}
|
||||
{lastRebalanced && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarIcon className="w-4 h-4" />
|
||||
Ultimo rebalanceo: {new Date(lastRebalanced).toLocaleDateString()}
|
||||
{daysSinceRebalance !== null && (
|
||||
<span className="text-gray-400">
|
||||
(hace {daysSinceRebalance} dias)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* History Tab */}
|
||||
{activeTab === 'history' && (
|
||||
<>
|
||||
{loadingHistory ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
|
||||
</div>
|
||||
) : history.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{history.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`p-1 rounded-full ${
|
||||
item.status === 'completed'
|
||||
? 'bg-green-100 dark:bg-green-900/30'
|
||||
: item.status === 'partial'
|
||||
? 'bg-yellow-100 dark:bg-yellow-900/30'
|
||||
: 'bg-red-100 dark:bg-red-900/30'
|
||||
}`}>
|
||||
{item.status === 'completed' ? (
|
||||
<CheckCircleIcon className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<ExclamationTriangleIcon className={`w-4 h-4 ${
|
||||
item.status === 'partial' ? 'text-yellow-500' : 'text-red-500'
|
||||
}`} />
|
||||
)}
|
||||
</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{new Date(item.date).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<span className={`text-xs px-2 py-1 rounded-full ${
|
||||
item.status === 'completed'
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-600'
|
||||
: item.status === 'partial'
|
||||
? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600'
|
||||
: 'bg-red-100 dark:bg-red-900/30 text-red-600'
|
||||
}`}>
|
||||
{item.status === 'completed' ? 'Completado' :
|
||||
item.status === 'partial' ? 'Parcial' : 'Fallido'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Operaciones</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
{item.tradesCount}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Volumen</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
${item.totalVolume.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Drift Antes</p>
|
||||
<p className="font-medium text-red-500">
|
||||
{item.driftBefore.toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Drift Despues</p>
|
||||
<p className="font-medium text-green-500">
|
||||
{item.driftAfter.toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<ClockIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
No hay historial de rebalanceos
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Settings Tab */}
|
||||
{activeTab === 'settings' && (
|
||||
<div className="space-y-6">
|
||||
{/* Drift Threshold */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Umbral de Drift (%)
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
value={settings.threshold}
|
||||
onChange={(e) => setSettings({ ...settings, threshold: Number(e.target.value) })}
|
||||
className="flex-1"
|
||||
/>
|
||||
<span className="w-12 text-center font-medium text-gray-900 dark:text-white">
|
||||
{settings.threshold}%
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Se notificara cuando un activo se desvie mas de este porcentaje
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Auto Rebalance */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Rebalanceo Automatico
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Ejecutar rebalanceo automaticamente
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSettings({ ...settings, autoRebalance: !settings.autoRebalance })}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
settings.autoRebalance ? 'bg-purple-600' : 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
settings.autoRebalance ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Frequency */}
|
||||
{settings.autoRebalance && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Frecuencia de Revision
|
||||
</label>
|
||||
<select
|
||||
value={settings.frequency}
|
||||
onChange={(e) => setSettings({ ...settings, frequency: e.target.value as DriftSettings['frequency'] })}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 text-gray-900 dark:text-white"
|
||||
>
|
||||
<option value="manual">Manual</option>
|
||||
<option value="weekly">Semanal</option>
|
||||
<option value="monthly">Mensual</option>
|
||||
<option value="quarterly">Trimestral</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notifications */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Notificaciones de Drift
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Recibir alertas cuando se supere el umbral
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSettings({ ...settings, notifyOnDrift: !settings.notifyOnDrift })}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
settings.notifyOnDrift ? 'bg-purple-600' : 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
settings.notifyOnDrift ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<button
|
||||
className="w-full py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Guardar Configuracion
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RebalancingPanel;
|
||||
690
src/modules/portfolio/components/RiskAnalytics.tsx
Normal file
690
src/modules/portfolio/components/RiskAnalytics.tsx
Normal file
@ -0,0 +1,690 @@
|
||||
/**
|
||||
* Risk Analytics Component
|
||||
* Comprehensive risk analysis dashboard with Sharpe ratio,
|
||||
* Beta calculation, drawdown analysis, and risk metrics
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
ShieldExclamationIcon,
|
||||
ChartBarIcon,
|
||||
ArrowTrendingDownIcon,
|
||||
InformationCircleIcon,
|
||||
ArrowPathIcon,
|
||||
ExclamationTriangleIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
import type { PortfolioMetrics, PortfolioAllocation } from '../../../services/portfolio.service';
|
||||
|
||||
interface RiskAnalyticsProps {
|
||||
portfolioId: string;
|
||||
allocations?: PortfolioAllocation[];
|
||||
metrics?: PortfolioMetrics | null;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
interface DrawdownPeriod {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
duration: number;
|
||||
peakValue: number;
|
||||
troughValue: number;
|
||||
drawdownPercent: number;
|
||||
recovered: boolean;
|
||||
}
|
||||
|
||||
interface RiskRating {
|
||||
level: 'low' | 'moderate' | 'high' | 'very-high';
|
||||
score: number;
|
||||
label: string;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
}
|
||||
|
||||
// Generate mock drawdown history
|
||||
const generateMockDrawdowns = (): DrawdownPeriod[] => {
|
||||
return [
|
||||
{
|
||||
startDate: '2025-11-01',
|
||||
endDate: '2025-11-15',
|
||||
duration: 14,
|
||||
peakValue: 32000,
|
||||
troughValue: 29120,
|
||||
drawdownPercent: -9.0,
|
||||
recovered: true,
|
||||
},
|
||||
{
|
||||
startDate: '2025-09-15',
|
||||
endDate: '2025-10-05',
|
||||
duration: 20,
|
||||
peakValue: 28500,
|
||||
troughValue: 26505,
|
||||
drawdownPercent: -7.0,
|
||||
recovered: true,
|
||||
},
|
||||
{
|
||||
startDate: '2025-07-20',
|
||||
endDate: '2025-08-10',
|
||||
duration: 21,
|
||||
peakValue: 25000,
|
||||
troughValue: 23250,
|
||||
drawdownPercent: -7.0,
|
||||
recovered: true,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// Calculate risk rating based on metrics
|
||||
const calculateRiskRating = (metrics: PortfolioMetrics | null): RiskRating => {
|
||||
if (!metrics) {
|
||||
return {
|
||||
level: 'moderate',
|
||||
score: 50,
|
||||
label: 'Moderado',
|
||||
color: 'text-yellow-500',
|
||||
bgColor: 'bg-yellow-100 dark:bg-yellow-900/30',
|
||||
};
|
||||
}
|
||||
|
||||
let score = 50;
|
||||
|
||||
// Volatility impact (higher = more risk)
|
||||
if (metrics.volatility > 30) score += 20;
|
||||
else if (metrics.volatility > 20) score += 10;
|
||||
else if (metrics.volatility < 10) score -= 15;
|
||||
|
||||
// Sharpe ratio impact (higher = less risk)
|
||||
if (metrics.sharpeRatio > 2) score -= 20;
|
||||
else if (metrics.sharpeRatio > 1) score -= 10;
|
||||
else if (metrics.sharpeRatio < 0.5) score += 15;
|
||||
|
||||
// Max drawdown impact
|
||||
const absDrawdown = Math.abs(metrics.maxDrawdownPercent);
|
||||
if (absDrawdown > 25) score += 20;
|
||||
else if (absDrawdown > 15) score += 10;
|
||||
else if (absDrawdown < 5) score -= 10;
|
||||
|
||||
// Beta impact
|
||||
if (metrics.beta > 1.5) score += 15;
|
||||
else if (metrics.beta > 1.2) score += 5;
|
||||
else if (metrics.beta < 0.8) score -= 10;
|
||||
|
||||
score = Math.max(0, Math.min(100, score));
|
||||
|
||||
if (score >= 70) {
|
||||
return {
|
||||
level: 'very-high',
|
||||
score,
|
||||
label: 'Muy Alto',
|
||||
color: 'text-red-600',
|
||||
bgColor: 'bg-red-100 dark:bg-red-900/30',
|
||||
};
|
||||
} else if (score >= 50) {
|
||||
return {
|
||||
level: 'high',
|
||||
score,
|
||||
label: 'Alto',
|
||||
color: 'text-orange-500',
|
||||
bgColor: 'bg-orange-100 dark:bg-orange-900/30',
|
||||
};
|
||||
} else if (score >= 30) {
|
||||
return {
|
||||
level: 'moderate',
|
||||
score,
|
||||
label: 'Moderado',
|
||||
color: 'text-yellow-500',
|
||||
bgColor: 'bg-yellow-100 dark:bg-yellow-900/30',
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
level: 'low',
|
||||
score,
|
||||
label: 'Bajo',
|
||||
color: 'text-green-500',
|
||||
bgColor: 'bg-green-100 dark:bg-green-900/30',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Metric Card Component
|
||||
interface MetricCardProps {
|
||||
label: string;
|
||||
value: string | number;
|
||||
tooltip: string;
|
||||
type?: 'positive' | 'negative' | 'neutral' | 'info';
|
||||
suffix?: string;
|
||||
benchmark?: number;
|
||||
benchmarkLabel?: string;
|
||||
}
|
||||
|
||||
const MetricCard: React.FC<MetricCardProps> = ({
|
||||
label,
|
||||
value,
|
||||
tooltip,
|
||||
type = 'neutral',
|
||||
suffix = '',
|
||||
benchmark,
|
||||
benchmarkLabel,
|
||||
}) => {
|
||||
const [showTooltip, setShowTooltip] = useState(false);
|
||||
|
||||
const valueColorClass =
|
||||
type === 'positive'
|
||||
? 'text-green-500'
|
||||
: type === 'negative'
|
||||
? 'text-red-500'
|
||||
: type === 'info'
|
||||
? 'text-blue-500'
|
||||
: 'text-gray-900 dark:text-white';
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg relative">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">{label}</span>
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setShowTooltip(true)}
|
||||
onMouseLeave={() => setShowTooltip(false)}
|
||||
>
|
||||
<InformationCircleIcon className="w-4 h-4 text-gray-400 cursor-help" />
|
||||
{showTooltip && (
|
||||
<div className="absolute bottom-full right-0 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg w-48 z-10">
|
||||
{tooltip}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className={`text-xl font-bold ${valueColorClass}`}>
|
||||
{typeof value === 'number' ? value.toFixed(2) : value}
|
||||
{suffix}
|
||||
</p>
|
||||
{benchmark !== undefined && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{benchmarkLabel || 'Benchmark'}: {benchmark.toFixed(2)}{suffix}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const RiskAnalytics: React.FC<RiskAnalyticsProps> = ({
|
||||
portfolioId,
|
||||
allocations = [],
|
||||
metrics = null,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [drawdowns, setDrawdowns] = useState<DrawdownPeriod[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'drawdown' | 'details'>('overview');
|
||||
|
||||
// Load drawdown data
|
||||
useEffect(() => {
|
||||
setDrawdowns(generateMockDrawdowns());
|
||||
}, [portfolioId]);
|
||||
|
||||
// Calculate risk rating
|
||||
const riskRating = useMemo(() => calculateRiskRating(metrics), [metrics]);
|
||||
|
||||
// Use mock metrics if none provided
|
||||
const displayMetrics: PortfolioMetrics = metrics || {
|
||||
totalReturn: 2543.67,
|
||||
totalReturnPercent: 25.44,
|
||||
annualizedReturn: 1850.25,
|
||||
annualizedReturnPercent: 18.5,
|
||||
volatility: 22.35,
|
||||
sharpeRatio: 1.25,
|
||||
sortinoRatio: 1.62,
|
||||
maxDrawdown: -2856.32,
|
||||
maxDrawdownPercent: -9.52,
|
||||
maxDrawdownDate: '2025-11-15',
|
||||
beta: 1.15,
|
||||
alpha: 2.8,
|
||||
rSquared: 0.82,
|
||||
trackingError: 5.2,
|
||||
informationRatio: 0.54,
|
||||
calmarRatio: 1.94,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-lg">
|
||||
<ShieldExclamationIcon className="w-5 h-5 text-red-600" />
|
||||
</div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Riesgo</h3>
|
||||
</div>
|
||||
<div className={`px-2 py-1 rounded-full ${riskRating.bgColor}`}>
|
||||
<span className={`text-xs font-medium ${riskRating.color}`}>
|
||||
{riskRating.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Sharpe</p>
|
||||
<p className={`text-lg font-bold ${
|
||||
displayMetrics.sharpeRatio >= 1 ? 'text-green-500' :
|
||||
displayMetrics.sharpeRatio >= 0.5 ? 'text-yellow-500' : 'text-red-500'
|
||||
}`}>
|
||||
{displayMetrics.sharpeRatio.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Beta</p>
|
||||
<p className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{displayMetrics.beta.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Volatilidad</p>
|
||||
<p className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{displayMetrics.volatility.toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Max DD</p>
|
||||
<p className="text-lg font-bold text-red-500">
|
||||
{displayMetrics.maxDrawdownPercent.toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-lg">
|
||||
<ShieldExclamationIcon className="w-6 h-6 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">Analisis de Riesgo</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Metricas y evaluacion de riesgo del portfolio
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Risk Rating Badge */}
|
||||
<div className={`px-4 py-2 rounded-lg ${riskRating.bgColor}`}>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">Nivel de Riesgo: </span>
|
||||
<span className={`font-bold ${riskRating.color}`}>
|
||||
{riskRating.label} ({riskRating.score}/100)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 p-2 mx-6 mt-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
|
||||
<button
|
||||
onClick={() => setActiveTab('overview')}
|
||||
className={`flex-1 px-3 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
activeTab === 'overview'
|
||||
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Resumen
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('drawdown')}
|
||||
className={`flex-1 px-3 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
activeTab === 'drawdown'
|
||||
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Drawdown
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('details')}
|
||||
className={`flex-1 px-3 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
activeTab === 'details'
|
||||
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Detalles
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{/* Overview Tab */}
|
||||
{activeTab === 'overview' && (
|
||||
<>
|
||||
{/* Risk Score Visualization */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Puntuacion de Riesgo
|
||||
</h4>
|
||||
<div className="relative h-4 bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 rounded-full">
|
||||
<div
|
||||
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-6 h-6 bg-white border-2 border-gray-900 rounded-full shadow-lg"
|
||||
style={{ left: `${riskRating.score}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||||
<span>Bajo Riesgo</span>
|
||||
<span>Alto Riesgo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Key Metrics Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<MetricCard
|
||||
label="Sharpe Ratio"
|
||||
value={displayMetrics.sharpeRatio}
|
||||
tooltip="Retorno en exceso por unidad de riesgo. Mayor a 1 es bueno, mayor a 2 es excelente."
|
||||
type={displayMetrics.sharpeRatio >= 1 ? 'positive' : displayMetrics.sharpeRatio >= 0.5 ? 'neutral' : 'negative'}
|
||||
benchmark={1.0}
|
||||
benchmarkLabel="Objetivo"
|
||||
/>
|
||||
<MetricCard
|
||||
label="Beta"
|
||||
value={displayMetrics.beta}
|
||||
tooltip="Sensibilidad al mercado. Beta 1 = igual que mercado, >1 = mas volatil, <1 = menos volatil."
|
||||
type={displayMetrics.beta > 1.3 ? 'negative' : displayMetrics.beta < 0.7 ? 'info' : 'neutral'}
|
||||
benchmark={1.0}
|
||||
benchmarkLabel="Mercado"
|
||||
/>
|
||||
<MetricCard
|
||||
label="Volatilidad Anual"
|
||||
value={displayMetrics.volatility}
|
||||
suffix="%"
|
||||
tooltip="Desviacion estandar anualizada de los retornos. Mide la variabilidad del portfolio."
|
||||
type={displayMetrics.volatility > 30 ? 'negative' : displayMetrics.volatility < 15 ? 'positive' : 'neutral'}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Max Drawdown"
|
||||
value={displayMetrics.maxDrawdownPercent}
|
||||
suffix="%"
|
||||
tooltip="Maxima caida desde un pico. Menor es mejor."
|
||||
type="negative"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Risk-Adjusted Returns */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Retornos Ajustados por Riesgo
|
||||
</h4>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<MetricCard
|
||||
label="Alpha"
|
||||
value={displayMetrics.alpha}
|
||||
suffix="%"
|
||||
tooltip="Rendimiento en exceso sobre el benchmark. Alpha positivo indica gestion superior."
|
||||
type={displayMetrics.alpha >= 0 ? 'positive' : 'negative'}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Sortino Ratio"
|
||||
value={displayMetrics.sortinoRatio}
|
||||
tooltip="Similar al Sharpe pero solo considera la volatilidad a la baja. Mayor es mejor."
|
||||
type={displayMetrics.sortinoRatio >= 1 ? 'positive' : 'neutral'}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Calmar Ratio"
|
||||
value={displayMetrics.calmarRatio}
|
||||
tooltip="Retorno anualizado dividido por max drawdown. Mayor es mejor."
|
||||
type={displayMetrics.calmarRatio >= 1 ? 'positive' : 'neutral'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Risk Interpretation */}
|
||||
<div className={`p-4 rounded-lg border ${
|
||||
riskRating.level === 'low' ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800' :
|
||||
riskRating.level === 'moderate' ? 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800' :
|
||||
'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
|
||||
}`}>
|
||||
<h4 className={`font-medium ${riskRating.color} mb-2`}>
|
||||
Interpretacion: Riesgo {riskRating.label}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{riskRating.level === 'low' && 'Tu portfolio tiene un perfil de riesgo conservador con buena diversificacion y volatilidad controlada.'}
|
||||
{riskRating.level === 'moderate' && 'Tu portfolio tiene un nivel de riesgo equilibrado, adecuado para inversores con tolerancia moderada.'}
|
||||
{riskRating.level === 'high' && 'Tu portfolio presenta volatilidad elevada. Considera rebalancear para reducir la exposicion al riesgo.'}
|
||||
{riskRating.level === 'very-high' && 'Tu portfolio tiene alta exposicion al riesgo. Se recomienda diversificar y reducir posiciones volatiles.'}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Drawdown Tab */}
|
||||
{activeTab === 'drawdown' && (
|
||||
<>
|
||||
{/* Current Drawdown Status */}
|
||||
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<ArrowTrendingDownIcon className="w-6 h-6 text-red-500" />
|
||||
<div>
|
||||
<h4 className="font-bold text-red-700 dark:text-red-300">
|
||||
Max Drawdown: {displayMetrics.maxDrawdownPercent.toFixed(2)}%
|
||||
</h4>
|
||||
<p className="text-sm text-red-600 dark:text-red-400">
|
||||
Registrado el {displayMetrics.maxDrawdownDate ? new Date(displayMetrics.maxDrawdownDate).toLocaleDateString() : 'N/A'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-red-600 dark:text-red-400">
|
||||
Perdida maxima: ${Math.abs(displayMetrics.maxDrawdown).toLocaleString(undefined, { minimumFractionDigits: 2 })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Drawdown History */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Historial de Drawdowns
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{drawdowns.map((dd, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`p-1 rounded-full ${dd.recovered ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'}`}>
|
||||
{dd.recovered ? (
|
||||
<ChartBarIcon className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<ArrowTrendingDownIcon className="w-4 h-4 text-red-500" />
|
||||
)}
|
||||
</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{new Date(dd.startDate).toLocaleDateString()} - {new Date(dd.endDate).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<span className={`font-bold ${dd.recovered ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{dd.drawdownPercent.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Duracion</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">{dd.duration} dias</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Pico</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">${dd.peakValue.toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Valle</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">${dd.troughValue.toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Estado</p>
|
||||
<p className={`font-medium ${dd.recovered ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{dd.recovered ? 'Recuperado' : 'En progreso'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drawdown Guidelines */}
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<div className="flex items-start gap-3">
|
||||
<InformationCircleIcon className="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-blue-800 dark:text-blue-200">
|
||||
Guia de Drawdown
|
||||
</h4>
|
||||
<ul className="mt-2 text-sm text-blue-700 dark:text-blue-300 space-y-1">
|
||||
<li>• {'<'}5%: Normal, parte de la volatilidad del mercado</li>
|
||||
<li>• 5-10%: Moderado, considerar revisar posiciones</li>
|
||||
<li>• 10-20%: Significativo, evaluar estrategia de riesgo</li>
|
||||
<li>• {'>'}20%: Severo, tomar acciones correctivas</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Details Tab */}
|
||||
{activeTab === 'details' && (
|
||||
<>
|
||||
{/* All Metrics */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* Returns Section */}
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h4 className="font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Retornos
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Retorno Total</span>
|
||||
<span className={`font-medium ${displayMetrics.totalReturnPercent >= 0 ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{displayMetrics.totalReturnPercent >= 0 ? '+' : ''}{displayMetrics.totalReturnPercent.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Retorno Anualizado</span>
|
||||
<span className={`font-medium ${displayMetrics.annualizedReturnPercent >= 0 ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{displayMetrics.annualizedReturnPercent >= 0 ? '+' : ''}{displayMetrics.annualizedReturnPercent.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Alpha</span>
|
||||
<span className={`font-medium ${displayMetrics.alpha >= 0 ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{displayMetrics.alpha >= 0 ? '+' : ''}{displayMetrics.alpha.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Risk Section */}
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h4 className="font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Metricas de Riesgo
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Volatilidad</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{displayMetrics.volatility.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Beta</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{displayMetrics.beta.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Max Drawdown</span>
|
||||
<span className="font-medium text-red-500">
|
||||
{displayMetrics.maxDrawdownPercent.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Tracking Error</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{displayMetrics.trackingError.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Risk-Adjusted Section */}
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h4 className="font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Ratios Ajustados
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Sharpe Ratio</span>
|
||||
<span className={`font-medium ${displayMetrics.sharpeRatio >= 1 ? 'text-green-500' : 'text-gray-900 dark:text-white'}`}>
|
||||
{displayMetrics.sharpeRatio.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Sortino Ratio</span>
|
||||
<span className={`font-medium ${displayMetrics.sortinoRatio >= 1 ? 'text-green-500' : 'text-gray-900 dark:text-white'}`}>
|
||||
{displayMetrics.sortinoRatio.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Information Ratio</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{displayMetrics.informationRatio.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Calmar Ratio</span>
|
||||
<span className={`font-medium ${displayMetrics.calmarRatio >= 1 ? 'text-green-500' : 'text-gray-900 dark:text-white'}`}>
|
||||
{displayMetrics.calmarRatio.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Correlation Section */}
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h4 className="font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Correlacion con Mercado
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">R-Squared</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{(displayMetrics.rSquared * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">Beta</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{displayMetrics.beta.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
R-squared de {(displayMetrics.rSquared * 100).toFixed(0)}% indica que{' '}
|
||||
{displayMetrics.rSquared >= 0.7 ? 'alta' : displayMetrics.rSquared >= 0.4 ? 'moderada' : 'baja'}{' '}
|
||||
correlacion con el mercado de referencia.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last Update */}
|
||||
<div className="mt-4 text-xs text-gray-500 dark:text-gray-400 text-right">
|
||||
Ultima actualizacion: {new Date(displayMetrics.updatedAt).toLocaleString()}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RiskAnalytics;
|
||||
@ -6,9 +6,14 @@
|
||||
export { AllocationChart } from './AllocationChart';
|
||||
export { AllocationTable } from './AllocationTable';
|
||||
export { AllocationsCard } from './AllocationsCard';
|
||||
export { CorrelationMatrix } from './CorrelationMatrix';
|
||||
export { GoalCard } from './GoalCard';
|
||||
export { GoalProgressCard } from './GoalProgressCard';
|
||||
export { GoalsManager } from './GoalsManager';
|
||||
export { MonteCarloSimulator } from './MonteCarloSimulator';
|
||||
export { PerformanceChart } from './PerformanceChart';
|
||||
export { PerformanceMetricsCard } from './PerformanceMetricsCard';
|
||||
export { RebalanceCard } from './RebalanceCard';
|
||||
export { RebalanceModal } from './RebalanceModal';
|
||||
export { RebalancingPanel } from './RebalancingPanel';
|
||||
export { RiskAnalytics } from './RiskAnalytics';
|
||||
|
||||
302
src/services/marketplace.service.ts
Normal file
302
src/services/marketplace.service.ts
Normal file
@ -0,0 +1,302 @@
|
||||
/**
|
||||
* Marketplace Service
|
||||
* API client for marketplace products, signal packs, advisory services, and subscriptions
|
||||
*/
|
||||
|
||||
import { apiClient as api } from '../lib/apiClient';
|
||||
import type {
|
||||
MarketplaceProductListItem,
|
||||
SignalPack,
|
||||
AdvisoryService,
|
||||
CourseProduct,
|
||||
ProductReview,
|
||||
UserSubscription,
|
||||
ConsultationBooking,
|
||||
MarketplaceFilters,
|
||||
PaginatedResponse,
|
||||
ApiResponse,
|
||||
ProductCategory,
|
||||
} from '../types/marketplace.types';
|
||||
|
||||
// ============================================================================
|
||||
// Products (General)
|
||||
// ============================================================================
|
||||
|
||||
export async function getProducts(
|
||||
filters?: MarketplaceFilters
|
||||
): Promise<PaginatedResponse<MarketplaceProductListItem>> {
|
||||
const response = await api.get<ApiResponse<PaginatedResponse<MarketplaceProductListItem>>>(
|
||||
'/marketplace/products',
|
||||
{ params: filters }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getFeaturedProducts(limit = 6): Promise<MarketplaceProductListItem[]> {
|
||||
const response = await api.get<ApiResponse<MarketplaceProductListItem[]>>(
|
||||
'/marketplace/products/featured',
|
||||
{ params: { limit } }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getPopularProducts(limit = 6): Promise<MarketplaceProductListItem[]> {
|
||||
const response = await api.get<ApiResponse<MarketplaceProductListItem[]>>(
|
||||
'/marketplace/products/popular',
|
||||
{ params: { limit } }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getRelatedProducts(
|
||||
productId: string,
|
||||
limit = 4
|
||||
): Promise<MarketplaceProductListItem[]> {
|
||||
const response = await api.get<ApiResponse<MarketplaceProductListItem[]>>(
|
||||
`/marketplace/products/${productId}/related`,
|
||||
{ params: { limit } }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Signal Packs
|
||||
// ============================================================================
|
||||
|
||||
export async function getSignalPacks(
|
||||
filters?: MarketplaceFilters
|
||||
): Promise<PaginatedResponse<MarketplaceProductListItem>> {
|
||||
const response = await api.get<ApiResponse<PaginatedResponse<MarketplaceProductListItem>>>(
|
||||
'/marketplace/signals',
|
||||
{ params: filters }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getSignalPackById(id: string): Promise<SignalPack> {
|
||||
const response = await api.get<ApiResponse<SignalPack>>(`/marketplace/signals/${id}`);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getSignalPackBySlug(slug: string): Promise<SignalPack> {
|
||||
const response = await api.get<ApiResponse<SignalPack>>(`/marketplace/signals/slug/${slug}`);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function subscribeToSignalPack(
|
||||
packId: string,
|
||||
pricingId: string
|
||||
): Promise<UserSubscription> {
|
||||
const response = await api.post<ApiResponse<UserSubscription>>(
|
||||
`/marketplace/signals/${packId}/subscribe`,
|
||||
{ pricingId }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Advisory Services
|
||||
// ============================================================================
|
||||
|
||||
export async function getAdvisoryServices(
|
||||
filters?: MarketplaceFilters
|
||||
): Promise<PaginatedResponse<MarketplaceProductListItem>> {
|
||||
const response = await api.get<ApiResponse<PaginatedResponse<MarketplaceProductListItem>>>(
|
||||
'/marketplace/advisory',
|
||||
{ params: filters }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getAdvisoryServiceById(id: string): Promise<AdvisoryService> {
|
||||
const response = await api.get<ApiResponse<AdvisoryService>>(`/marketplace/advisory/${id}`);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getAdvisoryServiceBySlug(slug: string): Promise<AdvisoryService> {
|
||||
const response = await api.get<ApiResponse<AdvisoryService>>(
|
||||
`/marketplace/advisory/slug/${slug}`
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getAdvisorAvailability(
|
||||
advisoryId: string,
|
||||
date: string
|
||||
): Promise<{ slots: string[]; timezone: string }> {
|
||||
const response = await api.get<ApiResponse<{ slots: string[]; timezone: string }>>(
|
||||
`/marketplace/advisory/${advisoryId}/availability`,
|
||||
{ params: { date } }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function bookConsultation(
|
||||
advisoryId: string,
|
||||
data: {
|
||||
serviceTypeId: string;
|
||||
scheduledAt: string;
|
||||
notes?: string;
|
||||
}
|
||||
): Promise<ConsultationBooking> {
|
||||
const response = await api.post<ApiResponse<ConsultationBooking>>(
|
||||
`/marketplace/advisory/${advisoryId}/book`,
|
||||
data
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Course Products
|
||||
// ============================================================================
|
||||
|
||||
export async function getCourseProducts(
|
||||
filters?: MarketplaceFilters
|
||||
): Promise<PaginatedResponse<MarketplaceProductListItem>> {
|
||||
const response = await api.get<ApiResponse<PaginatedResponse<MarketplaceProductListItem>>>(
|
||||
'/marketplace/courses',
|
||||
{ params: filters }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getCourseProductById(id: string): Promise<CourseProduct> {
|
||||
const response = await api.get<ApiResponse<CourseProduct>>(`/marketplace/courses/${id}`);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getCourseProductBySlug(slug: string): Promise<CourseProduct> {
|
||||
const response = await api.get<ApiResponse<CourseProduct>>(`/marketplace/courses/slug/${slug}`);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Reviews
|
||||
// ============================================================================
|
||||
|
||||
export async function getProductReviews(
|
||||
productId: string,
|
||||
productType: ProductCategory,
|
||||
params?: { page?: number; pageSize?: number; sortBy?: 'newest' | 'helpful' | 'rating' }
|
||||
): Promise<PaginatedResponse<ProductReview>> {
|
||||
const response = await api.get<ApiResponse<PaginatedResponse<ProductReview>>>(
|
||||
`/marketplace/${productType}/${productId}/reviews`,
|
||||
{ params }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function createReview(
|
||||
productId: string,
|
||||
productType: ProductCategory,
|
||||
data: { rating: number; title?: string; comment: string }
|
||||
): Promise<ProductReview> {
|
||||
const response = await api.post<ApiResponse<ProductReview>>(
|
||||
`/marketplace/${productType}/${productId}/reviews`,
|
||||
data
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function markReviewHelpful(reviewId: string): Promise<void> {
|
||||
await api.post(`/marketplace/reviews/${reviewId}/helpful`);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Subscriptions
|
||||
// ============================================================================
|
||||
|
||||
export async function getMySubscriptions(): Promise<UserSubscription[]> {
|
||||
const response = await api.get<ApiResponse<UserSubscription[]>>('/marketplace/subscriptions');
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getSubscriptionById(id: string): Promise<UserSubscription> {
|
||||
const response = await api.get<ApiResponse<UserSubscription>>(`/marketplace/subscriptions/${id}`);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function cancelSubscription(id: string): Promise<UserSubscription> {
|
||||
const response = await api.post<ApiResponse<UserSubscription>>(
|
||||
`/marketplace/subscriptions/${id}/cancel`
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function renewSubscription(
|
||||
id: string,
|
||||
pricingId: string
|
||||
): Promise<UserSubscription> {
|
||||
const response = await api.post<ApiResponse<UserSubscription>>(
|
||||
`/marketplace/subscriptions/${id}/renew`,
|
||||
{ pricingId }
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Bookings
|
||||
// ============================================================================
|
||||
|
||||
export async function getMyBookings(): Promise<ConsultationBooking[]> {
|
||||
const response = await api.get<ApiResponse<ConsultationBooking[]>>('/marketplace/bookings');
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function getBookingById(id: string): Promise<ConsultationBooking> {
|
||||
const response = await api.get<ApiResponse<ConsultationBooking>>(`/marketplace/bookings/${id}`);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
export async function cancelBooking(id: string): Promise<ConsultationBooking> {
|
||||
const response = await api.post<ApiResponse<ConsultationBooking>>(
|
||||
`/marketplace/bookings/${id}/cancel`
|
||||
);
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Export service object
|
||||
// ============================================================================
|
||||
|
||||
export const marketplaceService = {
|
||||
// Products
|
||||
getProducts,
|
||||
getFeaturedProducts,
|
||||
getPopularProducts,
|
||||
getRelatedProducts,
|
||||
|
||||
// Signal Packs
|
||||
getSignalPacks,
|
||||
getSignalPackById,
|
||||
getSignalPackBySlug,
|
||||
subscribeToSignalPack,
|
||||
|
||||
// Advisory Services
|
||||
getAdvisoryServices,
|
||||
getAdvisoryServiceById,
|
||||
getAdvisoryServiceBySlug,
|
||||
getAdvisorAvailability,
|
||||
bookConsultation,
|
||||
|
||||
// Course Products
|
||||
getCourseProducts,
|
||||
getCourseProductById,
|
||||
getCourseProductBySlug,
|
||||
|
||||
// Reviews
|
||||
getProductReviews,
|
||||
createReview,
|
||||
markReviewHelpful,
|
||||
|
||||
// Subscriptions
|
||||
getMySubscriptions,
|
||||
getSubscriptionById,
|
||||
cancelSubscription,
|
||||
renewSubscription,
|
||||
|
||||
// Bookings
|
||||
getMyBookings,
|
||||
getBookingById,
|
||||
cancelBooking,
|
||||
};
|
||||
525
src/stores/marketplaceStore.ts
Normal file
525
src/stores/marketplaceStore.ts
Normal file
@ -0,0 +1,525 @@
|
||||
/**
|
||||
* Marketplace Store
|
||||
* Zustand store for marketplace module state management
|
||||
*/
|
||||
|
||||
import { create } from 'zustand';
|
||||
import { devtools } from 'zustand/middleware';
|
||||
import type {
|
||||
MarketplaceProductListItem,
|
||||
SignalPack,
|
||||
AdvisoryService,
|
||||
CourseProduct,
|
||||
ProductReview,
|
||||
UserSubscription,
|
||||
ConsultationBooking,
|
||||
MarketplaceFilters,
|
||||
ProductCategory,
|
||||
} from '../types/marketplace.types';
|
||||
import { marketplaceService } from '../services/marketplace.service';
|
||||
|
||||
// ============================================================================
|
||||
// State Interface
|
||||
// ============================================================================
|
||||
|
||||
interface MarketplaceState {
|
||||
// Products (all categories)
|
||||
products: MarketplaceProductListItem[];
|
||||
featuredProducts: MarketplaceProductListItem[];
|
||||
popularProducts: MarketplaceProductListItem[];
|
||||
relatedProducts: MarketplaceProductListItem[];
|
||||
totalProducts: number;
|
||||
currentPage: number;
|
||||
pageSize: number;
|
||||
loadingProducts: boolean;
|
||||
filters: MarketplaceFilters;
|
||||
|
||||
// Current Product Detail
|
||||
currentSignalPack: SignalPack | null;
|
||||
currentAdvisory: AdvisoryService | null;
|
||||
currentCourseProduct: CourseProduct | null;
|
||||
loadingDetail: boolean;
|
||||
|
||||
// Reviews
|
||||
reviews: ProductReview[];
|
||||
totalReviews: number;
|
||||
loadingReviews: boolean;
|
||||
submittingReview: boolean;
|
||||
|
||||
// User subscriptions and bookings
|
||||
mySubscriptions: UserSubscription[];
|
||||
myBookings: ConsultationBooking[];
|
||||
loadingSubscriptions: boolean;
|
||||
loadingBookings: boolean;
|
||||
|
||||
// Availability (for advisory)
|
||||
availableSlots: string[];
|
||||
availabilityTimezone: string;
|
||||
loadingAvailability: boolean;
|
||||
|
||||
// General
|
||||
error: string | null;
|
||||
|
||||
// Actions - Products
|
||||
fetchProducts: (filters?: MarketplaceFilters) => Promise<void>;
|
||||
fetchFeaturedProducts: () => Promise<void>;
|
||||
fetchPopularProducts: () => Promise<void>;
|
||||
fetchRelatedProducts: (productId: string) => Promise<void>;
|
||||
|
||||
// Actions - Signal Packs
|
||||
fetchSignalPackById: (id: string) => Promise<void>;
|
||||
fetchSignalPackBySlug: (slug: string) => Promise<void>;
|
||||
subscribeToSignalPack: (packId: string, pricingId: string) => Promise<void>;
|
||||
|
||||
// Actions - Advisory
|
||||
fetchAdvisoryById: (id: string) => Promise<void>;
|
||||
fetchAdvisoryBySlug: (slug: string) => Promise<void>;
|
||||
fetchAdvisorAvailability: (advisoryId: string, date: string) => Promise<void>;
|
||||
bookConsultation: (
|
||||
advisoryId: string,
|
||||
data: { serviceTypeId: string; scheduledAt: string; notes?: string }
|
||||
) => Promise<void>;
|
||||
|
||||
// Actions - Course Products
|
||||
fetchCourseProductById: (id: string) => Promise<void>;
|
||||
fetchCourseProductBySlug: (slug: string) => Promise<void>;
|
||||
|
||||
// Actions - Reviews
|
||||
fetchReviews: (
|
||||
productId: string,
|
||||
productType: ProductCategory,
|
||||
params?: { page?: number; pageSize?: number; sortBy?: 'newest' | 'helpful' | 'rating' }
|
||||
) => Promise<void>;
|
||||
createReview: (
|
||||
productId: string,
|
||||
productType: ProductCategory,
|
||||
data: { rating: number; title?: string; comment: string }
|
||||
) => Promise<void>;
|
||||
markReviewHelpful: (reviewId: string) => Promise<void>;
|
||||
|
||||
// Actions - Subscriptions
|
||||
fetchMySubscriptions: () => Promise<void>;
|
||||
cancelSubscription: (id: string) => Promise<void>;
|
||||
|
||||
// Actions - Bookings
|
||||
fetchMyBookings: () => Promise<void>;
|
||||
cancelBooking: (id: string) => Promise<void>;
|
||||
|
||||
// Utility
|
||||
setFilters: (filters: MarketplaceFilters) => void;
|
||||
clearError: () => void;
|
||||
resetCurrentProduct: () => void;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Initial State
|
||||
// ============================================================================
|
||||
|
||||
const initialState = {
|
||||
// Products
|
||||
products: [],
|
||||
featuredProducts: [],
|
||||
popularProducts: [],
|
||||
relatedProducts: [],
|
||||
totalProducts: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 12,
|
||||
loadingProducts: false,
|
||||
filters: {},
|
||||
|
||||
// Current Product
|
||||
currentSignalPack: null,
|
||||
currentAdvisory: null,
|
||||
currentCourseProduct: null,
|
||||
loadingDetail: false,
|
||||
|
||||
// Reviews
|
||||
reviews: [],
|
||||
totalReviews: 0,
|
||||
loadingReviews: false,
|
||||
submittingReview: false,
|
||||
|
||||
// User data
|
||||
mySubscriptions: [],
|
||||
myBookings: [],
|
||||
loadingSubscriptions: false,
|
||||
loadingBookings: false,
|
||||
|
||||
// Availability
|
||||
availableSlots: [],
|
||||
availabilityTimezone: 'UTC',
|
||||
loadingAvailability: false,
|
||||
|
||||
// General
|
||||
error: null,
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Store
|
||||
// ============================================================================
|
||||
|
||||
export const useMarketplaceStore = create<MarketplaceState>()(
|
||||
devtools(
|
||||
(set, get) => ({
|
||||
...initialState,
|
||||
|
||||
// ========================================================================
|
||||
// Product Actions
|
||||
// ========================================================================
|
||||
|
||||
fetchProducts: async (filters?: MarketplaceFilters) => {
|
||||
const state = get();
|
||||
const mergedFilters = { ...state.filters, ...filters };
|
||||
|
||||
set({ loadingProducts: true, error: null, filters: mergedFilters });
|
||||
|
||||
try {
|
||||
const result = await marketplaceService.getProducts(mergedFilters);
|
||||
set({
|
||||
products: result.data,
|
||||
totalProducts: result.total,
|
||||
currentPage: result.page,
|
||||
pageSize: result.pageSize,
|
||||
loadingProducts: false,
|
||||
});
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to fetch products';
|
||||
set({ error: errorMessage, loadingProducts: false, products: [] });
|
||||
console.error('Error fetching products:', error);
|
||||
}
|
||||
},
|
||||
|
||||
fetchFeaturedProducts: async () => {
|
||||
try {
|
||||
const products = await marketplaceService.getFeaturedProducts(6);
|
||||
set({ featuredProducts: products });
|
||||
} catch (error) {
|
||||
console.error('Error fetching featured products:', error);
|
||||
}
|
||||
},
|
||||
|
||||
fetchPopularProducts: async () => {
|
||||
try {
|
||||
const products = await marketplaceService.getPopularProducts(6);
|
||||
set({ popularProducts: products });
|
||||
} catch (error) {
|
||||
console.error('Error fetching popular products:', error);
|
||||
}
|
||||
},
|
||||
|
||||
fetchRelatedProducts: async (productId: string) => {
|
||||
try {
|
||||
const products = await marketplaceService.getRelatedProducts(productId, 4);
|
||||
set({ relatedProducts: products });
|
||||
} catch (error) {
|
||||
console.error('Error fetching related products:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// Signal Pack Actions
|
||||
// ========================================================================
|
||||
|
||||
fetchSignalPackById: async (id: string) => {
|
||||
set({ loadingDetail: true, error: null, currentSignalPack: null });
|
||||
|
||||
try {
|
||||
const signalPack = await marketplaceService.getSignalPackById(id);
|
||||
set({ currentSignalPack: signalPack, loadingDetail: false });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to fetch signal pack';
|
||||
set({ error: errorMessage, loadingDetail: false });
|
||||
console.error('Error fetching signal pack:', error);
|
||||
}
|
||||
},
|
||||
|
||||
fetchSignalPackBySlug: async (slug: string) => {
|
||||
set({ loadingDetail: true, error: null, currentSignalPack: null });
|
||||
|
||||
try {
|
||||
const signalPack = await marketplaceService.getSignalPackBySlug(slug);
|
||||
set({ currentSignalPack: signalPack, loadingDetail: false });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to fetch signal pack';
|
||||
set({ error: errorMessage, loadingDetail: false });
|
||||
console.error('Error fetching signal pack:', error);
|
||||
}
|
||||
},
|
||||
|
||||
subscribeToSignalPack: async (packId: string, pricingId: string) => {
|
||||
set({ error: null });
|
||||
|
||||
try {
|
||||
const subscription = await marketplaceService.subscribeToSignalPack(packId, pricingId);
|
||||
// Add to subscriptions list
|
||||
const state = get();
|
||||
set({ mySubscriptions: [...state.mySubscriptions, subscription] });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to subscribe';
|
||||
set({ error: errorMessage });
|
||||
console.error('Error subscribing to signal pack:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// Advisory Actions
|
||||
// ========================================================================
|
||||
|
||||
fetchAdvisoryById: async (id: string) => {
|
||||
set({ loadingDetail: true, error: null, currentAdvisory: null });
|
||||
|
||||
try {
|
||||
const advisory = await marketplaceService.getAdvisoryServiceById(id);
|
||||
set({ currentAdvisory: advisory, loadingDetail: false });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to fetch advisory';
|
||||
set({ error: errorMessage, loadingDetail: false });
|
||||
console.error('Error fetching advisory:', error);
|
||||
}
|
||||
},
|
||||
|
||||
fetchAdvisoryBySlug: async (slug: string) => {
|
||||
set({ loadingDetail: true, error: null, currentAdvisory: null });
|
||||
|
||||
try {
|
||||
const advisory = await marketplaceService.getAdvisoryServiceBySlug(slug);
|
||||
set({ currentAdvisory: advisory, loadingDetail: false });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to fetch advisory';
|
||||
set({ error: errorMessage, loadingDetail: false });
|
||||
console.error('Error fetching advisory:', error);
|
||||
}
|
||||
},
|
||||
|
||||
fetchAdvisorAvailability: async (advisoryId: string, date: string) => {
|
||||
set({ loadingAvailability: true });
|
||||
|
||||
try {
|
||||
const result = await marketplaceService.getAdvisorAvailability(advisoryId, date);
|
||||
set({
|
||||
availableSlots: result.slots,
|
||||
availabilityTimezone: result.timezone,
|
||||
loadingAvailability: false,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching availability:', error);
|
||||
set({ loadingAvailability: false, availableSlots: [] });
|
||||
}
|
||||
},
|
||||
|
||||
bookConsultation: async (advisoryId, data) => {
|
||||
set({ error: null });
|
||||
|
||||
try {
|
||||
const booking = await marketplaceService.bookConsultation(advisoryId, data);
|
||||
const state = get();
|
||||
set({ myBookings: [...state.myBookings, booking] });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to book consultation';
|
||||
set({ error: errorMessage });
|
||||
console.error('Error booking consultation:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// Course Product Actions
|
||||
// ========================================================================
|
||||
|
||||
fetchCourseProductById: async (id: string) => {
|
||||
set({ loadingDetail: true, error: null, currentCourseProduct: null });
|
||||
|
||||
try {
|
||||
const course = await marketplaceService.getCourseProductById(id);
|
||||
set({ currentCourseProduct: course, loadingDetail: false });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to fetch course';
|
||||
set({ error: errorMessage, loadingDetail: false });
|
||||
console.error('Error fetching course:', error);
|
||||
}
|
||||
},
|
||||
|
||||
fetchCourseProductBySlug: async (slug: string) => {
|
||||
set({ loadingDetail: true, error: null, currentCourseProduct: null });
|
||||
|
||||
try {
|
||||
const course = await marketplaceService.getCourseProductBySlug(slug);
|
||||
set({ currentCourseProduct: course, loadingDetail: false });
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to fetch course';
|
||||
set({ error: errorMessage, loadingDetail: false });
|
||||
console.error('Error fetching course:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// Review Actions
|
||||
// ========================================================================
|
||||
|
||||
fetchReviews: async (productId, productType, params) => {
|
||||
set({ loadingReviews: true });
|
||||
|
||||
try {
|
||||
const result = await marketplaceService.getProductReviews(productId, productType, params);
|
||||
set({
|
||||
reviews: result.data,
|
||||
totalReviews: result.total,
|
||||
loadingReviews: false,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching reviews:', error);
|
||||
set({ loadingReviews: false, reviews: [] });
|
||||
}
|
||||
},
|
||||
|
||||
createReview: async (productId, productType, data) => {
|
||||
set({ submittingReview: true, error: null });
|
||||
|
||||
try {
|
||||
const review = await marketplaceService.createReview(productId, productType, data);
|
||||
const state = get();
|
||||
set({
|
||||
reviews: [review, ...state.reviews],
|
||||
totalReviews: state.totalReviews + 1,
|
||||
submittingReview: false,
|
||||
});
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to create review';
|
||||
set({ error: errorMessage, submittingReview: false });
|
||||
console.error('Error creating review:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
markReviewHelpful: async (reviewId: string) => {
|
||||
try {
|
||||
await marketplaceService.markReviewHelpful(reviewId);
|
||||
// Update local state
|
||||
const state = get();
|
||||
set({
|
||||
reviews: state.reviews.map((r) =>
|
||||
r.id === reviewId ? { ...r, helpful: r.helpful + 1 } : r
|
||||
),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error marking review helpful:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// Subscription Actions
|
||||
// ========================================================================
|
||||
|
||||
fetchMySubscriptions: async () => {
|
||||
set({ loadingSubscriptions: true });
|
||||
|
||||
try {
|
||||
const subscriptions = await marketplaceService.getMySubscriptions();
|
||||
set({ mySubscriptions: subscriptions, loadingSubscriptions: false });
|
||||
} catch (error) {
|
||||
console.error('Error fetching subscriptions:', error);
|
||||
set({ loadingSubscriptions: false, mySubscriptions: [] });
|
||||
}
|
||||
},
|
||||
|
||||
cancelSubscription: async (id: string) => {
|
||||
set({ error: null });
|
||||
|
||||
try {
|
||||
const updated = await marketplaceService.cancelSubscription(id);
|
||||
const state = get();
|
||||
set({
|
||||
mySubscriptions: state.mySubscriptions.map((s) => (s.id === id ? updated : s)),
|
||||
});
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to cancel subscription';
|
||||
set({ error: errorMessage });
|
||||
console.error('Error cancelling subscription:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// Booking Actions
|
||||
// ========================================================================
|
||||
|
||||
fetchMyBookings: async () => {
|
||||
set({ loadingBookings: true });
|
||||
|
||||
try {
|
||||
const bookings = await marketplaceService.getMyBookings();
|
||||
set({ myBookings: bookings, loadingBookings: false });
|
||||
} catch (error) {
|
||||
console.error('Error fetching bookings:', error);
|
||||
set({ loadingBookings: false, myBookings: [] });
|
||||
}
|
||||
},
|
||||
|
||||
cancelBooking: async (id: string) => {
|
||||
set({ error: null });
|
||||
|
||||
try {
|
||||
const updated = await marketplaceService.cancelBooking(id);
|
||||
const state = get();
|
||||
set({
|
||||
myBookings: state.myBookings.map((b) => (b.id === id ? updated : b)),
|
||||
});
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to cancel booking';
|
||||
set({ error: errorMessage });
|
||||
console.error('Error cancelling booking:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// Utility Actions
|
||||
// ========================================================================
|
||||
|
||||
setFilters: (filters: MarketplaceFilters) => {
|
||||
set({ filters });
|
||||
},
|
||||
|
||||
clearError: () => {
|
||||
set({ error: null });
|
||||
},
|
||||
|
||||
resetCurrentProduct: () => {
|
||||
set({
|
||||
currentSignalPack: null,
|
||||
currentAdvisory: null,
|
||||
currentCourseProduct: null,
|
||||
loadingDetail: false,
|
||||
reviews: [],
|
||||
totalReviews: 0,
|
||||
relatedProducts: [],
|
||||
});
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'marketplace-store',
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// Selectors
|
||||
// ============================================================================
|
||||
|
||||
export const useProducts = () => useMarketplaceStore((state) => state.products);
|
||||
export const useFeaturedProducts = () => useMarketplaceStore((state) => state.featuredProducts);
|
||||
export const usePopularProducts = () => useMarketplaceStore((state) => state.popularProducts);
|
||||
export const useRelatedProducts = () => useMarketplaceStore((state) => state.relatedProducts);
|
||||
export const useCurrentSignalPack = () => useMarketplaceStore((state) => state.currentSignalPack);
|
||||
export const useCurrentAdvisory = () => useMarketplaceStore((state) => state.currentAdvisory);
|
||||
export const useCurrentCourseProduct = () => useMarketplaceStore((state) => state.currentCourseProduct);
|
||||
export const useProductReviews = () => useMarketplaceStore((state) => state.reviews);
|
||||
export const useMySubscriptions = () => useMarketplaceStore((state) => state.mySubscriptions);
|
||||
export const useMyBookings = () => useMarketplaceStore((state) => state.myBookings);
|
||||
export const useMarketplaceFilters = () => useMarketplaceStore((state) => state.filters);
|
||||
export const useMarketplaceError = () => useMarketplaceStore((state) => state.error);
|
||||
export const useLoadingProducts = () => useMarketplaceStore((state) => state.loadingProducts);
|
||||
export const useLoadingDetail = () => useMarketplaceStore((state) => state.loadingDetail);
|
||||
|
||||
export default useMarketplaceStore;
|
||||
338
src/types/marketplace.types.ts
Normal file
338
src/types/marketplace.types.ts
Normal file
@ -0,0 +1,338 @@
|
||||
/**
|
||||
* Marketplace Module Types
|
||||
* Type definitions for signal packs, advisory services, courses, and marketplace products
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// Enums
|
||||
// ============================================================================
|
||||
|
||||
export type ProductCategory = 'signals' | 'courses' | 'advisory' | 'tools';
|
||||
export type ProductStatus = 'active' | 'inactive' | 'draft' | 'archived';
|
||||
export type SubscriptionPeriod = 'monthly' | 'quarterly' | 'yearly' | 'lifetime';
|
||||
export type AdvisoryAvailability = 'available' | 'busy' | 'away' | 'offline';
|
||||
|
||||
// ============================================================================
|
||||
// Provider Types
|
||||
// ============================================================================
|
||||
|
||||
export interface MarketplaceProvider {
|
||||
id: string;
|
||||
name: string;
|
||||
avatarUrl?: string;
|
||||
bio?: string;
|
||||
verified: boolean;
|
||||
rating: number;
|
||||
totalReviews: number;
|
||||
totalSubscribers: number;
|
||||
joinedAt: string;
|
||||
specializations: string[];
|
||||
socialLinks?: {
|
||||
twitter?: string;
|
||||
telegram?: string;
|
||||
website?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Signal Pack Types
|
||||
// ============================================================================
|
||||
|
||||
export interface SignalPack {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
shortDescription?: string;
|
||||
thumbnailUrl?: string;
|
||||
provider: MarketplaceProvider;
|
||||
category: ProductCategory;
|
||||
status: ProductStatus;
|
||||
|
||||
// Signal Stats
|
||||
winRate: number;
|
||||
avgProfitPercent: number;
|
||||
totalSignals: number;
|
||||
avgSignalsPerWeek: number;
|
||||
symbolsCovered: string[];
|
||||
tradingStyle: string;
|
||||
riskLevel: 'low' | 'medium' | 'high';
|
||||
|
||||
// Pricing
|
||||
pricing: SignalPackPricing[];
|
||||
hasFreeTrial: boolean;
|
||||
freeTrialDays?: number;
|
||||
|
||||
// Performance
|
||||
monthlyReturns: MonthlyReturn[];
|
||||
recentSignals: SignalPreview[];
|
||||
|
||||
// Meta
|
||||
totalSubscribers: number;
|
||||
rating: number;
|
||||
totalReviews: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface SignalPackPricing {
|
||||
id: string;
|
||||
period: SubscriptionPeriod;
|
||||
priceUsd: number;
|
||||
originalPriceUsd?: number;
|
||||
discountPercent?: number;
|
||||
isPopular?: boolean;
|
||||
}
|
||||
|
||||
export interface MonthlyReturn {
|
||||
month: string;
|
||||
year: number;
|
||||
returnPercent: number;
|
||||
totalSignals: number;
|
||||
winRate: number;
|
||||
}
|
||||
|
||||
export interface SignalPreview {
|
||||
id: string;
|
||||
symbol: string;
|
||||
direction: 'long' | 'short';
|
||||
entryPrice: number;
|
||||
takeProfitPrice?: number;
|
||||
stopLossPrice?: number;
|
||||
status: 'pending' | 'active' | 'closed';
|
||||
profitLossPercent?: number;
|
||||
createdAt: string;
|
||||
closedAt?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Advisory Service Types
|
||||
// ============================================================================
|
||||
|
||||
export interface AdvisoryService {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
shortDescription?: string;
|
||||
thumbnailUrl?: string;
|
||||
advisor: AdvisorProfile;
|
||||
category: ProductCategory;
|
||||
status: ProductStatus;
|
||||
|
||||
// Service Details
|
||||
specializations: string[];
|
||||
serviceTypes: ServiceType[];
|
||||
languages: string[];
|
||||
|
||||
// Availability
|
||||
availability: AdvisoryAvailability;
|
||||
availableSlots: AvailabilitySlot[];
|
||||
timezone: string;
|
||||
responseTimeHours: number;
|
||||
|
||||
// Pricing
|
||||
pricing: AdvisoryPricing[];
|
||||
|
||||
// Meta
|
||||
totalConsultations: number;
|
||||
rating: number;
|
||||
totalReviews: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface AdvisorProfile extends MarketplaceProvider {
|
||||
title?: string;
|
||||
experience: string;
|
||||
credentials: string[];
|
||||
portfolio?: string;
|
||||
tradingExperienceYears: number;
|
||||
}
|
||||
|
||||
export interface ServiceType {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
durationMinutes: number;
|
||||
priceUsd: number;
|
||||
}
|
||||
|
||||
export interface AvailabilitySlot {
|
||||
id: string;
|
||||
dayOfWeek: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
isAvailable: boolean;
|
||||
}
|
||||
|
||||
export interface AdvisoryPricing {
|
||||
id: string;
|
||||
serviceTypeId: string;
|
||||
serviceType: ServiceType;
|
||||
priceUsd: number;
|
||||
discountedPriceUsd?: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Course Product Types (Marketplace view)
|
||||
// ============================================================================
|
||||
|
||||
export interface CourseProduct {
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
shortDescription?: string;
|
||||
thumbnailUrl?: string;
|
||||
instructor: MarketplaceProvider;
|
||||
category: ProductCategory;
|
||||
status: ProductStatus;
|
||||
|
||||
// Course Details
|
||||
difficultyLevel: 'beginner' | 'intermediate' | 'advanced';
|
||||
totalLessons: number;
|
||||
totalDuration: number;
|
||||
topics: string[];
|
||||
|
||||
// Pricing
|
||||
priceUsd: number;
|
||||
originalPriceUsd?: number;
|
||||
isFree: boolean;
|
||||
|
||||
// Meta
|
||||
totalEnrollments: number;
|
||||
rating: number;
|
||||
totalReviews: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Unified Marketplace Product
|
||||
// ============================================================================
|
||||
|
||||
export type MarketplaceProduct =
|
||||
| (SignalPack & { productType: 'signals' })
|
||||
| (AdvisoryService & { productType: 'advisory' })
|
||||
| (CourseProduct & { productType: 'courses' });
|
||||
|
||||
export interface MarketplaceProductListItem {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
shortDescription?: string;
|
||||
thumbnailUrl?: string;
|
||||
productType: ProductCategory;
|
||||
providerName: string;
|
||||
providerAvatar?: string;
|
||||
providerVerified: boolean;
|
||||
priceUsd: number;
|
||||
hasFreeTrial?: boolean;
|
||||
rating: number;
|
||||
totalReviews: number;
|
||||
totalSubscribers?: number;
|
||||
tags: string[];
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Review Types
|
||||
// ============================================================================
|
||||
|
||||
export interface ProductReview {
|
||||
id: string;
|
||||
productId: string;
|
||||
productType: ProductCategory;
|
||||
userId: string;
|
||||
userName: string;
|
||||
userAvatar?: string;
|
||||
rating: number;
|
||||
title?: string;
|
||||
comment: string;
|
||||
helpful: number;
|
||||
verified: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
response?: ProviderResponse;
|
||||
}
|
||||
|
||||
export interface ProviderResponse {
|
||||
comment: string;
|
||||
respondedAt: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Subscription Types
|
||||
// ============================================================================
|
||||
|
||||
export interface UserSubscription {
|
||||
id: string;
|
||||
userId: string;
|
||||
productId: string;
|
||||
productType: ProductCategory;
|
||||
product: MarketplaceProductListItem;
|
||||
status: 'active' | 'cancelled' | 'expired' | 'paused';
|
||||
period: SubscriptionPeriod;
|
||||
priceUsd: number;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
autoRenew: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Filter Types
|
||||
// ============================================================================
|
||||
|
||||
export interface MarketplaceFilters {
|
||||
category?: ProductCategory;
|
||||
search?: string;
|
||||
minRating?: number;
|
||||
maxPrice?: number;
|
||||
minPrice?: number;
|
||||
sortBy?: 'newest' | 'popular' | 'rating' | 'price_asc' | 'price_desc';
|
||||
hasFreeTrial?: boolean;
|
||||
verified?: boolean;
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// API Response Types
|
||||
// ============================================================================
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
data: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
success: boolean;
|
||||
data: T;
|
||||
error?: {
|
||||
message: string;
|
||||
code: string;
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Booking Types
|
||||
// ============================================================================
|
||||
|
||||
export interface ConsultationBooking {
|
||||
id: string;
|
||||
userId: string;
|
||||
advisoryId: string;
|
||||
serviceTypeId: string;
|
||||
scheduledAt: string;
|
||||
durationMinutes: number;
|
||||
status: 'pending' | 'confirmed' | 'completed' | 'cancelled';
|
||||
meetingLink?: string;
|
||||
notes?: string;
|
||||
priceUsd: number;
|
||||
createdAt: string;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user