onRowClick?.(item)}
+ className={onRowClick ? 'data-table__row--clickable' : ''}
+ >
{columns.map((column) => (
{column.render(item)}
diff --git a/frontend/src/pages/Home.css b/frontend/src/pages/Home.css
index f5891d8..6a2f176 100644
--- a/frontend/src/pages/Home.css
+++ b/frontend/src/pages/Home.css
@@ -1,6 +1,6 @@
/* Page Layout */
.home {
- max-width: 1000px;
+ max-width: 1200px;
margin: 0 auto;
}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 6d45faf..fb6aeab 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,9 +1,9 @@
import { useState, useEffect, useCallback } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams, useNavigate } from 'react-router-dom';
import { Project, PaginatedResponse } from '../types';
import { listProjects, createProject } from '../api';
import { Badge } from '../components/Badge';
-import { SortDropdown, SortOption } from '../components/SortDropdown';
+import { DataTable } from '../components/DataTable';
import { FilterDropdown, FilterOption } from '../components/FilterDropdown';
import { FilterChip, FilterChipGroup } from '../components/FilterChip';
import { Pagination } from '../components/Pagination';
@@ -20,12 +20,6 @@ function LockIcon() {
);
}
-const SORT_OPTIONS: SortOption[] = [
- { value: 'name', label: 'Name' },
- { value: 'created_at', label: 'Created' },
- { value: 'updated_at', label: 'Updated' },
-];
-
const VISIBILITY_OPTIONS: FilterOption[] = [
{ value: '', label: 'All Projects' },
{ value: 'public', label: 'Public Only' },
@@ -34,6 +28,7 @@ const VISIBILITY_OPTIONS: FilterOption[] = [
function Home() {
const [searchParams, setSearchParams] = useSearchParams();
+ const navigate = useNavigate();
const { user } = useAuth();
const [projectsData, setProjectsData] = useState | null>(null);
@@ -101,8 +96,10 @@ function Home() {
}
}
- const handleSortChange = (newSort: string, newOrder: 'asc' | 'desc') => {
- updateParams({ sort: newSort, order: newOrder, page: '1' });
+ const handleSortChange = (columnKey: string) => {
+ // Toggle order if clicking the same column, otherwise default to asc
+ const newOrder = columnKey === sort ? (order === 'asc' ? 'desc' : 'asc') : 'asc';
+ updateParams({ sort: columnKey, order: newOrder, page: '1' });
};
const handleVisibilityChange = (value: string) => {
@@ -189,7 +186,6 @@ function Home() {
value={visibility}
onChange={handleVisibilityChange}
/>
-
{hasActiveFilters && (
@@ -204,69 +200,106 @@ function Home() {
)}
- {projects.length === 0 ? (
-
- {hasActiveFilters ? (
- No projects match your filters. Try adjusting your search.
- ) : (
- No projects yet. Create your first project to get started!
- )}
-
- {projects.map((project) => (
-
-
+
+ project.id}
+ onRowClick={(project) => navigate(`/project/${project.name}`)}
+ onSort={handleSortChange}
+ sortKey={sort}
+ sortOrder={order}
+ emptyMessage={
+ hasActiveFilters
+ ? 'No projects match your filters. Try adjusting your search.'
+ : 'No projects yet. Create your first project to get started!'
+ }
+ columns={[
+ {
+ key: 'name',
+ header: 'Name',
+ sortable: true,
+ render: (project) => (
+
{!project.is_public && }
{project.name}
-
- {project.description && {project.description} }
-
-
-
- {project.is_public ? 'Public' : 'Private'}
-
- {user && project.access_level && (
-
+ ),
+ },
+ {
+ key: 'description',
+ header: 'Description',
+ className: 'cell-description',
+ render: (project) => project.description || '—',
+ },
+ {
+ key: 'visibility',
+ header: 'Visibility',
+ render: (project) => (
+
+ {project.is_public ? 'Public' : 'Private'}
+
+ ),
+ },
+ {
+ key: 'created_by',
+ header: 'Owner',
+ className: 'cell-owner',
+ render: (project) => project.created_by,
+ },
+ ...(user
+ ? [
+ {
+ key: 'access_level',
+ header: 'Access',
+ render: (project: Project) =>
+ project.access_level ? (
+
- {project.is_owner ? 'Owner' : project.access_level.charAt(0).toUpperCase() + project.access_level.slice(1)}
-
- )}
-
-
- Created {new Date(project.created_at).toLocaleDateString()}
- {project.updated_at !== project.created_at && (
- Updated {new Date(project.updated_at).toLocaleDateString()}
- )}
-
-
- by {project.created_by}
-
-
- ))}
-
+ t.id}
+ emptyMessage={
+ hasActiveFilters
+ ? 'No tags match your filters. Try adjusting your search.'
+ : 'No tags yet. Upload an artifact with a tag to create one!'
}
- }}
- sortKey={sort}
- sortOrder={order}
- />
+ onSort={handleSortChange}
+ sortKey={sort}
+ sortOrder={order}
+ />
+
{pagination && pagination.total_pages > 1 && (
{
- updateParams({ sort: newSort, order: newOrder, page: '1' });
+ const handleSortChange = (columnKey: string) => {
+ const newOrder = columnKey === sort ? (order === 'asc' ? 'desc' : 'asc') : 'asc';
+ updateParams({ sort: columnKey, order: newOrder, page: '1' });
};
const handleFormatChange = (value: string) => {
@@ -294,7 +289,6 @@ function ProjectPage() {
))}
-
{hasActiveFilters && (
@@ -304,70 +298,78 @@ function ProjectPage() {
)}
- {packages.length === 0 ? (
-
- {hasActiveFilters ? (
- No packages match your filters. Try adjusting your search.
- ) : (
- No packages yet. Create your first package to start uploading artifacts!
- )}
-
- {packages.map((pkg) => (
-
-
- {pkg.name}
- {pkg.format}
-
- {pkg.description && {pkg.description} }
+
+ pkg.id}
+ onRowClick={(pkg) => navigate(`/project/${projectName}/${pkg.name}`)}
+ onSort={handleSortChange}
+ sortKey={sort}
+ sortOrder={order}
+ emptyMessage={
+ hasActiveFilters
+ ? 'No packages match your filters. Try adjusting your search.'
+ : 'No packages yet. Create your first package to start uploading artifacts!'
+ }
+ columns={[
+ {
+ key: 'name',
+ header: 'Name',
+ sortable: true,
+ render: (pkg) => {pkg.name},
+ },
+ {
+ key: 'description',
+ header: 'Description',
+ className: 'cell-description',
+ render: (pkg) => pkg.description || '—',
+ },
+ {
+ key: 'format',
+ header: 'Format',
+ render: (pkg) => {pkg.format},
+ },
+ {
+ key: 'tag_count',
+ header: 'Tags',
+ render: (pkg) => pkg.tag_count ?? '—',
+ },
+ {
+ key: 'artifact_count',
+ header: 'Artifacts',
+ render: (pkg) => pkg.artifact_count ?? '—',
+ },
+ {
+ key: 'total_size',
+ header: 'Size',
+ render: (pkg) =>
+ pkg.total_size !== undefined && pkg.total_size > 0 ? formatBytes(pkg.total_size) : '—',
+ },
+ {
+ key: 'latest_tag',
+ header: 'Latest',
+ render: (pkg) =>
+ pkg.latest_tag ? {pkg.latest_tag} : '—',
+ },
+ {
+ key: 'created_at',
+ header: 'Created',
+ sortable: true,
+ className: 'cell-date',
+ render: (pkg) => new Date(pkg.created_at).toLocaleDateString(),
+ },
+ ]}
+ />
+
- {(pkg.tag_count !== undefined || pkg.artifact_count !== undefined) && (
-
- {pkg.tag_count !== undefined && (
-
- {pkg.tag_count}
- Tags
-
- )}
- {pkg.artifact_count !== undefined && (
-
- {pkg.artifact_count}
- Artifacts
-
- )}
- {pkg.total_size !== undefined && pkg.total_size > 0 && (
-
- {formatBytes(pkg.total_size)}
- Size
-
- )}
-
- )}
-
-
- {pkg.latest_tag && (
-
- Latest: {pkg.latest_tag}
-
- )}
- Created {new Date(pkg.created_at).toLocaleDateString()}
-
-
- ))}
- |