alfaisal-layout v1.0.1

Alfaisal Dashboard

A customizable React dashboard component library with responsive UI elements built with Tailwind CSS.

Installation

npm install alfaisal-layout

Usage

import { Layout } from "alfaisal-layout";
import { BrowserRouter, Routes, Route, Link, useLocation, Navigate } from "react-router-dom";
import "alfaisal-layout/dist/esm/dist/styles.css";
import { Home, UsersIcon, FileText, Calendar, Mail, Star } from "lucide-react";

// User details
const user = {
  name: "IT Moddle",
  role: "IT Manager",
  avatar:
    "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
}

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

// Application Name
const applicationName = "Alfaisal Global Layout"

// Menu Items
const menuItems = [
  { label: "Dashboard", path: "/dashboard", icon: <Home size={20} /> },
  { type: "divider", label: "Applications" },
  {
    label: "Management",
    icon: <UsersIcon size={20} />,
    children: [
      { label: "Register App", path: "/register-app", icon: <Star size={18} /> },
      { label: "Email", path: "/email", icon: <Mail size={18} /> },
    ],
  },
  {
    label: "Logout",
    icon: <UsersIcon size={20} />,
    onClick: () => console.log("Logging out..."),
  },
  {
    label: "Refresh Data",
    icon: <FileText size={20} />,
    onClick: () => alert("Refreshing data..."),
  },
]

// App Launcher Items - EACH APP MUST HAVE A PATH
const appLauncherItems = [
  {
    id: 1,
    name: "E-learning",
    icon: <FileText size={24} />,
    active: false,
    path: "/e-learning", // Required path for navigation
    description: "Learning Management System",
  },
  {
    id: 2,
    name: "E-Forms",
    icon: <FileText size={24} />,
    active: false,
    path: "/e-forms", // Required path for navigation
    description: "Electronic Forms System",
  },
  {
    id: 3,
    name: "HRS",
    icon: <UsersIcon size={24} />,
    active: false,
    path: "/hrs", // Required path for navigation
    description: "Human Resources System",
  },
  {
    id: 4,
    name: "ERP",
    icon: <Calendar size={24} />,
    active: false,
    path: "/erp", // Required path for navigation
    description: "Enterprise Resource Planning",
  },
  {
    id: 5,
    name: "Al-Faisal Email",
    icon: <Mail size={24} />,
    active: true,
    path: "/email", // Required path for navigation
    description: "Email System",
  },
]

// Notifications
const notificationItems = [
  { id: 1, icon: "🐛", message: "You have a bug that needs attention", time: "Just now" },
  { id: 2, icon: "👤", message: "New user registered", time: "55 minutes ago" },
]

// Activity Items
const activityItems = [
  { id: 1, avatar: user.avatar, message: "You have a bug that needs attention", time: "Just now" },
  { id: 2, avatar: user.avatar, message: "Released a new version", time: "59 minutes ago" },
]

// Messages
const messageItems = [
  { id: 1, name: "Haider", avatar: user.avatar, message: "I like your confidence 💪", time: "2min ago" },
  { id: 2, name: "Ali", avatar: user.avatar, message: "Can you share your offer?", time: "10min ago" },
]

const LayoutWrapper = ({ children }) => {
  const location = useLocation()

  // Handle navigation - this function is required
  const handleNavigate = (path) => {
    if (!path) {
      console.error("Path is required for navigation")
      return
    }

    console.log(`Navigating to: ${path}`)
    window.location.href = path
  }

  // Handle app selection - this function is required
  const handleAppSelect = (app) => {
    if (!app) {
      console.error("App object is required")
      return
    }

    console.log(`App selected: ${app.name}`)

    // Validate that app has a path
    if (!app.path) {
      console.error(`No path defined for app: ${app.name}`)
      alert(`Error: No path defined for ${app.name}`)
      return
    }

    // Example of custom functionality when an app is selected
    if (app.active === false) {
      alert(`Opening ${app.name}: ${app.description || ""}`)
    }

    // Navigate to the app's path
    handleNavigate(app.path)
  }

  return (
    <Layout
      user={user}
      sidebarLogo={sidebarLogo}
      applicationName={applicationName}
      menuItems={menuItems}
      appLauncherItems={appLauncherItems}
      notificationItems={notificationItems}
      activityItems={activityItems}
      messageItems={messageItems}
      onLogout={() => console.log("Logging out...")}
      currentPath={location.pathname}
      onNavigate={handleNavigate}
      onAppSelect={handleAppSelect} // Pass the required app selection handler
      Link={Link}
    >
      {children}
    </Layout>
  )
}

// Page Components
const Dashboard = () => (
  <div style={{ marginLeft: "30px" }}>
    <h1 className="text-2xl font-bold">Dashboard</h1>
  </div>
)
const RegisterApp = () => (
  <div style={{ marginLeft: "30px" }}>
    <h1 className="text-2xl font-bold">Register Application</h1>
  </div>
)
const Email = () => (
  <div style={{ marginLeft: "30px" }}>
    <h1 className="text-2xl font-bold">Email</h1>
  </div>
)
const ELearning = () => (
  <div style={{ marginLeft: "30px" }}>
    <h1 className="text-2xl font-bold">E-Learning</h1>
  </div>
)
const EForms = () => (
  <div style={{ marginLeft: "30px" }}>
    <h1 className="text-2xl font-bold">E-Forms</h1>
  </div>
)
const HRS = () => (
  <div style={{ marginLeft: "30px" }}>
    <h1 className="text-2xl font-bold">HRS</h1>
  </div>
)
const ERP = () => (
  <div style={{ marginLeft: "30px" }}>
    <h1 className="text-2xl font-bold">ERP</h1>
  </div>
)

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/dashboard" replace />} />
        <Route
          path="/dashboard"
          element={
            <LayoutWrapper>
              <Dashboard />
            </LayoutWrapper>
          }
        />
        <Route
          path="/register-app"
          element={
            <LayoutWrapper>
              <RegisterApp />
            </LayoutWrapper>
          }
        />
        <Route
          path="/email"
          element={
            <LayoutWrapper>
              <Email />
            </LayoutWrapper>
          }
        />
        <Route
          path="/e-learning"
          element={
            <LayoutWrapper>
              <ELearning />
            </LayoutWrapper>
          }
        />
        <Route
          path="/e-forms"
          element={
            <LayoutWrapper>
              <EForms />
            </LayoutWrapper>
          }
        />
        <Route
          path="/hrs"
          element={
            <LayoutWrapper>
              <HRS />
            </LayoutWrapper>
          }
        />
        <Route
          path="/erp"
          element={
            <LayoutWrapper>
              <ERP />
            </LayoutWrapper>
          }
        />
      </Routes>
    </BrowserRouter>
  )
}

export default App