frontend/src/index.css (1)

523-529: Consider using Tailwind utility classes directly in JSX.

These custom CSS classes define simple padding and width values that could be expressed using Tailwind utilities directly on the component elements (e.g., p-4, p-1, w-20). This would improve consistency with the Tailwind-first approach being adopted.

Additionally, the .confirmationModalBtn class has inconsistent indentation.

🔧 Suggested formatting fix if keeping custom classes

 .confirmationModal{
   padding: 1rem;
 }
 .confirmationModalBtn{
-      padding: 5px;
-    width: 5rem;
-
+  padding: 5px;
+  width: 5rem;
 }

frontend/package.json (1)

13-13: Consider moving Tailwind packages to devDependencies.

@tailwindcss/vite (4.1.18) is introduced as a new runtime integration for Tailwind with Vite, and tailwindcss (4.1.18) is added as a styling framework dependency. Both packages are build-time tools that process CSS during development and build phases—they don't run in the browser. Moving them to devDependencies would better reflect their purpose and reduce production bundle analysis noise.

♻️ Suggested fix

   "dependencies": {
-    "@tailwindcss/vite": "^4.1.18",
     "axios": "^1.13.2",
     "lucide-react": "^0.554.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hot-toast": "^2.6.0",
     "react-router-dom": "^7.9.6",
-    "recharts": "^3.5.1",
-    "tailwindcss": "^4.1.18"
+    "recharts": "^3.5.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.1.18",
     "@types/react": "^19.2.5",

     "globals": "^16.5.0",
+    "tailwindcss": "^4.1.18",
     "vite": "^7.2.4"
   }

Also applies to: 20-21

frontend/src/pages/ConfirmationModal.jsx (2)

7-47: Add accessibility attributes for screen readers.

The modal has id="modal-title" and id="modal-description" but they're not connected via ARIA attributes. This impacts screen reader users.

♿ Proposed accessibility improvements

     <div
       className="fixed inset-0 bg-black/50 flex items-center justify-center"
       onClick={onCancel}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
     >

---

38-43: Consider making confirm button text configurable.

The button text is hardcoded as "Delete", limiting reusability for non-delete confirmations. Consider adding a confirmText prop with a default value.

♻️ Proposed change

-function ConfirmationModal({ open, title, message, onConfirm, onCancel }) {
+function ConfirmationModal({ open, title, message, onConfirm, onCancel, confirmText = "Delete" }) {

           <button
             onClick={onConfirm}
             className="btn btn-danger confirmationModalBtn"
           >
-            Delete
+            {confirmText}
           </button>

frontend/src/pages/Database.jsx (3)

42-45: Consider renaming fetchShowModal for clarity.

The name fetchShowModal implies it fetches data, but it only sets state to show the modal. A clearer name like openDeleteModal or showDeleteConfirmation would better convey the intent.

♻️ Proposed rename

-  const fetchShowModal = (id) => {
+  const openDeleteModal = (id) => {
     setShowModal(true);
     setSelectedId(id);
   };

Then update the usage on line 295:

-                  onClick={() => fetchShowModal(row._id)}
+                  onClick={() => openDeleteModal(row._id)}

---

65-67: Consider capturing the error for debugging.

The catch block discards the error object. Capturing it would help with debugging failed requests.

♻️ Proposed change

-      } catch {
+      } catch (err) {
+        console.error(err);
         toast.error("Failed to load project");
       }

---

188-250: Inner function components recreate on each render.

Sidebar, TableView, JsonView, and SkeletonLoader are defined inside the parent component, causing them to be recreated on every render. This breaks referential equality and can cause unnecessary re-renders of child components.

For this use case with simple UI components, the impact is minimal, but for better performance and testability, consider extracting them outside Database or memoizing them.

frontend/src/pages/ProjectSettings.jsx (2)

69-72: Remove commented-out dead code.

This commented-out confirmation logic is no longer needed since the modal now handles confirmation. Remove it to keep the codebase clean.

🧹 Proposed cleanup

   const handleDeleteProject = async () => {
     if (deleteConfirm !== project.name)
       return toast.error("Project name does not match");

-    // // if (
-    // //   !confirm("Final warning: This will delete the project and all its data.")
-    // // )
-    //   return;
-
     try {

---

326-331: Project data not refreshed after config update.

After successful configuration, isConfigured won't reflect the new state until the page is refreshed. The UI masks this by hiding the form, but the underlying project state is stale.

Consider accepting an onSuccess callback prop to trigger a project refresh from the parent, or update the local project prop optimistically.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

frontend/src/pages/Database.jsx (9)

14-18: Unused imports detected.

The Search and MoreVertical icons are imported from lucide-react but do not appear to be used anywhere in the component. Consider removing them to keep the imports clean.

🧹 Suggested cleanup

 import {
   Database as DbIcon,
   Plus,
   Trash2,
   RefreshCw,
   Code,
   Table as TableIcon,
-  Search,
   Menu,
   X,
   ChevronRight,
-  MoreVertical,
   FileText,
 } from "lucide-react";

---

42-45: Consider renaming fetchShowModal for clarity.

The function name fetchShowModal suggests it fetches data, but it only sets state to show the modal. A name like openDeleteModal or showDeleteConfirmation would better convey its purpose.

✏️ Suggested rename

-  const fetchShowModal = (id) => {
+  const openDeleteModal = (id) => {
     setShowModal(true);
     setSelectedId(id);
   };

---

65-67: Error details are discarded.

The catch block shows a toast but discards the error object, making debugging harder. Consider logging the error.

🔍 Suggested improvement

-      } catch {
+      } catch (err) {
+        console.error("Failed to load project:", err);
         toast.error("Failed to load project");
       }

---

99-115: Clear selectedId after deletion to prevent stale state.

After a successful delete, selectedId still holds the deleted document's ID. While not immediately problematic, clearing it maintains cleaner state management.

🧹 Suggested improvement

       setData((prev) => prev.filter((item) => item._id !== id));
+      setSelectedId(null);
       toast.success("Document deleted");

---

188-250: Inner component definitions cause unnecessary re-renders.

Sidebar, TableView, JsonView, and SkeletonLoader are defined inside the Database component, meaning they are recreated on every render. This defeats React's reconciliation and can cause performance issues or loss of local state.

Consider either:

1. Moving these to separate files or outside the component
2. Converting them to inline JSX if they're simple enough
3. Using useMemo to memoize them (less ideal)

---

304-315: Modal placement may cause unexpected dismissal.

The ConfirmationModal is rendered inside TableView, which only renders when viewMode === "table". If a user opens the delete modal and somehow switches to JSON view, the modal will unmount unexpectedly.

Consider moving the modal to the main return block alongside the "Add Document" modal for consistent behavior.

♻️ Suggested approach

Move the confirmation modal outside of TableView to the main JSX, similar to how isAddModalOpen modal is handled at lines 457-495:

{/* At the end of the main return, alongside the Add Document modal */}
{showModal && (
  <ConfirmationModal
    open={showModal}
    title="Delete Record"
    message="Are you sure you want to delete this record? This action cannot be undone."
    onConfirm={() => {
      handleDelete(selectedId);
      setShowModal(false);
    }}
    onCancel={() => setShowModal(false)}
  />
)}

---

456-495: Consider adding accessibility attributes to the modal.

The "Add Document" modal lacks focus trapping, Escape key handling, and proper ARIA attributes. While not blocking, these improvements would enhance accessibility.

Key additions to consider:

• role="dialog" and aria-modal="true" on modal content
• aria-labelledby pointing to the modal title
• Escape key handler to close modal
• Focus trap to keep keyboard navigation within modal

---

353-358: Add accessible labels to icon-only buttons.

The menu trigger button and other icon-only buttons lack accessible labels for screen reader users.

♿ Suggested improvement

                 <button
                   className="btn-icon hide-desktop menu-trigger"
                   onClick={() => setIsSidebarOpen(true)}
+                  aria-label="Open sidebar menu"
                 >
                   <Menu size={20} />
                 </button>

Apply similar aria-label attributes to other icon-only buttons like the delete button, refresh button, and close buttons.

---

497-861: Consider extracting styles to a separate CSS file or using Tailwind classes.

The 350+ lines of inline CSS embedded in the JSX impacts maintainability and causes the styles to be re-parsed on every render. Since Tailwind CSS is already a project dependency, consider:

1. Moving styles to a dedicated CSS file (e.g., Database.css or Database.module.css)
2. Replacing custom styles with Tailwind utility classes where applicable

Note that some utility classes defined here (.mb-4, .text-muted, .opacity-20) duplicate Tailwind's built-in utilities.

Configuration used: defaults

Review profile: CHILL

Plan: Pro