ikoncomponents 1.4.7 → 1.4.9

package/templates/default/ikoncomponents/action-menu/index.tsx

@@ -0,0 +1,108 @@
+"use client";
+import * as React from "react";
+import { Button } from "../../ikonShade/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../../ikonShade/dropdown-menu";
+import { MoreHorizontal } from "lucide-react";
+import type { ActionMenuProps, ExtraActionParams } from "./type";
+import { IconButtonWithTooltip } from "../buttons";
+
+export function ActionMenu({
+  actionMenus,
+  extraActionParams,
+}: {
+  actionMenus: ActionMenuProps[];
+  extraActionParams?: ExtraActionParams;
+}) {
+  const renderMenuItems = (items: ActionMenuProps[]) => {
+    items = items.filter((item) => {
+      // biome-ignore lint/complexity/useOptionalChain: <explanation>
+      return (item?.visibility === undefined || item.visibility === true || (item.visibility && item.visibility(...(extraActionParams?.arguments || []))))
+    })
+    if (items.length === 0) {
+      return <DropdownMenuItem className="text-center">No action available.</DropdownMenuItem>
+    }
+    return items.map((item, index) => {
+      if (item.type === "label") {
+        return <DropdownMenuLabel key={index}>{String(item.label)}</DropdownMenuLabel>;
+      }
+
+      if (item.type === "separator") {
+        return <DropdownMenuSeparator key={index} />;
+      }
+
+      if (item.type === "group" && item.items) {
+        return (
+          <DropdownMenuGroup key={index}>
+            {renderMenuItems(item.items)}
+          </DropdownMenuGroup>
+        );
+      }
+
+      if (item.items) {
+        return (
+          <DropdownMenuSub key={index}>
+            <DropdownMenuSubTrigger>{String(item.label)}</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                {renderMenuItems(item.items)}
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+        );
+      }
+
+      let labelContent = "";
+      if (typeof item.label === "function") {
+        labelContent = item.label(...(extraActionParams?.arguments || []));
+      } else {
+        labelContent = item.label;
+      }
+      return (
+
+        <DropdownMenuItem
+          key={index}
+          disabled={item.disabled}
+          onClick={() =>
+            // biome-ignore lint/complexity/useOptionalChain: <explanation>
+            item.onClick &&
+            item.onClick(...(extraActionParams?.arguments || []))
+          }
+        >
+          {item.icon && <item.icon />}
+          {labelContent}
+          {/* {item.shortcut && <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>} */}
+        </DropdownMenuItem>
+      );
+    });
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <IconButtonWithTooltip
+          variant="ghost"
+          tooltipContent="Actions"
+          className="h-8 w-8 p-0 border-0 bg-transparent text-foreground keross:text-white elevation-0 shadow-none hover:bg-transparent"
+        >
+          <MoreHorizontal />
+        </IconButtonWithTooltip>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end">
+        {renderMenuItems(actionMenus)}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/templates/default/ikoncomponents/action-menu/type.ts

@@ -0,0 +1,18 @@
+import type { LucideProps } from "lucide-react";
+import type { ForwardRefExoticComponent, RefAttributes } from "react";
+
+export interface ActionMenuProps {
+  items?: ActionMenuProps[];
+  type?: "sub" | "group" | "separator" | "label" | null;
+  label: ((...args: any) => string) | string;
+  icon?: ForwardRefExoticComponent<
+    Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
+  >;
+  disabled?: boolean;
+  visibility?: ((...args: any) => boolean) | boolean;
+  onClick?: (...args: any) => void;
+}
+
+export interface ExtraActionParams {
+  arguments?: any[];
+}

package/templates/default/ikoncomponents/activity-sheet/index.tsx

@@ -0,0 +1,63 @@
+"use client"
+import React from "react";
+import { AlignJustify } from "lucide-react";
+import { TabArray } from "../tabs/type";
+import {CustomTabs} from "../tabs";
+import {NoDataComponent} from "../no-data";
+import {UploadTab} from "../upload-tab";
+import { SheetComponent } from "../sheet";
+
+export type ActivityLogProps = {
+  id: string;
+  activity: string;
+  updatedBy: string;
+  updatedOn: string;
+  source: string;
+  parentId: string;
+};
+
+export function ActivitySheet({ activityLogs = [] }: { activityLogs?: ActivityLogProps[] }) {
+
+  const tabArray: TabArray[] = [
+    {
+      tabName: "Activity",
+      tabId: "tab-activity",
+      default: true,
+      tabContent: <div className="overflow-auto flex flex-col gap-2 h-full">
+        {activityLogs.length > 0 ? (
+          activityLogs.map((log: any) => (
+            <div key={log.id} className="border-b text-sm pb-2">
+              <p className="font-medium pb-1">{log.activity}</p>
+              <p className="text-gray-500 pb-1">
+                Updated On:{" "}
+                <span className="text-gray-700">
+                  {new Date(log.updatedOn).toLocaleString()}
+                </span>
+              </p>
+              <p className="text-gray-500 pb-1">
+                {/* Updated By: <span className="text-gray-700">{userMap[log.updatedBy]?.userName || "n/a"}</span> */}
+                Updated By: <span className="text-gray-700">{log.updatedBy}</span>
+              </p>
+            </div>
+          ))
+        ) : (
+          <NoDataComponent text="No Activity Logs Available" />
+        )}
+      </div>
+    }, {
+      tabName: "File Upload",
+      tabId: "tab-upload",
+      default: false,
+      tabContent: <UploadTab />
+    }
+  ]
+  return (
+    <SheetComponent
+      buttonText=""
+      buttonIcon={<AlignJustify />}
+      sheetTitle=""
+      sheetContent={<CustomTabs tabArray={tabArray} tabListClass='' />}
+      closeButton={true}
+    />
+  );
+}

package/templates/default/ikoncomponents/alert-dialog/dialog-context.tsx

@@ -0,0 +1,65 @@
+'use client'
+import { createContext, useContext, useState, ReactNode } from "react"
+import { CustomAlertDialog } from ".";
+
+interface DialogContextProps {
+    openDialog: (options: DialogOptions) => void;
+    closeDialog: () => void;
+}
+
+interface DialogOptions {
+    title: string;
+    description: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onThird?: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    thirdOptionText?: string;
+    fontSize?: string;
+}
+
+const DialogContext = createContext<DialogContextProps | undefined>(undefined);
+
+export const useDialog = () => {
+    const context = useContext(DialogContext);
+    if (!context) {
+        throw new Error("useDialog must be used within a DialogProvider");
+    }
+    return context;
+};
+
+export const DialogProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [dialogOptions, setDialogOptions] = useState<DialogOptions | null>(null);
+
+    const openDialog = (options: DialogOptions) => setDialogOptions(options);
+    const closeDialog = () => setDialogOptions(null);
+
+    return (
+        <DialogContext.Provider value={{ openDialog, closeDialog }}>
+            {children}
+            {dialogOptions && (
+                <CustomAlertDialog
+                    title={dialogOptions.title}
+                    description={dialogOptions.description}
+                    fontSize={dialogOptions.fontSize || "text-base"}
+                    cancelText={dialogOptions.cancelText || ""}
+                    confirmText={dialogOptions.confirmText || ""}
+                    thirdOptionText={dialogOptions.thirdOptionText || ""}
+                    onConfirm={() => {
+                        if (dialogOptions.onConfirm) dialogOptions.onConfirm();
+                        closeDialog();
+                    }}
+                    onCancel={() => {
+                        if (dialogOptions.onCancel) dialogOptions.onCancel();
+                        closeDialog();
+                    }}
+                    onThird={() => {
+                        if (dialogOptions.onThird) dialogOptions.onThird();
+                        closeDialog();
+                    }}
+                />
+            )}
+        </DialogContext.Provider>
+    );
+};

package/templates/default/ikoncomponents/alert-dialog/index.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../ikonShade/alert-dialog";
+
+interface CustomAlertDialogProps {
+  title: string;
+  description?: string;
+  fontSize?: string; // Tailwind font size class, e.g., "text-sm", "text-lg"
+  cancelText?: string; // Custom text for the cancel button
+  confirmText?: string; // Custom text for the confirm button
+  thirdOptionText?: string; // Custom text for the third button
+  onCancel?: () => void; // Callback function for cancel action
+  onConfirm?: () => void; // Callback function for confirm action
+  onThird?: () => void;
+}
+
+export const CustomAlertDialog: React.FC<CustomAlertDialogProps> = ({
+  title,
+  description,
+  fontSize = "text-base",
+  cancelText = "", // Default cancel button text
+  confirmText = "", // Default confirm button text
+  thirdOptionText = "", // Default third button text
+  onCancel, // Optional callback for cancel action
+  onConfirm, // Optional callback for confirm action
+  onThird, // Optional callback for third action
+}) => {
+  return (
+    <AlertDialog open={true}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className={fontSize}>{title}</AlertDialogTitle>
+          <AlertDialogDescription className={fontSize}>
+            {description}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          {cancelText != "" && (
+            <AlertDialogCancel
+              onClick={() => {
+                if (onCancel) onCancel(); // Execute cancel callback if provided
+              }}
+            >
+              {cancelText}
+            </AlertDialogCancel>
+          )}
+          {thirdOptionText != "" && (
+            <AlertDialogAction
+              className="bg-blue-500"
+              color="black"
+              onClick={() => {
+                if (onThird) onThird(); // Execute confirm callback if provided
+              }}
+            >
+              {thirdOptionText}
+            </AlertDialogAction>
+          )}
+          {confirmText != "" && (
+            <AlertDialogAction
+              onClick={() => {
+                if (onConfirm) onConfirm(); // Execute confirm callback if provided
+              }}
+            >
+              {confirmText}
+            </AlertDialogAction>
+          )}
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+

package/templates/default/ikoncomponents/app-breadcrumb/BreadcrumbProvider.tsx

@@ -0,0 +1,68 @@
+"use client"
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+// Define the type for a breadcrumb item
+export interface BreadcrumbItemProps {
+  title: string;
+  href?: string;
+  level: number;
+}
+
+// Define the type for the context state
+interface BreadcrumbContextType {
+  breadcrumbItems: BreadcrumbItemProps[];
+  addBreadcrumb: (item: BreadcrumbItemProps) => void;
+  backBreadcrumb: (item: BreadcrumbItemProps) => void;
+  addBreadcrumbItems: (items: BreadcrumbItemProps[], isReplace?: boolean) => void;
+  clearBreadcrumb: () => void;
+}
+
+// Create the context with a default value
+const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(undefined);
+
+// Create a provider component
+export function BreadcrumbProvider({ children }: { children: ReactNode }) {
+  const [breadcrumbItems, setBreadcrumbItems] = useState<BreadcrumbItemProps[]>([]);
+  // Function to add a breadcrumb item
+  const addBreadcrumb = (item: BreadcrumbItemProps) => {
+    setBreadcrumbItems((prevItems) => {
+      const filterState = prevItems.filter((e) => e.level < item.level);
+      return [...filterState, item];
+    });
+  };
+
+  const addBreadcrumbItems = (items: BreadcrumbItemProps[], isReplace?: boolean) => {
+    if (isReplace) {
+      setBreadcrumbItems(items);
+    } else {
+      setBreadcrumbItems((prevItems) => [...prevItems, ...items]);
+    }
+  };
+
+  // Function to go back in the breadcrumb
+  const backBreadcrumb = (item: BreadcrumbItemProps) => {
+    setBreadcrumbItems((prevItems) => {
+      const filterState = prevItems.filter((e) => e.level <= item.level);
+      return [...filterState];
+    });
+  };
+
+  const clearBreadcrumb = () => {
+    setBreadcrumbItems([]);
+  };
+
+  return (
+    <BreadcrumbContext.Provider value={{ breadcrumbItems, addBreadcrumb, backBreadcrumb, addBreadcrumbItems, clearBreadcrumb }}>
+      {children}
+    </BreadcrumbContext.Provider>
+  );
+}
+
+// Custom hook to use the BreadcrumbContext
+export function useBreadcrumb() {
+  const context = useContext(BreadcrumbContext);
+  if (!context) {
+    throw new Error('useBreadcrumb must be used within a BreadcrumbProvider');
+  }
+  return context;
+}

package/templates/default/ikoncomponents/app-breadcrumb/index.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import Link from "next/link";
+
+import { Fragment, useEffect, useMemo, useState } from "react";
+import { redirect } from "next/navigation";
+import { BreadcrumbItemProps, useBreadcrumb } from "./BreadcrumbProvider";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../../ikonShade/breadcrumb";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../../ikonShade/drawer";
+import { Button } from "../../ikonShade/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ikonShade/dropdown-menu";
+import { useIsMobile } from "../../hooks/use-mobile";
+
+export function AppBreadcrumb() {
+  const { breadcrumbItems, backBreadcrumb } = useBreadcrumb();
+  const [open, setOpen] = useState(false);
+  const [itemToDisplay, setItemToDisplay] = useState<number>(2);
+  const isMobile = useIsMobile();
+  useEffect(() => {
+    if (isMobile) {
+      setItemToDisplay(2);
+    } else {
+      setItemToDisplay(4);
+    }
+  }, [isMobile]);
+
+  const breadcrumbObj = useMemo(() => {
+    return {
+      firstVisibleBreadcrumbList: breadcrumbItems.slice(0, 2),
+      hiddenBreadcrumbList: isMobile
+        ? breadcrumbItems.slice(2)
+        : breadcrumbItems.slice(2, itemToDisplay),
+      lastVisibleBreadcrumbList:
+        breadcrumbItems.length > 2
+          ? breadcrumbItems.slice(
+            2 -
+            (breadcrumbItems.length < itemToDisplay
+              ? breadcrumbItems.length
+              : itemToDisplay)
+          )
+          : [],
+    };
+  }, [breadcrumbItems, itemToDisplay, isMobile]);
+
+  if (!breadcrumbObj || isMobile == undefined || itemToDisplay == null) {
+    return null;
+  }
+  return (
+    <Breadcrumb key={"Breadcrumb1"}>
+      <BreadcrumbList key={"BreadcrumbList1"}>
+        {breadcrumbObj.firstVisibleBreadcrumbList.map(
+          (item: any, index: number) =>
+            index < breadcrumbItems.length - 1 ? (
+              <Fragment key={"first" + index}>
+                <BreadcrumbItem>
+                  {!item.href ? (
+                    <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
+                      {item.title}
+                    </BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink
+                      className="max-w-20 truncate md:max-w-none cursor-pointer"
+                      onClick={() => {
+                        backBreadcrumb(item);
+                        redirect(item.href);
+                      }}
+                    >
+                      {item.title}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+                <BreadcrumbSeparator key={"firstsep" + index} />
+              </Fragment>
+            ) : (
+              <BreadcrumbItem key={"first" + index}>
+                <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
+                  {item.title}
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+            )
+        )}
+
+        {breadcrumbItems.length > itemToDisplay ? (
+          <>
+            <BreadcrumbItem>
+              {!isMobile ? (
+                <DropdownMenu open={open} onOpenChange={setOpen}>
+                  <DropdownMenuTrigger
+                    className="flex items-center gap-1"
+                    aria-label="Toggle menu"
+                  >
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {breadcrumbObj.hiddenBreadcrumbList.map(
+                      (item: any, index: number) => (
+                        <DropdownMenuItem key={index}>
+                          {!item.href ? (
+                            <span>{item.title}</span>
+                          ) : (
+                            <Link href={item.href ? item.href : "#"}>
+                              {item.title}
+                            </Link>
+                          )}
+                        </DropdownMenuItem>
+                      )
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              ) : (
+                <Drawer open={open} onOpenChange={setOpen}>
+                  <DrawerTrigger aria-label="Toggle Menu">
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                  </DrawerTrigger>
+                  <DrawerContent>
+                    <DrawerHeader className="text-left">
+                      <DrawerTitle>Navigate to</DrawerTitle>
+                      <DrawerDescription>
+                        Select a page to navigate to.
+                      </DrawerDescription>
+                    </DrawerHeader>
+                    <div className="grid gap-1 px-2 lg:px-4">
+                      {breadcrumbObj.hiddenBreadcrumbList.map(
+                        (item: any, index: number) => (
+                          <div key={index}>
+                            {item.clickable == false ? (
+                              <span className="py-1 text-sm">{item.title}</span>
+                            ) : (
+                              <Link
+                                href={item.href ? item.href : "#"}
+                                className="py-1 text-sm"
+                              >
+                                {item.title}
+                              </Link>
+                            )}
+                          </div>
+                        )
+                      )}
+                    </div>
+                    <DrawerFooter className="pt-4">
+                      <DrawerClose asChild>
+                        <Button variant="outline">Close</Button>
+                      </DrawerClose>
+                    </DrawerFooter>
+                  </DrawerContent>
+                </Drawer>
+              )}
+            </BreadcrumbItem>
+            {!isMobile && <BreadcrumbSeparator />}
+          </>
+        ) : null}
+        {!isMobile &&
+          breadcrumbObj.lastVisibleBreadcrumbList.map(
+            (item: any, index: number) =>
+              index == breadcrumbObj.lastVisibleBreadcrumbList.length - 1 ? (
+                <BreadcrumbItem key={"last" + index}>
+                  <BreadcrumbPage className="max-w-20 truncate md:max-w-none cursor-pointer">
+                    {item.title}
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              ) : (
+                <Fragment key={"last" + index}>
+                  <BreadcrumbItem>
+                    {!item.href ? (
+                      <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
+                        {item.title}
+                      </BreadcrumbPage>
+                    ) : (
+                      <BreadcrumbLink
+                        className="max-w-20 truncate md:max-w-none cursor-pointer"
+                        onClick={() => {
+                          backBreadcrumb(item);
+                          redirect(item.href);
+                        }}
+                      >
+                        {item.title}
+                      </BreadcrumbLink>
+                    )}
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator key={"lastsep" + index} />
+                </Fragment>
+              )
+          )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
+
+export function RenderAppBreadcrumb({
+  breadcrumb,
+}: {
+  breadcrumb: BreadcrumbItemProps;
+}) {
+  const { addBreadcrumb } = useBreadcrumb();
+
+  useEffect(() => {
+    addBreadcrumb(breadcrumb);
+  }, [breadcrumb]);
+  return <></>;
+}

package/templates/default/ikoncomponents/big-calendar/big-calender-event/index.tsx

@@ -0,0 +1,38 @@
+import { Eye, SquarePen } from "lucide-react";
+import { BigCalendarEventProps, ExtraParamsEvent } from "../type";
+import { TooltipComponent as Tooltip } from "../../tooltip";
+
+// Custom event component
+export default function BigCalenderEvent({ event, extraParamsEvent }: { event: BigCalendarEventProps, extraParamsEvent?: ExtraParamsEvent }) {
+    return (
+        <div className="custom-event flex flex-row justify-between">
+            <span className="truncate w-auto">{event.title}</span>
+            <span className="flex flex-row gap-1">
+                {(extraParamsEvent?.isEditableAll || event.isEditable) &&
+                    <Tooltip tooltipContent="Edit">
+                        <button
+                            className="event-edit-button w-fit px-1"
+                            onClick={(e) => {
+                                e.stopPropagation(); // Prevent triggering other event handlers
+                                extraParamsEvent?.onEditEventClick?.(event);
+                            }}
+                        >
+                            <SquarePen size={16} />
+                        </button>
+                    </Tooltip>
+                }
+                <Tooltip tooltipContent="View">
+                    <button
+                        className="event-view-button w-fit px-1"
+                        onClick={(e) => {
+                            e.stopPropagation(); // Prevent triggering other event handlers
+                            extraParamsEvent?.onViewEventClick?.(event);
+                        }}
+                    >
+                        <Eye size={16} />
+                    </button>
+                </Tooltip>
+            </span>
+        </div>
+    );
+}