alfaisal-dashboard v2.3.8

Alfaisal Dashboard

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

Installation

npm install alfaisal-dashboard@latest

Usage

import { Layout } from "alfaisal-dashboard";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useLocation,
  Navigate,
} from "react-router-dom";
import "alfaisal-dashboard/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: () => console.log("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",
    description: "Learning Management System",
  },
  {
    id: 2,
    name: "E-Forms",
    icon: <FileText size={24} />,
    active: false,
    path: "/e-forms",
    description: "Electronic Forms System",
  },
  {
    id: 3,
    name: "HRS",
    icon: <UsersIcon size={24} />,
    active: false,
    path: "/hrs",
    description: "Human Resources System",
  },
  {
    id: 4,
    name: "ERP",
    icon: <Calendar size={24} />,
    active: false,
    path: "/erp",
    description: "Enterprise Resource Planning",
  },
  {
    id: 5,
    name: "Al-Faisal Email",
    icon: <Mail size={24} />,
    active: true,
    path: "/email",
    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();

  const handleNavigate = (path) => {
    if (!path) {
      console.error("Path is required for navigation");
      return;
    }

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

  const handleAppSelect = (app) => {
    if (!app) {
      console.error("App object is required");
      return;
    }

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


    if (!app.path) {
      console.error(`No path defined for app: ${app.name}`);
      alert(`Error: No path defined for ${app.name}`);
      return;
    }

  
    if (app.active === false) {
      alert(`Opening ${app.name}: ${app.description || ""}`);
    }


    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}
      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;