evan/AnthoLume
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

wip 9

Browse Source
This commit is contained in:
Evan Reichard
2026-03-16 10:20:01 -04:00
parent c46dcb440d
commit 7c47f2d2eb
25 changed files with 2057 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/.prettierrc Normal file
View File

@@ -0,0 +1,11 @@
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"trailingComma": "es5",
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "lf"
}

50
frontend/eslint.config.js Normal file
View File

@@ -0,0 +1,50 @@
import js from "@eslint/js";
import typescriptParser from "@typescript-eslint/parser";
import typescriptPlugin from "@typescript-eslint/eslint-plugin";
import reactPlugin from "eslint-plugin-react";
import reactHooksPlugin from "eslint-plugin-react-hooks";
import tailwindcss from "eslint-plugin-tailwindcss";
import prettier from "eslint-plugin-prettier";
import eslintConfigPrettier from "eslint-config-prettier";
export default [
js.configs.recommended,
reactPlugin.configs.flat.recommended,
reactHooksPlugin.configs.flat.recommended,
{
files: ["**/*.ts", "**/*.tsx", "**/*.css"],
ignores: ["**/generated/**"],
languageOptions: {
parser: typescriptParser,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
},
plugins: {
"@typescript-eslint": typescriptPlugin,
tailwindcss,
prettier,
},
rules: {
...eslintConfigPrettier.rules,
...tailwindcss.configs.recommended.rules,
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"no-console": ["warn", { allow: ["warn", "error"] }],
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-unused-vars": [
"error",
{ argsIgnorePattern: "^_" },
],
},
settings: {
react: {
version: "detect",
},
},
},
];

1681
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
frontend/package.json
View File

@@ -7,7 +7,11 @@
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"generate:api": "orval"
"generate:api": "orval",
"lint": "eslint src --max-warnings=0",
"lint:fix": "eslint src --fix",
"format": "prettier --check src",
"format:fix": "prettier --write src"
},
"dependencies": {
"@tanstack/react-query": "^5.62.16",
@@ -22,10 +26,19 @@
"devDependencies": {
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.8",
"@typescript-eslint/eslint-plugin": "^8.57.0",
"@typescript-eslint/parser": "^8.57.0",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^9.39.4",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-tailwindcss": "^3.18.2",
"orval": "^7.5.0",
"postcss": "^8.4.49",
"prettier": "^3.8.1",
"tailwindcss": "^3.4.17",
"typescript": "~5.6.2",
"vite": "^6.0.5"

28
frontend/src/components/HamburgerMenu.tsx
View File

@@ -37,11 +37,11 @@ export default function HamburgerMenu() {
const isAdmin = user?.is_admin ?? false;
return (
<div className="flex flex-col z-40 relative ml-6">
<div className="relative z-40 ml-6 flex flex-col">
{/* Checkbox input for state management */}
<input
type="checkbox"
className="absolute lg:hidden z-50 -top-2 w-7 h-7 flex cursor-pointer opacity-0"
className="absolute -top-2 z-50 flex size-7 cursor-pointer opacity-0 lg:hidden"
id="mobile-nav-checkbox"
checked={isOpen}
onChange={(e) => setIsOpen(e.target.checked)}
@@ -49,7 +49,7 @@ export default function HamburgerMenu() {
{/* Hamburger icon lines with CSS animations - hidden on desktop */}
<span
className="lg:hidden bg-black w-7 h-0.5 z-40 mt-0.5 dark:bg-white transition-transform transition-background transition-opacity duration-500"
className="transition-background z-40 mt-0.5 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
style={{
transformOrigin: '5px 0px',
transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
@@ -57,7 +57,7 @@ export default function HamburgerMenu() {
}}
/>
<span
className="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white transition-transform transition-background transition-opacity duration-500"
className="transition-background z-40 mt-1 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
style={{
transformOrigin: '0% 100%',
transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
@@ -66,7 +66,7 @@ export default function HamburgerMenu() {
}}
/>
<span
className="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white transition-transform transition-background transition-opacity duration-500"
className="transition-background z-40 mt-1 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
style={{
transformOrigin: '0% 0%',
transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
@@ -77,7 +77,7 @@ export default function HamburgerMenu() {
{/* Navigation menu with slide animation */}
<div
id="menu"
className="fixed -ml-6 h-full w-56 lg:w-48 bg-white dark:bg-gray-700 shadow-lg"
className="fixed -ml-6 h-full w-56 bg-white shadow-lg lg:w-48 dark:bg-gray-700"
style={{
top: 0,
paddingTop: 'env(safe-area-inset-top)',
@@ -96,8 +96,8 @@ export default function HamburgerMenu() {
}
}
`}</style>
<div className="h-16 flex justify-end lg:justify-around">
<p className="text-xl font-bold dark:text-white text-right my-auto pr-8 lg:pr-0">
<div className="flex h-16 justify-end lg:justify-around">
<p className="my-auto pr-8 text-right text-xl font-bold lg:pr-0 dark:text-white">
AnthoLume
</p>
</div>
@@ -107,7 +107,7 @@ export default function HamburgerMenu() {
key={item.path}
to={item.path}
onClick={() => setIsOpen(false)}
className={`flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4 ${
className={`my-2 flex w-full items-center justify-start border-l-4 p-2 pl-6 transition-colors duration-200 ${
location.pathname === item.path
? 'border-purple-500 dark:text-white'
: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100'
@@ -120,7 +120,7 @@ export default function HamburgerMenu() {
{/* Admin section - only visible for admins */}
{isAdmin && (
<div className={`flex flex-col gap-4 p-2 pl-6 my-2 transition-colors duration-200 border-l-4 ${
<div className={`my-2 flex flex-col gap-4 border-l-4 p-2 pl-6 transition-colors duration-200 ${
hasPrefix(location.pathname, '/admin')
? 'border-purple-500 dark:text-white'
: 'border-transparent text-gray-400'
@@ -129,7 +129,7 @@ export default function HamburgerMenu() {
<Link
to="/admin"
onClick={() => setIsOpen(false)}
className={`flex justify-start w-full ${
className={`flex w-full justify-start ${
location.pathname === '/admin' && !hasPrefix(location.pathname, '/admin/')
? 'dark:text-white'
: 'text-gray-400 hover:text-gray-800 dark:hover:text-gray-100'
@@ -146,7 +146,7 @@ export default function HamburgerMenu() {
key={item.path}
to={item.path}
onClick={() => setIsOpen(false)}
className={`flex justify-start w-full ${
className={`flex w-full justify-start ${
location.pathname === item.path
? 'dark:text-white'
: 'text-gray-400 hover:text-gray-800 dark:hover:text-gray-100'
@@ -162,9 +162,9 @@ export default function HamburgerMenu() {
)}
</nav>
<a
className="flex flex-col gap-2 justify-center items-center p-6 w-full absolute bottom-0 text-black dark:text-white"
className="absolute bottom-0 flex w-full flex-col items-center justify-center gap-2 p-6 text-black dark:text-white"
target="_blank"
href="https://gitea.va.reichard.io/evan/AnthoLume"
href="https://gitea.va.reichard.io/evan/AnthoLume" rel="noreferrer"
>
<span className="text-xs">v1.0.0</span>
</a>

22
frontend/src/components/Layout.tsx
View File

@@ -54,19 +54,19 @@ export default function Layout() {
}
return (
<div className="bg-gray-100 dark:bg-gray-800 min-h-screen">
<div className="min-h-screen bg-gray-100 dark:bg-gray-800">
{/* Header */}
<div className="flex items-center justify-between w-full h-16">
<div className="flex h-16 w-full items-center justify-between">
{/* Mobile Navigation Button with CSS animations */}
<HamburgerMenu />
{/* Header Title */}
<h1 className="text-xl font-bold dark:text-white px-6 lg:ml-44">
<h1 className="px-6 text-xl font-bold lg:ml-44 dark:text-white">
{currentPageTitle}
</h1>
{/* User Dropdown */}
<div className="relative flex items-center justify-end w-full p-4 space-x-4" ref={dropdownRef}>
<div className="relative flex w-full items-center justify-end space-x-4 p-4" ref={dropdownRef}>
<button
onClick={() => setIsUserDropdownOpen(!isUserDropdownOpen)}
className="relative block text-gray-800 dark:text-gray-200"
@@ -75,8 +75,8 @@ export default function Layout() {
</button>
{isUserDropdownOpen && (
<div className="transition duration-200 z-20 absolute right-4 top-16 pt-4">
<div className="w-40 origin-top-right bg-white rounded-md shadow-lg dark:shadow-gray-800 dark:bg-gray-700 ring-1 ring-black ring-opacity-5">
<div className="absolute right-4 top-16 z-20 pt-4 transition duration-200">
<div className="w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-700 dark:shadow-gray-800">
<div
className="py-1"
role="menu"
@@ -86,7 +86,7 @@ export default function Layout() {
<Link
to="/settings"
onClick={() => setIsUserDropdownOpen(false)}
className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
className="text-md block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
role="menuitem"
>
<span className="flex flex-col">
@@ -95,7 +95,7 @@ export default function Layout() {
</Link>
<button
onClick={handleLogout}
className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 w-full text-left"
className="text-md block w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
role="menuitem"
>
<span className="flex flex-col">
@@ -109,10 +109,10 @@ export default function Layout() {
<button
onClick={() => setIsUserDropdownOpen(!isUserDropdownOpen)}
className="flex items-center gap-2 text-gray-500 dark:text-white text-md py-4 cursor-pointer"
className="text-md flex cursor-pointer items-center gap-2 py-4 text-gray-500 dark:text-white"
>
<span>{userData?.username || 'User'}</span>
<span className="text-gray-800 dark:text-gray-200 transition-transform duration-200" style={{ transform: isUserDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>
<span className="text-gray-800 transition-transform duration-200 dark:text-gray-200" style={{ transform: isUserDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>
<ChevronDown size={20} />
</span>
</button>
@@ -121,7 +121,7 @@ export default function Layout() {
{/* Main Content */}
<main className="relative overflow-hidden" style={{ height: 'calc(100dvh - 4rem - env(safe-area-inset-top))' }}>
<div id="container" className="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48" style={{ paddingBottom: 'calc(5em + env(safe-area-inset-bottom) * 2)' }}>
<div id="container" className="h-dvh overflow-auto px-4 md:px-6 lg:ml-48" style={{ paddingBottom: 'calc(5em + env(safe-area-inset-bottom) * 2)' }}>
<Outlet />
</div>
</main>

16
frontend/src/components/Skeleton.tsx
View File

@@ -113,16 +113,16 @@ export function SkeletonCard({
return (
<div className={cn('bg-white dark:bg-gray-700 rounded-lg p-4 border dark:border-gray-600', className)}>
{showAvatar && (
<div className="flex items-start gap-4 mb-4">
<div className="mb-4 flex items-start gap-4">
<SkeletonAvatar />
<div className="flex-1">
<Skeleton variant="text" className="w-3/4 mb-2" />
<Skeleton variant="text" className="mb-2 w-3/4" />
<Skeleton variant="text" className="w-1/2" />
</div>
</div>
)}
{showTitle && (
<Skeleton variant="text" className="w-1/2 mb-4 h-6" />
<Skeleton variant="text" className="mb-4 h-6 w-1/2" />
)}
{showText && (
<SkeletonText lines={textLines} />
@@ -152,7 +152,7 @@ export function SkeletonTable({
<tr className="border-b dark:border-gray-600">
{Array.from({ length: columns }).map((_, i) => (
<th key={i} className="p-3">
<Skeleton variant="text" className="w-3/4 h-5" />
<Skeleton variant="text" className="h-5 w-3/4" />
</th>
))}
</tr>
@@ -160,7 +160,7 @@ export function SkeletonTable({
)}
<tbody>
{Array.from({ length: rows }).map((_, rowIndex) => (
<tr key={rowIndex} className="border-b dark:border-gray-600 last:border-0">
<tr key={rowIndex} className="border-b last:border-0 dark:border-gray-600">
{Array.from({ length: columns }).map((_, colIndex) => (
<td key={colIndex} className="p-3">
<Skeleton variant="text" className={colIndex === columns - 1 ? 'w-1/2' : 'w-full'} />
@@ -199,9 +199,9 @@ export function PageLoader({ message = 'Loading...', className = '' }: PageLoade
return (
<div className={cn('flex flex-col items-center justify-center min-h-[400px] gap-4', className)}>
<div className="relative">
<div className="w-12 h-12 border-4 border-gray-200 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin" />
<div className="size-12 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500 dark:border-gray-600" />
</div>
<p className="text-gray-500 dark:text-gray-400 text-sm font-medium">{message}</p>
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">{message}</p>
</div>
);
}
@@ -220,7 +220,7 @@ export function InlineLoader({ size = 'md', className = '' }: InlineLoaderProps)
return (
<div className={cn('flex items-center justify-center', className)}>
<div className={`${sizeMap[size]} border-gray-200 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin`} />
<div className={`${sizeMap[size]} animate-spin rounded-full border-gray-200 border-t-blue-500 dark:border-gray-600`} />
</div>
);
}

8
frontend/src/components/Table.tsx
View File

@@ -43,14 +43,14 @@ export function Table<T extends Record<string, any>>({
<tr className="border-b dark:border-gray-600">
{Array.from({ length: columns }).map((_, i) => (
<th key={i} className="p-3">
<Skeleton variant="text" className="w-3/4 h-5" />
<Skeleton variant="text" className="h-5 w-3/4" />
</th>
))}
</tr>
</thead>
<tbody>
{Array.from({ length: rows }).map((_, rowIndex) => (
<tr key={rowIndex} className="border-b dark:border-gray-600 last:border-0">
<tr key={rowIndex} className="border-b last:border-0 dark:border-gray-600">
{Array.from({ length: columns }).map((_, colIndex) => (
<td key={colIndex} className="p-3">
<Skeleton variant="text" className={colIndex === columns - 1 ? 'w-1/2' : 'w-full'} />
@@ -79,7 +79,7 @@ export function Table<T extends Record<string, any>>({
{columns.map((column) => (
<th
key={String(column.key)}
className={`text-left p-3 text-gray-500 dark:text-white ${column.className || ''}`}
className={`p-3 text-left text-gray-500 dark:text-white ${column.className || ''}`}
>
{column.header}
</th>
@@ -91,7 +91,7 @@ export function Table<T extends Record<string, any>>({
<tr>
<td
colSpan={columns.length}
className="text-center p-3 text-gray-700 dark:text-gray-300"
className="p-3 text-center text-gray-700 dark:text-gray-300"
>
{emptyMessage}
</td>

4
frontend/src/components/Toast.tsx
View File

@@ -70,7 +70,7 @@ export function Toast({ id, type, message, duration = 5000, onClose }: ToastProp
<div
className={`${baseStyles} ${typeStyles[type]} ${
isAnimatingOut
? 'opacity-0 translate-x-full'
? 'translate-x-full opacity-0'
: 'animate-slideInRight opacity-100'
}`}
>
@@ -80,7 +80,7 @@ export function Toast({ id, type, message, duration = 5000, onClose }: ToastProp
</p>
<button
onClick={handleClose}
className={`ml-2 opacity-70 hover:opacity-100 transition-opacity ${textStyles[type]}`}
className={`ml-2 opacity-70 transition-opacity hover:opacity-100 ${textStyles[type]}`}
aria-label="Close"
>
<X size={18} />

2
frontend/src/components/ToastContext.tsx
View File

@@ -59,7 +59,7 @@ function ToastContainer({ toasts }: ToastContainerProps) {
}
return (
<div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
<div className="pointer-events-none fixed bottom-4 right-4 z-50 flex w-full max-w-sm flex-col gap-2">
<div className="pointer-events-auto">
{toasts.map((toast) => (
<Toast key={toast.id} {...toast} />

2
frontend/src/pages/ActivityPage.tsx
View File

@@ -13,7 +13,7 @@ export default function ActivityPage() {
render: (_: any, row: any) => (
<Link
to={`/documents/${row.document_id}`}
className="text-blue-600 dark:text-blue-400 hover:underline"
className="text-blue-600 hover:underline dark:text-blue-400"
>
{row.author || 'Unknown'} - {row.title || 'Unknown'}
</Link>

32
frontend/src/pages/AdminImportPage.tsx
View File

@@ -69,21 +69,21 @@ export default function AdminImportPage() {
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<div
className="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<p className="text-lg font-semibold text-gray-500">
Selected Import Directory
</p>
<form className="flex gap-4 flex-col" onSubmit={handleImport}>
<div className="flex justify-between gap-4 w-full">
<div className="flex gap-4 items-center">
<form className="flex flex-col gap-4" onSubmit={handleImport}>
<div className="flex w-full justify-between gap-4">
<div className="flex items-center gap-4">
<FolderOpen size={20} />
<p className="font-medium text-lg break-all">
<p className="break-all text-lg font-medium">
{selectedDirectory}
</p>
</div>
<div className="flex flex-col justify-around gap-2 mr-4">
<div className="inline-flex gap-2 items-center">
<div className="mr-4 flex flex-col justify-around gap-2">
<div className="inline-flex items-center gap-2">
<input
type="radio"
id="direct"
@@ -92,7 +92,7 @@ export default function AdminImportPage() {
/>
<label htmlFor="direct">Direct</label>
</div>
<div className="inline-flex gap-2 items-center">
<div className="inline-flex items-center gap-2">
<input
type="radio"
id="copy"
@@ -127,15 +127,15 @@ export default function AdminImportPage() {
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table
className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
>
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th
className="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 w-12"
className="w-12 border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"
></th>
<th
className="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 break-all"
className="break-all border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"
>
{currentPath}
</th>
@@ -145,9 +145,9 @@ export default function AdminImportPage() {
{currentPath !== '/' && (
<tr>
<td
className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"
></td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<button onClick={handleNavigateUp}>
<p>../</p>
</button>
@@ -156,19 +156,19 @@ export default function AdminImportPage() {
)}
{directories.length === 0 ? (
<tr>
<td className="text-center p-3" colSpan={2}>No Folders</td>
<td className="p-3 text-center" colSpan={2}>No Folders</td>
</tr>
) : (
directories.map((item) => (
<tr key={item.name}>
<td
className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"
>
<button onClick={() => item.name && handleSelectDirectory(item.name)}>
<FolderOpen size={20} />
</button>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<button onClick={() => item.name && handleSelectDirectory(item.name)}>
<p>{item.name ?? ''}</p>
</button>

16
frontend/src/pages/AdminImportResultsPage.tsx
View File

@@ -14,22 +14,22 @@ export default function AdminImportResultsPage() {
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table
className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
>
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Document
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Status
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Error
</th>
@@ -38,13 +38,13 @@ export default function AdminImportResultsPage() {
<tbody className="text-black dark:text-white">
{results.length === 0 ? (
<tr>
<td className="text-center p-3" colSpan={3}>No Results</td>
<td className="p-3 text-center" colSpan={3}>No Results</td>
</tr>
) : (
results.map((result: ImportResult, index: number) => (
<tr key={index}>
<td
className="p-3 border-b border-gray-200 grid"
className="grid border-b border-gray-200 p-3"
style={{ gridTemplateColumns: '4rem auto' }}
>
<span className="text-gray-800 dark:text-gray-400">Name:</span>
@@ -56,10 +56,10 @@ export default function AdminImportResultsPage() {
<span className="text-gray-800 dark:text-gray-400">File:</span>
<span>{result.path}</span>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{result.status}</p>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{result.error || ''}</p>
</td>
</tr>

14
frontend/src/pages/AdminLogsPage.tsx
View File

@@ -25,13 +25,13 @@ export default function AdminLogsPage() {
<div>
{/* Filter Form */}
<div
className="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleFilterSubmit}>
<div className="flex flex-col w-full grow">
<div className="flex relative">
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleFilterSubmit}>
<div className="flex w-full grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Search size={15} />
</span>
@@ -39,7 +39,7 @@ export default function AdminLogsPage() {
type="text"
value={filter}
onChange={(e) => setFilter(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
placeholder="JQ Filter"
/>
</div>
@@ -52,7 +52,7 @@ export default function AdminLogsPage() {
{/* Log Display */}
<div
className="flex flex-col-reverse text-black dark:text-white w-full overflow-scroll"
className="flex w-full flex-col-reverse overflow-scroll text-black dark:text-white"
style={{ fontFamily: 'monospace' }}
>
{logs.map((log: string, index: number) => (

28
frontend/src/pages/AdminPage.tsx
View File

@@ -115,16 +115,16 @@ export default function AdminPage() {
}
return (
<div className="w-full flex flex-col gap-4 grow">
<div className="flex w-full grow flex-col gap-4">
{/* Backup & Restore Card */}
<div
className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<p className="text-lg font-semibold mb-2">Backup & Restore</p>
<p className="mb-2 text-lg font-semibold">Backup & Restore</p>
<div className="flex flex-col gap-4">
{/* Backup Form */}
<form className="flex justify-between" onSubmit={handleBackupSubmit}>
<div className="flex gap-8 items-center">
<div className="flex items-center gap-8">
<div>
<input
type="checkbox"
@@ -144,7 +144,7 @@ export default function AdminPage() {
<label htmlFor="backup_documents">Documents</label>
</div>
</div>
<div className="w-40 h-10">
<div className="h-10 w-40">
<Button variant="secondary" type="submit">Backup</Button>
</div>
</form>
@@ -152,9 +152,9 @@ export default function AdminPage() {
{/* Restore Form */}
<form
onSubmit={handleRestoreSubmit}
className="flex justify-between grow"
className="flex grow justify-between"
>
<div className="flex items-center w-1/2">
<div className="flex w-1/2 items-center">
<input
type="file"
accept=".zip"
@@ -162,7 +162,7 @@ export default function AdminPage() {
className="w-full"
/>
</div>
<div className="w-40 h-10">
<div className="h-10 w-40">
<Button variant="secondary" type="submit">Restore</Button>
</div>
</form>
@@ -171,17 +171,17 @@ export default function AdminPage() {
{/* Tasks Card */}
<div
className="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<p className="text-lg font-semibold">Tasks</p>
<table className="min-w-full bg-white dark:bg-gray-700 text-sm">
<table className="min-w-full bg-white text-sm dark:bg-gray-700">
<tbody className="text-black dark:text-white">
<tr>
<td className="pl-0">
<p>Metadata Matching</p>
</td>
<td className="py-2 float-right">
<div className="w-40 h-10 text-base">
<td className="float-right py-2">
<div className="h-10 w-40 text-base">
<Button variant="secondary" onClick={handleMetadataMatch}>Run</Button>
</div>
</td>
@@ -190,8 +190,8 @@ export default function AdminPage() {
<td>
<p>Cache Tables</p>
</td>
<td className="py-2 float-right">
<div className="w-40 h-10 text-base">
<td className="float-right py-2">
<div className="h-10 w-40 text-base">
<Button variant="secondary" onClick={handleCacheTables}>Run</Button>
</div>
</td>

46
frontend/src/pages/AdminUsersPage.tsx
View File

@@ -117,22 +117,22 @@ export default function AdminUsersPage() {
<div className="relative h-full overflow-x-auto">
{/* Add User Form */}
{showAddForm && (
<div className="absolute top-10 left-10 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
<div className="absolute left-10 top-10 rounded bg-gray-200 p-3 shadow-lg shadow-gray-500 transition-all duration-200 dark:bg-gray-600 dark:shadow-gray-900">
<form onSubmit={handleCreateUser}
className="flex flex-col gap-2 text-black dark:text-white text-sm">
className="flex flex-col gap-2 text-sm text-black dark:text-white">
<input
type="text"
value={newUsername}
onChange={(e) => setNewUsername(e.target.value)}
placeholder="Username"
className="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
/>
<input
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
placeholder="Password"
className="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
/>
<div className="flex items-center gap-2">
<input
@@ -144,7 +144,7 @@ export default function AdminUsersPage() {
<label htmlFor="new_is_admin">Admin</label>
</div>
<button
className="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
className="bg-gray-500 px-2 py-1 font-medium text-white hover:bg-gray-800 dark:text-gray-800 dark:hover:bg-gray-100"
type="submit"
>
Create
@@ -155,38 +155,38 @@ export default function AdminUsersPage() {
{/* Users Table */}
<div className="min-w-full overflow-scroll rounded shadow">
<table className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
<table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-12">
<th className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<button onClick={() => setShowAddForm(!showAddForm)}>
<Plus size={20} />
</button>
</th>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">User</th>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Password</th>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 text-center">
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">User</th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">Password</th>
<th className="border-b border-gray-200 p-3 text-left text-center font-normal uppercase dark:border-gray-800">
Permissions
</th>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-48">Created</th>
<th className="w-48 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">Created</th>
</tr>
</thead>
<tbody className="text-black dark:text-white">
{users.length === 0 ? (
<tr>
<td className="text-center p-3" colSpan={5}>No Results</td>
<td className="p-3 text-center" colSpan={5}>No Results</td>
</tr>
) : (
users.map((user) => (
<tr key={user.id}>
{/* Delete Button */}
<td className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400 cursor-pointer relative">
<td className="relative cursor-pointer border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">
<button onClick={() => handleDeleteUser(user.id)}>
<Trash2 size={20} />
</button>
</td>
{/* User ID */}
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{user.id}</p>
</td>
{/* Password Reset */}
@@ -196,20 +196,20 @@ export default function AdminUsersPage() {
const password = prompt(`Enter new password for ${user.id}`);
if (password) handleUpdatePassword(user.id, password);
}}
className="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
className="bg-gray-500 px-2 py-1 font-medium text-white hover:bg-gray-800 dark:text-gray-800 dark:hover:bg-gray-100"
>
Reset
</button>
</td>
{/* Admin Toggle */}
<td className="flex gap-2 justify-center p-3 border-b border-gray-200 text-center min-w-40">
<td className="flex min-w-40 justify-center gap-2 border-b border-gray-200 p-3 text-center">
<button
onClick={() => handleToggleAdmin(user.id, true)}
disabled={user.admin}
className={`px-2 py-1 rounded-md text-white dark:text-black ${
className={`rounded-md px-2 py-1 text-white dark:text-black ${
user.admin
? 'bg-gray-800 dark:bg-gray-100 cursor-default'
: 'bg-gray-400 dark:bg-gray-600 cursor-pointer'
? 'cursor-default bg-gray-800 dark:bg-gray-100'
: 'cursor-pointer bg-gray-400 dark:bg-gray-600'
}`}
>
admin
@@ -217,17 +217,17 @@ export default function AdminUsersPage() {
<button
onClick={() => handleToggleAdmin(user.id, false)}
disabled={!user.admin}
className={`px-2 py-1 rounded-md text-white dark:text-black ${
className={`rounded-md px-2 py-1 text-white dark:text-black ${
!user.admin
? 'bg-gray-800 dark:bg-gray-100 cursor-default'
: 'bg-gray-400 dark:bg-gray-600 cursor-pointer'
? 'cursor-default bg-gray-800 dark:bg-gray-100'
: 'cursor-pointer bg-gray-400 dark:bg-gray-600'
}`}
>
user
</button>
</td>
{/* Created Date */}
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{user.created_at}</p>
</td>
</tr>

40
frontend/src/pages/ComponentDemoPage.tsx
View File

@@ -42,31 +42,31 @@ export default function ComponentDemoPage() {
<h1 className="text-2xl font-bold dark:text-white">UI Components Demo</h1>
{/* Toast Demos */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Toast Notifications</h2>
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Toast Notifications</h2>
<div className="flex flex-wrap gap-4">
<button
onClick={handleDemoClick}
disabled={isLoading}
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
>
{isLoading ? <InlineLoader size="sm" /> : 'Show Info Toast'}
</button>
<button
onClick={handleWarningClick}
className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
className="rounded bg-yellow-500 px-4 py-2 text-white hover:bg-yellow-600"
>
Show Warning Toast (10s)
</button>
<button
onClick={handleErrorClick}
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600"
>
Show Error Toast
</button>
<button
onClick={handleCustomToast}
className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"
className="rounded bg-purple-500 px-4 py-2 text-white hover:bg-purple-600"
>
Show Custom Toast
</button>
@@ -74,15 +74,15 @@ export default function ComponentDemoPage() {
</section>
{/* Skeleton Demos */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Loading Components</h2>
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Loading Components</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
{/* Basic Skeletons */}
<div className="space-y-4">
<h3 className="text-lg font-medium dark:text-gray-300">Basic Skeletons</h3>
<div className="space-y-2">
<Skeleton className="w-full h-8" />
<Skeleton className="h-8 w-full" />
<Skeleton variant="text" className="w-3/4" />
<Skeleton variant="text" className="w-1/2" />
<div className="flex items-center gap-4">
@@ -113,7 +113,7 @@ export default function ComponentDemoPage() {
{/* Skeleton Button */}
<div className="space-y-4">
<h3 className="text-lg font-medium dark:text-gray-300">Skeleton Button</h3>
<div className="flex gap-2 flex-wrap">
<div className="flex flex-wrap gap-2">
<SkeletonButton width={120} />
<SkeletonButton className="w-full max-w-xs" />
</div>
@@ -122,9 +122,9 @@ export default function ComponentDemoPage() {
</section>
{/* Skeleton Card Demo */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Cards</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Cards</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<SkeletonCard />
<SkeletonCard showAvatar />
<SkeletonCard showAvatar showTitle showText textLines={4} />
@@ -132,20 +132,20 @@ export default function ComponentDemoPage() {
</section>
{/* Skeleton Table Demo */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Table</h2>
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Table</h2>
<SkeletonTable rows={5} columns={4} />
</section>
{/* Page Loader Demo */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Page Loader</h2>
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Page Loader</h2>
<PageLoader message="Loading demo content..." />
</section>
{/* Inline Loader Demo */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Inline Loader</h2>
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Inline Loader</h2>
<div className="flex items-center gap-8">
<div className="text-center">
<InlineLoader size="sm" />

46
frontend/src/pages/DocumentPage.tsx
View File

@@ -74,19 +74,19 @@ export default function DocumentPage() {
const totalTimeLeftSeconds = Math.round((100 - percentage) * secondsPerPercent);
return (
<div className="h-full w-full relative">
<div className="relative size-full">
<div
className="h-full w-full overflow-scroll bg-white shadow-lg dark:bg-gray-700 rounded dark:text-white p-4"
className="size-full overflow-scroll rounded bg-white p-4 shadow-lg dark:bg-gray-700 dark:text-white"
>
{/* Document Info - Left Column */}
<div
className="flex flex-col gap-2 float-left w-44 md:w-60 lg:w-80 mr-4 mb-2 relative"
className="relative float-left mb-2 mr-4 flex w-44 flex-col gap-2 md:w-60 lg:w-80"
>
{/* Cover Image */}
{document.filepath && (
<div className="rounded object-fill w-full bg-gray-200 dark:bg-gray-600 h-60">
<div className="h-60 w-full rounded bg-gray-200 object-fill dark:bg-gray-600">
<img
className="rounded object-cover h-full"
className="h-full rounded object-cover"
src={`/api/v1/documents/${document.id}/cover`}
alt={`${document.title} cover`}
/>
@@ -97,14 +97,14 @@ export default function DocumentPage() {
{document.filepath && (
<a
href={`/reader#id=${document.id}&type=REMOTE`}
className="z-10 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none w-full mt-2"
className="z-10 mt-2 w-full rounded bg-blue-700 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700"
>
Read
</a>
)}
{/* Action Buttons */}
<div className="flex flex-wrap-reverse justify-between gap-2 z-20 relative my-2">
<div className="relative z-20 my-2 flex flex-wrap-reverse justify-between gap-2">
<div className="min-w-[50%] md:mr-2">
<div className="flex gap-1 text-sm">
<p className="text-gray-500">ISBN-10:</p>
@@ -123,7 +123,7 @@ export default function DocumentPage() {
className="z-10 text-gray-500 dark:text-gray-400"
title="Download"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003-3h4a3 3 0 003 3v1m0-3l-3 3m0 0L4 20" />
</svg>
</a>
@@ -132,34 +132,34 @@ export default function DocumentPage() {
</div>
{/* Document Details Grid */}
<div className="grid sm:grid-cols-2 justify-between gap-4 pb-4">
<div className="grid justify-between gap-4 pb-4 sm:grid-cols-2">
{/* Title - Editable */}
<div className="relative">
<div className="text-gray-500 inline-flex gap-2 relative">
<div className="relative inline-flex gap-2 text-gray-500">
<p>Title</p>
</div>
<div className="relative font-medium text-justify hyphens-auto">
<div className="relative hyphens-auto text-justify font-medium">
<p>{document.title}</p>
</div>
</div>
{/* Author - Editable */}
<div className="relative">
<div className="text-gray-500 inline-flex gap-2 relative">
<div className="relative inline-flex gap-2 text-gray-500">
<p>Author</p>
</div>
<div className="relative font-medium text-justify hyphens-auto">
<div className="relative hyphens-auto text-justify font-medium">
<p>{document.author}</p>
</div>
</div>
{/* Time Read */}
<div className="relative">
<div className="text-gray-500 inline-flex gap-2 relative">
<div className="relative inline-flex gap-2 text-gray-500">
<p>Time Read</p>
</div>
<div className="relative">
<p className="font-medium text-lg">
<p className="text-lg font-medium">
{document.total_time_seconds ? niceSeconds(document.total_time_seconds) : 'N/A'}
</p>
</div>
@@ -168,7 +168,7 @@ export default function DocumentPage() {
{/* Progress */}
<div>
<p className="text-gray-500">Progress</p>
<p className="font-medium text-lg">
<p className="text-lg font-medium">
{percentage ? `${Math.round(percentage)}%` : '0%'}
</p>
</div>
@@ -176,16 +176,16 @@ export default function DocumentPage() {
{/* Description - Editable */}
<div className="relative">
<div className="text-gray-500 inline-flex gap-2 relative">
<div className="relative inline-flex gap-2 text-gray-500">
<p>Description</p>
</div>
<div className="relative font-medium text-justify hyphens-auto">
<div className="relative hyphens-auto text-justify font-medium">
<p>{document.description || 'N/A'}</p>
</div>
</div>
{/* Reading Statistics */}
<div className="mt-4 grid sm:grid-cols-3 gap-4">
<div className="mt-4 grid gap-4 sm:grid-cols-3">
<div>
<p className="text-gray-500">Words</p>
<p className="font-medium">{document.words || 'N/A'}</p>
@@ -206,14 +206,14 @@ export default function DocumentPage() {
{/* Additional Reading Stats - Matching Legacy Template */}
{progress && (
<div className="mt-4 grid sm:grid-cols-2 gap-4">
<div className="flex gap-2 items-center">
<div className="mt-4 grid gap-4 sm:grid-cols-2">
<div className="flex items-center gap-2">
<p className="text-gray-500">Words / Minute:</p>
<p className="font-medium">{document.wpm || 'N/A'}</p>
</div>
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<p className="text-gray-500">Est. Time Left:</p>
<p className="font-medium whitespace-nowrap">
<p className="whitespace-nowrap font-medium">
{niceSeconds(totalTimeLeftSeconds)}
</p>
</div>

40
frontend/src/pages/DocumentsPage.tsx
View File

@@ -34,20 +34,20 @@ function DocumentCard({ doc }: DocumentCardProps) {
};
return (
<div className="w-full relative">
<div className="relative w-full">
<div
className="flex gap-4 w-full h-full p-4 shadow-lg bg-white dark:bg-gray-700 rounded"
className="flex size-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700"
>
<div className="min-w-fit my-auto h-48 relative">
<div className="relative my-auto h-48 min-w-fit">
<Link to={`/documents/${doc.id}`}>
<img
className="rounded object-cover h-full"
className="h-full rounded object-cover"
src={`/api/v1/documents/${doc.id}/cover`}
alt={doc.title}
/>
</Link>
</div>
<div className="flex flex-col justify-around dark:text-white w-full text-sm">
<div className="flex w-full flex-col justify-around text-sm dark:text-white">
<div className="inline-flex shrink-0 items-center">
<div>
<p className="text-gray-400">Title</p>
@@ -74,7 +74,7 @@ function DocumentCard({ doc }: DocumentCardProps) {
</div>
</div>
<div
className="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400"
className="absolute bottom-4 right-4 flex flex-col gap-2 text-gray-500 dark:text-gray-400"
>
<Link to={`/activity?document=${doc.id}`}>
<Activity size={20} />
@@ -153,13 +153,13 @@ export default function DocumentsPage() {
<div className="flex flex-col gap-4">
{/* Search Form */}
<div
className="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleSubmit}>
<div className="flex flex-col w-full grow">
<div className="flex relative">
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
<div className="flex w-full grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Search size={15} />
</span>
@@ -167,7 +167,7 @@ export default function DocumentsPage() {
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
placeholder="Search Author / Title"
name="search"
/>
@@ -187,11 +187,11 @@ export default function DocumentsPage() {
</div>
{/* Pagination */}
<div className="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
<div className="mt-4 flex w-full justify-center gap-4 text-black dark:text-white">
{previousPage && previousPage > 0 && (
<button
onClick={() => setPage(page - 1)}
className="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
className="w-24 rounded bg-white p-2 text-center text-sm font-medium shadow-lg hover:bg-gray-400 focus:outline-none dark:bg-gray-600 dark:hover:bg-gray-700"
>
◄
</button>
@@ -199,7 +199,7 @@ export default function DocumentsPage() {
{nextPage && nextPage > 0 && (
<button
onClick={() => setPage(page + 1)}
className="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
className="w-24 rounded bg-white p-2 text-center text-sm font-medium shadow-lg hover:bg-gray-400 focus:outline-none dark:bg-gray-600 dark:hover:bg-gray-700"
>
►
</button>
@@ -208,7 +208,7 @@ export default function DocumentsPage() {
{/* Upload Button */}
<div
className="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
className="fixed bottom-6 right-6 flex items-center justify-center rounded-full"
>
<input
type="checkbox"
@@ -218,7 +218,7 @@ export default function DocumentsPage() {
onChange={() => setUploadMode(!uploadMode)}
/>
<div
className={`absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2 transition-opacity duration-200 ${uploadMode ? 'visible opacity-100' : 'invisible opacity-0'}`}
className={`absolute bottom-0 right-0 z-10 flex w-72 flex-col gap-2 rounded bg-gray-800 p-4 text-sm text-white transition-opacity duration-200 dark:bg-gray-200 dark:text-black ${uploadMode ? 'visible opacity-100' : 'invisible opacity-0'}`}
>
<form
method="POST"
@@ -234,7 +234,7 @@ export default function DocumentsPage() {
onChange={handleFileChange}
/>
<button
className="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
className="bg-gray-500 px-2 py-1 font-medium text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-800"
type="submit"
onClick={(e) => {
e.preventDefault();
@@ -246,7 +246,7 @@ export default function DocumentsPage() {
</form>
<label htmlFor="upload-file-button">
<div
className="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
className="mt-2 w-full cursor-pointer bg-gray-500 px-2 py-1 text-center font-medium text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-800"
onClick={handleCancelUpload}
>
Cancel Upload
@@ -254,7 +254,7 @@ export default function DocumentsPage() {
</label>
</div>
<label
className="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
className="flex size-16 cursor-pointer items-center justify-center rounded-full bg-gray-800 opacity-30 transition-all duration-200 hover:opacity-100 dark:bg-gray-200"
htmlFor="upload-file-button"
>
<Upload size={34} />

46
frontend/src/pages/HomePage.tsx
View File

@@ -12,8 +12,8 @@ function InfoCard({ title, size, link }: InfoCardProps) {
if (link) {
return (
<Link to={link} className="w-full">
<div className="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
<div className="flex flex-col justify-around dark:text-white w-full text-sm">
<div className="flex w-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="flex w-full flex-col justify-around text-sm dark:text-white">
<p className="text-2xl font-bold text-black dark:text-white">{size}</p>
<p className="text-sm text-gray-400">{title}</p>
</div>
@@ -24,8 +24,8 @@ function InfoCard({ title, size, link }: InfoCardProps) {
return (
<div className="w-full">
<div className="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
<div className="flex flex-col justify-around dark:text-white w-full text-sm">
<div className="flex w-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="flex w-full flex-col justify-around text-sm dark:text-white">
<p className="text-2xl font-bold text-black dark:text-white">{size}</p>
<p className="text-sm text-gray-400">{title}</p>
</div>
@@ -47,15 +47,15 @@ interface StreakCardProps {
function StreakCard({ window, currentStreak, currentStreakStartDate, currentStreakEndDate, maxStreak, maxStreakStartDate, maxStreakEndDate }: StreakCardProps) {
return (
<div className="w-full">
<div className="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
<p className="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
<div className="relative w-full rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
<p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
{window === 'WEEK' ? 'Weekly Read Streak' : 'Daily Read Streak'}
</p>
<div className="flex items-end my-6 space-x-2">
<div className="my-6 flex items-end space-x-2">
<p className="text-5xl font-bold text-black dark:text-white">{currentStreak}</p>
</div>
<div className="dark:text-white">
<div className="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200">
<div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-2 text-sm">
<div>
<p>{window === 'WEEK' ? 'Current Weekly Streak' : 'Current Daily Streak'}</p>
<div className="flex items-end text-sm text-gray-400">
@@ -64,7 +64,7 @@ function StreakCard({ window, currentStreak, currentStreakStartDate, currentStre
</div>
<div className="flex items-end font-bold">{currentStreak}</div>
</div>
<div className="flex items-center justify-between pb-2 mb-2 text-sm">
<div className="mb-2 flex items-center justify-between pb-2 text-sm">
<div>
<p>{window === 'WEEK' ? 'Best Weekly Streak' : 'Best Daily Streak'}</p>
<div className="flex items-end text-sm text-gray-400">
@@ -87,13 +87,13 @@ interface LeaderboardCardProps {
function LeaderboardCard({ name, data }: LeaderboardCardProps) {
return (
<div className="w-full">
<div className="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
<div className="flex size-full flex-col justify-between rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
<div>
<div className="flex justify-between">
<p className="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
<p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
{name} Leaderboard
</p>
<div className="flex gap-2 text-xs text-gray-400 items-center">
<div className="flex items-center gap-2 text-xs text-gray-400">
<span className="cursor-pointer hover:text-black dark:hover:text-white">all</span>
<span className="cursor-pointer hover:text-black dark:hover:text-white">year</span>
<span className="cursor-pointer hover:text-black dark:hover:text-white">month</span>
@@ -103,7 +103,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
</div>
{/* All time data */}
<div className="flex items-end my-6 space-x-2">
<div className="my-6 flex items-end space-x-2">
{data.all.length === 0 ? (
<p className="text-5xl font-bold text-black dark:text-white">N/A</p>
) : (
@@ -115,7 +115,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
{data.all.slice(0, 3).map((item: any, index: number) => (
<div
key={index}
className={`flex items-center justify-between pt-2 pb-2 text-sm ${index > 0 ? 'border-t border-gray-200' : ''}`}
className={`flex items-center justify-between py-2 text-sm ${index > 0 ? 'border-t border-gray-200' : ''}`}
>
<div>
<p>{item.user_id}</p>
@@ -132,7 +132,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
function GraphVisualization({ data }: { data: GraphDataPoint[] }) {
if (!data || data.length === 0) {
return (
<div className="relative h-24 flex items-center justify-center bg-gray-100 dark:bg-gray-600">
<div className="relative flex h-24 items-center justify-center bg-gray-100 dark:bg-gray-600">
<p className="text-gray-400 dark:text-gray-300">No data available</p>
</div>
);
@@ -142,14 +142,14 @@ function GraphVisualization({ data }: { data: GraphDataPoint[] }) {
const maxMinutes = Math.max(...data.map(d => d.minutes_read), 1);
return (
<div className="relative h-24 flex items-end justify-between p-2 bg-gray-100 dark:bg-gray-600">
<div className="relative flex h-24 items-end justify-between bg-gray-100 p-2 dark:bg-gray-600">
{data.map((point, i) => (
<div
key={i}
className="flex-1 mx-0.5 bg-blue-500 hover:bg-blue-600 transition-colors relative group"
className="group relative mx-0.5 flex-1 bg-blue-500 transition-colors hover:bg-blue-600"
style={{ height: `${(point.minutes_read / maxMinutes) * 100}%` }}
>
<div className="absolute bottom-full mb-1 left-0 w-full text-xs text-center text-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 pointer-events-none">
<div className="pointer-events-none absolute bottom-full left-0 mb-1 w-full text-center text-xs text-gray-600 opacity-0 group-hover:opacity-100 dark:text-gray-300">
{point.minutes_read} min
</div>
</div>
@@ -176,8 +176,8 @@ export default function HomePage() {
<div className="flex flex-col gap-4">
{/* Daily Read Totals Graph */}
<div className="w-full">
<div className="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
<p className="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
<div className="relative w-full rounded bg-white shadow-lg dark:bg-gray-700">
<p className="absolute left-5 top-3 w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
Daily Read Totals
</p>
<GraphVisualization data={graphData || []} />
@@ -244,13 +244,13 @@ export default function HomePage() {
{docs?.slice(0, 6).map((doc: any) => (
<div
key={doc.id}
className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<h3 className="font-medium text-lg">{doc.title}</h3>
<h3 className="text-lg font-medium">{doc.title}</h3>
<p className="text-sm">{doc.author}</p>
<Link
to={`/documents/${doc.id}`}
className="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700"
className="rounded bg-blue-700 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700"
>
View Document
</Link>

28
frontend/src/pages/LoginPage.tsx
View File

@@ -34,34 +34,34 @@ export default function LoginPage() {
};
return (
<div className="bg-gray-100 dark:bg-gray-800 dark:text-white min-h-screen">
<div className="flex flex-wrap w-full">
<div className="flex flex-col w-full md:w-1/2">
<div className="min-h-screen bg-gray-100 dark:bg-gray-800 dark:text-white">
<div className="flex w-full flex-wrap">
<div className="flex w-full flex-col md:w-1/2">
<div
className="flex flex-col justify-center px-8 pt-8 my-auto md:justify-start md:pt-0 md:px-24 lg:px-32"
className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32"
>
<p className="text-3xl text-center">Welcome.</p>
<p className="text-center text-3xl">Welcome.</p>
<form className="flex flex-col pt-3 md:pt-8" onSubmit={handleSubmit}>
<div className="flex flex-col pt-4">
<div className="flex relative">
<div className="relative flex">
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
placeholder="Username"
required
disabled={isLoading}
/>
</div>
</div>
<div className="flex flex-col pt-4 mb-12">
<div className="flex relative">
<div className="mb-12 flex flex-col pt-4">
<div className="relative flex">
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
placeholder="Password"
required
disabled={isLoading}
@@ -72,12 +72,12 @@ export default function LoginPage() {
variant="secondary"
type="submit"
disabled={isLoading}
className="w-full px-4 py-2 text-base font-semibold text-center transition duration-200 ease-in focus:outline-none focus:ring-2 disabled:opacity-50"
className="w-full px-4 py-2 text-center text-base font-semibold transition duration-200 ease-in focus:outline-none focus:ring-2 disabled:opacity-50"
>
{isLoading ? 'Logging in...' : 'Login'}
</Button>
</form>
<div className="pt-12 pb-12 text-center">
<div className="py-12 text-center">
<p className="mt-4">
<a href="/local" className="font-semibold underline">
Offline / Local Mode
@@ -86,8 +86,8 @@ export default function LoginPage() {
</div>
</div>
</div>
<div className="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block">
<div className="w-full h-screen object-cover ease-in-out top-0 left-0 bg-gray-300 flex items-center justify-center">
<div className="image-fader relative hidden h-screen w-1/2 shadow-2xl md:block">
<div className="left-0 top-0 flex h-screen w-full items-center justify-center bg-gray-300 object-cover ease-in-out">
<span className="text-gray-500">AnthoLume</span>
</div>
</div>

2
frontend/src/pages/ProgressPage.tsx
View File

@@ -13,7 +13,7 @@ export default function ProgressPage() {
render: (_: any, row: any) => (
<Link
to={`/documents/${row.document_id}`}
className="text-blue-600 dark:text-blue-400 hover:underline"
className="text-blue-600 hover:underline dark:text-blue-400"
>
{row.author || 'Unknown'} - {row.title || 'Unknown'}
</Link>

52
frontend/src/pages/SearchPage.tsx
View File

@@ -17,17 +17,17 @@ export default function SearchPage() {
};
return (
<div className="w-full flex flex-col md:flex-row gap-4">
<div className="flex flex-col gap-4 grow">
<div className="flex w-full flex-col gap-4 md:flex-row">
<div className="flex grow flex-col gap-4">
{/* Search Form */}
<div
className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleSubmit}>
<div className="flex flex-col w-full grow">
<div className="flex relative">
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
<div className="flex w-full grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Search size={15} />
</span>
@@ -35,21 +35,21 @@ export default function SearchPage() {
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
placeholder="Query"
/>
</div>
</div>
<div className="flex relative min-w-[12em]">
<div className="relative flex min-w-[12em]">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Book size={15} />
</span>
<select
value={source}
onChange={(e) => setSource(e.target.value as GetSearchSource)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
>
<option value="LibGen">Library Genesis</option>
<option value="Annas Archive">Annas Archive</option>
@@ -64,35 +64,35 @@ export default function SearchPage() {
{/* Search Results Table */}
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table
className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm md:text-sm"
className="min-w-full bg-white text-sm leading-normal md:text-sm dark:bg-gray-700"
>
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th
className="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
></th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Document
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Series
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Type
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Size
</th>
<th
className="p-3 hidden md:block font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800"
>
Date
</th>
@@ -101,18 +101,18 @@ export default function SearchPage() {
<tbody className="text-black dark:text-white">
{isLoading && (
<tr>
<td className="text-center p-3" colSpan={6}>Loading...</td>
<td className="p-3 text-center" colSpan={6}>Loading...</td>
</tr>
)}
{!isLoading && !results && (
<tr>
<td className="text-center p-3" colSpan={6}>No Results</td>
<td className="p-3 text-center" colSpan={6}>No Results</td>
</tr>
)}
{!isLoading && results && results.map((item: any) => (
<tr key={item.id}>
<td
className="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500"
className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500"
>
<button
className="hover:text-purple-600"
@@ -121,19 +121,19 @@ export default function SearchPage() {
<Download size={15} />
</button>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
{item.author || 'N/A'} - {item.title || 'N/A'}
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{item.series || 'N/A'}</p>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{item.file_type || 'N/A'}</p>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{item.file_size || 'N/A'}</p>
</td>
<td className="hidden md:table-cell p-3 border-b border-gray-200">
<td className="hidden border-b border-gray-200 p-3 md:table-cell">
<p>{item.upload_date || 'N/A'}</p>
</td>
</tr>

94
frontend/src/pages/SettingsPage.tsx
View File

@@ -60,37 +60,37 @@ export default function SettingsPage() {
if (isLoading) {
return (
<div className="w-full flex flex-col md:flex-row gap-4">
<div className="flex w-full flex-col gap-4 md:flex-row">
<div>
<div className="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700">
<div className="w-16 h-16 bg-gray-200 dark:bg-gray-600 rounded-full mb-4" />
<div className="w-32 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex flex-col items-center rounded bg-white p-4 shadow-lg md:w-60 lg:w-80 dark:bg-gray-700">
<div className="mb-4 size-16 rounded-full bg-gray-200 dark:bg-gray-600" />
<div className="h-6 w-32 rounded bg-gray-200 dark:bg-gray-600" />
</div>
</div>
<div className="flex flex-col gap-4 grow">
<div className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700">
<div className="w-48 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
<div className="flex grow flex-col gap-4">
<div className="flex flex-col gap-2 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
<div className="flex gap-4">
<div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="w-40 h-10 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-10 w-40 rounded bg-gray-200 dark:bg-gray-600" />
</div>
</div>
<div className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700">
<div className="w-48 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
<div className="flex flex-col gap-2 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
<div className="flex gap-4">
<div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="w-40 h-10 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-10 w-40 rounded bg-gray-200 dark:bg-gray-600" />
</div>
</div>
<div className="flex flex-col p-4 rounded shadow-lg bg-white dark:bg-gray-700">
<div className="w-24 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
<div className="flex gap-4 mb-4">
<div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex flex-col rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="mb-4 h-6 w-24 rounded bg-gray-200 dark:bg-gray-600" />
<div className="mb-4 flex gap-4">
<div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
</div>
<div className="flex-1 h-32 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="h-32 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
</div>
</div>
</div>
@@ -98,31 +98,31 @@ export default function SettingsPage() {
}
return (
<div className="w-full flex flex-col md:flex-row gap-4">
<div className="flex w-full flex-col gap-4 md:flex-row">
{/* User Profile Card */}
<div>
<div
className="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex flex-col items-center rounded bg-white p-4 text-gray-500 shadow-lg md:w-60 lg:w-80 dark:bg-gray-700 dark:text-white"
>
<User size={60} />
<p className="text-lg">{settingsData?.data.user.username || "N/A"}</p>
</div>
</div>
<div className="flex flex-col gap-4 grow">
<div className="flex grow flex-col gap-4">
{/* Change Password Form */}
<div
className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<p className="text-lg font-semibold mb-2">Change Password</p>
<p className="mb-2 text-lg font-semibold">Change Password</p>
<form
className="flex gap-4 flex-col lg:flex-row"
className="flex flex-col gap-4 lg:flex-row"
onSubmit={handlePasswordSubmit}
>
<div className="flex flex-col grow">
<div className="flex relative">
<div className="flex grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Lock size={15} />
</span>
@@ -130,15 +130,15 @@ export default function SettingsPage() {
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
placeholder="Password"
/>
</div>
</div>
<div className="flex flex-col grow">
<div className="flex relative">
<div className="flex grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Lock size={15} />
</span>
@@ -146,7 +146,7 @@ export default function SettingsPage() {
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
placeholder="New Password"
/>
</div>
@@ -159,23 +159,23 @@ export default function SettingsPage() {
{/* Change Timezone Form */}
<div
className="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<p className="text-lg font-semibold mb-2">Change Timezone</p>
<p className="mb-2 text-lg font-semibold">Change Timezone</p>
<form
className="flex gap-4 flex-col lg:flex-row"
className="flex flex-col gap-4 lg:flex-row"
onSubmit={handleTimezoneSubmit}
>
<div className="flex relative grow">
<div className="relative flex grow">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Clock size={15} />
</span>
<select
value={timezone || 'UTC'}
onChange={(e) => setTimezone(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
>
<option value="UTC">UTC</option>
<option value="America/New_York">America/New_York</option>
@@ -197,24 +197,24 @@ export default function SettingsPage() {
{/* Devices Table */}
<div
className="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<p className="text-lg font-semibold">Devices</p>
<table className="min-w-full bg-white dark:bg-gray-700 text-sm">
<table className="min-w-full bg-white text-sm dark:bg-gray-700">
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th
className="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 pl-0 text-left font-normal uppercase dark:border-gray-800"
>
Name
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Last Sync
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Created
</th>
@@ -223,7 +223,7 @@ export default function SettingsPage() {
<tbody className="text-black dark:text-white">
{!settingsData?.data.devices || settingsData.data.devices.length === 0 ? (
<tr>
<td className="text-center p-3" colSpan={3}>No Results</td>
<td className="p-3 text-center" colSpan={3}>No Results</td>
</tr>
) : (
settingsData.data.devices.map((device: any) => (