ikoncomponents 1.4.8 → 1.5.0

package/templates/default/ikoncomponents/twolevel-dropdown/index.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import * as React from "react";
+import { ChevronsUpDown } from "lucide-react";
+
+import { cn } from "../../utils/cn";
+import { Button } from "../../ikonShade/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../ikonShade/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ikonShade/popover";
+
+export interface FrameworkEntry {
+  id: string;
+  index: string;
+  title: string;
+  description: string;
+  parentId: string | null;
+  treatAsParent: boolean;
+}
+
+export interface TreeNode extends FrameworkEntry {
+  level: number;
+}
+
+export interface ParentEntry extends FrameworkEntry {
+  childrenArray: string[];
+}
+
+export interface ProcessedFrameworkData {
+  flatTree: TreeNode[];
+  itemMap: Record<string, { parentId: string | null; childrenIds: string[] }>;
+}
+
+interface FrameworkItemDropdownProps {
+  processedData: ProcessedFrameworkData;
+  value: string[];
+  onChange: (newSelection: string[]) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+export function FrameworkItemDropdown({
+  processedData,
+  value,
+  onChange,
+  placeholder = "Select items...",
+  searchPlaceholder = "Search...",
+  className,
+}: FrameworkItemDropdownProps) {
+  const [open, setOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState("");
+
+  const { flatTree, itemMap } = processedData;
+
+  const selectionState = React.useMemo(() => {
+    const state = new Map<string, "checked" | "indeterminate">();
+    const selectedSet = new Set(value);
+
+    [...flatTree].reverse().forEach((item) => {
+      const nodeInfo = itemMap[item.id];
+      if (
+        !nodeInfo ||
+        !item.treatAsParent ||
+        nodeInfo.childrenIds.length === 0
+      ) {
+        if (selectedSet.has(item.id)) {
+          state.set(item.id, "checked");
+        }
+      } else {
+        const childStates = nodeInfo.childrenIds.map((childId) =>
+          state.get(childId)
+        );
+        const checkedCount = childStates.filter((s) => s === "checked").length;
+        const indeterminateCount = childStates.filter(
+          (s) => s === "indeterminate"
+        ).length;
+
+        if (checkedCount === nodeInfo.childrenIds.length) {
+          state.set(item.id, "checked");
+        } else if (checkedCount > 0 || indeterminateCount > 0) {
+          state.set(item.id, "indeterminate");
+        }
+      }
+    });
+
+    return state;
+  }, [value, flatTree, itemMap]);
+
+  const handleSelect = (item: TreeNode) => {
+    const newSelectedIds = new Set(value);
+    const currentState = selectionState.get(item.id);
+    const shouldBeChecked = !(
+      currentState === "checked" || currentState === "indeterminate"
+    );
+
+    const descendants = new Set<string>();
+    const queue: string[] = [...(itemMap[item.id]?.childrenIds || [])];
+
+    while (queue.length > 0) {
+      const currentId = queue.shift()!;
+      descendants.add(currentId);
+      const children = itemMap[currentId]?.childrenIds || [];
+      children.forEach((childId) => queue.push(childId));
+    }
+
+    if (shouldBeChecked) {
+      newSelectedIds.add(item.id);
+      descendants.forEach((id) => newSelectedIds.add(id));
+    } else {
+      newSelectedIds.delete(item.id);
+      descendants.forEach((id) => newSelectedIds.delete(id));
+    }
+
+    let parentId = itemMap[item.id]?.parentId;
+    while (parentId) {
+      const parentInfo = itemMap[parentId];
+      if (parentInfo && parentInfo.childrenIds.length > 0) {
+        const areAllChildrenSelected = parentInfo.childrenIds.every((childId) =>
+          newSelectedIds.has(childId)
+        );
+        if (areAllChildrenSelected) {
+          newSelectedIds.add(parentId);
+        } else {
+          newSelectedIds.delete(parentId);
+        }
+      }
+      parentId = parentInfo?.parentId;
+    }
+
+    onChange(Array.from(newSelectedIds));
+  };
+
+  const filteredItems = React.useMemo(() => {
+    if (!searchQuery) return flatTree.slice(); // Always return a new array in original order
+
+    const lowercasedQuery = searchQuery.toLowerCase();
+    const matchedIds = new Set<string>();
+
+    // Step 1: collect directly matched items
+    flatTree.forEach((item) => {
+      const matches =
+        item.title.toLowerCase().includes(lowercasedQuery) ||
+        item.description.toLowerCase().includes(lowercasedQuery) ||
+        item.index.toLowerCase().includes(lowercasedQuery);
+
+      if (matches) {
+        matchedIds.add(item.id);
+      }
+    });
+
+    // Step 2: collect ancestors and descendants
+    const expandedIds = new Set(matchedIds);
+
+    const addAncestors = (id: string) => {
+      let current = id;
+      while (current) {
+        const parentId = itemMap[current]?.parentId;
+        if (parentId && !expandedIds.has(parentId)) {
+          expandedIds.add(parentId);
+          current = parentId;
+        } else {
+          break;
+        }
+      }
+    };
+
+    const addDescendants = (id: string) => {
+      const children = itemMap[id]?.childrenIds || [];
+      for (const childId of children) {
+        if (!expandedIds.has(childId)) {
+          expandedIds.add(childId);
+          addDescendants(childId);
+        }
+      }
+    };
+
+    matchedIds.forEach((id) => {
+      addAncestors(id);
+      addDescendants(id);
+    });
+
+    // Step 3: Return nodes in the original flatTree order, but only those in expandedIds
+    return flatTree.filter((node) => expandedIds.has(node.id));
+  }, [searchQuery, flatTree, itemMap]);
+
+  const getSelectedLabel = () => {
+    const leafNodeIds = value.filter((id) => {
+      const nodeInfo = itemMap[id];
+      return !nodeInfo || nodeInfo.childrenIds.length === 0;
+    });
+
+    if (leafNodeIds.length === 0) {
+      return <span className="text-muted-foreground">{placeholder}</span>;
+    }
+
+    if (leafNodeIds.length === 1) {
+      const item = flatTree.find((i) => i.id === leafNodeIds[0]);
+      return item ? item.index : placeholder;
+    }
+
+    return `${leafNodeIds.length} items selected`;
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "w-full justify-between transition-all duration-150 ease-in-out border hover:border-primary hover:shadow-sm bg-secondary cursor-pointer",
+            className
+          )}
+        >
+          <span className="truncate">{getSelectedLabel()}</span>
+          <ChevronsUpDown
+            className={cn(
+              "ml-2 h-4 w-4 shrink-0 transition-transform duration-200",
+              open && "rotate-180"
+            )}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0 max-h-[400px] overflow-y-auto">
+        <Command>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onValueChange={setSearchQuery}
+          />
+          <CommandList className="transition-all duration-200 ease-in-out">
+            <CommandEmpty>No results found.</CommandEmpty>
+
+            {filteredItems.map((item) => (
+              <CommandItem
+                key={item.id}
+                value={`${item.index} ${item.title} ${item.description}`}
+                onSelect={() => handleSelect(item)}
+                className="flex items-start cursor-pointer gap-2"
+                style={{ paddingLeft: `${item.level * 1.5 + 0.75}rem` }}
+              >
+                <input
+                  type="checkbox"
+                  className="mt-1 h-4 w-4 accent-primary border rounded"
+                  checked={selectionState.get(item.id) === "checked"}
+                  ref={(el) => {
+                    if (el) {
+                      el.indeterminate =
+                        selectionState.get(item.id) === "indeterminate";
+                    }
+                  }}
+                  readOnly
+                />
+                <div className="flex flex-col">
+                  <div className="flex items-center space-x-2">
+                    <span className="text-xs font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                      {item.index}
+                    </span>
+                    <span className="font-medium">{item.title}</span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {item.description}
+                  </p>
+                </div>
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/templates/default/ikoncomponents/upload-tab/index.tsx

@@ -0,0 +1,237 @@
+"use client";
+import { useState, useEffect } from "react";
+import { UploadIcon, X, FileWarning, Send } from "lucide-react";
+import { Button } from "../../ikonShade/button";
+import { Input } from "../../ikonShade/input";
+import { Label } from "../../ikonShade/label";
+import { Progress } from "../../ikonShade/progress";
+import { useForm } from "react-hook-form";
+import axios from "axios";
+
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  FormDescription,
+} from "../../ikonShade/form";
+import { NoDataComponent } from "../no-data";
+
+interface Entry {
+  text: string;
+  fileNames: string[];
+}
+
+interface FileDetails {
+  name: string;
+  url: string;
+  progress: number;
+  file: File;
+}
+
+export function UploadTab() {
+  const form = useForm<Entry>({
+    defaultValues: {
+      text: "",
+      fileNames: [],
+    },
+  });
+
+  const [inputValue, setInputValue] = useState("");
+  const [texts, setTexts] = useState<Entry[]>([]);
+  const [fileNames, setFileNames] = useState<FileDetails[]>([]); // Updated type
+  const [formattedDate, setFormattedDate] = useState("");
+  const [noFilesUploaded, setNoFilesUploaded] = useState(true);
+
+  const isUploading = fileNames.some((file) => file.progress < 100);
+
+  const simulateFileUpload = async (idx: number, file: FileDetails) => {
+    const formData = new FormData();
+    formData.append("file", file.file); // Use the actual file object
+
+    try {
+      const response = await axios.post("UPLOAD_ENDPOINT_URL", formData, {
+        onUploadProgress: (progressEvent) => {
+          const progress = Math.round(
+            (progressEvent.loaded * 100) / (progressEvent.total || 1)
+          );
+          setFileNames((prev) =>
+            prev.map((f, i) => (i === idx ? { ...f, progress } : f))
+          );
+        },
+      });
+
+      setFileNames((prev) =>
+        prev.map((f, i) =>
+          i === idx ? { ...f, url: response.data.url, progress: 100 } : f
+        )
+      );
+    } catch (error) {
+      console.error("Upload failed:", error);
+    }
+  };
+
+  useEffect(() => {
+    const currentDate = new Date();
+    const day = String(currentDate.getDate()).padStart(2, "0");
+    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+    const year = currentDate.getFullYear();
+
+    setFormattedDate(`${day}-${month}-${year}`);
+  }, []);
+
+  useEffect(() => {
+    fileNames.forEach((file, idx) => {
+      if (file.progress === 0) {
+        simulateFileUpload(idx, file);
+      }
+    });
+  }, [fileNames]);
+
+  const handleAddText = () => {
+    if (inputValue.trim() || fileNames.length > 0) {
+      const newEntry: Entry = {
+        text: inputValue.trim(),
+        fileNames: fileNames.map((file) => file.name),
+      };
+      setTexts([newEntry, ...texts]);
+      setInputValue("");
+      setFileNames([]);
+      setNoFilesUploaded(false);
+    }
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const uploadedFiles = Array.from(e.target.files).map((file) => ({
+        name: file.name,
+        url: "",
+        progress: 0,
+        file,
+      }));
+      setFileNames((prev) => [...prev, ...uploadedFiles]); // Type now matches correctly
+      setNoFilesUploaded(false);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    const updatedFiles = fileNames.filter((_, idx) => idx !== index);
+    setFileNames(updatedFiles);
+    if (updatedFiles.length === 0 && texts.length === 0) {
+      setNoFilesUploaded(true);
+    }
+  };
+
+
+
+  return (
+    <>
+      {/* Container for the text list */}
+      <div className="flex flex-col h-full w-full gap-3">
+        <div className="flex-grow overflow-auto flex flex-col-reverse gap-2">
+          {noFilesUploaded && <NoDataComponent text="No files uploaded" />}
+          {fileNames.length > 0 && (
+            <div className="p-2 my-1 rounded-md border">
+              <p className="font-bold">Selected Files:</p>
+              {fileNames.map((file, idx) => (
+                <div key={idx} className="flex flex-col mb-2">
+                  <div className="flex items-center justify-between">
+                    <a
+                      href={file.url}
+                      download={file.name}
+                      className="text-sm text-blue-600 underline cursor-pointer"
+                    >
+                      {file.name}
+                    </a>
+                    <button
+                      onClick={() => removeFile(idx)}
+                      className="text-red-500 hover:text-red-800"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  </div>
+                  <Progress value={file.progress} />
+                  <p className="text-xs text-gray-500">
+                    {file.progress}% uploaded
+                  </p>
+                </div>
+              ))}
+            </div>
+          )}
+          {texts.map((entry, index) => (
+            <div key={index} className="border-b text-sm pb-2">
+              {entry.fileNames.map((fileName, idx) => (
+                <p key={idx}>
+                  <a
+                    href={
+                      fileNames.find((file) => file.name === fileName)?.url ||
+                      "#"
+                    }
+                    download={fileName}
+                    className="text-sm text-blue-500 underline cursor-pointer"
+                  >
+                    {fileName}
+                  </a>
+                </p>
+              ))}
+              <p>{entry.text || "(No Text)"}</p>
+              <div className="flex justify-between">
+                <p>John Doe</p>
+                <p>{formattedDate}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(() => handleAddText())}>
+            <div className="flex flex-col">
+              <div className="flex items-center justify-center gap-2">
+                <div className="flex-1">
+                  <FormField
+                    name="text"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input
+                            id="text-input"
+                            type="text"
+                            value={inputValue}
+                            onChange={(e) => setInputValue(e.target.value)}
+                            placeholder="Type something..."
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <div className="flex items-center gap-2">
+                  <Label htmlFor="file-upload" className="sr-only">
+                    Upload Files
+                  </Label>
+                  <Button variant="outline" asChild>
+                    <label htmlFor="file-upload" className="cursor-pointer">
+                      <UploadIcon className="w-5 h-5" />
+                    </label>
+                  </Button>
+                  <Input
+                    id="file-upload"
+                    type="file"
+                    multiple
+                    onChange={handleFileUpload}
+                    className="hidden"
+                  />
+                </div>
+                <Button variant="outline" type="submit" disabled={isUploading}>
+                  <Send />
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Form>
+      </div>
+    </>
+  );
+}

package/templates/default/ikoncomponents/widgets/index.tsx

@@ -0,0 +1,81 @@
+'use client'
+import * as React from "react";
+import { WidgetsFunctionProps } from "./type";
+import { Icon } from "../icon";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ikonShade/tooltip";
+import { Button } from "../../ikonShade/button";
+
+export function Widgets({ widgetData }: WidgetsFunctionProps) {
+    const firstRowWidgets = widgetData.slice(0, 4);
+    const secondRowWidgets = widgetData.slice(4);
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="flex flex-col md:flex-row gap-2">
+                {firstRowWidgets.map((widget) => (
+                    <div className="flex flex-1 flex-row justify-between border rounded-md p-2 border-l-4 border-l-primary" key={widget.id}>
+                        <div className="flex flex-col">
+                            <TooltipProvider>
+                                <Tooltip>
+                                    <TooltipTrigger className="cursor-default select-text">
+                                        <p className="font-medium max-w-[240px] truncate">{widget.widgetText}</p>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <p>{widget.widgetText}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                            <div>
+                                {widget.onButtonClickfunc ?
+                                    <Button className="px-0" variant={"link"} onClick={() => widget.onButtonClickfunc?.({ id: widget.id })}>
+                                        {widget.widgetNumber}
+                                    </Button> :
+                                    <p className="inline-flex items-center justify-center px-0 py-2 text-sm font-medium border border-transparent rounded-md">
+                                        {widget.widgetNumber}
+                                    </p>
+                                }
+                            </div>
+                        </div>
+                        <div className="flex justify-end items-center">
+                            {widget.iconName && <Icon name={widget.iconName} />}
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {secondRowWidgets.length > 0 && (
+                <div className="flex flex-col md:flex-row gap-2">
+                    {secondRowWidgets.map((widget) => (
+                        <div className="flex flex-1 flex-row justify-between border rounded-md p-2 border-l-4 border-l-primary" key={widget.id}>
+                            <div className="flex flex-col">
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger className="cursor-default select-text">
+                                            <p className="font-medium max-w-[240px] truncate">{widget.widgetText}</p>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <p>{widget.widgetText}</p>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                                <div>
+                                    {widget.onButtonClickfunc ?
+                                        <Button className="px-0" variant={"link"} onClick={() => widget.onButtonClickfunc?.({ id: widget.id })}>
+                                            {widget.widgetNumber}
+                                        </Button> :
+                                        <p className="inline-flex items-center justify-center px-0 py-2 text-sm font-medium border border-transparent rounded-md">
+                                            {widget.widgetNumber}
+                                        </p>
+                                    }
+                                </div>
+                            </div>
+                            <div className="flex justify-end items-center">
+                                {widget.iconName && <Icon name={widget.iconName} />}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

package/templates/default/ikoncomponents/widgets/type.ts

@@ -0,0 +1,11 @@
+export interface WidgetProps {
+  id: string,
+  widgetText: string;
+  widgetNumber: string;
+  iconName?: string;
+  onButtonClickfunc?: (...params: (string | (Record<string, string>))[]) => void;
+};
+
+export interface WidgetsFunctionProps {
+  widgetData: WidgetProps[];
+}

package/templates/default/ikoncomponents/work-in-progress/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export function WorkInProgress() {
+    return (
+        <div className="flex h-full items-center justify-center">
+            <div className="bg-background text-forefround rounded-xl p-6 text-center max-w-md">
+                <div className="text-3xl font-bold mb-2 animate-pulse">
+                    🚧 Work in Progress
+                </div>
+                <p className="text-muted-foreground">
+                    We’re currently working on this section. Check back soon!
+                </p>
+            </div>
+        </div>
+    );
+}