[V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import AutoDownloadScreen from "@/components/auto-download-screen"; export default function Home() { return (

); } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 222 22% 11%; /* #171C25 */ --foreground: 215 28% 90%; /* #E2E8F0 */ --card: 222 25% 14%; /* #1B202C */ --card-foreground: 215 28% 90%; /* #E2E8F0 */ --popover: 222 22% 11%; --popover-foreground: 215 28% 90%; --primary: 217 91% 60%; --primary-foreground: 210 40% 98%; --secondary: 223 18% 30%; --secondary-foreground: 210 40% 98%; --muted: 223 18% 30%; --muted-foreground: 215 16% 65%; --accent: 223 18% 30%; --accent-foreground: 210 40% 98%; --destructive: 0 84% 60%; --destructive-foreground: 210 40% 98%; --success: 142 76% 36%; --success-foreground: 210 40% 98%; --warning: 48 96% 53%; --warning-foreground: 210 40% 98%; --queued: 217 91% 60%; --queued-foreground: 210 40% 98%; --partial-success: 38 92% 50%; --partial-success-foreground: 210 40% 98%; --border: 223 18% 30%; --input: 223 18% 30%; --ring: 217 91% 60%; --radius: 0.5rem; } .dark { /* The values are already set in :root for a dark-by-default theme */ } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isEdit="true" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", success: "border-transparent bg-success text-success-foreground", warning: "border-transparent bg-warning text-warning-foreground", queued: "border-transparent bg-queued text-queued-foreground", partialSuccess: "border-transparent bg-partial-success text-partial-success-foreground", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (

) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, success: { DEFAULT: "hsl(var(--success))", foreground: "hsl(var(--success-foreground))", }, warning: { DEFAULT: "hsl(var(--warning))", foreground: "hsl(var(--warning-foreground))", }, queued: { DEFAULT: "hsl(var(--queued))", foreground: "hsl(var(--queued-foreground))", }, 'partial-success': { DEFAULT: "hsl(var(--partial-success))", foreground: "hsl(var(--partial-success-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef( ({ className, ...props }, ref) => { return (

)
  }
)
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="components/auto-download-screen.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useMemo, useRef, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { Textarea } from "@/components/ui/textarea"
import { cn } from "@/lib/utils"
import { format } from "date-fns"
import {
  LayoutDashboard,
  FileText,
  BarChart3,
  Search,
  Share2,
  FileImage,
  MessageSquareReply,
  Download,
  Users,
  Zap,
  Menu,
  X,
  Bell,
  User,
  CalendarIcon,
} from "lucide-react"

interface DownloadRequest {
  id: number
  method: string
  scheduledDate: Date
  exportFormat: string
  status: Status
  sourceName?: string
  totalCount?: number
  successCount?: number
  failedIds?: (string | number)[]
  progress?: number
}

export default function AutoDownloadScreen() {
  const [isAdvancedView, setIsAdvancedView] = useState(false)
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const resultsTableRef = useRef<HTMLDivElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [notificationCount, setNotificationCount] = useState(5) // Example notification count

const [downloadMethod, setDownloadMethod] = useState<DownloadMethod>("selection")
  const [uploadType, setUploadType] = useState<UploadType>("")
  const [selectedTemplate, setSelectedTemplate] = useState<string>("")
  const [batch, setBatch] = useState<string>("")
  const [uploadedFile, setUploadedFile] = useState<File | null>(null)
  const [pastedIds, setPastedIds] = useState<string>("")

const [exportFormat, setExportFormat] = useState<ExportFormat | "">("")
  const [scheduleDate, setScheduleDate] = useState<Date | undefined>(undefined)
  const [includeTracking, setIncludeTracking] = useState<boolean>(false)
  const [detailsRequest, setDetailsRequest] = useState<DownloadRequest | null>(null)

const [requests, setRequests] = useState<DownloadRequest[]>([
    {
      id: 1,
      method: "Download Batch",
      scheduledDate: new Date(new Date().setDate(new Date().getDate() - 1)),
      exportFormat: "Notice ID",
      status: "Completed",
      sourceName: "Batch A",
      totalCount: 250,
    },
    {
      id: 2,
      method: "Download Specific Documents",
      scheduledDate: new Date(),
      exportFormat: "Reference ID",
      status: "In Progress",
      sourceName: "references_q3.csv",
      totalCount: 1520,
      progress: 30,
    },
    {
      id: 5,
      method: "Download Specific Documents",
      scheduledDate: new Date(new Date().setDate(new Date().getDate() - 3)),
      exportFormat: "Reference ID",
      status: "Partial Success",
      sourceName: "partial_import.csv",
      totalCount: 100,
      successCount: 95,
      failedIds: ["REF008", "REF015", "REF042", "REF088", "REF091"],
    },
    {
      id: 4,
      method: "Download Batch",
      scheduledDate: new Date(new Date().setDate(new Date().getDate() + 1)),
      exportFormat: "Reference ID",
      status: "Queued",
      sourceName: "Batch C",
      totalCount: 480,
    },
    {
      id: 3,
      method: "Download Specific Documents",
      scheduledDate: new Date(new Date().setDate(new Date().getDate() - 2)),
      exportFormat: "Notice ID",
      status: "Unsuccessful",
      sourceName: "failed_notices.csv",
      totalCount: 85,
    },
  ])

const [dateRange, setDateRange] = useState<{
    from: Date | undefined
    to: Date | undefined
  }>({
    from: undefined,
    to: undefined,
  })

useEffect(() => {
    const interval = setInterval(() => {
      setRequests((prevRequests) => {
        let hasChanged = false
        const updatedRequests = prevRequests.map((req) => {
          if (req.status === "In Progress" && (req.progress || 0) < 100) {
            hasChanged = true
            const newProgress = Math.min((req.progress || 0) + Math.random() * 15, 100)
            if (newProgress >= 100) {
              return { ...req, status: "Completed", progress: 100 }
            }
            return { ...req, progress: newProgress }
          }
          return req
        })
        return hasChanged ? updatedRequests : prevRequests
      })
    }, 2000) // Update every 2 seconds

return () => clearInterval(interval)
  }, [])

const filteredRequests = useMemo(() => {
    if (!dateRange.from && !dateRange.to) {
      return requests
    }

return requests.filter((req) => {
      const reqDate = new Date(req.scheduledDate)
      reqDate.setHours(0, 0, 0, 0) // Reset time for date comparison

if (dateRange.from && dateRange.to) {
        const fromDate = new Date(dateRange.from)
        const toDate = new Date(dateRange.to)
        fromDate.setHours(0, 0, 0, 0)
        toDate.setHours(23, 59, 59, 999)
        return reqDate >= fromDate && reqDate <= toDate
      } else if (dateRange.from) {
        const fromDate = new Date(dateRange.from)
        fromDate.setHours(0, 0, 0, 0)
        return reqDate >= fromDate
      } else if (dateRange.to) {
        const toDate = new Date(dateRange.to)
        toDate.setHours(23, 59, 59, 999)
        return reqDate <= toDate
      }

return true
    })
  }, [requests, dateRange])

const isExportSettingsVisible = useMemo(() => {
    if (downloadMethod === "selection" && selectedTemplate && batch) return true
    if (downloadMethod === "upload" && uploadType && (uploadedFile || pastedIds)) return true
    return false
  }, [downloadMethod, selectedTemplate, batch, uploadType, uploadedFile, pastedIds])

const handleScheduleDownload = () => {
    if (!exportFormat) return

const newRequestDate = scheduleDate || new Date()

let method = ""
    let sourceName: string | undefined = undefined
    let totalCount: number | undefined = undefined

if (downloadMethod === "selection") {
      method = "Download Batch"
      const batchMap: { [key: string]: string } = { a: "Batch A", b: "Batch B", c: "Batch C" }
      sourceName = batchMap[batch] || `Batch ${batch.toUpperCase()}`
      totalCount = Math.floor(Math.random() * 300) + 50
    } else if (downloadMethod === "upload" && uploadType) {
      method = "Download Specific Documents"
      if (uploadedFile) {
        sourceName = uploadedFile.name
        totalCount = Math.floor(Math.random() * 1000) + 50 // Simulate count from file
      } else if (pastedIds) {
        sourceName = "Pasted IDs"
        totalCount = pastedIds.split("\n").filter((id) => id.trim() !== "").length
      }
    }

const newRequest: DownloadRequest = {
      id: requests.length + 1,
      method,
      scheduledDate: newRequestDate,
      exportFormat: exportFormat === "notice_id" ? "Notice ID" : "Reference ID",
      status: "Queued",
      sourceName,
      totalCount,
    }
    setRequests([newRequest, ...requests])
  }

const getStatusComponent = (status: Status, progress?: number) => {
    switch (status) {
      case "In Progress":
        return (
          <div className="flex flex-col gap-2 w-[120px]">
            <Badge variant="warning">In Progress</Badge>
            <Progress value={progress} className="h-2" />
          </div>
        )
      case "Completed":
        return <Badge variant="success">Completed</Badge>
      case "Queued":
        return <Badge variant="queued">Queued</Badge>
      case "Partial Success":
        return <Badge variant="partialSuccess">Partial Success</Badge>
      case "Unsuccessful":
        return <Badge variant="destructive">Unsuccessful</Badge>
      default:
        return <Badge>{status}</Badge>
    }
  }

const handleDateChange = (date: Date | undefined) => {
    if (!date) {
      setScheduleDate(undefined)
      return
    }
    const newDate = new Date(date)
    if (scheduleDate) {
      newDate.setHours(scheduleDate.getHours())
      newDate.setMinutes(scheduleDate.getMinutes())
    } else {
      newDate.setHours(9)
      newDate.setMinutes(0)
    }
    setScheduleDate(newDate)
  }

const handleTimeChange = (timeString: string) => {
    if (!scheduleDate) return

const newDate = new Date(scheduleDate)
    const [hours, minutes] = timeString.split(":").map(Number)
    newDate.setHours(hours)
    newDate.setMinutes(minutes)
    setScheduleDate(newDate)
  }

const clearDateFilter = () => {
    setDateRange({ from: undefined, to: undefined })
  }

return (
    <TooltipProvider>
      <div className="flex h-screen bg-background">
        {/* Mobile sidebar overlay */}
        {sidebarOpen && (
          <div className="fixed inset-0 z-40 bg-black bg-opacity-50 lg:hidden" onClick={() => setSidebarOpen(false)} />
        )}

{/* Sidebar */}
        <div
          className={cn(
            "fixed inset-y-0 left-0 z-50 w-64 bg-card border-r border-border transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
            sidebarOpen ? "translate-x-0" : "-translate-x-full",
          )}
        >
          <div className="flex flex-col h-full">
            {/* Logo and company name */}
            <div className="flex items-center justify-between p-6 border-b border-border">
              <div className="flex items-center space-x-3">
                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                  <span className="text-primary-foreground font-bold text-sm">IC</span>
                </div>
                <span className="text-lg font-semibold text-foreground">Incase360</span>
              </div>
              <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setSidebarOpen(false)}>
                <X className="h-5 w-5" />
              </Button>
            </div>

{/* Navigation items */}
            <nav className="flex-1 px-4 py-6 space-y-2 flex flex-col">
              <div className="space-y-2">
                {[
                  { icon: LayoutDashboard, label: "Dashboard", active: false },
                  { icon: FileText, label: "All Notice", active: false },
                  { icon: BarChart3, label: "CSV Report", active: false },
                  { icon: Search, label: "Search", active: false },
                  { icon: Share2, label: "File Sharing", active: false },
                  { icon: FileImage, label: "Letterhead", active: false },
                  { icon: MessageSquareReply, label: "Reply Management", active: false },
                  { icon: Download, label: "Downloads", active: false },
                  { icon: Users, label: "Sub User", active: false },
                  { icon: Zap, label: "Auto-download", active: true },
                ].map((item) => (
                  <button
                    key={item.label}
                    className={cn(
                      "w-full flex items-center space-x-3 px-3 py-2 rounded-lg text-left transition-colors",
                      item.active
                        ? "bg-primary text-primary-foreground"
                        : "text-muted-foreground hover:text-foreground hover:bg-accent",
                    )}
                  >
                    <item.icon className="h-5 w-5" />
                    <span className="font-medium">{item.label}</span>
                  </button>
                ))}
              </div>

{/* Profile section at bottom */}
              <div className="mt-auto pt-4 border-t border-border space-y-2">
                {/* Notifications */}
                <button className="w-full flex items-center justify-between px-3 py-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors">
                  <div className="flex items-center space-x-3">
                    <Bell className="h-5 w-5" />
                    <span className="font-medium">Notifications</span>
                  </div>
                  {notificationCount > 0 && (
                    <div className="bg-destructive text-destructive-foreground text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
                      {notificationCount > 99 ? "99+" : notificationCount}
                    </div>
                  )}
                </button>

{/* Profile */}
                <button className="w-full flex items-center space-x-3 px-3 py-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors">
                  <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                    <User className="h-4 w-4 text-primary-foreground" />
                  </div>
                  <div className="flex-1 text-left">
                    <div className="font-medium text-sm">John Doe</div>
                    <div className="text-xs text-muted-foreground">john.doe@company.com</div>
                  </div>
                </button>
              </div>
            </nav>
          </div>
        </div>

{/* Main content */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Top bar for mobile */}
          <div className="lg:hidden flex items-center justify-between p-4 border-b border-border bg-card">
            <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(true)}>
              <Menu className="h-5 w-5" />
            </Button>
            <div className="flex items-center space-x-2">
              <div className="w-6 h-6 bg-primary rounded flex items-center justify-center">
                <span className="text-primary-foreground font-bold text-xs">IC</span>
              </div>
              <span className="font-semibold text-foreground">Incase360</span>
            </div>
          </div>

{/* Main content area */}
          <div className="flex-1 overflow-auto">
            <div className="p-4 sm:p-6 lg:p-8">
              <div className="max-w-7xl mx-auto space-y-6">
                {/* Rest of the existing content goes here - keep everything from the original header onwards */}
                <header className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
                  <div>
                    <h1 className="text-3xl font-bold tracking-tight text-foreground">Auto-download</h1>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Create and manage your notice download requests.
                    </p>
                  </div>
                  <Button
                    variant="outline"
                    onClick={() => {
                      const nextState = !isAdvancedView
                      setIsAdvancedView(nextState)
                      if (nextState) {
                        setTimeout(() => {
                          resultsTableRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })
                        }, 100)
                      }
                    }}
                    className="flex-shrink-0"
                  >
                    {isAdvancedView ? "Show Download Options" : "View Requests Only"}
                  </Button>
                </header>

{!isAdvancedView && (
                  <>
                    <Alert className="bg-card border-primary/50">
                      <Zap className="h-4 w-4 text-primary" />
                      <AlertTitle className="text-foreground">Welcome!</AlertTitle>
                      <AlertDescription className="text-muted-foreground">
                        Follow the steps below to create a new download request. Your submitted requests will appear in
                        the table at the bottom of the page.
                      </AlertDescription>
                    </Alert>

<Card>
                      <CardHeader>
                        <CardTitle>Step 1: Choose a Download Method</CardTitle>
                        <CardDescription>
                          Start by choosing one of the two methods below to select the notices you want to download.
                        </CardDescription>
                      </CardHeader>
                      <CardContent>
                        <RadioGroup
                          value={downloadMethod}
                          onValueChange={(value: string) => {
                            const newMethod = value as DownloadMethod
                            setDownloadMethod(newMethod)
                            setSelectedTemplate("")
                            setBatch("")
                            setUploadType("")
                            setUploadedFile(null)
                            setPastedIds("")
                          }}
                          className="grid grid-cols-1 gap-4 md:grid-cols-2"
                        >
                          {["Download Batch", "Download Specific Documents"].map((label, index) => {
                            const value = index === 0 ? "selection" : "upload"
                            return (
                              <Label
                                key={value}
                                htmlFor={value}
                                className={cn(
                                  "flex flex-col items-start space-y-2 rounded-lg border p-4 transition-all hover:bg-accent",
                                  downloadMethod === value ? "border-primary ring-2 ring-primary" : "border-border",
                                )}
                              >
                                <div className="flex items-center space-x-2">
                                  <RadioGroupItem value={value} id={value} />
                                  <span className="font-semibold">{label}</span>
                                </div>
                              </Label>
                            )
                          })}
                        </RadioGroup>

<div className="mt-6 pt-6 border-t">
                          {downloadMethod === "selection" && (
                            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                              <div className="space-y-2">
                                <Label htmlFor="template-select" className="flex items-center">
                                  Select Template
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <FileText className="ml-1.5 h-4 w-4 text-muted-foreground" />
                                    </TooltipTrigger>
                                    <TooltipContent>
                                      <p>Choose the template for the notices you want to download.</p>
                                    </TooltipContent>
                                  </Tooltip>
                                </Label>
                                <Select onValueChange={setSelectedTemplate} value={selectedTemplate}>
                                  <SelectTrigger id="template-select">
                                    <SelectValue placeholder="e.g. Template A" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="template_a">Template A</SelectItem>
                                    <SelectItem value="template_b">Template B</SelectItem>
                                    <SelectItem value="template_c">Template C</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="space-y-2">
                                <Label htmlFor="batch" className="flex items-center">
                                  Select Batch
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <FileText className="ml-1.5 h-4 w-4 text-muted-foreground" />
                                    </TooltipTrigger>
                                    <TooltipContent>
                                      <p>Choose the specific batch for the selected template.</p>
                                    </TooltipContent>
                                  </Tooltip>
                                </Label>
                                <Select onValueChange={setBatch} value={batch}>
                                  <SelectTrigger id="batch">
                                    <SelectValue placeholder="e.g. Batch A" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="a">Batch A</SelectItem>
                                    <SelectItem value="b">Batch B</SelectItem>
                                    <SelectItem value="c">Batch C</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                          )}

{downloadMethod === "upload" && (
                            <div className="space-y-6">
                              <div>
                                <Label className="font-semibold">
                                  Select Upload Type <span className="text-red-500">*</span>
                                </Label>
                                <RadioGroup
                                  value={uploadType}
                                  onValueChange={(value) => setUploadType(value as UploadType)}
                                  className="flex items-center space-x-4 mt-2"
                                >
                                  <div className="flex items-center space-x-2">
                                    <RadioGroupItem value="reference" id="reference-id" />
                                    <Label htmlFor="reference-id" className="font-normal">
                                      Reference ID
                                    </Label>
                                  </div>
                                  <div className="flex items-center space-x-2">
                                    <RadioGroupItem value="notice" id="notice-id" />
                                    <Label htmlFor="notice-id" className="font-normal">
                                      Notice ID
                                    </Label>
                                  </div>
                                </RadioGroup>
                              </div>

{uploadType && (
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
                                  <div className="space-y-2">
                                    <Label htmlFor="csv-upload" className={cn(pastedIds && "text-muted-foreground")}>
                                      Option 1: Upload CSV File
                                    </Label>
                                    <p
                                      className={cn(
                                        "text-sm text-muted-foreground",
                                        pastedIds && "text-muted-foreground/50",
                                      )}
                                    >
                                      For large datasets, upload a CSV file containing the IDs.
                                    </p>
                                    <div className="relative flex items-center justify-center w-full">
                                      <label
                                        htmlFor="csv-upload"
                                        className={cn(
                                          "flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-background hover:bg-accent",
                                          pastedIds && "cursor-not-allowed opacity-50 bg-muted/50 hover:bg-muted/50",
                                        )}
                                      >
                                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
                                          <FileText className="w-8 h-8 mb-2 text-muted-foreground" />
                                          <p className="mb-2 text-sm text-muted-foreground">
                                            <span className="font-semibold text-primary">Click to upload</span>
                                          </p>
                                          <p className="text-xs text-muted-foreground">
                                            {`CSV file with ${uploadType} IDs`}
                                          </p>
                                        </div>
                                        <Input
                                          id="csv-upload"
                                          type="file"
                                          className="hidden"
                                          accept=".csv"
                                          ref={fileInputRef}
                                          disabled={!!pastedIds}
                                          onChange={(e) => {
                                            const file = e.target.files?.[0] || null
                                            setUploadedFile(file)
                                            if (file) setPastedIds("")
                                          }}
                                        />
                                      </label>
                                    </div>
                                    <div className="flex items-center justify-between mt-2 text-sm">
                                      <p
                                        className={cn("text-muted-foreground truncate pr-2", pastedIds && "opacity-50")}
                                      >
                                        {uploadedFile?.name || "No file selected"}
                                      </p>
                                      <a
                                        href="/sample-file.csv"
                                        download
                                        className={cn(
                                          "font-medium text-primary hover:underline flex items-center gap-1 flex-shrink-0",
                                          pastedIds && "pointer-events-none opacity-50",
                                        )}
                                      >
                                        <FileText className="h-4 w-4" />
                                        Sample
                                      </a>
                                    </div>
                                  </div>
                                  <div className="space-y-2">
                                    <Label htmlFor="paste-ids" className={cn(uploadedFile && "text-muted-foreground")}>
                                      {uploadType === "reference"
                                        ? "Option 2: Paste Reference IDs"
                                        : "Option 2: Paste Notice IDs"}
                                    </Label>
                                    <p
                                      className={cn(
                                        "text-sm text-muted-foreground",
                                        uploadedFile && "text-muted-foreground/50",
                                      )}
                                    >
                                      For smaller datasets, paste the IDs directly into the text area.
                                    </p>
                                    <Textarea
                                      id="paste-ids"
                                      placeholder={`Paste up to 100 ${uploadType} IDs, one per line.`}
                                      className="min-h-[128px]"
                                      value={pastedIds}
                                      disabled={!!uploadedFile}
                                      onChange={(e) => {
                                        const text = e.target.value
                                        setPastedIds(text)
                                        if (text) {
                                          setUploadedFile(null)
                                          if (fileInputRef.current) fileInputRef.current.value = ""
                                        }
                                      }}
                                    />
                                    <p
                                      className={cn(
                                        "text-sm text-muted-foreground",
                                        uploadedFile && "text-muted-foreground/50",
                                      )}
                                    >
                                      A limit of 100 IDs can be pasted at a time.
                                    </p>
                                  </div>
                                </div>
                              )}
                            </div>
                          )}
                        </div>
                      </CardContent>
                    </Card>

{isExportSettingsVisible && (
                      <Card>
                        <CardHeader>
                          <CardTitle>Step 2: Configure Export Settings</CardTitle>
                          <CardDescription>
                            Select a mandatory export format. Other settings are optional.
                          </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <div className="space-y-2">
                              <Label htmlFor="export-format">
                                Export Format <span className="text-red-500">*</span>
                              </Label>
                              <Select
                                onValueChange={(v) => setExportFormat(v as ExportFormat)}
                                value={exportFormat}
                                required
                              >
                                <SelectTrigger id="export-format">
                                  <SelectValue placeholder="Select a format" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="notice_id">Notice ID</SelectItem>
                                  <SelectItem value="reference_id">Reference ID</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="space-y-2">
                              <Label htmlFor="schedule-date">Select Schedule Date & Time (Optional)</Label>
                              <div className="flex items-center gap-2">
                                <Popover>
                                  <PopoverTrigger asChild>
                                    <Button
                                      variant={"outline"}
                                      className={cn(
                                        "flex-1 justify-start text-left font-normal",
                                        !scheduleDate && "text-muted-foreground",
                                      )}
                                    >
                                      <FileText className="mr-2 h-4 w-4" />
                                      {scheduleDate ? format(scheduleDate, "PPP") : <span>Pick a date</span>}
                                    </Button>
                                  </PopoverTrigger>
                                  <PopoverContent className="w-auto p-0">
                                    <Calendar
                                      mode="single"
                                      selected={scheduleDate}
                                      onSelect={handleDateChange}
                                      initialFocus
                                    />
                                  </PopoverContent>
                                </Popover>
                                <Select
                                  onValueChange={handleTimeChange}
                                  value={scheduleDate ? format(scheduleDate, "HH:mm") : ""}
                                  disabled={!scheduleDate}
                                >
                                  <SelectTrigger className="w-[120px]">
                                    <SelectValue placeholder="Time" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {timeSlots.map((slot) => (
                                      <SelectItem key={slot} value={slot}>
                                        {slot}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center space-x-3">
                            <Switch
                              id="include-tracking"
                              checked={includeTracking}
                              onCheckedChange={setIncludeTracking}
                            />
                            <Label htmlFor="include-tracking" className="flex items-center">
                              Include tracking data in PDF
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <FileText className="ml-1.5 h-4 w-4 text-muted-foreground" />
                                </TooltipTrigger>
                                <TooltipContent>
                                  <p>If enabled, a tracking summary will be appended to each PDF.</p>
                                </TooltipContent>
                              </Tooltip>
                            </Label>
                          </div>
                          <div className="flex justify-end">
                            <Button onClick={handleScheduleDownload} disabled={!exportFormat}>
                              Submit Request
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    )}
                  </>
                )}

<Card ref={resultsTableRef}>
                  <CardHeader>
                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                      <div>
                        <CardTitle>Your Download Requests</CardTitle>
                        <CardDescription>
                          Track the status of your current and past download requests here. You can download completed
                          files.
                        </CardDescription>
                      </div>

{/* Date Range Filter */}
                      <div className="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
                        <div className="flex items-center gap-2">
                          <Label className="text-sm font-medium whitespace-nowrap">Filter by date:</Label>
                          <Popover>
                            <PopoverTrigger asChild>
                              <Button
                                variant="outline"
                                className={cn(
                                  "w-[140px] justify-start text-left font-normal",
                                  !dateRange.from && "text-muted-foreground",
                                )}
                              >
                                <CalendarIcon className="mr-2 h-4 w-4" />
                                {dateRange.from ? format(dateRange.from, "dd MMM") : <span>From date</span>}
                              </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-auto p-0" align="start">
                              <Calendar
                                mode="single"
                                selected={dateRange.from}
                                onSelect={(date) => setDateRange((prev) => ({ ...prev, from: date }))}
                                initialFocus
                              />
                            </PopoverContent>
                          </Popover>

<Popover>
                            <PopoverTrigger asChild>
                              <Button
                                variant="outline"
                                className={cn(
                                  "w-[140px] justify-start text-left font-normal",
                                  !dateRange.to && "text-muted-foreground",
                                )}
                              >
                                <CalendarIcon className="mr-2 h-4 w-4" />
                                {dateRange.to ? format(dateRange.to, "dd MMM") : <span>To date</span>}
                              </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-auto p-0" align="start">
                              <Calendar
                                mode="single"
                                selected={dateRange.to}
                                onSelect={(date) => setDateRange((prev) => ({ ...prev, to: date }))}
                                initialFocus
                              />
                            </PopoverContent>
                          </Popover>
                        </div>

{(dateRange.from || dateRange.to) && (
                          <Button variant="ghost" size="sm" onClick={clearDateFilter}>
                            Clear
                          </Button>
                        )}
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="border rounded-lg overflow-hidden">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead className="w-[50px]">Sr. No.</TableHead>
                            <TableHead>Method of Download</TableHead>
                            <TableHead>Scheduled Date and Time</TableHead>
                            <TableHead>Source Name</TableHead>
                            <TableHead>Notice Count</TableHead>
                            <TableHead>Export Format</TableHead>
                            <TableHead>Status</TableHead>
                            <TableHead className="text-right">Actions</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {filteredRequests.length > 0 ? (
                            filteredRequests.map((req, index) => (
                              <TableRow key={req.id}>
                                <TableCell>{index + 1}</TableCell>
                                <TableCell>{req.method}</TableCell>
                                <TableCell>{format(req.scheduledDate, "dd MMM, yyyy p")}</TableCell>
                                <TableCell>{req.sourceName || "-"}</TableCell>
                                <TableCell>{req.totalCount || "-"}</TableCell>
                                <TableCell>{req.exportFormat}</TableCell>
                                <TableCell>{getStatusComponent(req.status, req.progress)}</TableCell>
                                <TableCell className="text-right">
                                  <div className="flex items-center justify-end space-x-1">
                                    {req.status === "Partial Success" && (
                                      <Tooltip>
                                        <TooltipTrigger asChild>
                                          <Button variant="ghost" size="icon" onClick={() => setDetailsRequest(req)}>
                                            <FileText className="h-4 w-4" />
                                            <span className="sr-only">View Reason</span>
                                          </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>View Reason</TooltipContent>
                                      </Tooltip>
                                    )}
                                    <Tooltip>
                                      <TooltipTrigger asChild>
                                        <Button
                                          variant="ghost"
                                          size="icon"
                                          disabled={req.status !== "Completed" && req.status !== "Partial Success"}
                                        >
                                          <Download className="h-4 w-4" />
                                          <span className="sr-only">Download</span>
                                        </Button>
                                      </TooltipTrigger>
                                      <TooltipContent>Download</TooltipContent>
                                    </Tooltip>
                                  </div>
                                </TableCell>
                              </TableRow>
                            ))
                          ) : (
                            <TableRow>
                              <TableCell colSpan={8} className="h-24 text-center text-muted-foreground">
                                {dateRange.from || dateRange.to
                                  ? "No download requests found for the selected date range."
                                  : "Your submitted download requests will appear here."}
                              </TableCell>
                            </TableRow>
                          )}
                        </TableBody>
                      </Table>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Keep the existing Dialog component exactly as it was */}
      <Dialog open={!!detailsRequest} onOpenChange={(isOpen) => !isOpen && setDetailsRequest(null)}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Partial Success Details</DialogTitle>
            <DialogDescription>Details for the request from file: {detailsRequest?.sourceName}</DialogDescription>
          </DialogHeader>
          {detailsRequest && (
            <div className="grid gap-4 py-4">
              <div className="flex justify-between items-center">
                <span className="text-muted-foreground">Total IDs Submitted:</span>
                <span className="font-medium">{detailsRequest.totalCount}</span>
              </div>
              <div className="flex justify-between items-center text-green-400">
                <span>Successfully Downloaded:</span>
                <span className="font-medium">{detailsRequest.successCount}</span>
              </div>
              <div className="flex justify-between items-center text-red-400">
                <span>Failed to Download:</span>
                <span className="font-medium">{detailsRequest.failedIds?.length || 0}</span>
              </div>

{detailsRequest.failedIds && detailsRequest.failedIds.length > 0 && (
                <div className="space-y-2">
                  <Label>Failed IDs:</Label>
                  <div className="max-h-32 overflow-y-auto rounded-md border bg-background p-2">
                    {detailsRequest.failedIds.map((id, index) => (
                      <div key={index} className="text-sm text-muted-foreground">
                        {id}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}
          <DialogFooter>
            <DialogClose asChild>
              <Button type="button" variant="secondary">
                Close
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </TooltipProvider>
  )
}</article></body></html>