GitHub

The AdminConsole component is the main interface for an admin user in the Kundima platform. It includes a sidebar for navigation, various pages for managing the system (such as finances, employees, students, and school management), and conditional rendering based on user authentication and the school ownership status.

Here’s a breakdown of its key features:

Key Features and Flow

User Authentication and School Ownership:
- The component checks whether the user is logged in and whether the logged-in user is the school owner. If the user is authenticated and the owner, they are presented with the admin console; otherwise, the user is directed to the AuthenticationPage for login or CreateSchool if the user does not yet own a school.
```
{!userInfo ? (
 <AuthenticationPage />
) : (
  school && userInfo.email === school.schoolOwner ? (
    // Admin Console content here
  ) : (
    <CreateSchool />
  )
)}
```

Sidebar and Content Rendering:

The AppSidebar is conditionally rendered for the school owner, which provides navigation links for various pages in the console (like manage-general, finances, teams, etc.).
Based on the active link, the corresponding page content is rendered. The handleNavigation function is used to switch between the different sections of the admin console.

const renderContent = () => {
  switch (activeLink) {
    case '/manage-general': return <ManageGeneral handleNavigation={handleNavigation} />;
    case '/manage-payments': return <ManagePayments handleNavigation={handleNavigation} />;
    case '/dashboard-overview': return <DashboardView />;
    // other cases...
    default: return <div>Kundima Platforms</div>;
  }
};

Date Display:
- The current date is formatted and displayed in the header in a friendly format (e.g., “Monday, December 24, 2024”).
```
const displayDate = `${formattedDate}`;
```

Navigation and Layout:

The sidebar provides navigation options for different sections such as dashboards, finances, employee management, etc.
The layout includes a header, sidebar, and a scrollable area that renders the appropriate content for the selected page.

<SidebarProvider>
  <AppSidebar handleNavigation={handleNavigation} />
  <SidebarInset>
    <header className="flex h-16 shrink-0 items-center gap-2">
      {/* Header content with date and navigation */}
    </header>
    <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
      <ScrollArea className="h-full w-full">
        {renderContent()}
      </ScrollArea>
    </div>
  </SidebarInset>
</SidebarProvider>

Fallback:
- In case no valid route is matched or the school doesn’t exist, a fallback message (“Kundima Platforms”) is displayed.

Flow Summary:

Step 1: Check if the user is logged in (userInfo). If not, show the AuthenticationPage.
Step 2: If the user is authenticated, check if they are the school owner. If they are, display the admin console with navigation options.
Step 3: The user can navigate between pages (e.g., Dashboard, Finances, Students) by clicking the sidebar links, and the content changes dynamically based on the selected link.
Step 4: If the user is not the school owner, redirect them to the CreateSchool page to set up their school.

Potential Enhancements:

Error Handling: Add proper error handling in case of failed API calls or other issues.
Page Transitions: Introduce page transition animations to make the switching of content smoother.
User Role Management: If there are multiple roles (e.g., admin, teacher), conditional rendering could be added based on the user’s role.
Sidebar Optimization: The sidebar could collapse or adapt to screen sizes to make the UI more mobile-friendly.

Code Example (Rendered Pages)

For example, the Dashboard Overview page can be represented as:

case '/dashboard-overview':
  return <DashboardView />;

Similarly, Manage General or Manage Payments pages are loaded as needed, based on the active link.

This AdminConsole component provides a robust and flexible admin dashboard for managing various aspects of a school, while ensuring a smooth user experience and appropriate access control.

Authentication Console