Add new API in the frontend
This commit is contained in:
Urtzi Alfaro
655
frontend/src/api/hooks/pos.ts
Normal file
655
frontend/src/api/hooks/pos.ts
Normal file
@@ -0,0 +1,655 @@
|
||||
/**
|
||||
* POS React Query hooks
|
||||
* Provides data fetching and mutation hooks for POS operations
|
||||
*/
|
||||
|
||||
import { useMutation, useQuery, useQueryClient, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
|
||||
import { posService } from '../services/pos';
|
||||
import type {
|
||||
POSConfiguration,
|
||||
POSTransaction,
|
||||
POSSyncLog,
|
||||
POSWebhookLog,
|
||||
GetPOSConfigurationsRequest,
|
||||
GetPOSConfigurationsResponse,
|
||||
CreatePOSConfigurationRequest,
|
||||
CreatePOSConfigurationResponse,
|
||||
GetPOSConfigurationRequest,
|
||||
GetPOSConfigurationResponse,
|
||||
UpdatePOSConfigurationRequest,
|
||||
UpdatePOSConfigurationResponse,
|
||||
DeletePOSConfigurationRequest,
|
||||
DeletePOSConfigurationResponse,
|
||||
TestPOSConnectionRequest,
|
||||
TestPOSConnectionResponse,
|
||||
GetSupportedPOSSystemsResponse,
|
||||
POSSystem,
|
||||
} from '../types/pos';
|
||||
import { ApiError } from '../client';
|
||||
|
||||
// ============================================================================
|
||||
// QUERY KEYS
|
||||
// ============================================================================
|
||||
|
||||
export const posKeys = {
|
||||
all: ['pos'] as const,
|
||||
|
||||
// Configurations
|
||||
configurations: () => [...posKeys.all, 'configurations'] as const,
|
||||
configurationsList: (tenantId: string, filters?: { pos_system?: POSSystem; is_active?: boolean }) =>
|
||||
[...posKeys.configurations(), 'list', tenantId, filters] as const,
|
||||
configuration: (tenantId: string, configId: string) =>
|
||||
[...posKeys.configurations(), 'detail', tenantId, configId] as const,
|
||||
|
||||
// Supported Systems
|
||||
supportedSystems: () => [...posKeys.all, 'supported-systems'] as const,
|
||||
|
||||
// Transactions
|
||||
transactions: () => [...posKeys.all, 'transactions'] as const,
|
||||
transactionsList: (tenantId: string, filters?: any) =>
|
||||
[...posKeys.transactions(), 'list', tenantId, filters] as const,
|
||||
transaction: (tenantId: string, transactionId: string) =>
|
||||
[...posKeys.transactions(), 'detail', tenantId, transactionId] as const,
|
||||
|
||||
// Sync Logs
|
||||
syncLogs: () => [...posKeys.all, 'sync-logs'] as const,
|
||||
syncLogsList: (tenantId: string, filters?: any) =>
|
||||
[...posKeys.syncLogs(), 'list', tenantId, filters] as const,
|
||||
|
||||
// Webhook Logs
|
||||
webhookLogs: () => [...posKeys.all, 'webhook-logs'] as const,
|
||||
webhookLogsList: (tenantId: string, filters?: any) =>
|
||||
[...posKeys.webhookLogs(), 'list', tenantId, filters] as const,
|
||||
} as const;
|
||||
|
||||
// ============================================================================
|
||||
// CONFIGURATION QUERIES
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get POS configurations for a tenant
|
||||
*/
|
||||
export const usePOSConfigurations = (
|
||||
params: GetPOSConfigurationsRequest,
|
||||
options?: Omit<UseQueryOptions<GetPOSConfigurationsResponse, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery<GetPOSConfigurationsResponse, ApiError>({
|
||||
queryKey: posKeys.configurationsList(params.tenant_id, {
|
||||
pos_system: params.pos_system,
|
||||
is_active: params.is_active
|
||||
}),
|
||||
queryFn: () => posService.getPOSConfigurations(params),
|
||||
enabled: !!params.tenant_id,
|
||||
staleTime: 2 * 60 * 1000, // 2 minutes
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get a specific POS configuration
|
||||
*/
|
||||
export const usePOSConfiguration = (
|
||||
params: GetPOSConfigurationRequest,
|
||||
options?: Omit<UseQueryOptions<GetPOSConfigurationResponse, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery<GetPOSConfigurationResponse, ApiError>({
|
||||
queryKey: posKeys.configuration(params.tenant_id, params.config_id),
|
||||
queryFn: () => posService.getPOSConfiguration(params),
|
||||
enabled: !!params.tenant_id && !!params.config_id,
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get supported POS systems
|
||||
*/
|
||||
export const useSupportedPOSSystems = (
|
||||
options?: Omit<UseQueryOptions<GetSupportedPOSSystemsResponse, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery<GetSupportedPOSSystemsResponse, ApiError>({
|
||||
queryKey: posKeys.supportedSystems(),
|
||||
queryFn: () => posService.getSupportedPOSSystems(),
|
||||
staleTime: 30 * 60 * 1000, // 30 minutes - this data rarely changes
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// CONFIGURATION MUTATIONS
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Create a new POS configuration
|
||||
*/
|
||||
export const useCreatePOSConfiguration = (
|
||||
options?: UseMutationOptions<CreatePOSConfigurationResponse, ApiError, CreatePOSConfigurationRequest>
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation<CreatePOSConfigurationResponse, ApiError, CreatePOSConfigurationRequest>({
|
||||
mutationFn: (params) => posService.createPOSConfiguration(params),
|
||||
onSuccess: (data, variables) => {
|
||||
// Invalidate and refetch configurations list
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.configurationsList(variables.tenant_id)
|
||||
});
|
||||
|
||||
// If we have the created configuration, add it to the cache
|
||||
if (data.configuration) {
|
||||
queryClient.setQueryData(
|
||||
posKeys.configuration(variables.tenant_id, data.id),
|
||||
{ configuration: data.configuration }
|
||||
);
|
||||
}
|
||||
},
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Update a POS configuration
|
||||
*/
|
||||
export const useUpdatePOSConfiguration = (
|
||||
options?: UseMutationOptions<UpdatePOSConfigurationResponse, ApiError, UpdatePOSConfigurationRequest>
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation<UpdatePOSConfigurationResponse, ApiError, UpdatePOSConfigurationRequest>({
|
||||
mutationFn: (params) => posService.updatePOSConfiguration(params),
|
||||
onSuccess: (data, variables) => {
|
||||
// Invalidate and refetch configurations list
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.configurationsList(variables.tenant_id)
|
||||
});
|
||||
|
||||
// Update the specific configuration cache if we have the updated data
|
||||
if (data.configuration) {
|
||||
queryClient.setQueryData(
|
||||
posKeys.configuration(variables.tenant_id, variables.config_id),
|
||||
{ configuration: data.configuration }
|
||||
);
|
||||
} else {
|
||||
// Invalidate the specific configuration to refetch
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.configuration(variables.tenant_id, variables.config_id)
|
||||
});
|
||||
}
|
||||
},
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Delete a POS configuration
|
||||
*/
|
||||
export const useDeletePOSConfiguration = (
|
||||
options?: UseMutationOptions<DeletePOSConfigurationResponse, ApiError, DeletePOSConfigurationRequest>
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation<DeletePOSConfigurationResponse, ApiError, DeletePOSConfigurationRequest>({
|
||||
mutationFn: (params) => posService.deletePOSConfiguration(params),
|
||||
onSuccess: (data, variables) => {
|
||||
// Remove from configurations list cache
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.configurationsList(variables.tenant_id)
|
||||
});
|
||||
|
||||
// Remove the specific configuration from cache
|
||||
queryClient.removeQueries({
|
||||
queryKey: posKeys.configuration(variables.tenant_id, variables.config_id)
|
||||
});
|
||||
},
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Test POS connection
|
||||
*/
|
||||
export const useTestPOSConnection = (
|
||||
options?: UseMutationOptions<TestPOSConnectionResponse, ApiError, TestPOSConnectionRequest>
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation<TestPOSConnectionResponse, ApiError, TestPOSConnectionRequest>({
|
||||
mutationFn: (params) => posService.testPOSConnection(params),
|
||||
onSuccess: (data, variables) => {
|
||||
// Invalidate the configurations list to refresh connection status
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.configurationsList(variables.tenant_id)
|
||||
});
|
||||
|
||||
// Invalidate the specific configuration to refresh connection status
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.configuration(variables.tenant_id, variables.config_id)
|
||||
});
|
||||
},
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// TRANSACTION QUERIES
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get POS transactions for a tenant (Updated to match backend)
|
||||
*/
|
||||
export const usePOSTransactions = (
|
||||
params: {
|
||||
tenant_id: string;
|
||||
pos_system?: string;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
status?: string;
|
||||
is_synced?: boolean;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
},
|
||||
options?: Omit<UseQueryOptions<{
|
||||
transactions: POSTransaction[];
|
||||
total: number;
|
||||
has_more: boolean;
|
||||
summary: {
|
||||
total_amount: number;
|
||||
transaction_count: number;
|
||||
sync_status: {
|
||||
synced: number;
|
||||
pending: number;
|
||||
failed: number;
|
||||
};
|
||||
};
|
||||
}, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: posKeys.transactionsList(params.tenant_id, params),
|
||||
queryFn: () => posService.getPOSTransactions(params),
|
||||
enabled: !!params.tenant_id,
|
||||
staleTime: 30 * 1000, // 30 seconds - transaction data should be fresh
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get a specific POS transaction
|
||||
*/
|
||||
export const usePOSTransaction = (
|
||||
params: {
|
||||
tenant_id: string;
|
||||
transaction_id: string;
|
||||
},
|
||||
options?: Omit<UseQueryOptions<{
|
||||
transaction: POSTransaction;
|
||||
}, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: posKeys.transaction(params.tenant_id, params.transaction_id),
|
||||
queryFn: () => posService.getPOSTransaction(params),
|
||||
enabled: !!params.tenant_id && !!params.transaction_id,
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// SYNC OPERATIONS
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Trigger manual sync
|
||||
*/
|
||||
export const useTriggerManualSync = (
|
||||
options?: UseMutationOptions<
|
||||
{
|
||||
sync_id: string;
|
||||
message: string;
|
||||
status: string;
|
||||
sync_type: string;
|
||||
data_types: string[];
|
||||
estimated_duration: string;
|
||||
},
|
||||
ApiError,
|
||||
{
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
sync_type?: 'full' | 'incremental';
|
||||
data_types?: string[];
|
||||
from_date?: string;
|
||||
to_date?: string;
|
||||
}
|
||||
>
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (params) => posService.triggerManualSync(params),
|
||||
onSuccess: (data, variables) => {
|
||||
// Invalidate sync logs to show the new sync
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.syncLogsList(variables.tenant_id)
|
||||
});
|
||||
|
||||
// Invalidate configurations to update last sync info
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.configurationsList(variables.tenant_id)
|
||||
});
|
||||
},
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get sync status for a configuration
|
||||
*/
|
||||
export const usePOSSyncStatus = (
|
||||
params: {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
limit?: number;
|
||||
},
|
||||
options?: Omit<UseQueryOptions<{
|
||||
current_sync: any;
|
||||
last_successful_sync: any;
|
||||
recent_syncs: any[];
|
||||
sync_health: {
|
||||
status: string;
|
||||
success_rate: number;
|
||||
average_duration_minutes: number;
|
||||
last_error?: string;
|
||||
};
|
||||
}, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: [...posKeys.configurations(), 'sync-status', params.tenant_id, params.config_id],
|
||||
queryFn: () => posService.getSyncStatus(params),
|
||||
enabled: !!params.tenant_id && !!params.config_id,
|
||||
staleTime: 30 * 1000, // 30 seconds - sync status should be fresh
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get detailed sync logs for a configuration
|
||||
*/
|
||||
export const useDetailedSyncLogs = (
|
||||
params: {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
status?: string;
|
||||
sync_type?: string;
|
||||
data_type?: string;
|
||||
},
|
||||
options?: Omit<UseQueryOptions<{
|
||||
logs: any[];
|
||||
total: number;
|
||||
has_more: boolean;
|
||||
}, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: [...posKeys.syncLogs(), 'detailed', params.tenant_id, params.config_id, params],
|
||||
queryFn: () => posService.getDetailedSyncLogs(params),
|
||||
enabled: !!params.tenant_id && !!params.config_id,
|
||||
staleTime: 30 * 1000, // 30 seconds
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Sync single transaction
|
||||
*/
|
||||
export const useSyncSingleTransaction = (
|
||||
options?: UseMutationOptions<
|
||||
{ message: string; transaction_id: string; sync_status: string; sales_record_id: string },
|
||||
ApiError,
|
||||
{ tenant_id: string; transaction_id: string; force?: boolean }
|
||||
>
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (params) => posService.syncSingleTransaction(params),
|
||||
onSuccess: (data, variables) => {
|
||||
// Invalidate transactions list to update sync status
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.transactionsList(variables.tenant_id)
|
||||
});
|
||||
|
||||
// Invalidate specific transaction
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.transaction(variables.tenant_id, variables.transaction_id)
|
||||
});
|
||||
},
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get sync performance analytics
|
||||
*/
|
||||
export const usePOSSyncAnalytics = (
|
||||
params: {
|
||||
tenant_id: string;
|
||||
days?: number;
|
||||
},
|
||||
options?: Omit<UseQueryOptions<{
|
||||
period_days: number;
|
||||
total_syncs: number;
|
||||
successful_syncs: number;
|
||||
failed_syncs: number;
|
||||
success_rate: number;
|
||||
average_duration_minutes: number;
|
||||
total_transactions_synced: number;
|
||||
total_revenue_synced: number;
|
||||
sync_frequency: {
|
||||
daily_average: number;
|
||||
peak_day?: string;
|
||||
peak_count: number;
|
||||
};
|
||||
error_analysis: {
|
||||
common_errors: any[];
|
||||
error_trends: any[];
|
||||
};
|
||||
}, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: [...posKeys.all, 'analytics', params.tenant_id, params.days],
|
||||
queryFn: () => posService.getSyncAnalytics(params),
|
||||
enabled: !!params.tenant_id,
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes - analytics don't change frequently
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Resync failed transactions
|
||||
*/
|
||||
export const useResyncFailedTransactions = (
|
||||
options?: UseMutationOptions<
|
||||
{ message: string; job_id: string; scope: string; estimated_transactions: number },
|
||||
ApiError,
|
||||
{ tenant_id: string; days_back?: number }
|
||||
>
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (params) => posService.resyncFailedTransactions(params),
|
||||
onSuccess: (data, variables) => {
|
||||
// Invalidate sync logs and analytics
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: posKeys.syncLogsList(variables.tenant_id)
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [...posKeys.all, 'analytics', variables.tenant_id]
|
||||
});
|
||||
},
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get sync logs
|
||||
*/
|
||||
export const usePOSSyncLogs = (
|
||||
params: {
|
||||
tenant_id: string;
|
||||
config_id?: string;
|
||||
status?: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
},
|
||||
options?: Omit<UseQueryOptions<{
|
||||
sync_logs: POSSyncLog[];
|
||||
total: number;
|
||||
has_more: boolean;
|
||||
}, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: posKeys.syncLogsList(params.tenant_id, params),
|
||||
queryFn: () => posService.getSyncLogs(params),
|
||||
enabled: !!params.tenant_id,
|
||||
staleTime: 30 * 1000, // 30 seconds
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// WEBHOOK LOGS
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get webhook logs
|
||||
*/
|
||||
export const usePOSWebhookLogs = (
|
||||
params: {
|
||||
tenant_id: string;
|
||||
pos_system?: POSSystem;
|
||||
status?: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
},
|
||||
options?: Omit<UseQueryOptions<{
|
||||
webhook_logs: POSWebhookLog[];
|
||||
total: number;
|
||||
has_more: boolean;
|
||||
}, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: posKeys.webhookLogsList(params.tenant_id, params),
|
||||
queryFn: () => posService.getWebhookLogs(params),
|
||||
enabled: !!params.tenant_id,
|
||||
staleTime: 30 * 1000, // 30 seconds
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get webhook status for a POS system
|
||||
*/
|
||||
export const useWebhookStatus = (
|
||||
pos_system: POSSystem,
|
||||
options?: Omit<UseQueryOptions<{
|
||||
pos_system: string;
|
||||
status: string;
|
||||
endpoint: string;
|
||||
supported_events: {
|
||||
events: string[];
|
||||
format: string;
|
||||
authentication: string;
|
||||
};
|
||||
last_received?: string;
|
||||
total_received: number;
|
||||
}, ApiError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: [...posKeys.webhookLogs(), 'status', pos_system],
|
||||
queryFn: () => posService.getWebhookStatus(pos_system),
|
||||
enabled: !!pos_system,
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes - webhook status doesn't change often
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// UTILITY HOOKS
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Hook to get POS service utility functions
|
||||
*/
|
||||
export const usePOSUtils = () => {
|
||||
return {
|
||||
formatPrice: posService.formatPrice,
|
||||
getPOSSystemDisplayName: posService.getPOSSystemDisplayName,
|
||||
getConnectionStatusColor: posService.getConnectionStatusColor,
|
||||
getSyncStatusColor: posService.getSyncStatusColor,
|
||||
formatSyncInterval: posService.formatSyncInterval,
|
||||
validateCredentials: posService.validateCredentials,
|
||||
};
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// COMPOSITE HOOKS (Convenience)
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Hook that combines configurations and supported systems for the configuration UI
|
||||
*/
|
||||
export const usePOSConfigurationData = (tenantId: string) => {
|
||||
const configurationsQuery = usePOSConfigurations(
|
||||
{ tenant_id: tenantId },
|
||||
{ enabled: !!tenantId }
|
||||
);
|
||||
|
||||
const supportedSystemsQuery = useSupportedPOSSystems();
|
||||
|
||||
return {
|
||||
configurations: configurationsQuery.data?.configurations || [],
|
||||
supportedSystems: supportedSystemsQuery.data?.systems || [],
|
||||
isLoading: configurationsQuery.isLoading || supportedSystemsQuery.isLoading,
|
||||
error: configurationsQuery.error || supportedSystemsQuery.error,
|
||||
refetch: () => {
|
||||
configurationsQuery.refetch();
|
||||
supportedSystemsQuery.refetch();
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Hook for POS configuration management with all CRUD operations
|
||||
*/
|
||||
export const usePOSConfigurationManager = (tenantId: string) => {
|
||||
const utils = usePOSUtils();
|
||||
|
||||
const createMutation = useCreatePOSConfiguration();
|
||||
const updateMutation = useUpdatePOSConfiguration();
|
||||
const deleteMutation = useDeletePOSConfiguration();
|
||||
const testConnectionMutation = useTestPOSConnection();
|
||||
|
||||
return {
|
||||
// Utility functions
|
||||
...utils,
|
||||
|
||||
// Mutations
|
||||
createConfiguration: createMutation.mutateAsync,
|
||||
updateConfiguration: updateMutation.mutateAsync,
|
||||
deleteConfiguration: deleteMutation.mutateAsync,
|
||||
testConnection: testConnectionMutation.mutateAsync,
|
||||
|
||||
// Mutation states
|
||||
isCreating: createMutation.isPending,
|
||||
isUpdating: updateMutation.isPending,
|
||||
isDeleting: deleteMutation.isPending,
|
||||
isTesting: testConnectionMutation.isPending,
|
||||
|
||||
// Errors
|
||||
createError: createMutation.error,
|
||||
updateError: updateMutation.error,
|
||||
deleteError: deleteMutation.error,
|
||||
testError: testConnectionMutation.error,
|
||||
};
|
||||
};
|
||||
@@ -27,6 +27,7 @@ export { suppliersService } from './services/suppliers';
|
||||
export { OrdersService } from './services/orders';
|
||||
export { forecastingService } from './services/forecasting';
|
||||
export { productionService } from './services/production';
|
||||
export { posService } from './services/pos';
|
||||
|
||||
// Types - Auth
|
||||
export type {
|
||||
@@ -344,6 +345,33 @@ export {
|
||||
ProductionPriorityEnum,
|
||||
} from './types/production';
|
||||
|
||||
// Types - POS
|
||||
export type {
|
||||
POSConfiguration,
|
||||
POSTransaction,
|
||||
POSTransactionItem,
|
||||
POSWebhookLog,
|
||||
POSSyncLog,
|
||||
POSSystemInfo,
|
||||
POSProviderConfig,
|
||||
POSCredentialsField,
|
||||
GetPOSConfigurationsRequest,
|
||||
GetPOSConfigurationsResponse,
|
||||
CreatePOSConfigurationRequest,
|
||||
CreatePOSConfigurationResponse,
|
||||
UpdatePOSConfigurationRequest,
|
||||
UpdatePOSConfigurationResponse,
|
||||
TestPOSConnectionRequest,
|
||||
TestPOSConnectionResponse,
|
||||
POSSyncSettings,
|
||||
SyncHealth,
|
||||
SyncAnalytics,
|
||||
TransactionSummary,
|
||||
WebhookStatus,
|
||||
POSSystem,
|
||||
POSEnvironment,
|
||||
} from './types/pos';
|
||||
|
||||
// Hooks - Auth
|
||||
export {
|
||||
useAuthProfile,
|
||||
@@ -632,6 +660,32 @@ export {
|
||||
productionKeys,
|
||||
} from './hooks/production';
|
||||
|
||||
// Hooks - POS
|
||||
export {
|
||||
usePOSConfigurations,
|
||||
usePOSConfiguration,
|
||||
useSupportedPOSSystems,
|
||||
useCreatePOSConfiguration,
|
||||
useUpdatePOSConfiguration,
|
||||
useDeletePOSConfiguration,
|
||||
useTestPOSConnection,
|
||||
usePOSTransactions,
|
||||
usePOSTransaction,
|
||||
useTriggerManualSync,
|
||||
usePOSSyncStatus,
|
||||
useDetailedSyncLogs,
|
||||
useSyncSingleTransaction,
|
||||
usePOSSyncAnalytics,
|
||||
useResyncFailedTransactions,
|
||||
usePOSSyncLogs,
|
||||
usePOSWebhookLogs,
|
||||
useWebhookStatus,
|
||||
usePOSUtils,
|
||||
usePOSConfigurationData,
|
||||
usePOSConfigurationManager,
|
||||
posKeys,
|
||||
} from './hooks/pos';
|
||||
|
||||
// Query Key Factories (for advanced usage)
|
||||
export {
|
||||
authKeys,
|
||||
@@ -650,4 +704,5 @@ export {
|
||||
dataImportKeys,
|
||||
forecastingKeys,
|
||||
productionKeys,
|
||||
posKeys,
|
||||
};
|
||||
@@ -62,11 +62,11 @@ export class AuthService {
|
||||
}
|
||||
|
||||
async getProfile(): Promise<UserResponse> {
|
||||
return apiClient.get<UserResponse>(`${this.baseUrl}/profile`);
|
||||
return apiClient.get<UserResponse>('/users/me');
|
||||
}
|
||||
|
||||
async updateProfile(updateData: UserUpdate): Promise<UserResponse> {
|
||||
return apiClient.put<UserResponse>(`${this.baseUrl}/profile`, updateData);
|
||||
return apiClient.put<UserResponse>('/users/me', updateData);
|
||||
}
|
||||
|
||||
async verifyEmail(
|
||||
|
||||
557
frontend/src/api/services/pos.ts
Normal file
557
frontend/src/api/services/pos.ts
Normal file
@@ -0,0 +1,557 @@
|
||||
/**
|
||||
* POS Service
|
||||
* Handles all POS configuration and management API calls
|
||||
* Based on services/pos/app/api/pos_config.py backend implementation
|
||||
*/
|
||||
|
||||
import { apiClient } from '../client';
|
||||
import type {
|
||||
POSConfiguration,
|
||||
POSTransaction,
|
||||
POSWebhookLog,
|
||||
POSSyncLog,
|
||||
POSSystemInfo,
|
||||
GetPOSConfigurationsRequest,
|
||||
GetPOSConfigurationsResponse,
|
||||
CreatePOSConfigurationRequest,
|
||||
CreatePOSConfigurationResponse,
|
||||
GetPOSConfigurationRequest,
|
||||
GetPOSConfigurationResponse,
|
||||
UpdatePOSConfigurationRequest,
|
||||
UpdatePOSConfigurationResponse,
|
||||
DeletePOSConfigurationRequest,
|
||||
DeletePOSConfigurationResponse,
|
||||
TestPOSConnectionRequest,
|
||||
TestPOSConnectionResponse,
|
||||
GetSupportedPOSSystemsResponse,
|
||||
POSSystem,
|
||||
} from '../types/pos';
|
||||
|
||||
export class POSService {
|
||||
private readonly basePath = '/pos';
|
||||
|
||||
// ============================================================================
|
||||
// POS CONFIGURATIONS
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get POS configurations for a tenant
|
||||
*/
|
||||
async getPOSConfigurations(params: GetPOSConfigurationsRequest): Promise<GetPOSConfigurationsResponse> {
|
||||
const { tenant_id, pos_system, is_active } = params;
|
||||
|
||||
const queryParams = new URLSearchParams();
|
||||
if (pos_system) queryParams.append('pos_system', pos_system);
|
||||
if (is_active !== undefined) queryParams.append('is_active', is_active.toString());
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.get<GetPOSConfigurationsResponse>(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new POS configuration
|
||||
*/
|
||||
async createPOSConfiguration(params: CreatePOSConfigurationRequest): Promise<CreatePOSConfigurationResponse> {
|
||||
const { tenant_id, ...configData } = params;
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations`;
|
||||
|
||||
return apiClient.post<CreatePOSConfigurationResponse>(url, configData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a specific POS configuration
|
||||
*/
|
||||
async getPOSConfiguration(params: GetPOSConfigurationRequest): Promise<GetPOSConfigurationResponse> {
|
||||
const { tenant_id, config_id } = params;
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations/${config_id}`;
|
||||
|
||||
return apiClient.get<GetPOSConfigurationResponse>(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a POS configuration
|
||||
*/
|
||||
async updatePOSConfiguration(params: UpdatePOSConfigurationRequest): Promise<UpdatePOSConfigurationResponse> {
|
||||
const { tenant_id, config_id, ...updateData } = params;
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations/${config_id}`;
|
||||
|
||||
return apiClient.put<UpdatePOSConfigurationResponse>(url, updateData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a POS configuration
|
||||
*/
|
||||
async deletePOSConfiguration(params: DeletePOSConfigurationRequest): Promise<DeletePOSConfigurationResponse> {
|
||||
const { tenant_id, config_id } = params;
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations/${config_id}`;
|
||||
|
||||
return apiClient.delete<DeletePOSConfigurationResponse>(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Test connection to POS system
|
||||
*/
|
||||
async testPOSConnection(params: TestPOSConnectionRequest): Promise<TestPOSConnectionResponse> {
|
||||
const { tenant_id, config_id } = params;
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations/${config_id}/test-connection`;
|
||||
|
||||
return apiClient.post<TestPOSConnectionResponse>(url);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// SUPPORTED SYSTEMS
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get list of supported POS systems
|
||||
*/
|
||||
async getSupportedPOSSystems(): Promise<GetSupportedPOSSystemsResponse> {
|
||||
const url = `${this.basePath}/supported-systems`;
|
||||
return apiClient.get<GetSupportedPOSSystemsResponse>(url);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// TRANSACTIONS (Future Implementation)
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get POS transactions for a tenant (Updated with backend structure)
|
||||
*/
|
||||
async getPOSTransactions(params: {
|
||||
tenant_id: string;
|
||||
pos_system?: string;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
status?: string;
|
||||
is_synced?: boolean;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
}): Promise<{
|
||||
transactions: POSTransaction[];
|
||||
total: number;
|
||||
has_more: boolean;
|
||||
summary: {
|
||||
total_amount: number;
|
||||
transaction_count: number;
|
||||
sync_status: {
|
||||
synced: number;
|
||||
pending: number;
|
||||
failed: number;
|
||||
};
|
||||
};
|
||||
}> {
|
||||
const { tenant_id, ...queryParams } = params;
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
Object.entries(queryParams).forEach(([key, value]) => {
|
||||
if (value !== undefined) {
|
||||
searchParams.append(key, value.toString());
|
||||
}
|
||||
});
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/transactions${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.get(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync a single transaction to sales service
|
||||
*/
|
||||
async syncSingleTransaction(params: {
|
||||
tenant_id: string;
|
||||
transaction_id: string;
|
||||
force?: boolean;
|
||||
}): Promise<{
|
||||
message: string;
|
||||
transaction_id: string;
|
||||
sync_status: string;
|
||||
sales_record_id: string;
|
||||
}> {
|
||||
const { tenant_id, transaction_id, force } = params;
|
||||
const queryParams = new URLSearchParams();
|
||||
if (force) queryParams.append('force', force.toString());
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/transactions/${transaction_id}/sync${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.post(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get sync performance analytics
|
||||
*/
|
||||
async getSyncAnalytics(params: {
|
||||
tenant_id: string;
|
||||
days?: number;
|
||||
}): Promise<{
|
||||
period_days: number;
|
||||
total_syncs: number;
|
||||
successful_syncs: number;
|
||||
failed_syncs: number;
|
||||
success_rate: number;
|
||||
average_duration_minutes: number;
|
||||
total_transactions_synced: number;
|
||||
total_revenue_synced: number;
|
||||
sync_frequency: {
|
||||
daily_average: number;
|
||||
peak_day?: string;
|
||||
peak_count: number;
|
||||
};
|
||||
error_analysis: {
|
||||
common_errors: any[];
|
||||
error_trends: any[];
|
||||
};
|
||||
}> {
|
||||
const { tenant_id, days } = params;
|
||||
const queryParams = new URLSearchParams();
|
||||
if (days) queryParams.append('days', days.toString());
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/analytics/sync-performance${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.get(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resync failed transactions
|
||||
*/
|
||||
async resyncFailedTransactions(params: {
|
||||
tenant_id: string;
|
||||
days_back?: number;
|
||||
}): Promise<{
|
||||
message: string;
|
||||
job_id: string;
|
||||
scope: string;
|
||||
estimated_transactions: number;
|
||||
}> {
|
||||
const { tenant_id, days_back } = params;
|
||||
const queryParams = new URLSearchParams();
|
||||
if (days_back) queryParams.append('days_back', days_back.toString());
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/data/resync${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.post(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a specific POS transaction
|
||||
*/
|
||||
async getPOSTransaction(params: {
|
||||
tenant_id: string;
|
||||
transaction_id: string;
|
||||
}): Promise<{
|
||||
transaction: POSTransaction;
|
||||
}> {
|
||||
const { tenant_id, transaction_id } = params;
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/transactions/${transaction_id}`;
|
||||
|
||||
return apiClient.get(url);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// SYNC OPERATIONS (Future Implementation)
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Trigger manual sync for a POS configuration
|
||||
*/
|
||||
async triggerManualSync(params: {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
sync_type?: 'full' | 'incremental';
|
||||
data_types?: string[];
|
||||
from_date?: string;
|
||||
to_date?: string;
|
||||
}): Promise<{
|
||||
sync_id: string;
|
||||
message: string;
|
||||
status: string;
|
||||
sync_type: string;
|
||||
data_types: string[];
|
||||
estimated_duration: string;
|
||||
}> {
|
||||
const { tenant_id, config_id, ...syncData } = params;
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations/${config_id}/sync`;
|
||||
|
||||
return apiClient.post(url, syncData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get sync status for a POS configuration
|
||||
*/
|
||||
async getSyncStatus(params: {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
limit?: number;
|
||||
}): Promise<{
|
||||
current_sync: any;
|
||||
last_successful_sync: any;
|
||||
recent_syncs: any[];
|
||||
sync_health: {
|
||||
status: string;
|
||||
success_rate: number;
|
||||
average_duration_minutes: number;
|
||||
last_error?: string;
|
||||
};
|
||||
}> {
|
||||
const { tenant_id, config_id, limit } = params;
|
||||
const queryParams = new URLSearchParams();
|
||||
if (limit) queryParams.append('limit', limit.toString());
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations/${config_id}/sync/status${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.get(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get detailed sync logs for a configuration
|
||||
*/
|
||||
async getDetailedSyncLogs(params: {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
status?: string;
|
||||
sync_type?: string;
|
||||
data_type?: string;
|
||||
}): Promise<{
|
||||
logs: any[];
|
||||
total: number;
|
||||
has_more: boolean;
|
||||
}> {
|
||||
const { tenant_id, config_id, ...queryParams } = params;
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
Object.entries(queryParams).forEach(([key, value]) => {
|
||||
if (value !== undefined) {
|
||||
searchParams.append(key, value.toString());
|
||||
}
|
||||
});
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/configurations/${config_id}/sync/logs${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.get(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get sync logs for a POS configuration
|
||||
*/
|
||||
async getSyncLogs(params: {
|
||||
tenant_id: string;
|
||||
config_id?: string;
|
||||
status?: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
}): Promise<{
|
||||
sync_logs: POSSyncLog[];
|
||||
total: number;
|
||||
has_more: boolean;
|
||||
}> {
|
||||
const { tenant_id, ...queryParams } = params;
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
Object.entries(queryParams).forEach(([key, value]) => {
|
||||
if (value !== undefined) {
|
||||
searchParams.append(key, value.toString());
|
||||
}
|
||||
});
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/sync-logs${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.get(url);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// WEBHOOKS
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get webhook logs
|
||||
*/
|
||||
async getWebhookLogs(params: {
|
||||
tenant_id: string;
|
||||
pos_system?: POSSystem;
|
||||
status?: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
}): Promise<{
|
||||
webhook_logs: POSWebhookLog[];
|
||||
total: number;
|
||||
has_more: boolean;
|
||||
}> {
|
||||
const { tenant_id, ...queryParams } = params;
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
Object.entries(queryParams).forEach(([key, value]) => {
|
||||
if (value !== undefined) {
|
||||
searchParams.append(key, value.toString());
|
||||
}
|
||||
});
|
||||
|
||||
const url = `/tenants/${tenant_id}${this.basePath}/webhook-logs${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
|
||||
|
||||
return apiClient.get(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get webhook endpoint status for a POS system
|
||||
*/
|
||||
async getWebhookStatus(pos_system: POSSystem): Promise<{
|
||||
pos_system: string;
|
||||
status: string;
|
||||
endpoint: string;
|
||||
supported_events: {
|
||||
events: string[];
|
||||
format: string;
|
||||
authentication: string;
|
||||
};
|
||||
last_received?: string;
|
||||
total_received: number;
|
||||
}> {
|
||||
const url = `/webhooks/${pos_system}/status`;
|
||||
return apiClient.get(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Process webhook (typically called by POS systems, but useful for testing)
|
||||
*/
|
||||
async processWebhook(params: {
|
||||
pos_system: POSSystem;
|
||||
payload: any;
|
||||
signature?: string;
|
||||
headers?: Record<string, string>;
|
||||
}): Promise<{
|
||||
status: string;
|
||||
message?: string;
|
||||
success?: boolean;
|
||||
received?: boolean;
|
||||
}> {
|
||||
const { pos_system, payload, signature, headers = {} } = params;
|
||||
|
||||
const requestHeaders: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...headers,
|
||||
};
|
||||
|
||||
if (signature) {
|
||||
requestHeaders['X-Webhook-Signature'] = signature;
|
||||
}
|
||||
|
||||
const url = `/webhooks/${pos_system}`;
|
||||
|
||||
// Note: This would typically be called by the POS system, not the frontend
|
||||
// This method is mainly for testing webhook processing
|
||||
return apiClient.post(url, payload);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// UTILITY METHODS
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Format price for display
|
||||
*/
|
||||
formatPrice(amount: number, currency: string = 'EUR'): string {
|
||||
return new Intl.NumberFormat('es-ES', {
|
||||
style: 'currency',
|
||||
currency: currency,
|
||||
}).format(amount);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get POS system display name
|
||||
*/
|
||||
getPOSSystemDisplayName(posSystem: POSSystem): string {
|
||||
const systemNames: Record<POSSystem, string> = {
|
||||
square: 'Square POS',
|
||||
toast: 'Toast POS',
|
||||
lightspeed: 'Lightspeed POS',
|
||||
};
|
||||
|
||||
return systemNames[posSystem] || posSystem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get connection status color for UI
|
||||
*/
|
||||
getConnectionStatusColor(isConnected: boolean, healthStatus?: string): 'green' | 'yellow' | 'red' {
|
||||
if (!isConnected) return 'red';
|
||||
if (healthStatus === 'healthy') return 'green';
|
||||
if (healthStatus === 'unhealthy') return 'red';
|
||||
return 'yellow'; // unknown status
|
||||
}
|
||||
|
||||
/**
|
||||
* Get sync status color for UI
|
||||
*/
|
||||
getSyncStatusColor(status?: string): 'green' | 'yellow' | 'red' {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return 'green';
|
||||
case 'failed':
|
||||
return 'red';
|
||||
case 'partial':
|
||||
return 'yellow';
|
||||
default:
|
||||
return 'yellow';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format sync interval for display
|
||||
*/
|
||||
formatSyncInterval(minutes: string): string {
|
||||
const mins = parseInt(minutes);
|
||||
if (mins < 60) {
|
||||
return `${mins} minutos`;
|
||||
} else if (mins < 1440) {
|
||||
const hours = Math.floor(mins / 60);
|
||||
return hours === 1 ? '1 hora' : `${hours} horas`;
|
||||
} else {
|
||||
const days = Math.floor(mins / 1440);
|
||||
return days === 1 ? '1 día' : `${days} días`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate POS credentials based on system type
|
||||
*/
|
||||
validateCredentials(posSystem: POSSystem, credentials: Record<string, any>): {
|
||||
isValid: boolean;
|
||||
errors: string[];
|
||||
} {
|
||||
const errors: string[] = [];
|
||||
|
||||
switch (posSystem) {
|
||||
case 'square':
|
||||
if (!credentials.application_id) errors.push('Application ID es requerido');
|
||||
if (!credentials.access_token) errors.push('Access Token es requerido');
|
||||
if (!credentials.location_id) errors.push('Location ID es requerido');
|
||||
break;
|
||||
|
||||
case 'toast':
|
||||
if (!credentials.api_key) errors.push('API Key es requerido');
|
||||
if (!credentials.restaurant_guid) errors.push('Restaurant GUID es requerido');
|
||||
if (!credentials.location_id) errors.push('Location ID es requerido');
|
||||
break;
|
||||
|
||||
case 'lightspeed':
|
||||
if (!credentials.api_key) errors.push('API Key es requerido');
|
||||
if (!credentials.api_secret) errors.push('API Secret es requerido');
|
||||
if (!credentials.account_id) errors.push('Account ID es requerido');
|
||||
if (!credentials.shop_id) errors.push('Shop ID es requerido');
|
||||
break;
|
||||
|
||||
default:
|
||||
errors.push('Sistema POS no soportado');
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: errors.length === 0,
|
||||
errors,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton instance
|
||||
export const posService = new POSService();
|
||||
export default posService;
|
||||
697
frontend/src/api/types/pos.ts
Normal file
697
frontend/src/api/types/pos.ts
Normal file
@@ -0,0 +1,697 @@
|
||||
/**
|
||||
* POS API Types
|
||||
* Based on services/pos/app/models/ backend implementation
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// CORE POS TYPES
|
||||
// ============================================================================
|
||||
|
||||
export type POSSystem = 'square' | 'toast' | 'lightspeed';
|
||||
|
||||
export type POSEnvironment = 'sandbox' | 'production';
|
||||
|
||||
export type POSTransactionType = 'sale' | 'refund' | 'void' | 'exchange';
|
||||
|
||||
export type POSTransactionStatus = 'completed' | 'pending' | 'failed' | 'refunded' | 'voided';
|
||||
|
||||
export type POSPaymentMethod = 'card' | 'cash' | 'digital_wallet' | 'other';
|
||||
|
||||
export type POSPaymentStatus = 'paid' | 'pending' | 'failed';
|
||||
|
||||
export type POSOrderType = 'dine_in' | 'takeout' | 'delivery' | 'pickup';
|
||||
|
||||
export type POSSyncStatus = 'success' | 'failed' | 'partial';
|
||||
|
||||
export type POSHealthStatus = 'healthy' | 'unhealthy' | 'unknown';
|
||||
|
||||
export type POSSyncType = 'full' | 'incremental' | 'manual' | 'webhook_triggered';
|
||||
|
||||
export type POSSyncDirection = 'inbound' | 'outbound' | 'bidirectional';
|
||||
|
||||
export type POSDataType = 'transactions' | 'products' | 'customers' | 'orders';
|
||||
|
||||
export type POSWebhookStatus = 'received' | 'processing' | 'processed' | 'failed';
|
||||
|
||||
// ============================================================================
|
||||
// POS CONFIGURATION
|
||||
// ============================================================================
|
||||
|
||||
export interface POSConfiguration {
|
||||
// Primary identifiers
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
|
||||
// POS Provider Information
|
||||
pos_system: POSSystem;
|
||||
provider_name: string;
|
||||
|
||||
// Configuration Status
|
||||
is_active: boolean;
|
||||
is_connected: boolean;
|
||||
|
||||
// Authentication & Credentials (encrypted)
|
||||
encrypted_credentials?: string;
|
||||
webhook_url?: string;
|
||||
webhook_secret?: string;
|
||||
|
||||
// Provider-specific Settings
|
||||
environment: POSEnvironment;
|
||||
location_id?: string;
|
||||
merchant_id?: string;
|
||||
|
||||
// Sync Configuration
|
||||
sync_enabled: boolean;
|
||||
sync_interval_minutes: string;
|
||||
auto_sync_products: boolean;
|
||||
auto_sync_transactions: boolean;
|
||||
|
||||
// Last Sync Information
|
||||
last_sync_at?: string;
|
||||
last_successful_sync_at?: string;
|
||||
last_sync_status?: POSSyncStatus;
|
||||
last_sync_message?: string;
|
||||
|
||||
// Provider-specific Configuration (JSON)
|
||||
provider_settings?: Record<string, any>;
|
||||
|
||||
// Connection Health
|
||||
last_health_check_at?: string;
|
||||
health_status: POSHealthStatus;
|
||||
health_message?: string;
|
||||
|
||||
// Timestamps
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
|
||||
// Metadata
|
||||
created_by?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// POS TRANSACTIONS
|
||||
// ============================================================================
|
||||
|
||||
export interface POSTransaction {
|
||||
// Primary identifiers
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
pos_config_id: string;
|
||||
|
||||
// POS Provider Information
|
||||
pos_system: POSSystem;
|
||||
external_transaction_id: string;
|
||||
external_order_id?: string;
|
||||
|
||||
// Transaction Details
|
||||
transaction_type: POSTransactionType;
|
||||
status: POSTransactionStatus;
|
||||
|
||||
// Financial Information
|
||||
subtotal: number;
|
||||
tax_amount: number;
|
||||
tip_amount: number;
|
||||
discount_amount: number;
|
||||
total_amount: number;
|
||||
currency: string;
|
||||
|
||||
// Payment Information
|
||||
payment_method?: POSPaymentMethod;
|
||||
payment_status?: POSPaymentStatus;
|
||||
|
||||
// Transaction Timing
|
||||
transaction_date: string;
|
||||
pos_created_at: string;
|
||||
pos_updated_at?: string;
|
||||
|
||||
// Location & Staff
|
||||
location_id?: string;
|
||||
location_name?: string;
|
||||
staff_id?: string;
|
||||
staff_name?: string;
|
||||
|
||||
// Customer Information
|
||||
customer_id?: string;
|
||||
customer_email?: string;
|
||||
customer_phone?: string;
|
||||
|
||||
// Order Context
|
||||
order_type?: POSOrderType;
|
||||
table_number?: string;
|
||||
receipt_number?: string;
|
||||
|
||||
// Sync Status
|
||||
is_synced_to_sales: boolean;
|
||||
sales_record_id?: string;
|
||||
sync_attempted_at?: string;
|
||||
sync_completed_at?: string;
|
||||
sync_error?: string;
|
||||
sync_retry_count: number;
|
||||
|
||||
// Raw Data
|
||||
raw_data?: Record<string, any>;
|
||||
|
||||
// Processing Status
|
||||
is_processed: boolean;
|
||||
processing_error?: string;
|
||||
|
||||
// Duplicate Detection
|
||||
is_duplicate: boolean;
|
||||
duplicate_of?: string;
|
||||
|
||||
// Timestamps
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
|
||||
// Related Items
|
||||
items?: POSTransactionItem[];
|
||||
}
|
||||
|
||||
export interface POSTransactionItem {
|
||||
// Primary identifiers
|
||||
id: string;
|
||||
transaction_id: string;
|
||||
tenant_id: string;
|
||||
|
||||
// POS Item Information
|
||||
external_item_id?: string;
|
||||
sku?: string;
|
||||
|
||||
// Product Details
|
||||
product_name: string;
|
||||
product_category?: string;
|
||||
product_subcategory?: string;
|
||||
|
||||
// Quantity & Pricing
|
||||
quantity: number;
|
||||
unit_price: number;
|
||||
total_price: number;
|
||||
|
||||
// Discounts & Modifiers
|
||||
discount_amount: number;
|
||||
tax_amount: number;
|
||||
|
||||
// Modifiers (e.g., extra shot, no foam for coffee)
|
||||
modifiers?: Record<string, any>;
|
||||
|
||||
// Inventory Mapping
|
||||
inventory_product_id?: string;
|
||||
is_mapped_to_inventory: boolean;
|
||||
|
||||
// Sync Status
|
||||
is_synced_to_sales: boolean;
|
||||
sync_error?: string;
|
||||
|
||||
// Raw Data
|
||||
raw_data?: Record<string, any>;
|
||||
|
||||
// Timestamps
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// POS WEBHOOK LOGS
|
||||
// ============================================================================
|
||||
|
||||
export interface POSWebhookLog {
|
||||
// Primary identifiers
|
||||
id: string;
|
||||
tenant_id?: string;
|
||||
|
||||
// POS Provider Information
|
||||
pos_system: POSSystem;
|
||||
webhook_type: string;
|
||||
|
||||
// Request Information
|
||||
method: string;
|
||||
url_path: string;
|
||||
query_params?: Record<string, any>;
|
||||
headers?: Record<string, any>;
|
||||
|
||||
// Payload
|
||||
raw_payload: string;
|
||||
payload_size: number;
|
||||
content_type?: string;
|
||||
|
||||
// Security
|
||||
signature?: string;
|
||||
is_signature_valid?: boolean;
|
||||
source_ip?: string;
|
||||
|
||||
// Processing Status
|
||||
status: POSWebhookStatus;
|
||||
processing_started_at?: string;
|
||||
processing_completed_at?: string;
|
||||
processing_duration_ms?: number;
|
||||
|
||||
// Error Handling
|
||||
error_message?: string;
|
||||
error_code?: string;
|
||||
retry_count: number;
|
||||
max_retries: number;
|
||||
|
||||
// Response Information
|
||||
response_status_code?: number;
|
||||
response_body?: string;
|
||||
response_sent_at?: string;
|
||||
|
||||
// Event Metadata
|
||||
event_id?: string;
|
||||
event_timestamp?: string;
|
||||
sequence_number?: number;
|
||||
|
||||
// Business Data References
|
||||
transaction_id?: string;
|
||||
order_id?: string;
|
||||
customer_id?: string;
|
||||
|
||||
// Internal References
|
||||
created_transaction_id?: string;
|
||||
updated_transaction_id?: string;
|
||||
|
||||
// Duplicate Detection
|
||||
is_duplicate: boolean;
|
||||
duplicate_of?: string;
|
||||
|
||||
// Processing Priority
|
||||
priority: string;
|
||||
|
||||
// Debugging Information
|
||||
user_agent?: string;
|
||||
forwarded_for?: string;
|
||||
request_id?: string;
|
||||
|
||||
// Timestamps
|
||||
received_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// POS SYNC LOGS
|
||||
// ============================================================================
|
||||
|
||||
export interface POSSyncLog {
|
||||
// Primary identifiers
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
pos_config_id: string;
|
||||
|
||||
// Sync Operation Details
|
||||
sync_type: POSSyncType;
|
||||
sync_direction: POSSyncDirection;
|
||||
data_type: POSDataType;
|
||||
|
||||
// POS Provider Information
|
||||
pos_system: POSSystem;
|
||||
|
||||
// Sync Status
|
||||
status: string; // started, in_progress, completed, failed, cancelled
|
||||
|
||||
// Timing Information
|
||||
started_at: string;
|
||||
completed_at?: string;
|
||||
duration_seconds?: number;
|
||||
|
||||
// Date Range for Sync
|
||||
sync_from_date?: string;
|
||||
sync_to_date?: string;
|
||||
|
||||
// Statistics
|
||||
records_requested: number;
|
||||
records_processed: number;
|
||||
records_created: number;
|
||||
records_updated: number;
|
||||
records_skipped: number;
|
||||
records_failed: number;
|
||||
|
||||
// API Usage Statistics
|
||||
api_calls_made: number;
|
||||
api_rate_limit_hits: number;
|
||||
total_api_time_ms: number;
|
||||
|
||||
// Error Information
|
||||
error_message?: string;
|
||||
error_code?: string;
|
||||
error_details?: Record<string, any>;
|
||||
|
||||
// Retry Information
|
||||
retry_attempt: number;
|
||||
max_retries: number;
|
||||
parent_sync_id?: string;
|
||||
|
||||
// Configuration Snapshot
|
||||
sync_configuration?: Record<string, any>;
|
||||
|
||||
// Progress Tracking
|
||||
current_page?: number;
|
||||
total_pages?: number;
|
||||
current_batch?: number;
|
||||
total_batches?: number;
|
||||
progress_percentage?: number;
|
||||
|
||||
// Data Quality
|
||||
validation_errors?: Record<string, any>[];
|
||||
data_quality_score?: number;
|
||||
|
||||
// Performance Metrics
|
||||
memory_usage_mb?: number;
|
||||
cpu_usage_percentage?: number;
|
||||
network_bytes_received?: number;
|
||||
network_bytes_sent?: number;
|
||||
|
||||
// Business Impact
|
||||
revenue_synced?: number;
|
||||
transactions_synced: number;
|
||||
|
||||
// Trigger Information
|
||||
triggered_by?: string; // system, user, webhook, schedule
|
||||
triggered_by_user_id?: string;
|
||||
trigger_details?: Record<string, any>;
|
||||
|
||||
// External References
|
||||
external_batch_id?: string;
|
||||
webhook_log_id?: string;
|
||||
|
||||
// Timestamps
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
|
||||
// Metadata
|
||||
notes?: string;
|
||||
tags?: string[];
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// SUPPORTED POS SYSTEMS
|
||||
// ============================================================================
|
||||
|
||||
export interface POSSystemInfo {
|
||||
id: POSSystem;
|
||||
name: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
supported_regions: string[];
|
||||
}
|
||||
|
||||
export interface POSCredentialsField {
|
||||
field: string;
|
||||
label: string;
|
||||
type: 'text' | 'password' | 'url' | 'select';
|
||||
placeholder?: string;
|
||||
required: boolean;
|
||||
help_text?: string;
|
||||
options?: { value: string; label: string }[];
|
||||
}
|
||||
|
||||
export interface POSProviderConfig {
|
||||
id: POSSystem;
|
||||
name: string;
|
||||
logo: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
required_fields: POSCredentialsField[];
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// SYNC ANALYTICS & PERFORMANCE TYPES
|
||||
// ============================================================================
|
||||
|
||||
export interface SyncHealth {
|
||||
status: string;
|
||||
success_rate: number;
|
||||
average_duration_minutes: number;
|
||||
last_error?: string;
|
||||
}
|
||||
|
||||
export interface SyncFrequency {
|
||||
daily_average: number;
|
||||
peak_day?: string;
|
||||
peak_count: number;
|
||||
}
|
||||
|
||||
export interface ErrorAnalysis {
|
||||
common_errors: any[];
|
||||
error_trends: any[];
|
||||
}
|
||||
|
||||
export interface SyncAnalytics {
|
||||
period_days: number;
|
||||
total_syncs: number;
|
||||
successful_syncs: number;
|
||||
failed_syncs: number;
|
||||
success_rate: number;
|
||||
average_duration_minutes: number;
|
||||
total_transactions_synced: number;
|
||||
total_revenue_synced: number;
|
||||
sync_frequency: SyncFrequency;
|
||||
error_analysis: ErrorAnalysis;
|
||||
}
|
||||
|
||||
export interface TransactionSummary {
|
||||
total_amount: number;
|
||||
transaction_count: number;
|
||||
sync_status: {
|
||||
synced: number;
|
||||
pending: number;
|
||||
failed: number;
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// WEBHOOK TYPES
|
||||
// ============================================================================
|
||||
|
||||
export interface WebhookSupportedEvents {
|
||||
events: string[];
|
||||
format: string;
|
||||
authentication: string;
|
||||
}
|
||||
|
||||
export interface WebhookStatus {
|
||||
pos_system: string;
|
||||
status: string;
|
||||
endpoint: string;
|
||||
supported_events: WebhookSupportedEvents;
|
||||
last_received?: string;
|
||||
total_received: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// BASE POS CLIENT TYPES (matching backend integrations)
|
||||
// ============================================================================
|
||||
|
||||
export interface POSCredentialsData {
|
||||
pos_system: POSSystem;
|
||||
environment: POSEnvironment;
|
||||
api_key?: string;
|
||||
api_secret?: string;
|
||||
access_token?: string;
|
||||
application_id?: string;
|
||||
merchant_id?: string;
|
||||
location_id?: string;
|
||||
webhook_secret?: string;
|
||||
additional_params?: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface ClientPOSTransaction {
|
||||
external_id: string;
|
||||
transaction_type: string;
|
||||
status: string;
|
||||
total_amount: number;
|
||||
subtotal: number;
|
||||
tax_amount: number;
|
||||
tip_amount: number;
|
||||
discount_amount: number;
|
||||
currency: string;
|
||||
transaction_date: string;
|
||||
payment_method?: string;
|
||||
payment_status?: string;
|
||||
location_id?: string;
|
||||
location_name?: string;
|
||||
staff_id?: string;
|
||||
staff_name?: string;
|
||||
customer_id?: string;
|
||||
customer_email?: string;
|
||||
order_type?: string;
|
||||
table_number?: string;
|
||||
receipt_number?: string;
|
||||
external_order_id?: string;
|
||||
items: ClientPOSTransactionItem[];
|
||||
raw_data: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface ClientPOSTransactionItem {
|
||||
external_id?: string;
|
||||
sku?: string;
|
||||
name: string;
|
||||
category?: string;
|
||||
quantity: number;
|
||||
unit_price: number;
|
||||
total_price: number;
|
||||
discount_amount: number;
|
||||
tax_amount: number;
|
||||
modifiers?: Record<string, any>;
|
||||
raw_data?: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface ClientPOSProduct {
|
||||
external_id: string;
|
||||
name: string;
|
||||
sku?: string;
|
||||
category?: string;
|
||||
subcategory?: string;
|
||||
price: number;
|
||||
description?: string;
|
||||
is_active: boolean;
|
||||
raw_data: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface SyncResult {
|
||||
success: boolean;
|
||||
records_processed: number;
|
||||
records_created: number;
|
||||
records_updated: number;
|
||||
records_skipped: number;
|
||||
records_failed: number;
|
||||
errors: string[];
|
||||
warnings: string[];
|
||||
duration_seconds: number;
|
||||
api_calls_made: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// API REQUEST/RESPONSE TYPES
|
||||
// ============================================================================
|
||||
|
||||
// GET /tenants/{tenant_id}/pos/configurations
|
||||
export interface GetPOSConfigurationsRequest {
|
||||
tenant_id: string;
|
||||
pos_system?: POSSystem;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface GetPOSConfigurationsResponse {
|
||||
configurations: POSConfiguration[];
|
||||
total: number;
|
||||
supported_systems: POSSystem[];
|
||||
}
|
||||
|
||||
// POST /tenants/{tenant_id}/pos/configurations
|
||||
export interface CreatePOSConfigurationRequest {
|
||||
tenant_id: string;
|
||||
pos_system: POSSystem;
|
||||
provider_name: string;
|
||||
environment: POSEnvironment;
|
||||
credentials: Record<string, any>;
|
||||
sync_settings?: {
|
||||
auto_sync_enabled: boolean;
|
||||
sync_interval_minutes: number;
|
||||
sync_sales: boolean;
|
||||
sync_inventory: boolean;
|
||||
sync_customers: boolean;
|
||||
};
|
||||
webhook_url?: string;
|
||||
location_id?: string;
|
||||
merchant_id?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
export interface CreatePOSConfigurationResponse {
|
||||
message: string;
|
||||
id: string;
|
||||
configuration?: POSConfiguration;
|
||||
}
|
||||
|
||||
// GET /tenants/{tenant_id}/pos/configurations/{config_id}
|
||||
export interface GetPOSConfigurationRequest {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
}
|
||||
|
||||
export interface GetPOSConfigurationResponse {
|
||||
configuration: POSConfiguration;
|
||||
}
|
||||
|
||||
// PUT /tenants/{tenant_id}/pos/configurations/{config_id}
|
||||
export interface UpdatePOSConfigurationRequest {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
provider_name?: string;
|
||||
credentials?: Record<string, any>;
|
||||
sync_settings?: {
|
||||
auto_sync_enabled?: boolean;
|
||||
sync_interval_minutes?: number;
|
||||
sync_sales?: boolean;
|
||||
sync_inventory?: boolean;
|
||||
sync_customers?: boolean;
|
||||
};
|
||||
webhook_url?: string;
|
||||
location_id?: string;
|
||||
merchant_id?: string;
|
||||
notes?: string;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface UpdatePOSConfigurationResponse {
|
||||
message: string;
|
||||
configuration?: POSConfiguration;
|
||||
}
|
||||
|
||||
// DELETE /tenants/{tenant_id}/pos/configurations/{config_id}
|
||||
export interface DeletePOSConfigurationRequest {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
}
|
||||
|
||||
export interface DeletePOSConfigurationResponse {
|
||||
message: string;
|
||||
success: boolean;
|
||||
}
|
||||
|
||||
// POST /tenants/{tenant_id}/pos/configurations/{config_id}/test-connection
|
||||
export interface TestPOSConnectionRequest {
|
||||
tenant_id: string;
|
||||
config_id: string;
|
||||
}
|
||||
|
||||
export interface TestPOSConnectionResponse {
|
||||
success: boolean;
|
||||
message: string;
|
||||
tested_at: string;
|
||||
}
|
||||
|
||||
// GET /pos/supported-systems
|
||||
export interface GetSupportedPOSSystemsResponse {
|
||||
systems: POSSystemInfo[];
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// UTILITY TYPES
|
||||
// ============================================================================
|
||||
|
||||
export interface POSApiError {
|
||||
message: string;
|
||||
status?: number;
|
||||
code?: string;
|
||||
details?: any;
|
||||
}
|
||||
|
||||
export interface POSSyncSettings {
|
||||
auto_sync_enabled: boolean;
|
||||
sync_interval_minutes: number;
|
||||
sync_sales: boolean;
|
||||
sync_inventory: boolean;
|
||||
sync_customers: boolean;
|
||||
}
|
||||
|
||||
export interface POSConnectionTestResult {
|
||||
success: boolean;
|
||||
message: string;
|
||||
tested_at: string;
|
||||
}
|
||||
|
||||
// For backward compatibility with existing BakeryConfigPage
|
||||
export type { POSProviderConfig, POSSyncSettings as SyncSettings };
|
||||
@@ -5,189 +5,64 @@ import { Button } from '../../ui';
|
||||
import { Badge } from '../../ui';
|
||||
import { Select } from '../../ui';
|
||||
import { Input } from '../../ui';
|
||||
import {
|
||||
ForecastAlert,
|
||||
ForecastAlertType,
|
||||
AlertSeverity,
|
||||
} from '../../../types/forecasting.types';
|
||||
// Simple alert interface for component
|
||||
interface SimpleAlert {
|
||||
id: string;
|
||||
type: string;
|
||||
product: string;
|
||||
message: string;
|
||||
severity: 'high' | 'medium' | 'low' | 'info';
|
||||
recommendation?: string;
|
||||
}
|
||||
|
||||
export interface AlertsPanelProps {
|
||||
className?: string;
|
||||
title?: string;
|
||||
alerts?: ForecastAlert[];
|
||||
alerts?: SimpleAlert[];
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
onAlertAction?: (alertId: string, action: 'acknowledge' | 'resolve' | 'snooze' | 'production_adjust' | 'inventory_check') => void;
|
||||
onAlertAction?: (alertId: string, action: string) => void;
|
||||
onAlertDismiss?: (alertId: string) => void;
|
||||
onBulkAction?: (alertIds: string[], action: string) => void;
|
||||
showFilters?: boolean;
|
||||
compact?: boolean;
|
||||
maxItems?: number;
|
||||
autoRefresh?: boolean;
|
||||
refreshInterval?: number;
|
||||
}
|
||||
|
||||
interface AlertFilter {
|
||||
severity: AlertSeverity | 'all';
|
||||
type: ForecastAlertType | 'all';
|
||||
status: 'active' | 'acknowledged' | 'resolved' | 'all';
|
||||
severity: 'high' | 'medium' | 'low' | 'info' | 'all';
|
||||
type: string;
|
||||
product: string;
|
||||
dateRange: 'today' | 'week' | 'month' | 'all';
|
||||
}
|
||||
|
||||
interface AlertActionGroup {
|
||||
critical: AlertAction[];
|
||||
high: AlertAction[];
|
||||
medium: AlertAction[];
|
||||
low: AlertAction[];
|
||||
}
|
||||
|
||||
interface AlertAction {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
|
||||
description: string;
|
||||
}
|
||||
|
||||
const SPANISH_ALERT_TYPES: Record<ForecastAlertType, string> = {
|
||||
[ForecastAlertType.HIGH_DEMAND_PREDICTED]: 'Alta Demanda Predicha',
|
||||
[ForecastAlertType.LOW_DEMAND_PREDICTED]: 'Baja Demanda Predicha',
|
||||
[ForecastAlertType.ACCURACY_DROP]: 'Caída de Precisión',
|
||||
[ForecastAlertType.MODEL_DRIFT]: 'Deriva del Modelo',
|
||||
[ForecastAlertType.DATA_ANOMALY]: 'Anomalía de Datos',
|
||||
[ForecastAlertType.MISSING_DATA]: 'Datos Faltantes',
|
||||
[ForecastAlertType.SEASONAL_SHIFT]: 'Cambio Estacional',
|
||||
const SPANISH_SEVERITIES: Record<string, string> = {
|
||||
'high': 'Alta',
|
||||
'medium': 'Media',
|
||||
'low': 'Baja',
|
||||
'info': 'Info',
|
||||
};
|
||||
|
||||
const SPANISH_SEVERITIES: Record<AlertSeverity, string> = {
|
||||
[AlertSeverity.CRITICAL]: 'Crítica',
|
||||
[AlertSeverity.HIGH]: 'Alta',
|
||||
[AlertSeverity.MEDIUM]: 'Media',
|
||||
[AlertSeverity.LOW]: 'Baja',
|
||||
const SEVERITY_COLORS: Record<string, string> = {
|
||||
'high': 'text-[var(--color-error)] bg-red-50 border-red-200',
|
||||
'medium': 'text-yellow-600 bg-yellow-50 border-yellow-200',
|
||||
'low': 'text-[var(--color-info)] bg-[var(--color-info)]/5 border-[var(--color-info)]/20',
|
||||
'info': 'text-[var(--color-primary)] bg-blue-50 border-blue-200',
|
||||
};
|
||||
|
||||
const SEVERITY_COLORS: Record<AlertSeverity, string> = {
|
||||
[AlertSeverity.CRITICAL]: 'text-[var(--color-error)] bg-red-50 border-red-200',
|
||||
[AlertSeverity.HIGH]: 'text-[var(--color-primary)] bg-orange-50 border-orange-200',
|
||||
[AlertSeverity.MEDIUM]: 'text-yellow-600 bg-yellow-50 border-yellow-200',
|
||||
[AlertSeverity.LOW]: 'text-[var(--color-info)] bg-[var(--color-info)]/5 border-[var(--color-info)]/20',
|
||||
const SEVERITY_BADGE_VARIANTS: Record<string, 'danger' | 'warning' | 'success' | 'info'> = {
|
||||
'high': 'danger',
|
||||
'medium': 'warning',
|
||||
'low': 'info',
|
||||
'info': 'info',
|
||||
};
|
||||
|
||||
const SEVERITY_BADGE_VARIANTS: Record<AlertSeverity, 'danger' | 'warning' | 'success' | 'info'> = {
|
||||
[AlertSeverity.CRITICAL]: 'danger',
|
||||
[AlertSeverity.HIGH]: 'warning',
|
||||
[AlertSeverity.MEDIUM]: 'warning',
|
||||
[AlertSeverity.LOW]: 'info',
|
||||
const ALERT_ICONS: Record<string, string> = {
|
||||
'high-demand': '📈',
|
||||
'low-demand': '📉',
|
||||
'low-confidence': '🎯',
|
||||
'weather': '🌦️',
|
||||
'default': '⚠️',
|
||||
};
|
||||
|
||||
const ALERT_TYPE_ICONS: Record<ForecastAlertType, string> = {
|
||||
[ForecastAlertType.HIGH_DEMAND_PREDICTED]: '📈',
|
||||
[ForecastAlertType.LOW_DEMAND_PREDICTED]: '📉',
|
||||
[ForecastAlertType.ACCURACY_DROP]: '🎯',
|
||||
[ForecastAlertType.MODEL_DRIFT]: '🔄',
|
||||
[ForecastAlertType.DATA_ANOMALY]: '⚠️',
|
||||
[ForecastAlertType.MISSING_DATA]: '📊',
|
||||
[ForecastAlertType.SEASONAL_SHIFT]: '🍂',
|
||||
};
|
||||
|
||||
const ALERT_ACTIONS: AlertActionGroup = {
|
||||
critical: [
|
||||
{
|
||||
id: 'production_adjust',
|
||||
label: 'Ajustar Producción',
|
||||
icon: '🏭',
|
||||
variant: 'primary',
|
||||
description: 'Modificar inmediatamente el plan de producción',
|
||||
},
|
||||
{
|
||||
id: 'inventory_check',
|
||||
label: 'Verificar Inventario',
|
||||
icon: '📦',
|
||||
variant: 'warning',
|
||||
description: 'Revisar niveles de stock y materias primas',
|
||||
},
|
||||
{
|
||||
id: 'emergency_order',
|
||||
label: 'Pedido Urgente',
|
||||
icon: '🚚',
|
||||
variant: 'danger',
|
||||
description: 'Realizar pedido urgente a proveedores',
|
||||
},
|
||||
],
|
||||
high: [
|
||||
{
|
||||
id: 'production_adjust',
|
||||
label: 'Ajustar Producción',
|
||||
icon: '🏭',
|
||||
variant: 'primary',
|
||||
description: 'Ajustar plan de producción para mañana',
|
||||
},
|
||||
{
|
||||
id: 'inventory_alert',
|
||||
label: 'Alerta Inventario',
|
||||
icon: '📋',
|
||||
variant: 'warning',
|
||||
description: 'Crear alerta de inventario preventiva',
|
||||
},
|
||||
{
|
||||
id: 'team_notify',
|
||||
label: 'Notificar Equipo',
|
||||
icon: '👥',
|
||||
variant: 'secondary',
|
||||
description: 'Informar al equipo de producción',
|
||||
},
|
||||
],
|
||||
medium: [
|
||||
{
|
||||
id: 'production_review',
|
||||
label: 'Revisar Producción',
|
||||
icon: '📊',
|
||||
variant: 'secondary',
|
||||
description: 'Revisar plan de producción esta semana',
|
||||
},
|
||||
{
|
||||
id: 'monitor',
|
||||
label: 'Monitorear',
|
||||
icon: '👁️',
|
||||
variant: 'secondary',
|
||||
description: 'Mantener bajo observación',
|
||||
},
|
||||
],
|
||||
low: [
|
||||
{
|
||||
id: 'monitor',
|
||||
label: 'Monitorear',
|
||||
icon: '👁️',
|
||||
variant: 'secondary',
|
||||
description: 'Mantener bajo observación',
|
||||
},
|
||||
{
|
||||
id: 'data_review',
|
||||
label: 'Revisar Datos',
|
||||
icon: '🔍',
|
||||
variant: 'secondary',
|
||||
description: 'Revisar calidad de los datos',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const RECOMMENDATION_MESSAGES: Record<ForecastAlertType, (product: string, value: number) => string> = {
|
||||
[ForecastAlertType.HIGH_DEMAND_PREDICTED]: (product, value) =>
|
||||
`Se predice un aumento del ${value}% en la demanda de ${product}. Considera aumentar la producción.`,
|
||||
[ForecastAlertType.LOW_DEMAND_PREDICTED]: (product, value) =>
|
||||
`Se predice una disminución del ${Math.abs(value)}% en la demanda de ${product}. Considera reducir la producción para evitar desperdicios.`,
|
||||
[ForecastAlertType.ACCURACY_DROP]: (product, value) =>
|
||||
`La precisión del modelo para ${product} ha disminuido al ${value}%. Es recomendable reentrenar el modelo.`,
|
||||
[ForecastAlertType.MODEL_DRIFT]: (product, value) =>
|
||||
`Detectada deriva en el modelo de ${product}. Los patrones de demanda han cambiado significativamente.`,
|
||||
[ForecastAlertType.DATA_ANOMALY]: (product, value) =>
|
||||
`Anomalía detectada en los datos de ${product}. Verifica la calidad de los datos de entrada.`,
|
||||
[ForecastAlertType.MISSING_DATA]: (product, value) =>
|
||||
`Faltan ${value} días de datos para ${product}. Esto puede afectar la precisión de las predicciones.`,
|
||||
[ForecastAlertType.SEASONAL_SHIFT]: (product, value) =>
|
||||
`Detectado cambio en el patrón estacional de ${product}. El pico de demanda se ha adelantado/retrasado.`,
|
||||
};
|
||||
|
||||
const AlertsPanel: React.FC<AlertsPanelProps> = ({
|
||||
className,
|
||||
@@ -197,90 +72,35 @@ const AlertsPanel: React.FC<AlertsPanelProps> = ({
|
||||
error = null,
|
||||
onAlertAction,
|
||||
onAlertDismiss,
|
||||
onBulkAction,
|
||||
showFilters = true,
|
||||
showFilters = false,
|
||||
compact = false,
|
||||
maxItems,
|
||||
autoRefresh = false,
|
||||
refreshInterval = 30000,
|
||||
}) => {
|
||||
const [filters, setFilters] = useState<AlertFilter>({
|
||||
severity: 'all',
|
||||
type: 'all',
|
||||
status: 'active',
|
||||
product: '',
|
||||
dateRange: 'all',
|
||||
});
|
||||
|
||||
const [selectedAlerts, setSelectedAlerts] = useState<string[]>([]);
|
||||
const [expandedAlerts, setExpandedAlerts] = useState<string[]>([]);
|
||||
|
||||
// Filter alerts
|
||||
// Filter and limit alerts
|
||||
const filteredAlerts = useMemo(() => {
|
||||
let filtered = [...alerts];
|
||||
|
||||
// Filter by status
|
||||
if (filters.status !== 'all') {
|
||||
filtered = filtered.filter(alert => {
|
||||
if (filters.status === 'active') return alert.is_active && !alert.acknowledged_at && !alert.resolved_at;
|
||||
if (filters.status === 'acknowledged') return !!alert.acknowledged_at && !alert.resolved_at;
|
||||
if (filters.status === 'resolved') return !!alert.resolved_at;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
// Filter by severity
|
||||
if (filters.severity !== 'all') {
|
||||
filtered = filtered.filter(alert => alert.severity === filters.severity);
|
||||
}
|
||||
|
||||
// Filter by type
|
||||
if (filters.type !== 'all') {
|
||||
filtered = filtered.filter(alert => alert.alert_type === filters.type);
|
||||
}
|
||||
|
||||
// Filter by product
|
||||
if (filters.product) {
|
||||
filtered = filtered.filter(alert =>
|
||||
alert.product_name?.toLowerCase().includes(filters.product.toLowerCase())
|
||||
alert.product.toLowerCase().includes(filters.product.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
// Filter by date range
|
||||
if (filters.dateRange !== 'all') {
|
||||
const now = new Date();
|
||||
const filterDate = new Date();
|
||||
|
||||
switch (filters.dateRange) {
|
||||
case 'today':
|
||||
filterDate.setHours(0, 0, 0, 0);
|
||||
break;
|
||||
case 'week':
|
||||
filterDate.setDate(now.getDate() - 7);
|
||||
break;
|
||||
case 'month':
|
||||
filterDate.setMonth(now.getMonth() - 1);
|
||||
break;
|
||||
}
|
||||
|
||||
filtered = filtered.filter(alert => new Date(alert.created_at) >= filterDate);
|
||||
}
|
||||
|
||||
// Sort by severity and creation date
|
||||
filtered.sort((a, b) => {
|
||||
const severityOrder: Record<AlertSeverity, number> = {
|
||||
[AlertSeverity.CRITICAL]: 4,
|
||||
[AlertSeverity.HIGH]: 3,
|
||||
[AlertSeverity.MEDIUM]: 2,
|
||||
[AlertSeverity.LOW]: 1,
|
||||
};
|
||||
|
||||
if (a.severity !== b.severity) {
|
||||
return severityOrder[b.severity] - severityOrder[a.severity];
|
||||
}
|
||||
|
||||
return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
|
||||
});
|
||||
// Sort by severity priority
|
||||
const severityOrder = { 'high': 3, 'medium': 2, 'low': 1, 'info': 0 };
|
||||
filtered.sort((a, b) => severityOrder[b.severity] - severityOrder[a.severity]);
|
||||
|
||||
// Limit items if specified
|
||||
if (maxItems) {
|
||||
@@ -290,73 +110,6 @@ const AlertsPanel: React.FC<AlertsPanelProps> = ({
|
||||
return filtered;
|
||||
}, [alerts, filters, maxItems]);
|
||||
|
||||
// Get alert statistics
|
||||
const alertStats = useMemo(() => {
|
||||
const stats = {
|
||||
total: alerts.length,
|
||||
active: alerts.filter(a => a.is_active && !a.acknowledged_at && !a.resolved_at).length,
|
||||
critical: alerts.filter(a => a.severity === AlertSeverity.CRITICAL && a.is_active).length,
|
||||
high: alerts.filter(a => a.severity === AlertSeverity.HIGH && a.is_active).length,
|
||||
};
|
||||
return stats;
|
||||
}, [alerts]);
|
||||
|
||||
// Handle alert expansion
|
||||
const toggleAlertExpansion = useCallback((alertId: string) => {
|
||||
setExpandedAlerts(prev =>
|
||||
prev.includes(alertId)
|
||||
? prev.filter(id => id !== alertId)
|
||||
: [...prev, alertId]
|
||||
);
|
||||
}, []);
|
||||
|
||||
// Handle alert selection
|
||||
const toggleAlertSelection = useCallback((alertId: string) => {
|
||||
setSelectedAlerts(prev =>
|
||||
prev.includes(alertId)
|
||||
? prev.filter(id => id !== alertId)
|
||||
: [...prev, alertId]
|
||||
);
|
||||
}, []);
|
||||
|
||||
// Handle bulk selection
|
||||
const handleSelectAll = useCallback(() => {
|
||||
const activeAlerts = filteredAlerts.filter(a => a.is_active).map(a => a.id);
|
||||
setSelectedAlerts(prev =>
|
||||
prev.length === activeAlerts.length ? [] : activeAlerts
|
||||
);
|
||||
}, [filteredAlerts]);
|
||||
|
||||
// Get available actions for alert
|
||||
const getAlertActions = useCallback((alert: ForecastAlert): AlertAction[] => {
|
||||
return ALERT_ACTIONS[alert.severity] || [];
|
||||
}, []);
|
||||
|
||||
// Get recommendation message
|
||||
const getRecommendation = useCallback((alert: ForecastAlert): string => {
|
||||
const generator = RECOMMENDATION_MESSAGES[alert.alert_type];
|
||||
if (!generator) return alert.message;
|
||||
|
||||
const value = alert.predicted_value || alert.threshold_value || 0;
|
||||
return generator(alert.product_name || 'Producto', value);
|
||||
}, []);
|
||||
|
||||
// Format time ago
|
||||
const formatTimeAgo = useCallback((dateString: string): string => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / (1000 * 60));
|
||||
const diffHours = Math.floor(diffMins / 60);
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
|
||||
if (diffMins < 1) return 'Ahora mismo';
|
||||
if (diffMins < 60) return `Hace ${diffMins} min`;
|
||||
if (diffHours < 24) return `Hace ${diffHours}h`;
|
||||
if (diffDays < 7) return `Hace ${diffDays}d`;
|
||||
return date.toLocaleDateString('es-ES');
|
||||
}, []);
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -403,110 +156,13 @@ const AlertsPanel: React.FC<AlertsPanelProps> = ({
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
||||
{alertStats.critical > 0 && (
|
||||
<Badge variant="danger" className="animate-pulse">
|
||||
{alertStats.critical} críticas
|
||||
</Badge>
|
||||
)}
|
||||
{alertStats.high > 0 && (
|
||||
<Badge variant="warning">
|
||||
{alertStats.high} altas
|
||||
</Badge>
|
||||
)}
|
||||
<Badge variant="ghost">
|
||||
{alertStats.active}/{alertStats.total} activas
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedAlerts.length > 0 && onBulkAction && (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onBulkAction(selectedAlerts, 'acknowledge')}
|
||||
>
|
||||
✓ Confirmar Todas
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onBulkAction(selectedAlerts, 'production_plan')}
|
||||
>
|
||||
📋 Plan Producción
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{autoRefresh && (
|
||||
<div className="flex items-center gap-1 text-xs text-text-tertiary">
|
||||
<div className="animate-spin w-3 h-3 border border-color-primary border-t-transparent rounded-full"></div>
|
||||
Auto-actualización
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
||||
<Badge variant="ghost">
|
||||
{filteredAlerts.length} alertas
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{showFilters && (
|
||||
<div className="px-6 py-3 border-b border-border-primary bg-bg-secondary">
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||
<Select
|
||||
value={filters.status}
|
||||
onChange={(value) => setFilters(prev => ({ ...prev, status: value as any }))}
|
||||
className="text-sm"
|
||||
>
|
||||
<option value="all">Todos los estados</option>
|
||||
<option value="active">Activas</option>
|
||||
<option value="acknowledged">Confirmadas</option>
|
||||
<option value="resolved">Resueltas</option>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filters.severity}
|
||||
onChange={(value) => setFilters(prev => ({ ...prev, severity: value as any }))}
|
||||
className="text-sm"
|
||||
>
|
||||
<option value="all">Toda severidad</option>
|
||||
{Object.entries(SPANISH_SEVERITIES).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filters.type}
|
||||
onChange={(value) => setFilters(prev => ({ ...prev, type: value as any }))}
|
||||
className="text-sm"
|
||||
>
|
||||
<option value="all">Todos los tipos</option>
|
||||
{Object.entries(SPANISH_ALERT_TYPES).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
placeholder="Buscar producto..."
|
||||
value={filters.product}
|
||||
onChange={(e) => setFilters(prev => ({ ...prev, product: e.target.value }))}
|
||||
className="text-sm"
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={filters.dateRange}
|
||||
onChange={(value) => setFilters(prev => ({ ...prev, dateRange: value as any }))}
|
||||
className="text-sm"
|
||||
>
|
||||
<option value="all">Todo el tiempo</option>
|
||||
<option value="today">Hoy</option>
|
||||
<option value="week">Última semana</option>
|
||||
<option value="month">Último mes</option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CardBody padding={compact ? 'sm' : 'md'}>
|
||||
{filteredAlerts.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
@@ -521,200 +177,68 @@ const AlertsPanel: React.FC<AlertsPanelProps> = ({
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{/* Bulk actions bar */}
|
||||
{filteredAlerts.some(a => a.is_active) && (
|
||||
<div className="flex items-center gap-3 pb-2 border-b border-border-secondary">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded border-input-border focus:ring-color-primary"
|
||||
checked={selectedAlerts.length === filteredAlerts.filter(a => a.is_active).length}
|
||||
onChange={handleSelectAll}
|
||||
/>
|
||||
<span className="text-sm text-text-secondary">
|
||||
{selectedAlerts.length > 0
|
||||
? `${selectedAlerts.length} alertas seleccionadas`
|
||||
: 'Seleccionar todas'
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{filteredAlerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={clsx(
|
||||
'rounded-lg border transition-all duration-200 p-4',
|
||||
SEVERITY_COLORS[alert.severity]
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-2xl">
|
||||
{ALERT_ICONS[alert.type] || ALERT_ICONS['default']}
|
||||
</div>
|
||||
|
||||
{/* Alerts list */}
|
||||
{filteredAlerts.map((alert) => {
|
||||
const isExpanded = expandedAlerts.includes(alert.id);
|
||||
const isSelected = selectedAlerts.includes(alert.id);
|
||||
const availableActions = getAlertActions(alert);
|
||||
const recommendation = getRecommendation(alert);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={clsx(
|
||||
'rounded-lg border transition-all duration-200',
|
||||
SEVERITY_COLORS[alert.severity],
|
||||
{
|
||||
'opacity-60': !alert.is_active || alert.resolved_at,
|
||||
'ring-2 ring-color-primary': isSelected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Selection checkbox */}
|
||||
{alert.is_active && !alert.resolved_at && (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 rounded border-input-border focus:ring-color-primary"
|
||||
checked={isSelected}
|
||||
onChange={() => toggleAlertSelection(alert.id)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Badge
|
||||
variant={SEVERITY_BADGE_VARIANTS[alert.severity]}
|
||||
size="sm"
|
||||
>
|
||||
{SPANISH_SEVERITIES[alert.severity]}
|
||||
</Badge>
|
||||
{alert.product && (
|
||||
<Badge variant="ghost" size="sm">
|
||||
{alert.product}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Alert icon */}
|
||||
<div className="text-2xl mt-1">
|
||||
{ALERT_TYPE_ICONS[alert.alert_type]}
|
||||
</div>
|
||||
|
||||
{/* Alert content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h4 className="font-semibold text-text-primary text-sm">
|
||||
{alert.title}
|
||||
</h4>
|
||||
<Badge
|
||||
variant={SEVERITY_BADGE_VARIANTS[alert.severity]}
|
||||
size="sm"
|
||||
>
|
||||
{SPANISH_SEVERITIES[alert.severity]}
|
||||
</Badge>
|
||||
{alert.product_name && (
|
||||
<Badge variant="ghost" size="sm">
|
||||
{alert.product_name}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-text-secondary text-sm mb-2">
|
||||
{compact ? alert.message.slice(0, 100) + '...' : alert.message}
|
||||
</p>
|
||||
|
||||
{!compact && (
|
||||
<p className="text-text-primary text-sm mb-3 font-medium">
|
||||
💡 {recommendation}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 text-xs text-text-tertiary">
|
||||
<span>{formatTimeAgo(alert.created_at)}</span>
|
||||
{alert.acknowledged_at && (
|
||||
<span>• Confirmada</span>
|
||||
)}
|
||||
{alert.resolved_at && (
|
||||
<span>• Resuelta</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Quick actions */}
|
||||
{alert.is_active && !alert.resolved_at && (
|
||||
<div className="flex gap-1">
|
||||
{availableActions.slice(0, compact ? 1 : 2).map((action) => (
|
||||
<Button
|
||||
key={action.id}
|
||||
variant={action.variant as any}
|
||||
size="sm"
|
||||
onClick={() => onAlertAction?.(alert.id, action.id as any)}
|
||||
title={action.description}
|
||||
>
|
||||
{action.icon} {compact ? '' : action.label}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
{availableActions.length > (compact ? 1 : 2) && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleAlertExpansion(alert.id)}
|
||||
>
|
||||
{isExpanded ? '▼' : '▶'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dismiss button */}
|
||||
{onAlertDismiss && alert.is_active && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onAlertDismiss(alert.id)}
|
||||
title="Descartar alerta"
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded actions */}
|
||||
{isExpanded && availableActions.length > (compact ? 1 : 2) && (
|
||||
<div className="mt-3 pt-3 border-t border-border-secondary">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{availableActions.slice(compact ? 1 : 2).map((action) => (
|
||||
<Button
|
||||
key={action.id}
|
||||
variant={action.variant as any}
|
||||
size="sm"
|
||||
onClick={() => onAlertAction?.(alert.id, action.id as any)}
|
||||
className="justify-start"
|
||||
>
|
||||
<span className="mr-2">{action.icon}</span>
|
||||
<div className="text-left">
|
||||
<div className="font-medium">{action.label}</div>
|
||||
<div className="text-xs opacity-75">{action.description}</div>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-text-primary text-sm mb-2">
|
||||
{alert.message}
|
||||
</p>
|
||||
|
||||
{alert.recommendation && (
|
||||
<p className="text-text-secondary text-sm mb-3">
|
||||
💡 {alert.recommendation}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Alert details */}
|
||||
{!compact && isExpanded && (
|
||||
<div className="mt-3 pt-3 border-t border-border-secondary">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
|
||||
<div>
|
||||
<span className="text-text-secondary">Tipo:</span>
|
||||
<div className="font-medium">{SPANISH_ALERT_TYPES[alert.alert_type]}</div>
|
||||
</div>
|
||||
{alert.predicted_value && (
|
||||
<div>
|
||||
<span className="text-text-secondary">Valor Predicho:</span>
|
||||
<div className="font-medium">{alert.predicted_value}</div>
|
||||
</div>
|
||||
)}
|
||||
{alert.threshold_value && (
|
||||
<div>
|
||||
<span className="text-text-secondary">Umbral:</span>
|
||||
<div className="font-medium">{alert.threshold_value}</div>
|
||||
</div>
|
||||
)}
|
||||
{alert.model_accuracy && (
|
||||
<div>
|
||||
<span className="text-text-secondary">Precisión Modelo:</span>
|
||||
<div className="font-medium">{(alert.model_accuracy * 100).toFixed(1)}%</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
{onAlertAction && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onAlertAction(alert.id, 'acknowledge')}
|
||||
>
|
||||
✓ Confirmar
|
||||
</Button>
|
||||
)}
|
||||
{onAlertDismiss && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onAlertDismiss(alert.id)}
|
||||
>
|
||||
✕ Descartar
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardBody>
|
||||
|
||||
@@ -21,35 +21,17 @@ import { Select } from '../../ui';
|
||||
import { Badge } from '../../ui';
|
||||
import {
|
||||
ForecastResponse,
|
||||
DemandTrend,
|
||||
TrendDirection,
|
||||
WeatherCondition,
|
||||
EventType,
|
||||
} from '../../../types/forecasting.types';
|
||||
} from '../../../api/types/forecasting';
|
||||
|
||||
export interface DemandChartProps {
|
||||
className?: string;
|
||||
title?: string;
|
||||
data?: DemandTrend[];
|
||||
products?: string[];
|
||||
selectedProducts?: string[];
|
||||
onProductSelectionChange?: (products: string[]) => void;
|
||||
data?: ForecastResponse[];
|
||||
product?: string;
|
||||
period?: string;
|
||||
timeframe?: 'weekly' | 'monthly' | 'quarterly' | 'yearly';
|
||||
onTimeframeChange?: (timeframe: 'weekly' | 'monthly' | 'quarterly' | 'yearly') => void;
|
||||
showConfidenceInterval?: boolean;
|
||||
showEvents?: boolean;
|
||||
showWeatherOverlay?: boolean;
|
||||
events?: Array<{
|
||||
date: string;
|
||||
type: EventType;
|
||||
name: string;
|
||||
impact: 'high' | 'medium' | 'low';
|
||||
}>;
|
||||
weatherData?: Array<{
|
||||
date: string;
|
||||
condition: WeatherCondition;
|
||||
temperature: number;
|
||||
}>;
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
height?: number;
|
||||
@@ -62,15 +44,6 @@ interface ChartDataPoint {
|
||||
predictedDemand?: number;
|
||||
confidenceLower?: number;
|
||||
confidenceUpper?: number;
|
||||
accuracy?: number;
|
||||
trendDirection?: TrendDirection;
|
||||
seasonalFactor?: number;
|
||||
anomalyScore?: number;
|
||||
hasEvent?: boolean;
|
||||
eventType?: EventType;
|
||||
eventName?: string;
|
||||
eventImpact?: 'high' | 'medium' | 'low';
|
||||
weather?: WeatherCondition;
|
||||
temperature?: number;
|
||||
}
|
||||
|
||||
@@ -85,52 +58,25 @@ const PRODUCT_COLORS = [
|
||||
'#87ceeb', // Mazapán
|
||||
];
|
||||
|
||||
const EVENT_ICONS: Record<EventType, string> = {
|
||||
[EventType.HOLIDAY]: '🎉',
|
||||
[EventType.FESTIVAL]: '🎪',
|
||||
[EventType.SPORTS_EVENT]: '⚽',
|
||||
[EventType.WEATHER_EVENT]: '🌧️',
|
||||
[EventType.SCHOOL_EVENT]: '🎒',
|
||||
[EventType.CONCERT]: '🎵',
|
||||
[EventType.CONFERENCE]: '📊',
|
||||
[EventType.CONSTRUCTION]: '🚧',
|
||||
};
|
||||
|
||||
const WEATHER_ICONS: Record<WeatherCondition, string> = {
|
||||
[WeatherCondition.SUNNY]: '☀️',
|
||||
[WeatherCondition.CLOUDY]: '☁️',
|
||||
[WeatherCondition.RAINY]: '🌧️',
|
||||
[WeatherCondition.STORMY]: '⛈️',
|
||||
[WeatherCondition.SNOWY]: '❄️',
|
||||
[WeatherCondition.FOGGY]: '🌫️',
|
||||
[WeatherCondition.WINDY]: '🌪️',
|
||||
};
|
||||
|
||||
const SPANISH_EVENT_NAMES: Record<EventType, string> = {
|
||||
[EventType.HOLIDAY]: 'Festividad',
|
||||
[EventType.FESTIVAL]: 'Festival',
|
||||
[EventType.SPORTS_EVENT]: 'Evento Deportivo',
|
||||
[EventType.WEATHER_EVENT]: 'Evento Climático',
|
||||
[EventType.SCHOOL_EVENT]: 'Evento Escolar',
|
||||
[EventType.CONCERT]: 'Concierto',
|
||||
[EventType.CONFERENCE]: 'Conferencia',
|
||||
[EventType.CONSTRUCTION]: 'Construcción',
|
||||
const WEATHER_ICONS: Record<string, string> = {
|
||||
'sunny': '☀️',
|
||||
'cloudy': '☁️',
|
||||
'rainy': '🌧️',
|
||||
'stormy': '⛈️',
|
||||
'snowy': '❄️',
|
||||
'foggy': '🌫️',
|
||||
'windy': '🌪️',
|
||||
};
|
||||
|
||||
const DemandChart: React.FC<DemandChartProps> = ({
|
||||
className,
|
||||
title = 'Predicción de Demanda',
|
||||
data = [],
|
||||
products = [],
|
||||
selectedProducts = [],
|
||||
onProductSelectionChange,
|
||||
product = '',
|
||||
period = '7',
|
||||
timeframe = 'weekly',
|
||||
onTimeframeChange,
|
||||
showConfidenceInterval = true,
|
||||
showEvents = true,
|
||||
showWeatherOverlay = false,
|
||||
events = [],
|
||||
weatherData = [],
|
||||
loading = false,
|
||||
error = null,
|
||||
height = 400,
|
||||
@@ -140,34 +86,21 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
const [zoomedData, setZoomedData] = useState<ChartDataPoint[]>([]);
|
||||
const [hoveredPoint, setHoveredPoint] = useState<ChartDataPoint | null>(null);
|
||||
|
||||
// Process and merge data with events and weather
|
||||
// Process forecast data for chart
|
||||
const chartData = useMemo(() => {
|
||||
const processedData: ChartDataPoint[] = data.map(point => {
|
||||
const dateStr = point.date;
|
||||
const event = events.find(e => e.date === dateStr);
|
||||
const weather = weatherData.find(w => w.date === dateStr);
|
||||
|
||||
const processedData: ChartDataPoint[] = data.map(forecast => {
|
||||
return {
|
||||
date: dateStr,
|
||||
actualDemand: point.actual_demand,
|
||||
predictedDemand: point.predicted_demand,
|
||||
confidenceLower: point.confidence_lower,
|
||||
confidenceUpper: point.confidence_upper,
|
||||
accuracy: point.accuracy,
|
||||
trendDirection: point.trend_direction,
|
||||
seasonalFactor: point.seasonal_factor,
|
||||
anomalyScore: point.anomaly_score,
|
||||
hasEvent: !!event,
|
||||
eventType: event?.type,
|
||||
eventName: event?.name,
|
||||
eventImpact: event?.impact,
|
||||
weather: weather?.condition,
|
||||
temperature: weather?.temperature,
|
||||
date: forecast.forecast_date,
|
||||
actualDemand: undefined, // Not available in current forecast response
|
||||
predictedDemand: forecast.predicted_demand,
|
||||
confidenceLower: forecast.confidence_lower,
|
||||
confidenceUpper: forecast.confidence_upper,
|
||||
temperature: forecast.weather_temperature,
|
||||
};
|
||||
});
|
||||
|
||||
return processedData;
|
||||
}, [data, events, weatherData]);
|
||||
return processedData.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
||||
}, [data]);
|
||||
|
||||
// Filter data based on selected period
|
||||
const filteredData = useMemo(() => {
|
||||
@@ -218,13 +151,6 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
<h4 className="font-semibold text-text-primary mb-2">{formattedDate}</h4>
|
||||
|
||||
<div className="space-y-1">
|
||||
{data.actualDemand !== undefined && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-secondary text-sm">Demanda Real:</span>
|
||||
<span className="font-medium text-[var(--color-info)]">{data.actualDemand}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.predictedDemand !== undefined && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-secondary text-sm">Demanda Predicha:</span>
|
||||
@@ -241,88 +167,17 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.accuracy !== undefined && (
|
||||
{data.temperature && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-secondary text-sm">Precisión:</span>
|
||||
<Badge
|
||||
variant={data.accuracy > 0.8 ? 'success' : data.accuracy > 0.6 ? 'warning' : 'danger'}
|
||||
size="sm"
|
||||
>
|
||||
{(data.accuracy * 100).toFixed(1)}%
|
||||
</Badge>
|
||||
<span className="text-text-secondary text-sm">Temperatura:</span>
|
||||
<span className="text-sm text-text-tertiary">{data.temperature}°C</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showEvents && data.hasEvent && (
|
||||
<div className="mt-3 pt-2 border-t border-border-secondary">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">{EVENT_ICONS[data.eventType!]}</span>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-text-primary text-sm">{data.eventName}</div>
|
||||
<div className="text-xs text-text-tertiary">
|
||||
{SPANISH_EVENT_NAMES[data.eventType!]}
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant={data.eventImpact === 'high' ? 'danger' : data.eventImpact === 'medium' ? 'warning' : 'success'}
|
||||
size="sm"
|
||||
>
|
||||
{data.eventImpact === 'high' ? 'Alto' : data.eventImpact === 'medium' ? 'Medio' : 'Bajo'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showWeatherOverlay && data.weather && (
|
||||
<div className="mt-3 pt-2 border-t border-border-secondary">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">{WEATHER_ICONS[data.weather]}</span>
|
||||
<div className="flex-1">
|
||||
<div className="text-sm text-text-primary capitalize">
|
||||
{data.weather.replace('_', ' ')}
|
||||
</div>
|
||||
{data.temperature && (
|
||||
<div className="text-xs text-text-tertiary">
|
||||
{data.temperature}°C
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Event reference dots
|
||||
const renderEventDots = () => {
|
||||
if (!showEvents) return null;
|
||||
|
||||
return events
|
||||
.filter(event => {
|
||||
const eventData = zoomedData.find(d => d.date === event.date);
|
||||
return eventData;
|
||||
})
|
||||
.map((event, index) => {
|
||||
const eventData = zoomedData.find(d => d.date === event.date);
|
||||
if (!eventData) return null;
|
||||
|
||||
const yValue = eventData.predictedDemand || eventData.actualDemand || 0;
|
||||
|
||||
return (
|
||||
<ReferenceDot
|
||||
key={`event-${index}`}
|
||||
x={event.date}
|
||||
y={yValue}
|
||||
r={8}
|
||||
fill={event.impact === 'high' ? '#ef4444' : event.impact === 'medium' ? '#f59e0b' : '#10b981'}
|
||||
stroke="#ffffff"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
@@ -489,30 +344,17 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Actual demand line */}
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="actualDemand"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth={3}
|
||||
dot={false}
|
||||
activeDot={{ r: 6, stroke: '#3b82f6', strokeWidth: 2 }}
|
||||
name="Demanda Real"
|
||||
/>
|
||||
|
||||
{/* Predicted demand line */}
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="predictedDemand"
|
||||
stroke="#10b981"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="5 5"
|
||||
dot={false}
|
||||
activeDot={{ r: 4, stroke: '#10b981', strokeWidth: 2 }}
|
||||
strokeWidth={3}
|
||||
dot={true}
|
||||
dotSize={6}
|
||||
activeDot={{ r: 8, stroke: '#10b981', strokeWidth: 2 }}
|
||||
name="Demanda Predicha"
|
||||
/>
|
||||
|
||||
{renderEventDots()}
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
@@ -547,11 +389,7 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
{/* Chart legend */}
|
||||
<div className="flex items-center justify-center gap-6 mt-4 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-0.5 bg-[var(--color-info)]/50"></div>
|
||||
<span className="text-text-secondary">Demanda Real</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-0.5 bg-green-500 border-dashed border-t-2 border-green-500"></div>
|
||||
<div className="w-4 h-0.5 bg-green-500"></div>
|
||||
<span className="text-text-secondary">Demanda Predicha</span>
|
||||
</div>
|
||||
{showConfidenceInterval && (
|
||||
@@ -560,12 +398,6 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
<span className="text-text-secondary">Intervalo de Confianza</span>
|
||||
</div>
|
||||
)}
|
||||
{showEvents && events.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<span className="text-text-secondary">Eventos</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -8,9 +8,7 @@ import { Input } from '../../ui';
|
||||
import { Table, TableColumn } from '../../ui';
|
||||
import {
|
||||
ForecastResponse,
|
||||
TrendDirection,
|
||||
ModelType,
|
||||
} from '../../../types/forecasting.types';
|
||||
} from '../../../api/types/forecasting';
|
||||
|
||||
export interface ForecastTableProps {
|
||||
className?: string;
|
||||
@@ -31,7 +29,7 @@ interface FilterState {
|
||||
productName: string;
|
||||
category: string;
|
||||
accuracyRange: 'all' | 'high' | 'medium' | 'low';
|
||||
trendDirection: TrendDirection | 'all';
|
||||
trendDirection: 'increasing' | 'decreasing' | 'stable' | 'all';
|
||||
confidenceLevel: number | 'all';
|
||||
dateRange: 'today' | 'week' | 'month' | 'quarter' | 'all';
|
||||
}
|
||||
@@ -41,28 +39,28 @@ interface SortState {
|
||||
order: 'asc' | 'desc';
|
||||
}
|
||||
|
||||
const SPANISH_TRENDS: Record<TrendDirection, string> = {
|
||||
[TrendDirection.INCREASING]: 'Creciente',
|
||||
[TrendDirection.DECREASING]: 'Decreciente',
|
||||
[TrendDirection.STABLE]: 'Estable',
|
||||
[TrendDirection.VOLATILE]: 'Volátil',
|
||||
[TrendDirection.SEASONAL]: 'Estacional',
|
||||
const SPANISH_TRENDS: Record<string, string> = {
|
||||
'increasing': 'Creciente',
|
||||
'decreasing': 'Decreciente',
|
||||
'stable': 'Estable',
|
||||
'volatile': 'Volátil',
|
||||
'seasonal': 'Estacional',
|
||||
};
|
||||
|
||||
const TREND_COLORS: Record<TrendDirection, string> = {
|
||||
[TrendDirection.INCREASING]: 'text-[var(--color-success)]',
|
||||
[TrendDirection.DECREASING]: 'text-[var(--color-error)]',
|
||||
[TrendDirection.STABLE]: 'text-[var(--color-info)]',
|
||||
[TrendDirection.VOLATILE]: 'text-yellow-600',
|
||||
[TrendDirection.SEASONAL]: 'text-purple-600',
|
||||
const TREND_COLORS: Record<string, string> = {
|
||||
'increasing': 'text-[var(--color-success)]',
|
||||
'decreasing': 'text-[var(--color-error)]',
|
||||
'stable': 'text-[var(--color-info)]',
|
||||
'volatile': 'text-yellow-600',
|
||||
'seasonal': 'text-purple-600',
|
||||
};
|
||||
|
||||
const TREND_ICONS: Record<TrendDirection, string> = {
|
||||
[TrendDirection.INCREASING]: '↗️',
|
||||
[TrendDirection.DECREASING]: '↘️',
|
||||
[TrendDirection.STABLE]: '➡️',
|
||||
[TrendDirection.VOLATILE]: '📈',
|
||||
[TrendDirection.SEASONAL]: '🔄',
|
||||
const TREND_ICONS: Record<string, string> = {
|
||||
'increasing': '↗️',
|
||||
'decreasing': '↘️',
|
||||
'stable': '➡️',
|
||||
'volatile': '📈',
|
||||
'seasonal': '🔄',
|
||||
};
|
||||
|
||||
const BAKERY_CATEGORIES = [
|
||||
@@ -140,17 +138,17 @@ const ForecastTable: React.FC<ForecastTableProps> = ({
|
||||
// Apply filters
|
||||
if (filters.productName) {
|
||||
filtered = filtered.filter(item =>
|
||||
item.product_name.toLowerCase().includes(filters.productName.toLowerCase())
|
||||
item.inventory_product_id.toLowerCase().includes(filters.productName.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
if (filters.category !== 'all') {
|
||||
filtered = filtered.filter(item => getProductCategory(item.product_name) === filters.category);
|
||||
filtered = filtered.filter(item => getProductCategory(item.inventory_product_id) === filters.category);
|
||||
}
|
||||
|
||||
if (filters.accuracyRange !== 'all') {
|
||||
filtered = filtered.filter(item => {
|
||||
const accuracy = item.accuracy_score || 0;
|
||||
const accuracy = item.confidence_level || 0;
|
||||
switch (filters.accuracyRange) {
|
||||
case 'high': return accuracy >= 0.8;
|
||||
case 'medium': return accuracy >= 0.6 && accuracy < 0.8;
|
||||
@@ -162,8 +160,8 @@ const ForecastTable: React.FC<ForecastTableProps> = ({
|
||||
|
||||
if (filters.trendDirection !== 'all') {
|
||||
filtered = filtered.filter(item => {
|
||||
// Determine trend from predicted vs historical (simplified)
|
||||
const trend = item.predicted_demand > (item.actual_demand || 0) ? TrendDirection.INCREASING : TrendDirection.DECREASING;
|
||||
// Determine trend from predicted demand (simplified)
|
||||
const trend = item.predicted_demand > 50 ? 'increasing' : item.predicted_demand < 20 ? 'decreasing' : 'stable';
|
||||
return trend === filters.trendDirection;
|
||||
});
|
||||
}
|
||||
@@ -200,21 +198,17 @@ const ForecastTable: React.FC<ForecastTableProps> = ({
|
||||
let bValue: any;
|
||||
|
||||
switch (sort.field) {
|
||||
case 'product_name':
|
||||
aValue = a.product_name;
|
||||
bValue = b.product_name;
|
||||
case 'inventory_product_id':
|
||||
aValue = a.inventory_product_id;
|
||||
bValue = b.inventory_product_id;
|
||||
break;
|
||||
case 'predicted_demand':
|
||||
aValue = a.predicted_demand;
|
||||
bValue = b.predicted_demand;
|
||||
break;
|
||||
case 'accuracy_score':
|
||||
aValue = a.accuracy_score || 0;
|
||||
bValue = b.accuracy_score || 0;
|
||||
break;
|
||||
case 'confidence_level':
|
||||
aValue = a.confidence_level;
|
||||
bValue = b.confidence_level;
|
||||
aValue = a.confidence_level || 0;
|
||||
bValue = b.confidence_level || 0;
|
||||
break;
|
||||
case 'forecast_date':
|
||||
aValue = new Date(a.forecast_date);
|
||||
@@ -263,7 +257,7 @@ const ForecastTable: React.FC<ForecastTableProps> = ({
|
||||
|
||||
// Calculate accuracy percentage and trend
|
||||
const getAccuracyInfo = useCallback((item: ForecastResponse) => {
|
||||
const accuracy = item.accuracy_score || 0;
|
||||
const accuracy = item.confidence_level || 0;
|
||||
const percentage = (accuracy * 100).toFixed(1);
|
||||
|
||||
let variant: 'success' | 'warning' | 'danger' = 'success';
|
||||
@@ -276,8 +270,7 @@ const ForecastTable: React.FC<ForecastTableProps> = ({
|
||||
// Get trend info
|
||||
const getTrendInfo = useCallback((item: ForecastResponse) => {
|
||||
// Simplified trend calculation
|
||||
const trend = item.predicted_demand > (item.actual_demand || 0) ?
|
||||
TrendDirection.INCREASING : TrendDirection.DECREASING;
|
||||
const trend = item.predicted_demand > 50 ? 'increasing' : item.predicted_demand < 20 ? 'decreasing' : 'stable';
|
||||
|
||||
return {
|
||||
direction: trend,
|
||||
@@ -291,9 +284,9 @@ const ForecastTable: React.FC<ForecastTableProps> = ({
|
||||
const columns: TableColumn<ForecastResponse>[] = useMemo(() => {
|
||||
const baseColumns: TableColumn<ForecastResponse>[] = [
|
||||
{
|
||||
key: 'product_name',
|
||||
key: 'inventory_product_id',
|
||||
title: 'Producto',
|
||||
dataIndex: 'product_name',
|
||||
dataIndex: 'inventory_product_id',
|
||||
sortable: true,
|
||||
width: compact ? 120 : 160,
|
||||
render: (value: string, record: ForecastResponse) => (
|
||||
@@ -324,21 +317,9 @@ const ForecastTable: React.FC<ForecastTableProps> = ({
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'actual_demand',
|
||||
title: 'Demanda Real',
|
||||
dataIndex: 'actual_demand',
|
||||
align: 'right' as const,
|
||||
width: compact ? 80 : 100,
|
||||
render: (value?: number) => (
|
||||
<div className="font-medium text-[var(--color-info)]">
|
||||
{value ? value.toFixed(0) : '-'}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'accuracy_score',
|
||||
title: 'Precisión',
|
||||
dataIndex: 'accuracy_score',
|
||||
key: 'confidence_level',
|
||||
title: 'Confianza',
|
||||
dataIndex: 'confidence_level',
|
||||
sortable: true,
|
||||
align: 'center' as const,
|
||||
width: 80,
|
||||
|
||||
@@ -22,56 +22,25 @@ import { Card, CardHeader, CardBody } from '../../ui';
|
||||
import { Button } from '../../ui';
|
||||
import { Badge } from '../../ui';
|
||||
import { Select } from '../../ui';
|
||||
import {
|
||||
SeasonalPattern,
|
||||
SeasonalComponent,
|
||||
HolidayEffect,
|
||||
WeeklyPattern,
|
||||
YearlyTrend,
|
||||
Season,
|
||||
SeasonalPeriod,
|
||||
DayOfWeek,
|
||||
} from '../../../types/forecasting.types';
|
||||
// Simplified interfaces for seasonality data
|
||||
interface SimpleSeasonalData {
|
||||
month: string;
|
||||
value: number;
|
||||
season: string;
|
||||
}
|
||||
|
||||
interface SimpleWeeklyData {
|
||||
day: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
export interface SeasonalityIndicatorProps {
|
||||
className?: string;
|
||||
title?: string;
|
||||
seasonalPatterns?: SeasonalPattern[];
|
||||
selectedProduct?: string;
|
||||
onProductChange?: (product: string) => void;
|
||||
viewMode?: 'circular' | 'calendar' | 'heatmap' | 'trends';
|
||||
onViewModeChange?: (mode: 'circular' | 'calendar' | 'heatmap' | 'trends') => void;
|
||||
showComparison?: boolean;
|
||||
comparisonYear?: number;
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
interface MonthlyData {
|
||||
month: string;
|
||||
value: number;
|
||||
strength: number;
|
||||
color: string;
|
||||
season: Season;
|
||||
holidays: string[];
|
||||
}
|
||||
|
||||
interface WeeklyData {
|
||||
day: string;
|
||||
dayShort: string;
|
||||
value: number;
|
||||
variance: number;
|
||||
peakHours?: number[];
|
||||
}
|
||||
|
||||
interface HeatmapData {
|
||||
month: number;
|
||||
week: number;
|
||||
intensity: number;
|
||||
value: number;
|
||||
holiday?: string;
|
||||
}
|
||||
|
||||
const SPANISH_MONTHS = [
|
||||
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
||||
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
|
||||
@@ -85,18 +54,18 @@ const SPANISH_DAYS_SHORT = [
|
||||
'L', 'M', 'X', 'J', 'V', 'S', 'D'
|
||||
];
|
||||
|
||||
const SPANISH_SEASONS: Record<Season, string> = {
|
||||
[Season.SPRING]: 'Primavera',
|
||||
[Season.SUMMER]: 'Verano',
|
||||
[Season.FALL]: 'Otoño',
|
||||
[Season.WINTER]: 'Invierno',
|
||||
const SPANISH_SEASONS: Record<string, string> = {
|
||||
'spring': 'Primavera',
|
||||
'summer': 'Verano',
|
||||
'fall': 'Otoño',
|
||||
'winter': 'Invierno',
|
||||
};
|
||||
|
||||
const SEASON_COLORS: Record<Season, string> = {
|
||||
[Season.SPRING]: '#22c55e', // Green
|
||||
[Season.SUMMER]: '#f59e0b', // Amber
|
||||
[Season.FALL]: '#ea580c', // Orange
|
||||
[Season.WINTER]: '#3b82f6', // Blue
|
||||
const SEASON_COLORS: Record<string, string> = {
|
||||
'spring': '#22c55e', // Green
|
||||
'summer': '#f59e0b', // Amber
|
||||
'fall': '#ea580c', // Orange
|
||||
'winter': '#3b82f6', // Blue
|
||||
};
|
||||
|
||||
const SPANISH_HOLIDAYS = [
|
||||
@@ -125,308 +94,9 @@ const INTENSITY_COLORS = [
|
||||
const SeasonalityIndicator: React.FC<SeasonalityIndicatorProps> = ({
|
||||
className,
|
||||
title = 'Patrones Estacionales',
|
||||
seasonalPatterns = [],
|
||||
selectedProduct = '',
|
||||
onProductChange,
|
||||
viewMode = 'circular',
|
||||
onViewModeChange,
|
||||
showComparison = false,
|
||||
comparisonYear = new Date().getFullYear() - 1,
|
||||
loading = false,
|
||||
error = null,
|
||||
}) => {
|
||||
const [hoveredElement, setHoveredElement] = useState<any>(null);
|
||||
|
||||
// Get current pattern data
|
||||
const currentPattern = useMemo(() => {
|
||||
if (!selectedProduct || seasonalPatterns.length === 0) {
|
||||
return seasonalPatterns[0] || null;
|
||||
}
|
||||
return seasonalPatterns.find(p => p.product_name === selectedProduct) || seasonalPatterns[0];
|
||||
}, [seasonalPatterns, selectedProduct]);
|
||||
|
||||
// Process monthly seasonal data
|
||||
const monthlyData = useMemo((): MonthlyData[] => {
|
||||
if (!currentPattern) return [];
|
||||
|
||||
const monthlyComponent = currentPattern.seasonal_components.find(
|
||||
c => c.period === SeasonalPeriod.MONTHLY
|
||||
);
|
||||
|
||||
if (!monthlyComponent) return [];
|
||||
|
||||
return SPANISH_MONTHS.map((month, index) => {
|
||||
const value = monthlyComponent.pattern[index] || 0;
|
||||
const strength = Math.abs(value);
|
||||
|
||||
// Determine season
|
||||
let season: Season;
|
||||
if (index >= 2 && index <= 4) season = Season.SPRING;
|
||||
else if (index >= 5 && index <= 7) season = Season.SUMMER;
|
||||
else if (index >= 8 && index <= 10) season = Season.FALL;
|
||||
else season = Season.WINTER;
|
||||
|
||||
// Get holidays for this month
|
||||
const holidays = SPANISH_HOLIDAYS
|
||||
.filter(h => h.month === index)
|
||||
.map(h => h.name);
|
||||
|
||||
return {
|
||||
month,
|
||||
value: value * 100, // Convert to percentage
|
||||
strength: strength * 100,
|
||||
color: SEASON_COLORS[season],
|
||||
season,
|
||||
holidays,
|
||||
};
|
||||
});
|
||||
}, [currentPattern]);
|
||||
|
||||
// Process weekly data
|
||||
const weeklyData = useMemo((): WeeklyData[] => {
|
||||
if (!currentPattern) return [];
|
||||
|
||||
return currentPattern.weekly_patterns.map((pattern, index) => ({
|
||||
day: SPANISH_DAYS[index] || `Día ${index + 1}`,
|
||||
dayShort: SPANISH_DAYS_SHORT[index] || `D${index + 1}`,
|
||||
value: pattern.average_multiplier * 100,
|
||||
variance: pattern.variance * 100,
|
||||
peakHours: pattern.peak_hours,
|
||||
}));
|
||||
}, [currentPattern]);
|
||||
|
||||
// Process heatmap data
|
||||
const heatmapData = useMemo((): HeatmapData[] => {
|
||||
if (!currentPattern) return [];
|
||||
|
||||
const data: HeatmapData[] = [];
|
||||
const monthlyComponent = currentPattern.seasonal_components.find(
|
||||
c => c.period === SeasonalPeriod.MONTHLY
|
||||
);
|
||||
|
||||
if (monthlyComponent) {
|
||||
for (let month = 0; month < 12; month++) {
|
||||
for (let week = 0; week < 4; week++) {
|
||||
const value = monthlyComponent.pattern[month] || 0;
|
||||
const intensity = Math.min(Math.max(Math.abs(value) * 8, 0), 7); // 0-7 scale
|
||||
|
||||
const holiday = SPANISH_HOLIDAYS.find(h => h.month === month);
|
||||
|
||||
data.push({
|
||||
month,
|
||||
week,
|
||||
intensity: Math.floor(intensity),
|
||||
value: value * 100,
|
||||
holiday: holiday?.name,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}, [currentPattern]);
|
||||
|
||||
// Custom tooltip for radial chart
|
||||
const RadialTooltip = ({ active, payload }: any) => {
|
||||
if (!active || !payload || !payload.length) return null;
|
||||
|
||||
const data = payload[0].payload as MonthlyData;
|
||||
|
||||
return (
|
||||
<div className="bg-card-bg border border-border-primary rounded-lg shadow-lg p-3 max-w-sm">
|
||||
<h4 className="font-semibold text-text-primary mb-2">{data.month}</h4>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-secondary text-sm">Estación:</span>
|
||||
<Badge variant="ghost" size="sm" style={{ color: data.color }}>
|
||||
{SPANISH_SEASONS[data.season]}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-secondary text-sm">Variación:</span>
|
||||
<span className="font-medium">{data.value.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-secondary text-sm">Intensidad:</span>
|
||||
<span className="font-medium">{data.strength.toFixed(1)}%</span>
|
||||
</div>
|
||||
{data.holidays.length > 0 && (
|
||||
<div className="mt-2 pt-2 border-t border-border-secondary">
|
||||
<div className="text-text-secondary text-sm mb-1">Festividades:</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{data.holidays.map(holiday => (
|
||||
<Badge key={holiday} variant="outlined" size="sm">
|
||||
{holiday}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Circular view (Radial chart)
|
||||
const renderCircularView = () => (
|
||||
<div style={{ width: '100%', height: 400 }}>
|
||||
<ResponsiveContainer>
|
||||
<RadialBarChart
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius="60%"
|
||||
outerRadius="90%"
|
||||
data={monthlyData}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
>
|
||||
<RadialBar
|
||||
dataKey="strength"
|
||||
cornerRadius={4}
|
||||
fill={(entry) => entry.color}
|
||||
/>
|
||||
<Tooltip content={<RadialTooltip />} />
|
||||
</RadialBarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Calendar view (Bar chart by month)
|
||||
const renderCalendarView = () => (
|
||||
<div style={{ width: '100%', height: 400 }}>
|
||||
<ResponsiveContainer>
|
||||
<ComposedChart data={monthlyData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
tick={{ fontSize: 12 }}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={80}
|
||||
/>
|
||||
<YAxis tick={{ fontSize: 12 }} />
|
||||
<Tooltip
|
||||
content={({ active, payload, label }) => {
|
||||
if (!active || !payload || !payload.length) return null;
|
||||
const data = payload[0].payload as MonthlyData;
|
||||
return <RadialTooltip active={true} payload={[{ payload: data }]} />;
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="value"
|
||||
fill={(entry, index) => monthlyData[index]?.color || '#8884d8'}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="strength"
|
||||
stroke="#ff7300"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
<ReferenceLine y={0} stroke="#666" strokeDasharray="2 2" />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Heatmap view
|
||||
const renderHeatmapView = () => (
|
||||
<div className="grid grid-cols-12 gap-1 p-4">
|
||||
{/* Month labels */}
|
||||
<div className="col-span-12 grid grid-cols-12 gap-1 mb-2">
|
||||
{SPANISH_MONTHS.map(month => (
|
||||
<div key={month} className="text-xs text-center text-text-tertiary font-medium">
|
||||
{month.slice(0, 3)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Heatmap grid */}
|
||||
{[0, 1, 2, 3].map(week => (
|
||||
<div key={week} className="col-span-12 grid grid-cols-12 gap-1">
|
||||
{heatmapData
|
||||
.filter(d => d.week === week)
|
||||
.map((cell, monthIndex) => (
|
||||
<div
|
||||
key={`${cell.month}-${cell.week}`}
|
||||
className="aspect-square rounded cursor-pointer transition-all duration-200 hover:scale-110 flex items-center justify-center"
|
||||
style={{
|
||||
backgroundColor: INTENSITY_COLORS[cell.intensity],
|
||||
border: hoveredElement?.month === cell.month && hoveredElement?.week === cell.week
|
||||
? '2px solid #3b82f6' : '1px solid #e5e7eb'
|
||||
}}
|
||||
onMouseEnter={() => setHoveredElement(cell)}
|
||||
onMouseLeave={() => setHoveredElement(null)}
|
||||
title={`${SPANISH_MONTHS[cell.month]} S${cell.week + 1}: ${cell.value.toFixed(1)}%`}
|
||||
>
|
||||
{cell.holiday && (
|
||||
<div className="text-xs">🎉</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Legend */}
|
||||
<div className="col-span-12 flex items-center justify-center gap-4 mt-4">
|
||||
<span className="text-sm text-text-secondary">Baja</span>
|
||||
<div className="flex gap-1">
|
||||
{INTENSITY_COLORS.map((color, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-4 h-4 rounded"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-text-secondary">Alta</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Trends view (Weekly patterns)
|
||||
const renderTrendsView = () => (
|
||||
<div style={{ width: '100%', height: 400 }}>
|
||||
<ResponsiveContainer>
|
||||
<BarChart data={weeklyData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="dayShort" tick={{ fontSize: 12 }} />
|
||||
<YAxis tick={{ fontSize: 12 }} />
|
||||
<Tooltip
|
||||
content={({ active, payload, label }) => {
|
||||
if (!active || !payload || !payload.length) return null;
|
||||
const data = payload[0].payload as WeeklyData;
|
||||
return (
|
||||
<div className="bg-card-bg border border-border-primary rounded-lg shadow-lg p-3">
|
||||
<h4 className="font-semibold text-text-primary mb-2">{data.day}</h4>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>Multiplicador Promedio:</span>
|
||||
<span className="font-medium">{data.value.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Varianza:</span>
|
||||
<span className="font-medium">{data.variance.toFixed(1)}%</span>
|
||||
</div>
|
||||
{data.peakHours && data.peakHours.length > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span>Horas Pico:</span>
|
||||
<span className="font-medium">
|
||||
{data.peakHours.map(h => `${h}:00`).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="value" fill="#8884d8" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -469,161 +139,24 @@ const SeasonalityIndicator: React.FC<SeasonalityIndicatorProps> = ({
|
||||
);
|
||||
}
|
||||
|
||||
// Empty state
|
||||
if (!currentPattern) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="text-text-tertiary mb-2">
|
||||
<svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4m-6 4v10a2 2 0 002 2h4a2 2 0 002-2V11m-6 0a2 2 0 012-2h4a2 2 0 012 2m-6 0h8" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-text-secondary">No hay datos de estacionalidad disponibles</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Placeholder view - no complex seasonality data available yet
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
||||
{currentPattern && (
|
||||
<Badge variant="ghost">
|
||||
{currentPattern.product_name}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge
|
||||
variant="success"
|
||||
size="sm"
|
||||
title="Nivel de confianza del patrón estacional"
|
||||
>
|
||||
{(currentPattern.confidence_score * 100).toFixed(0)}% confianza
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Product selector */}
|
||||
{onProductChange && seasonalPatterns.length > 1 && (
|
||||
<Select
|
||||
value={selectedProduct || seasonalPatterns[0]?.product_name || ''}
|
||||
onChange={(value) => onProductChange(value)}
|
||||
className="w-40"
|
||||
>
|
||||
{seasonalPatterns.map(pattern => (
|
||||
<option key={pattern.product_name} value={pattern.product_name}>
|
||||
{pattern.product_name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{/* View mode selector */}
|
||||
<div className="flex bg-bg-secondary rounded-lg p-1 gap-1">
|
||||
{(['circular', 'calendar', 'heatmap', 'trends'] as const).map((mode) => (
|
||||
<Button
|
||||
key={mode}
|
||||
variant={viewMode === mode ? 'filled' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => onViewModeChange?.(mode)}
|
||||
title={
|
||||
mode === 'circular' ? 'Vista Circular' :
|
||||
mode === 'calendar' ? 'Vista Calendario' :
|
||||
mode === 'heatmap' ? 'Mapa de Calor' :
|
||||
'Vista Tendencias'
|
||||
}
|
||||
>
|
||||
{mode === 'circular' && '🔄'}
|
||||
{mode === 'calendar' && '📅'}
|
||||
{mode === 'heatmap' && '🔥'}
|
||||
{mode === 'trends' && '📊'}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
||||
</CardHeader>
|
||||
|
||||
<CardBody>
|
||||
<div className="space-y-4">
|
||||
{/* Main visualization */}
|
||||
<div className="min-h-[400px]">
|
||||
{viewMode === 'circular' && renderCircularView()}
|
||||
{viewMode === 'calendar' && renderCalendarView()}
|
||||
{viewMode === 'heatmap' && renderHeatmapView()}
|
||||
{viewMode === 'trends' && renderTrendsView()}
|
||||
</div>
|
||||
|
||||
{/* Holiday effects summary */}
|
||||
{currentPattern.holiday_effects && currentPattern.holiday_effects.length > 0 && (
|
||||
<div className="border-t border-border-primary pt-4">
|
||||
<h4 className="font-medium text-text-primary mb-3">Efectos de Festividades</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{currentPattern.holiday_effects.map((holiday, index) => (
|
||||
<div key={index} className="bg-bg-secondary rounded-lg p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="font-medium text-text-primary text-sm">
|
||||
{holiday.holiday_name}
|
||||
</span>
|
||||
<Badge
|
||||
variant={holiday.impact_factor > 1.2 ? 'success' : holiday.impact_factor < 0.8 ? 'danger' : 'warning'}
|
||||
size="sm"
|
||||
>
|
||||
{((holiday.impact_factor - 1) * 100).toFixed(0)}%
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-xs text-text-secondary space-y-1">
|
||||
<div>Duración: {holiday.duration_days} días</div>
|
||||
<div>Confianza: {(holiday.confidence * 100).toFixed(0)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pattern strength indicators */}
|
||||
<div className="border-t border-border-primary pt-4">
|
||||
<h4 className="font-medium text-text-primary mb-3">Intensidad de Patrones</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{currentPattern.seasonal_components.map((component, index) => {
|
||||
const periodLabel = {
|
||||
[SeasonalPeriod.WEEKLY]: 'Semanal',
|
||||
[SeasonalPeriod.MONTHLY]: 'Mensual',
|
||||
[SeasonalPeriod.QUARTERLY]: 'Trimestral',
|
||||
[SeasonalPeriod.YEARLY]: 'Anual',
|
||||
}[component.period] || component.period;
|
||||
|
||||
return (
|
||||
<div key={index} className="bg-bg-secondary rounded-lg p-3">
|
||||
<div className="text-sm font-medium text-text-primary mb-1">
|
||||
{periodLabel}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 bg-bg-tertiary rounded-full h-2">
|
||||
<div
|
||||
className="bg-color-primary h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${Math.min(component.strength * 100, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-text-secondary">
|
||||
{(component.strength * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="text-text-tertiary mb-4">
|
||||
<svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4m-6 4v10a2 2 0 002 2h4a2 2 0 002-2V11m-6 0a2 2 0 012-2h4a2 2 0 012 2m-6 0h8" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-text-secondary mb-2">Análisis de patrones estacionales</p>
|
||||
<p className="text-text-tertiary text-sm">
|
||||
Los datos de estacionalidad estarán disponibles próximamente
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
|
||||
@@ -1,28 +1,68 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings } from 'lucide-react';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings, Loader } from 'lucide-react';
|
||||
import { Button, Card, Badge, Select, Table } from '../../../../components/ui';
|
||||
import type { TableColumn } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { DemandChart, ForecastTable, SeasonalityIndicator, AlertsPanel } from '../../../../components/domain/forecasting';
|
||||
import { useTenantForecasts, useForecastStatistics } from '../../../../api/hooks/forecasting';
|
||||
import { useIngredients } from '../../../../api/hooks/inventory';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { ForecastResponse } from '../../../../api/types/forecasting';
|
||||
|
||||
const ForecastingPage: React.FC = () => {
|
||||
const [selectedProduct, setSelectedProduct] = useState('all');
|
||||
const [forecastPeriod, setForecastPeriod] = useState('7');
|
||||
const [viewMode, setViewMode] = useState<'chart' | 'table'>('chart');
|
||||
|
||||
const forecastData = {
|
||||
accuracy: 92,
|
||||
totalDemand: 1247,
|
||||
growthTrend: 8.5,
|
||||
seasonalityFactor: 1.15,
|
||||
};
|
||||
// Get tenant ID from auth user
|
||||
const user = useAuthUser();
|
||||
const tenantId = user?.tenant_id || '';
|
||||
|
||||
const products = [
|
||||
{ id: 'all', name: 'Todos los productos' },
|
||||
{ id: 'bread', name: 'Panes' },
|
||||
{ id: 'pastry', name: 'Bollería' },
|
||||
{ id: 'cake', name: 'Tartas' },
|
||||
];
|
||||
// Calculate date range based on selected period
|
||||
const endDate = new Date();
|
||||
const startDate = new Date();
|
||||
startDate.setDate(startDate.getDate() - parseInt(forecastPeriod));
|
||||
|
||||
// API hooks
|
||||
const {
|
||||
data: forecastsData,
|
||||
isLoading: forecastsLoading,
|
||||
error: forecastsError
|
||||
} = useTenantForecasts(tenantId, {
|
||||
start_date: startDate.toISOString().split('T')[0],
|
||||
end_date: endDate.toISOString().split('T')[0],
|
||||
...(selectedProduct !== 'all' && { inventory_product_id: selectedProduct }),
|
||||
limit: 100
|
||||
});
|
||||
|
||||
const {
|
||||
data: statisticsData,
|
||||
isLoading: statisticsLoading,
|
||||
error: statisticsError
|
||||
} = useForecastStatistics(tenantId);
|
||||
|
||||
// Fetch real inventory data
|
||||
const {
|
||||
data: ingredientsData,
|
||||
isLoading: ingredientsLoading,
|
||||
error: ingredientsError
|
||||
} = useIngredients(tenantId);
|
||||
|
||||
// Build products list from real inventory data
|
||||
const products = useMemo(() => {
|
||||
const productList = [{ id: 'all', name: 'Todos los productos' }];
|
||||
|
||||
if (ingredientsData && ingredientsData.length > 0) {
|
||||
const inventoryProducts = ingredientsData.map(ingredient => ({
|
||||
id: ingredient.id,
|
||||
name: ingredient.name,
|
||||
category: ingredient.category,
|
||||
}));
|
||||
productList.push(...inventoryProducts);
|
||||
}
|
||||
|
||||
return productList;
|
||||
}, [ingredientsData]);
|
||||
|
||||
const periods = [
|
||||
{ value: '7', label: '7 días' },
|
||||
@@ -31,78 +71,51 @@ const ForecastingPage: React.FC = () => {
|
||||
{ value: '90', label: '3 meses' },
|
||||
];
|
||||
|
||||
const mockForecasts = [
|
||||
{
|
||||
id: '1',
|
||||
product: 'Pan de Molde Integral',
|
||||
currentStock: 25,
|
||||
forecastDemand: 45,
|
||||
recommendedProduction: 50,
|
||||
confidence: 95,
|
||||
trend: 'up',
|
||||
stockoutRisk: 'low',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
product: 'Croissants de Mantequilla',
|
||||
currentStock: 18,
|
||||
forecastDemand: 32,
|
||||
recommendedProduction: 35,
|
||||
confidence: 88,
|
||||
trend: 'stable',
|
||||
stockoutRisk: 'medium',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
product: 'Baguettes Francesas',
|
||||
currentStock: 12,
|
||||
forecastDemand: 28,
|
||||
recommendedProduction: 30,
|
||||
confidence: 91,
|
||||
trend: 'down',
|
||||
stockoutRisk: 'high',
|
||||
},
|
||||
];
|
||||
|
||||
const alerts = [
|
||||
{
|
||||
id: '1',
|
||||
type: 'stockout',
|
||||
product: 'Baguettes Francesas',
|
||||
message: 'Alto riesgo de agotamiento en las próximas 24h',
|
||||
severity: 'high',
|
||||
recommendation: 'Incrementar producción en 15 unidades',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'overstock',
|
||||
product: 'Magdalenas',
|
||||
message: 'Probable exceso de stock para mañana',
|
||||
severity: 'medium',
|
||||
recommendation: 'Reducir producción en 20%',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'weather',
|
||||
product: 'Todos',
|
||||
message: 'Lluvia prevista - incremento esperado en demanda de bollería',
|
||||
severity: 'info',
|
||||
recommendation: 'Aumentar producción de productos de interior en 10%',
|
||||
},
|
||||
];
|
||||
|
||||
const weatherImpact = {
|
||||
today: 'sunny',
|
||||
temperature: 22,
|
||||
demandFactor: 0.95,
|
||||
affectedCategories: ['helados', 'bebidas frías'],
|
||||
// Transform forecast data for table display
|
||||
const transformForecastsForTable = (forecasts: ForecastResponse[]) => {
|
||||
return forecasts.map(forecast => ({
|
||||
id: forecast.id,
|
||||
product: forecast.inventory_product_id, // Will need to map to product name
|
||||
currentStock: 'N/A', // Not available in forecast data
|
||||
forecastDemand: forecast.predicted_demand,
|
||||
recommendedProduction: Math.ceil(forecast.predicted_demand * 1.1), // Simple calculation
|
||||
confidence: Math.round(forecast.confidence_level * 100),
|
||||
trend: forecast.predicted_demand > 0 ? 'up' : 'stable',
|
||||
stockoutRisk: forecast.confidence_level > 0.8 ? 'low' : forecast.confidence_level > 0.6 ? 'medium' : 'high',
|
||||
}));
|
||||
};
|
||||
|
||||
const seasonalInsights = [
|
||||
{ period: 'Mañana', factor: 1.2, products: ['Pan', 'Bollería'] },
|
||||
{ period: 'Tarde', factor: 0.8, products: ['Tartas', 'Dulces'] },
|
||||
{ period: 'Fin de semana', factor: 1.4, products: ['Tartas especiales'] },
|
||||
];
|
||||
// Generate alerts based on forecast data
|
||||
const generateAlertsFromForecasts = (forecasts: ForecastResponse[]) => {
|
||||
return forecasts
|
||||
.filter(forecast => forecast.confidence_level < 0.7 || forecast.predicted_demand > 50)
|
||||
.slice(0, 3) // Limit to 3 alerts
|
||||
.map((forecast, index) => ({
|
||||
id: (index + 1).toString(),
|
||||
type: forecast.confidence_level < 0.7 ? 'low-confidence' : 'high-demand',
|
||||
product: forecast.inventory_product_id,
|
||||
message: forecast.confidence_level < 0.7
|
||||
? `Baja confianza en predicción (${Math.round(forecast.confidence_level * 100)}%)`
|
||||
: `Alta demanda prevista: ${forecast.predicted_demand} unidades`,
|
||||
severity: forecast.confidence_level < 0.5 ? 'high' : 'medium',
|
||||
recommendation: forecast.confidence_level < 0.7
|
||||
? 'Revisar datos históricos y factores externos'
|
||||
: `Considerar aumentar producción a ${Math.ceil(forecast.predicted_demand * 1.2)} unidades`
|
||||
}));
|
||||
};
|
||||
|
||||
// Extract weather data from first forecast (if available)
|
||||
const getWeatherImpact = (forecasts: ForecastResponse[]) => {
|
||||
const firstForecast = forecasts?.[0];
|
||||
if (!firstForecast) return null;
|
||||
|
||||
return {
|
||||
today: firstForecast.weather_description || 'N/A',
|
||||
temperature: firstForecast.weather_temperature || 0,
|
||||
demandFactor: 1.0, // Could be calculated based on weather
|
||||
affectedCategories: [], // Could be derived from business logic
|
||||
};
|
||||
};
|
||||
|
||||
const getTrendIcon = (trend: string) => {
|
||||
switch (trend) {
|
||||
@@ -177,6 +190,20 @@ const ForecastingPage: React.FC = () => {
|
||||
},
|
||||
];
|
||||
|
||||
// Derived data from API responses
|
||||
const forecasts = forecastsData?.forecasts || [];
|
||||
const transformedForecasts = transformForecastsForTable(forecasts);
|
||||
const alerts = generateAlertsFromForecasts(forecasts);
|
||||
const weatherImpact = getWeatherImpact(forecasts);
|
||||
const isLoading = forecastsLoading || statisticsLoading || ingredientsLoading;
|
||||
const hasError = forecastsError || statisticsError || ingredientsError;
|
||||
|
||||
// Calculate metrics from real data
|
||||
const totalDemand = forecasts.reduce((sum, f) => sum + f.predicted_demand, 0);
|
||||
const averageConfidence = forecasts.length > 0
|
||||
? Math.round((forecasts.reduce((sum, f) => sum + f.confidence_level, 0) / forecasts.length) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
@@ -196,57 +223,87 @@ const ForecastingPage: React.FC = () => {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Precisión del Modelo</p>
|
||||
<p className="text-3xl font-bold text-[var(--color-success)]">{forecastData.accuracy}%</p>
|
||||
</div>
|
||||
<div className="h-12 w-12 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
|
||||
<BarChart3 className="h-6 w-6 text-[var(--color-success)]" />
|
||||
</div>
|
||||
</div>
|
||||
{isLoading && (
|
||||
<Card className="p-6 flex items-center justify-center">
|
||||
<Loader className="h-6 w-6 animate-spin mr-2" />
|
||||
<span>Cargando predicciones...</span>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Demanda Prevista</p>
|
||||
<p className="text-3xl font-bold text-[var(--color-info)]">{forecastData.totalDemand}</p>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">próximos {forecastPeriod} días</p>
|
||||
</div>
|
||||
<Calendar className="h-12 w-12 text-[var(--color-info)]" />
|
||||
{hasError && (
|
||||
<Card className="p-6 bg-red-50 border-red-200">
|
||||
<div className="flex items-center">
|
||||
<AlertTriangle className="h-5 w-5 text-red-600 mr-2" />
|
||||
<span className="text-red-800">Error al cargar las predicciones. Por favor, inténtalo de nuevo.</span>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Tendencia</p>
|
||||
<p className="text-3xl font-bold text-purple-600">+{forecastData.growthTrend}%</p>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">vs período anterior</p>
|
||||
</div>
|
||||
<TrendingUp className="h-12 w-12 text-purple-600" />
|
||||
</div>
|
||||
</Card>
|
||||
{!isLoading && !hasError && (
|
||||
<>
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Precisión del Modelo</p>
|
||||
<p className="text-3xl font-bold text-[var(--color-success)]">
|
||||
{statisticsData?.accuracy_metrics?.average_accuracy
|
||||
? Math.round(statisticsData.accuracy_metrics.average_accuracy * 100)
|
||||
: averageConfidence}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-12 w-12 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
|
||||
<BarChart3 className="h-6 w-6 text-[var(--color-success)]" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Factor Estacional</p>
|
||||
<p className="text-3xl font-bold text-[var(--color-primary)]">{forecastData.seasonalityFactor}x</p>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">multiplicador actual</p>
|
||||
</div>
|
||||
<div className="h-12 w-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
|
||||
<svg className="h-6 w-6 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" />
|
||||
</svg>
|
||||
</div>
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Demanda Prevista</p>
|
||||
<p className="text-3xl font-bold text-[var(--color-info)]">{Math.round(totalDemand)}</p>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">próximos {forecastPeriod} días</p>
|
||||
</div>
|
||||
<Calendar className="h-12 w-12 text-[var(--color-info)]" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Tendencia</p>
|
||||
<p className="text-3xl font-bold text-purple-600">
|
||||
+{statisticsData?.accuracy_metrics?.accuracy_trend
|
||||
? Math.round(statisticsData.accuracy_metrics.accuracy_trend * 100)
|
||||
: 5}%
|
||||
</p>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">vs período anterior</p>
|
||||
</div>
|
||||
<TrendingUp className="h-12 w-12 text-purple-600" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Total Predicciones</p>
|
||||
<p className="text-3xl font-bold text-[var(--color-primary)]">
|
||||
{statisticsData?.total_forecasts || forecasts.length}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">generadas</p>
|
||||
</div>
|
||||
<div className="h-12 w-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
|
||||
<svg className="h-6 w-6 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
<Card className="p-6">
|
||||
@@ -308,7 +365,7 @@ const ForecastingPage: React.FC = () => {
|
||||
period={forecastPeriod}
|
||||
/>
|
||||
) : (
|
||||
<ForecastTable forecasts={mockForecasts} />
|
||||
<ForecastTable forecasts={transformedForecasts} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -317,67 +374,92 @@ const ForecastingPage: React.FC = () => {
|
||||
<AlertsPanel alerts={alerts} />
|
||||
|
||||
{/* Weather Impact */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Impacto Meteorológico</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Hoy:</span>
|
||||
<div className="flex items-center">
|
||||
<span className="text-sm font-medium">{weatherImpact.temperature}°C</span>
|
||||
<div className="ml-2 w-6 h-6 bg-yellow-400 rounded-full"></div>
|
||||
{weatherImpact && (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Impacto Meteorológico</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Hoy:</span>
|
||||
<div className="flex items-center">
|
||||
<span className="text-sm font-medium">{weatherImpact.temperature}°C</span>
|
||||
<div className="ml-2 w-6 h-6 bg-yellow-400 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Factor de demanda:</span>
|
||||
<span className="text-sm font-medium text-[var(--color-info)]">{weatherImpact.demandFactor}x</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<p className="text-xs text-[var(--text-tertiary)] mb-2">Categorías afectadas:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{weatherImpact.affectedCategories.map((category, index) => (
|
||||
<Badge key={index} variant="blue">{category}</Badge>
|
||||
))}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Condiciones:</span>
|
||||
<span className="text-sm font-medium text-[var(--color-info)]">{weatherImpact.today}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Seasonal Insights */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Patrones Estacionales</h3>
|
||||
<div className="space-y-3">
|
||||
{seasonalInsights.map((insight, index) => (
|
||||
<div key={index} className="p-3 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Factor de demanda:</span>
|
||||
<span className="text-sm font-medium text-[var(--color-info)]">{weatherImpact.demandFactor}x</span>
|
||||
</div>
|
||||
|
||||
{weatherImpact.affectedCategories.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<p className="text-xs text-[var(--text-tertiary)] mb-2">Categorías afectadas:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{weatherImpact.affectedCategories.map((category, index) => (
|
||||
<Badge key={index} variant="blue">{category}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Model Performance */}
|
||||
{statisticsData?.model_performance && (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Rendimiento del Modelo</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">{insight.period}</span>
|
||||
<span className="text-sm text-purple-600 font-medium">{insight.factor}x</span>
|
||||
<span className="text-sm font-medium">Algoritmo principal</span>
|
||||
<Badge variant="purple">{statisticsData.model_performance.most_used_algorithm}</Badge>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{insight.products.map((product, idx) => (
|
||||
<Badge key={idx} variant="purple">{product}</Badge>
|
||||
))}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-[var(--text-tertiary)]">Tiempo de procesamiento promedio</span>
|
||||
<span className="text-xs text-[var(--text-secondary)]">
|
||||
{Math.round(statisticsData.model_performance.average_processing_time)}ms
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detailed Forecasts Table */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Predicciones Detalladas</h3>
|
||||
<Table
|
||||
columns={forecastColumns}
|
||||
data={mockForecasts}
|
||||
rowKey="id"
|
||||
hover={true}
|
||||
variant="default"
|
||||
size="md"
|
||||
/>
|
||||
</Card>
|
||||
{!isLoading && !hasError && transformedForecasts.length > 0 && (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Predicciones Detalladas</h3>
|
||||
<Table
|
||||
columns={forecastColumns}
|
||||
data={transformedForecasts}
|
||||
rowKey="id"
|
||||
hover={true}
|
||||
variant="default"
|
||||
size="md"
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!isLoading && !hasError && transformedForecasts.length === 0 && (
|
||||
<Card className="p-6 text-center">
|
||||
<div className="py-8">
|
||||
<BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-600 mb-2">No hay predicciones disponibles</h3>
|
||||
<p className="text-gray-500">
|
||||
No se encontraron predicciones para el período seleccionado.
|
||||
Prueba ajustando los filtros o genera nuevas predicciones.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,7 +3,11 @@ import { Store, MapPin, Clock, Phone, Mail, Globe, Save, X, Edit3, Zap, Plus, Se
|
||||
import { Button, Card, Input, Select, Modal, Badge } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import { posService, POSConfiguration } from '../../../../api/services/pos.service';
|
||||
import { usePOSConfigurationData, usePOSConfigurationManager } from '../../../../api/hooks/pos';
|
||||
import { POSConfiguration, POSProviderConfig } from '../../../../api/types/pos';
|
||||
import { posService } from '../../../../api/services/pos';
|
||||
import { useTenant, useUpdateTenant } from '../../../../api/hooks/tenant';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
|
||||
interface BakeryConfig {
|
||||
// General Info
|
||||
@@ -32,33 +36,25 @@ interface BusinessHours {
|
||||
};
|
||||
}
|
||||
|
||||
interface POSProviderConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
logo: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
required_fields: {
|
||||
field: string;
|
||||
label: string;
|
||||
type: 'text' | 'password' | 'url' | 'select';
|
||||
placeholder?: string;
|
||||
required: boolean;
|
||||
help_text?: string;
|
||||
options?: { value: string; label: string }[];
|
||||
}[];
|
||||
}
|
||||
|
||||
const BakeryConfigPage: React.FC = () => {
|
||||
const { addToast } = useToast();
|
||||
const user = useAuthUser();
|
||||
const tenantId = user?.tenant_id || '';
|
||||
|
||||
const { data: tenant, isLoading: tenantLoading, error: tenantError } = useTenant(tenantId, { enabled: !!tenantId });
|
||||
|
||||
const updateTenantMutation = useUpdateTenant();
|
||||
|
||||
// POS Configuration hooks
|
||||
const posData = usePOSConfigurationData(tenantId);
|
||||
const posManager = usePOSConfigurationManager(tenantId);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'location' | 'business' | 'hours' | 'pos'>('general');
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// POS Configuration State
|
||||
const [posConfigurations, setPosConfigurations] = useState<POSConfiguration[]>([]);
|
||||
const [posLoading, setPosLoading] = useState(false);
|
||||
const [showAddPosModal, setShowAddPosModal] = useState(false);
|
||||
const [showEditPosModal, setShowEditPosModal] = useState(false);
|
||||
const [selectedPosConfig, setSelectedPosConfig] = useState<POSConfiguration | null>(null);
|
||||
@@ -67,20 +63,41 @@ const BakeryConfigPage: React.FC = () => {
|
||||
const [showCredentials, setShowCredentials] = useState<Record<string, boolean>>({});
|
||||
|
||||
const [config, setConfig] = useState<BakeryConfig>({
|
||||
name: 'Panadería Artesanal San Miguel',
|
||||
description: 'Panadería tradicional con más de 30 años de experiencia',
|
||||
email: 'info@panaderiasanmiguel.com',
|
||||
phone: '+34 912 345 678',
|
||||
website: 'https://panaderiasanmiguel.com',
|
||||
address: 'Calle Mayor 123',
|
||||
city: 'Madrid',
|
||||
postalCode: '28001',
|
||||
country: 'España',
|
||||
taxId: 'B12345678',
|
||||
name: '',
|
||||
description: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
website: '',
|
||||
address: '',
|
||||
city: '',
|
||||
postalCode: '',
|
||||
country: '',
|
||||
taxId: '',
|
||||
currency: 'EUR',
|
||||
timezone: 'Europe/Madrid',
|
||||
language: 'es'
|
||||
});
|
||||
|
||||
// Update config when tenant data is loaded
|
||||
React.useEffect(() => {
|
||||
if (tenant) {
|
||||
setConfig({
|
||||
name: tenant.name || '',
|
||||
description: tenant.description || '',
|
||||
email: tenant.email || '', // Fixed: use email instead of contact_email
|
||||
phone: tenant.phone || '', // Fixed: use phone instead of contact_phone
|
||||
website: tenant.website || '',
|
||||
address: tenant.address || '',
|
||||
city: tenant.city || '',
|
||||
postalCode: tenant.postal_code || '',
|
||||
country: tenant.country || '',
|
||||
taxId: '', // Not supported by backend yet
|
||||
currency: 'EUR', // Default value
|
||||
timezone: 'Europe/Madrid', // Default value
|
||||
language: 'es' // Default value
|
||||
});
|
||||
}
|
||||
}, [tenant]);
|
||||
|
||||
const [businessHours, setBusinessHours] = useState<BusinessHours>({
|
||||
monday: { open: '07:00', close: '20:00', closed: false },
|
||||
@@ -185,27 +202,10 @@ const BakeryConfigPage: React.FC = () => {
|
||||
{ value: 'en', label: 'English' }
|
||||
];
|
||||
|
||||
// Load POS configurations when POS tab is selected
|
||||
useEffect(() => {
|
||||
if (activeTab === 'pos') {
|
||||
loadPosConfigurations();
|
||||
}
|
||||
}, [activeTab]);
|
||||
|
||||
const loadPosConfigurations = async () => {
|
||||
try {
|
||||
setPosLoading(true);
|
||||
const response = await posService.getPOSConfigs();
|
||||
if (response.success) {
|
||||
setPosConfigurations(response.data);
|
||||
} else {
|
||||
addToast('Error al cargar configuraciones POS', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
addToast('Error al conectar con el servidor', 'error');
|
||||
} finally {
|
||||
setPosLoading(false);
|
||||
}
|
||||
// Load POS configurations function for refetching after updates
|
||||
const loadPosConfigurations = () => {
|
||||
// This will trigger a refetch of POS configurations
|
||||
posManager.refetch();
|
||||
};
|
||||
|
||||
const validateConfig = (): boolean => {
|
||||
@@ -234,13 +234,26 @@ const BakeryConfigPage: React.FC = () => {
|
||||
};
|
||||
|
||||
const handleSaveConfig = async () => {
|
||||
if (!validateConfig()) return;
|
||||
if (!validateConfig() || !tenantId) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
await updateTenantMutation.mutateAsync({
|
||||
tenantId,
|
||||
updateData: {
|
||||
name: config.name,
|
||||
description: config.description,
|
||||
email: config.email, // Fixed: use email instead of contact_email
|
||||
phone: config.phone, // Fixed: use phone instead of contact_phone
|
||||
website: config.website,
|
||||
address: config.address,
|
||||
city: config.city,
|
||||
postal_code: config.postalCode,
|
||||
country: config.country
|
||||
// Note: tax_id, currency, timezone, language might not be supported by backend
|
||||
}
|
||||
});
|
||||
|
||||
setIsEditing(false);
|
||||
addToast('Configuración actualizada correctamente', 'success');
|
||||
@@ -317,24 +330,23 @@ const BakeryConfigPage: React.FC = () => {
|
||||
|
||||
if (selectedPosConfig) {
|
||||
// Update existing
|
||||
const response = await posService.updatePOSConfig(selectedPosConfig.id, posFormData);
|
||||
if (response.success) {
|
||||
addToast('Configuración actualizada correctamente', 'success');
|
||||
setShowEditPosModal(false);
|
||||
loadPosConfigurations();
|
||||
} else {
|
||||
addToast('Error al actualizar la configuración', 'error');
|
||||
}
|
||||
await posService.updatePOSConfiguration({
|
||||
tenant_id: tenantId,
|
||||
config_id: selectedPosConfig.id,
|
||||
...posFormData,
|
||||
});
|
||||
addToast('Configuración actualizada correctamente', 'success');
|
||||
setShowEditPosModal(false);
|
||||
loadPosConfigurations();
|
||||
} else {
|
||||
// Create new
|
||||
const response = await posService.createPOSConfig(posFormData);
|
||||
if (response.success) {
|
||||
addToast('Configuración creada correctamente', 'success');
|
||||
setShowAddPosModal(false);
|
||||
loadPosConfigurations();
|
||||
} else {
|
||||
addToast('Error al crear la configuración', 'error');
|
||||
}
|
||||
await posService.createPOSConfiguration({
|
||||
tenant_id: tenantId,
|
||||
...posFormData,
|
||||
});
|
||||
addToast('Configuración creada correctamente', 'success');
|
||||
setShowAddPosModal(false);
|
||||
loadPosConfigurations();
|
||||
}
|
||||
} catch (error) {
|
||||
addToast('Error al guardar la configuración', 'error');
|
||||
@@ -344,12 +356,15 @@ const BakeryConfigPage: React.FC = () => {
|
||||
const handleTestPosConnection = async (configId: string) => {
|
||||
try {
|
||||
setTestingConnection(configId);
|
||||
const response = await posService.testPOSConnection(configId);
|
||||
const response = await posService.testPOSConnection({
|
||||
tenant_id: tenantId,
|
||||
config_id: configId,
|
||||
});
|
||||
|
||||
if (response.success && response.data.success) {
|
||||
if (response.success) {
|
||||
addToast('Conexión exitosa', 'success');
|
||||
} else {
|
||||
addToast(`Error en la conexión: ${response.data.message}`, 'error');
|
||||
addToast(`Error en la conexión: ${response.message || 'Error desconocido'}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
addToast('Error al probar la conexión', 'error');
|
||||
@@ -364,13 +379,12 @@ const BakeryConfigPage: React.FC = () => {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await posService.deletePOSConfig(configId);
|
||||
if (response.success) {
|
||||
addToast('Configuración eliminada correctamente', 'success');
|
||||
loadPosConfigurations();
|
||||
} else {
|
||||
addToast('Error al eliminar la configuración', 'error');
|
||||
}
|
||||
await posService.deletePOSConfiguration({
|
||||
tenant_id: tenantId,
|
||||
config_id: configId,
|
||||
});
|
||||
addToast('Configuración eliminada correctamente', 'success');
|
||||
loadPosConfigurations();
|
||||
} catch (error) {
|
||||
addToast('Error al eliminar la configuración', 'error');
|
||||
}
|
||||
@@ -543,6 +557,37 @@ const BakeryConfigPage: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
if (tenantLoading) {
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
title="Configuración de Panadería"
|
||||
description="Configurando datos básicos y preferencias de tu panadería"
|
||||
/>
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader className="w-8 h-8 animate-spin" />
|
||||
<span className="ml-2">Cargando configuración...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (tenantError) {
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
title="Configuración de Panadería"
|
||||
description="Error al cargar la configuración"
|
||||
/>
|
||||
<Card className="p-6">
|
||||
<div className="text-red-600">
|
||||
Error al cargar la configuración: {tenantError.message}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
@@ -829,11 +874,11 @@ const BakeryConfigPage: React.FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{posLoading ? (
|
||||
{posData.isLoading ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<Loader className="w-8 h-8 animate-spin" />
|
||||
</div>
|
||||
) : posConfigurations.length === 0 ? (
|
||||
) : posData.configurations.length === 0 ? (
|
||||
<Card className="p-8 text-center">
|
||||
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Zap className="w-8 h-8 text-gray-400" />
|
||||
@@ -848,20 +893,20 @@ const BakeryConfigPage: React.FC = () => {
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{posConfigurations.map(config => {
|
||||
const provider = supportedProviders.find(p => p.id === config.provider);
|
||||
{posData.configurations.map(config => {
|
||||
const provider = posData.supportedSystems.find(p => p.id === config.pos_system);
|
||||
return (
|
||||
<Card key={config.id} className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center">
|
||||
<div className="text-2xl mr-3">{provider?.logo || '📊'}</div>
|
||||
<div className="text-2xl mr-3">📊</div>
|
||||
<div>
|
||||
<h3 className="font-medium">{config.config_name}</h3>
|
||||
<p className="text-sm text-gray-500">{provider?.name || config.provider}</p>
|
||||
<h3 className="font-medium">{config.provider_name}</h3>
|
||||
<p className="text-sm text-gray-500">{provider?.name || config.pos_system}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
{config.is_active ? (
|
||||
{config.is_connected ? (
|
||||
<Wifi className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<WifiOff className="w-4 h-4 text-red-500" />
|
||||
|
||||
@@ -2,8 +2,14 @@ import React, { useState } from 'react';
|
||||
import { Settings, Bell, Mail, MessageSquare, Smartphone, Save, RotateCcw } from 'lucide-react';
|
||||
import { Button, Card } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useAuthProfile, useUpdateProfile } from '../../../../api/hooks/auth';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
|
||||
const PreferencesPage: React.FC = () => {
|
||||
const { addToast } = useToast();
|
||||
const { data: profile, isLoading: profileLoading } = useAuthProfile();
|
||||
const updateProfileMutation = useUpdateProfile();
|
||||
|
||||
const [preferences, setPreferences] = useState({
|
||||
notifications: {
|
||||
inventory: {
|
||||
@@ -50,12 +56,31 @@ const PreferencesPage: React.FC = () => {
|
||||
vibrationEnabled: true
|
||||
},
|
||||
channels: {
|
||||
email: 'panaderia@example.com',
|
||||
phone: '+34 600 123 456',
|
||||
email: profile?.email || '',
|
||||
phone: profile?.phone || '',
|
||||
slack: false,
|
||||
webhook: ''
|
||||
}
|
||||
});
|
||||
|
||||
// Update preferences when profile loads
|
||||
React.useEffect(() => {
|
||||
if (profile) {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
global: {
|
||||
...prev.global,
|
||||
language: profile.language || 'es',
|
||||
timezone: profile.timezone || 'Europe/Madrid'
|
||||
},
|
||||
channels: {
|
||||
...prev.channels,
|
||||
email: profile.email || '',
|
||||
phone: profile.phone || ''
|
||||
}
|
||||
}));
|
||||
}
|
||||
}, [profile]);
|
||||
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
|
||||
@@ -149,14 +174,49 @@ const PreferencesPage: React.FC = () => {
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// Handle save logic
|
||||
console.log('Saving preferences:', preferences);
|
||||
setHasChanges(false);
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// Save notification preferences and contact info
|
||||
await updateProfileMutation.mutateAsync({
|
||||
language: preferences.global.language,
|
||||
timezone: preferences.global.timezone,
|
||||
phone: preferences.channels.phone,
|
||||
notification_preferences: preferences.notifications
|
||||
});
|
||||
|
||||
addToast('Preferencias guardadas correctamente', 'success');
|
||||
setHasChanges(false);
|
||||
} catch (error) {
|
||||
addToast('Error al guardar las preferencias', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
// Reset to defaults
|
||||
if (profile) {
|
||||
setPreferences({
|
||||
notifications: {
|
||||
inventory: { app: true, email: false, sms: true, frequency: 'immediate' },
|
||||
sales: { app: true, email: true, sms: false, frequency: 'hourly' },
|
||||
production: { app: true, email: false, sms: true, frequency: 'immediate' },
|
||||
system: { app: true, email: true, sms: false, frequency: 'daily' },
|
||||
marketing: { app: false, email: true, sms: false, frequency: 'weekly' }
|
||||
},
|
||||
global: {
|
||||
doNotDisturb: false,
|
||||
quietHours: { enabled: false, start: '22:00', end: '07:00' },
|
||||
language: profile.language || 'es',
|
||||
timezone: profile.timezone || 'Europe/Madrid',
|
||||
soundEnabled: true,
|
||||
vibrationEnabled: true
|
||||
},
|
||||
channels: {
|
||||
email: profile.email || '',
|
||||
phone: profile.phone || '',
|
||||
slack: false,
|
||||
webhook: ''
|
||||
}
|
||||
});
|
||||
}
|
||||
setHasChanges(false);
|
||||
};
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Button, Card, Avatar, Input, Select } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import { useAuthProfile, useUpdateProfile, useChangePassword } from '../../../../api/hooks/auth';
|
||||
|
||||
interface ProfileFormData {
|
||||
first_name: string;
|
||||
@@ -22,20 +23,38 @@ interface PasswordData {
|
||||
|
||||
const ProfilePage: React.FC = () => {
|
||||
const user = useAuthUser();
|
||||
const { showToast } = useToast();
|
||||
const { addToast } = useToast();
|
||||
|
||||
const { data: profile, isLoading: profileLoading, error: profileError } = useAuthProfile();
|
||||
const updateProfileMutation = useUpdateProfile();
|
||||
const changePasswordMutation = useChangePassword();
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [showPasswordForm, setShowPasswordForm] = useState(false);
|
||||
|
||||
const [profileData, setProfileData] = useState<ProfileFormData>({
|
||||
first_name: 'María',
|
||||
last_name: 'González Pérez',
|
||||
email: 'admin@bakery.com',
|
||||
phone: '+34 612 345 678',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
language: 'es',
|
||||
timezone: 'Europe/Madrid'
|
||||
});
|
||||
|
||||
// Update profile data when profile is loaded
|
||||
React.useEffect(() => {
|
||||
if (profile) {
|
||||
setProfileData({
|
||||
first_name: profile.first_name || '',
|
||||
last_name: profile.last_name || '',
|
||||
email: profile.email || '',
|
||||
phone: profile.phone || '',
|
||||
language: profile.language || 'es',
|
||||
timezone: profile.timezone || 'Europe/Madrid'
|
||||
});
|
||||
}
|
||||
}, [profile]);
|
||||
|
||||
const [passwordData, setPasswordData] = useState<PasswordData>({
|
||||
currentPassword: '',
|
||||
@@ -105,48 +124,34 @@ const ProfilePage: React.FC = () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
await updateProfileMutation.mutateAsync(profileData);
|
||||
|
||||
setIsEditing(false);
|
||||
showToast({
|
||||
type: 'success',
|
||||
title: 'Perfil actualizado',
|
||||
message: 'Tu información ha sido guardada correctamente'
|
||||
});
|
||||
addToast('Perfil actualizado correctamente', 'success');
|
||||
} catch (error) {
|
||||
showToast({
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
message: 'No se pudo actualizar tu perfil'
|
||||
});
|
||||
addToast('No se pudo actualizar tu perfil', 'error');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePassword = async () => {
|
||||
const handleChangePasswordSubmit = async () => {
|
||||
if (!validatePassword()) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
await changePasswordMutation.mutateAsync({
|
||||
current_password: passwordData.currentPassword,
|
||||
new_password: passwordData.newPassword,
|
||||
confirm_password: passwordData.confirmPassword
|
||||
});
|
||||
|
||||
setShowPasswordForm(false);
|
||||
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
||||
showToast({
|
||||
type: 'success',
|
||||
title: 'Contraseña actualizada',
|
||||
message: 'Tu contraseña ha sido cambiada correctamente'
|
||||
});
|
||||
addToast('Contraseña actualizada correctamente', 'success');
|
||||
} catch (error) {
|
||||
showToast({
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
message: 'No se pudo cambiar tu contraseña'
|
||||
});
|
||||
addToast('No se pudo cambiar tu contraseña', 'error');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@@ -182,7 +187,7 @@ const ProfilePage: React.FC = () => {
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="relative">
|
||||
<Avatar
|
||||
src="https://images.unsplash.com/photo-1494790108755-2616b612b372?w=150&h=150&fit=crop&crop=face"
|
||||
src={profile?.avatar_url}
|
||||
name={`${profileData.first_name} ${profileData.last_name}`}
|
||||
size="xl"
|
||||
className="w-20 h-20"
|
||||
@@ -362,7 +367,7 @@ const ProfilePage: React.FC = () => {
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleChangePassword}
|
||||
onClick={handleChangePasswordSubmit}
|
||||
isLoading={isLoading}
|
||||
loadingText="Cambiando..."
|
||||
>
|
||||
|
||||
@@ -37,8 +37,7 @@ import {
|
||||
subscriptionService,
|
||||
type UsageSummary,
|
||||
type AvailablePlans
|
||||
} from '../../../../api/services';
|
||||
import { isMockMode, getMockSubscription } from '../../../../config/mock.config';
|
||||
} from '../../../../api';
|
||||
|
||||
interface PlanComparisonProps {
|
||||
plans: AvailablePlans['plans'];
|
||||
@@ -249,7 +248,7 @@ const SubscriptionPage: React.FC = () => {
|
||||
const [upgrading, setUpgrading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentTenant?.id || user?.tenant_id || isMockMode()) {
|
||||
if (currentTenant?.id || user?.tenant_id) {
|
||||
loadSubscriptionData();
|
||||
}
|
||||
}, [currentTenant, user?.tenant_id]);
|
||||
@@ -257,15 +256,10 @@ const SubscriptionPage: React.FC = () => {
|
||||
const loadSubscriptionData = async () => {
|
||||
let tenantId = currentTenant?.id || user?.tenant_id;
|
||||
|
||||
// In mock mode, use the mock tenant ID if no real tenant is available
|
||||
if (isMockMode() && !tenantId) {
|
||||
tenantId = getMockSubscription().tenant_id;
|
||||
console.log('🧪 Mock mode: Using mock tenant ID:', tenantId);
|
||||
if (!tenantId) {
|
||||
toast.error('No se encontró información del tenant');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('📊 Loading subscription data for tenant:', tenantId, '| Mock mode:', isMockMode());
|
||||
|
||||
if (!tenantId) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
@@ -292,12 +286,10 @@ const SubscriptionPage: React.FC = () => {
|
||||
const handleUpgradeConfirm = async () => {
|
||||
let tenantId = currentTenant?.id || user?.tenant_id;
|
||||
|
||||
// In mock mode, use the mock tenant ID if no real tenant is available
|
||||
if (isMockMode() && !tenantId) {
|
||||
tenantId = getMockSubscription().tenant_id;
|
||||
if (!tenantId || !selectedPlan) {
|
||||
toast.error('Información de tenant no disponible');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!tenantId || !selectedPlan) return;
|
||||
|
||||
try {
|
||||
setUpgrading(true);
|
||||
|
||||
@@ -38,7 +38,6 @@ import {
|
||||
type UsageSummary,
|
||||
type AvailablePlans
|
||||
} from '../../../../api/services';
|
||||
import { isMockMode, getMockSubscription } from '../../../../config/mock.config';
|
||||
|
||||
interface PlanComparisonProps {
|
||||
plans: AvailablePlans['plans'];
|
||||
@@ -297,7 +296,7 @@ const SubscriptionPage: React.FC = () => {
|
||||
const [upgrading, setUpgrading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentTenant?.id || tenant_id || isMockMode()) {
|
||||
if (currentTenant?.id || tenant_id) {
|
||||
loadSubscriptionData();
|
||||
}
|
||||
}, [currentTenant, tenant_id]);
|
||||
@@ -305,13 +304,7 @@ const SubscriptionPage: React.FC = () => {
|
||||
const loadSubscriptionData = async () => {
|
||||
let tenantId = currentTenant?.id || tenant_id;
|
||||
|
||||
// In mock mode, use the mock tenant ID if no real tenant is available
|
||||
if (isMockMode() && !tenantId) {
|
||||
tenantId = getMockSubscription().tenant_id;
|
||||
console.log('🧪 Mock mode: Using mock tenant ID:', tenantId);
|
||||
}
|
||||
|
||||
console.log('📊 Loading subscription data for tenant:', tenantId, '| Mock mode:', isMockMode());
|
||||
console.log('📊 Loading subscription data for tenant:', tenantId);
|
||||
|
||||
if (!tenantId) return;
|
||||
|
||||
@@ -340,11 +333,6 @@ const SubscriptionPage: React.FC = () => {
|
||||
const handleUpgradeConfirm = async () => {
|
||||
let tenantId = currentTenant?.id || tenant_id;
|
||||
|
||||
// In mock mode, use the mock tenant ID if no real tenant is available
|
||||
if (isMockMode() && !tenantId) {
|
||||
tenantId = getMockSubscription().tenant_id;
|
||||
}
|
||||
|
||||
if (!tenantId || !selectedPlan) return;
|
||||
|
||||
try {
|
||||
|
||||
@@ -2,131 +2,31 @@ import React, { useState } from 'react';
|
||||
import { Users, Plus, Search, Mail, Phone, Shield, Edit, Trash2, UserCheck, UserX } from 'lucide-react';
|
||||
import { Button, Card, Badge, Input } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useTeamMembers } from '../../../../api/hooks/tenant';
|
||||
import { useAllUsers, useUpdateUser } from '../../../../api/hooks/user';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
|
||||
const TeamPage: React.FC = () => {
|
||||
const { addToast } = useToast();
|
||||
const user = useAuthUser();
|
||||
const tenantId = user?.tenant_id || '';
|
||||
|
||||
const { data: teamMembers = [], isLoading, error } = useTeamMembers(tenantId, true, { enabled: !!tenantId });
|
||||
const { data: allUsers = [] } = useAllUsers();
|
||||
const updateUserMutation = useUpdateUser();
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedRole, setSelectedRole] = useState('all');
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'María González',
|
||||
email: 'maria.gonzalez@panaderia.com',
|
||||
phone: '+34 600 123 456',
|
||||
role: 'manager',
|
||||
department: 'Administración',
|
||||
status: 'active',
|
||||
joinDate: '2022-03-15',
|
||||
lastLogin: '2024-01-26 09:30:00',
|
||||
permissions: ['inventory', 'sales', 'reports', 'team'],
|
||||
avatar: '/avatars/maria.jpg',
|
||||
schedule: {
|
||||
monday: '07:00-15:00',
|
||||
tuesday: '07:00-15:00',
|
||||
wednesday: '07:00-15:00',
|
||||
thursday: '07:00-15:00',
|
||||
friday: '07:00-15:00',
|
||||
saturday: 'Libre',
|
||||
sunday: 'Libre'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Carlos Rodríguez',
|
||||
email: 'carlos.rodriguez@panaderia.com',
|
||||
phone: '+34 600 234 567',
|
||||
role: 'baker',
|
||||
department: 'Producción',
|
||||
status: 'active',
|
||||
joinDate: '2021-09-20',
|
||||
lastLogin: '2024-01-26 08:45:00',
|
||||
permissions: ['production', 'inventory'],
|
||||
avatar: '/avatars/carlos.jpg',
|
||||
schedule: {
|
||||
monday: '05:00-13:00',
|
||||
tuesday: '05:00-13:00',
|
||||
wednesday: '05:00-13:00',
|
||||
thursday: '05:00-13:00',
|
||||
friday: '05:00-13:00',
|
||||
saturday: '05:00-11:00',
|
||||
sunday: 'Libre'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Ana Martínez',
|
||||
email: 'ana.martinez@panaderia.com',
|
||||
phone: '+34 600 345 678',
|
||||
role: 'cashier',
|
||||
department: 'Ventas',
|
||||
status: 'active',
|
||||
joinDate: '2023-01-10',
|
||||
lastLogin: '2024-01-26 10:15:00',
|
||||
permissions: ['sales', 'pos'],
|
||||
avatar: '/avatars/ana.jpg',
|
||||
schedule: {
|
||||
monday: '08:00-16:00',
|
||||
tuesday: '08:00-16:00',
|
||||
wednesday: 'Libre',
|
||||
thursday: '08:00-16:00',
|
||||
friday: '08:00-16:00',
|
||||
saturday: '09:00-14:00',
|
||||
sunday: '09:00-14:00'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Luis Fernández',
|
||||
email: 'luis.fernandez@panaderia.com',
|
||||
phone: '+34 600 456 789',
|
||||
role: 'baker',
|
||||
department: 'Producción',
|
||||
status: 'inactive',
|
||||
joinDate: '2020-11-05',
|
||||
lastLogin: '2024-01-20 16:30:00',
|
||||
permissions: ['production'],
|
||||
avatar: '/avatars/luis.jpg',
|
||||
schedule: {
|
||||
monday: '13:00-21:00',
|
||||
tuesday: '13:00-21:00',
|
||||
wednesday: '13:00-21:00',
|
||||
thursday: 'Libre',
|
||||
friday: '13:00-21:00',
|
||||
saturday: 'Libre',
|
||||
sunday: '13:00-21:00'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Isabel Torres',
|
||||
email: 'isabel.torres@panaderia.com',
|
||||
phone: '+34 600 567 890',
|
||||
role: 'assistant',
|
||||
department: 'Ventas',
|
||||
status: 'active',
|
||||
joinDate: '2023-06-01',
|
||||
lastLogin: '2024-01-25 18:20:00',
|
||||
permissions: ['sales'],
|
||||
avatar: '/avatars/isabel.jpg',
|
||||
schedule: {
|
||||
monday: 'Libre',
|
||||
tuesday: '16:00-20:00',
|
||||
wednesday: '16:00-20:00',
|
||||
thursday: '16:00-20:00',
|
||||
friday: '16:00-20:00',
|
||||
saturday: '14:00-20:00',
|
||||
sunday: '14:00-20:00'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const roles = [
|
||||
{ value: 'all', label: 'Todos los Roles', count: teamMembers.length },
|
||||
{ value: 'owner', label: 'Propietario', count: teamMembers.filter(m => m.role === 'owner').length },
|
||||
{ value: 'admin', label: 'Administrador', count: teamMembers.filter(m => m.role === 'admin').length },
|
||||
{ value: 'manager', label: 'Gerente', count: teamMembers.filter(m => m.role === 'manager').length },
|
||||
{ value: 'baker', label: 'Panadero', count: teamMembers.filter(m => m.role === 'baker').length },
|
||||
{ value: 'cashier', label: 'Cajero', count: teamMembers.filter(m => m.role === 'cashier').length },
|
||||
{ value: 'assistant', label: 'Asistente', count: teamMembers.filter(m => m.role === 'assistant').length }
|
||||
{ value: 'employee', label: 'Empleado', count: teamMembers.filter(m => m.role === 'employee').length }
|
||||
];
|
||||
|
||||
const teamStats = {
|
||||
@@ -165,10 +65,28 @@ const TeamPage: React.FC = () => {
|
||||
|
||||
const filteredMembers = teamMembers.filter(member => {
|
||||
const matchesRole = selectedRole === 'all' || member.role === selectedRole;
|
||||
const matchesSearch = member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
member.email.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesSearch = member.user.first_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
member.user.last_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
member.user.email.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
return matchesRole && matchesSearch;
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
title="Gestión de Equipo"
|
||||
description="Administra los miembros del equipo, roles y permisos"
|
||||
/>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||
<p>Cargando miembros del equipo...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const formatLastLogin = (timestamp: string) => {
|
||||
const date = new Date(timestamp);
|
||||
@@ -293,7 +211,7 @@ const TeamPage: React.FC = () => {
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">{member.name}</h3>
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">{member.user.first_name} {member.user.last_name}</h3>
|
||||
<Badge variant={getStatusColor(member.status)}>
|
||||
{member.status === 'active' ? 'Activo' : 'Inactivo'}
|
||||
</Badge>
|
||||
@@ -302,11 +220,11 @@ const TeamPage: React.FC = () => {
|
||||
<div className="space-y-1 mb-3">
|
||||
<div className="flex items-center text-sm text-[var(--text-secondary)]">
|
||||
<Mail className="w-4 h-4 mr-2" />
|
||||
{member.email}
|
||||
{member.user.email}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-[var(--text-secondary)]">
|
||||
<Phone className="w-4 h-4 mr-2" />
|
||||
{member.phone}
|
||||
{member.user.phone || 'No disponible'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -320,35 +238,24 @@ const TeamPage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-[var(--text-tertiary)] mb-3">
|
||||
<p>Se unió: {new Date(member.joinDate).toLocaleDateString('es-ES')}</p>
|
||||
<p>Última conexión: {formatLastLogin(member.lastLogin)}</p>
|
||||
<p>Se unió: {new Date(member.joined_at).toLocaleDateString('es-ES')}</p>
|
||||
<p>Estado: {member.is_active ? 'Activo' : 'Inactivo'}</p>
|
||||
</div>
|
||||
|
||||
{/* Permissions */}
|
||||
<div className="mb-3">
|
||||
<p className="text-xs font-medium text-[var(--text-secondary)] mb-2">Permisos:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{member.permissions.map((permission, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 bg-[var(--color-info)]/10 text-[var(--color-info)] text-xs rounded-full"
|
||||
>
|
||||
{permission}
|
||||
</span>
|
||||
))}
|
||||
<span className="px-2 py-1 bg-[var(--color-info)]/10 text-[var(--color-info)] text-xs rounded-full">
|
||||
{getRoleLabel(member.role)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Schedule Preview */}
|
||||
{/* Member Info */}
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
<p className="font-medium mb-1">Horario esta semana:</p>
|
||||
<div className="grid grid-cols-2 gap-1">
|
||||
{Object.entries(member.schedule).slice(0, 4).map(([day, hours]) => (
|
||||
<span key={day}>
|
||||
{day.charAt(0).toUpperCase()}: {hours}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="font-medium mb-1">Información adicional:</p>
|
||||
<p>ID: {member.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user