Home Page (pages/index.tsx)

Overview

Main dashboard page displaying user statistics, quick actions, and document management features.

Features

• Dynamic greeting based on time of day
• Profile statistics display
• Document processing metrics
• Quick access to documentation and workspace
• Modern chatbot integration
• Responsive layout

URL Parameters

None - authenticated route

Implementation

State Management

const [greetingMessage, setGreetingMessage] = useState<string>("to back");
const [n_requests_7, setNRequests7] = useState<number>(0);
const [n_requests_30, setNRequests30] = useState<number>(0);
const [n_requests_24, setNRequests24] = useState<number>(0);
const [n_documents_7, setNDocuments7] = useState<number>(0);
const [n_documents_30, setNDocuments30] = useState<number>(0);
const [n_documents_24, setNDocuments24] = useState<number>(0);
const [isProcessing, setIsProcessing] = useState<boolean>(false);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

Methods

const updateProfileStats = async () =>
// Fetches and updates user's document and request statistics

const handleOpenDocumentation = () =>
// Navigates to documents page

const openModal = () =>
// Opens workspace modal

const closeModal = () =>
// Closes workspace modal

HTML Structure

<div className="home h-full" id="homeContainer">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
    {/* Greeting and Quick Actions */}
    <div>
      <div className="greetingContainer">...</div>
      <div className="workspaceContainer">...</div>
    </div>
    {/* Profile Statistics */}
    <div className="w-full">
      <DocumentStatsComponent {...stats} />
    </div>
  </div>
  <ModernChatbotComponent />
</div>

Props

No props - page component

Components/API Routes Used

Components

• SideBar
• DocumentStatsComponent
• ModernChatbotComponent
• Upload

API Routes

• /api/profileStats - Fetches user statistics

Routes to Page

• Direct: / (root route)
• From: Navigation sidebar
• After successful login

Dependencies

import { useLayoutContext } from "@/components/base/LayoutProvider";
import { useSession } from "next-auth/react";
import Modal from "react-modal";
import { motion } from "framer-motion";

Notes

• Requires authentication
• Uses layout context for responsive design
• Implements real-time statistics updates
• Features animated transitions
• Includes modal-based workspace access

All Available Pages

Page	Path	Description	Documentation	Sidebar Label
Home	/	Main dashboard with statistics and quick actions	Home	Home
Projects	/documents	Document browsing and uploading	Documents	Projects
Bid Library	/knowledgebase	Search and browse knowledge articles	Knowledge Base	Bid Library
Bidbot	/chatbot	Dedicated chatbot interface	Chatbot	Bidbot
Settings	/settings	User and application settings	Settings	Settings
Workspace	/workspace	Document editing and management	Workspace	(Not in sidebar)
Login	/login	Authentication page	Login	(Not in sidebar)
Onboarding	/onboarding	New user onboarding flow	Onboarding	(Not in sidebar)
Document Viewer	/viewer	PDF document viewer	Document Viewer	(Not in sidebar)
Onboarding	/onboarding	New user onboarding flow	Onboarding
Chatbot	/chatbot	Dedicated chatbot interface	Chatbot
Document Viewer	/viewer	PDF document viewer	Document Viewer