Skip to Content
FrontendBundlesCRUDAdditional Components

Additional Components

The CRUD bundle includes several additional components that enhance the overall user experience, provide navigation, and help manage entity metadata. These components work together to create a complete admin interface.

1. Navbar

The main navigation component that provides breadcrumbs, search, and user actions.

Props

interface NavbarProps {
  fqcn_bui: IFQCN_BUI; // Component configuration
  sidebarMenu?: boolean; // Show sidebar toggle button
  setSidebarOpen?: React.Dispatch<React.SetStateAction<boolean>>; // Sidebar state setter
  itemData?: Record<string, string>; // Current item data for breadcrumbs
  user: (User & { token: string | null }) | null; // Current user
  login: ActionTracker; // Login action tracker
  initialLogin: ActionTracker; // Initial login tracker
  entityList?: { name: string; icon: string }[]; // Available entities for navigation
  getPageConfig?: (path: string) => Promise<{ data: any }>; // Page configuration getter
  tenant: string; // Tenant identifier
  showParametersLink?: boolean; // Show parameters link
  showLegacyLink?: boolean; // Show legacy interface link
}

Features

  • Breadcrumb Navigation: Automatic breadcrumb generation based on current route
  • Search Integration: Global search across entities
  • User Menu: Profile, settings, and logout options
  • Theme Toggle: Dark/light mode switching
  • Mobile Responsive: Collapsible navigation for mobile devices
  • Multi-tenant Support: Tenant-aware navigation

Usage Example

import { Navbar } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function AppLayout({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
 
  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar
        fqcn_bui={{ Bundle: "app", Unit: "main", Interface: "navbar" }}
        sidebarMenu={true}
        setSidebarOpen={setSidebarOpen}
        user={user}
        login={loginTracker}
        initialLogin={initialLoginTracker}
        entityList={[
          { name: "users", icon: "FaUser" },
          { name: "products", icon: "FaBox" },
          { name: "orders", icon: "FaShoppingCart" },
        ]}
        tenant={tenant}
        showParametersLink={true}
        showLegacyLink={false}
      />
 
      <main className="pt-16">{children}</main>
    </div>
  );
}

2. SidebarMenu

Collapsible sidebar navigation with hierarchical menu support.

Props

interface SidebarMenuProps {
  fqcn_bui: IFQCN_BUI;
  isOpen: boolean;
  onClose: () => void;
  menuItems: MenuItem[];
  user: User | null;
  locale?: string;
}
 
interface MenuItem {
  id: string;
  label: string;
  icon?: string;
  href?: string;
  children?: MenuItem[];
  roles?: string[];
  badge?: string | number;
}

Features

  • Hierarchical Navigation: Support for nested menu items
  • Role-based Access: Show/hide items based on user permissions
  • Badge Support: Display counts or notifications
  • Search: Quick menu item search
  • Responsive Design: Mobile-optimized sidebar

Usage Example

import { SidebarMenu } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
const menuItems: MenuItem[] = [
  {
    id: "dashboard",
    label: "Dashboard",
    icon: "LuLayoutDashboard",
    href: "/dashboard",
  },
  {
    id: "users",
    label: "User Management",
    icon: "FaUser",
    children: [
      { id: "users-list", label: "All Users", href: "/users" },
      { id: "users-roles", label: "Roles", href: "/users/roles" },
      {
        id: "users-permissions",
        label: "Permissions",
        href: "/users/permissions",
      },
    ],
  },
  {
    id: "products",
    label: "Products",
    icon: "FaBox",
    href: "/products",
    badge: 42,
  },
];
 
function AppSidebar() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <SidebarMenu
      fqcn_bui={{ Bundle: "app", Unit: "sidebar", Interface: "menu" }}
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      menuItems={menuItems}
      user={user}
      locale="en"
    />
  );
}

3. Sidebox

Contextual sidebar component for displaying additional information or actions.

Props

interface SideboxProps {
  title?: string;
  children: React.ReactNode;
  collapsible?: boolean;
  defaultOpen?: boolean;
  actions?: React.ReactNode;
  className?: string;
}

Usage Example

import { Sidebox } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function UserDetailPage() {
  return (
    <div className="grid grid-cols-12 gap-6">
      <div className="col-span-8">{/* Main content */}</div>
 
      <div className="col-span-4 space-y-6">
        <Sidebox
          title="Quick Actions"
          collapsible={true}
          defaultOpen={true}
          actions={
            <Button size="sm" variant="ghost">
              Configure
            </Button>
          }
        >
          <div className="space-y-2">
            <Button className="w-full justify-start">Send Email</Button>
            <Button className="w-full justify-start">Reset Password</Button>
            <Button className="w-full justify-start">Export Data</Button>
          </div>
        </Sidebox>
 
        <Sidebox title="Activity Log">
          <div className="space-y-3">
            <div className="text-sm">
              <div className="font-medium">Profile Updated</div>
              <div className="text-gray-500">2 hours ago</div>
            </div>
            <div className="text-sm">
              <div className="font-medium">Login</div>
              <div className="text-gray-500">1 day ago</div>
            </div>
          </div>
        </Sidebox>
      </div>
    </div>
  );
}

Action Components

1. ActionButtons

Flexible action button system with customizable actions and layouts.

Props

interface ActionButtonsProps {
  fqcn_bui: IFQCN_BUI; // Component configuration
  resource: string; // API resource name
  user: User | null; // Current user
  locale?: string; // Locale for translations
 
  // Context specific
  id?: number; // Entity ID
  view?: "detail" | "listing" | "kanban"; // Current view context
 
  // Action configuration
  actions?: ActionType[]; // Enabled actions
  hiddenActions?: ActionType[]; // Hidden actions
  customActions?: ActionButtonConfig[]; // Custom action configurations
  dropdownActions?: ActionDropdownConfig[]; // Dropdown grouped actions
 
  // Behavior
  onAction?: (action: ActionType, id?: number) => void; // Action handler
  showTooltips?: boolean; // Show action tooltips
  size?: "sm" | "md" | "lg"; // Button size
  layout?: "horizontal" | "vertical"; // Layout orientation
}
 
type ActionType =
  | "show"
  | "edit"
  | "quick-edit"
  | "inline-edit"
  | "delete"
  | "quick-delete"
  | "duplicate"
  | "export"
  | "default-value";
 
interface ActionButtonConfig {
  type: ActionType;
  hidden?: boolean;
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void;
  href?: string;
  icon?: React.ReactNode;
  label?: string;
  variant?: "blue" | "edit" | "delete" | "green" | "destructive" | "ghost";
  tooltip?: string;
  className?: string;
  desktopOnly?: boolean;
  mobileOnly?: boolean;
}

Usage Examples

import { ActionButtons } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function UserTableRow({ user }: { user: any }) {
return (
<TableRow>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>
<ActionButtons
fqcn_bui={{Bundle: "user", Unit: "listing", Interface: "actions"}}
resource="users"
id={user.id}
user={currentUser}
view="listing"
actions={["show", "edit", "delete"]}
size="sm"
showTooltips={true}
/>
</TableCell>
</TableRow>
);
}

Tour & Onboarding Components

1. Tour (with CustomTooltip)

Guided tour component using react-joyride for user onboarding.

Props

interface TourProps {
  steps: TourStep[];                 // Tour steps configuration
  run: boolean;                      // Start/stop tour
  onComplete?: () => void;           // Tour completion callback
  continuous?: boolean;              // Auto-advance steps
  showSkipButton?: boolean;          // Show skip button
  locale?: string;                   // Locale for translations
}
 
interface TourStep {
  target: string;                    // CSS selector for target element
  content: string | React.ReactNode; // Step content
  title?: string;                    // Step title
  placement?: 'top' | 'bottom' | 'left' | 'right'; // Tooltip placement
  disableBeacon?: boolean;           // Hide beacon animation
}

Usage Example

import { Tour } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function OnboardingTour() {
  const [runTour, setRunTour] = useState(true);
 
  const tourSteps: TourStep[] = [
    {
      target: '.sidebar-menu',
      title: 'Navigation',
      content: 'Use the sidebar to navigate between different sections.',
      placement: 'right'
    },
    {
      target: '.add-button',
      title: 'Create New',
      content: 'Click here to add a new item.',
      placement: 'bottom'
    },
    {
      target: '.filter-section',
      title: 'Filters',
      content: 'Use filters to narrow down your search results.',
      placement: 'left'
    }
  ];
 
  return (
    <Tour
      steps={tourSteps}
      run={runTour}
      onComplete={() => setRunTour(false)}
      continuous={true}
      showSkipButton={true}
      locale="en"
    />
  );
}

2. InfoBadge

Displays informational badges with icons and tooltips.

Props

interface InfoBadgeProps {
  type: 'info' | 'warning' | 'error' | 'success'; // Badge type
  text?: string;                     // Badge text
  tooltip?: string;                  // Tooltip content
  icon?: React.ReactNode;            // Custom icon
  size?: 'sm' | 'md' | 'lg';        // Badge size
  className?: string;                // Custom CSS class
}

Usage Example

import { InfoBadge } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function EntityStatus({ status }: { status: string }) {
  return (
    <div className="flex items-center gap-2">
      <span>{status}</span>
      {status === 'pending' && (
        <InfoBadge
          type="warning"
          text="Pending"
          tooltip="This item is awaiting approval"
        />
      )}
      {status === 'active' && (
        <InfoBadge
          type="success"
          text="Active"
        />
      )}
    </div>
  );
}

1. DebugFooter

Footer component displaying debug information in development mode.

Props

interface DebugFooterProps {
  showInProduction?: boolean;        // Show in production (default: false)
  data?: Record<string, any>;        // Additional debug data
}

Usage Example

import { DebugFooter } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function PageLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {children}
      <DebugFooter
        data={{
          route: router.pathname,
          params: router.query,
          user: user?.id
        }}
      />
    </div>
  );
}

2. MetadataFooter

Footer component displaying entity metadata information.

Props

interface MetadataFooterProps {
  entity: EntityData;                // Entity data
  showTimestamps?: boolean;          // Show created/updated timestamps
  showUser?: boolean;                // Show created/updated by user
  locale?: string;                   // Locale for formatting
}

Usage Example

import { MetadataFooter } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function EntityDetailPage({ entity }: { entity: any }) {
  return (
    <div className="bg-white rounded-lg shadow">
      {/* Entity content */}
 
      <MetadataFooter
        entity={entity}
        showTimestamps={true}
        showUser={true}
        locale="en"
      />
    </div>
  );
}

Utility Components

1. DraggableDropdown

A dropdown component with drag-and-drop reordering capabilities.

Props

interface DraggableDropdownProps {
  items: DraggableItem[];
  onReorder: (items: DraggableItem[]) => void;
  onItemToggle: (itemId: string, visible: boolean) => void;
  placeholder?: string;
  maxHeight?: string;
  searchable?: boolean;
}
 
interface DraggableItem {
  id: string;
  label: string;
  visible: boolean;
  disabled?: boolean;
  icon?: React.ReactNode;
}

Usage Example

import { DraggableDropdown } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function ColumnManager() {
  const [columns, setColumns] = useState<DraggableItem[]>([
    { id: "name", label: "Name", visible: true },
    { id: "email", label: "Email", visible: true },
    { id: "status", label: "Status", visible: false },
    { id: "created_at", label: "Created Date", visible: true },
  ]);
 
  const handleReorder = (reorderedItems: DraggableItem[]) => {
    setColumns(reorderedItems);
    // Save to backend or local storage
  };
 
  const handleToggle = (itemId: string, visible: boolean) => {
    setColumns((prev) =>
      prev.map((item) => (item.id === itemId ? { ...item, visible } : item))
    );
  };
 
  return (
    <div className="w-64">
      <label className="block text-sm font-medium mb-2">Manage Columns</label>
      <DraggableDropdown
        items={columns}
        onReorder={handleReorder}
        onItemToggle={handleToggle}
        placeholder="Search columns..."
        searchable={true}
        maxHeight="300px"
      />
    </div>
  );
}

2. QueryString Components

Components for managing URL query parameters and filters.

Usage Example

import { QueryString } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function FilterDisplay() {
  return (
    <div className="mb-4">
      <QueryString
        showCopyButton={true}
        showClearButton={true}
        onClear={() => {
          // Clear all filters
          router.push(pathname);
        }}
        onCopy={(queryString) => {
          navigator.clipboard.writeText(queryString);
          toast.success("Query string copied!");
        }}
      />
    </div>
  );
}

3. AdminFooter

Footer component for admin interfaces with links and information.

Usage Example

import { AdminFooter } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen flex flex-col">
      <main className="flex-1">{children}</main>
 
      <AdminFooter
        version="2.24.0"
        links={[
          { label: "Documentation", href: "/docs" },
          { label: "Support", href: "/support" },
          { label: "API", href: "/api/docs" },
        ]}
        showVersion={true}
        showLinks={true}
      />
    </div>
  );
}

Best Practices

Navigation Design - Keep navigation consistent across all pages - Use

breadcrumbs for deep hierarchies - Implement proper loading states - Ensure mobile responsiveness

Performance Considerations - Lazy load heavy metadata components -

Implement proper memoization for action buttons - Use virtualization for large dropdown lists - Optimize sidebar rendering with proper state management

Complete Integration Example

Here’s how to integrate all additional components into a complete admin interface:

import {
  Navbar,
  SidebarMenu,
  ActionButtons,
  Sidebox,
  AdminFooter,
  DraggableDropdown,
} from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function AdminInterface({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
 
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation */}
      <Navbar
        fqcn_bui={{ Bundle: "admin", Unit: "main", Interface: "navbar" }}
        sidebarMenu={true}
        setSidebarOpen={setSidebarOpen}
        user={user}
        login={loginTracker}
        initialLogin={initialLoginTracker}
        entityList={entityList}
        tenant={tenant}
      />
 
      {/* Sidebar */}
      <SidebarMenu
        fqcn_bui={{ Bundle: "admin", Unit: "main", Interface: "sidebar" }}
        isOpen={sidebarOpen}
        onClose={() => setSidebarOpen(false)}
        menuItems={menuItems}
        user={user}
      />
 
      {/* Main Content */}
      <div className="lg:pl-64 pt-16">
        <main className="p-6">{children}</main>
 
        {/* Footer */}
        <AdminFooter />
      </div>
    </div>
  );
}

This comprehensive guide covers all the additional components that enhance the CRUD bundle, providing navigation, metadata management, and utility functionality for building complete admin interfaces.

Last updated on
CRUDContext Providers