Paperless GPT
- {ocrEnabled && ( -
-
- OCR via LLMs (Experimental)
-
-
- )}
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ Error: {error}
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default History;
\ No newline at end of file
diff --git a/web-app/src/assets/logo.svg b/web-app/src/assets/logo.svg
new file mode 100644
index 0000000..347b1e7
--- /dev/null
+++ b/web-app/src/assets/logo.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/web-app/src/components/Sidebar.css b/web-app/src/components/Sidebar.css
new file mode 100644
index 0000000..2459a05
--- /dev/null
+++ b/web-app/src/components/Sidebar.css
@@ -0,0 +1,75 @@
+.sidebar {
+ width: 250px;
+ background-color: #2c3e50;
+ color: #ecf0f1;
+ display: flex;
+ flex-direction: column;
+ transition: width 0.3s;
+ }
+
+ .sidebar.collapsed {
+ width: 60px;
+
+ }
+
+ .sidebar-header {
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ background-color: #34495e;
+ justify-content: space-between;
+ }
+
+ .sidebar-header.collapsed {
+ justify-content: center;
+ }
+
+ .logo {
+ height: 40px;
+ margin-right: 10px;
+ }
+
+ .menu-items {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .menu-items li {
+ padding: 15px 20px;
+ cursor: pointer;
+ }
+
+ .menu-items li.active {
+ background-color: darkslategray;
+ padding: 15px 20px;
+ cursor: pointer;
+ }
+
+ .menu-items li:hover {
+ background-color: #1abc9c;
+ }
+
+ .menu-items li a {
+ text-decoration: none;
+ color: inherit;
+ font-size: 18px;
+ }
+
+ .toggle-btn {
+ background: none;
+ border: none;
+ color: white;
+ font-size: 24px;
+ cursor: pointer;
+ }
+
+ .sidebar.collapsed .menu-items li a {
+ display: none;
+ }
+
+ .sidebar.collapsed .logo {
+ height: 40px;
+ margin: auto;
+ }
+
\ No newline at end of file
diff --git a/web-app/src/components/Sidebar.tsx b/web-app/src/components/Sidebar.tsx
new file mode 100644
index 0000000..ae17d27
--- /dev/null
+++ b/web-app/src/components/Sidebar.tsx
@@ -0,0 +1,81 @@
+import axios from "axios";
+import React, { useCallback, useEffect, useState } from 'react';
+import "./Sidebar.css";
+import { Link, useLocation } from 'react-router-dom';
+import { Icon } from '@mdi/react';
+import { mdiHomeOutline, mdiTextBoxSearchOutline, mdiHistory } from '@mdi/js';
+import logo from "../assets/logo.svg";
+
+
+interface SidebarProps {
+ onSelectPage: (page: string) => void;
+}
+
+const Sidebar: React.FC+ Modification History +
+
+ Note: when undoing tag changes, this will not re-add 'paperless-gpt-auto'
+
+ {modifications.length === 0 ? (
+ + No modifications found +
+ ) : ( +
+ {modifications.map((modification) => (
+
+ )}
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/web-app/src/components/UndoCard.tsx b/web-app/src/components/UndoCard.tsx
new file mode 100644
index 0000000..d3c2254
--- /dev/null
+++ b/web-app/src/components/UndoCard.tsx
@@ -0,0 +1,193 @@
+// UndoCard.tsx
+import React from 'react';
+import { Tooltip } from 'react-tooltip'
+
+interface ModificationProps {
+ ID: number;
+ DocumentID: number;
+ DateChanged: string;
+ ModField: string;
+ PreviousValue: string;
+ NewValue: string;
+ Undone: boolean;
+ UndoneDate: string | null;
+ onUndo: (id: number) => void;
+ paperlessUrl: string;
+}
+
+const formatDate = (dateString: string | null): string => {
+ if (!dateString) return '';
+
+ try {
+ const date = new Date(dateString);
+ // Check if date is valid
+ if (isNaN(date.getTime())) {
+ return 'Invalid date';
+ }
+ return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+ } catch {
+ return 'Invalid date';
+ }
+};
+
+const buildPaperlessUrl = (paperlessUrl: string, documentId: number): string => {
+ return `${paperlessUrl}/documents/${documentId}/details`;
+};
+
+const UndoCard: React.FC
+ {!collapsed && 
}
+
+
+ -
+ {menuItems.map((item) => (
+
-
+ handlePageClick(item.name)}
+ style={{ display: 'flex', alignItems: 'center' }}
+ >
+ {/*
+ {!collapsed && {item.title}} */} + ++ {!collapsed && {item.title}} + ++
+ ))}
+
+ {tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ );
+ } catch {
+ return value;
+ }
+ } else if (field.toLowerCase().includes('date')) {
+ return formatDate(value);
+ }
+ return value;
+ };
+
+ return (
+
+
+ );
+};
+
+export default UndoCard;
\ No newline at end of file
+
+ {/* Left content */}
+
+
+
+
+
+
+
+
+ Date Modified
+
+
+ {DateChanged && formatDate(DateChanged)}
+
+
+
+
+ Modified Field
+
+
+ {ModField}
+
+
+
+ {PreviousValue}
+
+
+ {NewValue}
+
+
+
+
+
+ Previous:
+ 100 ? {
+ 'data-tooltip-id': `tooltip-${ID}-prev`
+ } : {})}
+ >
+ {formatValue(PreviousValue, ModField)}
+
+
+
+ New:
+ 100 ? {
+ 'data-tooltip-id': `tooltip-${ID}-new`
+ } : {})}
+ >
+ {formatValue(NewValue, ModField)}
+
+
+ {/* Button content */}
+
+
+