feat: create initial users page and update ModuleCard to support navigation

app/(backend)/page.tsx

@@ -20,6 +20,7 @@ import {
   UserCircle,
   Users,
 } from "lucide-react";
+import Link from "next/link";
 import React from "react";
 
 const Dashboard: React.FC = () => {
@@ -222,13 +223,15 @@ const Dashboard: React.FC = () => {
 
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
               {category.items.map((item) => (
+                <Link key={item.id} href={item.path} className="block">
                   <ModuleCard
                     key={item.id}
                     title={item.title}
                     description={item.description}
                     icon={item.icon}
-                  onClick={() => console.log(`Navigating to ${item.path}`)}
+                    //onClick={() => console.log(`Navigating to ${item.path}`)}
                   />
+                </Link>
               ))}
             </div>
           </div>

app/(backend)/users/page.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Search, Plus, MoreVertical, Filter } from "lucide-react";
+
+export default function UsersPage() {
+  
+    const [open, setOpen] = useState(false)
+  
+    return (
+        <div className="space-y-6">
+        {/* Header */}
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div>
+            <h1 className="text-3xl font-bold tracking-tight text-foreground">Users</h1>
+            <p className="text-muted-foreground mt-1">Manage your community members and their permissions.</p>
+            </div>
+            <Button variant="default" size="sm" onClick={() => setOpen(true)}>
+                <Plus />
+                Add User
+            </Button>
+        </div>
+
+        {/* Filters & Search */}
+        <div className="flex flex-col md:flex-row gap-4">
+            <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <input 
+                className="w-full bg-card border border-border rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+                placeholder="Search users by name or email..."
+            />
+            </div>
+            <Button variant="outline" size="sm">
+                <Filter className="mr-2" />
+                Filters
+            </Button>
+        </div>
+
+        {/* Users List / Table */}
+        <div className="bg-card border border-border rounded-xl overflow-hidden shadow-sm">
+            <table className="w-full text-left">
+            <thead className="bg-muted/50 border-b border-border">
+                <tr>
+                <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">User</th>
+                <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Role</th>
+                <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Status</th>
+                <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Joined</th>
+                <th className="px-6 py-3"></th>
+                </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+                {/* Example Row */}
+                <tr className="hover:bg-muted/20 transition-colors cursor-pointer">
+                <td className="px-6 py-4">
+                    <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">JD</div>
+                    <div>
+                        <div className="text-sm font-medium text-foreground">John Doe</div>
+                        <div className="text-xs text-muted-foreground">john@example.com</div>
+                    </div>
+                    </div>
+                </td>
+                <td className="px-6 py-4">
+                    <span className="text-sm text-muted-foreground">Administrator</span>
+                </td>
+                <td className="px-6 py-4">
+                    <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-500">Active</span>
+                </td>
+                <td className="px-6 py-4 text-sm text-muted-foreground">Jan 29, 2026</td>
+                <td className="px-6 py-4 text-right">
+                    <button className="p-2 hover:bg-muted rounded-full transition-colors">
+                    <MoreVertical className="w-4 h-4 text-muted-foreground" />
+                    </button>
+                </td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+        </div>
+  );
+}