document-stats.tsx)¶

Overview¶

Statistics display component that shows document processing and request metrics over different time periods.

Features¶

Time range selection
Document processing stats
Request answering stats
Responsive grid layout
Card-based display
Interactive selection

Dependencies¶

import { useState } from 'react';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { FileTextIcon, InfoIcon } from 'lucide-react';

Props¶

type TimeRange = 'last_7_days' | 'last_30_days' | 'last_24_hours';

interface StatsData {
  documentsProcessed: number;
  requestsAnswered: number;
}

interface DocumentStatsProps {
  last7Days: StatsData;
  last30Days: StatsData;
  last24Hours: StatsData;
}

Implementation¶

State Management¶

const [timeRange, setTimeRange] = useState<TimeRange>('last_7_days');
const stats = timeRange === 'last_7_days' ? last7Days : timeRange === 'last_30_days' ? last30Days : last24Hours;

Methods¶

const handleTimeRangeChange = (value: TimeRange) => {
  setTimeRange(value);
};

Unique Functionality¶

Dynamic time range switching
Responsive stat display
Card-based metrics
Icon integration
Flexible grid layout

HTML Structure¶

<div className="space-y-4">
  <Select value={timeRange} onValueChange={(value: TimeRange) => setTimeRange(value)}>
    <SelectTrigger className="w-[180px] text-white">
      <SelectValue placeholder="Select time range" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="last_24_hours">Last 24 Hours</SelectItem>
      <SelectItem value="last_7_days">Last 7 Days</SelectItem>
      <SelectItem value="last_30_days">Last 30 Days</SelectItem>
    </SelectContent>
  </Select>

  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <Card className="h-[25vh] flex flex-col">
      <CardHeader>
        <CardTitle>Documents Processed</CardTitle>
        <FileTextIcon />
      </CardHeader>
      <CardContent>
        <div>{stats.documentsProcessed}</div>
      </CardContent>
    </Card>
    {/* Similar card for Requests Answered */}
  </div>
</div>

API Integration¶

No direct API integration.

Components Used¶

Notes¶

Uses Tailwind CSS for styling
Implements responsive design
Features interactive time selection
Displays metrics in card format
Supports multiple time ranges