Add improved production UI 4
This commit is contained in:
Urtzi Alfaro
@@ -5,6 +5,11 @@
|
||||
import React from 'react';
|
||||
import { Modal, Button, Card } from '../ui';
|
||||
import { Crown, Lock, ArrowRight, AlertTriangle } from 'lucide-react';
|
||||
import {
|
||||
SUBSCRIPTION_PLANS,
|
||||
ANALYTICS_LEVELS
|
||||
} from '../../api/types/subscription';
|
||||
import { subscriptionService } from '../../api/services/subscription';
|
||||
|
||||
interface SubscriptionError {
|
||||
error: string;
|
||||
@@ -44,29 +49,29 @@ const SubscriptionErrorHandler: React.FC<SubscriptionErrorHandlerProps> = ({
|
||||
|
||||
const getLevelDisplayName = (level: string) => {
|
||||
const levelNames: Record<string, string> = {
|
||||
basic: 'Básico',
|
||||
advanced: 'Avanzado',
|
||||
predictive: 'Predictivo'
|
||||
[ANALYTICS_LEVELS.BASIC]: 'Básico',
|
||||
[ANALYTICS_LEVELS.ADVANCED]: 'Avanzado',
|
||||
[ANALYTICS_LEVELS.PREDICTIVE]: 'Predictivo'
|
||||
};
|
||||
return levelNames[level] || level;
|
||||
};
|
||||
|
||||
const getRequiredPlan = (level: string) => {
|
||||
switch (level) {
|
||||
case 'advanced':
|
||||
return 'Professional';
|
||||
case 'predictive':
|
||||
return 'Enterprise';
|
||||
case ANALYTICS_LEVELS.ADVANCED:
|
||||
return SUBSCRIPTION_PLANS.PROFESSIONAL;
|
||||
case ANALYTICS_LEVELS.PREDICTIVE:
|
||||
return SUBSCRIPTION_PLANS.ENTERPRISE;
|
||||
default:
|
||||
return 'Professional';
|
||||
return SUBSCRIPTION_PLANS.PROFESSIONAL;
|
||||
}
|
||||
};
|
||||
|
||||
const getPlanColor = (plan: string) => {
|
||||
switch (plan.toLowerCase()) {
|
||||
case 'professional':
|
||||
case SUBSCRIPTION_PLANS.PROFESSIONAL:
|
||||
return 'bg-gradient-to-br from-purple-500 to-indigo-600';
|
||||
case 'enterprise':
|
||||
case SUBSCRIPTION_PLANS.ENTERPRISE:
|
||||
return 'bg-gradient-to-br from-yellow-400 to-orange-500';
|
||||
default:
|
||||
return 'bg-gradient-to-br from-blue-500 to-cyan-600';
|
||||
|
||||
@@ -0,0 +1,491 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, CardHeader, CardBody } from '../../ui/Card';
|
||||
import { StatsGrid } from '../../ui/Stats';
|
||||
import { Badge } from '../../ui/Badge';
|
||||
import { Button } from '../../ui/Button';
|
||||
import { Select } from '../../ui/Select';
|
||||
import {
|
||||
Euro,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
Target,
|
||||
Clock,
|
||||
Activity,
|
||||
Zap,
|
||||
Download
|
||||
} from 'lucide-react';
|
||||
import { useCurrentTenant } from '../../../stores/tenant.store';
|
||||
import { useProductionDashboard } from '../../../api';
|
||||
|
||||
export interface ProductionCostData {
|
||||
totalCost: number;
|
||||
laborCost: number;
|
||||
materialCost: number;
|
||||
overheadCost: number;
|
||||
energyCost: number;
|
||||
costPerUnit: number;
|
||||
budget: number;
|
||||
variance: number;
|
||||
trend: {
|
||||
direction: 'up' | 'down' | 'stable';
|
||||
percentage: number;
|
||||
};
|
||||
costHistory: Array<{
|
||||
date: string;
|
||||
totalCost: number;
|
||||
laborCost: number;
|
||||
materialCost: number;
|
||||
overheadCost: number;
|
||||
energyCost: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface ProductionCostAnalyticsProps {
|
||||
className?: string;
|
||||
data?: ProductionCostData;
|
||||
timeRange?: 'day' | 'week' | 'month' | 'quarter' | 'year';
|
||||
onTimeRangeChange?: (range: 'day' | 'week' | 'month' | 'quarter' | 'year') => void;
|
||||
onViewDetails?: () => void;
|
||||
onOptimize?: () => void;
|
||||
onExport?: () => void;
|
||||
}
|
||||
|
||||
const ProductionCostAnalytics: React.FC<ProductionCostAnalyticsProps> = ({
|
||||
className,
|
||||
data,
|
||||
timeRange = 'month',
|
||||
onTimeRangeChange,
|
||||
onViewDetails,
|
||||
onOptimize,
|
||||
onExport
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const currentTenant = useCurrentTenant();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
|
||||
const {
|
||||
data: dashboardData,
|
||||
isLoading,
|
||||
error
|
||||
} = useProductionDashboard(tenantId);
|
||||
|
||||
const [selectedTimeRange, setSelectedTimeRange] = useState<'day' | 'week' | 'month' | 'quarter' | 'year'>(timeRange);
|
||||
|
||||
const costData = useMemo((): ProductionCostData => {
|
||||
if (data) return data;
|
||||
|
||||
// Calculate from dashboard data if available
|
||||
if (dashboardData) {
|
||||
const mockData: ProductionCostData = {
|
||||
totalCost: 2840.50,
|
||||
laborCost: 1200.00,
|
||||
materialCost: 1450.00,
|
||||
overheadCost: 190.50,
|
||||
energyCost: 95.25,
|
||||
costPerUnit: 14.20,
|
||||
budget: 3000.00,
|
||||
variance: -159.50,
|
||||
trend: {
|
||||
direction: 'down',
|
||||
percentage: 5.3
|
||||
},
|
||||
costHistory: [
|
||||
{ date: '2024-01-16', totalCost: 2750.20, laborCost: 1150.00, materialCost: 1420.00, overheadCost: 180.20, energyCost: 90.00 },
|
||||
{ date: '2024-01-17', totalCost: 2780.80, laborCost: 1180.00, materialCost: 1430.00, overheadCost: 180.80, energyCost: 90.00 },
|
||||
{ date: '2024-01-18', totalCost: 2720.10, laborCost: 1120.00, materialCost: 1410.00, overheadCost: 190.10, energyCost: 100.00 },
|
||||
{ date: '2024-01-19', totalCost: 2810.60, laborCost: 1220.00, materialCost: 1440.00, overheadCost: 190.60, energyCost: 95.00 },
|
||||
{ date: '2024-01-20', totalCost: 2800.40, laborCost: 1210.00, materialCost: 1440.00, overheadCost: 180.40, energyCost: 90.00 },
|
||||
{ date: '2024-01-21', totalCost: 2790.30, laborCost: 1190.00, materialCost: 1430.00, overheadCost: 180.30, energyCost: 90.00 },
|
||||
{ date: '2024-01-22', totalCost: 2840.50, laborCost: 1200.00, materialCost: 1450.00, overheadCost: 190.50, energyCost: 95.25 }
|
||||
]
|
||||
};
|
||||
return mockData;
|
||||
}
|
||||
|
||||
// Default mock data
|
||||
return {
|
||||
totalCost: 2840.50,
|
||||
laborCost: 1200.00,
|
||||
materialCost: 1450.00,
|
||||
overheadCost: 190.50,
|
||||
energyCost: 95.25,
|
||||
costPerUnit: 14.20,
|
||||
budget: 3000.00,
|
||||
variance: -159.50,
|
||||
trend: {
|
||||
direction: 'down',
|
||||
percentage: 5.3
|
||||
},
|
||||
costHistory: [
|
||||
{ date: '2024-01-16', totalCost: 2750.20, laborCost: 1150.00, materialCost: 1420.00, overheadCost: 180.20, energyCost: 90.00 },
|
||||
{ date: '2024-01-17', totalCost: 2780.80, laborCost: 1180.00, materialCost: 1430.00, overheadCost: 180.80, energyCost: 90.00 },
|
||||
{ date: '2024-01-18', totalCost: 2720.10, laborCost: 1120.00, materialCost: 1410.00, overheadCost: 190.10, energyCost: 100.00 },
|
||||
{ date: '2024-01-19', totalCost: 2810.60, laborCost: 1220.00, materialCost: 1440.00, overheadCost: 190.60, energyCost: 95.00 },
|
||||
{ date: '2024-01-20', totalCost: 2800.40, laborCost: 1210.00, materialCost: 1440.00, overheadCost: 180.40, energyCost: 90.00 },
|
||||
{ date: '2024-01-21', totalCost: 2790.30, laborCost: 1190.00, materialCost: 1430.00, overheadCost: 180.30, energyCost: 90.00 },
|
||||
{ date: '2024-01-22', totalCost: 2840.50, laborCost: 1200.00, materialCost: 1450.00, overheadCost: 190.50, energyCost: 95.25 }
|
||||
]
|
||||
};
|
||||
}, [data, dashboardData]);
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('es-ES', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
minimumFractionDigits: 2
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const getVarianceColor = (variance: number) => {
|
||||
if (variance > 0) return 'text-red-600';
|
||||
if (variance < -50) return 'text-green-600';
|
||||
return 'text-yellow-600';
|
||||
};
|
||||
|
||||
const getBudgetStatus = () => {
|
||||
const percentage = (costData.totalCost / costData.budget) * 100;
|
||||
if (percentage > 100) return { color: 'error', label: t('production.cost.over_budget', 'Over Budget') };
|
||||
if (percentage > 90) return { color: 'warning', label: t('production.cost.near_budget', 'Near Budget') };
|
||||
return { color: 'success', label: t('production.cost.on_budget', 'On Budget') };
|
||||
};
|
||||
|
||||
const budgetStatus = getBudgetStatus();
|
||||
|
||||
const handleTimeRangeChange = (range: string) => {
|
||||
const newRange = range as 'day' | 'week' | 'month' | 'quarter' | 'year';
|
||||
setSelectedTimeRange(newRange);
|
||||
onTimeRangeChange?.(newRange);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||||
{t('production.cost.analytics.title', 'Cost Analytics')}
|
||||
</h3>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Select
|
||||
value={selectedTimeRange}
|
||||
onChange={handleTimeRangeChange}
|
||||
options={[
|
||||
{ value: 'day', label: t('common.time_range.day', 'Today') },
|
||||
{ value: 'week', label: t('common.time_range.week', 'This Week') },
|
||||
{ value: 'month', label: t('common.time_range.month', 'This Month') },
|
||||
{ value: 'quarter', label: t('common.time_range.quarter', 'This Quarter') },
|
||||
{ value: 'year', label: t('common.time_range.year', 'This Year') }
|
||||
]}
|
||||
/>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-20 bg-[var(--bg-secondary)] rounded"></div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="h-16 bg-[var(--bg-secondary)] rounded"></div>
|
||||
<div className="h-16 bg-[var(--bg-secondary)] rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||||
{t('production.cost.analytics.title', 'Cost Analytics')}
|
||||
</h3>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Select
|
||||
value={selectedTimeRange}
|
||||
onChange={handleTimeRangeChange}
|
||||
options={[
|
||||
{ value: 'day', label: t('common.time_range.day', 'Today') },
|
||||
{ value: 'week', label: t('common.time_range.week', 'This Week') },
|
||||
{ value: 'month', label: t('common.time_range.month', 'This Month') },
|
||||
{ value: 'quarter', label: t('common.time_range.quarter', 'This Quarter') },
|
||||
{ value: 'year', label: t('common.time_range.year', 'This Year') }
|
||||
]}
|
||||
/>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody className="text-center py-8">
|
||||
<AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-4" />
|
||||
<p className="text-[var(--text-secondary)]">
|
||||
{t('production.cost.error', 'Error loading cost data')}
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const costStats = [
|
||||
{
|
||||
title: t('production.cost.total_cost', 'Total Cost'),
|
||||
value: formatCurrency(costData.totalCost),
|
||||
icon: Euro,
|
||||
variant: budgetStatus.color as 'success' | 'warning' | 'error',
|
||||
trend: {
|
||||
value: costData.trend.percentage,
|
||||
direction: costData.trend.direction === 'up' ? 'up' as const : 'down' as const,
|
||||
label: t('production.cost.vs_last_period', 'vs last period')
|
||||
},
|
||||
subtitle: `${formatCurrency(Math.abs(costData.variance))} ${costData.variance > 0 ? t('common.over', 'over') : t('common.under', 'under')} ${t('common.budget', 'budget')}`
|
||||
},
|
||||
{
|
||||
title: t('production.cost.cost_per_unit', 'Cost per Unit'),
|
||||
value: formatCurrency(costData.costPerUnit),
|
||||
icon: Target,
|
||||
variant: 'info' as const,
|
||||
subtitle: t('production.cost.average', 'Average for selected period')
|
||||
},
|
||||
{
|
||||
title: t('production.cost.labor_cost', 'Labor Cost'),
|
||||
value: formatCurrency(costData.laborCost),
|
||||
icon: Clock,
|
||||
variant: 'default' as const,
|
||||
subtitle: `${((costData.laborCost / costData.totalCost) * 100).toFixed(1)}% of total`
|
||||
},
|
||||
{
|
||||
title: t('production.cost.material_cost', 'Material Cost'),
|
||||
value: formatCurrency(costData.materialCost),
|
||||
icon: Activity,
|
||||
variant: 'default' as const,
|
||||
subtitle: `${((costData.materialCost / costData.totalCost) * 100).toFixed(1)}% of total`
|
||||
}
|
||||
];
|
||||
|
||||
const costBreakdown = [
|
||||
{
|
||||
label: t('production.cost.labor', 'Labor'),
|
||||
amount: costData.laborCost,
|
||||
percentage: (costData.laborCost / costData.totalCost) * 100,
|
||||
icon: Clock,
|
||||
color: 'bg-blue-500'
|
||||
},
|
||||
{
|
||||
label: t('production.cost.materials', 'Materials'),
|
||||
amount: costData.materialCost,
|
||||
percentage: (costData.materialCost / costData.totalCost) * 100,
|
||||
icon: Activity,
|
||||
color: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
label: t('production.cost.overhead', 'Overhead'),
|
||||
amount: costData.overheadCost,
|
||||
percentage: (costData.overheadCost / costData.totalCost) * 100,
|
||||
icon: Euro,
|
||||
color: 'bg-orange-500'
|
||||
},
|
||||
{
|
||||
label: t('production.cost.energy', 'Energy'),
|
||||
amount: costData.energyCost,
|
||||
percentage: (costData.energyCost / costData.totalCost) * 100,
|
||||
icon: Zap,
|
||||
color: 'bg-yellow-500'
|
||||
}
|
||||
];
|
||||
|
||||
// Create a simple bar chart visualization for cost history
|
||||
const renderCostChart = () => {
|
||||
if (!costData.costHistory || costData.costHistory.length === 0) return null;
|
||||
|
||||
// Find the maximum value for scaling
|
||||
const maxValue = Math.max(...costData.costHistory.map(item => item.totalCost));
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[var(--text-secondary)]">{formatCurrency(0)}</span>
|
||||
<span className="text-[var(--text-secondary)]">{formatCurrency(maxValue)}</span>
|
||||
</div>
|
||||
<div className="flex items-end h-32 gap-1">
|
||||
{costData.costHistory.map((item, index) => {
|
||||
const height = (item.totalCost / maxValue) * 100;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex-1 flex flex-col items-center group relative"
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<div
|
||||
className="w-full bg-gradient-to-t from-[var(--color-primary)] to-[var(--color-primary)]/70 rounded-t hover:opacity-90 transition-all duration-200"
|
||||
style={{ height: `${height}%` }}
|
||||
></div>
|
||||
<div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-[var(--bg-tertiary)] px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
|
||||
{new Date(item.date).toLocaleDateString('es-ES')}<br/>{formatCurrency(item.totalCost)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||||
{t('production.cost.analytics.title', 'Cost Analytics')}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
{t('production.cost.analytics.subtitle', 'Detailed cost breakdown and trends')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Select
|
||||
value={selectedTimeRange}
|
||||
onChange={handleTimeRangeChange}
|
||||
options={[
|
||||
{ value: 'day', label: t('common.time_range.day', 'Today') },
|
||||
{ value: 'week', label: t('common.time_range.week', 'This Week') },
|
||||
{ value: 'month', label: t('common.time_range.month', 'This Month') },
|
||||
{ value: 'quarter', label: t('common.time_range.quarter', 'This Quarter') },
|
||||
{ value: 'year', label: t('common.time_range.year', 'This Year') }
|
||||
]}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onExport}
|
||||
disabled={!onExport}
|
||||
>
|
||||
<Download className="w-4 h-4 mr-1" />
|
||||
{t('common.export', 'Export')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-4 pt-4 border-t border-[var(--border-primary)]">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge variant={budgetStatus.color as 'success' | 'warning' | 'error' | 'default' | 'info'}>
|
||||
{budgetStatus.label}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
{t('production.cost.last_updated', 'Updated today')}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardBody className="space-y-8">
|
||||
{/* Key Metrics */}
|
||||
<StatsGrid
|
||||
stats={costStats}
|
||||
columns={2}
|
||||
gap="md"
|
||||
/>
|
||||
|
||||
{/* Cost Trend Chart */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[var(--text-primary)] mb-4 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
{t('production.cost.trend', 'Cost Trend')}
|
||||
</h4>
|
||||
{renderCostChart()}
|
||||
<div className="mt-2 text-xs text-[var(--text-tertiary)] text-center">
|
||||
{t('production.cost.trend_description', 'Total cost trend over time')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cost Breakdown */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[var(--text-primary)] mb-4 flex items-center">
|
||||
<Euro className="w-4 h-4 mr-2" />
|
||||
{t('production.cost.breakdown', 'Cost Breakdown')}
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{costBreakdown.map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div key={index} className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 rounded-full ${item.color}`}></div>
|
||||
<Icon className="w-4 h-4 text-[var(--text-tertiary)]" />
|
||||
<span className="text-sm text-[var(--text-primary)]">
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
{formatCurrency(item.amount)}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--text-tertiary)] w-10 text-right">
|
||||
{item.percentage.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Budget Progress */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
{t('production.cost.budget_usage', 'Budget Usage')}
|
||||
</span>
|
||||
<span className="text-sm text-[var(--text-secondary)]">
|
||||
{formatCurrency(costData.totalCost)} / {formatCurrency(costData.budget)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-[var(--bg-secondary)] rounded-full h-2.5">
|
||||
<div
|
||||
className={`h-2.5 rounded-full transition-all duration-300 ${costData.totalCost > costData.budget ? 'bg-red-500' : costData.totalCost > costData.budget * 0.9 ? 'bg-yellow-500' : 'bg-green-500'}`}
|
||||
style={{
|
||||
width: `${Math.min(100, (costData.totalCost / costData.budget) * 100)}%`
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-2">
|
||||
<span className={`text-xs font-medium ${getVarianceColor(costData.variance)}`}>
|
||||
{costData.variance > 0 ? '+' : ''}{formatCurrency(costData.variance)}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--text-tertiary)]">
|
||||
{((costData.totalCost / costData.budget) * 100).toFixed(1)}% {t('common.used', 'used')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-[var(--border-primary)]">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onViewDetails}
|
||||
className="flex-1"
|
||||
>
|
||||
{t('production.cost.view_details', 'View Detailed Report')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onOptimize}
|
||||
className="flex-1"
|
||||
>
|
||||
{t('production.cost.optimize', 'Optimize Costs')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionCostAnalytics;
|
||||
@@ -63,7 +63,7 @@ export const ReportsTable: React.FC<ReportsTableProps> = ({
|
||||
const [reportToShare, setReportToShare] = useState<AnalyticsReport | null>(null);
|
||||
|
||||
const filteredAndSortedReports = useMemo(() => {
|
||||
let filtered = reports.filter(report => {
|
||||
const filtered = reports.filter(report => {
|
||||
const matchesSearch = !searchTerm ||
|
||||
report.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
report.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
|
||||
@@ -4,6 +4,7 @@ export { default as ChartWidget } from './ChartWidget';
|
||||
export { default as ReportsTable } from './ReportsTable';
|
||||
export { default as FilterPanel } from './FilterPanel';
|
||||
export { default as ExportOptions } from './ExportOptions';
|
||||
export { default as ProductionCostAnalytics } from './ProductionCostAnalytics';
|
||||
|
||||
// Types
|
||||
export * from './types';
|
||||
@@ -25,11 +25,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
|
||||
...props
|
||||
}, ref) => {
|
||||
const baseClasses = [
|
||||
'inline-flex items-center justify-center font-semibold tracking-wide',
|
||||
'inline-flex items-center justify-center font-medium',
|
||||
'transition-all duration-200 ease-in-out',
|
||||
'focus:outline-none focus:ring-2 focus:ring-offset-2',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
'border rounded-xl shadow-sm',
|
||||
'border rounded-md shadow-sm',
|
||||
'hover:shadow-md active:shadow-sm'
|
||||
];
|
||||
|
||||
@@ -53,10 +53,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
|
||||
'active:bg-[var(--color-primary-dark)] active:border-[var(--color-primary-dark)]'
|
||||
],
|
||||
ghost: [
|
||||
'bg-transparent text-[var(--color-primary)] border-transparent',
|
||||
'hover:bg-[var(--color-primary)]/10 hover:text-[var(--color-primary-dark)]',
|
||||
'bg-transparent text-[var(--text-primary)] border-transparent',
|
||||
'hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]',
|
||||
'focus:ring-[var(--color-primary)]/20',
|
||||
'active:bg-[var(--color-primary)]/20'
|
||||
'active:bg-[var(--bg-secondary)]'
|
||||
],
|
||||
danger: [
|
||||
'bg-[var(--color-error)] text-[var(--text-inverse)] border-[var(--color-error)]',
|
||||
@@ -79,11 +79,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
xs: 'px-3 py-1.5 text-xs gap-1.5 min-h-7',
|
||||
sm: 'px-4 py-2 text-sm gap-2 min-h-9 sm:min-h-10',
|
||||
md: 'px-6 py-3 text-sm gap-2.5 min-h-11 sm:min-h-12',
|
||||
lg: 'px-8 py-3.5 text-base gap-3 min-h-13 sm:min-h-14',
|
||||
xl: 'px-10 py-4 text-lg gap-3.5 min-h-15 sm:min-h-16'
|
||||
xs: 'px-2 py-1 text-xs gap-1 min-h-[1.75rem]',
|
||||
sm: 'px-3 py-1.5 text-sm gap-1.5 min-h-[2.25rem]',
|
||||
md: 'px-4 py-2 text-sm gap-2 min-h-[2.75rem]',
|
||||
lg: 'px-5 py-2.5 text-base gap-2.5 min-h-[3.25rem]',
|
||||
xl: 'px-6 py-3 text-lg gap-3 min-h-[3.75rem]'
|
||||
};
|
||||
|
||||
const loadingSpinner = (
|
||||
@@ -129,13 +129,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
|
||||
>
|
||||
{isLoading && loadingSpinner}
|
||||
{!isLoading && leftIcon && (
|
||||
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{leftIcon}</span>
|
||||
<span className="flex-shrink-0 w-4 h-4 flex items-center justify-center">{leftIcon}</span>
|
||||
)}
|
||||
<span className="relative">
|
||||
{isLoading && loadingText ? loadingText : children}
|
||||
</span>
|
||||
{!isLoading && rightIcon && (
|
||||
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{rightIcon}</span>
|
||||
<span className="flex-shrink-0 w-4 h-4 flex items-center justify-center">{rightIcon}</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -232,7 +232,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(({
|
||||
const handleDateSelect = (date: Date) => {
|
||||
if (isDateDisabled(date)) return;
|
||||
|
||||
let newDate = new Date(date);
|
||||
const newDate = new Date(date);
|
||||
|
||||
// Preserve time if time is shown and a previous value exists
|
||||
if (showTime && currentValue) {
|
||||
|
||||
@@ -531,7 +531,7 @@ const TablePagination: React.FC<TablePaginationProps> = ({
|
||||
const buttons = [];
|
||||
const maxVisible = 7;
|
||||
let startPage = Math.max(1, current - Math.floor(maxVisible / 2));
|
||||
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
|
||||
const endPage = Math.min(totalPages, startPage + maxVisible - 1);
|
||||
|
||||
if (endPage - startPage + 1 < maxVisible) {
|
||||
startPage = Math.max(1, endPage - maxVisible + 1);
|
||||
|
||||
Reference in New Issue
Block a user