From 205585814f4435618d795ce524333c024f3f531c Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Thu, 10 Apr 2025 01:36:04 +0000
Subject: [PATCH] Update main dashboard to display correct metrics and
 information.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/6e2e879c-f85c-413f-b67d-151c3c3cc987.jpg
---
 client/src/App.tsx                          |   7 +-
 client/src/pages/custom-dashboards-page.tsx | 445 ++++++++++++++++++++
 client/src/pages/main-dashboard-page.tsx    | 277 ++++++++++++
 3 files changed, 726 insertions(+), 3 deletions(-)
 create mode 100644 client/src/pages/custom-dashboards-page.tsx
 create mode 100644 client/src/pages/main-dashboard-page.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3972b9d..5f233a7 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -7,7 +7,8 @@ import { queryClient } from "./lib/queryClient";
 import ProtectedRoute from "./lib/protected-route";
 import NotFound from "@/pages/not-found";
 import AuthPage from "@/pages/auth-page";
-import DashboardPage from "@/pages/dashboard-page";
+import MainDashboardPage from "@/pages/main-dashboard-page";
+import CustomDashboardsPage from "@/pages/custom-dashboards-page";
 import UsersPage from "@/pages/users-page";
 import GroupsPage from "@/pages/groups-page";
 import OUsPage from "@/pages/ous-page";
@@ -31,7 +32,7 @@ export default function App() {
               <Route path="/auth">
                 <AuthPage />
               </Route>
-              <ProtectedRoute path="/" component={DashboardPage} />
+              <ProtectedRoute path="/" component={MainDashboardPage} />
               <ProtectedRoute path="/users" component={UsersPage} />
               <ProtectedRoute path="/groups" component={GroupsPage} />
               <ProtectedRoute path="/organizational-units" component={OUsPage} />
@@ -44,7 +45,7 @@ export default function App() {
               <ProtectedRoute path="/settings" component={SettingsPage} />
               <ProtectedRoute path="/user-management" component={UserManagementPage} />
               <ProtectedRoute path="/sites" component={SitesPage} />
-              <ProtectedRoute path="/reporting/dashboards" component={DashboardPage} />
+              <ProtectedRoute path="/reporting/dashboards" component={CustomDashboardsPage} />
               <Route>
                 <NotFound />
               </Route>
diff --git a/client/src/pages/custom-dashboards-page.tsx b/client/src/pages/custom-dashboards-page.tsx
new file mode 100644
index 0000000..18e4e77
--- /dev/null
+++ b/client/src/pages/custom-dashboards-page.tsx
@@ -0,0 +1,445 @@
+import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useToast } from "@/hooks/use-toast";
+import { useLocation } from "wouter";
+import { DashboardLayout, DashboardConfig } from "@/components/dashboard/dashboard-layout";
+import { ShareDashboardDialog } from "@/components/dashboard/share-dashboard-dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Plus, RefreshCw, Share2, Trash2, ArrowLeft } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { v4 as uuidv4 } from 'uuid';
+import { apiRequest, getQueryFn, queryClient } from "@/lib/queryClient";
+
+// Schema for form validation
+const dashboardSchema = z.object({
+  name: z.string().min(2, "Name must be at least 2 characters"),
+});
+
+type DashboardFormValues = z.infer<typeof dashboardSchema>;
+
+export default function CustomDashboardsPage() {
+  const { toast } = useToast();
+  const [, setLocation] = useLocation();
+  const [dashboards, setDashboards] = useState<DashboardConfig[]>([]);
+  const [activeTab, setActiveTab] = useState<string>("dashboard-overview");
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [dashboardToDelete, setDashboardToDelete] = useState<string | null>(null);
+  const [dataSourcesLoading, setDataSourcesLoading] = useState(true);
+  const [dataSources, setDataSources] = useState<Array<{
+    id: string;
+    name: string;
+    data: any[];
+    fields: Array<{ name: string; type: string }>;
+  }>>([]);
+
+  // Form for creating a new dashboard
+  const form = useForm<DashboardFormValues>({
+    resolver: zodResolver(dashboardSchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  // Fetch LDAP connections to use as data sources
+  const { data: connections = [], isLoading: isLoadingConnections } = useQuery<any[]>({
+    queryKey: ['/api/ldap-connections'],
+  });
+
+  // Data source queries
+  const { data: userData } = useQuery<{ data: any[] }>({
+    queryKey: ['/api/user-dashboard-data'],
+    enabled: !isLoadingConnections && connections.length > 0,
+  });
+
+  const { data: computerData } = useQuery<{ data: any[] }>({
+    queryKey: ['/api/computer-dashboard-data'],
+    enabled: !isLoadingConnections && connections.length > 0,
+  });
+
+  const { data: groupData } = useQuery<{ data: any[] }>({
+    queryKey: ['/api/group-dashboard-data'],
+    enabled: !isLoadingConnections && connections.length > 0,
+  });
+
+  const { data: ouData } = useQuery<{ data: any[] }>({
+    queryKey: ['/api/ou-dashboard-data'],
+    enabled: !isLoadingConnections && connections.length > 0,
+  });
+
+  const { data: domainData } = useQuery<{ data: any[] }>({
+    queryKey: ['/api/domain-dashboard-data'],
+    enabled: !isLoadingConnections && connections.length > 0,
+  });
+
+  const { data: siteData } = useQuery<{ data: any[] }>({
+    queryKey: ['/api/site-dashboard-data'],
+    enabled: !isLoadingConnections && connections.length > 0,
+  });
+
+  const { data: subnetData } = useQuery<{ data: any[] }>({
+    queryKey: ['/api/subnet-dashboard-data'],
+    enabled: !isLoadingConnections && connections.length > 0,
+  });
+
+  // Load saved dashboards
+  useEffect(() => {
+    const savedDashboards = localStorage.getItem('dashboards');
+    if (savedDashboards) {
+      try {
+        setDashboards(JSON.parse(savedDashboards));
+      } catch (error) {
+        console.error('Error parsing saved dashboards:', error);
+        setDashboards([]);
+      }
+    }
+  }, []);
+
+  // Set initial active tab
+  useEffect(() => {
+    if (dashboards.length > 0 && activeTab === "dashboard-overview") {
+      setActiveTab(dashboards[0].id);
+    }
+  }, [dashboards, activeTab]);
+
+  // Prepare data sources when data is loaded
+  useEffect(() => {
+    if (userData || computerData || groupData || ouData || domainData || siteData || subnetData) {
+      const sources = [];
+
+      if (userData?.data) {
+        sources.push({
+          id: 'users',
+          name: 'Users',
+          data: userData.data,
+          fields: getFieldTypes(userData.data),
+        });
+      }
+
+      if (computerData?.data) {
+        sources.push({
+          id: 'computers',
+          name: 'Computers',
+          data: computerData.data,
+          fields: getFieldTypes(computerData.data),
+        });
+      }
+
+      if (groupData?.data) {
+        sources.push({
+          id: 'groups',
+          name: 'Groups',
+          data: groupData.data,
+          fields: getFieldTypes(groupData.data),
+        });
+      }
+
+      if (ouData?.data) {
+        sources.push({
+          id: 'ous',
+          name: 'Organizational Units',
+          data: ouData.data,
+          fields: getFieldTypes(ouData.data),
+        });
+      }
+
+      if (domainData?.data) {
+        sources.push({
+          id: 'domains',
+          name: 'Domains',
+          data: domainData.data,
+          fields: getFieldTypes(domainData.data),
+        });
+      }
+
+      if (siteData?.data) {
+        sources.push({
+          id: 'sites',
+          name: 'Sites',
+          data: siteData.data,
+          fields: getFieldTypes(siteData.data),
+        });
+      }
+
+      if (subnetData?.data) {
+        sources.push({
+          id: 'subnets',
+          name: 'Subnets',
+          data: subnetData.data,
+          fields: getFieldTypes(subnetData.data),
+        });
+      }
+
+      setDataSources(sources);
+      setDataSourcesLoading(false);
+    }
+  }, [userData, computerData, groupData, ouData, domainData, siteData, subnetData]);
+
+  function getFieldTypes(data: any[]): Array<{ name: string; type: string }> {
+    if (!data || data.length === 0) return [];
+    
+    const sample = data[0];
+    return Object.keys(sample).map(key => {
+      const value = sample[key];
+      let type = 'string';
+      
+      if (typeof value === 'number') {
+        type = 'number';
+      } else if (typeof value === 'boolean') {
+        type = 'boolean';
+      } else if (value instanceof Date) {
+        type = 'date';
+      } else if (Array.isArray(value)) {
+        type = 'array';
+      } else if (value !== null && typeof value === 'object') {
+        type = 'object';
+      }
+      
+      return { name: key, type };
+    });
+  }
+
+  const handleCreateDashboard = (values: DashboardFormValues) => {
+    const newDashboard: DashboardConfig = {
+      id: uuidv4(),
+      name: values.name,
+      layout: { lg: [] },
+      widgets: [],
+      branding: {
+        title: values.name,
+        showHeader: true,
+        logo: null,
+        primaryColor: '#3b82f6',
+        secondaryColor: '#f59e0b',
+        showFooter: true,
+        footerText: `Created by AD Management API - ${new Date().toLocaleDateString()}`
+      }
+    };
+    
+    const updatedDashboards = [...dashboards, newDashboard];
+    setDashboards(updatedDashboards);
+    setActiveTab(newDashboard.id);
+    setIsCreateDialogOpen(false);
+    form.reset();
+    
+    // Save to localStorage
+    localStorage.setItem('dashboards', JSON.stringify(updatedDashboards));
+    
+    toast({
+      title: "Dashboard Created",
+      description: `New dashboard "${values.name}" has been created.`,
+    });
+  };
+
+  const handleSaveDashboard = (updatedConfig: DashboardConfig) => {
+    const updatedDashboards = dashboards.map(dashboard => 
+      dashboard.id === updatedConfig.id ? updatedConfig : dashboard
+    );
+    
+    setDashboards(updatedDashboards);
+    
+    // Save to localStorage
+    localStorage.setItem('dashboards', JSON.stringify(updatedDashboards));
+    
+    toast({
+      title: "Dashboard Saved",
+      description: "Your changes have been saved.",
+    });
+  };
+
+  const confirmDelete = (dashboardId: string) => {
+    setDashboardToDelete(dashboardId);
+    setDeleteDialogOpen(true);
+  };
+
+  const executeDelete = () => {
+    if (!dashboardToDelete) return;
+    
+    const updatedDashboards = dashboards.filter(dashboard => dashboard.id !== dashboardToDelete);
+    setDashboards(updatedDashboards);
+    setDeleteDialogOpen(false);
+    
+    if (updatedDashboards.length > 0) {
+      setActiveTab(updatedDashboards[0].id);
+    } else {
+      setActiveTab("dashboard-overview");
+    }
+    
+    setDashboardToDelete(null);
+    
+    // Save to localStorage
+    localStorage.setItem('dashboards', JSON.stringify(updatedDashboards));
+    
+    toast({
+      title: "Dashboard Deleted",
+      description: "The dashboard has been deleted.",
+    });
+  };
+
+  return (
+    <div className="container mx-auto py-6">
+      <div className="flex justify-between items-center mb-6">
+        <div className="flex items-center gap-4">
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={() => window.history.back()}
+            className="mr-2"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back
+          </Button>
+          <h1 className="text-3xl font-bold">Custom Dashboards</h1>
+        </div>
+        <div className="flex gap-2">
+          {dashboards.length > 0 && activeTab !== "dashboard-overview" && (
+            <Button 
+              variant="outline" 
+              onClick={() => confirmDelete(activeTab)}
+              className="text-destructive hover:bg-destructive/10"
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete Dashboard
+            </Button>
+          )}
+          <Button onClick={() => setIsCreateDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            New Dashboard
+          </Button>
+        </div>
+      </div>
+      
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="mb-6">
+          {dashboards.map((dashboard) => (
+            <TabsTrigger key={dashboard.id} value={dashboard.id}>
+              {dashboard.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        
+        {dashboards.length === 0 ? (
+          <div className="text-center py-12 border rounded-lg bg-card">
+            <h3 className="text-lg font-semibold mb-2">No Dashboards Created</h3>
+            <p className="text-muted-foreground mb-6">Create your first dashboard to start visualizing data</p>
+            <Button onClick={() => setIsCreateDialogOpen(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create Dashboard
+            </Button>
+          </div>
+        ) : (
+          dashboards.map((dashboard) => (
+            <TabsContent key={dashboard.id} value={dashboard.id}>
+              {dataSourcesLoading ? (
+                <div className="flex justify-center items-center min-h-[60vh]">
+                  <RefreshCw className="h-8 w-8 animate-spin text-primary" />
+                  <span className="ml-2">Loading data sources...</span>
+                </div>
+              ) : (
+                <DashboardLayout
+                  config={dashboard}
+                  onSave={handleSaveDashboard}
+                  dataSources={dataSources}
+                />
+              )}
+            </TabsContent>
+          ))
+        )}
+      </Tabs>
+      
+      {/* Create Dashboard Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Create New Dashboard</DialogTitle>
+          </DialogHeader>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleCreateDashboard)} className="space-y-6">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Dashboard Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Enter dashboard name" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Give your dashboard a descriptive name.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsCreateDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit">Create Dashboard</Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Dashboard Confirmation */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the dashboard
+              and all its widgets.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setDashboardToDelete(null)}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={executeDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/pages/main-dashboard-page.tsx b/client/src/pages/main-dashboard-page.tsx
new file mode 100644
index 0000000..45a145a
--- /dev/null
+++ b/client/src/pages/main-dashboard-page.tsx
@@ -0,0 +1,277 @@
+import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { 
+  BarChart,
+  Bar,
+  PieChart,
+  Pie,
+  Cell,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from "recharts";
+import { 
+  Users,
+  Monitor,
+  UserPlus,
+  Globe,
+  Building2,
+  Network,
+  AlertCircle,
+  Activity,
+  Loader2
+} from "lucide-react";
+import { DashboardLayout } from "@/layouts/dashboard-layout";
+
+interface DashboardSummary {
+  userCount: number;
+  computerCount: number;
+  groupCount: number;
+  sitesCount: number;
+  domainsCount: number;
+  subnetsCount: number;
+  message?: string;
+}
+
+export default function MainDashboardPage() {
+  // Fetch summary data
+  const { data: summary, isLoading: summaryLoading } = useQuery<DashboardSummary>({
+    queryKey: ['/api/dashboard-summary'],
+    retry: false
+  });
+
+  // Fetch Users Data
+  const { data: usersData, isLoading: usersLoading } = useQuery<{data: any[]}>({
+    queryKey: ['/api/user-dashboard-data'],
+    retry: false
+  });
+
+  // Fetch Computers Data
+  const { data: computersData, isLoading: computersLoading } = useQuery<{data: any[]}>({
+    queryKey: ['/api/computer-dashboard-data'],
+    retry: false
+  });
+
+  // Fetch Groups Data
+  const { data: groupsData, isLoading: groupsLoading } = useQuery<{data: any[]}>({
+    queryKey: ['/api/group-dashboard-data'],
+    retry: false
+  });
+
+  const isLoading = summaryLoading || usersLoading || computersLoading || groupsLoading;
+
+  const usersByOU = React.useMemo(() => {
+    if (!usersData?.data) return [];
+    
+    // Group users by organizational unit
+    const ouGroups: Record<string, number> = {};
+    
+    usersData.data.forEach(user => {
+      const ou = user.organizationalUnit || 'None';
+      ouGroups[ou] = (ouGroups[ou] || 0) + 1;
+    });
+    
+    // Convert to array format for charts
+    return Object.entries(ouGroups).map(([name, value]) => ({ name, value }));
+  }, [usersData]);
+
+  const computersByOS = React.useMemo(() => {
+    if (!computersData?.data) return [];
+    
+    // Group computers by operating system
+    const osGroups: Record<string, number> = {};
+    
+    computersData.data.forEach(computer => {
+      const os = computer.operatingSystem || 'Unknown';
+      osGroups[os] = (osGroups[os] || 0) + 1;
+    });
+    
+    // Convert to array format for charts
+    return Object.entries(osGroups).map(([name, value]) => ({ name, value }));
+  }, [computersData]);
+
+  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#A569BD', '#5DADE2', '#F4D03F'];
+
+  return (
+    <DashboardLayout title="Active Directory Dashboard" description="Overview of your Active Directory environment">
+      {isLoading ? (
+        <div className="flex justify-center items-center min-h-[60vh]">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <span className="ml-2">Loading dashboard data...</span>
+        </div>
+      ) : (
+        <>
+          {/* Summary Cards */}
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 mb-6">
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Users</CardTitle>
+                <Users className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{summary?.userCount || 0}</div>
+                <p className="text-xs text-muted-foreground">Total active users</p>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Computers</CardTitle>
+                <Monitor className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{summary?.computerCount || 0}</div>
+                <p className="text-xs text-muted-foreground">Total computers</p>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Groups</CardTitle>
+                <UserPlus className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{summary?.groupCount || 0}</div>
+                <p className="text-xs text-muted-foreground">Total groups</p>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Domains</CardTitle>
+                <Globe className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{summary?.domainsCount || 0}</div>
+                <p className="text-xs text-muted-foreground">Total domains</p>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Sites</CardTitle>
+                <Building2 className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{summary?.sitesCount || 0}</div>
+                <p className="text-xs text-muted-foreground">Total sites</p>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Subnets</CardTitle>
+                <Network className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{summary?.subnetsCount || 0}</div>
+                <p className="text-xs text-muted-foreground">Total subnets</p>
+              </CardContent>
+            </Card>
+          </div>
+          
+          {/* Charts */}
+          <div className="grid gap-4 md:grid-cols-2 mb-6">
+            <Card className="col-span-1">
+              <CardHeader>
+                <CardTitle>Users by Organizational Unit</CardTitle>
+                <CardDescription>
+                  Distribution of users across organizational units
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="h-80">
+                {usersByOU.length > 0 ? (
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={usersByOU}
+                        cx="50%"
+                        cy="50%"
+                        labelLine={false}
+                        label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+                        outerRadius={80}
+                        fill="#8884d8"
+                        dataKey="value"
+                      >
+                        {usersByOU.map((entry, index) => (
+                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                      <Legend />
+                    </PieChart>
+                  </ResponsiveContainer>
+                ) : (
+                  <div className="flex items-center justify-center h-full">
+                    <AlertCircle className="h-8 w-8 text-muted-foreground mr-2" />
+                    <span>No data available</span>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+            
+            <Card className="col-span-1">
+              <CardHeader>
+                <CardTitle>Computers by Operating System</CardTitle>
+                <CardDescription>
+                  Distribution of computer operating systems
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="h-80">
+                {computersByOS.length > 0 ? (
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      data={computersByOS}
+                      layout="vertical"
+                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis type="number" />
+                      <YAxis dataKey="name" type="category" width={150} />
+                      <Tooltip />
+                      <Legend />
+                      <Bar dataKey="value" fill="#8884d8" name="Computers" />
+                    </BarChart>
+                  </ResponsiveContainer>
+                ) : (
+                  <div className="flex items-center justify-center h-full">
+                    <AlertCircle className="h-8 w-8 text-muted-foreground mr-2" />
+                    <span>No data available</span>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+          
+          {/* Recent Activity */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Activity className="h-5 w-5 mr-2" />
+                Recent Activity
+              </CardTitle>
+              <CardDescription>
+                Most recent changes in your Active Directory environment
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                {/* This would show recent audit logs */}
+                <div className="p-4 text-center text-muted-foreground">
+                  View detailed logs in the Audit Logs section
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </DashboardLayout>
+  );
+}
\ No newline at end of file