feat: initialize shadcn ui

frontend/src/features/tickets/TicketListPage.tsx

@@ -7,7 +7,7 @@ import { AppStatusBadge } from '@/components/app/AppStatusBadge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { Select } from '@/components/ui/select'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { formatDateTime } from '@/lib/format'
 
 import { listTickets } from './api'
@@ -15,12 +15,12 @@ import type { Ticket } from './types'
 
 export function TicketListPage() {
   const [tickets, setTickets] = React.useState<Ticket[]>([])
-  const [status, setStatus] = React.useState('')
+  const [status, setStatus] = React.useState('all')
   const [q, setQ] = React.useState('')
   const [error, setError] = React.useState('')
 
   React.useEffect(() => {
-    listTickets({ status, q })
+    listTickets({ status: status === 'all' ? '' : status, q })
       .then(setTickets)
       .catch((reason: unknown) => setError(reason instanceof Error ? reason.message : '加载失败'))
   }, [status, q])
@@ -35,12 +35,17 @@ export function TicketListPage() {
         />
         <div className="grid gap-2 md:grid-cols-[1fr_180px]">
           <Input onChange={(event) => setQ(event.target.value)} placeholder="Search ticket no or title" value={q} />
-          <Select onChange={(event) => setStatus(event.target.value)} value={status}>
-            <option value="">All statuses</option>
-            <option value="pending">Pending</option>
-            <option value="in_progress">In progress</option>
-            <option value="resolved">Resolved</option>
-            <option value="closed">Closed</option>
+          <Select onValueChange={setStatus} value={status}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="pending">Pending</SelectItem>
+              <SelectItem value="in_progress">In progress</SelectItem>
+              <SelectItem value="resolved">Resolved</SelectItem>
+              <SelectItem value="closed">Closed</SelectItem>
+            </SelectContent>
           </Select>
         </div>
         {error ? <AppEmptyState title="Unable to load tickets" description={error} /> : null}