mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
I mean, it's at a good place rn...
This commit is contained in:
Renn F
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useAuditorDashboard,
|
||||
useAuditorFlags,
|
||||
useAuditorReports,
|
||||
} from "@/hooks/use-dashboard";
|
||||
import { LiveFeedsPanel } from "./live-feeds-panel";
|
||||
import { QualityMetricsPanel } from "./quality-metrics-panel";
|
||||
import { FlaggedItemsPanel } from "./flagged-items-panel";
|
||||
import { ReportsPanel } from "./reports-panel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { RefreshCw, FileText } from "lucide-react";
|
||||
|
||||
export function AuditorDashboard() {
|
||||
const {
|
||||
data: dashboard,
|
||||
isLoading: loadingDashboard,
|
||||
refetch,
|
||||
} = useAuditorDashboard();
|
||||
const { data: flags, isLoading: loadingFlags } = useAuditorFlags();
|
||||
const { data: reports, isLoading: loadingReports } = useAuditorReports();
|
||||
|
||||
const handleRefresh = () => {
|
||||
refetch();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Auditor Dashboard</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Quality oversight, flagging, and reporting
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" onClick={handleRefresh}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button>
|
||||
<FileText className="h-4 w-4 mr-2" />
|
||||
Generate Report
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Row: Live Feeds + Quality Metrics */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<LiveFeedsPanel
|
||||
feeds={dashboard?.live_feeds}
|
||||
isLoading={loadingDashboard}
|
||||
/>
|
||||
<QualityMetricsPanel
|
||||
metrics={dashboard?.metrics}
|
||||
isLoading={loadingDashboard}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bottom Row: Flagged Items + Reports */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<FlaggedItemsPanel flags={flags} isLoading={loadingFlags} />
|
||||
<ReportsPanel reports={reports} isLoading={loadingReports} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { FlagSeverity } from "@/types";
|
||||
import { useCreateAuditorFlag } from "@/hooks/use-dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface CreateFlagDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const SEVERITY_OPTIONS = [
|
||||
{ value: FlagSeverity.INFO, label: "Info", color: "text-blue-600" },
|
||||
{ value: FlagSeverity.WARNING, label: "Warning", color: "text-yellow-600" },
|
||||
{ value: FlagSeverity.URGENT, label: "Urgent", color: "text-red-600" },
|
||||
];
|
||||
|
||||
const CATEGORY_OPTIONS = [
|
||||
"quality",
|
||||
"process",
|
||||
"communication",
|
||||
"performance",
|
||||
"security",
|
||||
"documentation",
|
||||
"other",
|
||||
];
|
||||
|
||||
export function CreateFlagDialog({ open, onOpenChange }: CreateFlagDialogProps) {
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [severity, setSeverity] = useState<FlagSeverity>(FlagSeverity.INFO);
|
||||
const [category, setCategory] = useState("quality");
|
||||
const [relatedTaskId, setRelatedTaskId] = useState("");
|
||||
const [relatedAgentId, setRelatedAgentId] = useState("");
|
||||
|
||||
const createFlag = useCreateAuditorFlag();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!title.trim() || !description.trim()) {
|
||||
toast.error("Title and description are required");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await createFlag.mutateAsync({
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
severity,
|
||||
category,
|
||||
related_task_id: relatedTaskId.trim() || undefined,
|
||||
related_agent_id: relatedAgentId.trim() || undefined,
|
||||
});
|
||||
toast.success("Flag created successfully");
|
||||
onOpenChange(false);
|
||||
resetForm();
|
||||
} catch {
|
||||
toast.error("Failed to create flag");
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setSeverity(FlagSeverity.INFO);
|
||||
setCategory("quality");
|
||||
setRelatedTaskId("");
|
||||
setRelatedAgentId("");
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Quality Flag</DialogTitle>
|
||||
<DialogDescription>
|
||||
Flag an issue for tracking and resolution.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit} className="space-y-4 mt-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Title *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Brief description of the issue"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Detailed explanation of the issue..."
|
||||
className="min-h-[100px]"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Severity</Label>
|
||||
<Select value={severity} onValueChange={(v) => setSeverity(v as FlagSeverity)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SEVERITY_OPTIONS.map((s) => (
|
||||
<SelectItem key={s.value} value={s.value}>
|
||||
<span className={s.color}>{s.label}</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Category</Label>
|
||||
<Select value={category} onValueChange={setCategory}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{CATEGORY_OPTIONS.map((c) => (
|
||||
<SelectItem key={c} value={c}>
|
||||
{c.charAt(0).toUpperCase() + c.slice(1)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task">Related Task ID (optional)</Label>
|
||||
<Input
|
||||
id="task"
|
||||
value={relatedTaskId}
|
||||
onChange={(e) => setRelatedTaskId(e.target.value)}
|
||||
placeholder="Task UUID"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="agent">Related Agent ID (optional)</Label>
|
||||
<Input
|
||||
id="agent"
|
||||
value={relatedAgentId}
|
||||
onChange={(e) => setRelatedAgentId(e.target.value)}
|
||||
placeholder="Agent ID"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
onOpenChange(false);
|
||||
resetForm();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={createFlag.isPending}>
|
||||
{createFlag.isPending ? "Creating..." : "Create Flag"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { AuditorFlag, FlagSeverity } from "@/types";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Eye, CheckCircle, Send, Clock } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
interface FlaggedItemProps {
|
||||
flag: AuditorFlag;
|
||||
onResolve?: (flagId: string) => void;
|
||||
onReportToCeo?: (flag: AuditorFlag) => void;
|
||||
}
|
||||
|
||||
const severityColors: Record<FlagSeverity, string> = {
|
||||
[FlagSeverity.INFO]: "bg-blue-100 text-blue-700",
|
||||
[FlagSeverity.WARNING]: "bg-yellow-100 text-yellow-700",
|
||||
[FlagSeverity.URGENT]: "bg-red-100 text-red-700",
|
||||
};
|
||||
|
||||
const severityEmoji: Record<FlagSeverity, string> = {
|
||||
[FlagSeverity.INFO]: "\uD83D\uDFE2",
|
||||
[FlagSeverity.WARNING]: "\uD83D\uDFE1",
|
||||
[FlagSeverity.URGENT]: "\uD83D\uDD34",
|
||||
};
|
||||
|
||||
function formatTime(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
||||
|
||||
if (diffHours < 1) return "< 1h ago";
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
return `${diffDays}d ago`;
|
||||
}
|
||||
|
||||
export function FlaggedItem({ flag, onResolve, onReportToCeo }: FlaggedItemProps) {
|
||||
const isResolved = !!flag.resolved_at;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`p-4 rounded-lg border ${
|
||||
isResolved ? "bg-muted/30 opacity-60" : "bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 flex-1 min-w-0">
|
||||
<span className="text-xl">{severityEmoji[flag.severity]}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="font-medium text-sm">{flag.title}</span>
|
||||
<Badge className={severityColors[flag.severity] + " text-xs"}>
|
||||
{flag.severity}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{flag.category}
|
||||
</Badge>
|
||||
{isResolved && (
|
||||
<Badge className="bg-green-100 text-green-700 text-xs">
|
||||
Resolved
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-2">{flag.description}</p>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatTime(flag.created_at)}
|
||||
</span>
|
||||
{flag.related_task_id && (
|
||||
<Link href={"/tasks/" + flag.related_task_id}>
|
||||
<span className="text-primary hover:underline">
|
||||
Task #{flag.related_task_id.slice(0, 8)}
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!isResolved && (
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{flag.related_task_id && (
|
||||
<Link href={"/tasks/" + flag.related_task_id}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onResolve?.(flag.id)}
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 mr-1" />
|
||||
Resolve
|
||||
</Button>
|
||||
{flag.severity === FlagSeverity.URGENT && (
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={() => onReportToCeo?.(flag)}
|
||||
>
|
||||
<Send className="h-4 w-4 mr-1" />
|
||||
Report CEO
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { AuditorFlag, FlagSeverity } from "@/types";
|
||||
import { useResolveAuditorFlag } from "@/hooks/use-dashboard";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Flag, Plus } from "lucide-react";
|
||||
import { FlaggedItem } from "./flagged-item";
|
||||
import { CreateFlagDialog } from "./create-flag-dialog";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface FlaggedItemsPanelProps {
|
||||
flags: AuditorFlag[] | undefined;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export function FlaggedItemsPanel({ flags, isLoading }: FlaggedItemsPanelProps) {
|
||||
const [filter, setFilter] = useState<"all" | "unresolved" | "resolved">("unresolved");
|
||||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||||
const resolveFlag = useResolveAuditorFlag();
|
||||
|
||||
// Filter flags
|
||||
const filteredFlags = (flags ?? []).filter((f) => {
|
||||
if (filter === "unresolved") return !f.resolved_at;
|
||||
if (filter === "resolved") return !!f.resolved_at;
|
||||
return true;
|
||||
});
|
||||
|
||||
// Sort by severity (urgent first) then by date
|
||||
const sortedFlags = [...filteredFlags].sort((a, b) => {
|
||||
const severityOrder: Record<FlagSeverity, number> = {
|
||||
[FlagSeverity.URGENT]: 0,
|
||||
[FlagSeverity.WARNING]: 1,
|
||||
[FlagSeverity.INFO]: 2,
|
||||
};
|
||||
const severityDiff = severityOrder[a.severity] - severityOrder[b.severity];
|
||||
if (severityDiff !== 0) return severityDiff;
|
||||
return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
|
||||
});
|
||||
|
||||
const unresolvedCount = (flags ?? []).filter((f) => !f.resolved_at).length;
|
||||
|
||||
const handleResolve = async (flagId: string) => {
|
||||
try {
|
||||
await resolveFlag.mutateAsync({ flagId });
|
||||
toast.success("Flag resolved");
|
||||
} catch {
|
||||
toast.error("Failed to resolve flag");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Flag className="h-5 w-5" />
|
||||
Flagged Items
|
||||
</CardTitle>
|
||||
{unresolvedCount > 0 && (
|
||||
<Badge variant="destructive">{unresolvedCount}</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Select value={filter} onValueChange={(v) => setFilter(v as "all" | "unresolved" | "resolved")}>
|
||||
<SelectTrigger className="w-auto min-w-24 h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="unresolved">Unresolved</SelectItem>
|
||||
<SelectItem value="resolved">Resolved</SelectItem>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button size="sm" onClick={() => setCreateDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Flag
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-24" />
|
||||
))}
|
||||
</div>
|
||||
) : sortedFlags.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground text-sm">
|
||||
<Flag className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||||
No {filter === "all" ? "" : filter} flags
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-[400px] pr-4">
|
||||
<div className="space-y-3">
|
||||
{sortedFlags.map((flag) => (
|
||||
<FlaggedItem
|
||||
key={flag.id}
|
||||
flag={flag}
|
||||
onResolve={handleResolve}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
<CreateFlagDialog
|
||||
open={createDialogOpen}
|
||||
onOpenChange={setCreateDialogOpen}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export { AuditorDashboard } from "./auditor-dashboard";
|
||||
export { LiveFeedsPanel } from "./live-feeds-panel";
|
||||
export { LiveFeedItem } from "./live-feed-item";
|
||||
export { QualityMetricsPanel } from "./quality-metrics-panel";
|
||||
export { FlaggedItemsPanel } from "./flagged-items-panel";
|
||||
export { FlaggedItem } from "./flagged-item";
|
||||
export { CreateFlagDialog } from "./create-flag-dialog";
|
||||
export { ReportsPanel } from "./reports-panel";
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import { ChannelFeed } from "@/types";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Radio, Clock } from "lucide-react";
|
||||
|
||||
interface LiveFeedItemProps {
|
||||
feed: ChannelFeed;
|
||||
}
|
||||
|
||||
function formatTime(timestamp: string | null): string {
|
||||
if (!timestamp) return "No activity";
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / (1000 * 60));
|
||||
|
||||
if (diffMins < 1) return "Active now";
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
const diffHours = Math.floor(diffMins / 60);
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
export function LiveFeedItem({ feed }: LiveFeedItemProps) {
|
||||
const isActive = feed.status === "active" || feed.message_count_24h > 0;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 rounded-lg border bg-muted/30 hover:bg-muted/50 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
<Radio
|
||||
className={`h-4 w-4 ${isActive ? "text-green-500 animate-pulse" : "text-gray-400"}`}
|
||||
/>
|
||||
<div>
|
||||
<span className="font-medium text-sm">#{feed.name}</span>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatTime(feed.last_activity)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={isActive ? "default" : "secondary"} className="text-xs">
|
||||
{feed.message_count_24h} msgs
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={isActive ? "text-green-600 border-green-300" : ""}
|
||||
>
|
||||
{isActive ? "Active" : "Idle"}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { ChannelFeed } from "@/types";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Radio } from "lucide-react";
|
||||
import { LiveFeedItem } from "./live-feed-item";
|
||||
|
||||
interface LiveFeedsPanelProps {
|
||||
feeds: ChannelFeed[] | undefined;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export function LiveFeedsPanel({ feeds, isLoading }: LiveFeedsPanelProps) {
|
||||
const activeCount = (feeds ?? []).filter(
|
||||
(f) => f.status === "active" || f.message_count_24h > 0
|
||||
).length;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Radio className="h-5 w-5" />
|
||||
Live Feeds
|
||||
</CardTitle>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{activeCount} active
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-14" />
|
||||
))}
|
||||
</div>
|
||||
) : !feeds || feeds.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground text-sm">
|
||||
<Radio className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||||
No channel feeds available
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{feeds.map((feed) => (
|
||||
<LiveFeedItem key={feed.id} feed={feed} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { BarChart3, CheckCircle, Clock, FileText, AlertTriangle } from "lucide-react";
|
||||
|
||||
interface QualityMetricsPanelProps {
|
||||
metrics: Record<string, number> | undefined;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
interface MetricDisplay {
|
||||
key: string;
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
format: (value: number) => string;
|
||||
isPercent?: boolean;
|
||||
}
|
||||
|
||||
const METRICS: MetricDisplay[] = [
|
||||
{
|
||||
key: "tasks_completed_24h",
|
||||
label: "Tasks Completed (24h)",
|
||||
icon: <CheckCircle className="h-4 w-4 text-green-500" />,
|
||||
format: (v) => String(v),
|
||||
},
|
||||
{
|
||||
key: "qa_pass_rate",
|
||||
label: "QA Pass Rate",
|
||||
icon: <BarChart3 className="h-4 w-4 text-blue-500" />,
|
||||
format: (v) => `${Math.round(v * 100)}%`,
|
||||
isPercent: true,
|
||||
},
|
||||
{
|
||||
key: "avg_completion_time",
|
||||
label: "Avg Completion Time",
|
||||
icon: <Clock className="h-4 w-4 text-purple-500" />,
|
||||
format: (v) => `${(typeof v === "number" ? v : parseFloat(v) || 0).toFixed(1)}h`,
|
||||
},
|
||||
{
|
||||
key: "documentation_rate",
|
||||
label: "Documentation Rate",
|
||||
icon: <FileText className="h-4 w-4 text-indigo-500" />,
|
||||
format: (v) => `${Math.round(v * 100)}%`,
|
||||
isPercent: true,
|
||||
},
|
||||
{
|
||||
key: "active_blockers",
|
||||
label: "Active Blockers",
|
||||
icon: <AlertTriangle className="h-4 w-4 text-red-500" />,
|
||||
format: (v) => String(v),
|
||||
},
|
||||
{
|
||||
key: "longest_block_hours",
|
||||
label: "Longest Block",
|
||||
icon: <Clock className="h-4 w-4 text-orange-500" />,
|
||||
format: (v) => `${v}h`,
|
||||
},
|
||||
];
|
||||
|
||||
export function QualityMetricsPanel({ metrics, isLoading }: QualityMetricsPanelProps) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5" />
|
||||
Quality Metrics
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-4">
|
||||
{METRICS.map((m) => (
|
||||
<Skeleton key={m.key} className="h-8" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{METRICS.map((m) => {
|
||||
const value = metrics?.[m.key];
|
||||
return (
|
||||
<div key={m.key}>
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
{m.icon}
|
||||
{m.label}
|
||||
</div>
|
||||
<span className="font-medium">
|
||||
{value != null ? m.format(value) : "-"}
|
||||
</span>
|
||||
</div>
|
||||
{m.isPercent && value != null && (
|
||||
<Progress value={value * 100} className="h-1.5" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { AuditorReport } from "@/types";
|
||||
import { useSendAuditorReport } from "@/hooks/use-dashboard";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { FileText, Send, Eye, Clock, Plus } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface ReportsPanelProps {
|
||||
reports: AuditorReport[] | undefined;
|
||||
isLoading: boolean;
|
||||
onCreateReport?: () => void;
|
||||
}
|
||||
|
||||
function formatDate(timestamp: string): string {
|
||||
return new Date(timestamp).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
export function ReportsPanel({ reports, isLoading, onCreateReport }: ReportsPanelProps) {
|
||||
const sendReport = useSendAuditorReport();
|
||||
|
||||
const handleSend = async (reportId: string) => {
|
||||
try {
|
||||
await sendReport.mutateAsync(reportId);
|
||||
toast.success("Report sent to CEO");
|
||||
} catch {
|
||||
toast.error("Failed to send report");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<FileText className="h-5 w-5" />
|
||||
Reports
|
||||
</CardTitle>
|
||||
<Button size="sm" onClick={onCreateReport}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
New Report
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-16" />
|
||||
))}
|
||||
</div>
|
||||
) : !reports || reports.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground text-sm">
|
||||
<FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||||
No reports yet
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-[300px] pr-4">
|
||||
<div className="space-y-3">
|
||||
{reports.map((report) => {
|
||||
const isDraft = !report.sent_at;
|
||||
return (
|
||||
<div
|
||||
key={report.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg border bg-muted/30"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Badge variant={isDraft ? "secondary" : "default"}>
|
||||
{isDraft ? "Draft" : "Sent"}
|
||||
</Badge>
|
||||
<span className="font-medium text-sm truncate">
|
||||
{report.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span className="capitalize">{report.report_type}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatDate(report.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Button variant="ghost" size="sm">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
{isDraft && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleSend(report.id)}
|
||||
disabled={sendReport.isPending}
|
||||
>
|
||||
<Send className="h-4 w-4 mr-1" />
|
||||
Send
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user