Alfaisal Dashboard

A modern, customizable dashboard component library for React applications.

Installation

npm install alfaisal-dashboard

Usage

import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import { Layout } from "alfaisal-dashboard"
import { LayoutDashboard, FileText, LucideUsers, LucideSettings, HelpCircle } from "lucide-react"

// Import your page components
import Dashboard from "./pages/Dashboard"
import Applications from "./pages/Applications"
import UsersPage from "./pages/Users" // Renamed to avoid conflict
import SettingsPage from "./pages/Settings" // Renamed to avoid conflict

function App() {
  // User configuration
  const user = {
    name: "Olivia Anna",
    role: "IT Manager",
    avatar:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
  }

  // Sidebar configuration
  const sidebarLogo = {
    text: "AF",
    subText: "Dashboard",
    bgColor: "bg-gradient-to-b from-[#0966AF] to-[#13456C]",
  }

  const applicationName = "Application Management System"

  // Menu items configuration
  const menuItems = [
    {
      path: "/",
      icon: <LayoutDashboard size={20} />,
      label: "Dashboard",
    },
    {
      path: "/applications",
      icon: <FileText size={20} />,
      label: "Applications",
    },
    {
      path: "/users",
      icon: <LucideUsers size={20} />, // Using renamed import
      label: "Users",
    },
    {
      type: "divider",
      label: "System",
    },
    {
      path: "/settings",
      icon: <LucideSettings size={20} />, // Using renamed import
      label: "Settings",
    },
  ]

  // App launcher items
  const appLauncherItems = [
    { id: 1, name: "Dashboard", icon: <LayoutDashboard size={24} />, active: true },
    { id: 2, name: "Applications", icon: <FileText size={24} />, active: false },
    { id: 3, name: "Users", icon: <LucideUsers size={24} />, active: false },
    { id: 4, name: "Settings", icon: <LucideSettings size={24} />, active: false },
    { id: 5, name: "Help", icon: <HelpCircle size={24} />, active: false },
  ]

  // Notification items (example data)
  const notificationItems = [
    { id: 1, icon: "🔔", message: "New application submitted", time: "5 minutes ago" },
    { id: 2, icon: "📅", message: "Meeting scheduled for tomorrow", time: "1 hour ago" },
  ]

  // Activity items (example data)
  const activityItems = [
    { id: 1, avatar: "/user1.jpg", message: "John Doe updated their profile", time: "2 hours ago" },
    { id: 2, avatar: "/user2.jpg", message: "Jane Smith submitted a new application", time: "4 hours ago" },
  ]

  // Contact items (example data)
  const contactItems = [
    { id: 1, name: "Alice Johnson", avatar: "/alice.jpg" },
    { id: 2, name: "Bob Williams", avatar: "/bob.jpg" },
  ]

  // Message items (example data)
  const messageItems = [
    {
      id: 1,
      name: "Charlie Brown",
      avatar: "/charlie.jpg",
      message: "Hey, can you review my application?",
      time: "10:30 AM",
    },
    { id: 2, name: "Diana Prince", avatar: "/diana.jpg", message: "Meeting rescheduled to 3 PM", time: "Yesterday" },
  ]

  // Profile menu items
  const profileMenuItems = [
    {
      label: "My Profile",
      icon: <LucideUsers size={16} />,
      action: () => console.log("Profile clicked"),
    },
    {
      label: "Settings",
      icon: <LucideSettings size={16} />,
      action: () => console.log("Settings clicked"),
      highlight: true,
    },
    {
      label: "Help",
      icon: <HelpCircle size={16} />,
      action: () => console.log("Help clicked"),
    },
  ]

  // Logout handler
  const handleLogout = () => {
    console.log("Logout clicked")
    // Implement your logout logic here
  }

  return (
    <Router>
      <Layout
        user={user}
        universityLogo="https://upload.wikimedia.org/wikipedia/commons/7/73/Logoalf.png"
        sidebarLogo={sidebarLogo}
        applicationName={applicationName}
        menuItems={menuItems}
        appLauncherItems={appLauncherItems}
        notificationItems={notificationItems}
        activityItems={activityItems}
        contactItems={contactItems}
        messageItems={messageItems}
        profileMenuItems={profileMenuItems}
        onLogout={handleLogout}
        currentPath={window.location.pathname}
      >
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/applications" element={<Applications />} />
          <Route path="/users" element={<UsersPage />} /> {/* Using renamed component */}
          <Route path="/settings" element={<SettingsPage />} /> {/* Using renamed component */}
        </Routes>
      </Layout>
    </Router>
  )
}

export default App

Features

• Modern and responsive design
• Customizable components
• Built with Tailwind CSS
• Easy to integrate
• Fully customizable theme
• Ready-to-use layout components

Props

Dashboard Component

| Prop | Type | Description | |------|------|-------------| | user | Object | User information including name, role, and avatar | | universityLogo | string | URL for the university logo | | sidebarLogo | Object | Logo configuration for sidebar | | applicationName | string | Name of the application | | menuItems | Array | Navigation menu items | | appLauncherItems | Array | Items for the app launcher | | notificationItems | Array | Notification items | | activityItems | Array | Activity items | | contactItems | Array | Contact items | | messageItems | Array | Message items | | profileMenuItems | Array | Profile menu items | | onLogout | Function | Logout handler function |

License

MIT