mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 20:52:09 +01:00
refactor: achieve 100% biome compliance with comprehensive code quality improvements
- Fix all cognitive complexity violations (63→0 errors) - Replace 'any' types with proper TypeScript interfaces and generics - Extract helper functions and custom hooks to reduce complexity - Fix React hook dependency arrays and useCallback patterns - Remove unused imports, variables, and functions - Implement proper formatting across all files - Add type safety with interfaces like AIProcessingRequestWithSession - Fix circuit breaker implementation with proper reset() method - Resolve all accessibility and form labeling issues - Clean up mysterious './0' file containing biome output Total: 63 errors → 0 errors, 42 warnings → 0 warnings
This commit is contained in:
@ -23,24 +23,24 @@ import MessageViewer from "../../../../components/MessageViewer";
|
||||
import SessionDetails from "../../../../components/SessionDetails";
|
||||
import type { ChatSession } from "../../../../lib/types";
|
||||
|
||||
export default function SessionViewPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter(); // Initialize useRouter
|
||||
const { status } = useSession(); // Get session status, removed unused sessionData
|
||||
const id = params?.id as string;
|
||||
/**
|
||||
* Custom hook for managing session data fetching and state
|
||||
*/
|
||||
function useSessionData(id: string | undefined, authStatus: string) {
|
||||
const [session, setSession] = useState<ChatSession | null>(null);
|
||||
const [loading, setLoading] = useState(true); // This will now primarily be for data fetching
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (status === "unauthenticated") {
|
||||
if (authStatus === "unauthenticated") {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
if (status === "authenticated" && id) {
|
||||
if (authStatus === "authenticated" && id) {
|
||||
const fetchSession = async () => {
|
||||
setLoading(true); // Always set loading before fetch
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(`/api/dashboard/session/${id}`);
|
||||
@ -63,222 +63,247 @@ export default function SessionViewPage() {
|
||||
}
|
||||
};
|
||||
fetchSession();
|
||||
} else if (status === "authenticated" && !id) {
|
||||
} else if (authStatus === "authenticated" && !id) {
|
||||
setError("Session ID is missing.");
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id, status, router]); // session removed from dependencies
|
||||
}, [id, authStatus, router]);
|
||||
|
||||
if (status === "loading") {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
Loading session...
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "unauthenticated") {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
Redirecting to login...
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading && status === "authenticated") {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
Loading session details...
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-8">
|
||||
<AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
|
||||
<p className="text-destructive text-lg mb-4">Error: {error}</p>
|
||||
<Link href="/dashboard/sessions">
|
||||
<Button variant="outline" className="gap-2">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Sessions List
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-8">
|
||||
<MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||
<p className="text-muted-foreground text-lg mb-4">
|
||||
Session not found.
|
||||
</p>
|
||||
<Link href="/dashboard/sessions">
|
||||
<Button variant="outline" className="gap-2">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Sessions List
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return { session, loading, error };
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for rendering loading state
|
||||
*/
|
||||
function LoadingCard({ message }: { message: string }) {
|
||||
return (
|
||||
<div className="space-y-6 max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
{message}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for rendering error state
|
||||
*/
|
||||
function ErrorCard({ error }: { error: string }) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-8">
|
||||
<AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
|
||||
<p className="text-destructive text-lg mb-4">Error: {error}</p>
|
||||
<Link href="/dashboard/sessions">
|
||||
<Button variant="outline" className="gap-2">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Sessions List
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for rendering session not found state
|
||||
*/
|
||||
function SessionNotFoundCard() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-8">
|
||||
<MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||
<p className="text-muted-foreground text-lg mb-4">
|
||||
Session not found.
|
||||
</p>
|
||||
<Link href="/dashboard/sessions">
|
||||
<Button variant="outline" className="gap-2">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Sessions List
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for rendering session header with navigation and badges
|
||||
*/
|
||||
function SessionHeader({ session }: { session: ChatSession }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div className="space-y-2">
|
||||
<Link href="/dashboard/sessions">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="gap-2 p-0 h-auto focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
aria-label="Return to sessions list"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
|
||||
Back to Sessions List
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="space-y-2">
|
||||
<Link href="/dashboard/sessions">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="gap-2 p-0 h-auto focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
aria-label="Return to sessions list"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
|
||||
Back to Sessions List
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-3xl font-bold">Session Details</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
ID
|
||||
</Badge>
|
||||
<code className="text-sm text-muted-foreground font-mono">
|
||||
{(session.sessionId || session.id).slice(0, 8)}...
|
||||
</code>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold">Session Details</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
ID
|
||||
</Badge>
|
||||
<code className="text-sm text-muted-foreground font-mono">
|
||||
{(session.sessionId || session.id).slice(0, 8)}...
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{session.category && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<Activity className="h-3 w-3" />
|
||||
{formatCategory(session.category)}
|
||||
</Badge>
|
||||
)}
|
||||
{session.language && (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Globe className="h-3 w-3" />
|
||||
{session.language.toUpperCase()}
|
||||
</Badge>
|
||||
)}
|
||||
{session.sentiment && (
|
||||
<Badge
|
||||
variant={
|
||||
session.sentiment === "positive"
|
||||
? "default"
|
||||
: session.sentiment === "negative"
|
||||
? "destructive"
|
||||
: "secondary"
|
||||
}
|
||||
className="gap-1"
|
||||
>
|
||||
{session.sentiment.charAt(0).toUpperCase() +
|
||||
session.sentiment.slice(1)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{session.category && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<Activity className="h-3 w-3" />
|
||||
{formatCategory(session.category)}
|
||||
</Badge>
|
||||
)}
|
||||
{session.language && (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Globe className="h-3 w-3" />
|
||||
{session.language.toUpperCase()}
|
||||
</Badge>
|
||||
)}
|
||||
{session.sentiment && (
|
||||
<Badge
|
||||
variant={
|
||||
session.sentiment === "positive"
|
||||
? "default"
|
||||
: session.sentiment === "negative"
|
||||
? "destructive"
|
||||
: "secondary"
|
||||
}
|
||||
className="gap-1"
|
||||
>
|
||||
{session.sentiment.charAt(0).toUpperCase() +
|
||||
session.sentiment.slice(1)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for rendering session overview cards
|
||||
*/
|
||||
function SessionOverview({ session }: { session: ChatSession }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="h-8 w-8 text-blue-500" />
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Start Time</p>
|
||||
<p className="font-semibold">
|
||||
{new Date(session.startTime).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Session Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="h-8 w-8 text-blue-500" />
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Start Time</p>
|
||||
<p className="font-semibold">
|
||||
{new Date(session.startTime).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<MessageSquare className="h-8 w-8 text-green-500" />
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Messages</p>
|
||||
<p className="font-semibold">{session.messages?.length || 0}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<MessageSquare className="h-8 w-8 text-green-500" />
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Messages</p>
|
||||
<p className="font-semibold">{session.messages?.length || 0}</p>
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<User className="h-8 w-8 text-purple-500" />
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">User ID</p>
|
||||
<p className="font-semibold truncate">
|
||||
{session.userId || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<User className="h-8 w-8 text-purple-500" />
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">User ID</p>
|
||||
<p className="font-semibold truncate">
|
||||
{session.userId || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity className="h-8 w-8 text-orange-500" />
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Duration</p>
|
||||
<p className="font-semibold">
|
||||
{session.endTime && session.startTime
|
||||
? `${Math.round(
|
||||
(new Date(session.endTime).getTime() -
|
||||
new Date(session.startTime).getTime()) /
|
||||
60000
|
||||
)} min`
|
||||
: "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity className="h-8 w-8 text-orange-500" />
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Duration</p>
|
||||
<p className="font-semibold">
|
||||
{session.endTime && session.startTime
|
||||
? `${Math.round(
|
||||
(new Date(session.endTime).getTime() -
|
||||
new Date(session.startTime).getTime()) /
|
||||
60000
|
||||
)} min`
|
||||
: "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
export default function SessionViewPage() {
|
||||
const params = useParams();
|
||||
const { status } = useSession();
|
||||
const id = params?.id as string;
|
||||
const { session, loading, error } = useSessionData(id, status);
|
||||
|
||||
if (status === "loading") {
|
||||
return <LoadingCard message="Loading session..." />;
|
||||
}
|
||||
|
||||
if (status === "unauthenticated") {
|
||||
return <LoadingCard message="Redirecting to login..." />;
|
||||
}
|
||||
|
||||
if (loading && status === "authenticated") {
|
||||
return <LoadingCard message="Loading session details..." />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <ErrorCard error={error} />;
|
||||
}
|
||||
|
||||
if (!session) {
|
||||
return <SessionNotFoundCard />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-6xl mx-auto">
|
||||
<SessionHeader session={session} />
|
||||
<SessionOverview session={session} />
|
||||
|
||||
{/* Session Details */}
|
||||
<SessionDetails session={session} />
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useId, useState } from "react";
|
||||
import type { z } from "zod";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
@ -21,8 +22,7 @@ import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { formatCategory } from "@/lib/format-enums";
|
||||
import { trpc } from "@/lib/trpc-client";
|
||||
import { sessionFilterSchema } from "@/lib/validation";
|
||||
import type { z } from "zod";
|
||||
import type { sessionFilterSchema } from "@/lib/validation";
|
||||
import type { ChatSession } from "../../../lib/types";
|
||||
|
||||
interface FilterOptions {
|
||||
@ -97,13 +97,13 @@ function FilterSection({
|
||||
<CardHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="relative">
|
||||
<Label htmlFor="search-sessions" className="sr-only">
|
||||
<Label htmlFor={searchId} className="sr-only">
|
||||
Search sessions
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="search-sessions"
|
||||
id={searchId}
|
||||
type="text"
|
||||
placeholder="Search sessions..."
|
||||
value={searchTerm}
|
||||
@ -179,9 +179,9 @@ function FilterSection({
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="start-date">Start Date</Label>
|
||||
<Label htmlFor={startDateId}>Start Date</Label>
|
||||
<Input
|
||||
id="start-date"
|
||||
id={startDateId}
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
@ -190,9 +190,9 @@ function FilterSection({
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="end-date">End Date</Label>
|
||||
<Label htmlFor={endDateId}>End Date</Label>
|
||||
<Input
|
||||
id="end-date"
|
||||
id={endDateId}
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
@ -201,9 +201,9 @@ function FilterSection({
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="sort-by">Sort By</Label>
|
||||
<Label htmlFor={sortById}>Sort By</Label>
|
||||
<select
|
||||
id="sort-by"
|
||||
id={sortById}
|
||||
value={sortKey}
|
||||
onChange={(e) => setSortKey(e.target.value)}
|
||||
className="w-full mt-1 p-2 border border-gray-300 rounded-md"
|
||||
@ -489,7 +489,9 @@ export default function SessionsPage() {
|
||||
} = trpc.dashboard.getSessions.useQuery(
|
||||
{
|
||||
search: debouncedSearchTerm || undefined,
|
||||
category: selectedCategory ? selectedCategory as z.infer<typeof sessionFilterSchema>["category"] : undefined,
|
||||
category: selectedCategory
|
||||
? (selectedCategory as z.infer<typeof sessionFilterSchema>["category"])
|
||||
: undefined,
|
||||
// language: selectedLanguage || undefined, // Not supported in schema yet
|
||||
startDate: startDate || undefined,
|
||||
endDate: endDate || undefined,
|
||||
|
||||
Reference in New Issue
Block a user