Introduction to the TeamsConsole Component

TeamsConsole: A Dynamic and Interactive Admin Interface

The TeamsConsole component provides the primary interface for managing various administrative tasks within the Kundima platform. It is a highly modular and interactive dashboard system that combines a sidebar for navigation, dynamic content rendering, and user authentication checks.

This component leverages modern React practices, such as state management and context integration, to create a responsive and intuitive user experience.

Full Code

'use client'
import { AppSidebar } from "./components/app-sidebar"
import { NavActions } from "./components/nav-actions"
import { Separator } from "@/components/ui/separator"
import {
  SidebarInset,
  SidebarProvider,
} from "@/components/ui/sidebar"
import { useState } from "react"
import { ScrollArea } from "@/components/ui/scroll-area"
import HomePage from "./pages/home/home"
import FinancesAdmin from "../adminConsole/pages/finances/page"
import Archived from "../adminConsole/pages/archive/page"
import Students from "../adminConsole/pages/dashboard/students/page"
import Head from "next/head"
import TeamsAuthenticationPage from "../authentication/console/page"
import { useAuth } from "@/app/contexts/AuthContext"
   
export default function TeamsConsole() {
  const [activeLink, setActiveLink] = useState('/home');
  const{userInfo} = useAuth()
 
  const handleNavigation = (link: string) => {
    setActiveLink(link);
  };
 
  
  const currentDate = new Date();
    
  // Define options for formatting
  const options: Intl.DateTimeFormatOptions = { 
      weekday: 'long', 
      day: '2-digit', 
      month: 'long', 
      year: 'numeric' 
  };
 
  // Format the date
  const formattedDate = new Intl.DateTimeFormat('en-US', options).format(currentDate);
  
// Prepend 'ey' to the formatted date
  const displayDate = `${formattedDate}`;
 
  const renderContent = () => {
    switch (activeLink) {
      case '/home':
        return <HomePage  />;
     case '/finances':
        return <FinancesAdmin  />;
      case '/archive':
        return <Archived  />;
     case '/students':
          return <Students  />;
           
      // Add other cases for different routes here
      default:
        return <div>Page not found</div>; // Fallback for unknown routes
    }
  };
  return (
    <>
     {userInfo ? (
<SidebarProvider>
      <AppSidebar  handleNavigation={handleNavigation} />
      <SidebarInset>
        <header className="flex h-14 shrink-0 items-center gap-2">
          <div className="flex flex-1 items-center gap-2 px-3">
             {/* Something Here */}
            <Separator orientation="vertical" className="mr-2 h-4" />
            {displayDate}
          </div>
          <div className="ml-auto px-3">
            <NavActions handleNavigation={handleNavigation} />
          </div>
        </header>
 
        <div className="pt-2"> 
        <ScrollArea className="h-full">
                {renderContent()}
              </ScrollArea>
        </div>          
 
      </SidebarInset>
    </SidebarProvider>
  ) : (
      <TeamsAuthenticationPage />
    )}
    </>
    
  )
}

Key Features

The component uses a sidebar for navigation between different pages, such as:

Home Page
Finances Administration
Archived Data
Student Dashboard

Each navigation option updates the activeLink state to determine the content displayed in the main area dynamically.

2. Authentication Integration

The useAuth hook ensures that only authenticated users can access the console. If a user is not authenticated, they are redirected to the TeamsAuthenticationPage for login or authentication.

const { userInfo } = useAuth();

3. Date Display

The component displays the current date in a user-friendly format at the top of the interface.

Uses the Intl.DateTimeFormat API for localization and formatting.
Example display: “Tuesday, December 24, 2024”.

4. Dynamic Content Rendering

Based on the active navigation link (activeLink), the component renders the corresponding page dynamically:

const renderContent = () => {
  switch (activeLink) {
    case '/home':
      return <HomePage />;
    case '/finances':
      return <FinancesAdmin />;
    case '/archive':
      return <Archived />;
    case '/students':
      return <Students />;
    default:
      return <div>Page not found</div>;
  }
};

5. UI Enhancements

ScrollArea: Ensures smooth scrolling for long content.
AppSidebar and NavActions: Custom components to manage navigation and actions within the console.
Separator: Provides visual separation for better UI clarity.

Structure and Workflow

Initial State and Authentication

The activeLink state is initialized to /home.
The component checks if the user is authenticated using useAuth.

The handleNavigation function updates the activeLink state when the user clicks a sidebar item or navigation action.

const handleNavigation = (link: string) => {
  setActiveLink(link);
};

Content Rendering

The renderContent function maps the activeLink to the appropriate page component.

Conditional Rendering

If the user is authenticated, the admin console interface is displayed with the sidebar and header.
If not, the TeamsAuthenticationPage is rendered.

Benefits

Modular Design: Each page and functionality is encapsulated in its component, making the code scalable and maintainable.
Dynamic and Responsive: Adjusts content and layout dynamically based on user actions and authentication status.
Enhanced User Experience: Combines modern UI features like scrolling, separators, and context providers to ensure a seamless experience.

Code Breakdown

<SidebarProvider>
  <AppSidebar handleNavigation={handleNavigation} />
  <SidebarInset>
    <header className="flex h-14 shrink-0 items-center gap-2">
      <div className="flex flex-1 items-center gap-2 px-3">
        <Separator orientation="vertical" className="mr-2 h-4" />
        {displayDate}
      </div>
      <div className="ml-auto px-3">
        <NavActions handleNavigation={handleNavigation} />
      </div>
    </header>
 
    <div className="pt-2">
      <ScrollArea className="h-full">
        {renderContent()}
      </ScrollArea>
    </div>
  </SidebarInset>
</SidebarProvider>

This layout ensures that the sidebar and header remain consistent while dynamically updating the main content area based on navigation.

By integrating these features, the TeamsConsole component provides a robust and user-friendly foundation for the Kundima admin platform.

Admin Console Policy