+ {/* Title */}
+ {title &&
+ );
+}
+
+// Skeleton loader for activity items
+function ActivityItemSkeleton() {
+ return (
+ {title}
} + + {/* Activity List */} +
+ {isLoading ? (
+ // Loading state
+ Array.from({ length: 3 }).map((_, index) => (
+
+
+ {/* Show more link */}
+ {maxItems && activities.length > maxItems && (
+
+ )}
+ {emptyMessage}
+ ) : ( + // Grouped activities + sortedDateKeys.map(dateKey => ( +
+
+ ))
+ )}
+ + {formatDateGroup(dateKey)} +
+-
+ {groupedActivities[dateKey].map(activity => (
+
-
+ {/* Timeline connector */}
+
+
+ {/* Activity dot */}
+
+
+ {/* Activity content */}
+ + {/* Activity icon or user avatar */} + {activity.user ? ( ++
+ + ) : activity.icon ? ( ++ + {activity.user.name.split(' ').map(n => n[0]).join('')} + +++ ) : null} + + {/* Activity details */} ++ +++ {activity.user && ( + {activity.user.name} + )}{' '} + {activity.description} ++ + {/* Time */} ++++ {formatTime(activity.timestamp)} +
+ ))}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/dashboard/dashboard-header.tsx b/client/src/components/dashboard/dashboard-header.tsx
index e69de29..5b0eb1d 100644
--- a/client/src/components/dashboard/dashboard-header.tsx
+++ b/client/src/components/dashboard/dashboard-header.tsx
@@ -0,0 +1,121 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ChevronLeft, LucideIcon } from "lucide-react";
+
+/**
+ * Dashboard header component for dashboard pages
+ *
+ * @example
+ * ```tsx
+ *
+
+
+ {/* Back Link */}
+ {(backHref || onBackClick) && (
+
+ )}
+
+ {/* Header Content */}
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/ui/data-table.tsx b/client/src/components/ui/data-table.tsx
new file mode 100644
index 0000000..249a820
--- /dev/null
+++ b/client/src/components/ui/data-table.tsx
@@ -0,0 +1,332 @@
+import { useState } from "react";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+ TableFooter,
+} from "@/components/ui/table";
+import {
+ flexRender,
+ getCoreRowModel,
+ useReactTable,
+ getPaginationRowModel,
+ getSortedRowModel,
+ getFilteredRowModel,
+ ColumnDef,
+ SortingState,
+ ColumnFiltersState,
+ VisibilityState,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ChevronDown, ChevronLeft, ChevronRight, SlidersHorizontal } from "lucide-react";
+import { EmptyState } from "@/components/ui/empty-state";
+import { cn } from "@/lib/utils";
+
+/**
+ * DataTable component for displaying and managing tabular data
+ *
+ * @example
+ * ```tsx
+ *
+
+
+ {/* Optional Icon */}
+ {Icon && (
+
+
+ {/* Actions */}
+
+
+ )}
+
+ {/* Title and Description */}
+
+
+ {title}
+ {description && ( +{description}
+ )} +
+ {secondaryActions}
+ {action}
+
+
+ {/* Table Controls */}
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/ui/empty-state.tsx b/client/src/components/ui/empty-state.tsx
index e69de29..8a42e9a 100644
--- a/client/src/components/ui/empty-state.tsx
+++ b/client/src/components/ui/empty-state.tsx
@@ -0,0 +1,105 @@
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { LucideIcon } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+/**
+ * Empty state component for displaying when no data is available
+ *
+ * @example
+ * ```tsx
+ *
+ {/* Search Input */}
+ {showElements.search && (
+
+
+ {/* Table */}
+
+ setGlobalFilter(e.target.value)}
+ className="max-w-xs"
+ />
+
+ )}
+
+ {/* View/Filter Options */}
+
+ {showElements.columnVisibility && (
+
+
+
+
+
+ {table.getAllColumns()
+ .filter(column => column.getCanHide())
+ .map(column => (
+ column.toggleVisibility(!!value)}
+ >
+ {column.id.replace(/([A-Z])/g, ' $1').trim()}
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+ {/* Icon */}
+ {customIcon ? (
+ customIcon
+ ) : Icon ? (
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/ui/stat-card.tsx b/client/src/components/ui/stat-card.tsx
index e69de29..2ac2933 100644
--- a/client/src/components/ui/stat-card.tsx
+++ b/client/src/components/ui/stat-card.tsx
@@ -0,0 +1,141 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { LucideIcon } from "lucide-react";
+
+/**
+ * Stat card component for displaying statistical metrics
+ *
+ * @example
+ * ```tsx
+ *
+
+ ) : null}
+
+ {/* Title */}
+ {title}
+ + {/* Description */} + {description && ( +{description}
+ )} + + {/* Action */} + {action && ( +{action}
+ )}
+
+ {/* Header with icon and title */}
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/ui/tag-input.tsx b/client/src/components/ui/tag-input.tsx
index e69de29..b52c305 100644
--- a/client/src/components/ui/tag-input.tsx
+++ b/client/src/components/ui/tag-input.tsx
@@ -0,0 +1,233 @@
+import { useState, useRef, KeyboardEvent, useEffect } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { X, Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Tag input component for entering and managing tags
+ *
+ * @example
+ * ```tsx
+ *
+
+
+ {/* Value */}
+ {isLoading ? (
+
+ ) : (
+ {title}
+ {Icon && ( +
+
+ )}
+ {value}
+ )}
+
+ {/* Description with trend */}
+ {description && (
+
+ {trend && {trendSymbol}}
+
+ {description}
+
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/work/work-preview.tsx b/client/src/components/work/work-preview.tsx
new file mode 100644
index 0000000..3122531
--- /dev/null
+++ b/client/src/components/work/work-preview.tsx
@@ -0,0 +1,412 @@
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ArrowRight, Bookmark, BookmarkCheck, LucideIcon, MoreVertical } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { Link } from "wouter";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+/**
+ * Work preview component for displaying works in lists and grids
+ *
+ * @example
+ * ```tsx
+ * inputRef.current?.focus()}
+ >
+ {/* Display existing tags */}
+ {value.map((tag, index) => (
+
+ {tag}
+
+
+ ))}
+
+ {/* Input for new tags */}
+ {(!maxTags || value.length < maxTags) && (
+
+
+ {/* Show max tags limit */}
+ {maxTags && (
+
+ setInputValue(e.target.value)}
+ onKeyDown={handleKeyDown}
+ onFocus={() => inputValue && setShowSuggestions(filteredSuggestions.length > 0)}
+ onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
+ placeholder={placeholder}
+ className={cn("border-0 ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 p-0 h-8", inputClassName)}
+ disabled={disabled}
+ />
+
+ {/* Suggestions dropdown */}
+ {showSuggestions && (
+
+ )}
+
+ {/* Add button for mobile usability */}
+ {inputValue && !disabled && (
+
+ )}
+
+ {filteredSuggestions.map((suggestion) => (
+
+ ))}
+
+ )}
+ + {value.length} of {maxTags} tags used +
+ )} +
+ No Image
+
+);
+
+export interface WorkPreviewProps {
+ /**
+ * Work data to display
+ */
+ work: {
+ id: number;
+ title: string;
+ slug: string;
+ excerpt?: string | null;
+ author?: {
+ name: string;
+ slug?: string;
+ };
+ coverImage?: string | null;
+ tags?: Array<{
+ id: number;
+ name: string;
+ }>;
+ translationCount?: number;
+ createdAt?: Date | string;
+ language?: string;
+ isFeatured?: boolean;
+ };
+ /**
+ * Whether this work is bookmarked by the current user
+ */
+ isBookmarked?: boolean;
+ /**
+ * Callback when bookmark is toggled
+ */
+ onToggleBookmark?: (id: number) => void;
+ /**
+ * Callback when more menu option is selected
+ */
+ onAction?: (action: string, id: number) => void;
+ /**
+ * Layout variant
+ */
+ variant?: "default" | "compact" | "grid" | "featured";
+ /**
+ * Custom action button
+ */
+ actionButton?: React.ReactNode;
+ /**
+ * Dropdown menu options
+ */
+ menuOptions?: Array<{
+ label: string;
+ action: string;
+ icon?: LucideIcon;
+ variant?: "default" | "destructive";
+ }>;
+ /**
+ * Additional CSS classes
+ */
+ className?: string;
+ /**
+ * Whether the preview is in a loading state
+ */
+ isLoading?: boolean;
+}
+
+export function WorkPreview({
+ work,
+ isBookmarked,
+ onToggleBookmark,
+ onAction,
+ variant = "default",
+ actionButton,
+ menuOptions = [
+ { label: "View details", action: "view" },
+ { label: "Edit work", action: "edit" },
+ { label: "Add to collection", action: "add-to-collection" },
+ { label: "Delete", action: "delete", variant: "destructive" },
+ ],
+ className,
+ isLoading = false,
+}: WorkPreviewProps) {
+ // Format date
+ const formattedDate = work.createdAt
+ ? formatDistanceToNow(new Date(work.createdAt), { addSuffix: true })
+ : "";
+
+ // Determine if we should show tags based on variant
+ const showTags = variant !== "compact";
+
+ // Limit number of tags based on variant
+ const maxTags = variant === "grid" ? 2 : variant === "featured" ? 4 : 3;
+ const displayTags = work.tags?.slice(0, maxTags) || [];
+ const hasMoreTags = (work.tags?.length || 0) > maxTags;
+
+ if (isLoading) {
+ return
+ {work.coverImage ? (
+ 
+ ) : (
+
+ Featured
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+ {menuOptions.map((option, index) => (
+
+ {index > 0 && option.variant === "destructive" && (
+ onAction(option.action, work.id)}
+ >
+ {option.icon &&
+
+ ))}
+
+
+ )}
+
+ {/* Bookmark button - For default and compact when not on image */}
+ {onToggleBookmark && (variant === "default" || variant === "compact") && (
+
+ )}
+
+
+ {/* Author name - for all except compact */}
+ {work.author && variant !== "compact" && (
+
+ {work.author.slug ? (
+
+ {work.author.name}
+
+ ) : (
+ work.author.name
+ )}
+
+ )}
+
+ {/* Title */}
+
+
+ {work.title}
+
+
+
+ {/* Language - if available */}
+ {work.language && (
+
+ {work.language}
+
+ )}
+
+
+ {/* Actions dropdown */}
+ {onAction && (
+ {work.excerpt}
+
+ {displayTags.map((tag) => (
+
+ {tag.name}
+
+ ))}
+ {hasMoreTags && (
+
+ +{(work.tags?.length || 0) - maxTags} more
+
+ )}
+
+ )}
+
+ {/* Translations count and date */}
+
+ {work.translationCount !== undefined && (
+ {work.translationCount} translation{work.translationCount !== 1 && 's'}
+ )}
+
+ {formattedDate && variant !== "compact" && (
+ {formattedDate}
+ )}
+
+ {/* Custom action button or default view button */}
+ {actionButton || (
+
+ )}
+
+
+
+
+
+ )}
+
+
+