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

2
src/app/(full-page)/reset-password/page.tsx
View File

@@ -33,7 +33,7 @@ function ResetPasswordContent() {
</header>
{!hasToken ? (
<div className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-destructive">
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-destructive">
Password reset token is missing.
</div>
) : (

2
src/app/(modules)/_components/module-shell-header.tsx
View File

@@ -9,7 +9,7 @@ export function ModuleShellHeader() {
const { isMobile } = useSidebar();
return (
<div className="sticky top-0 z-50 flex items-center justify-between gap-4 border-b border-border bg-background/95 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80">
<div className="sticky top-0 z-50 flex h-14 items-center justify-between gap-4 border-b border-border bg-background/95 px-6 backdrop-blur supports-backdrop-filter:bg-background/80">
<div className="flex min-w-0 items-center gap-3">
{isMobile ? (
<>

15
src/app/(modules)/clients/components/ClientSheet.tsx
View File

@@ -13,6 +13,7 @@ import { FormField, PhoneInput } from '@/components/form';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
@@ -71,12 +72,12 @@ export function ClientSheet({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-3xl">
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
<DialogContent className="sm:max-w-3xl">
<DialogHeader>
<DialogTitle>
{clientId ? 'Edit Client' : 'Create Client'}
</DialogTitle>
<DialogDescription className="text-sm">
<DialogDescription>
Manage company and primary contact details.
</DialogDescription>
</DialogHeader>
@@ -86,7 +87,7 @@ export function ClientSheet({
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col"
>
<div className="max-h-[58vh] space-y-5 overflow-y-auto px-6 py-4">
<DialogBody className="space-y-5">
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="client-first-name"
@@ -240,9 +241,9 @@ export function ClientSheet({
/>
</FormField>
</div>
</div>
</DialogBody>
<DialogFooter className="shrink-0 border-t px-6 py-4">
<DialogFooter>
<Button
type="button"
variant="outline"

15
src/app/(modules)/package/components/PackageDialog.tsx
View File

@@ -10,6 +10,7 @@ import { ProjectSelect } from '@/components/lookups/ProjectSelect';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
@@ -62,14 +63,14 @@ export function PackageDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-2xl"
className="sm:max-w-2xl"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
<DialogHeader>
<DialogTitle>
{packageId ? 'Edit Package' : 'Create Package'}
</DialogTitle>
<DialogDescription className="text-sm">
<DialogDescription>
Manage package details and optional chainage range.
</DialogDescription>
</DialogHeader>
@@ -79,7 +80,7 @@ export function PackageDialog({
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col"
>
<div className="max-h-[58vh] space-y-6 overflow-y-auto px-6 py-4">
<DialogBody className="space-y-6">
<section className="space-y-4">
<div className="space-y-1">
<h3 className="text-sm font-semibold">Basic details</h3>
@@ -173,9 +174,9 @@ export function PackageDialog({
</FormField>
</div>
</section>
</div>
</DialogBody>
<DialogFooter className="shrink-0 border-t px-6 py-4">
<DialogFooter>
<Button
type="button"
variant="outline"

62
src/app/(modules)/package/page.tsx
View File

@@ -4,6 +4,16 @@ import { useCallback, useState } from 'react';
import { Package as PackageIcon, Plus } from 'lucide-react';
import { PageHeader } from '@/components/page-header';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import type { Package } from '@/types';
@@ -20,6 +30,7 @@ import {
export default function PackagePage() {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [packageToDelete, setPackageToDelete] = useState<Package | null>(null);
const { skip, setSkip, limit, setLimit } = usePackageFilters();
const packagesQuery = usePackagesQuery({ skip, limit });
const projectsQuery = useProjectOptionsQuery();
@@ -67,14 +78,25 @@ export default function PackagePage() {
const deletePackage = useCallback(
(pkg: Package) => {
if (!confirm(`Are you sure you want to delete package "${pkg.name}"?`)) {
return;
}
deletePackageMutation.mutate(pkg);
setPackageToDelete(pkg);
},
[deletePackageMutation],
[],
);
const handleDeleteDialogOpenChange = useCallback((open: boolean) => {
if (!open) {
setPackageToDelete(null);
}
}, []);
const confirmDeletePackage = useCallback(() => {
if (!packageToDelete) return;
deletePackageMutation.mutate(packageToDelete, {
onSettled: () => setPackageToDelete(null),
});
}, [deletePackageMutation, packageToDelete]);
const projects = projectsQuery.data?.items ?? [];
const packages = packagesQuery.data?.items ?? [];
const total = packagesQuery.data?.totalItems ?? 0;
@@ -122,6 +144,36 @@ export default function PackagePage() {
canSubmit={canSubmit}
isSaving={isSaving}
/>
<AlertDialog
open={Boolean(packageToDelete)}
onOpenChange={handleDeleteDialogOpenChange}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete package?</AlertDialogTitle>
<AlertDialogDescription>
This will permanently delete{' '}
<span className="font-medium text-foreground">
{packageToDelete?.name}
</span>
. This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deletePackageMutation.isPending}>
Cancel
</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
disabled={deletePackageMutation.isPending}
onClick={confirmDeletePackage}
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
);
}

6
src/app/(modules)/plans/components/PlanSheet.tsx
View File

@@ -242,7 +242,7 @@ export function PlanSheet({
<label className="flex items-center gap-2">
<input
type="checkbox"
className="size-4 rounded border-border accent-primary"
className="size-4 rounded-lg border-border accent-primary"
{...register('is_active')}
/>
Active
@@ -250,7 +250,7 @@ export function PlanSheet({
<label className="flex items-center gap-2">
<input
type="checkbox"
className="size-4 rounded border-border accent-primary"
className="size-4 rounded-lg border-border accent-primary"
{...register('is_custom')}
/>
Custom plan
@@ -269,7 +269,7 @@ export function PlanSheet({
}
>
{isPermissionsLoading ? (
<div className="rounded-md border p-6 text-muted-foreground">
<div className="rounded-lg border p-6 text-muted-foreground">
Loading permissions...
</div>
) : (

15
src/app/(modules)/project/components/ProjectDialog.tsx
View File

@@ -8,6 +8,7 @@ import { FormField } from '@/components/form';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
@@ -54,14 +55,14 @@ export function ProjectDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-2xl"
className="sm:max-w-2xl"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
<DialogHeader>
<DialogTitle>
{projectId ? 'Edit Project' : 'Create Project'}
</DialogTitle>
<DialogDescription className="text-sm">
<DialogDescription>
Manage road project identity and optional coordinate boundaries.
</DialogDescription>
</DialogHeader>
@@ -71,7 +72,7 @@ export function ProjectDialog({
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col"
>
<div className="max-h-[58vh] space-y-6 overflow-y-auto px-6 py-4">
<DialogBody className="space-y-6">
<section className="space-y-4">
<div className="space-y-1">
<h3 className="text-sm font-semibold">Basic details</h3>
@@ -192,9 +193,9 @@ export function ProjectDialog({
</div>
</div>
</section>
</div>
</DialogBody>
<DialogFooter className="shrink-0 border-t px-6 py-4">
<DialogFooter>
<Button
type="button"
variant="outline"

64
src/app/(modules)/project/page.tsx
View File

@@ -4,6 +4,16 @@ import { useCallback, useState } from 'react';
import { Layers, Plus } from 'lucide-react';
import { PageHeader } from '@/components/page-header';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import type { Project } from '@/types';
@@ -19,6 +29,7 @@ import {
export default function ProjectPage() {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
const { skip, setSkip, limit, setLimit } = useProjectFilters();
const projectsQuery = useProjectsQuery({ skip, limit });
const deleteProjectMutation = useDeleteProjectMutation();
@@ -63,16 +74,25 @@ export default function ProjectPage() {
const deleteProject = useCallback(
(project: Project) => {
if (
!confirm(`Are you sure you want to delete project "${project.name}"?`)
) {
return;
}
deleteProjectMutation.mutate(project);
setProjectToDelete(project);
},
[deleteProjectMutation],
[],
);
const handleDeleteDialogOpenChange = useCallback((open: boolean) => {
if (!open) {
setProjectToDelete(null);
}
}, []);
const confirmDeleteProject = useCallback(() => {
if (!projectToDelete) return;
deleteProjectMutation.mutate(projectToDelete, {
onSettled: () => setProjectToDelete(null),
});
}, [deleteProjectMutation, projectToDelete]);
const columns = useProjectColumns();
const projects = projectsQuery.data?.items ?? [];
const total = projectsQuery.data?.totalItems ?? 0;
@@ -117,6 +137,36 @@ export default function ProjectPage() {
canSubmit={canSubmit}
isSaving={isSaving}
/>
<AlertDialog
open={Boolean(projectToDelete)}
onOpenChange={handleDeleteDialogOpenChange}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete project?</AlertDialogTitle>
<AlertDialogDescription>
This will permanently delete{' '}
<span className="font-medium text-foreground">
{projectToDelete?.name}
</span>
. This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deleteProjectMutation.isPending}>
Cancel
</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
disabled={deleteProjectMutation.isPending}
onClick={confirmDeleteProject}
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
);
}

14
src/app/(modules)/results/[videoId]/components/VideoResultsSkeleton.tsx
View File

@@ -5,7 +5,7 @@ import { Skeleton } from '@/components/ui/skeleton';
function StatSkeleton() {
return (
<div className="flex flex-col items-center rounded-lg border border-muted bg-muted/30 p-4 text-center">
<Skeleton className="mb-2 size-9 rounded-md" />
<Skeleton className="mb-2 size-9 rounded-lg" />
<Skeleton className="h-6 w-12" />
<Skeleton className="mt-2 h-3 w-20" />
</div>
@@ -14,9 +14,9 @@ function StatSkeleton() {
function DetectionLogSkeleton() {
return (
<div className="rounded-md border bg-card p-3">
<div className="rounded-lg border bg-card p-3">
<div className="flex gap-3">
<Skeleton className="size-20 shrink-0 rounded-md" />
<Skeleton className="size-20 shrink-0 rounded-lg" />
<div className="min-w-0 flex-1 space-y-2">
<div className="flex items-start justify-between gap-3">
<div className="space-y-2">
@@ -41,7 +41,7 @@ export function VideoResultsSkeleton() {
<div className="space-y-8">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex min-w-0 items-start gap-3">
<Skeleton className="size-10 rounded-md" />
<Skeleton className="size-10 rounded-lg" />
<div className="min-w-0 space-y-2">
<Skeleton className="h-7 w-60 max-w-full" />
<Skeleton className="h-3 w-80 max-w-full" />
@@ -50,10 +50,10 @@ export function VideoResultsSkeleton() {
<Skeleton className="h-8 w-20" />
</div>
<section className="overflow-hidden rounded-xl border bg-card">
<section className="overflow-hidden rounded-lg border bg-card">
<div className="border-b p-6 pb-4">
<div className="flex items-center gap-3">
<Skeleton className="size-10 rounded" />
<Skeleton className="size-10 rounded-lg" />
<div className="space-y-2">
<Skeleton className="h-5 w-44" />
<Skeleton className="h-3 w-64" />
@@ -76,7 +76,7 @@ export function VideoResultsSkeleton() {
</div>
<div className="grid grid-cols-1 gap-2 p-3 sm:grid-cols-3">
{Array.from({ length: 3 }).map((_, index) => (
<Skeleton key={index} className="h-16 w-full rounded-md" />
<Skeleton key={index} className="h-16 w-full rounded-lg" />
))}
</div>
</section>

2
src/app/(modules)/roles/components/RoleSheet.tsx
View File

@@ -125,7 +125,7 @@ export function RoleSheet({
}
>
{isPermissionsLoading ? (
<div className="rounded-md border p-6 text-muted-foreground">
<div className="rounded-lg border p-6 text-muted-foreground">
Loading permissions...
</div>
) : (

15
src/app/(modules)/segment/components/SegmentDialog.tsx
View File

@@ -11,6 +11,7 @@ import { ProjectSelect } from '@/components/lookups/ProjectSelect';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
@@ -71,14 +72,14 @@ export function SegmentDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-2xl"
className="sm:max-w-2xl"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
<DialogHeader>
<DialogTitle>
{segmentId ? 'Edit Segment' : 'Create Segment'}
</DialogTitle>
<DialogDescription className="text-sm">
<DialogDescription>
Manage segment binding, chainage values, direction, and coordinates.
</DialogDescription>
</DialogHeader>
@@ -88,7 +89,7 @@ export function SegmentDialog({
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col"
>
<div className="max-h-[58vh] space-y-6 overflow-y-auto px-6 py-4">
<DialogBody className="space-y-6">
<section className="space-y-4">
<div className="space-y-1">
<h3 className="text-sm font-semibold">Basic details</h3>
@@ -300,9 +301,9 @@ export function SegmentDialog({
</div>
</div>
</section>
</div>
</DialogBody>
<DialogFooter className="shrink-0 border-t px-6 py-4">
<DialogFooter>
<Button
type="button"
variant="outline"

66
src/app/(modules)/segment/page.tsx
View File

@@ -4,6 +4,16 @@ import { useCallback, useState } from 'react';
import { Milestone, Plus } from 'lucide-react';
import { PageHeader } from '@/components/page-header';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import type { Chainage } from '@/types';
@@ -21,6 +31,7 @@ import {
export default function SegmentPage() {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [segmentToDelete, setSegmentToDelete] = useState<Chainage | null>(null);
const { skip, setSkip, limit, setLimit } = useSegmentFilters();
const segmentsQuery = useSegmentsQuery({ skip, limit });
const projectsQuery = useProjectOptionsQuery();
@@ -75,18 +86,25 @@ export default function SegmentPage() {
const deleteSegment = useCallback(
(segment: Chainage) => {
if (
!confirm(
`Are you sure you want to delete segment "${segment.segment_name}"?`,
)
) {
return;
}
deleteSegmentMutation.mutate(segment);
setSegmentToDelete(segment);
},
[deleteSegmentMutation],
[],
);
const handleDeleteDialogOpenChange = useCallback((open: boolean) => {
if (!open) {
setSegmentToDelete(null);
}
}, []);
const confirmDeleteSegment = useCallback(() => {
if (!segmentToDelete) return;
deleteSegmentMutation.mutate(segmentToDelete, {
onSettled: () => setSegmentToDelete(null),
});
}, [deleteSegmentMutation, segmentToDelete]);
const projects = projectsQuery.data?.items ?? [];
const allPackages = allPackagesQuery.data?.items ?? [];
const segments = segmentsQuery.data?.items ?? [];
@@ -139,6 +157,36 @@ export default function SegmentPage() {
canSubmit={canSubmit}
isSaving={isSaving}
/>
<AlertDialog
open={Boolean(segmentToDelete)}
onOpenChange={handleDeleteDialogOpenChange}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete segment?</AlertDialogTitle>
<AlertDialogDescription>
This will permanently delete{' '}
<span className="font-medium text-foreground">
{segmentToDelete?.segment_name}
</span>
. This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deleteSegmentMutation.isPending}>
Cancel
</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
disabled={deleteSegmentMutation.isPending}
onClick={confirmDeleteSegment}
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
);
}

19
src/app/(modules)/tenants/components/TenantSheet.tsx
View File

@@ -13,6 +13,7 @@ import { FormField, PhoneInput, SelectPopover } from '@/components/form';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
@@ -98,12 +99,12 @@ export function TenantSheet({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-3xl">
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
<DialogContent className="sm:max-w-3xl">
<DialogHeader>
<DialogTitle>
{tenantId ? 'Edit Tenant' : 'Create Tenant'}
</DialogTitle>
<DialogDescription className="text-sm">
<DialogDescription>
Bind a client and subscription plan, then invite the tenant
administrator.
</DialogDescription>
@@ -114,7 +115,7 @@ export function TenantSheet({
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col"
>
<div className="max-h-[50vh] space-y-5 overflow-y-auto px-6 py-4">
<DialogBody className="space-y-5">
<div className="space-y-1">
<p>Basic Information</p>
<p className="text-muted-foreground">
@@ -227,7 +228,7 @@ export function TenantSheet({
id="tenant-description"
placeholder="North zone operations"
{...register('description')}
className="min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 outline-none focus-visible:border-ring"
className="min-h-20 w-full rounded-lg border border-input bg-background px-3 py-2 outline-none focus-visible:border-ring"
/>
</FormField>
</div>
@@ -314,7 +315,7 @@ export function TenantSheet({
</div>
</>
) : adminEmail ? (
<div className="rounded-md border bg-muted/40 p-4 text-muted-foreground">
<div className="rounded-lg border bg-muted/40 p-4 text-muted-foreground">
Admin invitation details cannot be changed after tenant
creation.
<p className="mt-1 text-foreground">
@@ -322,9 +323,9 @@ export function TenantSheet({
</p>
</div>
) : null}
</div>
</DialogBody>
<DialogFooter className="shrink-0 border-t px-6 py-4">
<DialogFooter>
<Button
type="button"
variant="outline"

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>

9
src/app/(modules)/upload/components/CreateUploadDialog.tsx
View File

@@ -6,6 +6,7 @@ import { Loader2, Play } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
@@ -89,7 +90,7 @@ export function CreateUploadDialog({
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent
className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-5xl"
className="sm:max-w-5xl"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<DialogHeader>
@@ -99,7 +100,7 @@ export function CreateUploadDialog({
</DialogDescription>
</DialogHeader>
<div className="space-y-5">
<DialogBody className="space-y-5">
<LocationSection
value={session}
onChange={setSession}
@@ -128,11 +129,11 @@ export function CreateUploadDialog({
portalContainer={dropdownPortalRef}
/>
{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}
</div>
</DialogBody>
<DialogFooter>
<Button

4
src/app/(modules)/upload/components/UploadFileDropzone.tsx
View File

@@ -56,7 +56,7 @@ export function UploadFileDropzone({
handleFiles(event.dataTransfer.files);
}}
className={cn(
'group flex min-h-32 cursor-pointer flex-col justify-between rounded-md border border-dashed bg-card/60 p-4 transition-colors',
'group flex min-h-32 cursor-pointer flex-col justify-between rounded-lg border border-dashed bg-card/60 p-4 transition-colors',
'hover:border-primary/60 hover:bg-secondary/40',
isDragging && 'border-primary bg-secondary/60',
disabled && 'pointer-events-none cursor-not-allowed opacity-60',
@@ -72,7 +72,7 @@ export function UploadFileDropzone({
/>
<div className="space-y-3">
<div className="flex size-9 items-center justify-center rounded-md border bg-background">
<div className="flex size-9 items-center justify-center rounded-lg border bg-background">
<UploadCloud className="size-4 text-muted-foreground" />
</div>
<div>

2
src/app/(modules)/upload/components/UploadListColumns.tsx
View File

@@ -39,7 +39,7 @@ export function useUploadListColumns(
return (
<div
className="flex aspect-video w-20 items-center justify-center overflow-hidden rounded-md border bg-muted bg-cover bg-center"
className="flex aspect-video w-20 items-center justify-center overflow-hidden rounded-lg border bg-muted bg-cover bg-center"
style={
thumbnail
? { backgroundImage: `url("${thumbnail}")` }

20
src/app/(modules)/upload/components/VideoPreviewDialog.tsx
View File

@@ -1,7 +1,13 @@
'use client';
import { ProtectedVideoPlayer } from '@/components/media/ProtectedVideoPlayer';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import {
Dialog,
DialogBody,
DialogContent,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import type { UploadListItem } from '@/types';
interface VideoPreviewDialogProps {
@@ -22,11 +28,13 @@ export function VideoPreviewDialog({
<DialogTitle>Video Preview</DialogTitle>
</DialogHeader>
<ProtectedVideoPlayer
url={open ? upload?.raw_video_url : undefined}
className="rounded-lg"
unavailableTitle="Video preview unavailable"
/>
<DialogBody>
<ProtectedVideoPlayer
url={open ? upload?.raw_video_url : undefined}
className="rounded-lg"
unavailableTitle="Video preview unavailable"
/>
</DialogBody>
</DialogContent>
</Dialog>
);

21
src/app/(modules)/users/components/UserSheet.tsx
View File

@@ -14,6 +14,7 @@ import { RoleSelect } from '@/components/lookups/RoleSelect';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
@@ -67,13 +68,13 @@ export function UserSheet({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-xl">
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>
{userId ? 'Edit User' : 'Create User'}
</DialogTitle>
<DialogDescription className="text-sm">
<DialogDescription>
Assign user details and a role.
</DialogDescription>
</DialogHeader>
@@ -83,7 +84,7 @@ export function UserSheet({
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col"
>
<div className="max-h-[50vh] space-y-5 overflow-y-auto px-6 py-4">
<DialogBody className="space-y-5">
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="first-name"
@@ -169,12 +170,12 @@ export function UserSheet({
type="hidden"
{...register('role_id')}
value={roleId}
readOnly
/>
</FormField>
</div>
readOnly
/>
</FormField>
</DialogBody>
<DialogFooter className="shrink-0 border-t px-6 py-4">
<DialogFooter>
<Button
type="button"
variant="outline"

2
src/app/globals.css
View File

@@ -7,7 +7,7 @@
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
--radius: 0.225rem;
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);