santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine shared UI primitives and management flows

Browse Source
This commit is contained in:
santasri.pachhal
2026-07-09 23:06:25 +05:30
parent 0e8108b875
commit 8727963c54
70 changed files with 631 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/(modules)/ticket/[ticketId]/components/TicketClassDetailSkeleton.tsx
View File

@@ -33,8 +33,8 @@ export function TicketClassContentSkeleton() {
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<Skeleton className="aspect-video w-full rounded-md" />
<Skeleton className="aspect-video w-full rounded-md" />
<Skeleton className="aspect-video w-full rounded-lg" />
<Skeleton className="aspect-video w-full rounded-lg" />
</CardContent>
</Card>
@@ -57,7 +57,7 @@ export function TicketClassContentSkeleton() {
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<Skeleton className="size-5 rounded" />
<Skeleton className="size-5 rounded-lg" />
<Skeleton className="h-5 w-56" />
</div>
</CardHeader>
@@ -89,7 +89,7 @@ export function TicketClassActionsSkeleton() {
<Card aria-label="Loading defect class actions">
<CardHeader>
<div className="flex items-center gap-2">
<Skeleton className="size-4 rounded" />
<Skeleton className="size-4 rounded-lg" />
<Skeleton className="h-5 w-32" />
</div>
</CardHeader>

16
src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
View File

@@ -149,7 +149,7 @@ export function TicketClassDetectionPreview({
<div className="flex min-w-0 items-center gap-3">
<span
className={cn(
'flex size-10 shrink-0 items-center justify-center rounded-full',
'flex size-10 shrink-0 self-start items-center justify-center rounded-lg',
visual.cardClassName,
)}
>
@@ -157,13 +157,13 @@ export function TicketClassDetectionPreview({
</span>
<div className="min-w-0 space-y-1">
<div className="flex min-w-0 flex-wrap items-center gap-2">
<h3 className="truncate text-lg font-semibold text-foreground">
<h3 >
{displayName}
</h3>
<Badge
variant="secondary"
className={cn(
'rounded-full border-0 px-2.5 py-1 text-xs font-semibold',
'rounded-lg',
visual.cardClassName,
visual.colorClassName,
)}
@@ -171,7 +171,7 @@ export function TicketClassDetectionPreview({
{detectionCount} Detections
</Badge>
</div>
<p className="text-sm text-muted-foreground">
<p className="text-muted-foreground">
Review detections in ascending timestamp order.
</p>
</div>
@@ -180,8 +180,7 @@ export function TicketClassDetectionPreview({
<div className="flex items-center gap-2 self-start sm:self-auto">
<Button
type="button"
variant="outline"
size="sm"
variant="secondary"
onClick={() => setCurrentIndex((index) => Math.max(index - 1, 0))}
disabled={isPreviousDisabled}
aria-label="Previous detection"
@@ -195,8 +194,7 @@ export function TicketClassDetectionPreview({
</div>
<Button
type="button"
variant="outline"
size="sm"
variant="secondary"
onClick={() => setCurrentIndex((index) => index + 1)}
disabled={isNextDisabled}
aria-label="Next detection"
@@ -233,7 +231,7 @@ export function TicketClassDetectionPreview({
<>
<div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-2">
<div className="min-w-0 space-y-2">
<p className="text-xs font-medium text-muted-foreground">
<p className="text-muted-foreground">
Detection Image
</p>
<div className="overflow-hidden rounded-lg">

12
src/app/(modules)/ticket/[ticketId]/components/TicketDefectClassTabs.tsx
View File

@@ -75,9 +75,9 @@ export function TicketDefectClassTabs({
if (defectClassesQuery.isLoading) {
return (
<Card className="w-full">
<Card className="w-full rounded-lg">
<CardContent className="space-y-4 p-5">
<div className="h-5 w-24 animate-pulse rounded bg-muted" />
<div className="h-5 w-24 animate-pulse rounded-lg bg-muted" />
<div className="flex flex-col gap-2">
{Array.from({ length: 3 }).map((_, index) => (
<div
@@ -104,7 +104,7 @@ export function TicketDefectClassTabs({
>
<Card className="w-full">
<CardContent className="grid gap-0 p-0 lg:grid-cols-[minmax(220px,280px)_1fr] lg:divide-x lg:divide-border">
<div className="space-y-4 p-5">
<div className="space-y-4 px-5">
<div className="flex items-center gap-2">
<ListChecks className="size-5 shrink-0 text-primary" />
<h2 className="text-base font-semibold">Detected Issues</h2>
@@ -126,7 +126,7 @@ export function TicketDefectClassTabs({
key={item.class_name}
value={item.class_name}
className={cn(
'group h-auto w-full flex-none items-center justify-between! gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground shadow-none after:hidden',
'group h-auto w-full flex-none items-center justify-between! gap-2 rounded-lg border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground shadow-none after:hidden',
'data-[state=active]:bg-muted data-[state=active]:text-foreground',
)}
>
@@ -135,7 +135,7 @@ export function TicketDefectClassTabs({
</span>
<Badge
className={cn(
'shrink-0 gap-1.5 rounded-full border-0 px-2.5 py-1 text-xs font-medium',
'shrink-0 rounded-full',
statusConfig.badgeClassName,
)}
>
@@ -148,7 +148,7 @@ export function TicketDefectClassTabs({
</TabsList>
</div>
<div className="min-w-0 p-5">
<div className="min-w-0 px-5">
<TicketClassDetectionPreview
videoId={previewVideoId}
defectClassName={selectedClass}

3
src/app/(modules)/ticket/[ticketId]/components/TicketDetailHeader.tsx
View File

@@ -23,8 +23,7 @@ export function TicketDetailHeader({
<div className="flex shrink-0 items-center gap-2">
<Button
variant="outline"
size="sm"
variant="secondary"
onClick={() => router.push('/ticket')}
>
<ArrowLeft className="size-4" />

10
src/app/(modules)/ticket/[ticketId]/components/TicketHistoryCard.tsx
View File

@@ -26,7 +26,7 @@ function HistoryNote({ item }: { item: TicketHistoryItem }) {
if (!noteText) return null;
return (
<div className="mt-3 rounded-lg border border-amber-300/80 bg-amber-50/90 px-3 py-2.5 dark:border-amber-500/30 dark:bg-amber-500/10">
<div className="mt-3 rounded-lg border border-amber-300/80 bg-amber-50/90 px-3 py-2.5 dark:border-amber-500/30 dark:bg-amber-500/10">
<div className="flex items-center gap-1.5 text-xs font-medium text-amber-900 dark:text-amber-200">
<MessageSquareText className="size-3.5 shrink-0 text-amber-700 dark:text-amber-300" />
<span>
@@ -48,10 +48,10 @@ function SystemHistoryEntry({ item }: { item: TicketHistoryItem }) {
const noteText = item.note?.text?.trim();
return (
<div className="rounded-md border border-dashed border-primary/25 bg-primary/5 px-4 py-3.5">
<div className="rounded-lg border border-dashed border-primary/25 bg-primary/5 px-4 py-3.5">
<Badge
className="rounded-xs px-2.5 py-0.5 text-[10px] font-semibold tracking-wider uppercase"
className="rounded-lg px-2.5 py-0.5 text-[10px] font-semibold tracking-wider uppercase"
>
{getSourceLabel(item.source)}
</Badge>
@@ -70,7 +70,7 @@ function UserHistoryEntry({ item }: { item: TicketHistoryItem }) {
const isAssigned = item.event_type === 'assigned';
return (
<div className="rounded-md border border-border bg-card p-4">
<div className="rounded-lg border bg-card p-4">
<h3 className="mb-3 text-sm font-semibold text-foreground">{item.title}</h3>
<PersonInfo person={item.actor} />
{isAssigned && item.target_user ? (
@@ -124,7 +124,7 @@ export function TicketHistoryCard({ ticket }: { ticket: TicketDetail }) {
))}
</Timeline>
) : (
<div className="rounded-md border border-dashed border-border/80 bg-muted/10 px-4 py-8 text-center">
<div className="rounded-lg border border-dashed border-border/80 bg-muted/10 px-4 py-8 text-center">
<p className="text-sm font-medium text-muted-foreground">
No timeline entries yet
</p>

23
src/app/(modules)/ticket/[ticketId]/components/TicketOverviewCard.tsx
View File

@@ -8,6 +8,7 @@ import {
MapPin,
Monitor,
UserRound,
Play
} from 'lucide-react';
import { useState } from 'react';
@@ -21,6 +22,7 @@ import {
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
@@ -77,7 +79,7 @@ function SummaryCard({
return (
<div
className={cn(
'rounded-xl bg-muted/40 p-4 transition-colors hover:bg-muted/60',
'rounded-lg bg-muted/40 p-4 hover:scale-105 transition-transform ease-in-out',
cardClassName,
)}
>
@@ -180,11 +182,10 @@ export function TicketOverviewCard({
<CardAction>
<PermissionGuard permissions={PERMISSIONS.TICKET.ASSIGN}>
<Button
variant="ghost"
size="sm"
className="text-primary hover:bg-primary/10 hover:text-primary"
variant="secondary"
onClick={() => setIsAnalysisOpen(true)}
>
<Play className="mr-2 size-4" />
View Video
</Button>
</PermissionGuard>
@@ -232,16 +233,16 @@ export function TicketOverviewCard({
</Card>
<Dialog open={isAnalysisOpen} onOpenChange={setIsAnalysisOpen}>
<DialogContent className="gap-3 p-3 sm:max-w-5xl sm:p-4">
<DialogHeader className="min-w-0 pr-8">
<DialogTitle className="truncate text-left text-base">
{analysisTitle}
</DialogTitle>
<DialogDescription className="truncate text-xs">
<DialogContent className="sm:max-w-5xl">
<DialogHeader>
<DialogTitle>{analysisTitle}</DialogTitle>
<DialogDescription>
Video analysis with annotation overlay
</DialogDescription>
</DialogHeader>
<TicketInlineAnalysisVideo ticket={ticket} />
<DialogBody>
<TicketInlineAnalysisVideo ticket={ticket} />
</DialogBody>
</DialogContent>
</Dialog>
</div>

2
src/app/(modules)/ticket/[ticketId]/components/actions/ClosedTicketAction.tsx
View File

@@ -89,7 +89,7 @@ export function ClosedTicketAction({ ticket }: { ticket: TicketDetail }) {
</CardHeader>
<CardContent className="space-y-5">
<div className="space-y-4 rounded-xl border bg-muted/20 p-4">
<div className="space-y-4 rounded-lg border bg-muted/20 p-4">
<MetaField
label="Reviewed By"
value={<PersonInfo person={reviewer} size="lg" />}

12
src/app/(modules)/ticket/[ticketId]/components/actions/RepairEvidenceForm.tsx
View File

@@ -56,11 +56,11 @@ function MediaSectionHeader({
</div>
<Button
type="button"
variant="outline"
variant="secondary"
size="sm"
disabled={disabled}
onClick={onAdd}
className="h-8 shrink-0 border-primary/30 text-primary hover:bg-primary/5 hover:text-primary"
className="shrink-0"
>
<Plus className="size-3.5" />
{addLabel}
@@ -71,7 +71,7 @@ function MediaSectionHeader({
function MediaHint({ children }: { children: ReactNode }) {
return (
<p className="rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground">
<p className="rounded-lg bg-muted/50 px-3 py-2 text-xs text-muted-foreground">
{children}
</p>
);
@@ -182,7 +182,7 @@ function VideoThumbnail({
</span>
</div>
{duration ? (
<span className="pointer-events-none absolute bottom-1.5 right-1.5 rounded bg-black/75 px-1.5 py-0.5 text-[10px] font-medium text-white">
<span className="pointer-events-none absolute bottom-1.5 right-1.5 rounded-lg bg-black/75 px-1.5 py-0.5 text-[10px] font-medium text-white">
{duration}
</span>
) : null}
@@ -382,7 +382,7 @@ export function RepairEvidenceForm({
description="Tap to upload repair photos"
disabled={isSubmitting}
onClick={openImagePicker}
className="min-h-[104px]"
className="min-h-26"
/>
) : (
<div className="flex min-w-min gap-3">
@@ -457,7 +457,7 @@ export function RepairEvidenceForm({
</div>
{error ? (
<div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
<div className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
{error}
</div>
) : null}

1
src/app/(modules)/ticket/[ticketId]/components/actions/ReviewRepairAction.tsx
View File

@@ -32,6 +32,7 @@ export function ReviewRepairAction({ ticket }: { ticket: TicketDetail }) {
</div>
<div className="grid grid-cols-2 gap-2">
<Button
variant={'secondary'}
disabled={!reviewComment || reviewRepairMutation.isPending}
onClick={() =>
reviewRepairMutation.mutate({

2
src/app/(modules)/ticket/[ticketId]/components/actions/TicketActionCard.tsx
View File

@@ -22,7 +22,7 @@ export function TicketActionCard({
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Icon className={cn('size-4 text-primary', iconClassName)} />
<Icon className={cn('text-primary', iconClassName)} />
{title}
</CardTitle>
</CardHeader>

6
src/app/(modules)/ticket/[ticketId]/components/repair/RepairProofGallery.tsx
View File

@@ -43,11 +43,11 @@ export function RepairProofGallery({ imageUrls }: RepairProofGalleryProps) {
if (queries.some((query) => query.isLoading)) {
return (
<div className="grid grid-cols-4 gap-1 overflow-hidden rounded-xl">
<div className="grid grid-cols-4 gap-1 overflow-hidden rounded-lg">
{imageUrls.slice(0, MAX_VISIBLE_IMAGES).map((url, index) => (
<Skeleton
key={`${url}-${index}`}
className="aspect-square rounded-none"
className="aspect-square rounded-lg"
/>
))}
</div>
@@ -70,7 +70,7 @@ export function RepairProofGallery({ imageUrls }: RepairProofGalleryProps) {
return (
<LightGallery
elementClassNames="grid grid-cols-4 gap-1 overflow-hidden rounded-xl"
elementClassNames="grid grid-cols-4 gap-1 overflow-hidden rounded-lg"
mode="lg-fade"
speed={400}
plugins={[lgThumbnail, lgZoom]}

4
src/app/(modules)/ticket/[ticketId]/components/repair/RepairProofSummary.tsx
View File

@@ -1,4 +1,4 @@
import { CheckCircle2, HardHat, Wrench } from 'lucide-react';
import { CheckCircle2, HardHat, Wrench, ToolCase } from 'lucide-react';
import { ProtectedVideoPlayer } from '@/components/media/ProtectedVideoPlayer';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -72,7 +72,7 @@ export function RepairProofSummary({ ticket }: { ticket: TicketDetail }) {
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Wrench className="size-4 text-primary" />
<ToolCase className="text-primary" />
Repair Proof
</CardTitle>
</CardHeader>