110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { RefreshCw, Calendar, Building2 } from 'lucide-react';
|
|
import type { DashboardConfig } from '@/lib/pipeline-types';
|
|
import { DashboardSection } from './DashboardSection';
|
|
|
|
interface DynamicDashboardProps {
|
|
pipelineId: string;
|
|
config: DashboardConfig;
|
|
businessId?: string;
|
|
jobId?: string;
|
|
}
|
|
|
|
// Time range options
|
|
const TIME_RANGES = [
|
|
{ value: '7d', label: 'Last 7 days' },
|
|
{ value: '14d', label: 'Last 14 days' },
|
|
{ value: '30d', label: 'Last 30 days' },
|
|
{ value: '90d', label: 'Last 90 days' },
|
|
];
|
|
|
|
/**
|
|
* Dynamic dashboard that renders from a DashboardConfig.
|
|
*
|
|
* This component:
|
|
* - Renders sections based on the config
|
|
* - Provides time range and business filters
|
|
* - Handles global refresh
|
|
*/
|
|
export function DynamicDashboard({
|
|
pipelineId,
|
|
config,
|
|
businessId: initialBusinessId,
|
|
jobId,
|
|
}: DynamicDashboardProps) {
|
|
const [timeRange, setTimeRange] = useState(config.default_time_range || '30d');
|
|
const [businessId, setBusinessId] = useState(initialBusinessId);
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|
|
|
// Force refresh all widgets
|
|
const handleRefresh = () => {
|
|
setRefreshKey((prev) => prev + 1);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Dashboard Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
{config.title}
|
|
</h1>
|
|
{config.description && (
|
|
<p className="text-gray-600 mt-1">{config.description}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Controls */}
|
|
<div className="flex items-center space-x-3">
|
|
{/* Business Filter (placeholder) */}
|
|
{businessId && (
|
|
<div className="flex items-center text-sm text-gray-700 bg-gray-100 px-3 py-2 rounded-md">
|
|
<Building2 className="w-4 h-4 mr-2" />
|
|
<span className="truncate max-w-[150px]">{businessId}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Time Range Selector */}
|
|
<div className="relative">
|
|
<select
|
|
value={timeRange}
|
|
onChange={(e) => setTimeRange(e.target.value)}
|
|
className="appearance-none bg-white border border-gray-300 rounded-md pl-9 pr-8 py-2 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
{TIME_RANGES.map((range) => (
|
|
<option key={range.value} value={range.value}>
|
|
{range.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
|
</div>
|
|
|
|
{/* Refresh Button */}
|
|
<button
|
|
onClick={handleRefresh}
|
|
className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-md"
|
|
title="Refresh all widgets"
|
|
>
|
|
<RefreshCw className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sections */}
|
|
{config.sections.map((section) => (
|
|
<DashboardSection
|
|
key={`${section.id}-${refreshKey}`}
|
|
section={section}
|
|
pipelineId={pipelineId}
|
|
businessId={businessId}
|
|
jobId={jobId}
|
|
timeRange={timeRange}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|