index.tsx)¶

Overview¶

Document management hub that allows users to organise, view, and manage their documents and projects.

Features¶

Project creation and management
Document organisation with drag-and-drop functionality
Document assignment to projects
Project renaming and deletion
Document search functionality
Unassigned documents management
Batch document operations
Interactive document table

URL Parameters¶

None - authenticated route

Implementation¶

State Management¶

// Project Management
const [projects, setProjects] = useState<Project[]>([]);
const [selectedProject, setSelectedProject] = useState<string | null>(null);
const [showUnassigned, setShowUnassigned] = useState(false);

// Document Management
const [unassignedDocs, setUnassignedDocs] = useState<UnassignedDocument[]>([]);
const [projectDocuments, setProjectDocuments] = useState<any[]>([]);
const [documentsToDelete, setDocumentsToDelete] = useState<Set<string>>(
  new Set()
);

// UI State
const [isDragging, setIsDragging] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);

Methods¶

const fetchUnassignedDocs = async () =>
// Fetches unassigned documents for the current user

const handleNewProject = async (clientName: string, name: string) =>
// Creates a new project with given client name and project name

const handleRemoveProject = async () =>
// Removes selected project and handles document reassignment

const handleDrag = (event: MouseEvent, info: { point: { x: number; y: number } }) =>
// Handles document drag-and-drop functionality

const handleViewFileClick = (documentID: string) =>
// Navigates to document viewer/editor

HTML Structure¶

<div className="documents-container">
  <SearchBarComponent onSearch={handleSearch} />
  <div className="grid grid-cols-projects gap-4">
    {/* Project List */}
    <div className="projects-section">
      {projects.map((project) => (
        <ProjectCard key={project.ProjectID} {...project} />
      ))}
    </div>
    {/* Document Table */}
    <DocumentTableComponent
      documents={selectedProject ? projectDocuments : unassignedDocs}
    />
  </div>
</div>

Props¶

No props - page component

Components/API Routes Used¶

Components¶

API Routes¶

/api/documents/getUnassignedDocuments - Fetches unassigned documents
/api/documents/getUserDocuments - Fetches project documents
/api/documents/removeDocument - Deletes documents
/api/documents/removeProject - Removes projects
/api/documents/createProject - Creates new projects

Routes to Page¶

Direct: /documents
From: Home page "Open Documentation" button
From: Navigation sidebar
From: Document management links

Dependencies¶

import { useSession } from "next-auth/react";
import { motion, AnimatePresence } from "framer-motion";
import { Dialog, Transition } from "@headlessui/react";
import { useRouter } from "next/navigation";

Notes¶

Implements drag-and-drop using Framer Motion
Handles batch document operations
Features interactive modals for project operations
Includes document search functionality
Uses optimistic updates for better UX
Requires authentication