Replace project cards with sortable data table on Home page

frontend/src/components/DataTable.css

@@ -98,3 +98,58 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Clickable rows */
+.data-table__row--clickable {
+  cursor: pointer;
+}
+
+.data-table__row--clickable:hover {
+  background: var(--bg-hover);
+}
+
+/* Responsive table wrapper */
+.data-table--responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.data-table--responsive table {
+  min-width: 800px;
+}
+
+/* Cell with name and icon */
+.data-table .cell-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.data-table .cell-name:hover {
+  color: var(--accent-primary);
+}
+
+/* Date cells */
+.data-table .cell-date {
+  color: var(--text-tertiary);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+}
+
+/* Description cell */
+.data-table .cell-description {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Owner cell */
+.data-table .cell-owner {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}

frontend/src/components/DataTable.tsx

@@ -18,6 +18,7 @@ interface DataTableProps<T> {
   onSort?: (key: string) => void;
   sortKey?: string;
   sortOrder?: 'asc' | 'desc';
+  onRowClick?: (item: T) => void;
 }
 
 export function DataTable<T>({
@@ -29,6 +30,7 @@ export function DataTable<T>({
   onSort,
   sortKey,
   sortOrder,
+  onRowClick,
 }: DataTableProps<T>) {
   if (data.length === 0) {
     return (
@@ -71,7 +73,11 @@ export function DataTable<T>({
         </thead>
         <tbody>
           {data.map((item) => (
-            <tr key={keyExtractor(item)}>
+            <tr
+              key={keyExtractor(item)}
+              onClick={() => onRowClick?.(item)}
+              className={onRowClick ? 'data-table__row--clickable' : ''}
+            >
               {columns.map((column) => (
                 <td key={column.key} className={column.className}>
                   {column.render(item)}