feat: Implement Incident Management and Tab Dashboard
This commit is contained in:
Tola Leng
@@ -0,0 +1,13 @@
|
||||
|
||||
import React from 'react';
|
||||
import { IncidentManagementContainer } from './incident-management';
|
||||
|
||||
interface IncidentManagementTabProps {
|
||||
refreshTrigger?: number;
|
||||
}
|
||||
|
||||
export const IncidentManagementTab = React.memo(({ refreshTrigger = 0 }: IncidentManagementTabProps) => {
|
||||
return <IncidentManagementContainer refreshTrigger={refreshTrigger} />;
|
||||
});
|
||||
|
||||
IncidentManagementTab.displayName = 'IncidentManagementTab';
|
||||
@@ -0,0 +1,126 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, CalendarClock, AlertCircle } from "lucide-react";
|
||||
import { useLanguage } from "@/contexts/LanguageContext";
|
||||
import { ScheduledMaintenanceTab } from "./ScheduledMaintenanceTab";
|
||||
import { IncidentManagementTab } from "./IncidentManagementTab";
|
||||
import { CreateMaintenanceDialog } from './maintenance/CreateMaintenanceDialog';
|
||||
import { CreateIncidentDialog } from './incident/CreateIncidentDialog';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { initMaintenanceNotifications, stopMaintenanceNotifications } from '@/services/maintenance/maintenanceNotificationService';
|
||||
|
||||
export const ScheduleIncidentContent = () => {
|
||||
const { t } = useLanguage();
|
||||
const { toast } = useToast();
|
||||
const [activeTab, setActiveTab] = useState("maintenance");
|
||||
const [createMaintenanceDialogOpen, setCreateMaintenanceDialogOpen] = useState(false);
|
||||
const [createIncidentDialogOpen, setCreateIncidentDialogOpen] = useState(false);
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||||
const [incidentRefreshTrigger, setIncidentRefreshTrigger] = useState(0);
|
||||
|
||||
// Initialize maintenance notifications when the component mounts
|
||||
useEffect(() => {
|
||||
console.log("Initializing maintenance notifications");
|
||||
initMaintenanceNotifications();
|
||||
|
||||
// Clean up when the component unmounts
|
||||
return () => {
|
||||
console.log("Cleaning up maintenance notifications");
|
||||
stopMaintenanceNotifications();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleCreateButtonClick = () => {
|
||||
if (activeTab === "maintenance") {
|
||||
setCreateMaintenanceDialogOpen(true);
|
||||
} else {
|
||||
setCreateIncidentDialogOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMaintenanceCreated = () => {
|
||||
// Refresh data by incrementing the refresh trigger
|
||||
const newTriggerValue = refreshTrigger + 1;
|
||||
console.log("Maintenance created, refreshing data with new trigger value:", newTriggerValue);
|
||||
setRefreshTrigger(newTriggerValue);
|
||||
|
||||
// Show success toast
|
||||
toast({
|
||||
title: t('success'),
|
||||
description: t('maintenanceCreatedSuccess'),
|
||||
});
|
||||
};
|
||||
|
||||
const handleIncidentCreated = () => {
|
||||
// Refresh data by incrementing the refresh trigger
|
||||
const newTriggerValue = incidentRefreshTrigger + 1;
|
||||
console.log("Incident created, refreshing data with new trigger value:", newTriggerValue);
|
||||
setIncidentRefreshTrigger(newTriggerValue);
|
||||
|
||||
// Show success toast
|
||||
toast({
|
||||
title: t('success'),
|
||||
description: t('incidentCreatedSuccess'),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="flex-1 flex flex-col overflow-auto bg-background p-6">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold text-foreground">
|
||||
{t('scheduleIncidentManagement')}
|
||||
</h2>
|
||||
<Button
|
||||
className="text-primary-foreground"
|
||||
onClick={handleCreateButtonClick}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
{activeTab === "maintenance" ? t('createMaintenanceWindow') : t('createIncident')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
defaultValue="maintenance"
|
||||
className="w-full"
|
||||
onValueChange={(value) => setActiveTab(value)}
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-2 mb-4">
|
||||
<TabsTrigger value="maintenance">
|
||||
<CalendarClock className="w-4 h-4 mr-2" />
|
||||
{t('scheduledMaintenance')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="incidents">
|
||||
<AlertCircle className="w-4 h-4 mr-2" />
|
||||
{t('incidentManagement')}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="maintenance" className="space-y-4">
|
||||
<ScheduledMaintenanceTab refreshTrigger={refreshTrigger} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="incidents" className="space-y-4">
|
||||
<IncidentManagementTab refreshTrigger={incidentRefreshTrigger} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* Maintenance creation dialog */}
|
||||
<CreateMaintenanceDialog
|
||||
open={createMaintenanceDialogOpen}
|
||||
onOpenChange={setCreateMaintenanceDialogOpen}
|
||||
onMaintenanceCreated={handleMaintenanceCreated}
|
||||
/>
|
||||
|
||||
{/* Incident creation dialog */}
|
||||
<CreateIncidentDialog
|
||||
open={createIncidentDialogOpen}
|
||||
onOpenChange={setCreateIncidentDialogOpen}
|
||||
onIncidentCreated={handleIncidentCreated}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,160 @@
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
import { MaintenanceTable, MaintenanceStatusChecker } from './maintenance';
|
||||
import { EmptyMaintenanceState } from './maintenance/EmptyMaintenanceState';
|
||||
import { OverviewCard } from './common/OverviewCard';
|
||||
import { Calendar, Clock, CheckCircle } from 'lucide-react';
|
||||
import { useMaintenanceData } from './hooks/useMaintenanceData';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { LoadingState } from '@/components/services/LoadingState';
|
||||
|
||||
interface ScheduledMaintenanceTabProps {
|
||||
refreshTrigger?: number;
|
||||
}
|
||||
|
||||
export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMaintenanceTabProps) => {
|
||||
const { t } = useLanguage();
|
||||
const { toast } = useToast();
|
||||
const [manualRefresh, setManualRefresh] = React.useState(0);
|
||||
|
||||
// Combine the external refresh trigger with our internal one
|
||||
const combinedRefreshTrigger = refreshTrigger + manualRefresh;
|
||||
|
||||
const {
|
||||
loading,
|
||||
filter,
|
||||
setFilter,
|
||||
maintenanceData,
|
||||
overviewStats,
|
||||
fetchMaintenanceData,
|
||||
isEmpty,
|
||||
error,
|
||||
initialized
|
||||
} = useMaintenanceData({ refreshTrigger: combinedRefreshTrigger });
|
||||
|
||||
// Display toast when error occurs
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: error,
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
}, [error, toast, t]);
|
||||
|
||||
// Force fetch data on initial load
|
||||
useEffect(() => {
|
||||
console.log("ScheduledMaintenanceTab is mounted, fetching data");
|
||||
fetchMaintenanceData(true);
|
||||
}, [fetchMaintenanceData]);
|
||||
|
||||
// Handle maintenance updates
|
||||
const handleMaintenanceUpdated = () => {
|
||||
console.log("Maintenance updated, refreshing data");
|
||||
setManualRefresh(prev => prev + 1);
|
||||
};
|
||||
|
||||
// Handle tab changes
|
||||
const handleTabChange = (value: string) => {
|
||||
setFilter(value);
|
||||
};
|
||||
|
||||
// Show full-page loading state during initial load
|
||||
if (loading && !initialized) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Status checker for automatic updates */}
|
||||
<MaintenanceStatusChecker
|
||||
maintenanceData={maintenanceData}
|
||||
onStatusUpdated={handleMaintenanceUpdated}
|
||||
/>
|
||||
|
||||
{/* Overview Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<OverviewCard
|
||||
title={t('upcomingMaintenance')}
|
||||
value={loading ? '...' : overviewStats.upcoming}
|
||||
icon={<Calendar className="h-5 w-5 text-white" />}
|
||||
isLoading={loading}
|
||||
color="blue"
|
||||
/>
|
||||
<OverviewCard
|
||||
title={t('ongoingMaintenance')}
|
||||
value={loading ? '...' : overviewStats.ongoing}
|
||||
icon={<Clock className="h-5 w-5 text-white" />}
|
||||
isLoading={loading}
|
||||
color="amber"
|
||||
/>
|
||||
<OverviewCard
|
||||
title={t('completedMaintenance')}
|
||||
value={loading ? '...' : overviewStats.completed}
|
||||
icon={<CheckCircle className="h-5 w-5 text-white" />}
|
||||
isLoading={loading}
|
||||
color="green"
|
||||
/>
|
||||
<OverviewCard
|
||||
title={t('totalScheduledHours')}
|
||||
value={loading ? '...' : `${overviewStats.totalDuration}h`}
|
||||
icon={<Clock className="h-5 w-5 text-white" />}
|
||||
isLoading={loading}
|
||||
color="purple"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('scheduledMaintenance')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t('scheduledMaintenanceDesc')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs
|
||||
defaultValue="upcoming"
|
||||
value={filter}
|
||||
className="w-full"
|
||||
onValueChange={handleTabChange}
|
||||
>
|
||||
<TabsList className="mb-6">
|
||||
<TabsTrigger value="upcoming">{t('upcomingMaintenance')}</TabsTrigger>
|
||||
<TabsTrigger value="ongoing">{t('ongoingMaintenance')}</TabsTrigger>
|
||||
<TabsTrigger value="completed">{t('completedMaintenance')}</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="upcoming" className="space-y-4">
|
||||
<MaintenanceTable
|
||||
data={maintenanceData}
|
||||
isLoading={loading && initialized}
|
||||
onMaintenanceUpdated={handleMaintenanceUpdated}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="ongoing" className="space-y-4">
|
||||
<MaintenanceTable
|
||||
data={maintenanceData}
|
||||
isLoading={loading && initialized}
|
||||
onMaintenanceUpdated={handleMaintenanceUpdated}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="completed" className="space-y-4">
|
||||
<MaintenanceTable
|
||||
data={maintenanceData}
|
||||
isLoading={loading && initialized}
|
||||
onMaintenanceUpdated={handleMaintenanceUpdated}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,112 @@
|
||||
|
||||
import React, { ReactNode } from 'react';
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
|
||||
interface OverviewCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
description?: string;
|
||||
icon: ReactNode;
|
||||
trend?: {
|
||||
value: number;
|
||||
isPositive: boolean;
|
||||
};
|
||||
className?: string;
|
||||
valueClassName?: string;
|
||||
isLoading?: boolean;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export const OverviewCard = ({
|
||||
title,
|
||||
value,
|
||||
description,
|
||||
icon,
|
||||
trend,
|
||||
className,
|
||||
valueClassName,
|
||||
isLoading = false,
|
||||
color = "blue",
|
||||
}: OverviewCardProps) => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
// Map color prop to gradient colors
|
||||
const getGradientBackground = () => {
|
||||
const colors = {
|
||||
blue: theme === 'dark'
|
||||
? "linear-gradient(135deg, rgba(25, 118, 210, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)"
|
||||
: "linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)",
|
||||
green: theme === 'dark'
|
||||
? "linear-gradient(135deg, rgba(67, 160, 71, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)"
|
||||
: "linear-gradient(135deg, #43a047 0%, #66bb6a 100%)",
|
||||
amber: theme === 'dark'
|
||||
? "linear-gradient(135deg, rgba(255, 152, 0, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
|
||||
: "linear-gradient(135deg, #ff9800 0%, #ffb74d 100%)",
|
||||
red: theme === 'dark'
|
||||
? "linear-gradient(135deg, rgba(229, 57, 53, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
|
||||
: "linear-gradient(135deg, #e53935 0%, #ef5350 100%)",
|
||||
purple: theme === 'dark'
|
||||
? "linear-gradient(135deg, rgba(123, 31, 162, 0.8) 0%, rgba(156, 39, 176, 0.6) 100%)"
|
||||
: "linear-gradient(135deg, #7b1fa2 0%, #9c27b0 100%)",
|
||||
orange: theme === 'dark'
|
||||
? "linear-gradient(135deg, rgba(230, 81, 0, 0.8) 0%, rgba(255, 109, 0, 0.6) 100%)"
|
||||
: "linear-gradient(135deg, #e65100 0%, #ff6d00 100%)",
|
||||
};
|
||||
|
||||
return colors[color as keyof typeof colors] || colors.blue;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
background: getGradientBackground()
|
||||
}}
|
||||
>
|
||||
{/* Grid Pattern Overlay */}
|
||||
<div className="absolute inset-0 z-0 opacity-10">
|
||||
<div className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(#fff 1px, transparent 1px),
|
||||
linear-gradient(90deg, #fff 1px, transparent 1px)`,
|
||||
backgroundSize: '20px 20px'
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-6 relative z-10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white/90 mb-1">{title}</p>
|
||||
{isLoading ? (
|
||||
<Skeleton className="h-8 w-16 bg-white/20" />
|
||||
) : (
|
||||
<h3 className={cn("text-3xl font-bold text-white", valueClassName)}>{value}</h3>
|
||||
)}
|
||||
{description && (
|
||||
<p className="text-sm text-white/80 mt-1">{description}</p>
|
||||
)}
|
||||
{trend && (
|
||||
<div className={`flex items-center mt-2 text-sm ${trend.isPositive ? 'text-green-100' : 'text-red-100'}`}>
|
||||
<span className="mr-1">
|
||||
{trend.isPositive ? '↑' : '↓'}
|
||||
</span>
|
||||
<span>{Math.abs(trend.value)}%</span>
|
||||
<span className="ml-1 text-white/70">vs last month</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
|
||||
export * from './useMaintenanceData';
|
||||
export * from './useIncidentData';
|
||||
@@ -0,0 +1,200 @@
|
||||
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import { incidentService, IncidentItem } from '@/services/incident';
|
||||
|
||||
interface UseIncidentDataProps {
|
||||
refreshTrigger?: number;
|
||||
}
|
||||
|
||||
export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) => {
|
||||
const [incidents, setIncidents] = useState<IncidentItem[]>([]);
|
||||
const [filter, setFilter] = useState("unresolved");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
// Use a ref to prevent multiple simultaneous fetch requests
|
||||
const isFetchingRef = useRef(false);
|
||||
// Use a ref to track the refresh trigger
|
||||
const lastRefreshTriggerRef = useRef(refreshTrigger);
|
||||
|
||||
// Simplified fetch function with improved controls to prevent duplicate calls
|
||||
const fetchIncidentData = useCallback(async (force = false) => {
|
||||
// Skip if already fetching
|
||||
if (isFetchingRef.current) {
|
||||
console.log('Already fetching data, skipping additional request');
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip if not forced and already initialized
|
||||
if (initialized && !force) {
|
||||
console.log('Data already initialized and no force refresh, skipping fetch');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set fetching flags
|
||||
isFetchingRef.current = true;
|
||||
|
||||
if (!initialized || force) {
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
if (force) {
|
||||
setIsRefreshing(true);
|
||||
}
|
||||
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
console.log(`Fetching incident data (force=${force})`);
|
||||
const allIncidents = await incidentService.getAllIncidents(force);
|
||||
|
||||
if (Array.isArray(allIncidents)) {
|
||||
setIncidents(allIncidents);
|
||||
console.log(`Successfully set ${allIncidents.length} incidents to state`);
|
||||
} else {
|
||||
setIncidents([]);
|
||||
console.warn('No incidents returned from service');
|
||||
}
|
||||
|
||||
setInitialized(true);
|
||||
setLoading(false);
|
||||
setIsRefreshing(false);
|
||||
} catch (error) {
|
||||
console.error('Error fetching incident data:', error);
|
||||
setError('Failed to load incident data. Please try again later.');
|
||||
setIncidents([]);
|
||||
setInitialized(true);
|
||||
setLoading(false);
|
||||
setIsRefreshing(false);
|
||||
} finally {
|
||||
// Reset fetching flag after a slight delay to prevent rapid consecutive calls
|
||||
setTimeout(() => {
|
||||
isFetchingRef.current = false;
|
||||
}, 500);
|
||||
}
|
||||
}, [initialized]);
|
||||
|
||||
// Only fetch when component mounts or refreshTrigger changes
|
||||
useEffect(() => {
|
||||
// Skip if the refresh trigger hasn't changed (prevents duplicate effect calls)
|
||||
if (refreshTrigger === lastRefreshTriggerRef.current && initialized) {
|
||||
console.log('Refresh trigger unchanged, skipping fetch');
|
||||
return;
|
||||
}
|
||||
|
||||
// Update last refresh trigger ref
|
||||
lastRefreshTriggerRef.current = refreshTrigger;
|
||||
|
||||
// Create an abort controller for cleanup
|
||||
const abortController = new AbortController();
|
||||
let isMounted = true;
|
||||
|
||||
console.log(`useIncidentData effect running, refreshTrigger: ${refreshTrigger}`);
|
||||
|
||||
// Use a longer delay to ensure we don't trigger too many API calls
|
||||
const fetchTimer = setTimeout(() => {
|
||||
if (isMounted) {
|
||||
fetchIncidentData(refreshTrigger > 0);
|
||||
}
|
||||
}, 500); // Use a longer delay
|
||||
|
||||
// Cleanup function to abort any in-flight requests and clear timers
|
||||
return () => {
|
||||
console.log('Cleaning up incident data fetch effect');
|
||||
isMounted = false;
|
||||
clearTimeout(fetchTimer);
|
||||
abortController.abort();
|
||||
};
|
||||
}, [fetchIncidentData, refreshTrigger, initialized]);
|
||||
|
||||
// Filter the data based on the current filter
|
||||
const incidentData = useMemo(() => {
|
||||
if (!initialized || incidents.length === 0) return [];
|
||||
|
||||
console.log(`Filtering incidents by: ${filter}`);
|
||||
|
||||
if (filter === "unresolved") {
|
||||
return incidents.filter(item => {
|
||||
const status = (item.status || item.impact_status || '').toLowerCase();
|
||||
return status !== 'resolved';
|
||||
});
|
||||
} else if (filter === "resolved") {
|
||||
return incidents.filter(item => {
|
||||
const status = (item.status || item.impact_status || '').toLowerCase();
|
||||
return status === 'resolved';
|
||||
});
|
||||
}
|
||||
|
||||
return [];
|
||||
}, [filter, incidents, initialized]);
|
||||
|
||||
// Calculate stats for overview cards
|
||||
const overviewStats = useMemo(() => {
|
||||
if (!initialized || incidents.length === 0) {
|
||||
return {
|
||||
unresolved: 0,
|
||||
resolved: 0,
|
||||
critical: 0,
|
||||
highPriority: 0,
|
||||
avgResolutionTime: "0h"
|
||||
};
|
||||
}
|
||||
|
||||
const unresolvedIncidents = incidents.filter(item => {
|
||||
const status = (item.status || item.impact_status || '').toLowerCase();
|
||||
return status !== 'resolved';
|
||||
});
|
||||
|
||||
const resolvedIncidents = incidents.filter(item => {
|
||||
const status = (item.status || item.impact_status || '').toLowerCase();
|
||||
return status === 'resolved';
|
||||
});
|
||||
|
||||
const criticalCount = unresolvedIncidents.filter(item =>
|
||||
(item.priority?.toLowerCase() === 'critical') ||
|
||||
(item.impact?.toLowerCase() === 'critical')
|
||||
).length;
|
||||
|
||||
const highPriorityCount = unresolvedIncidents.filter(item =>
|
||||
(item.priority?.toLowerCase() === 'high')
|
||||
).length;
|
||||
|
||||
let avgResolutionTime = "0h";
|
||||
if (resolvedIncidents.length > 0) {
|
||||
const totalHours = resolvedIncidents.reduce((total, item) => {
|
||||
if (!item.created || !item.resolution_time) return total;
|
||||
|
||||
const createdAt = new Date(item.created).getTime();
|
||||
const resolvedAt = new Date(item.resolution_time).getTime();
|
||||
const durationHours = (resolvedAt - createdAt) / (1000 * 60 * 60);
|
||||
return isNaN(durationHours) ? total : total + durationHours;
|
||||
}, 0);
|
||||
|
||||
avgResolutionTime = `${(totalHours / resolvedIncidents.length).toFixed(1)}h`;
|
||||
}
|
||||
|
||||
return {
|
||||
unresolved: unresolvedIncidents.length,
|
||||
resolved: resolvedIncidents.length,
|
||||
critical: criticalCount,
|
||||
highPriority: highPriorityCount,
|
||||
avgResolutionTime
|
||||
};
|
||||
}, [incidents, initialized]);
|
||||
|
||||
const isEmpty = !incidentData.length && initialized && !loading;
|
||||
|
||||
return {
|
||||
filter,
|
||||
setFilter,
|
||||
incidentData,
|
||||
overviewStats,
|
||||
fetchIncidentData,
|
||||
isEmpty,
|
||||
error,
|
||||
loading,
|
||||
initialized,
|
||||
isRefreshing
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,173 @@
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { maintenanceService, MaintenanceItem } from '@/services/maintenance';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
|
||||
interface UseMaintenanceDataProps {
|
||||
refreshTrigger?: number;
|
||||
}
|
||||
|
||||
export const useMaintenanceData = ({ refreshTrigger = 0 }: UseMaintenanceDataProps) => {
|
||||
const { t } = useLanguage();
|
||||
const { toast } = useToast();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [allMaintenanceData, setAllMaintenanceData] = useState<MaintenanceItem[]>([]);
|
||||
const [filter, setFilter] = useState("upcoming");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
const [lastFetchTime, setLastFetchTime] = useState(0);
|
||||
|
||||
// Memoize categorized data to prevent unnecessary recalculations
|
||||
const categorizedData = useMemo(() => {
|
||||
if (!allMaintenanceData.length) return { upcoming: [], ongoing: [], completed: [] };
|
||||
|
||||
const currentDate = new Date();
|
||||
const upcoming: MaintenanceItem[] = [];
|
||||
const ongoing: MaintenanceItem[] = [];
|
||||
const completed: MaintenanceItem[] = [];
|
||||
|
||||
allMaintenanceData.forEach(item => {
|
||||
const status = item.status?.toLowerCase() || '';
|
||||
const startTime = new Date(item.start_time);
|
||||
const endTime = new Date(item.end_time);
|
||||
|
||||
if (status === 'completed' || status === 'cancelled') {
|
||||
completed.push(item);
|
||||
} else if (status === 'in_progress' ||
|
||||
(status === 'scheduled' && startTime <= currentDate && endTime >= currentDate)) {
|
||||
ongoing.push(item);
|
||||
} else if (status === 'scheduled' && startTime > currentDate) {
|
||||
upcoming.push(item);
|
||||
} else {
|
||||
// Default case: treat as upcoming if we can't determine
|
||||
upcoming.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return { upcoming, ongoing, completed };
|
||||
}, [allMaintenanceData]);
|
||||
|
||||
// Optimized fetch function with improved debouncing
|
||||
const fetchMaintenanceData = useCallback(async (force = false) => {
|
||||
// Prevent excessive fetching with improved debounce logic
|
||||
const now = Date.now();
|
||||
if (!force && now - lastFetchTime < 10000 && lastFetchTime > 0 && initialized) {
|
||||
console.log("Skipping fetch - recently fetched (within 10s)");
|
||||
return;
|
||||
}
|
||||
|
||||
// Only show loading state for initial load, not refreshes
|
||||
if (!initialized) {
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
setError(null);
|
||||
setLastFetchTime(now);
|
||||
|
||||
try {
|
||||
console.log("Fetching maintenance data from service...");
|
||||
const data = await maintenanceService.getMaintenanceRecords();
|
||||
console.log("Fetched maintenance data, count:", data.length);
|
||||
|
||||
// Log a sample of the first item's assigned_users for debugging
|
||||
if (data.length > 0) {
|
||||
console.log("Sample maintenance item assigned_users:", data[0].id, data[0].assigned_users);
|
||||
}
|
||||
|
||||
// Update state with fetched data
|
||||
setAllMaintenanceData(data);
|
||||
setInitialized(true);
|
||||
} catch (error) {
|
||||
console.error('Error fetching maintenance data:', error);
|
||||
setError('Failed to load maintenance data');
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: t('errorFetchingMaintenanceData'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [t, toast, lastFetchTime, initialized]);
|
||||
|
||||
// Initial fetch on mount with proper cleanup
|
||||
useEffect(() => {
|
||||
console.log("useMaintenanceData hook mounted, fetching data");
|
||||
let isMounted = true;
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
await fetchMaintenanceData(true);
|
||||
} catch (err) {
|
||||
console.error("Error in initial fetch:", err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
|
||||
// Set up polling with longer interval (5 minutes instead of 3)
|
||||
const intervalId = setInterval(() => {
|
||||
if (isMounted) fetchMaintenanceData(false);
|
||||
}, 300000); // 5 minutes
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
clearInterval(intervalId);
|
||||
};
|
||||
}, [fetchMaintenanceData]);
|
||||
|
||||
// Handle refresh trigger changes
|
||||
useEffect(() => {
|
||||
if (refreshTrigger > 0) {
|
||||
console.log("Refresh trigger changed, forcing data fetch");
|
||||
fetchMaintenanceData(true);
|
||||
}
|
||||
}, [refreshTrigger, fetchMaintenanceData]);
|
||||
|
||||
// Get filtered data based on current tab
|
||||
const maintenanceData = useMemo(() => {
|
||||
if (!initialized) return [];
|
||||
return categorizedData[filter as keyof typeof categorizedData] || [];
|
||||
}, [filter, categorizedData, initialized]);
|
||||
|
||||
// Calculate overview stats with memoization
|
||||
const overviewStats = useMemo(() => {
|
||||
const { upcoming, ongoing, completed } = categorizedData;
|
||||
|
||||
// Calculate total hours more efficiently
|
||||
const calculateTotalHours = (items: MaintenanceItem[]) => {
|
||||
return items.reduce((total, item) => {
|
||||
try {
|
||||
const start = new Date(item.start_time).getTime();
|
||||
const end = new Date(item.end_time).getTime();
|
||||
const durationHours = (end - start) / (1000 * 60 * 60);
|
||||
return total + (isNaN(durationHours) ? 0 : durationHours);
|
||||
} catch (e) {
|
||||
return total;
|
||||
}
|
||||
}, 0).toFixed(1);
|
||||
};
|
||||
|
||||
return {
|
||||
upcoming: upcoming.length,
|
||||
ongoing: ongoing.length,
|
||||
completed: completed.length,
|
||||
totalDuration: calculateTotalHours([...upcoming, ...ongoing]),
|
||||
};
|
||||
}, [categorizedData]);
|
||||
|
||||
const isEmpty = !loading && maintenanceData.length === 0 && initialized;
|
||||
|
||||
return {
|
||||
loading,
|
||||
filter,
|
||||
setFilter,
|
||||
maintenanceData,
|
||||
overviewStats,
|
||||
fetchMaintenanceData,
|
||||
isEmpty,
|
||||
error,
|
||||
initialized,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
|
||||
interface ErrorStateProps {
|
||||
error: string | null;
|
||||
onRefresh: () => void;
|
||||
isRefreshing: boolean;
|
||||
}
|
||||
|
||||
export const ErrorState: React.FC<ErrorStateProps> = ({
|
||||
error,
|
||||
onRefresh,
|
||||
isRefreshing
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!error) return null;
|
||||
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-muted-foreground mb-4">{error}</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
className="flex items-center gap-2"
|
||||
disabled={isRefreshing}
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
{t('tryAgain')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
|
||||
import React from 'react';
|
||||
import { CardDescription, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
|
||||
interface HeaderActionsProps {
|
||||
onRefresh: () => void;
|
||||
isRefreshing: boolean;
|
||||
}
|
||||
|
||||
export const HeaderActions: React.FC<HeaderActionsProps> = ({ onRefresh, isRefreshing }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>{t('incidentManagement')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t('incidentsManagementDesc')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onRefresh}
|
||||
className="ml-auto"
|
||||
title={t('refreshData')}
|
||||
disabled={isRefreshing}
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
<span className="sr-only">{t('refresh')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { useIncidentData } from '../hooks/useIncidentData';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { OverviewCards } from './OverviewCards';
|
||||
import { HeaderActions } from './HeaderActions';
|
||||
import { TabContent } from './TabContent';
|
||||
import { LoadingState } from '@/components/services/LoadingState';
|
||||
import { IncidentDetailDialog } from '../incident/detail-dialog/IncidentDetailDialog';
|
||||
|
||||
interface IncidentManagementContainerProps {
|
||||
refreshTrigger?: number;
|
||||
}
|
||||
|
||||
export const IncidentManagementContainer: React.FC<IncidentManagementContainerProps> = ({
|
||||
refreshTrigger = 0
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { toast } = useToast();
|
||||
const [selectedIncident, setSelectedIncident] = useState<IncidentItem | null>(null);
|
||||
const [detailDialogOpen, setDetailDialogOpen] = useState(false);
|
||||
const [manualRefresh, setManualRefresh] = useState(0);
|
||||
|
||||
// Use a ref to debounce multiple refresh requests
|
||||
const refreshTimerRef = useRef<number | null>(null);
|
||||
|
||||
// Combine the external refresh trigger with our internal one
|
||||
const combinedRefreshTrigger = refreshTrigger + manualRefresh;
|
||||
|
||||
const {
|
||||
filter,
|
||||
setFilter,
|
||||
incidentData,
|
||||
overviewStats,
|
||||
isEmpty,
|
||||
loading,
|
||||
error,
|
||||
initialized,
|
||||
isRefreshing
|
||||
} = useIncidentData({ refreshTrigger: combinedRefreshTrigger });
|
||||
|
||||
// Handle incident updates with debouncing
|
||||
const handleIncidentUpdated = useCallback(() => {
|
||||
console.log('Incident updated, triggering refresh');
|
||||
|
||||
// Clear any existing timer
|
||||
if (refreshTimerRef.current !== null) {
|
||||
window.clearTimeout(refreshTimerRef.current);
|
||||
}
|
||||
|
||||
// Set a new timer to debounce multiple quick updates
|
||||
refreshTimerRef.current = window.setTimeout(() => {
|
||||
setManualRefresh(prev => prev + 1);
|
||||
refreshTimerRef.current = null;
|
||||
|
||||
toast({
|
||||
title: t('incidentUpdated'),
|
||||
description: t('incidentUpdateSuccess'),
|
||||
});
|
||||
}, 300);
|
||||
|
||||
}, [t, toast]);
|
||||
|
||||
// Handle tab changes
|
||||
const handleTabChange = useCallback((value: string) => {
|
||||
console.log(`Tab changed to: ${value}`);
|
||||
setFilter(value);
|
||||
}, [setFilter]);
|
||||
|
||||
// Handle view incident details
|
||||
const handleViewIncidentDetails = useCallback((incident: IncidentItem) => {
|
||||
setSelectedIncident(incident);
|
||||
setDetailDialogOpen(true);
|
||||
}, []);
|
||||
|
||||
// Handle manual refresh
|
||||
const handleManualRefresh = useCallback(() => {
|
||||
console.log('Manual refresh triggered by user');
|
||||
setManualRefresh(prev => prev + 1);
|
||||
}, []);
|
||||
|
||||
// Handle detail dialog close with refresh
|
||||
const handleDetailDialogClose = useCallback((open: boolean) => {
|
||||
setDetailDialogOpen(open);
|
||||
if (!open) {
|
||||
// When dialog closes, refresh data
|
||||
handleManualRefresh();
|
||||
}
|
||||
}, [handleManualRefresh]);
|
||||
|
||||
// Clean up timer on unmount
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
if (refreshTimerRef.current !== null) {
|
||||
window.clearTimeout(refreshTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Show full-page loading state during initial load
|
||||
if (loading && !initialized) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Overview Cards */}
|
||||
<OverviewCards
|
||||
overviewStats={overviewStats}
|
||||
loading={loading}
|
||||
initialized={initialized}
|
||||
/>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<HeaderActions
|
||||
onRefresh={handleManualRefresh}
|
||||
isRefreshing={isRefreshing}
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs value={filter} className="w-full" onValueChange={handleTabChange}>
|
||||
<TabsList className="mb-6">
|
||||
<TabsTrigger value="unresolved">{t('unresolvedIncidents')}</TabsTrigger>
|
||||
<TabsTrigger value="resolved">{t('resolvedIncidents')}</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="unresolved" className="space-y-4">
|
||||
<TabContent
|
||||
error={error}
|
||||
isEmpty={isEmpty}
|
||||
data={incidentData}
|
||||
loading={loading}
|
||||
initialized={initialized}
|
||||
isRefreshing={isRefreshing}
|
||||
onIncidentUpdated={handleIncidentUpdated}
|
||||
onViewDetails={handleViewIncidentDetails}
|
||||
onRefresh={handleManualRefresh}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="resolved" className="space-y-4">
|
||||
<TabContent
|
||||
error={error}
|
||||
isEmpty={isEmpty}
|
||||
data={incidentData}
|
||||
loading={loading}
|
||||
initialized={initialized}
|
||||
isRefreshing={isRefreshing}
|
||||
onIncidentUpdated={handleIncidentUpdated}
|
||||
onViewDetails={handleViewIncidentDetails}
|
||||
onRefresh={handleManualRefresh}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Incident Detail Dialog */}
|
||||
<IncidentDetailDialog
|
||||
open={detailDialogOpen}
|
||||
onOpenChange={handleDetailDialogClose}
|
||||
incident={selectedIncident}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
|
||||
import React from 'react';
|
||||
import { AlertCircle, CheckCircle, Clock, AlertTriangle, Flag } from 'lucide-react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { OverviewCard } from '../common/OverviewCard';
|
||||
|
||||
interface OverviewStatsProps {
|
||||
unresolved: number;
|
||||
resolved: number;
|
||||
critical: number;
|
||||
highPriority: number;
|
||||
avgResolutionTime: string;
|
||||
}
|
||||
|
||||
interface OverviewCardsProps {
|
||||
overviewStats: OverviewStatsProps;
|
||||
loading: boolean;
|
||||
initialized: boolean;
|
||||
}
|
||||
|
||||
export const OverviewCards: React.FC<OverviewCardsProps> = ({
|
||||
overviewStats,
|
||||
loading,
|
||||
initialized
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
|
||||
<OverviewCard
|
||||
title={t('activeIncidents')}
|
||||
value={overviewStats.unresolved.toString()}
|
||||
icon={<AlertCircle className="h-5 w-5 text-white" />}
|
||||
isLoading={loading && initialized}
|
||||
color="red"
|
||||
/>
|
||||
<OverviewCard
|
||||
title={t('criticalIssues')}
|
||||
value={overviewStats.critical.toString()}
|
||||
icon={<AlertTriangle className="h-5 w-5 text-white" />}
|
||||
isLoading={loading && initialized}
|
||||
color="amber"
|
||||
/>
|
||||
<OverviewCard
|
||||
title={t('highPriority')}
|
||||
value={overviewStats.highPriority.toString()}
|
||||
icon={<Flag className="h-5 w-5 text-white" />}
|
||||
isLoading={loading && initialized}
|
||||
color="orange"
|
||||
/>
|
||||
<OverviewCard
|
||||
title={t('resolvedIncidents')}
|
||||
value={overviewStats.resolved.toString()}
|
||||
icon={<CheckCircle className="h-5 w-5 text-white" />}
|
||||
isLoading={loading && initialized}
|
||||
color="green"
|
||||
/>
|
||||
<OverviewCard
|
||||
title={t('avgResolutionTime')}
|
||||
value={overviewStats.avgResolutionTime}
|
||||
icon={<Clock className="h-5 w-5 text-white" />}
|
||||
isLoading={loading && initialized}
|
||||
color="blue"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
|
||||
import React from 'react';
|
||||
import { IncidentTable } from '../incident/table/IncidentTable';
|
||||
import { EmptyIncidentState } from '../incident/EmptyIncidentState';
|
||||
import { ErrorState } from './ErrorState';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
|
||||
interface TabContentProps {
|
||||
error: string | null;
|
||||
isEmpty: boolean;
|
||||
data: IncidentItem[];
|
||||
loading: boolean;
|
||||
initialized: boolean;
|
||||
isRefreshing: boolean;
|
||||
onIncidentUpdated: () => void;
|
||||
onViewDetails: (incident: IncidentItem) => void;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
export const TabContent: React.FC<TabContentProps> = ({
|
||||
error,
|
||||
isEmpty,
|
||||
data,
|
||||
loading,
|
||||
initialized,
|
||||
isRefreshing,
|
||||
onIncidentUpdated,
|
||||
onViewDetails,
|
||||
onRefresh
|
||||
}) => {
|
||||
if (error) {
|
||||
return <ErrorState error={error} onRefresh={onRefresh} isRefreshing={isRefreshing} />;
|
||||
}
|
||||
|
||||
if (isEmpty) {
|
||||
return <EmptyIncidentState />;
|
||||
}
|
||||
|
||||
return (
|
||||
<IncidentTable
|
||||
data={data}
|
||||
onIncidentUpdated={onIncidentUpdated}
|
||||
onViewDetails={onViewDetails}
|
||||
isLoading={loading && initialized}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
|
||||
export * from './IncidentManagementContainer';
|
||||
export * from './OverviewCards';
|
||||
export * from './TabContent';
|
||||
export * from './ErrorState';
|
||||
export * from './HeaderActions';
|
||||
@@ -0,0 +1,96 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { useIncidentForm } from './hooks/useIncidentForm';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import {
|
||||
IncidentBasicFields,
|
||||
IncidentAffectedFields,
|
||||
IncidentConfigFields,
|
||||
IncidentDetailsFields,
|
||||
} from './form';
|
||||
|
||||
interface CreateIncidentDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onIncidentCreated: () => void;
|
||||
}
|
||||
|
||||
export const CreateIncidentDialog: React.FC<CreateIncidentDialogProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
onIncidentCreated,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { form, onSubmit } = useIncidentForm(
|
||||
onIncidentCreated,
|
||||
() => onOpenChange(false)
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[700px] max-h-[90vh]">
|
||||
<ScrollArea className="h-[80vh]">
|
||||
<div className="px-1 py-2">
|
||||
<DialogHeader className="mb-4">
|
||||
<DialogTitle className="text-xl">{t('createIncident')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('createIncidentDesc')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
<div className="space-y-8 pb-4">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium border-b pb-2">{t('basicInfo')}</h3>
|
||||
<IncidentBasicFields />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium border-b pb-2">{t('affectedSystems')}</h3>
|
||||
<IncidentAffectedFields />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium border-b pb-2">{t('configuration')}</h3>
|
||||
<IncidentConfigFields />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium border-b pb-2">{t('resolutionDetails')}</h3>
|
||||
<IncidentDetailsFields />
|
||||
</div>
|
||||
|
||||
<DialogFooter className="pt-4 mt-4 border-t">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
{form.formState.isSubmitting ? t('creating') : t('create')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { useIncidentEditForm } from './hooks/useIncidentEditForm';
|
||||
import {
|
||||
IncidentBasicFields,
|
||||
IncidentAffectedFields,
|
||||
IncidentConfigFields,
|
||||
IncidentDetailsFields,
|
||||
} from './form';
|
||||
import { IncidentItem } from '@/services/incident/types';
|
||||
|
||||
interface EditIncidentDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
incident: IncidentItem;
|
||||
onIncidentUpdated: () => void;
|
||||
}
|
||||
|
||||
export const EditIncidentDialog: React.FC<EditIncidentDialogProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
incident,
|
||||
onIncidentUpdated,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
const handleClose = () => {
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const { form, onSubmit } = useIncidentEditForm(
|
||||
incident,
|
||||
onIncidentUpdated,
|
||||
handleClose
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[700px] max-h-[90vh]">
|
||||
<ScrollArea className="h-[80vh]">
|
||||
<div className="px-1 py-2">
|
||||
<DialogHeader className="mb-4">
|
||||
<DialogTitle className="text-xl">{t('editIncident')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('editIncidentDesc')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
<div className="space-y-8 pb-4">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium border-b pb-2">{t('basicInfo')}</h3>
|
||||
<IncidentBasicFields />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium border-b pb-2">{t('affectedSystems')}</h3>
|
||||
<IncidentAffectedFields />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium border-b pb-2">{t('configuration')}</h3>
|
||||
<IncidentConfigFields />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium border-b pb-2">{t('resolutionDetails')}</h3>
|
||||
<IncidentDetailsFields />
|
||||
</div>
|
||||
|
||||
<DialogFooter className="pt-4 mt-4 border-t">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
>
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
{form.formState.isSubmitting ? t('updating') : t('update')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
|
||||
export const EmptyIncidentState = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-gray-500">
|
||||
<AlertCircle className="w-12 h-12 mb-4" />
|
||||
<h3 className="text-lg font-medium mb-2">{t('noIncidents')}</h3>
|
||||
<p className="text-sm text-center max-w-md">
|
||||
{t('noServices')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { MoreHorizontal, Eye, Edit, Trash, Check } from 'lucide-react';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { updateIncidentStatus, deleteIncident } from '@/services/incident/incidentOperations';
|
||||
import { IncidentItem } from '@/services/incident/types';
|
||||
|
||||
interface IncidentActionsMenuProps {
|
||||
item: IncidentItem;
|
||||
onIncidentUpdated: () => void;
|
||||
onViewDetails?: (incident: IncidentItem) => void;
|
||||
onEditIncident?: (incident: IncidentItem) => void;
|
||||
}
|
||||
|
||||
export const IncidentActionsMenu = ({
|
||||
item,
|
||||
onIncidentUpdated,
|
||||
onViewDetails,
|
||||
onEditIncident
|
||||
}: IncidentActionsMenuProps) => {
|
||||
const { t } = useLanguage();
|
||||
const { toast } = useToast();
|
||||
|
||||
const handleResolveIncident = async () => {
|
||||
try {
|
||||
await updateIncidentStatus(item.id, 'resolved');
|
||||
toast({
|
||||
title: t('success'),
|
||||
description: t('incidentResolved'),
|
||||
});
|
||||
onIncidentUpdated();
|
||||
} catch (error) {
|
||||
console.error('Error resolving incident:', error);
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: t('errorResolvingIncident'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteIncident = async () => {
|
||||
try {
|
||||
await deleteIncident(item.id);
|
||||
toast({
|
||||
title: t('success'),
|
||||
description: t('incidentDeleted'),
|
||||
});
|
||||
onIncidentUpdated();
|
||||
} catch (error) {
|
||||
console.error('Error deleting incident:', error);
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: t('errorDeletingIncident'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
if (onEditIncident) {
|
||||
onEditIncident(item);
|
||||
} else {
|
||||
console.log(`Edit incident ${item.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">{t('actions')}</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="bg-background">
|
||||
<DropdownMenuLabel>{t('actions')}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{onViewDetails && (
|
||||
<DropdownMenuItem onClick={() => onViewDetails(item)}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
{t('view')}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={handleEditClick}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
{t('edit')}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleResolveIncident}>
|
||||
<Check className="mr-2 h-4 w-4" />
|
||||
{t('resolve')}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={handleDeleteIncident}
|
||||
className="text-red-600 focus:text-red-600"
|
||||
>
|
||||
<Trash className="mr-2 h-4 w-4" />
|
||||
{t('delete')}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
Gauge,
|
||||
Search,
|
||||
Wrench,
|
||||
LucideIcon
|
||||
} from 'lucide-react';
|
||||
|
||||
interface IncidentStatusBadgeProps {
|
||||
status: string;
|
||||
}
|
||||
|
||||
type StatusConfig = {
|
||||
label: string;
|
||||
variant: 'outline' | 'default' | 'secondary' | 'destructive';
|
||||
icon: LucideIcon;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const IncidentStatusBadge = ({ status }: IncidentStatusBadgeProps) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
// Normalize the status string
|
||||
const normalizedStatus = (status || '').toLowerCase();
|
||||
|
||||
// Status configuration map
|
||||
const statusConfigs: Record<string, StatusConfig> = {
|
||||
'investigating': {
|
||||
label: t('investigating'),
|
||||
variant: 'destructive',
|
||||
icon: Search,
|
||||
className: 'bg-red-100 border-red-200 text-red-700 hover:bg-red-100',
|
||||
},
|
||||
'identified': {
|
||||
label: t('identified'),
|
||||
variant: 'secondary',
|
||||
icon: AlertCircle,
|
||||
className: 'bg-amber-100 border-amber-200 text-amber-700 hover:bg-amber-100',
|
||||
},
|
||||
'found_root_cause': {
|
||||
label: t('rootCauseFound'),
|
||||
variant: 'secondary',
|
||||
icon: AlertCircle,
|
||||
className: 'bg-amber-100 border-amber-200 text-amber-700 hover:bg-amber-100',
|
||||
},
|
||||
'completed': {
|
||||
label: t('completed'),
|
||||
variant: 'default',
|
||||
icon: CheckCircle,
|
||||
className: 'bg-green-100 border-green-200 text-green-700 hover:bg-green-100',
|
||||
},
|
||||
'in_progress': {
|
||||
label: t('inProgress'),
|
||||
variant: 'default',
|
||||
icon: Wrench,
|
||||
className: 'bg-blue-100 border-blue-200 text-blue-700 hover:bg-blue-100',
|
||||
},
|
||||
'inprogress': {
|
||||
label: t('inProgress'),
|
||||
variant: 'default',
|
||||
icon: Wrench,
|
||||
className: 'bg-blue-100 border-blue-200 text-blue-700 hover:bg-blue-100',
|
||||
},
|
||||
'monitoring': {
|
||||
label: t('monitoring'),
|
||||
variant: 'outline',
|
||||
icon: Gauge,
|
||||
className: 'bg-purple-100 border-purple-200 text-purple-700 hover:bg-purple-100',
|
||||
},
|
||||
'resolved': {
|
||||
label: t('resolved'),
|
||||
variant: 'default',
|
||||
icon: CheckCircle,
|
||||
className: 'bg-green-100 border-green-200 text-green-700 hover:bg-green-100',
|
||||
}
|
||||
};
|
||||
|
||||
// Find the appropriate config, defaulting to investigating if not found
|
||||
const getStatusConfig = (): StatusConfig => {
|
||||
for (const [key, config] of Object.entries(statusConfigs)) {
|
||||
if (normalizedStatus.includes(key)) {
|
||||
return config;
|
||||
}
|
||||
}
|
||||
return statusConfigs['investigating'];
|
||||
};
|
||||
|
||||
const config = getStatusConfig();
|
||||
const Icon = config.icon;
|
||||
|
||||
return (
|
||||
<Badge
|
||||
variant={config.variant}
|
||||
className={`flex items-center gap-1 ${config.className}`}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
<span>{config.label}</span>
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { AlertCircle, CheckCircle, Gauge, Search, Wrench } from 'lucide-react';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { updateIncidentStatus } from '@/services/incident/incidentOperations';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { IncidentStatusBadge } from './IncidentStatusBadge';
|
||||
|
||||
interface IncidentStatusDropdownProps {
|
||||
status: string;
|
||||
id: string;
|
||||
onStatusUpdated: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export const IncidentStatusDropdown = ({
|
||||
status,
|
||||
id,
|
||||
onStatusUpdated,
|
||||
disabled = false
|
||||
}: IncidentStatusDropdownProps) => {
|
||||
const { t } = useLanguage();
|
||||
const { toast } = useToast();
|
||||
const [localStatus, setLocalStatus] = React.useState(status);
|
||||
|
||||
// Update local status when prop changes
|
||||
React.useEffect(() => {
|
||||
setLocalStatus(status);
|
||||
}, [status]);
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'investigating', label: t('investigating'), icon: <Search className="h-4 w-4 mr-2" /> },
|
||||
{ value: 'identified', label: t('identified'), icon: <AlertCircle className="h-4 w-4 mr-2" /> },
|
||||
{ value: 'found_root_cause', label: t('foundRootCause'), icon: <AlertCircle className="h-4 w-4 mr-2" /> },
|
||||
{ value: 'in_progress', label: t('inProgress'), icon: <Wrench className="h-4 w-4 mr-2" /> },
|
||||
{ value: 'monitoring', label: t('monitoring'), icon: <Gauge className="h-4 w-4 mr-2" /> },
|
||||
{ value: 'resolved', label: t('resolved'), icon: <CheckCircle className="h-4 w-4 mr-2" /> },
|
||||
];
|
||||
|
||||
const handleStatusChange = async (newStatus: string) => {
|
||||
try {
|
||||
// Don't update if the status is the same
|
||||
if (localStatus === newStatus) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Changing incident status from ${localStatus} to ${newStatus}`);
|
||||
|
||||
// Optimistically update the UI immediately
|
||||
setLocalStatus(newStatus);
|
||||
|
||||
// Make the API call in the background
|
||||
await updateIncidentStatus(id, newStatus);
|
||||
|
||||
toast({
|
||||
title: t('statusUpdated'),
|
||||
description: t('incidentStatusUpdated'),
|
||||
});
|
||||
|
||||
// Notify parent components about the status change
|
||||
onStatusUpdated();
|
||||
console.log('Status update complete, UI refresh triggered');
|
||||
} catch (error) {
|
||||
console.error('Error updating incident status:', error);
|
||||
|
||||
// Revert to the original status on error
|
||||
setLocalStatus(status);
|
||||
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: t('failedToUpdateStatus'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger disabled={disabled} className="w-full cursor-pointer">
|
||||
<IncidentStatusBadge status={localStatus} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="bg-background border border-border shadow-md z-50">
|
||||
{statusOptions.map((option) => (
|
||||
<DropdownMenuItem
|
||||
key={option.value}
|
||||
className="flex items-center cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Prevent event from bubbling to table row click
|
||||
handleStatusChange(option.value);
|
||||
}}
|
||||
>
|
||||
{option.icon}
|
||||
{option.label}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
|
||||
// Re-export the refactored IncidentTable component
|
||||
export { IncidentTable } from './table/IncidentTable';
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
|
||||
import React from 'react';
|
||||
import { IncidentItem } from '@/services/incident/types';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { IncidentDetailHeader } from './IncidentDetailHeader';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import {
|
||||
BasicInfoSection,
|
||||
TimelineSection,
|
||||
AffectedSystemsSection,
|
||||
ResolutionSection
|
||||
} from './sections';
|
||||
import { IncidentDetailFooter } from './IncidentDetailFooter';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { userService } from '@/services/userService';
|
||||
|
||||
interface IncidentDetailContentProps {
|
||||
incident: IncidentItem;
|
||||
onClose: () => void;
|
||||
assignedUser: any | null;
|
||||
}
|
||||
|
||||
export const IncidentDetailContent = ({
|
||||
incident,
|
||||
onClose,
|
||||
assignedUser
|
||||
}: IncidentDetailContentProps) => {
|
||||
// Fetch assigned user details if one wasn't provided and there's an assigned_to field
|
||||
const { data: fetchedUser } = useQuery({
|
||||
queryKey: ['user', incident?.assigned_to],
|
||||
queryFn: async () => {
|
||||
if (!incident?.assigned_to) return null;
|
||||
try {
|
||||
return await userService.getUser(incident.assigned_to);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch assigned user:", error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
enabled: !!incident?.assigned_to && !assignedUser,
|
||||
staleTime: 300000 // Cache for 5 minutes
|
||||
});
|
||||
|
||||
// Use the provided assignedUser or the one we fetched
|
||||
const userToDisplay = assignedUser || fetchedUser;
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-[80vh] print:h-auto print:overflow-visible">
|
||||
<div className="px-6 py-6">
|
||||
<div className="print-section header-print">
|
||||
<IncidentDetailHeader incident={incident} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 print-compact-spacing">
|
||||
<div className="print-section">
|
||||
<BasicInfoSection incident={incident} assignedUser={userToDisplay} />
|
||||
</div>
|
||||
<Separator className="print:border-blue-200" />
|
||||
<div className="print-section">
|
||||
<TimelineSection incident={incident} assignedUser={userToDisplay} />
|
||||
</div>
|
||||
<Separator className="print:border-blue-200" />
|
||||
<div className="print-section">
|
||||
<AffectedSystemsSection incident={incident} assignedUser={userToDisplay} />
|
||||
</div>
|
||||
<Separator className="print:border-blue-200" />
|
||||
<div className="print-section">
|
||||
<ResolutionSection incident={incident} assignedUser={userToDisplay} />
|
||||
</div>
|
||||
|
||||
<IncidentDetailFooter onClose={onClose} incident={incident} />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
};
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { IncidentItem } from '@/services/incident/types';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { userService } from '@/services/userService';
|
||||
import { IncidentDetailContent } from './IncidentDetailContent';
|
||||
|
||||
interface IncidentDetailDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
incident: IncidentItem | null;
|
||||
}
|
||||
|
||||
export const IncidentDetailDialog = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
incident
|
||||
}: IncidentDetailDialogProps) => {
|
||||
// Fetch user data for assigned_to field
|
||||
const { data: users = [] } = useQuery({
|
||||
queryKey: ['users'],
|
||||
queryFn: async () => {
|
||||
const usersList = await userService.getUsers();
|
||||
return Array.isArray(usersList) ? usersList : [];
|
||||
},
|
||||
staleTime: 300000, // Cache for 5 minutes
|
||||
enabled: !!incident?.assigned_to && open // Only run query if there's an assigned_to value and dialog is open
|
||||
});
|
||||
|
||||
// Find the assigned user
|
||||
const assignedUser = incident?.assigned_to
|
||||
? users.find(user => user.id === incident.assigned_to)
|
||||
: null;
|
||||
|
||||
if (!incident) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
className="dialog-content sm:max-w-[700px] max-h-[90vh] p-0
|
||||
print:max-w-none print:max-h-none print:overflow-visible
|
||||
print:shadow-none print:m-0 print:p-0 print:border-none
|
||||
print:absolute print:left-0 print:top-0 print:w-full print:h-auto"
|
||||
>
|
||||
<IncidentDetailContent
|
||||
incident={incident}
|
||||
onClose={() => onOpenChange(false)}
|
||||
assignedUser={assignedUser}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
|
||||
import React from 'react';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { CloseButton, DownloadPdfButton, PrintButton } from './components';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
|
||||
interface IncidentDetailFooterProps {
|
||||
onClose: () => void;
|
||||
incident: IncidentItem;
|
||||
}
|
||||
|
||||
export const IncidentDetailFooter: React.FC<IncidentDetailFooterProps> = ({
|
||||
onClose,
|
||||
incident,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="print:hidden">
|
||||
<Separator className="my-6" />
|
||||
<div className="flex justify-between items-center">
|
||||
<CloseButton onClose={onClose} />
|
||||
<div className="flex gap-2">
|
||||
<DownloadPdfButton incident={incident} />
|
||||
<PrintButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
|
||||
import React from 'react';
|
||||
import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { IncidentItem } from '@/services/incident/types';
|
||||
|
||||
interface IncidentDetailHeaderProps {
|
||||
incident: IncidentItem;
|
||||
}
|
||||
|
||||
export const IncidentDetailHeader = ({ incident }: IncidentDetailHeaderProps) => {
|
||||
return (
|
||||
<DialogHeader className="mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<DialogTitle className="text-xl">{incident.title || 'Incident Details'}</DialogTitle>
|
||||
<span className="text-sm text-muted-foreground">#{incident.id}</span>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
);
|
||||
};
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { userService } from '@/services/userService';
|
||||
|
||||
// Import all section components from the new location
|
||||
import {
|
||||
BasicInfoSection,
|
||||
TimelineSection,
|
||||
AffectedSystemsSection,
|
||||
ResolutionSection
|
||||
} from './sections';
|
||||
|
||||
// Re-export all section components for compatibility with existing imports
|
||||
export {
|
||||
BasicInfoSection,
|
||||
TimelineSection,
|
||||
AffectedSystemsSection,
|
||||
ResolutionSection
|
||||
};
|
||||
|
||||
// Legacy component - keeping this for backward compatibility with other imports
|
||||
export const IncidentDetailSections = ({ incident }: { incident: IncidentItem | null }) => {
|
||||
// Fetch assigned user details if there's an assigned_to field
|
||||
const { data: assignedUser } = useQuery({
|
||||
queryKey: ['user', incident?.assigned_to],
|
||||
queryFn: async () => {
|
||||
if (!incident?.assigned_to) return null;
|
||||
try {
|
||||
return await userService.getUser(incident.assigned_to);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch assigned user:", error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
enabled: !!incident?.assigned_to,
|
||||
staleTime: 300000 // Cache for 5 minutes
|
||||
});
|
||||
|
||||
if (!incident) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<BasicInfoSection incident={incident} assignedUser={assignedUser} />
|
||||
<Separator />
|
||||
<TimelineSection incident={incident} assignedUser={assignedUser} />
|
||||
<Separator />
|
||||
<AffectedSystemsSection incident={incident} assignedUser={assignedUser} />
|
||||
<Separator />
|
||||
<ResolutionSection incident={incident} assignedUser={assignedUser} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
|
||||
interface CloseButtonProps {
|
||||
onClose: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const CloseButton: React.FC<CloseButtonProps> = ({
|
||||
onClose,
|
||||
className
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onClose}
|
||||
className={className}
|
||||
>
|
||||
{t('close', 'common')}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Download } from 'lucide-react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { useDownloadIncidentPdf } from '../hooks';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
|
||||
interface DownloadPdfButtonProps {
|
||||
incident: IncidentItem;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const DownloadPdfButton: React.FC<DownloadPdfButtonProps> = ({
|
||||
incident,
|
||||
className
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { handleDownloadPDF } = useDownloadIncidentPdf();
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={`flex items-center gap-2 ${className || ''}`}
|
||||
onClick={() => handleDownloadPDF(incident)}
|
||||
variant="outline"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{t('downloadPdf', 'incident')}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Printer } from 'lucide-react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { usePrintIncident } from '../hooks';
|
||||
|
||||
interface PrintButtonProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const PrintButton: React.FC<PrintButtonProps> = ({ className }) => {
|
||||
const { t } = useLanguage();
|
||||
const { handlePrint } = usePrintIncident();
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={`flex items-center gap-2 ${className || ''}`}
|
||||
onClick={handlePrint}
|
||||
variant="default"
|
||||
>
|
||||
<Printer className="h-4 w-4" />
|
||||
{t('print', 'incident')}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
|
||||
export * from './PrintButton';
|
||||
export * from './DownloadPdfButton';
|
||||
export * from './CloseButton';
|
||||
@@ -0,0 +1,3 @@
|
||||
|
||||
export * from './usePrintIncident';
|
||||
export * from './useDownloadIncidentPdf';
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentItem, incidentService } from '@/services/incident';
|
||||
|
||||
export const useDownloadIncidentPdf = () => {
|
||||
const { toast } = useToast();
|
||||
const { t } = useLanguage();
|
||||
|
||||
const handleDownloadPDF = async (incident: IncidentItem) => {
|
||||
try {
|
||||
await incidentService.generateIncidentPDF(incident);
|
||||
|
||||
toast({
|
||||
title: t('success'),
|
||||
description: t('pdfDownloaded'),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error generating PDF:", error);
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: t('pdfGenerationFailed'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return { handleDownloadPDF };
|
||||
};
|
||||
+173
@@ -0,0 +1,173 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
|
||||
export const usePrintIncident = () => {
|
||||
const { toast } = useToast();
|
||||
const { t } = useLanguage();
|
||||
|
||||
const handlePrint = React.useCallback(() => {
|
||||
try {
|
||||
// Add print-specific stylesheet temporarily
|
||||
const style = document.createElement('style');
|
||||
style.id = 'print-style';
|
||||
style.textContent = `
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 10mm;
|
||||
}
|
||||
@media print {
|
||||
body * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dialog-content, .dialog-content * {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
position: absolute !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 15mm !important;
|
||||
margin: 0 !important;
|
||||
background-color: white !important;
|
||||
box-shadow: none;
|
||||
overflow: visible !important;
|
||||
display: block !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Remove any black backgrounds */
|
||||
html, body {
|
||||
background-color: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
/* Optimize spacing for single page */
|
||||
.print-section {
|
||||
margin-bottom: 2mm !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
/* Reduce vertical spacing */
|
||||
h4 {
|
||||
margin-bottom: 1mm !important;
|
||||
margin-top: 1mm !important;
|
||||
color: #1e40af !important; /* blue-800 */
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.print-compact-text {
|
||||
font-size: 9pt !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.print-compact-spacing > * {
|
||||
margin-top: 1mm !important;
|
||||
margin-bottom: 1mm !important;
|
||||
}
|
||||
|
||||
.print-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
gap: 1mm !important;
|
||||
}
|
||||
|
||||
.badge-print {
|
||||
background-color: #dbeafe !important; /* blue-100 */
|
||||
color: #1e40af !important; /* blue-800 */
|
||||
border: 1px solid #93c5fd !important; /* blue-300 */
|
||||
padding: 0.5mm 1mm !important;
|
||||
margin: 0.5mm !important;
|
||||
display: inline-block !important;
|
||||
font-size: 8pt !important;
|
||||
}
|
||||
|
||||
/* More compact spacing */
|
||||
.print-compact-margin {
|
||||
margin: 1mm 0 !important;
|
||||
}
|
||||
|
||||
.print-smaller-font {
|
||||
font-size: 8pt !important;
|
||||
}
|
||||
|
||||
.header-print {
|
||||
background-color: #1e40af !important; /* blue-800 */
|
||||
color: #ffffff !important;
|
||||
padding: 2mm 3mm !important;
|
||||
margin-bottom: 2mm !important;
|
||||
}
|
||||
|
||||
/* More compact header */
|
||||
.header-print h1 {
|
||||
font-size: 12pt !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.header-print p {
|
||||
font-size: 9pt !important;
|
||||
margin-top: 1mm !important;
|
||||
}
|
||||
|
||||
/* Footer stays at bottom */
|
||||
.footer-print {
|
||||
font-size: 7pt !important;
|
||||
color: #6b7280 !important; /* gray-500 */
|
||||
border-top: 1px solid #e5e7eb !important; /* gray-200 */
|
||||
position: fixed !important;
|
||||
bottom: 10mm !important;
|
||||
left: 15mm !important;
|
||||
right: 15mm !important;
|
||||
padding-top: 2mm !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
/* Hide any unnecessary elements */
|
||||
.print-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Optimize description text */
|
||||
.print-description {
|
||||
max-height: 100px !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Wait a bit to ensure styles are applied
|
||||
setTimeout(() => {
|
||||
window.print();
|
||||
|
||||
// Remove the style after printing dialog closes
|
||||
setTimeout(() => {
|
||||
const printStyle = document.getElementById('print-style');
|
||||
if (printStyle) {
|
||||
printStyle.remove();
|
||||
}
|
||||
}, 1000);
|
||||
}, 100);
|
||||
|
||||
toast({
|
||||
title: t('success'),
|
||||
description: t('printJobStarted'),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error printing:", error);
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: t('printingFailed'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
}, [t, toast]);
|
||||
|
||||
return { handlePrint };
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
|
||||
export * from './IncidentDetailDialog';
|
||||
export * from './IncidentDetailHeader';
|
||||
export * from './IncidentDetailContent';
|
||||
export * from './IncidentDetailSections';
|
||||
export * from './IncidentDetailFooter';
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { getAffectedSystemsArray } from './utils';
|
||||
|
||||
interface AffectedSystemsSectionProps {
|
||||
incident: IncidentItem | null;
|
||||
assignedUser?: any | null;
|
||||
}
|
||||
|
||||
export const AffectedSystemsSection: React.FC<AffectedSystemsSectionProps> = ({ incident }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!incident) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold text-lg">{t('affectedSystems')}</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('systems')}</h4>
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{getAffectedSystemsArray(incident.affected_systems).map((system, idx) => (
|
||||
<Badge key={idx} variant="outline">{system}</Badge>
|
||||
))}
|
||||
{getAffectedSystemsArray(incident.affected_systems).length === 0 &&
|
||||
<span className="text-muted-foreground italic">{t('noSystems')}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('impact')}</h4>
|
||||
<div className="mt-1">
|
||||
<Badge variant={
|
||||
incident.impact?.toLowerCase() === 'critical' ? 'destructive' :
|
||||
incident.impact?.toLowerCase() === 'high' ? 'default' :
|
||||
incident.impact?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
|
||||
}>
|
||||
{t(incident.impact?.toLowerCase() || 'low')}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('priority')}</h4>
|
||||
<div className="mt-1">
|
||||
<Badge variant={
|
||||
incident.priority?.toLowerCase() === 'critical' ? 'destructive' :
|
||||
incident.priority?.toLowerCase() === 'high' ? 'default' :
|
||||
incident.priority?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
|
||||
}>
|
||||
{t(incident.priority?.toLowerCase() || 'low')}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { User } from '@/services/userService';
|
||||
import { getUserInitials } from './utils';
|
||||
|
||||
interface AssignmentSectionProps {
|
||||
incident: IncidentItem | null;
|
||||
assignedUser?: User | null;
|
||||
}
|
||||
|
||||
export const AssignmentSection: React.FC<AssignmentSectionProps> = ({ incident, assignedUser }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!incident) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold text-lg">{t('assignment')}</h3>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('assignedTo')}</h4>
|
||||
<div className="mt-1">
|
||||
{assignedUser ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={assignedUser.avatar} alt={assignedUser.full_name || assignedUser.username} />
|
||||
<AvatarFallback>{getUserInitials(assignedUser)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{assignedUser.full_name || assignedUser.username}</span>
|
||||
</div>
|
||||
) : incident.assigned_to ? (
|
||||
<span>{incident.assigned_to}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground italic">{t('unassigned')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { User } from '@/services/userService';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { IncidentStatusBadge } from '../../IncidentStatusBadge';
|
||||
import { getUserInitials } from './utils';
|
||||
|
||||
interface BasicInfoSectionProps {
|
||||
incident: IncidentItem | null;
|
||||
assignedUser?: User | null;
|
||||
}
|
||||
|
||||
export const BasicInfoSection: React.FC<BasicInfoSectionProps> = ({ incident, assignedUser }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!incident) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2 print-compact-text">
|
||||
<h3 className="font-semibold text-lg">{t('basicInfo')}</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 print-grid">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('title')}</h4>
|
||||
<p className="mt-1">{incident.title || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('status')}</h4>
|
||||
<div className="mt-1">
|
||||
<IncidentStatusBadge status={incident.status || incident.impact_status || 'investigating'} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('serviceId')}</h4>
|
||||
<p className="mt-1">{incident.service_id || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('assignedTo')}</h4>
|
||||
<div className="mt-1">
|
||||
{assignedUser ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={assignedUser.avatar} alt={assignedUser.full_name || assignedUser.username} />
|
||||
<AvatarFallback>{getUserInitials(assignedUser)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{assignedUser.full_name || assignedUser.username}</span>
|
||||
</div>
|
||||
) : incident.assigned_to ? (
|
||||
<span>{incident.assigned_to}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground italic">{t('unassigned')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-2">
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('description')}</h4>
|
||||
<p className="mt-1 whitespace-pre-line print-description">{incident.description || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface ImpactAnalysisSectionProps {
|
||||
incident: IncidentItem | null;
|
||||
assignedUser?: any | null;
|
||||
}
|
||||
|
||||
export const ImpactAnalysisSection: React.FC<ImpactAnalysisSectionProps> = ({ incident }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!incident) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold text-lg">{t('impactAnalysis')}</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('impact')}</h4>
|
||||
<div className="mt-1">
|
||||
<Badge variant={
|
||||
incident.impact?.toLowerCase() === 'critical' ? 'destructive' :
|
||||
incident.impact?.toLowerCase() === 'high' ? 'default' :
|
||||
incident.impact?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
|
||||
}>
|
||||
{t(incident.impact?.toLowerCase() || 'low')}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('priority')}</h4>
|
||||
<div className="mt-1">
|
||||
<Badge variant={
|
||||
incident.priority?.toLowerCase() === 'critical' ? 'destructive' :
|
||||
incident.priority?.toLowerCase() === 'high' ? 'default' :
|
||||
incident.priority?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
|
||||
}>
|
||||
{t(incident.priority?.toLowerCase() || 'low')}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
|
||||
interface ResolutionSectionProps {
|
||||
incident: IncidentItem | null;
|
||||
assignedUser?: any | null;
|
||||
}
|
||||
|
||||
export const ResolutionSection: React.FC<ResolutionSectionProps> = ({ incident }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!incident) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold text-lg">{t('resolutionDetails')}</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('rootCause')}</h4>
|
||||
<p className="mt-1 whitespace-pre-line">{incident.root_cause || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('resolutionSteps')}</h4>
|
||||
<p className="mt-1 whitespace-pre-line">{incident.resolution_steps || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('lessonsLearned')}</h4>
|
||||
<p className="mt-1 whitespace-pre-line">{incident.lessons_learned || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { formatDate } from './utils';
|
||||
|
||||
interface TimelineSectionProps {
|
||||
incident: IncidentItem | null;
|
||||
assignedUser?: any | null;
|
||||
}
|
||||
|
||||
export const TimelineSection: React.FC<TimelineSectionProps> = ({ incident }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!incident) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold text-lg">{t('timeline')}</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('created')}</h4>
|
||||
<p className="mt-1">{formatDate(incident.created)}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('lastUpdated')}</h4>
|
||||
<p className="mt-1">{formatDate(incident.updated)}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('incidentTime')}</h4>
|
||||
<p className="mt-1">{formatDate(incident.timestamp)}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">{t('resolutionTime')}</h4>
|
||||
<p className="mt-1">{formatDate(incident.resolution_time)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
// Export all section components
|
||||
export * from './BasicInfoSection';
|
||||
export * from './TimelineSection';
|
||||
export * from './AffectedSystemsSection';
|
||||
export * from './ResolutionSection';
|
||||
export * from './utils';
|
||||
@@ -0,0 +1,32 @@
|
||||
|
||||
import { User } from '@/services/userService';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
// Helper function to get user initials
|
||||
export const getUserInitials = (user: User): string => {
|
||||
if (user.full_name) {
|
||||
const nameParts = user.full_name.split(' ');
|
||||
if (nameParts.length > 1) {
|
||||
return `${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase();
|
||||
}
|
||||
return user.full_name.substring(0, 2).toUpperCase();
|
||||
}
|
||||
return user.username.substring(0, 2).toUpperCase();
|
||||
};
|
||||
|
||||
// Format date helper
|
||||
export const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return '-';
|
||||
try {
|
||||
return format(new Date(dateStr), 'PPp');
|
||||
} catch (error) {
|
||||
console.error('Error formatting date:', dateStr, error);
|
||||
return dateStr;
|
||||
}
|
||||
};
|
||||
|
||||
// Get affected systems helper
|
||||
export const getAffectedSystemsArray = (systems?: string) => {
|
||||
if (!systems) return [];
|
||||
return systems.split(',').map(system => system.trim()).filter(Boolean);
|
||||
};
|
||||
@@ -0,0 +1,56 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentFormValues } from '../hooks/useIncidentForm';
|
||||
import {
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
export const IncidentAffectedFields: React.FC = () => {
|
||||
const { t } = useLanguage();
|
||||
const { control } = useFormContext<IncidentFormValues>();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<FormField
|
||||
control={control}
|
||||
name="affected_systems"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('affectedSystems')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={t('enterAffectedSystems')} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<p className="text-sm text-muted-foreground">{t('separateSystemsWithComma')}</p>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="root_cause"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('rootCause')}</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder={t('enterRootCause')}
|
||||
className="min-h-[80px]"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,201 @@
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentFormValues } from '../hooks/useIncidentForm';
|
||||
import {
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { userService } from '@/services/userService';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { X, Users } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
|
||||
export const IncidentBasicFields: React.FC = () => {
|
||||
const { t } = useLanguage();
|
||||
const form = useFormContext<IncidentFormValues>();
|
||||
const currentAssignedUserId = form.watch('assigned_to');
|
||||
|
||||
// For assigned users functionality
|
||||
const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>([]);
|
||||
|
||||
// Update selectedUserIds when form value changes (for edit mode)
|
||||
useEffect(() => {
|
||||
if (currentAssignedUserId) {
|
||||
setSelectedUserIds([currentAssignedUserId]);
|
||||
}
|
||||
}, [currentAssignedUserId]);
|
||||
|
||||
// Fetch users for assignment
|
||||
const { data: users = [], isLoading } = useQuery({
|
||||
queryKey: ['users'],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const usersList = await userService.getUsers();
|
||||
console.log("Fetched users for incident assignment:", usersList);
|
||||
return Array.isArray(usersList) ? usersList : [];
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch users:", error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
staleTime: 300000 // Cache for 5 minutes
|
||||
});
|
||||
|
||||
// Add user to assigned_to
|
||||
const addUser = (userId: string) => {
|
||||
// For now, we're using a single user assignment
|
||||
console.log("Setting user ID in form:", userId);
|
||||
form.setValue('assigned_to', userId, { shouldValidate: true, shouldDirty: true });
|
||||
setSelectedUserIds([userId]);
|
||||
};
|
||||
|
||||
// Remove assigned user
|
||||
const removeUser = () => {
|
||||
form.setValue('assigned_to', '', { shouldValidate: true, shouldDirty: true });
|
||||
setSelectedUserIds([]);
|
||||
};
|
||||
|
||||
// Get selected user data
|
||||
const selectedUser = users.find(user => user.id === form.getValues('assigned_to'));
|
||||
|
||||
// Function to get user initials from name
|
||||
const getUserInitials = (user: any): string => {
|
||||
if (user.full_name) {
|
||||
const nameParts = user.full_name.split(' ');
|
||||
if (nameParts.length > 1) {
|
||||
return `${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase();
|
||||
}
|
||||
return user.full_name.substring(0, 2).toUpperCase();
|
||||
}
|
||||
return user.username.substring(0, 2).toUpperCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('title')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={t('enterIncidentTitle')} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('description')}</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder={t('enterIncidentDescription')}
|
||||
className="min-h-[100px]"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="service_id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('serviceId')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={t('enterServiceId')} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="assigned_to"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel className="flex items-center gap-1">
|
||||
<Users className="h-4 w-4" /> {t('assignedTo')}
|
||||
</FormLabel>
|
||||
<div className="space-y-3">
|
||||
<FormControl>
|
||||
<select
|
||||
id="assigned-user-select"
|
||||
className="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
value={field.value || ""}
|
||||
onChange={(e) => {
|
||||
const selectedValue = e.target.value;
|
||||
console.log("Selected user ID:", selectedValue);
|
||||
if (selectedValue) {
|
||||
addUser(selectedValue);
|
||||
}
|
||||
}}
|
||||
onBlur={field.onBlur}
|
||||
disabled={field.disabled}
|
||||
name={field.name}
|
||||
>
|
||||
<option value="">{t('selectAssignedUser')}</option>
|
||||
{users.map(user => (
|
||||
<option
|
||||
key={user.id}
|
||||
value={user.id}
|
||||
>
|
||||
{user.full_name || user.username}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</FormControl>
|
||||
|
||||
{selectedUser ? (
|
||||
<div className="flex flex-wrap gap-2 mt-2 border p-2 rounded-md bg-muted/50">
|
||||
<Badge key={selectedUser.id} variant="secondary" className="flex items-center gap-1 py-1 px-2">
|
||||
<Avatar className="h-5 w-5 mr-1">
|
||||
<AvatarImage src={selectedUser.avatar} alt={selectedUser.full_name || selectedUser.username} />
|
||||
<AvatarFallback className="text-[10px]">
|
||||
{getUserInitials(selectedUser)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{selectedUser.full_name || selectedUser.username}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-4 w-4 p-0 ml-1 hover:bg-transparent hover:opacity-70"
|
||||
onClick={removeUser}
|
||||
type="button"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
<span className="sr-only">{t('remove')}</span>
|
||||
</Button>
|
||||
</Badge>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground italic p-2">
|
||||
{t('noAssignedUser')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,119 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentFormValues } from '../hooks/useIncidentForm';
|
||||
import {
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
export const IncidentConfigFields: React.FC = () => {
|
||||
const { t } = useLanguage();
|
||||
const { control } = useFormContext<IncidentFormValues>();
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<FormField
|
||||
control={control}
|
||||
name="status"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('status')}</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t('selectIncidentStatus')} />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="investigating">{t('investigating')}</SelectItem>
|
||||
<SelectItem value="identified">{t('identified')}</SelectItem>
|
||||
<SelectItem value="found_root_cause">{t('foundRootCause')}</SelectItem>
|
||||
<SelectItem value="in_progress">{t('inProgress')}</SelectItem>
|
||||
<SelectItem value="monitoring">{t('monitoring')}</SelectItem>
|
||||
<SelectItem value="resolved">{t('resolved')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="impact"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-2">
|
||||
<FormLabel>{t('impact')}</FormLabel>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="flex space-x-1"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="minor" id="minor" />
|
||||
<Label htmlFor="minor">{t('minor')}</Label>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="major" id="major" />
|
||||
<Label htmlFor="major">{t('major')}</Label>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="critical" id="critical" />
|
||||
<Label htmlFor="critical">{t('critical')}</Label>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="none" id="none" />
|
||||
<Label htmlFor="none">{t('none')}</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="priority"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('priority')}</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t('selectPriorityLevel')} />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="low">{t('low')}</SelectItem>
|
||||
<SelectItem value="medium">{t('medium')}</SelectItem>
|
||||
<SelectItem value="high">{t('high')}</SelectItem>
|
||||
<SelectItem value="critical">{t('critical')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentFormValues } from '../hooks/useIncidentForm';
|
||||
import {
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
export const IncidentDetailsFields: React.FC = () => {
|
||||
const { t } = useLanguage();
|
||||
const { control } = useFormContext<IncidentFormValues>();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<FormField
|
||||
control={control}
|
||||
name="resolution_steps"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('resolutionSteps')}</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder={t('enterResolutionSteps')}
|
||||
className="min-h-[80px]"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="lessons_learned"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('lessonsLearned')}</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder={t('enterLessonsLearned')}
|
||||
className="min-h-[80px]"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
|
||||
export * from './IncidentBasicFields';
|
||||
export * from './IncidentAffectedFields';
|
||||
export * from './IncidentConfigFields';
|
||||
export * from './IncidentDetailsFields';
|
||||
@@ -0,0 +1,84 @@
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { incidentService, IncidentItem } from '@/services/incident';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { incidentFormSchema, IncidentFormValues } from './useIncidentForm';
|
||||
|
||||
export const useIncidentEditForm = (
|
||||
incident: IncidentItem,
|
||||
onSuccess: () => void,
|
||||
onClose: () => void
|
||||
) => {
|
||||
const { t } = useLanguage();
|
||||
const { toast } = useToast();
|
||||
|
||||
// Initialize form with existing incident data
|
||||
const form = useForm<IncidentFormValues>({
|
||||
resolver: zodResolver(incidentFormSchema),
|
||||
defaultValues: {
|
||||
title: incident.title || '',
|
||||
description: incident.description || '',
|
||||
affected_systems: incident.affected_systems || '',
|
||||
status: (incident.status?.toLowerCase() || incident.impact_status?.toLowerCase() || 'investigating') as any,
|
||||
impact: (incident.impact?.toLowerCase() || 'minor') as any,
|
||||
priority: (incident.priority?.toLowerCase() || 'medium') as any,
|
||||
service_id: incident.service_id || '',
|
||||
assigned_to: incident.assigned_to || '',
|
||||
root_cause: incident.root_cause || '',
|
||||
resolution_steps: incident.resolution_steps || '',
|
||||
lessons_learned: incident.lessons_learned || '',
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: IncidentFormValues) => {
|
||||
try {
|
||||
console.log("Form data for update:", data);
|
||||
console.log("Assigned user ID for update:", data.assigned_to);
|
||||
|
||||
await incidentService.updateIncident(incident.id, {
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
status: data.status,
|
||||
affected_systems: data.affected_systems,
|
||||
impact: data.impact,
|
||||
priority: data.priority,
|
||||
service_id: data.service_id,
|
||||
assigned_to: data.assigned_to, // This is the user ID from the form
|
||||
root_cause: data.root_cause,
|
||||
resolution_steps: data.resolution_steps,
|
||||
lessons_learned: data.lessons_learned,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: t('incidentUpdated'),
|
||||
description: t('incidentUpdatedDesc'),
|
||||
});
|
||||
|
||||
onClose();
|
||||
onSuccess();
|
||||
} catch (error) {
|
||||
console.error('Error updating incident:', error);
|
||||
|
||||
if (error instanceof Error) {
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: `${t('errorUpdatingIncident')}: ${error.message}`,
|
||||
variant: 'destructive',
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: t('errorUpdatingIncident'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
form,
|
||||
onSubmit: form.handleSubmit(onSubmit),
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { pb } from '@/lib/pocketbase';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { incidentService, CreateIncidentInput } from '@/services/incident';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
|
||||
// Define the schema for our incident form
|
||||
export const incidentFormSchema = z.object({
|
||||
title: z.string().min(1, { message: 'Title is required' }),
|
||||
description: z.string().min(1, { message: 'Description is required' }),
|
||||
affected_systems: z.string().min(1, { message: 'Affected systems are required' }),
|
||||
status: z.enum(['investigating', 'found_root_cause', 'in_progress', 'monitoring', 'resolved']),
|
||||
impact: z.enum(['none', 'minor', 'major', 'critical']),
|
||||
priority: z.enum(['low', 'medium', 'high', 'critical']),
|
||||
service_id: z.string().optional(),
|
||||
assigned_to: z.string().optional(),
|
||||
root_cause: z.string().optional(),
|
||||
resolution_steps: z.string().optional(),
|
||||
lessons_learned: z.string().optional(),
|
||||
});
|
||||
|
||||
export type IncidentFormValues = z.infer<typeof incidentFormSchema>;
|
||||
|
||||
export const useIncidentForm = (onSuccess: () => void, onClose: () => void) => {
|
||||
const { t } = useLanguage();
|
||||
const { toast } = useToast();
|
||||
|
||||
const form = useForm<IncidentFormValues>({
|
||||
resolver: zodResolver(incidentFormSchema),
|
||||
defaultValues: {
|
||||
title: '',
|
||||
description: '',
|
||||
affected_systems: '',
|
||||
status: 'investigating',
|
||||
impact: 'minor',
|
||||
priority: 'medium',
|
||||
service_id: '',
|
||||
assigned_to: '',
|
||||
root_cause: '',
|
||||
resolution_steps: '',
|
||||
lessons_learned: '',
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: IncidentFormValues) => {
|
||||
try {
|
||||
console.log("Form data before submission:", data);
|
||||
|
||||
const formattedData: CreateIncidentInput = {
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
status: data.status,
|
||||
affected_systems: data.affected_systems,
|
||||
impact: data.impact,
|
||||
priority: data.priority,
|
||||
service_id: data.service_id,
|
||||
assigned_to: data.assigned_to,
|
||||
root_cause: data.root_cause,
|
||||
resolution_steps: data.resolution_steps,
|
||||
lessons_learned: data.lessons_learned,
|
||||
timestamp: new Date().toISOString(),
|
||||
created_by: pb.authStore.model?.id || '',
|
||||
};
|
||||
|
||||
console.log("Formatted data for API:", formattedData);
|
||||
|
||||
await incidentService.createIncident(formattedData);
|
||||
|
||||
toast({
|
||||
title: t('incidentCreated'),
|
||||
description: t('incidentCreatedDesc'),
|
||||
});
|
||||
|
||||
console.log("Incident created successfully, about to call onSuccess and onClose");
|
||||
|
||||
form.reset();
|
||||
onClose();
|
||||
onSuccess();
|
||||
} catch (error) {
|
||||
console.error('Error creating incident:', error);
|
||||
|
||||
if (error instanceof Error) {
|
||||
console.error('Error details:', error.message);
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: `${t('errorCreatingIncident')}: ${error.message}`,
|
||||
variant: 'destructive',
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: t('error'),
|
||||
description: t('errorCreatingIncident'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
form,
|
||||
onSubmit: form.handleSubmit(onSubmit),
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
export * from './IncidentTable';
|
||||
export * from './IncidentActionsMenu';
|
||||
export * from './IncidentStatusBadge';
|
||||
export * from './IncidentStatusDropdown';
|
||||
export * from './CreateIncidentDialog';
|
||||
export * from './EditIncidentDialog';
|
||||
export * from './EmptyIncidentState';
|
||||
export * from './detail-dialog';
|
||||
@@ -0,0 +1,150 @@
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { format } from 'date-fns';
|
||||
import { IncidentItem } from '@/services/incident/types';
|
||||
import { IncidentTableRow } from './IncidentTableRow';
|
||||
import { IncidentDetailDialog } from '../detail-dialog/IncidentDetailDialog';
|
||||
import { EditIncidentDialog } from '../EditIncidentDialog';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { IncidentTableSkeleton } from './IncidentTableSkeleton';
|
||||
|
||||
interface IncidentTableProps {
|
||||
data: IncidentItem[];
|
||||
isLoading: boolean;
|
||||
onIncidentUpdated: () => void;
|
||||
onViewDetails?: (incident: IncidentItem) => void;
|
||||
onEditIncident?: (incident: IncidentItem) => void;
|
||||
}
|
||||
|
||||
export const IncidentTable = ({
|
||||
data,
|
||||
isLoading,
|
||||
onIncidentUpdated,
|
||||
onViewDetails,
|
||||
onEditIncident
|
||||
}: IncidentTableProps) => {
|
||||
const { t } = useLanguage();
|
||||
const [selectedIncident, setSelectedIncident] = useState<IncidentItem | null>(null);
|
||||
const [isDetailOpen, setIsDetailOpen] = useState(false);
|
||||
const [isEditOpen, setIsEditOpen] = useState(false);
|
||||
|
||||
const formatDate = useCallback((dateString: string | undefined) => {
|
||||
if (!dateString) return '-';
|
||||
try {
|
||||
return format(new Date(dateString), 'PPp');
|
||||
} catch (error) {
|
||||
console.error('Error formatting date:', dateString, error);
|
||||
return dateString;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getAffectedSystemsArray = useCallback((affectedSystems: string | undefined): string[] => {
|
||||
if (!affectedSystems) return [];
|
||||
return affectedSystems.split(',').map(system => system.trim()).filter(Boolean);
|
||||
}, []);
|
||||
|
||||
const handleViewDetails = useCallback((incident: IncidentItem) => {
|
||||
setSelectedIncident(incident);
|
||||
setIsDetailOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleEditIncident = useCallback((incident: IncidentItem) => {
|
||||
setSelectedIncident(incident);
|
||||
setIsEditOpen(true);
|
||||
}, []);
|
||||
|
||||
// Handle status updates efficiently
|
||||
const handleIncidentUpdated = useCallback(() => {
|
||||
console.log("Incident updated in IncidentTable, propagating event");
|
||||
onIncidentUpdated();
|
||||
}, [onIncidentUpdated]);
|
||||
|
||||
// Handle dialog closing
|
||||
const handleDetailDialogClose = useCallback((open: boolean) => {
|
||||
setIsDetailOpen(open);
|
||||
if (!open) {
|
||||
onIncidentUpdated();
|
||||
}
|
||||
}, [onIncidentUpdated]);
|
||||
|
||||
// Handle edit dialog closing
|
||||
const handleEditDialogClose = useCallback((open: boolean) => {
|
||||
setIsEditOpen(open);
|
||||
if (!open) {
|
||||
onIncidentUpdated();
|
||||
}
|
||||
}, [onIncidentUpdated]);
|
||||
|
||||
if (isLoading) {
|
||||
return <IncidentTableSkeleton />;
|
||||
}
|
||||
|
||||
// Add a safety check to prevent map of undefined error
|
||||
if (!data || !Array.isArray(data)) {
|
||||
console.error('Data is not an array:', data);
|
||||
return (
|
||||
<div className="p-4 text-center">
|
||||
<p>No incident data available</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>{t('title')}</TableHead>
|
||||
<TableHead>{t('status')}</TableHead>
|
||||
<TableHead>{t('priority')}</TableHead>
|
||||
<TableHead>{t('time')}</TableHead>
|
||||
<TableHead>{t('affected')}</TableHead>
|
||||
<TableHead>{t('impact')}</TableHead>
|
||||
<TableHead>{t('assignedTo')}</TableHead>
|
||||
<TableHead className="text-right">{t('actions')}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((item) => (
|
||||
<IncidentTableRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
formatDate={formatDate}
|
||||
getAffectedSystemsArray={getAffectedSystemsArray}
|
||||
onViewDetails={onViewDetails || handleViewDetails}
|
||||
onEditIncident={onEditIncident || handleEditIncident}
|
||||
onIncidentUpdated={handleIncidentUpdated}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Incident detail dialog */}
|
||||
<IncidentDetailDialog
|
||||
open={isDetailOpen}
|
||||
onOpenChange={handleDetailDialogClose}
|
||||
incident={selectedIncident}
|
||||
/>
|
||||
|
||||
{/* Edit incident dialog */}
|
||||
{selectedIncident && (
|
||||
<EditIncidentDialog
|
||||
open={isEditOpen}
|
||||
onOpenChange={handleEditDialogClose}
|
||||
incident={selectedIncident}
|
||||
onIncidentUpdated={onIncidentUpdated}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,119 @@
|
||||
|
||||
import React, { memo, useState } from 'react';
|
||||
import { TableRow, TableCell } from '@/components/ui/table';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Eye } from 'lucide-react';
|
||||
import { IncidentStatusDropdown } from '../IncidentStatusDropdown';
|
||||
import { IncidentActionsMenu } from '../IncidentActionsMenu';
|
||||
import { IncidentItem } from '@/services/incident';
|
||||
import { AssignedUserCell } from './IncidentTableUtils';
|
||||
|
||||
interface IncidentTableRowProps {
|
||||
item: IncidentItem;
|
||||
formatDate: (date: string | undefined) => string;
|
||||
getAffectedSystemsArray: (systems: string | undefined) => string[];
|
||||
onViewDetails?: (incident: IncidentItem) => void;
|
||||
onEditIncident?: (incident: IncidentItem) => void;
|
||||
onIncidentUpdated: () => void;
|
||||
t: (key: string) => string;
|
||||
}
|
||||
|
||||
export const IncidentTableRow = memo(({
|
||||
item,
|
||||
formatDate,
|
||||
getAffectedSystemsArray,
|
||||
onViewDetails,
|
||||
onEditIncident,
|
||||
onIncidentUpdated,
|
||||
t
|
||||
}: IncidentTableRowProps) => {
|
||||
// Use local state for optimistic UI updates
|
||||
const [localItem, setLocalItem] = useState(item);
|
||||
|
||||
// Update local state when props change
|
||||
React.useEffect(() => {
|
||||
setLocalItem(item);
|
||||
}, [item]);
|
||||
|
||||
// Handle status updates locally
|
||||
const handleStatusUpdated = () => {
|
||||
console.log("Status updated in TableRow, calling onIncidentUpdated");
|
||||
onIncidentUpdated();
|
||||
};
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={localItem.id}
|
||||
className="hover:bg-muted/40 cursor-pointer"
|
||||
onClick={() => onViewDetails && onViewDetails(localItem)}
|
||||
>
|
||||
<TableCell className="font-medium max-w-[200px] truncate">
|
||||
{localItem.title || localItem.description || '-'}
|
||||
</TableCell>
|
||||
<TableCell onClick={(e) => e.stopPropagation()}>
|
||||
<IncidentStatusDropdown
|
||||
status={localItem.impact_status || localItem.status || 'investigating'}
|
||||
id={localItem.id}
|
||||
onStatusUpdated={handleStatusUpdated}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={
|
||||
localItem.priority?.toLowerCase() === 'critical' ? 'destructive' :
|
||||
localItem.priority?.toLowerCase() === 'high' ? 'default' :
|
||||
localItem.priority?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
|
||||
}>
|
||||
{t(localItem.priority?.toLowerCase() || 'low')}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(localItem.created)}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{getAffectedSystemsArray(localItem.affected_systems).map((system, idx) => (
|
||||
<Badge key={`${localItem.id}-system-${idx}`} variant="outline">{system}</Badge>
|
||||
))}
|
||||
{getAffectedSystemsArray(localItem.affected_systems).length === 0 && '-'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={
|
||||
localItem.impact?.toLowerCase() === 'critical' ? 'destructive' :
|
||||
localItem.impact?.toLowerCase() === 'high' ? 'default' :
|
||||
localItem.impact?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
|
||||
}>
|
||||
{t(localItem.impact?.toLowerCase() || 'low')}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<AssignedUserCell userId={localItem.assigned_to} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex justify-end items-center space-x-2">
|
||||
{onViewDetails && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onViewDetails(localItem);
|
||||
}}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
<span className="sr-only">{t('view')}</span>
|
||||
</Button>
|
||||
)}
|
||||
<IncidentActionsMenu
|
||||
item={localItem}
|
||||
onIncidentUpdated={onIncidentUpdated}
|
||||
onViewDetails={onViewDetails}
|
||||
onEditIncident={onEditIncident}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
});
|
||||
|
||||
IncidentTableRow.displayName = 'IncidentTableRow';
|
||||
@@ -0,0 +1,27 @@
|
||||
|
||||
import React from 'react';
|
||||
import { TableRow, TableCell } from '@/components/ui/table';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
export const IncidentTableRowSkeleton = () => (
|
||||
<TableRow>
|
||||
<TableCell><Skeleton className="h-5 w-[180px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-[100px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-[80px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-[120px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-[150px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-[80px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-[100px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-[60px]" /></TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
|
||||
export const IncidentTableSkeleton = () => (
|
||||
<div className="overflow-x-auto">
|
||||
<TableRow>
|
||||
{Array(3).fill(0).map((_, index) => (
|
||||
<IncidentTableRowSkeleton key={`skeleton-${index}`} />
|
||||
))}
|
||||
</TableRow>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,57 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { userService, User } from '@/services/userService';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
// Helper function to get user initials
|
||||
export const getUserInitials = (user: User): string => {
|
||||
if (user.full_name) {
|
||||
const nameParts = user.full_name.split(' ');
|
||||
if (nameParts.length > 1) {
|
||||
return `${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase();
|
||||
}
|
||||
return user.full_name.substring(0, 2).toUpperCase();
|
||||
}
|
||||
return user.username.substring(0, 2).toUpperCase();
|
||||
};
|
||||
|
||||
interface AssignedUserCellProps {
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
export const AssignedUserCell: React.FC<AssignedUserCellProps> = ({ userId }) => {
|
||||
const { data: user, isLoading } = useQuery({
|
||||
queryKey: ['user', userId],
|
||||
queryFn: async () => {
|
||||
if (!userId) return null;
|
||||
try {
|
||||
return await userService.getUser(userId);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch assigned user:", error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
enabled: !!userId,
|
||||
staleTime: 300000 // Cache for 5 minutes
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return <Skeleton className="h-6 w-20" />;
|
||||
}
|
||||
|
||||
if (!user || !userId) {
|
||||
return <span>-</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={user.avatar} alt={user.full_name || user.username} />
|
||||
<AvatarFallback>{getUserInitials(user)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="truncate max-w-[100px]">{user.full_name || user.username}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
|
||||
export * from './IncidentTable';
|
||||
export * from './IncidentTableRow';
|
||||
export * from './IncidentTableSkeleton';
|
||||
export * from './IncidentTableUtils';
|
||||
@@ -0,0 +1,18 @@
|
||||
|
||||
// Export all components for easier imports
|
||||
export * from './ScheduleIncidentContent';
|
||||
export * from './ScheduledMaintenanceTab';
|
||||
export * from './IncidentManagementTab';
|
||||
export * from './maintenance/MaintenanceTable';
|
||||
export * from './maintenance/MaintenanceStatusBadge';
|
||||
export * from './maintenance/MaintenanceActionsMenu';
|
||||
export * from './maintenance/EmptyMaintenanceState';
|
||||
export * from './maintenance/CreateMaintenanceDialog';
|
||||
export * from './incident/IncidentTable';
|
||||
export * from './incident/IncidentStatusBadge';
|
||||
export * from './incident/IncidentActionsMenu';
|
||||
export * from './incident/EmptyIncidentState';
|
||||
export * from './incident/CreateIncidentDialog';
|
||||
export * from './incident-management';
|
||||
export * from './hooks';
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Header } from "@/components/dashboard/Header";
|
||||
import { Sidebar } from "@/components/dashboard/Sidebar";
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
import { useLanguage } from "@/contexts/LanguageContext";
|
||||
import { ScheduleIncidentContent } from "@/components/schedule-incident/ScheduleIncidentContent";
|
||||
import { authService } from "@/services/authService";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { initMaintenanceNotifications, stopMaintenanceNotifications } from "@/services/maintenance/maintenanceNotificationService";
|
||||
|
||||
const ScheduleIncident = () => {
|
||||
// State for sidebar collapse functionality
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
|
||||
|
||||
// Get current theme and language
|
||||
const { theme } = useTheme();
|
||||
const { t } = useLanguage();
|
||||
|
||||
// Get current user
|
||||
const currentUser = authService.getCurrentUser();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Initialize maintenance notifications
|
||||
useEffect(() => {
|
||||
console.log("Initializing maintenance notifications");
|
||||
initMaintenanceNotifications();
|
||||
|
||||
// Clean up on unmount
|
||||
return () => {
|
||||
console.log("Stopping maintenance notifications");
|
||||
stopMaintenanceNotifications();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Handle logout
|
||||
const handleLogout = () => {
|
||||
authService.logout();
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background text-foreground">
|
||||
<Sidebar collapsed={sidebarCollapsed} />
|
||||
<div className="flex flex-col flex-1">
|
||||
<Header
|
||||
currentUser={currentUser}
|
||||
onLogout={handleLogout}
|
||||
sidebarCollapsed={sidebarCollapsed}
|
||||
toggleSidebar={toggleSidebar}
|
||||
/>
|
||||
<ScheduleIncidentContent />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScheduleIncident;
|
||||
@@ -0,0 +1,14 @@
|
||||
|
||||
import { IncidentItem } from './types';
|
||||
|
||||
// Export functions to update and invalidate the cache
|
||||
export const updateCache = (data: IncidentItem[]) => {
|
||||
console.log(`Updating cache with ${data.length} incidents`);
|
||||
// The actual cache is now maintained in incidentFetch.ts
|
||||
};
|
||||
|
||||
// Reset cache and request state
|
||||
export const invalidateCache = () => {
|
||||
console.log('Invalidating incidents cache');
|
||||
// The invalidation is handled in incidentFetch.ts implementation
|
||||
};
|
||||
@@ -0,0 +1,147 @@
|
||||
|
||||
import { pb } from '@/lib/pocketbase';
|
||||
import { IncidentItem } from './types';
|
||||
import { normalizeFetchedItem } from './incidentUtils';
|
||||
import { updateCache, invalidateCache } from './incidentCache';
|
||||
|
||||
// Internal state variables instead of importing them
|
||||
let incidentsCache: {
|
||||
data: IncidentItem[];
|
||||
timestamp: number;
|
||||
} | null = null;
|
||||
let pendingRequest: Promise<any> | null = null;
|
||||
let isRequestInProgress = false;
|
||||
|
||||
// Cache duration in milliseconds (30 minutes)
|
||||
const CACHE_DURATION = 30 * 60 * 1000;
|
||||
|
||||
// Check if cache is valid
|
||||
export const isCacheValid = (): boolean => {
|
||||
const now = Date.now();
|
||||
return !!(incidentsCache && (now - incidentsCache.timestamp < CACHE_DURATION));
|
||||
};
|
||||
|
||||
// Get all incidents with caching and error handling
|
||||
export const getAllIncidents = async (forceRefresh = false): Promise<IncidentItem[]> => {
|
||||
// If a request is in progress, wait for it to complete rather than making a new one
|
||||
if (isRequestInProgress) {
|
||||
console.log('Request already in progress, waiting for completion');
|
||||
try {
|
||||
if (pendingRequest) {
|
||||
await pendingRequest;
|
||||
}
|
||||
return incidentsCache?.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error in existing incidents request:', error);
|
||||
return incidentsCache?.data || [];
|
||||
}
|
||||
}
|
||||
|
||||
// Use cache if available, not expired, and not forced refresh
|
||||
if (!forceRefresh && isCacheValid()) {
|
||||
console.log('Using cached incidents data from', new Date(incidentsCache!.timestamp).toLocaleTimeString());
|
||||
return incidentsCache!.data;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Fetching all incidents from API...');
|
||||
isRequestInProgress = true;
|
||||
|
||||
// Implement timeout for the request
|
||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||
setTimeout(() => reject(new Error('Request timeout')), 20000); // Longer timeout (20s)
|
||||
});
|
||||
|
||||
// Create the fetch promise with a unique request key to prevent conflicts
|
||||
const now = Date.now();
|
||||
const requestKey = `incidents-${now}`;
|
||||
const fetchPromise = pb.collection('incidents').getList(1, 100, {
|
||||
sort: '-created',
|
||||
requestKey,
|
||||
$cancelKey: requestKey,
|
||||
});
|
||||
|
||||
// Store the pending request
|
||||
pendingRequest = Promise.race([fetchPromise, timeoutPromise]);
|
||||
|
||||
// Race between fetch and timeout
|
||||
const result = await pendingRequest;
|
||||
|
||||
// Clear request flags
|
||||
pendingRequest = null;
|
||||
isRequestInProgress = false;
|
||||
|
||||
if (!result || !result.items) {
|
||||
console.warn('No incidents found in API response');
|
||||
return [];
|
||||
}
|
||||
|
||||
const normalizedItems = result.items.map(normalizeFetchedItem);
|
||||
|
||||
// Update cache
|
||||
updateCache(normalizedItems);
|
||||
|
||||
console.log(`Fetched ${normalizedItems.length} incidents at ${new Date().toLocaleTimeString()}`);
|
||||
return normalizedItems;
|
||||
} catch (error) {
|
||||
if ((error as any)?.isAbort) {
|
||||
console.log("Request aborted:", error);
|
||||
return incidentsCache?.data || [];
|
||||
}
|
||||
|
||||
console.error('Error fetching incidents:', error);
|
||||
|
||||
// Clear states to allow retry
|
||||
pendingRequest = null;
|
||||
isRequestInProgress = false;
|
||||
|
||||
// Improve error message
|
||||
if (error instanceof Error) {
|
||||
throw new Error(`Failed to fetch incidents: ${error.message}`);
|
||||
}
|
||||
|
||||
// Still return cached data even on error
|
||||
if (incidentsCache) {
|
||||
console.log('Returning stale cached data after error');
|
||||
return incidentsCache.data;
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// Get incident by id
|
||||
export const getIncidentById = async (id: string): Promise<IncidentItem | null> => {
|
||||
try {
|
||||
console.log(`Fetching incident with ID: ${id}`);
|
||||
|
||||
// First check if the incident exists in the cache
|
||||
if (isCacheValid() && incidentsCache) {
|
||||
const cachedIncident = incidentsCache.data.find(incident => incident.id === id);
|
||||
if (cachedIncident) {
|
||||
console.log('Incident found in cache');
|
||||
return cachedIncident;
|
||||
}
|
||||
}
|
||||
|
||||
// If not in cache, fetch from API
|
||||
const result = await pb.collection('incidents').getOne(id);
|
||||
|
||||
if (!result) {
|
||||
console.warn(`No incident found with ID: ${id}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
const normalizedIncident = normalizeFetchedItem(result);
|
||||
return normalizedIncident;
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Error fetching incident with ID ${id}:`, error);
|
||||
|
||||
if (error instanceof Error) {
|
||||
throw new Error(`Failed to fetch incident: ${error.message}`);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,109 @@
|
||||
|
||||
import { pb } from '@/lib/pocketbase';
|
||||
import { CreateIncidentInput, IncidentItem } from './types';
|
||||
import { formatStatus } from './incidentUtils';
|
||||
import { invalidateCache } from './incidentCache';
|
||||
|
||||
// Update incident status
|
||||
export const updateIncidentStatus = async (id: string, status: string): Promise<void> => {
|
||||
try {
|
||||
const formattedStatus = formatStatus(status);
|
||||
console.log(`Updating incident ${id} status to ${status} (formatted: ${formattedStatus})`);
|
||||
|
||||
// Update both status and impact_status fields
|
||||
await pb.collection('incidents').update(id, {
|
||||
status: formattedStatus,
|
||||
impact_status: status.toLowerCase(), // Set impact_status to the lowercase status value
|
||||
...(status.toLowerCase() === 'resolved' ? { resolution_time: new Date().toISOString() } : {})
|
||||
});
|
||||
|
||||
// Invalidate cache after update
|
||||
invalidateCache();
|
||||
|
||||
console.log(`Incident ${id} status updated successfully to ${status}`);
|
||||
} catch (error) {
|
||||
console.error('Error updating incident status:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// Delete incident
|
||||
export const deleteIncident = async (id: string): Promise<void> => {
|
||||
try {
|
||||
await pb.collection('incidents').delete(id);
|
||||
|
||||
// Invalidate cache after deletion
|
||||
invalidateCache();
|
||||
|
||||
console.log(`Incident ${id} deleted successfully`);
|
||||
} catch (error) {
|
||||
console.error('Error deleting incident:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// Create incident
|
||||
export const createIncident = async (data: CreateIncidentInput): Promise<void> => {
|
||||
try {
|
||||
// Format the payload according to API requirements
|
||||
const payload = {
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
status: formatStatus(data.status),
|
||||
impact_status: data.status.toLowerCase(),
|
||||
// Use lowercase for impact and priority to match API expectations
|
||||
impact: data.impact.toLowerCase(),
|
||||
affected_systems: data.affected_systems,
|
||||
priority: data.priority.toLowerCase(),
|
||||
service_id: data.service_id || '',
|
||||
assigned_to: data.assigned_to || '', // Direct user ID assignment
|
||||
root_cause: data.root_cause || '',
|
||||
resolution_steps: data.resolution_steps || '',
|
||||
lessons_learned: data.lessons_learned || '',
|
||||
timestamp: data.timestamp || new Date().toISOString(),
|
||||
created_by: data.created_by,
|
||||
resolution_time: data.status.toLowerCase() === 'resolved' ? new Date().toISOString() : null,
|
||||
};
|
||||
|
||||
console.log('Creating new incident with payload:', payload);
|
||||
await pb.collection('incidents').create(payload);
|
||||
|
||||
// Invalidate cache after create
|
||||
invalidateCache();
|
||||
|
||||
console.log('Incident created successfully');
|
||||
} catch (error) {
|
||||
console.error('Error creating incident:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// Update incident
|
||||
export const updateIncident = async (id: string, data: Partial<IncidentItem>): Promise<void> => {
|
||||
try {
|
||||
console.log(`Updating incident ${id} with:`, data);
|
||||
|
||||
// Make sure impact and priority are lowercase
|
||||
const payload = {
|
||||
...data,
|
||||
impact: data.impact?.toLowerCase(),
|
||||
priority: data.priority?.toLowerCase(),
|
||||
status: data.status ? formatStatus(data.status) : undefined,
|
||||
impact_status: data.status ? data.status.toLowerCase() : undefined,
|
||||
...(data.status?.toLowerCase() === 'resolved' && !data.resolution_time
|
||||
? { resolution_time: new Date().toISOString() }
|
||||
: {})
|
||||
};
|
||||
|
||||
console.log("Final payload for update:", payload);
|
||||
await pb.collection('incidents').update(id, payload);
|
||||
|
||||
// Invalidate cache after update
|
||||
invalidateCache();
|
||||
|
||||
console.log(`Incident ${id} updated successfully`);
|
||||
} catch (error) {
|
||||
console.error('Error updating incident:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
|
||||
import { generateIncidentPDF } from './pdf';
|
||||
|
||||
export { generateIncidentPDF };
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
|
||||
import { CreateIncidentInput, IncidentItem, UpdateIncidentInput } from './types';
|
||||
import { createIncident, updateIncident, updateIncidentStatus, deleteIncident } from './incidentOperations';
|
||||
import { getAllIncidents, getIncidentById } from './incidentFetch';
|
||||
import { generateIncidentPDF } from './incidentPdfService';
|
||||
|
||||
export const incidentService = {
|
||||
// Fetch operations
|
||||
getAllIncidents,
|
||||
getIncidentById,
|
||||
|
||||
// CRUD operations
|
||||
createIncident,
|
||||
updateIncident,
|
||||
updateIncidentStatus,
|
||||
deleteIncident,
|
||||
|
||||
// PDF operations
|
||||
generateIncidentPDF,
|
||||
};
|
||||
|
||||
export default incidentService;
|
||||
@@ -0,0 +1,29 @@
|
||||
|
||||
import { pb } from '@/lib/pocketbase';
|
||||
import { IncidentItem } from './types';
|
||||
|
||||
// Helper function to get the API URL
|
||||
export const getApiUrl = (): string => {
|
||||
try {
|
||||
return pb.baseUrl;
|
||||
} catch (error) {
|
||||
console.error('Error getting API URL:', error);
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
// Normalize fetched items to ensure consistent data structure
|
||||
export const normalizeFetchedItem = (item: any): IncidentItem => {
|
||||
return {
|
||||
...item,
|
||||
affected_systems: item.affected_systems || '',
|
||||
status: item.impact_status || item.status || 'Investigating',
|
||||
impact: item.impact || 'Low',
|
||||
priority: item.priority || 'Low',
|
||||
} as IncidentItem;
|
||||
};
|
||||
|
||||
// Format status with first letter capitalized
|
||||
export const formatStatus = (status: string): string => {
|
||||
return status.charAt(0).toUpperCase() + status.slice(1);
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
|
||||
export * from './types';
|
||||
export * from './incidentFetch';
|
||||
export * from './incidentOperations';
|
||||
export * from './incidentCache';
|
||||
export * from './incidentUtils';
|
||||
export * from './incidentPdfService';
|
||||
export * from './incidentService';
|
||||
|
||||
// Export the incidentService as the default export
|
||||
export { incidentService } from './incidentService';
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
|
||||
import jsPDF from 'jspdf';
|
||||
import { IncidentItem } from '../types';
|
||||
import {
|
||||
addBasicInfoSection,
|
||||
addDescriptionSection,
|
||||
addAffectedSystemsSection,
|
||||
addRootCauseSection,
|
||||
addResolutionSection,
|
||||
addAssignmentSection,
|
||||
addLessonsLearnedSection
|
||||
} from './sections';
|
||||
import { addHeader, addFooter } from './headerFooter';
|
||||
|
||||
/**
|
||||
* Generate a PDF for an incident report
|
||||
*/
|
||||
export const generatePdf = async (incident: IncidentItem): Promise<string> => {
|
||||
// Validate incident data
|
||||
if (!incident?.id) {
|
||||
console.error('Invalid incident data for PDF generation');
|
||||
throw new Error('Invalid incident data');
|
||||
}
|
||||
|
||||
try {
|
||||
// Create new PDF document with portrait orientation
|
||||
const doc = new jsPDF({
|
||||
orientation: 'portrait',
|
||||
unit: 'mm',
|
||||
format: 'a4',
|
||||
});
|
||||
|
||||
// Set title and filename
|
||||
const title = incident.title || `Incident Report #${incident.id}`;
|
||||
const filename = `incident-report-${incident.id}.pdf`;
|
||||
|
||||
// Add metadata
|
||||
doc.setProperties({
|
||||
title: title,
|
||||
subject: 'Incident Report',
|
||||
author: 'ReamStack System',
|
||||
creator: 'ReamStack',
|
||||
});
|
||||
|
||||
// Add header section
|
||||
let yPos = addHeader(doc, incident);
|
||||
|
||||
// Add basic information section
|
||||
yPos = addBasicInfoSection(doc, incident, yPos);
|
||||
|
||||
// Add description section
|
||||
yPos = addDescriptionSection(doc, incident, yPos);
|
||||
|
||||
// Check if we need to add a new page
|
||||
if (yPos > 250) {
|
||||
doc.addPage();
|
||||
yPos = 20;
|
||||
}
|
||||
|
||||
// Add affected systems section
|
||||
yPos = addAffectedSystemsSection(doc, incident, yPos);
|
||||
|
||||
// Check if we need to add a new page
|
||||
if (yPos > 250) {
|
||||
doc.addPage();
|
||||
yPos = 20;
|
||||
}
|
||||
|
||||
// Add root cause section
|
||||
yPos = addRootCauseSection(doc, incident, yPos);
|
||||
|
||||
// Check if we need to add a new page
|
||||
if (yPos > 250) {
|
||||
doc.addPage();
|
||||
yPos = 20;
|
||||
}
|
||||
|
||||
// Add resolution steps section
|
||||
yPos = addResolutionSection(doc, incident, yPos);
|
||||
|
||||
// Check if we need to add a new page
|
||||
if (yPos > 250) {
|
||||
doc.addPage();
|
||||
yPos = 20;
|
||||
}
|
||||
|
||||
// Add assignment section
|
||||
yPos = addAssignmentSection(doc, incident, yPos);
|
||||
|
||||
// Check if we need to add a new page
|
||||
if (yPos > 250) {
|
||||
doc.addPage();
|
||||
yPos = 20;
|
||||
}
|
||||
|
||||
// Add lessons learned section if available
|
||||
addLessonsLearnedSection(doc, incident, yPos);
|
||||
|
||||
// Add footer to all pages
|
||||
addFooter(doc);
|
||||
|
||||
// Save the PDF
|
||||
doc.save(filename);
|
||||
|
||||
console.log('PDF generated successfully:', filename);
|
||||
return filename;
|
||||
} catch (error) {
|
||||
console.error('Error generating incident PDF:', error);
|
||||
throw new Error(`Failed to generate PDF: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
|
||||
import jsPDF from 'jspdf';
|
||||
import { IncidentItem } from '../types';
|
||||
import { fonts } from './utils';
|
||||
|
||||
/**
|
||||
* Add the PDF header with title and metadata
|
||||
*/
|
||||
export const addHeader = (doc: jsPDF, incident: IncidentItem): number => {
|
||||
// Set initial y position
|
||||
let yPos = 15;
|
||||
|
||||
// Add header with title
|
||||
doc.setFont(fonts.bold);
|
||||
doc.setFontSize(18);
|
||||
doc.setTextColor(0, 0, 0);
|
||||
doc.text('INCIDENT REPORT', 105, yPos, { align: 'center' });
|
||||
|
||||
// Add incident title
|
||||
yPos += 8;
|
||||
doc.setFontSize(14);
|
||||
const title = incident.title || `Incident Report #${incident.id}`;
|
||||
doc.text(title, 105, yPos, { align: 'center' });
|
||||
|
||||
// Add current date
|
||||
yPos += 8;
|
||||
doc.setFont(fonts.normal);
|
||||
doc.setFontSize(10);
|
||||
doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 105, yPos, { align: 'center' });
|
||||
|
||||
// Add ReamStack logo or text
|
||||
yPos += 8;
|
||||
doc.setFontSize(12);
|
||||
doc.setFont(fonts.italic);
|
||||
doc.text('ReamStack Incident Management', 105, yPos, { align: 'center' });
|
||||
|
||||
// Add horizontal line
|
||||
yPos += 5;
|
||||
doc.setLineWidth(0.5);
|
||||
doc.line(15, yPos, 195, yPos);
|
||||
|
||||
// Return next Y position with some padding
|
||||
return yPos + 10;
|
||||
};
|
||||
|
||||
/**
|
||||
* Add footer to all pages
|
||||
*/
|
||||
export const addFooter = (doc: jsPDF): void => {
|
||||
const pageCount = doc.getNumberOfPages();
|
||||
for (let i = 1; i <= pageCount; i++) {
|
||||
doc.setPage(i);
|
||||
doc.setFontSize(8);
|
||||
doc.setTextColor(100, 100, 100);
|
||||
doc.text(
|
||||
`Page ${i} of ${pageCount} | Generated by ReamStack Incident Management System`,
|
||||
105,
|
||||
285,
|
||||
{ align: 'center' }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
|
||||
import { generatePdf } from './generator';
|
||||
import { IncidentItem } from '../types';
|
||||
|
||||
/**
|
||||
* Generate and download PDF for incident report
|
||||
*/
|
||||
export const generateIncidentPDF = async (incident: IncidentItem): Promise<void> => {
|
||||
await generatePdf(incident);
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
|
||||
import jsPDF from 'jspdf';
|
||||
import { IncidentItem } from '../types';
|
||||
import { fonts, formatDate, capitalize } from './utils';
|
||||
import autoTable from 'jspdf-autotable';
|
||||
|
||||
/**
|
||||
* Add the incident overview section to the PDF
|
||||
*/
|
||||
export const addBasicInfoSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
|
||||
doc.setFont(fonts.bold);
|
||||
doc.setFontSize(14);
|
||||
doc.setTextColor(30, 64, 175); // Blue-800
|
||||
doc.text('Incident Overview', 15, yPos);
|
||||
|
||||
// Draw a line under the heading
|
||||
doc.line(15, yPos + 2, 195, yPos + 2);
|
||||
yPos += 10;
|
||||
|
||||
// Basic information table
|
||||
autoTable(doc, {
|
||||
startY: yPos,
|
||||
head: [['Field', 'Information']],
|
||||
body: [
|
||||
['ID', incident.id],
|
||||
['Status', capitalize(incident.status || 'Unknown')],
|
||||
['Priority', capitalize(incident.priority || 'Unknown')],
|
||||
['Impact', capitalize(incident.impact || 'Unknown')],
|
||||
['Created', formatDate(incident.created)],
|
||||
['Last Updated', formatDate(incident.updated)],
|
||||
],
|
||||
headStyles: {
|
||||
fillColor: [30, 64, 175], // Blue-800
|
||||
textColor: [255, 255, 255],
|
||||
fontStyle: 'bold',
|
||||
},
|
||||
alternateRowStyles: {
|
||||
fillColor: [241, 245, 249], // Slate-100
|
||||
},
|
||||
margin: { left: 15, right: 15 },
|
||||
});
|
||||
|
||||
// Return the new Y position after the table
|
||||
return (doc as any).lastAutoTable.finalY + 10;
|
||||
};
|
||||
|
||||
/**
|
||||
* Add the description section to the PDF
|
||||
*/
|
||||
export const addDescriptionSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
|
||||
doc.setFont(fonts.bold);
|
||||
doc.setFontSize(14);
|
||||
doc.setTextColor(30, 64, 175); // Blue-800
|
||||
doc.text('Description', 15, yPos);
|
||||
|
||||
// Draw a line under the heading
|
||||
doc.line(15, yPos + 2, 195, yPos + 2);
|
||||
|
||||
// Add incident description
|
||||
doc.setFont(fonts.normal);
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(0, 0, 0);
|
||||
const description = incident.description || 'No description provided';
|
||||
const splitDescription = doc.splitTextToSize(description, 180);
|
||||
doc.text(splitDescription, 15, yPos + 10);
|
||||
|
||||
// Update y position after the description
|
||||
return yPos + 15 + (splitDescription.length * 5);
|
||||
};
|
||||
|
||||
/**
|
||||
* Add the affected systems section to the PDF
|
||||
*/
|
||||
export const addAffectedSystemsSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
|
||||
doc.setFont(fonts.bold);
|
||||
doc.setFontSize(14);
|
||||
doc.setTextColor(30, 64, 175); // Blue-800
|
||||
doc.text('Affected Systems', 15, yPos);
|
||||
|
||||
// Draw a line under the heading
|
||||
doc.line(15, yPos + 2, 195, yPos + 2);
|
||||
|
||||
// Add affected systems
|
||||
doc.setFont(fonts.normal);
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(0, 0, 0);
|
||||
const affectedSystems = incident.affected_systems || 'None specified';
|
||||
const systemsList = affectedSystems.split(',').map(system => system.trim());
|
||||
|
||||
let currentY = yPos + 10;
|
||||
systemsList.forEach((system) => {
|
||||
doc.text(`• ${system}`, 15, currentY);
|
||||
currentY += 5;
|
||||
});
|
||||
|
||||
return currentY + 5; // Return updated Y position with some padding
|
||||
};
|
||||
|
||||
/**
|
||||
* Add the root cause section to the PDF
|
||||
*/
|
||||
export const addRootCauseSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
|
||||
doc.setFont(fonts.bold);
|
||||
doc.setFontSize(14);
|
||||
doc.setTextColor(30, 64, 175); // Blue-800
|
||||
doc.text('Root Cause', 15, yPos);
|
||||
|
||||
// Draw a line under the heading
|
||||
doc.line(15, yPos + 2, 195, yPos + 2);
|
||||
|
||||
// Add root cause
|
||||
doc.setFont(fonts.normal);
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(0, 0, 0);
|
||||
const rootCause = incident.root_cause || 'Root cause not identified yet';
|
||||
const splitRootCause = doc.splitTextToSize(rootCause, 180);
|
||||
doc.text(splitRootCause, 15, yPos + 10);
|
||||
|
||||
// Update y position after the root cause
|
||||
return yPos + 15 + (splitRootCause.length * 5);
|
||||
};
|
||||
|
||||
/**
|
||||
* Add the resolution steps section to the PDF
|
||||
*/
|
||||
export const addResolutionSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
|
||||
doc.setFont(fonts.bold);
|
||||
doc.setFontSize(14);
|
||||
doc.setTextColor(30, 64, 175); // Blue-800
|
||||
doc.text('Resolution Steps', 15, yPos);
|
||||
|
||||
// Draw a line under the heading
|
||||
doc.line(15, yPos + 2, 195, yPos + 2);
|
||||
|
||||
// Create resolution data table - Using resolution_steps
|
||||
const resolutionSteps = incident.resolution_steps || 'No resolution steps provided';
|
||||
const splitResolutionSteps = doc.splitTextToSize(resolutionSteps, 180);
|
||||
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(0, 0, 0);
|
||||
doc.text(splitResolutionSteps, 15, yPos + 10);
|
||||
|
||||
return yPos + 20 + (splitResolutionSteps.length * 5);
|
||||
};
|
||||
|
||||
/**
|
||||
* Add the assignment information section to the PDF
|
||||
*/
|
||||
export const addAssignmentSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
|
||||
doc.setFontSize(14);
|
||||
doc.setTextColor(30, 64, 175); // Blue-800
|
||||
doc.text('Assignment Information', 15, yPos);
|
||||
|
||||
// Draw a line under the heading
|
||||
doc.line(15, yPos + 2, 195, yPos + 2);
|
||||
|
||||
// Add assigned user info
|
||||
yPos += 10;
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(0, 0, 0);
|
||||
const assignedTo = incident.assigned_to || 'Not assigned';
|
||||
doc.text(`Assigned to: ${assignedTo}`, 15, yPos);
|
||||
|
||||
return yPos + 10;
|
||||
};
|
||||
|
||||
/**
|
||||
* Add the lessons learned section to the PDF if available
|
||||
*/
|
||||
export const addLessonsLearnedSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
|
||||
if (!incident.lessons_learned) {
|
||||
return yPos; // No lessons learned, return current position
|
||||
}
|
||||
|
||||
doc.setFontSize(14);
|
||||
doc.setTextColor(30, 64, 175); // Blue-800
|
||||
doc.text('Lessons Learned', 15, yPos);
|
||||
|
||||
// Draw a line under the heading
|
||||
doc.line(15, yPos + 2, 195, yPos + 2);
|
||||
|
||||
// Add lessons learned
|
||||
const lessonsLearned = incident.lessons_learned;
|
||||
const splitLessonsLearned = doc.splitTextToSize(lessonsLearned, 180);
|
||||
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(0, 0, 0);
|
||||
doc.text(splitLessonsLearned, 15, yPos + 10);
|
||||
|
||||
return yPos + 15 + (splitLessonsLearned.length * 5);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
|
||||
import { format } from 'date-fns';
|
||||
|
||||
// Font configuration for the PDF
|
||||
export const fonts = {
|
||||
normal: 'Helvetica',
|
||||
bold: 'Helvetica-Bold',
|
||||
italic: 'Helvetica-Oblique',
|
||||
};
|
||||
|
||||
// Helper function to format dates
|
||||
export const formatDate = (dateString: string | undefined): string => {
|
||||
if (!dateString) return 'N/A';
|
||||
try {
|
||||
return format(new Date(dateString), 'PPp');
|
||||
} catch (e) {
|
||||
return dateString || 'N/A';
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to capitalize first letter
|
||||
export const capitalize = (str: string): string => {
|
||||
if (!str) return '';
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
|
||||
// Define the type for incident item
|
||||
export type IncidentItem = {
|
||||
id: string;
|
||||
service_id?: string;
|
||||
timestamp?: string;
|
||||
description: string;
|
||||
assigned_to?: string;
|
||||
resolution_time?: string;
|
||||
impact: string;
|
||||
affected_systems: string;
|
||||
root_cause?: string;
|
||||
resolution_steps?: string;
|
||||
lessons_learned?: string;
|
||||
operational_status_id?: string;
|
||||
server_id?: string;
|
||||
priority: string;
|
||||
status: string;
|
||||
impact_status?: string;
|
||||
created: string;
|
||||
updated: string;
|
||||
category?: string;
|
||||
title: string;
|
||||
};
|
||||
|
||||
// Define the input type for creating an incident
|
||||
export type CreateIncidentInput = {
|
||||
title: string;
|
||||
description: string;
|
||||
status: string;
|
||||
impact: string;
|
||||
affected_systems: string;
|
||||
priority: string;
|
||||
service_id?: string;
|
||||
assigned_to?: string;
|
||||
root_cause?: string;
|
||||
resolution_steps?: string;
|
||||
lessons_learned?: string;
|
||||
timestamp?: string;
|
||||
created_by: string;
|
||||
};
|
||||
|
||||
// Define the input type for updating an incident
|
||||
export type UpdateIncidentInput = {
|
||||
id: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
status?: string;
|
||||
impact?: string;
|
||||
affected_systems?: string;
|
||||
priority?: string;
|
||||
service_id?: string;
|
||||
assigned_to?: string;
|
||||
root_cause?: string;
|
||||
resolution_steps?: string;
|
||||
lessons_learned?: string;
|
||||
};
|
||||
Reference in New Issue
Block a user