Views

Copy"use client"
 
import { useMemo, useState } from "react"
import { Globe, Grid3x3, List, Search } from "lucide-react"
 
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select"
 
import { DomainCard, DomainCompactCard } from "./card"
import { DOMAIN_STATUSES } from "./config"
import type { DomainRequestWithSchool } from "./types"
import { sortDomains } from "./util"
 
interface AllDomainsProps {
  domains: DomainRequestWithSchool[]
  defaultView?: "grid" | "list"
}
 
export function AllDomains({ domains, defaultView = "grid" }: AllDomainsProps) {
  const [view, setView] = useState<"grid" | "list">(defaultView)
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("")
 
  const filteredDomains = useMemo(() => {
    let result = domains
    if (search) {
      const q = search.toLowerCase()
      result = result.filter(
        (d) =>
          d.domain.toLowerCase().includes(q) ||
          d.school.name.toLowerCase().includes(q)
      )
    }
    if (statusFilter) result = result.filter((d) => d.status === statusFilter)
    return sortDomains(result, "createdAt", "desc")
  }, [domains, search, statusFilter])
 
  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center gap-4">
        <Input
          placeholder="Search domains..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-40"><SelectValue placeholder="All" /></SelectTrigger>
          <SelectContent>
            <SelectItem value="">All</SelectItem>
            {DOMAIN_STATUSES.map((s) => (
              <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
            ))}
          </SelectContent>
        </Select>
        <div className="flex gap-1">
          <Button variant={view === "grid" ? "default" : "ghost"} size="icon" onClick={() => setView("grid")}>
            <Grid3x3 className="size-4" />
          </Button>
          <Button variant={view === "list" ? "default" : "ghost"} size="icon" onClick={() => setView("list")}>
            <List className="size-4" />
          </Button>
        </div>
      </div>
 
      {filteredDomains.length === 0 ? (
        <div className="flex flex-col items-center py-12 text-center">
          <Globe className="text-muted-foreground mb-4 size-12" />
          <h3>No domains found</h3>
          <Button variant="outline" onClick={() => { setSearch(""); setStatusFilter("") }}>
            Clear Filters
          </Button>
        </div>
      ) : view === "grid" ? (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {filteredDomains.map((d) => <DomainCard key={d.id} domain={d} />)}
        </div>
      ) : (
        <div className="space-y-2">
          {filteredDomains.map((d) => <DomainCompactCard key={d.id} domain={d} />)}
        </div>
      )}
    </div>
  )
}

Copy"use client"
 
import { InvoiceCard, InvoiceStatsCard } from "./card"
import { isInvoiceOverdue } from "./util"
 
export function FeaturedInvoices({ invoices, maxItems = 6 }) {
  const featured = invoices.slice(0, maxItems)
  return <div className="grid gap-4 md:grid-cols-3">{featured.map((i) => <InvoiceCard key={i.id} invoice={i} />)}</div>
}
 
export function RecentInvoices({ invoices, maxItems = 5 }) {
  const recent = [...invoices]
    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    .slice(0, maxItems)
  return <div className="space-y-2">{recent.map((i) => <InvoiceCard key={i.id} invoice={i} compact />)}</div>
}
 
export function RequiringAttention({ invoices }) {
  const overdue = invoices.filter((i) => isInvoiceOverdue(i.periodEnd, i.status))
  if (overdue.length === 0) return null
  return <div>{/* ... */}</div>
}
 
export function OverviewStats({ invoices }) {
  const totalRevenue = invoices.reduce((sum, i) => sum + i.amountPaid, 0)
  return <InvoiceStatsCard total={totalRevenue} />
}