# Jobtracker dashboard A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/jobtracker-dashboard). - Page, with a live preview: https://shadcn.exchange/r/watermelon/jobtracker-dashboard - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/jobtracker-dashboard-light-6edddeccab1a9f26.png - Registry item: https://registry.watermelon.sh/r/jobtracker-dashboard.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://registry.watermelon.sh/r/jobtracker-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: `@dnd-kit/core`, `@dnd-kit/modifiers`, `@dnd-kit/sortable`, `@dnd-kit/utilities`, `lucide-react`, `next-themes` - Registry items: `avatar`, `badge`, `button`, `card`, `dropdown-menu`, `input`, `select`, `separator`, `sidebar`, `table`, `tabs`, `tooltip`, `use-mobile`, `utils` ## Files ### `src/components/dashboards/jobtracker-dashboard/assets/icons.tsx` ```tsx import type { SVGProps } from "react"; type IconProps = SVGProps; export function CollapseIcon(props: IconProps) { return ( ); } export function CustomersIcon(props: IconProps) { return ( ); } export function JobsIcon(props: IconProps) { return ( ); } export function SettingsIcon(props: IconProps) { return ( ); } export function LogoutIcon(props: IconProps) { return ( ); } export function BackIcon(props: IconProps) { return ( ); } export function ForwardIcon(props: IconProps) { return ( ); } export function NotificationIcon(props: IconProps) { return ( ); } export function MenuIcon(props: IconProps) { return ( ); } export function SearchIcon(props: IconProps) { return ( ); } export function AddIcon(props: IconProps) { return ( ); } export function EditIcon(props: IconProps) { return ( ); } export function DeleteIcon(props: IconProps) { return ( ); } export function JobDraftIcon(props: IconProps) { return ( ); } export function JobActiveIcon(props: IconProps) { return ( ); } export function JobCustomerIcon(props: IconProps) { return ( ); } export function JobLocationIcon(props: IconProps) { return ( ); } export function JobTimeIcon(props: IconProps) { return ( ); } ``` ### `src/components/dashboards/jobtracker-dashboard/assets/logo.tsx` ```tsx import type { SVGProps } from "react"; export function Logo(props: SVGProps) { return ( ); } ``` ### `src/components/dashboards/jobtracker-dashboard/components/dashboard/customers-content.tsx` ```tsx import { useState } from "react"; import { EllipsisVertical, Pencil, Trash2 } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { buttonVariants, Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { cn } from "@/lib/utils"; import { AddIcon, SearchIcon } from "../../assets/icons"; import { customers } from "../../data"; export function CustomersContent() { return (

Customers

); } const headerClassName = "h-12 px-4 text-sm font-normal text-muted-foreground first:rounded-l-xl last:rounded-r-xl"; const cellClassName = "px-4 py-0"; function CustomerActions({ name, onDelete, }: { name: string; onDelete: () => void; }) { return ( Edit Delete ); } function CustomerTable() { const [customerRows, setCustomerRows] = useState(customers); return ( Name Email Phone Action {customerRows.map((customer) => (
{customer.name.slice(0, 2)} {customer.name}
{customer.email} {customer.phone} setCustomerRows((current) => current.filter(({ email }) => email !== customer.email), ) } /> ))} {customerRows.length === 0 && ( No customers found. )}
); } ``` ### `src/components/dashboards/jobtracker-dashboard/components/dashboard/job-details/estimates-content.tsx` ```tsx import { useState, type CSSProperties } from "react"; import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors, type CollisionDetection, type DragEndEvent, type DragStartEvent, } from "@dnd-kit/core"; import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { ChevronDown, ChevronsUpDown, Copy, EllipsisVertical, GripVertical, Pencil, Trash2, } from "lucide-react"; import { buttonVariants, Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { cn } from "@/lib/utils"; import { AddIcon } from "../../../assets/icons"; import type { EstimateLineItem, EstimateSection } from "../../../data"; type EstimatesContentProps = { sections: EstimateSection[]; }; type SortDirection = "none" | "ascending" | "descending"; type SortableRowData = | { type: "section"; sectionId: string; number: string; label: string; } | { type: "item"; sectionId: string; itemId: string; number: string; label: string; }; const columnCount = 10; const estimateUnits = ["LS", "EA", "HR", "SF"] as const; const tableHeaderClassName = "h-12 px-4 text-sm font-normal text-muted-foreground first:rounded-l-xl last:rounded-r-xl"; const tableCellClassName = "px-4 py-0"; const currencyFormatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }); const matchingRowCollision: CollisionDetection = (args) => { const activeType = args.active.data.current?.type; const matchingContainers = args.droppableContainers.filter( (container) => container.data.current?.type === activeType, ); return closestCenter({ ...args, droppableContainers: matchingContainers, }); }; export function EstimatesContent({ sections }: EstimatesContentProps) { const [estimateSections, setEstimateSections] = useState(sections); const [collapsedSectionIds, setCollapsedSectionIds] = useState>( () => new Set(), ); const [sortDirection, setSortDirection] = useState("none"); const [activeRow, setActiveRow] = useState(null); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 6 }, }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ); function toggleSection(sectionId: string) { setCollapsedSectionIds((current) => { const next = new Set(current); if (next.has(sectionId)) { next.delete(sectionId); } else { next.add(sectionId); } return next; }); } function sortByName() { const nextDirection = sortDirection === "ascending" ? "descending" : "ascending"; const multiplier = nextDirection === "ascending" ? 1 : -1; setEstimateSections((current) => current.map((section) => ({ ...section, items: [...section.items].sort( (a, b) => a.name.localeCompare(b.name) * multiplier, ), })), ); setSortDirection(nextDirection); } function updateItemUnit(sectionId: string, itemId: string, unit: string) { setEstimateSections((current) => current.map((section) => section.id === sectionId ? { ...section, items: section.items.map((item) => item.id === itemId ? { ...item, unit } : item, ), } : section, ), ); } function addLineItem(sectionId: string) { const newItem: EstimateLineItem = { id: crypto.randomUUID(), name: "New line item", quantity: 1, unit: "LS", unitCost: 0, marginPercent: 0, }; setEstimateSections((current) => current.map((section) => section.id === sectionId ? { ...section, items: [...section.items, newItem] } : section, ), ); setCollapsedSectionIds((current) => { const next = new Set(current); next.delete(sectionId); return next; }); setSortDirection("none"); } function duplicateLineItem(sectionId: string, itemId: string) { setEstimateSections((current) => current.map((section) => { if (section.id !== sectionId) { return section; } const itemIndex = section.items.findIndex(({ id }) => id === itemId); const sourceItem = section.items[itemIndex]; if (!sourceItem) { return section; } const duplicate: EstimateLineItem = { ...sourceItem, id: crypto.randomUUID(), name: `${sourceItem.name} copy`, }; const nextItems = [...section.items]; nextItems.splice(itemIndex + 1, 0, duplicate); return { ...section, items: nextItems }; }), ); setSortDirection("none"); } function deleteLineItem(sectionId: string, itemId: string) { setEstimateSections((current) => current.map((section) => section.id === sectionId ? { ...section, items: section.items.filter(({ id }) => id !== itemId), } : section, ), ); setSortDirection("none"); } function handleDragStart(event: DragStartEvent) { setActiveRow(event.active.data.current as SortableRowData); } function handleDragEnd(event: DragEndEvent) { const activeData = event.active.data.current as SortableRowData | undefined; const overData = event.over?.data.current as SortableRowData | undefined; setActiveRow(null); if (!activeData || !overData || event.active.id === event.over?.id) { return; } if (activeData.type === "section" && overData.type === "section") { setEstimateSections((current) => { const oldIndex = current.findIndex( ({ id }) => id === activeData.sectionId, ); const newIndex = current.findIndex( ({ id }) => id === overData.sectionId, ); return arrayMove(current, oldIndex, newIndex); }); setSortDirection("none"); return; } if ( activeData.type === "item" && overData.type === "item" && activeData.sectionId === overData.sectionId ) { setEstimateSections((current) => current.map((section) => { if (section.id !== activeData.sectionId) { return section; } const oldIndex = section.items.findIndex( ({ id }) => id === activeData.itemId, ); const newIndex = section.items.findIndex( ({ id }) => id === overData.itemId, ); return { ...section, items: arrayMove(section.items, oldIndex, newIndex), }; }), ); setSortDirection("none"); } } return ( setActiveRow(null)} onDragEnd={handleDragEnd} > # CSI Code Description Qty Unit Unit Cost Margin Profit Action sectionSortableId(id))} strategy={verticalListSortingStrategy} > {estimateSections.map((section, sectionIndex) => ( toggleSection(section.id)} onAddItem={() => addLineItem(section.id)} onUnitChange={(itemId, unit) => updateItemUnit(section.id, itemId, unit) } onDuplicateItem={(itemId) => duplicateLineItem(section.id, itemId) } onDeleteItem={(itemId) => deleteLineItem(section.id, itemId)} /> ))}
{activeRow ? : null} ); } type SortableEstimateSectionProps = { section: EstimateSection; sectionIndex: number; collapsed: boolean; onToggle: () => void; onAddItem: () => void; onUnitChange: (itemId: string, unit: string) => void; onDuplicateItem: (itemId: string) => void; onDeleteItem: (itemId: string) => void; }; function SortableEstimateSection({ section, sectionIndex, collapsed, onToggle, onAddItem, onUnitChange, onDuplicateItem, onDeleteItem, }: SortableEstimateSectionProps) { const sectionNumber = sectionIndex + 1; const nextLineNumber = `${sectionNumber}.${section.items.length + 1}`; const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id: sectionSortableId(section.id), data: { type: "section", sectionId: section.id, number: String(sectionNumber), label: section.name, } satisfies SortableRowData, }); const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition, position: "relative", zIndex: isDragging ? 1 : undefined, }; return ( { if ( event.target === event.currentTarget && (event.key === "Enter" || event.key === " ") ) { event.preventDefault(); onToggle(); } }} > {sectionNumber} {section.name} {!collapsed && ( itemSortableId(section.id, id))} strategy={verticalListSortingStrategy} > {section.items.map((item, itemIndex) => ( onUnitChange(item.id, unit)} onDuplicate={() => onDuplicateItem(item.id)} onDelete={() => onDeleteItem(item.id)} /> ))} )} {!collapsed && ( {nextLineNumber} )} ); } type SortableEstimateItemRowProps = { item: EstimateLineItem; sectionId: string; number: string; onUnitChange: (unit: string) => void; onDuplicate: () => void; onDelete: () => void; }; function SortableEstimateItemRow({ item, sectionId, number, onUnitChange, onDuplicate, onDelete, }: SortableEstimateItemRowProps) { const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id: itemSortableId(sectionId, item.id), data: { type: "item", sectionId, itemId: item.id, number, label: item.name, } satisfies SortableRowData, }); const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition, position: "relative", zIndex: isDragging ? 2 : undefined, }; return ( {number} {item.name} {item.csiCode ?? "Not set"} {item.description ?? "No description"} {item.quantity.toFixed(2)} {currencyFormatter.format(item.unitCost)} {item.marginPercent}% {currencyFormatter.format(calculateProfit(item))} ); } function LineItemActions({ itemName, onDuplicate, onDelete, }: { itemName: string; onDuplicate: () => void; onDelete: () => void; }) { return ( Edit Duplicate Delete ); } function EstimateDragPreview({ row }: { row: SortableRowData }) { return (
{row.number} {row.label}
); } function sectionSortableId(sectionId: string) { return `section:${sectionId}`; } function itemSortableId(sectionId: string, itemId: string) { return `item:${sectionId}:${itemId}`; } function calculateProfit(item: EstimateLineItem) { const totalCost = item.quantity * item.unitCost; const marginRate = item.marginPercent / 100; if (marginRate <= 0 || marginRate >= 1) { return 0; } return totalCost / (1 - marginRate) - totalCost; } ``` ### `src/components/dashboards/jobtracker-dashboard/components/dashboard/job-details/job-details-content.tsx` ```tsx import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { EstimatesContent } from "./estimates-content"; import { jobEstimates } from "../../../data"; import { useDashboardNavigation } from "../../navigation"; const jobTabs = ["Estimates", "Plans", "Records", "Files"] as const; export function JobDetailsContent() { const { pathname } = useDashboardNavigation(); const jobId = pathname.split("/")[2]; if (!jobId) { return null; } const estimate = jobEstimates.find((item) => item.jobId === jobId); return (
{jobTabs.map((tab) => ( {tab} ))} {jobTabs.slice(1).map((tab) => (
No {tab.toLowerCase()} added yet
))}
); } ``` ### `src/components/dashboards/jobtracker-dashboard/components/dashboard/jobs-content.tsx` ```tsx import type { ComponentType, SVGProps } from "react"; import { Archive, Check } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardAction, CardContent, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; import { DashboardLink } from "../navigation"; import { AddIcon, JobActiveIcon, JobCustomerIcon, JobDraftIcon, JobLocationIcon, JobTimeIcon, SearchIcon, } from "../../assets/icons"; import { jobs, type Job, type JobStatus } from "../../data"; type JobColumn = { status: JobStatus; label: string; emptyMessage: string; accentClassName: string; countClassName: string; }; const jobColumns: JobColumn[] = [ { status: "pre-construction", label: "Pre- Constructions", emptyMessage: "No pre-construction jobs", accentClassName: "text-[#3283ff] dark:text-[#66a3ff]", countClassName: "bg-[#3283ff]/10 text-[#3283ff] dark:bg-[#66a3ff]/15 dark:text-[#66a3ff]", }, { status: "active", label: "Active", emptyMessage: "No active jobs", accentClassName: "text-[#ff5600] dark:text-[#ff7a38]", countClassName: "bg-[#ff5600]/10 text-[#ff5600] dark:bg-[#ff7a38]/15 dark:text-[#ff7a38]", }, { status: "complete", label: "Complete", emptyMessage: "No completed jobs", accentClassName: "text-[#00c238] dark:text-[#35d968]", countClassName: "bg-[#00c238]/10 text-[#00c238] dark:bg-[#35d968]/15 dark:text-[#35d968]", }, { status: "closed", label: "Closed", emptyMessage: "No closed jobs", accentClassName: "text-[#c57d00] dark:text-[#e4a83e]", countClassName: "bg-[#fef6e7] text-[#c57d00] dark:bg-[#e4a83e]/[0.12] dark:text-[#e4a83e]", }, ]; type JobBadgeDetails = { label: string; icon: ComponentType>; className: string; }; const jobBadgeDetails: Record = { "pre-construction": { label: "Draft", icon: JobDraftIcon, className: "bg-[#f2fff7] text-[#0e7b33] dark:bg-[#45c570]/[0.12] dark:text-[#45c570]", }, active: { label: "Active", icon: JobActiveIcon, className: "bg-[#ff5600]/10 text-[#ff5600] dark:bg-[#ff7a38]/15 dark:text-[#ff7a38]", }, complete: { label: "Complete", icon: Check, className: "bg-[#00c238]/10 text-[#00c238] dark:bg-[#35d968]/15 dark:text-[#35d968]", }, closed: { label: "Closed", icon: Archive, className: "bg-[#fef6e7] text-[#c57d00] dark:bg-[#e4a83e]/[0.12] dark:text-[#e4a83e]", }, }; export function JobsContent() { return (

Jobs

); } function JobBoard() { return (
{jobColumns.map((column) => { const columnJobs = jobs.filter((job) => job.status === column.status); return ( ); })}
); } function JobBoardColumn({ column, jobs }: { column: JobColumn; jobs: Job[] }) { return (

{column.label}

{jobs.length}
{jobs.length ? ( jobs.map((job) => ) ) : (

{column.emptyMessage}

)}
); } function JobColumnMarker({ className }: { className: string }) { return (