Develop Frontend Components for Project, Package, and Instance Views

frontend/src/components/Badge.css

@@ -0,0 +1,43 @@
+/* Badge Component */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 100px;
+  font-weight: 500;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.badge--default {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-primary);
+}
+
+.badge--success,
+.badge--public {
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.badge--warning,
+.badge--private {
+  background: var(--warning-bg);
+  color: var(--warning);
+  border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.badge--error {
+  background: var(--error-bg);
+  color: var(--error);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.badge--info {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}

frontend/src/components/Badge.tsx

@@ -0,0 +1,17 @@
+import './Badge.css';
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'public' | 'private';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  className?: string;
+}
+
+export function Badge({ children, variant = 'default', className = '' }: BadgeProps) {
+  return (
+    <span className={`badge badge--${variant} ${className}`.trim()}>
+      {children}
+    </span>
+  );
+}

frontend/src/components/Breadcrumb.css

@@ -0,0 +1,38 @@
+/* Breadcrumb Component */
+.breadcrumb {
+  margin-bottom: 24px;
+}
+
+.breadcrumb__list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.breadcrumb__link {
+  color: var(--text-secondary);
+  transition: color var(--transition-fast);
+}
+
+.breadcrumb__link:hover {
+  color: var(--accent-primary);
+}
+
+.breadcrumb__separator {
+  color: var(--text-muted);
+}
+
+.breadcrumb__current {
+  color: var(--text-primary);
+  font-weight: 500;
+}

frontend/src/components/Breadcrumb.tsx

@@ -0,0 +1,38 @@
+import { Link } from 'react-router-dom';
+import './Breadcrumb.css';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export function Breadcrumb({ items, className = '' }: BreadcrumbProps) {
+  return (
+    <nav className={`breadcrumb ${className}`.trim()} aria-label="Breadcrumb">
+      <ol className="breadcrumb__list">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <li key={index} className="breadcrumb__item">
+              {!isLast && item.href ? (
+                <>
+                  <Link to={item.href} className="breadcrumb__link">
+                    {item.label}
+                  </Link>
+                  <span className="breadcrumb__separator">/</span>
+                </>
+              ) : (
+                <span className="breadcrumb__current">{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

frontend/src/components/Card.css

@@ -0,0 +1,78 @@
+/* Card Component */
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  transition: all var(--transition-normal);
+}
+
+.card--elevated {
+  box-shadow: var(--shadow-md);
+}
+
+.card--accent {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.card--clickable {
+  display: block;
+  color: inherit;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.card--clickable::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--accent-gradient);
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+  border-radius: var(--radius-lg);
+}
+
+.card--clickable:hover {
+  border-color: var(--border-secondary);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  color: inherit;
+}
+
+.card--clickable:hover::before {
+  opacity: 0.03;
+}
+
+.card__header {
+  margin-bottom: 16px;
+}
+
+.card__header h3 {
+  color: var(--text-primary);
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.card__header p {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.card__body {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.card__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.75rem;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-primary);
+  margin-top: 16px;
+}

frontend/src/components/Card.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import './Card.css';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+  href?: string;
+  variant?: 'default' | 'elevated' | 'accent';
+}
+
+export function Card({ children, className = '', onClick, href, variant = 'default' }: CardProps) {
+  const baseClass = `card card--${variant} ${className}`.trim();
+
+  if (href) {
+    return (
+      <a href={href} className={`${baseClass} card--clickable`}>
+        {children}
+      </a>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <div className={`${baseClass} card--clickable`} onClick={onClick} role="button" tabIndex={0}>
+        {children}
+      </div>
+    );
+  }
+
+  return <div className={baseClass}>{children}</div>;
+}
+
+interface CardHeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardHeader({ children, className = '' }: CardHeaderProps) {
+  return <div className={`card__header ${className}`.trim()}>{children}</div>;
+}
+
+interface CardBodyProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardBody({ children, className = '' }: CardBodyProps) {
+  return <div className={`card__body ${className}`.trim()}>{children}</div>;
+}
+
+interface CardFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardFooter({ children, className = '' }: CardFooterProps) {
+  return <div className={`card__footer ${className}`.trim()}>{children}</div>;
+}

frontend/src/components/DataTable.css

@@ -0,0 +1,100 @@
+/* DataTable Component */
+.data-table {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.data-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+  padding: 14px 20px;
+  text-align: left;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.data-table th {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-tertiary);
+}
+
+.data-table__th--sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: color var(--transition-fast);
+}
+
+.data-table__th--sortable:hover {
+  color: var(--text-primary);
+}
+
+.data-table__th-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.data-table__sort-icon {
+  transition: transform var(--transition-fast);
+}
+
+.data-table__sort-icon--desc {
+  transform: rotate(180deg);
+}
+
+.data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.data-table tbody tr {
+  transition: background var(--transition-fast);
+}
+
+.data-table tbody tr:hover {
+  background: var(--bg-tertiary);
+}
+
+.data-table td strong {
+  color: var(--accent-primary);
+  font-weight: 600;
+}
+
+/* Empty state */
+.data-table__empty {
+  text-align: center;
+  padding: 48px 32px;
+  color: var(--text-tertiary);
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-secondary);
+  border-radius: var(--radius-lg);
+}
+
+.data-table__empty p {
+  font-size: 0.9375rem;
+}
+
+/* Utility classes for cells */
+.data-table .cell-mono {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.8125rem;
+  color: var(--text-tertiary);
+  background: var(--bg-tertiary);
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+}
+
+.data-table .cell-truncate {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

frontend/src/components/DataTable.tsx

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react';
+import './DataTable.css';
+
+interface Column<T> {
+  key: string;
+  header: string;
+  render: (item: T) => ReactNode;
+  className?: string;
+  sortable?: boolean;
+}
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  keyExtractor: (item: T) => string;
+  emptyMessage?: string;
+  className?: string;
+  onSort?: (key: string) => void;
+  sortKey?: string;
+  sortOrder?: 'asc' | 'desc';
+}
+
+export function DataTable<T>({
+  data,
+  columns,
+  keyExtractor,
+  emptyMessage = 'No data available',
+  className = '',
+  onSort,
+  sortKey,
+  sortOrder,
+}: DataTableProps<T>) {
+  if (data.length === 0) {
+    return (
+      <div className="data-table__empty">
+        <p>{emptyMessage}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`data-table ${className}`.trim()}>
+      <table>
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                className={`${column.className || ''} ${column.sortable ? 'data-table__th--sortable' : ''}`}
+                onClick={() => column.sortable && onSort?.(column.key)}
+              >
+                <span className="data-table__th-content">
+                  {column.header}
+                  {column.sortable && sortKey === column.key && (
+                    <svg
+                      className={`data-table__sort-icon ${sortOrder === 'desc' ? 'data-table__sort-icon--desc' : ''}`}
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <polyline points="18 15 12 9 6 15" />
+                    </svg>
+                  )}
+                </span>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((item) => (
+            <tr key={keyExtractor(item)}>
+              {columns.map((column) => (
+                <td key={column.key} className={column.className}>
+                  {column.render(item)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

frontend/src/components/FilterChip.css

@@ -0,0 +1,63 @@
+/* FilterChip Component */
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px 4px 10px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 100px;
+  font-size: 0.75rem;
+}
+
+.filter-chip__label {
+  color: var(--text-muted);
+}
+
+.filter-chip__value {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.filter-chip__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.filter-chip__remove:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+/* FilterChipGroup */
+.filter-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.filter-chip-group__clear {
+  padding: 4px 10px;
+  background: transparent;
+  border: none;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.filter-chip-group__clear:hover {
+  color: var(--error);
+}

frontend/src/components/FilterChip.tsx

@@ -0,0 +1,47 @@
+import './FilterChip.css';
+
+interface FilterChipProps {
+  label: string;
+  value: string;
+  onRemove: () => void;
+  className?: string;
+}
+
+export function FilterChip({ label, value, onRemove, className = '' }: FilterChipProps) {
+  return (
+    <span className={`filter-chip ${className}`.trim()}>
+      <span className="filter-chip__label">{label}:</span>
+      <span className="filter-chip__value">{value}</span>
+      <button
+        type="button"
+        className="filter-chip__remove"
+        onClick={onRemove}
+        aria-label={`Remove ${label} filter`}
+      >
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </span>
+  );
+}
+
+interface FilterChipGroupProps {
+  children: React.ReactNode;
+  onClearAll?: () => void;
+  className?: string;
+}
+
+export function FilterChipGroup({ children, onClearAll, className = '' }: FilterChipGroupProps) {
+  return (
+    <div className={`filter-chip-group ${className}`.trim()}>
+      {children}
+      {onClearAll && (
+        <button type="button" className="filter-chip-group__clear" onClick={onClearAll}>
+          Clear all
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/Pagination.css

@@ -0,0 +1,64 @@
+/* Pagination Component */
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  margin-top: 16px;
+}
+
+.pagination__info {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+
+.pagination__controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.pagination__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.pagination__btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--border-secondary);
+}
+
+.pagination__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pagination__page--active {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+  color: white;
+}
+
+.pagination__page--active:hover {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+  color: white;
+}
+
+.pagination__ellipsis {
+  padding: 0 8px;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}

frontend/src/components/Pagination.tsx

@@ -0,0 +1,98 @@
+import './Pagination.css';
+
+interface PaginationProps {
+  page: number;
+  totalPages: number;
+  total: number;
+  limit: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export function Pagination({ page, totalPages, total, limit, onPageChange, className = '' }: PaginationProps) {
+  const start = (page - 1) * limit + 1;
+  const end = Math.min(page * limit, total);
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  const getPageNumbers = (): (number | 'ellipsis')[] => {
+    const pages: (number | 'ellipsis')[] = [];
+    const showEllipsisStart = page > 3;
+    const showEllipsisEnd = page < totalPages - 2;
+
+    pages.push(1);
+
+    if (showEllipsisStart) {
+      pages.push('ellipsis');
+    }
+
+    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
+      if (!pages.includes(i)) {
+        pages.push(i);
+      }
+    }
+
+    if (showEllipsisEnd) {
+      pages.push('ellipsis');
+    }
+
+    if (totalPages > 1 && !pages.includes(totalPages)) {
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  return (
+    <div className={`pagination ${className}`.trim()}>
+      <span className="pagination__info">
+        Showing {start}-{end} of {total}
+      </span>
+
+      <div className="pagination__controls">
+        <button
+          type="button"
+          className="pagination__btn"
+          onClick={() => onPageChange(page - 1)}
+          disabled={page <= 1}
+          aria-label="Previous page"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+
+        {getPageNumbers().map((pageNum, index) =>
+          pageNum === 'ellipsis' ? (
+            <span key={`ellipsis-${index}`} className="pagination__ellipsis">
+              ...
+            </span>
+          ) : (
+            <button
+              key={pageNum}
+              type="button"
+              className={`pagination__btn pagination__page ${pageNum === page ? 'pagination__page--active' : ''}`}
+              onClick={() => onPageChange(pageNum)}
+            >
+              {pageNum}
+            </button>
+          )
+        )}
+
+        <button
+          type="button"
+          className="pagination__btn"
+          onClick={() => onPageChange(page + 1)}
+          disabled={page >= totalPages}
+          aria-label="Next page"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/SearchInput.css

@@ -0,0 +1,57 @@
+/* SearchInput Component */
+.search-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input__icon {
+  position: absolute;
+  left: 12px;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.search-input__field {
+  width: 100%;
+  padding: 10px 36px 10px 40px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+
+.search-input__field::placeholder {
+  color: var(--text-muted);
+}
+
+.search-input__field:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+  background: var(--bg-elevated);
+}
+
+.search-input__clear {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.search-input__clear:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}

frontend/src/components/SearchInput.tsx

@@ -0,0 +1,74 @@
+import { useState, useEffect } from 'react';
+import './SearchInput.css';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  debounceMs?: number;
+  className?: string;
+}
+
+export function SearchInput({
+  value,
+  onChange,
+  placeholder = 'Search...',
+  debounceMs = 300,
+  className = '',
+}: SearchInputProps) {
+  const [localValue, setLocalValue] = useState(value);
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (localValue !== value) {
+        onChange(localValue);
+      }
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [localValue, debounceMs, onChange, value]);
+
+  return (
+    <div className={`search-input ${className}`.trim()}>
+      <svg
+        className="search-input__icon"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+      <input
+        type="text"
+        value={localValue}
+        onChange={(e) => setLocalValue(e.target.value)}
+        placeholder={placeholder}
+        className="search-input__field"
+      />
+      {localValue && (
+        <button
+          type="button"
+          className="search-input__clear"
+          onClick={() => {
+            setLocalValue('');
+            onChange('');
+          }}
+          aria-label="Clear search"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/SortDropdown.css

@@ -0,0 +1,95 @@
+/* SortDropdown Component */
+.sort-dropdown {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+}
+
+.sort-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.sort-dropdown__trigger:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--border-secondary);
+}
+
+.sort-dropdown__chevron {
+  transition: transform var(--transition-fast);
+}
+
+.sort-dropdown__chevron--open {
+  transform: rotate(180deg);
+}
+
+.sort-dropdown__order {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.sort-dropdown__order:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--border-secondary);
+}
+
+.sort-dropdown__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  min-width: 180px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 100;
+  overflow: hidden;
+}
+
+.sort-dropdown__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 14px;
+  background: transparent;
+  border: none;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: left;
+}
+
+.sort-dropdown__option:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.sort-dropdown__option--selected {
+  color: var(--accent-primary);
+  font-weight: 500;
+}

frontend/src/components/SortDropdown.tsx

@@ -0,0 +1,108 @@
+import { useState, useRef, useEffect } from 'react';
+import './SortDropdown.css';
+
+export interface SortOption {
+  value: string;
+  label: string;
+}
+
+interface SortDropdownProps {
+  options: SortOption[];
+  value: string;
+  order: 'asc' | 'desc';
+  onChange: (value: string, order: 'asc' | 'desc') => void;
+  className?: string;
+}
+
+export function SortDropdown({ options, value, order, onChange, className = '' }: SortDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find((o) => o.value === value) || options[0];
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const toggleOrder = () => {
+    onChange(value, order === 'asc' ? 'desc' : 'asc');
+  };
+
+  return (
+    <div className={`sort-dropdown ${className}`.trim()} ref={dropdownRef}>
+      <button
+        type="button"
+        className="sort-dropdown__trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <line x1="4" y1="6" x2="20" y2="6" />
+          <line x1="4" y1="12" x2="14" y2="12" />
+          <line x1="4" y1="18" x2="8" y2="18" />
+        </svg>
+        <span>Sort: {selectedOption.label}</span>
+        <svg
+          className={`sort-dropdown__chevron ${isOpen ? 'sort-dropdown__chevron--open' : ''}`}
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        className="sort-dropdown__order"
+        onClick={toggleOrder}
+        title={order === 'asc' ? 'Ascending' : 'Descending'}
+      >
+        {order === 'asc' ? (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="12" y1="19" x2="12" y2="5" />
+            <polyline points="5 12 12 5 19 12" />
+          </svg>
+        ) : (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <polyline points="19 12 12 19 5 12" />
+          </svg>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="sort-dropdown__menu">
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              className={`sort-dropdown__option ${option.value === value ? 'sort-dropdown__option--selected' : ''}`}
+              onClick={() => {
+                onChange(option.value, order);
+                setIsOpen(false);
+              }}
+            >
+              {option.label}
+              {option.value === value && (
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/index.ts

@@ -0,0 +1,9 @@
+export { Card, CardHeader, CardBody, CardFooter } from './Card';
+export { Badge } from './Badge';
+export { Breadcrumb } from './Breadcrumb';
+export { SearchInput } from './SearchInput';
+export { SortDropdown } from './SortDropdown';
+export type { SortOption } from './SortDropdown';
+export { FilterChip, FilterChipGroup } from './FilterChip';
+export { DataTable } from './DataTable';
+export { Pagination } from './Pagination';