Job or delivery status tracking card with price range, growth indicators, location timeline with visual connector, and duration tracking. Features status badge, job ID, pickup/dropoff locations with custom icons, and real-time timer. Built with shadcn/ui Badge and Card components. Perfect for delivery apps, logistics dashboards, gig economy platforms, and service tracking interfaces.
Files
import { Clock } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
export default function JobStatusCard() {
return (
<Card className="relative max-w-2xl rounded-2xl p-6 shadow-lg">
<div className="flex flex-col gap-4">
<div className="flex items-start justify-between">
<Badge className="rounded-full bg-orange-500 px-2 py-1 text-sm text-white dark:bg-orange-600">
<span className="mr-1.5 size-4 rounded-full bg-white dark:bg-gray-900"></span>
In Progress
</Badge>
<span className="text-muted-foreground text-[13px]">#YQZNFA</span>
</div>
<div className="flex flex-col gap-4">
<div className="flex items-baseline gap-2">
<h3 className="text-foreground text-[40px] leading-none font-light tracking-tighter">
$200-250
</h3>
</div>
<div className="flex items-center gap-2">
<span className="text-base text-emerald-500 dark:text-emerald-400">
+14%
</span>
<span className="text-base text-emerald-500 dark:text-emerald-400">
+$25,26
</span>
</div>
<div className="relative flex flex-col gap-1">
<div className="absolute top-[24px] bottom-[24px] left-[7px] w-2 border-l-2 border-dashed border-orange-200 dark:border-orange-800" />
<div className="relative z-10 flex items-start gap-3">
<div className="mt-0.5">
<div className="h-4 w-4 rounded-full bg-orange-500 dark:bg-orange-600" />
</div>
<p className="text-foreground flex-1 text-[15px] leading-snug">
1248 N Highland Ave, Los Angeles, CA 90038
</p>
</div>
<div className="relative z-10 mt-1 flex items-start gap-3">
<div className="mt-0.5">
<div className="h-4 w-4 rounded-full border-2 border-orange-200 bg-white dark:border-orange-800 dark:bg-gray-950" />
</div>
<p className="text-muted-foreground flex-1 text-[15px] leading-snug">
2530 W 8th St, Los Angeles, CA 90057
</p>
</div>
</div>
<div className="mt-3 flex items-center justify-between">
<span className="text-sm text-gray-400 dark:text-gray-500">
Oct 2, 2025
</span>
<div className="flex items-center gap-1.5 text-gray-400 dark:text-gray-500">
<Clock className="h-3.5 w-3.5" />
<span className="text-sm">00:43:52</span>
</div>
</div>
</div>
</div>
</Card>
)
}
Job status card with location tracking and price range
job-status-card-01
In Progress#YQZNFA
$200-250
+14%+$25,26
1248 N Highland Ave, Los Angeles, CA 90038
2530 W 8th St, Los Angeles, CA 90057
Oct 2, 2025
00:43:52
import { Clock } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
export default function JobStatusCard() {
return (
<Card className="relative max-w-2xl rounded-2xl p-6 shadow-lg">
<div className="flex flex-col gap-4">
<div className="flex items-start justify-between">
<Badge className="rounded-full bg-orange-500 px-2 py-1 text-sm text-white dark:bg-orange-600">
<span className="mr-1.5 size-4 rounded-full bg-white dark:bg-gray-900"></span>
In Progress
</Badge>
<span className="text-muted-foreground text-[13px]">#YQZNFA</span>
</div>
<div className="flex flex-col gap-4">
<div className="flex items-baseline gap-2">
<h3 className="text-foreground text-[40px] leading-none font-light tracking-tighter">
$200-250
</h3>
</div>
<div className="flex items-center gap-2">
<span className="text-base text-emerald-500 dark:text-emerald-400">
+14%
</span>
<span className="text-base text-emerald-500 dark:text-emerald-400">
+$25,26
</span>
</div>
<div className="relative flex flex-col gap-1">
<div className="absolute top-[24px] bottom-[24px] left-[7px] w-2 border-l-2 border-dashed border-orange-200 dark:border-orange-800" />
<div className="relative z-10 flex items-start gap-3">
<div className="mt-0.5">
<div className="h-4 w-4 rounded-full bg-orange-500 dark:bg-orange-600" />
</div>
<p className="text-foreground flex-1 text-[15px] leading-snug">
1248 N Highland Ave, Los Angeles, CA 90038
</p>
</div>
<div className="relative z-10 mt-1 flex items-start gap-3">
<div className="mt-0.5">
<div className="h-4 w-4 rounded-full border-2 border-orange-200 bg-white dark:border-orange-800 dark:bg-gray-950" />
</div>
<p className="text-muted-foreground flex-1 text-[15px] leading-snug">
2530 W 8th St, Los Angeles, CA 90057
</p>
</div>
</div>
<div className="mt-3 flex items-center justify-between">
<span className="text-sm text-gray-400 dark:text-gray-500">
Oct 2, 2025
</span>
<div className="flex items-center gap-1.5 text-gray-400 dark:text-gray-500">
<Clock className="h-3.5 w-3.5" />
<span className="text-sm">00:43:52</span>
</div>
</div>
</div>
</div>
</Card>
)
}