Lorentz Hinrichsen
3c3124d8c9
- Renamed project from PSA-Utils to Pulse - Moved all app files from autotask-app/ to root - Updated package.json name to 'pulse' - Updated Docker container names to pulse-app and pulse-redis - Updated Docker network name to pulse-network
110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Server,
|
|
Monitor,
|
|
Power,
|
|
Clock,
|
|
CheckCircle,
|
|
XCircle
|
|
} from 'lucide-react';
|
|
import { format } from 'date-fns';
|
|
import { ConfigurationItem } from '@/lib/types/autotask';
|
|
import { DattoRMMDevice } from '@/lib/types/datto-rmm';
|
|
|
|
interface StatusCardsProps {
|
|
device?: ConfigurationItem;
|
|
rmmDevice?: DattoRMMDevice;
|
|
}
|
|
|
|
export function StatusCards({ device, rmmDevice }: StatusCardsProps) {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card className="border-0 shadow-lg">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Status</p>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
{device?.isActive ? (
|
|
<Badge variant="default" className="bg-green-600">
|
|
<CheckCircle className="w-3 h-3 mr-1" />
|
|
Active
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="secondary">
|
|
<XCircle className="w-3 h-3 mr-1" />
|
|
Inactive
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Power className={`h-5 w-5 ${device?.isActive ? 'text-green-600' : 'text-gray-400'}`} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-0 shadow-lg">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">PSA</p>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
{device ? (
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
) : (
|
|
<XCircle className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
<span className="text-sm font-medium">
|
|
{device ? 'Connected' : 'Not Found'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Server className="h-5 w-5 text-purple-600" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-0 shadow-lg">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">RMM</p>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
{rmmDevice ? (
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
) : (
|
|
<XCircle className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
<span className="text-sm font-medium">
|
|
{rmmDevice ? 'Connected' : 'Not Found'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Monitor className="h-5 w-5 text-blue-600" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-0 shadow-lg">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Last Seen</p>
|
|
<p className="text-sm font-medium mt-1">
|
|
{device?.lastModifiedTime ?
|
|
format(new Date(device.lastModifiedTime), 'MMM d, yyyy') :
|
|
rmmDevice?.lastSeen ?
|
|
format(new Date(rmmDevice.lastSeen), 'MMM d, yyyy') :
|
|
'-'}
|
|
</p>
|
|
</div>
|
|
<Clock className="h-5 w-5 text-orange-600" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|