feat(ui): add ticket filter reset and update border radius

src/app/(modules)/ticket/components/TicketFilters.tsx

@@ -1,19 +1,36 @@
 'use client';
 
+import { FilterX } from 'lucide-react';
+
 import { SegmentSelect } from '@/components/lookups/SegmentSelect';
+import { Button } from '@/components/ui/button';
 
 interface TicketFiltersProps {
   segmentId: string;
   onSegmentChange: (segmentId: string) => void;
+  onClear: () => void;
 }
 
 export function TicketFilters({
   segmentId,
   onSegmentChange,
+  onClear,
 }: TicketFiltersProps) {
   return (
+    <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center">
       <div className="w-full sm:w-64">
         <SegmentSelect value={segmentId} onValueChange={onSegmentChange} />
       </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        disabled={!segmentId}
+        onClick={onClear}
+      >
+        <FilterX />
+        Clear Filters
+      </Button>
+    </div>
   );
 }

src/app/(modules)/ticket/page.tsx

@@ -48,6 +48,7 @@ export default function TicketPage() {
       <TicketFilters
         segmentId={segmentId}
         onSegmentChange={handleSegmentChange}
+        onClear={() => handleSegmentChange('')}
       />
     ),
     [handleSegmentChange, segmentId],

src/app/globals.css

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