# Astrix dashboard A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/astrix-dashboard). - Page, with a live preview: https://shadcn.exchange/r/watermelon/astrix-dashboard - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/astrix-dashboard-light-e949784700677c77.png - Registry item: https://registry.watermelon.sh/r/astrix-dashboard.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://registry.watermelon.sh/r/astrix-dashboard.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react` - Registry items: `avatar`, `button`, `dropdown-menu`, `input-group`, `sidebar`, `table`, `utils` ## Files ### `src/components/dashboards/astrix-dashboard/components/astrix/classification-content.tsx` ```tsx import { useMemo, useState } from "react"; import { ChevronDown, ChevronLeft, ChevronRight, ListFilter, } from "lucide-react"; import { ClassificationStatusBadge } from "./shared"; import { SearchIcon } from "./icons"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { classificationQueue, type ClassificationRow, type ClassificationStatus, } from "../../data"; import { cn } from "@/lib/utils"; type StatusFilter = "all" | ClassificationStatus; const PAGE_SIZE = 6; const filters: { value: StatusFilter; label: string }[] = [ { value: "all", label: "All" }, { value: "processing", label: "Processing" }, { value: "needs-review", label: "Need Review" }, { value: "approved", label: "Approved" }, ]; export function ClassificationContent() { const [searchQuery, setSearchQuery] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [page, setPage] = useState(1); const counts = useMemo(() => { return { all: classificationQueue.length, processing: classificationQueue.filter( (row) => row.status === "processing", ).length, "needs-review": classificationQueue.filter( (row) => row.status === "needs-review", ).length, approved: classificationQueue.filter((row) => row.status === "approved") .length, }; }, []); const filteredRows = useMemo(() => { const query = searchQuery.trim().toLowerCase(); return classificationQueue.filter((row) => { const matchesStatus = statusFilter === "all" ? true : row.status === statusFilter; const matchesQuery = query === "" || row.product.toLowerCase().includes(query) || row.id.toLowerCase().includes(query) || row.hsCode.toLowerCase().includes(query); return matchesStatus && matchesQuery; }); }, [searchQuery, statusFilter]); const totalPages = Math.max(1, Math.ceil(filteredRows.length / PAGE_SIZE)); const currentPage = Math.min(page, totalPages); const pageStart = (currentPage - 1) * PAGE_SIZE; const pageRows = filteredRows.slice(pageStart, pageStart + PAGE_SIZE); const setFilter = (value: StatusFilter) => { setStatusFilter(value); setPage(1); }; return (

Classification Queue

Review and manage AI-powered HS code classifications

Filters
{filters.find((filter) => filter.value === statusFilter)?.label} setFilter(value as StatusFilter)} > {filters.map((filter) => ( {filter.label} {counts[filter.value]} ))}
{ setSearchQuery(event.target.value); setPage(1); }} />
{ setSearchQuery(event.target.value); setPage(1); }} />
{filters.map((filter) => { const isActive = statusFilter === filter.value; return ( ); })}
Product HS Code Confidence Status Submitted {pageRows.map((row) => ( ))}

{pageRows.length} out of {filteredRows.length} Showing {pageRows.length} of {filteredRows.length} result {filteredRows.length === 1 ? "" : "s"}

{getPageItems(currentPage, totalPages).map((item, index) => ( ))}
); } function ClassificationRowItem({ row }: { row: ClassificationRow }) { return (

{row.product}

{row.id}

 {row.hsCode} {row.confidence} {row.submitted} ); } function PageItem({ item, currentPage, onSelect, }: { item: number | "ellipsis"; currentPage: number; onSelect: (page: number) => void; }) { if (item === "ellipsis") { return ( ... ); } return ( ); } function getPageItems(current: number, total: number): (number | "ellipsis")[] { if (total <= 5) { return Array.from({ length: total }, (_, index) => index + 1); } if (current <= 2) { return [1, 2, "ellipsis", total - 1, total]; } if (current >= total - 1) { return [1, 2, "ellipsis", total - 1, total]; } return [1, "ellipsis", current, "ellipsis", total]; } ``` ### `src/components/dashboards/astrix-dashboard/components/astrix/dashboard-content.tsx` ```tsx import { useState } from "react"; import { Minus, Plus } from "lucide-react"; import { CalendarIcon, ChevronDownIcon, ChevronRightIcon, ExportIcon, FullscreenIcon, MetricCubeIcon, TrendingUpIcon, } from "./icons"; import { DashboardLink } from "./navigation"; import { ClassificationStatusBadge } from "./shared"; import { PipelineSample } from "./pipeline-sample"; import { Button, buttonVariants } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { classificationStream, dashboardMetricsByRange, dateRangeOptions, type ClassificationRow, type DateRange, type MetricCard, } from "../../data"; export function DashboardContent() { return (
); } function OverviewSection() { const [dateRange, setDateRange] = useState("last-7-days"); const rangeLabel = dateRangeOptions.find( (option) => option.value === dateRange, )?.label; return (

Trade Compliance Overview

Monitor AI-powered trade compliance operations.

{rangeLabel} setDateRange(value as DateRange)} > {dateRangeOptions.map((option) => ( {option.label} ))}
{dashboardMetricsByRange[dateRange].map((metric) => ( ))}
); } function MetricCardItem({ metric }: { metric: MetricCard }) { return (

{metric.label}

{metric.value}

{metric.trend ? (
{metric.trend.tone === "positive" ? ( {metric.trend.value} ) : ( {metric.trend.value} )} {metric.trend.label}
) : null} {metric.footnote ? (

{metric.footnote}

) : null}
); } function PipelineSection() { return (

Live Classification Pipeline

Live Pipeline
Pipeline: Global Import standard v2.1
); } function StreamSection() { return (

Live Classification Stream

Review and manage AI-powered HS code classifications

Product HS Code Confidence Status Submitted {classificationStream.map((row) => ( ))}
); } function StreamRow({ row }: { row: ClassificationRow }) { return (

{row.product}

{row.id}

 {row.hsCode} {row.confidence} {row.submitted} ); } ``` ### `src/components/dashboards/astrix-dashboard/components/astrix/icons.tsx` ```tsx import type { SVGProps } from "react"; type IconProps = SVGProps; export function HomeIcon({ className, ...props }: IconProps) { return ( ); } export function ClassificationIcon({ className, ...props }: IconProps) { return ( ); } export function ReportsIcon({ className, ...props }: IconProps) { return ( ); } export function IntegrationIcon({ className, ...props }: IconProps) { return ( ); } export function ComplianceIcon({ className, ...props }: IconProps) { return ( ); } export function SettingsIcon({ className, ...props }: IconProps) { return ( ); } export function SidebarToggleIcon({ className, ...props }: IconProps) { return ( ); } export function SearchIcon({ className, ...props }: IconProps) { return ( ); } export function CmdIcon({ className, ...props }: IconProps) { return ( ); } export function BellIcon({ className, ...props }: IconProps) { return ( ); } export function ImportProductIcon({ className, ...props }: IconProps) { return ( ); } export function CalendarIcon({ className, ...props }: IconProps) { return ( ); } export function ChevronDownIcon({ className, ...props }: IconProps) { return ( ); } export function ChevronRightIcon({ className, ...props }: IconProps) { return ( ); } export function ExportIcon({ className, ...props }: IconProps) { return ( ); } export function MetricCubeIcon({ className, ...props }: IconProps) { return ( ); } export function TrendingUpIcon({ className, ...props }: IconProps) { return ( ); } export function CheckCircleIcon({ className, ...props }: IconProps) { return ( ); } export function WarningCircleIcon({ className, ...props }: IconProps) { return ( ); } export function FullscreenIcon({ className, ...props }: IconProps) { return ( ); } ``` ### `src/components/dashboards/astrix-dashboard/components/astrix/logo.tsx` ```tsx import type { SVGProps } from "react"; import { cn } from "@/lib/utils"; export function AstrixLogo({ className, ...props }: SVGProps) { return ( ); } ``` ### `src/components/dashboards/astrix-dashboard/components/astrix/navigation.tsx` ```tsx import { createContext, useContext, useMemo, useState, type AnchorHTMLAttributes, type MouseEvent, type ReactNode, } from "react"; type DashboardNavigation = { pathname: string; navigate: (pathname: string) => void; }; const DashboardNavigationContext = createContext( null, ); export function DashboardNavigationProvider({ children, }: { children: ReactNode; }) { const [pathname, setPathname] = useState("/"); const value = useMemo( () => ({ pathname, navigate: setPathname }), [pathname], ); return ( {children} ); } export function useDashboardNavigation() { const context = useContext(DashboardNavigationContext); if (!context) { throw new Error( "useDashboardNavigation must be used within DashboardNavigationProvider", ); } return context; } export function DashboardLink({ href, onClick, ...props }: AnchorHTMLAttributes & { href: string }) { const { navigate } = useDashboardNavigation(); function handleClick(event: MouseEvent) { onClick?.(event); if ( event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ) { return; } event.preventDefault(); navigate(href); } return ; } ``` ### `src/components/dashboards/astrix-dashboard/components/astrix/pipeline-sample.tsx` ```tsx import type { SVGProps } from "react"; import { cn } from "@/lib/utils"; export function PipelineSample({ className, ...props }: SVGProps) { return ( ); } ``` ### `src/components/dashboards/astrix-dashboard/components/astrix/reports-content.tsx` ```tsx import { useMemo, useState, type ComponentType, type SVGProps } from "react"; import { ArrowRight, Calendar, ClipboardList, FileText, FolderDown, ListFilter, Shield, Wallet, } from "lucide-react"; import { ChevronDownIcon } from "./icons"; import { ReportStatusBadge } from "./shared"; import { Button, buttonVariants } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { dateRangeOptions, generatedReports, reportTypes, type DateRange, type GeneratedReport, type ReportStatus, type ReportType, } from "../../data"; import { cn } from "@/lib/utils"; type ReportTypeFilter = "all" | ReportType; type ReportStatusFilter = "all" | ReportStatus; type SvgIcon = ComponentType>; const reportTypeIcons: Record = { "cf-28": FileText, "cf-29": Wallet, "classification-audit": ClipboardList, "compliance-summary": Shield, }; const reportTypeFilterOptions: { value: ReportTypeFilter; label: string }[] = [ { value: "all", label: "All Report Type" }, ...reportTypes.map((type) => ({ value: type.id as ReportTypeFilter, label: type.typeLabel, })), ]; const reportStatusFilterOptions: { value: ReportStatusFilter; label: string; }[] = [ { value: "all", label: "All Status" }, { value: "completed", label: "Completed" }, { value: "processing", label: "Processing" }, ]; export function ReportsContent() { const [typeFilter, setTypeFilter] = useState("all"); const [statusFilter, setStatusFilter] = useState("all"); const [dateRange, setDateRange] = useState("last-7-days"); const [filtersOpen, setFiltersOpen] = useState(false); const filteredReports = useMemo(() => { return generatedReports.filter((report) => { const matchesType = typeFilter === "all" ? true : report.type === typeFilter; const matchesStatus = statusFilter === "all" ? true : report.status === statusFilter; return matchesType && matchesStatus; }); }, [typeFilter, statusFilter]); const typeFilterLabel = reportTypeFilterOptions.find((option) => option.value === typeFilter) ?.label ?? "All Report Type"; const statusFilterLabel = reportStatusFilterOptions.find((option) => option.value === statusFilter) ?.label ?? "All Status"; const dateRangeLabel = dateRangeOptions.find((option) => option.value === dateRange)?.label ?? "Last 7 Days"; const typeFilterControl = ( {typeFilterLabel} setTypeFilter(value as ReportTypeFilter)} > {reportTypeFilterOptions.map((option) => ( {option.label} ))} ); const statusFilterControl = ( {statusFilterLabel} setStatusFilter(value as ReportStatusFilter) } > {reportStatusFilterOptions.map((option) => ( {option.label} ))} ); const dateFilterControl = ( {dateRangeLabel} setDateRange(value as DateRange)} > {dateRangeOptions.map((option) => ( {option.label} ))} ); return (

Compliance Reports

Generate and manage regulatory compliance documentation

Select a report type to generate compliance documentation

{reportTypes.map((type) => { const Icon = reportTypeIcons[type.id]; return (

{type.title}

{type.description}

); })}

Generated Reports

Download and manage compliance documentation

{dateFilterControl}
{filtersOpen ? (
{typeFilterControl}
{statusFilterControl}
) : null}

Generated Reports

Download and manage compliance documentation

{dateFilterControl}
{typeFilterControl} {statusFilterControl}
Report Name Type Status Date Generated Action {filteredReports.map((report) => ( ))}
); } function ReportRowItem({ report }: { report: GeneratedReport }) { const canDownload = report.status === "completed"; return (

{report.name}

{report.id}

 {report.typeLabel} {report.generated} ); } ``` ### `src/components/dashboards/astrix-dashboard/components/astrix/shared.tsx` ```tsx import { Clock } from "lucide-react"; import { CheckCircleIcon, WarningCircleIcon } from "./icons"; import type { ClassificationStatus, ReportStatus } from "../../data"; const classificationStatusConfig = { approved: { label: "Approved", className: "bg-success/10 text-success", icon: CheckCircleIcon, }, "needs-review": { label: "Needs Review", className: "bg-primary/10 text-primary", icon: WarningCircleIcon, }, processing: { label: "Processing", className: "bg-info/10 text-info", icon: Clock, }, } as const; const reportStatusConfig = { completed: { label: "Completed", className: "bg-success/10 text-success", icon: CheckCircleIcon, }, processing: { label: "Processing", className: "bg-info/10 text-info", icon: Clock, }, } as const; export function ClassificationStatusBadge({ status, }: { status: ClassificationStatus; }) { const config = classificationStatusConfig[status]; const Icon = config.icon; return ( {config.label} ); } export function ReportStatusBadge({ status }: { status: ReportStatus }) { const config = reportStatusConfig[status]; const Icon = config.icon; return ( {config.label} ); } ``` ### `src/components/dashboards/astrix-dashboard/components/astrix/sidebar.tsx` Left out to keep this page a readable size (7,204 characters). It is in the registry item above. ### `src/components/dashboards/astrix-dashboard/components/astrix/theme-provider.tsx` Left out to keep this page a readable size (1,924 characters). It is in the registry item above. ### `src/components/dashboards/astrix-dashboard/components/astrix/topbar.tsx` Left out to keep this page a readable size (7,041 characters). It is in the registry item above. ### `src/components/dashboards/astrix-dashboard/dashboard-layout.tsx` Left out to keep this page a readable size (967 characters). It is in the registry item above. ### `src/components/dashboards/astrix-dashboard/dashboard.css` Left out to keep this page a readable size (8,841 characters). It is in the registry item above. ### `src/components/dashboards/astrix-dashboard/data.tsx` Left out to keep this page a readable size (11,380 characters). It is in the registry item above. ### `src/components/dashboards/astrix-dashboard/demo.tsx` Left out to keep this page a readable size (1,185 characters). It is in the registry item above.