feat: scaffold tickets experience

web/src/components/tickets/tickets-view.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { useMemo, useState } from "react"
+
+import { tickets } from "@/lib/mocks/tickets"
+import { TicketsFilters, TicketFiltersState, defaultTicketFilters } from "@/components/tickets/tickets-filters"
+import { TicketsTable } from "@/components/tickets/tickets-table"
+
+function applyFilters(base: typeof tickets, filters: TicketFiltersState) {
+  return base.filter((ticket) => {
+    if (filters.status && ticket.status !== filters.status) return false
+    if (filters.priority && ticket.priority !== filters.priority) return false
+    if (filters.queue && ticket.queue !== filters.queue) return false
+    if (filters.channel && ticket.channel !== filters.channel) return false
+    if (filters.search) {
+      const term = filters.search.toLowerCase()
+      const reference = `#${ticket.reference}`.toLowerCase()
+      if (
+        !ticket.subject.toLowerCase().includes(term) &&
+        !reference.includes(term)
+      ) {
+        return false
+      }
+    }
+    return true
+  })
+}
+
+export function TicketsView() {
+  const [filters, setFilters] = useState<TicketFiltersState>(defaultTicketFilters)
+
+  const filteredTickets = useMemo(() => applyFilters(tickets, filters), [filters])
+
+  return (
+    <div className="flex flex-col gap-6 px-4 lg:px-6">
+      <TicketsFilters onChange={setFilters} />
+      <TicketsTable tickets={filteredTickets} />
+    </div>
+  )
+}
+