initial scaffolding

tinker_tickets_react/src/Components/DashboardView/TicketTable.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import type { TicketListItem } from "../../types/ticket";
+
+interface TicketTableProps {
+  tickets: TicketListItem[];
+  sortCol: keyof TicketListItem;
+  sortDir: "asc" | "desc";
+  onSort: (col: keyof TicketListItem) => void;
+}
+
+const columns: { key: keyof TicketListItem; label: string }[] = [
+  { key: "ticket_id", label: "Ticket ID" },
+  { key: "priority", label: "Priority" },
+  { key: "title", label: "Title" },
+  { key: "category", label: "Category" },
+  { key: "type", label: "Type" },
+  { key: "status", label: "Status" },
+  { key: "created_at", label: "Created" },
+  { key: "updated_at", label: "Updated" },
+];
+
+const TicketTable: React.FC<TicketTableProps> = ({
+  tickets,
+  sortCol,
+  sortDir,
+  onSort,
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          {columns.map((col) => (
+            <th
+              key={col.key}
+              onClick={() => onSort(col.key)}
+              className={sortCol === col.key ? `sort-${sortDir}` : ""}
+            >
+              {col.label}
+            </th>
+          ))}
+        </tr>
+      </thead>
+
+      <tbody>
+        {tickets.length === 0 && (
+          <tr>
+            <td colSpan={8}>No tickets found</td>
+          </tr>
+        )}
+
+        {tickets.map((t) => (
+          <tr key={t.ticket_id} className={`priority-${t.priority}`}>
+            <td>
+              <a
+                className="ticket-link"
+                onClick={() => navigate(`/ticket/${t.ticket_id}`)}
+              >
+                {t.ticket_id}
+              </a>
+            </td>
+            <td>{t.priority}</td>
+            <td>{t.title}</td>
+            <td>{t.category}</td>
+            <td>{t.type}</td>
+            <td>
+              <span className={`status-${t.status.replace(" ", "-")}`}>
+                {t.status}
+              </span>
+            </td>
+            <td>{new Date(t.created_at).toLocaleString()}</td>
+            <td>{new Date(t.updated_at).toLocaleString()}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default TicketTable;