ikoncomponents 1.1.7 → 1.1.9

package/dist/ikoncomponents/main-layout/main-sidebar.d.ts

@@ -0,0 +1,27 @@
+export interface Account {
+    accountId: string;
+    accountName: string;
+    accountConfiguration: any | null;
+    accountDeleted: boolean;
+    active: boolean;
+    createdBy: string;
+    createdOn: string;
+    updatedBy: string;
+    updatedOn: string;
+}
+export interface Software {
+    softwareId: string;
+    softwareName: string;
+    softwareVersion: string;
+    softwareDescription: string;
+    accountId: string;
+    purchaseDate: string;
+    softwareOwnerId: string;
+    expiresOn: string | null;
+    active: boolean;
+    requestStatus: string | null;
+    softwareVisibility: 'PUBLIC' | 'PRIVATE' | 'RESTRICTED';
+}
+export declare const MainSidebar: ({ baseUrl }: {
+    baseUrl: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/main-layout/main-sidebar.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Check, Clock, FolderCode, Heart, Home, LogOut, Settings } from 'lucide-react';
+import { Button } from '../../shadcn/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../shadcn/tooltip';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../shadcn/dropdown-menu';
+import { Avatar, AvatarFallback, AvatarImage } from '../../shadcn/avatar';
+import { getValidAccessToken } from '../../utils/token-management';
+import { clearAllCookieSession } from '../../utils/session/cookieSession';
+import axios from 'axios';
+import { redirect } from 'next/navigation';
+import Link from 'next/link';
+export const MainSidebar = ({ baseUrl }) => {
+    const user = {
+        name: "Username",
+        email: "User email",
+        role: "Role",
+        avatar: ""
+    };
+    const [accounts, setAccounts] = React.useState([]);
+    const [selectedAccount, setSelectedAccount] = React.useState();
+    const [softwares, setSoftwares] = React.useState([]);
+    const getInitials = (name) => {
+        return name
+            .split(' ')
+            .map(word => word[0])
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+    };
+    React.useEffect(() => {
+        const fetchAccounts = async () => {
+            try {
+                const accessToken = await getValidAccessToken();
+                const response = await axios.get(`${baseUrl}/platform/account/all`, {
+                    headers: {
+                        Authorization: `Bearer ${accessToken}`,
+                    },
+                });
+                setAccounts(response.data);
+                setSelectedAccount(response.data[0]);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        };
+        const fetchSubscribedSoftwares = async () => {
+            try {
+                const accessToken = await getValidAccessToken();
+                const response = await axios.get(`${baseUrl}/platform/software-subscription/account`, {
+                    headers: {
+                        Authorization: `Bearer ${accessToken}`,
+                    },
+                });
+                setSoftwares(response.data);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        };
+        fetchAccounts();
+        fetchSubscribedSoftwares();
+    }, []);
+    return (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs("aside", { className: "fixed left-0 top-0 z-20 h-screen w-12 border-r border-border bg-sidebar text-sidebar-foreground flex flex-col items-center py-4 ", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "default", className: "mb-4 h-8 w-8 rounded-lg p-0", disabled: !selectedAccount, children: _jsx("span", { className: "text-base font-medium text-accent-foreground", children: selectedAccount ? getInitials(selectedAccount.accountName) : '...' }) }) }), _jsxs(DropdownMenuContent, { className: "w-55", side: "right", sideOffset: 8, align: "start", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-foreground", children: "Accounts" }), accounts.map((account) => (_jsxs(DropdownMenuItem, { className: "flex items-center justify-between cursor-pointer", onClick: () => {
+                                        setSelectedAccount(account);
+                                    }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded bg-primary/10 flex items-center justify-center", children: _jsx("span", { className: "text-xs font-medium text-primary", children: getInitials(account.accountName) }) }), _jsx("span", { className: "text-sm", children: account.accountName })] }), (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.accountId) === account.accountId && (_jsx(Check, { className: "h-4 w-4 text-primary" }))] }, account.accountId)))] })] }), _jsx("nav", { className: "flex flex-col gap-2", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: 'h-5 w-5', children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: "/", children: [_jsx(Home, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Home" })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Home" })] }, "home") }), _jsx("nav", { className: "flex flex-col gap-2 flex-1", children: softwares.map((software) => {
+                        const Icon = FolderCode;
+                        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: 'h-5 w-5', children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: "/", children: [_jsx(Icon, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: software.softwareName })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: software.softwareName })] }, software.softwareName));
+                    }) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: 'h-5 w-5', children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: "/last-visited", children: [_jsx(Clock, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Last Visited" })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Last Visited" })] }, "last-visited"), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: 'h-5 w-5', children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: "/favourites", children: [_jsx(Heart, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Favourites" })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Favourites" })] }, "favourites"), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: 'h-5 w-5', children: _jsx(Button, { variant: "ghost", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: "/settings", children: [_jsx(Settings, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Settings" })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Settings" })] }, "settings"), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10 rounded-full", children: _jsxs(Avatar, { className: "h-8 w-8", children: [_jsx(AvatarImage, { src: user.avatar, alt: user.name }), _jsx(AvatarFallback, { className: "text-sm font-semibold", children: user.name.split(' ').map(n => n[0]).join('') })] }) }) }), _jsxs(DropdownMenuContent, { className: "w-55 p-0", side: 'right', sideOffset: 8, children: [_jsxs("div", { className: "flex items-start gap-3 p-4 bg-card", children: [_jsxs(Avatar, { className: "h-10 w-10 mt-1", children: [_jsx(AvatarImage, { src: user.avatar, alt: user.name }), _jsx(AvatarFallback, { className: "", children: user.name.split(' ').map(n => n[0]).join('') })] }), _jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-bold text-foreground blue-dark:text-muted-foreground truncate", children: user.name }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: user.email }), _jsx("p", { className: "text-sm text-muted-foreground font-semibold", children: user.role })] })] }), _jsx(DropdownMenuSeparator, { className: "my-0" }), _jsxs(DropdownMenuItem, { onClick: async () => {
+                                        await clearAllCookieSession();
+                                        redirect("/login.html");
+                                    }, className: "flex items-center gap-2 px-4 py-3 cursor-pointer focus:bg-destructive dark:focus:bg-destructive blue-dark:focus:bg-destructive", children: [_jsx(LogOut, { className: "h-4 w-4 text-foreground" }), _jsx("span", { children: "Log out" })] })] })] })] }) }));
+};

package/dist/ikoncomponents/main-layout/nav-main.d.ts

@@ -0,0 +1,8 @@
+import { SidebarNavItem } from "./SidebarNavContext";
+export declare function NavMain(): import("react/jsx-runtime").JSX.Element | null;
+export declare function RenderSidebarNav({ items }: {
+    items: SidebarNavItem[];
+}): null;
+export declare function AddSidebarNav({ item }: {
+    item: SidebarNavItem;
+}): null;

package/dist/ikoncomponents/main-layout/nav-main.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { ChevronRight } from "lucide-react";
+import { SidebarGroup, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "../../shadcn/sidebar";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../shadcn/collapsible";
+import Link from "next/link";
+import { useSidebarNav } from "./SidebarNavContext";
+export function NavMain() {
+    const { navItems } = useSidebarNav();
+    if (!navItems || navItems.length === 0) {
+        return null;
+    }
+    return (_jsx(SidebarGroup, { children: _jsx(SidebarMenu, { children: navItems.map((item) => item.items && item.items.length > 0 ? (_jsx(Collapsible, { asChild: true, defaultOpen: item.isActive, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { tooltip: item.title, children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: item.items.map((subItem) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { asChild: true, children: _jsx(Link, { href: subItem.url, children: _jsx("span", { children: subItem.title }) }) }) }, subItem.title))) }) })] }) }, item.title)) : (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, children: _jsxs(Link, { href: item.url, className: "flex items-center gap-2 w-full", children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }) }, item.title))) }) }));
+}
+// Helper component to set nav items from pages
+export function RenderSidebarNav({ items }) {
+    const { setNavItems } = useSidebarNav();
+    useEffect(() => {
+        setNavItems(items);
+    }, [items, setNavItems]);
+    return null;
+}
+// Helper component to add a single nav item
+export function AddSidebarNav({ item }) {
+    const { addNavItem } = useSidebarNav();
+    useEffect(() => {
+        addNavItem(item);
+    }, [item, addNavItem]);
+    return null;
+}

package/dist/ikoncomponents/resource/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ResourceTableProps {
+    resourceDataWithAllocation: any[];
+    userMaps: {
+        userDetailsMap: {
+            [key: string]: {
+                name: string;
+            };
+        };
+        rolesMap: {
+            [key: string]: {
+                roleId: string;
+                roleName: string;
+            };
+        };
+    };
+    monthsRange: string[];
+}
+export declare const ResourceTable: React.FC<ResourceTableProps>;

package/dist/ikoncomponents/resource/index.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-hooks/preserve-manual-memoization */
+import React, { useMemo } from 'react';
+import { Button } from "../../shadcn/button";
+import { Plus, Trash2 } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../shadcn/select";
+import { Input } from "../../shadcn/input";
+import { DataTable } from '../data-table';
+export const ResourceTable = ({ resourceDataWithAllocation, userMaps, monthsRange, }) => {
+    const [data, setData] = React.useState(resourceDataWithAllocation);
+    const calculateTotalFTE = (row) => {
+        if (!row.detailedAllocation)
+            return 0;
+        return Object.values(row.detailedAllocation).reduce((sum, value) => sum + (parseFloat(value) || 0), 0);
+    };
+    const handleAddResource = (taskId) => {
+        var _a;
+        const newResource = {
+            id: `new-${Date.now()}`,
+            taskId,
+            taskName: ((_a = data.find(r => r.taskId === taskId)) === null || _a === void 0 ? void 0 : _a.taskName) || '',
+            userId: '',
+            roleId: '',
+            detailedAllocation: monthsRange.reduce((acc, month) => (Object.assign(Object.assign({}, acc), { [month]: 0 })), {}),
+        };
+        setData([...data, newResource]);
+    };
+    const handleDeleteResource = (resourceId) => {
+        setData(data.filter(resource => resource.id !== resourceId));
+    };
+    const handleUpdateAllocation = (resourceId, month, value) => {
+        setData(data.map(resource => {
+            if (resource.id === resourceId) {
+                return Object.assign(Object.assign({}, resource), { detailedAllocation: Object.assign(Object.assign({}, resource.detailedAllocation), { [month]: parseFloat(value) || 0 }) });
+            }
+            return resource;
+        }));
+    };
+    const columns = useMemo(() => [
+        {
+            accessorKey: "taskName",
+            header: "Task Name",
+            cell: ({ row }) => row.original.taskName,
+        },
+        {
+            accessorKey: "userId",
+            header: "Employee Name",
+            cell: ({ row }) => {
+                var _a;
+                return (_jsxs(Select, { value: row.original.userId, onValueChange: (value) => {
+                        setData(data.map(resource => resource.id === row.original.id
+                            ? Object.assign(Object.assign({}, resource), { userId: value }) : resource));
+                    }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select employee", children: ((_a = userMaps.userDetailsMap[row.original.userId]) === null || _a === void 0 ? void 0 : _a.name) || "Select employee" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.userDetailsMap).map(([id, user]) => (_jsx(SelectItem, { value: id, children: user.name }, id))) })] }));
+            },
+        },
+        {
+            accessorKey: "roleId",
+            header: "Role",
+            cell: ({ row }) => {
+                var _a;
+                return (_jsxs(Select, { value: row.original.roleId, onValueChange: (value) => {
+                        setData(data.map(resource => resource.id === row.original.id
+                            ? Object.assign(Object.assign({}, resource), { roleId: value }) : resource));
+                    }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select role", children: ((_a = userMaps.rolesMap[row.original.roleId]) === null || _a === void 0 ? void 0 : _a.roleName) || "Select role" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.rolesMap).map(([id, role]) => (_jsx(SelectItem, { value: id, children: role.roleName }, id))) })] }));
+            },
+        },
+        {
+            accessorKey: "totalFTE",
+            header: "Total FTE",
+            cell: ({ row }) => calculateTotalFTE(row.original).toFixed(2),
+        },
+        ...monthsRange.map(month => ({
+            accessorKey: `detailedAllocation.${month}`,
+            header: month.replace('_', ' '),
+            cell: ({ row }) => (_jsx(Input, { type: "number", min: "0", max: "1", step: "0.1", value: row.original.detailedAllocation[month] || 0, onChange: (e) => handleUpdateAllocation(row.original.id, month, e.target.value), className: "w-20" })),
+        })),
+        {
+            id: "actions",
+            cell: ({ row }) => (_jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleAddResource(row.original.taskId), children: _jsx(Plus, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleDeleteResource(row.original.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })),
+        },
+    ], [data, monthsRange, userMaps]);
+    return (_jsx(DataTable, { columns: columns, data: data, extraParams: {
+            defaultGroups: ["taskName"],
+            grouping: true,
+            sorting: true,
+            header: true,
+            paginationBar: true,
+        } }));
+};

package/dist/ikoncomponents/skeleton-loader/skeleton-table.d.ts

@@ -0,0 +1,5 @@
+export interface GradeTableLoaderProps {
+    rowCount?: number;
+    showToolbar?: boolean;
+}
+export declare function GradeTableLoader({ rowCount, showToolbar, }: GradeTableLoaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/skeleton-loader/skeleton-table.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "../../shadcn/skeleton";
+export function GradeTableLoader({ rowCount = 6, showToolbar = true, }) {
+    return (_jsxs("div", { className: "space-y-4", children: [showToolbar && (_jsxs("div", { className: "flex justify-between", children: [_jsx(Skeleton, { className: "h-8 w-64 rounded-md" }), _jsx(Skeleton, { className: "h-8 w-32 rounded-md" })] })), _jsx("div", { className: "space-y-4", children: [...Array(rowCount)].map((_, i) => (_jsx("div", { className: "grid gap-4 items-center", children: _jsx(Skeleton, { className: "h-8 w-full" }) }, i))) })] }));
+}

package/dist/ikoncomponents/skeleton-loader/skeleton-widget.d.ts

@@ -0,0 +1,3 @@
+export declare function SkeletonWidget({ count }: {
+    count: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/skeleton-loader/skeleton-widget.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../../shadcn/skeleton";
+export function SkeletonWidget({ count }) {
+    return (_jsx("div", { className: 'flex flex-row gap-3 w-full', children: count > 0 && Array.from({ length: count }).map((_, index) => (_jsx(Skeleton, { className: "w-1/" + count + " flex flex-col md:flex-row gap-2 h-20", children: _jsx("div", { className: "flex flex-1 flex-row justify-between border rounded-md p-2 bg-card-new" }) }, 'widget_' + index))) }));
+}

package/dist/ikoncomponents/theme-toggle-btn/index.d.ts

@@ -1 +1 @@
-export declare function ThemeToggleBtn(): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeToggleBtn(): import("react/jsx-runtime").JSX.Element | null;

package/dist/ikoncomponents/theme-toggle-btn/index.js

@@ -1,10 +1,118 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Waves, Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
+import { useEffect, useState, useCallback } from "react";
+import { Laptop, Moon, Sun, Check, Waves } from "lucide-react";
 import { Button } from "../../shadcn/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
 export function ThemeToggleBtn() {
-    const { theme, setTheme } = useTheme();
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", children: [theme === "light" && (_jsx(Sun, { className: "h-[1.2rem] w-[1.2rem] transition-all" })), theme === "dark" && (_jsx(Moon, { className: "h-[1.2rem] w-[1.2rem] transition-all" })), theme === "keross" && (_jsx(Waves, { className: "h-[1.2rem] w-[1.2rem] transition-all" })), _jsx("span", { className: "sr-only", children: "Toggle theme" })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setTheme("light"), children: "Light" }), _jsx(DropdownMenuItem, { onClick: () => setTheme("dark"), children: "Dark" }), _jsx(DropdownMenuItem, { onClick: () => setTheme("keross"), children: "Keross" })] })] }));
+    const { setTheme, theme, resolvedTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const activeTheme = theme === "system" ? resolvedTheme : theme;
+    const getLuminance = (hexColor) => {
+        const rgb = parseInt(hexColor.slice(1), 16);
+        const r = (rgb >> 16) & 0xff;
+        const g = (rgb >> 8) & 0xff;
+        const b = (rgb >> 0) & 0xff;
+        const [rs, gs, bs] = [r, g, b].map(c => {
+            c = c / 255;
+            return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        });
+        return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+    };
+    const getContrastColor = (bgColor) => {
+        const luminance = getLuminance(bgColor);
+        return luminance > 0.25 ? '#000000' : '#ffffff';
+    };
+    const applySavedColors = useCallback(() => {
+        const primaryColor = localStorage.getItem("primary") || '#0f172b';
+        const secondaryColor = localStorage.getItem("secondary") || '#1b2336';
+        const tertiaryColor = localStorage.getItem("tertiary") || '#010416';
+        const pChartColor = localStorage.getItem("primaryChart") || '#00bc7d';
+        const sChartColor = localStorage.getItem("secondaryChart") || '#fd9a00';
+        const tChartColor = localStorage.getItem("tertiaryChart") || '#ad46ff';
+        document.documentElement.style.setProperty('--background', primaryColor);
+        document.documentElement.style.setProperty('--secondary', secondaryColor);
+        document.documentElement.style.setProperty('--card', secondaryColor);
+        document.documentElement.style.setProperty('--popover', secondaryColor);
+        document.documentElement.style.setProperty('--muted', secondaryColor);
+        document.documentElement.style.setProperty('--sidebar', secondaryColor);
+        document.documentElement.style.setProperty('--btn-secondary', secondaryColor);
+        document.documentElement.style.setProperty('--accent', tertiaryColor);
+        document.documentElement.style.setProperty('--sidebar-primary', tertiaryColor);
+        document.documentElement.style.setProperty('--sidebar-accent', tertiaryColor);
+        document.documentElement.style.setProperty('--foreground', getContrastColor(primaryColor));
+        document.documentElement.style.setProperty('--secondary-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--card-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--popover-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--muted-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--sidebar-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--accent-foreground', getContrastColor(tertiaryColor));
+        document.documentElement.style.setProperty('--sidebar-primary-foreground', getContrastColor(tertiaryColor));
+        document.documentElement.style.setProperty('--sidebar-accent-foreground', getContrastColor(tertiaryColor));
+        document.documentElement.style.setProperty('--chart-1', pChartColor);
+        document.documentElement.style.setProperty('--chart-2', sChartColor);
+        document.documentElement.style.setProperty('--chart-3', tChartColor);
+        document.documentElement.style.setProperty('--chart-4', pChartColor);
+        document.documentElement.style.setProperty('--chart-5', sChartColor);
+    }, []);
+    const resetColors = useCallback(() => {
+        document.documentElement.style.removeProperty('--background');
+        document.documentElement.style.removeProperty('--secondary');
+        document.documentElement.style.removeProperty('--card');
+        document.documentElement.style.removeProperty('--popover');
+        document.documentElement.style.removeProperty('--muted');
+        document.documentElement.style.removeProperty('--sidebar');
+        document.documentElement.style.removeProperty('--btn-secondary');
+        document.documentElement.style.removeProperty('--accent');
+        document.documentElement.style.removeProperty('--sidebar-primary');
+        document.documentElement.style.removeProperty('--sidebar-accent');
+        document.documentElement.style.removeProperty('--foreground');
+        document.documentElement.style.removeProperty('--secondary-foreground');
+        document.documentElement.style.removeProperty('--card-foreground');
+        document.documentElement.style.removeProperty('--popover-foreground');
+        document.documentElement.style.removeProperty('--muted-foreground');
+        document.documentElement.style.removeProperty('--sidebar-foreground');
+        document.documentElement.style.removeProperty('--accent-foreground');
+        document.documentElement.style.removeProperty('--sidebar-primary-foreground');
+        document.documentElement.style.removeProperty('--sidebar-accent-foreground');
+        document.documentElement.style.removeProperty('--chart-1');
+        document.documentElement.style.removeProperty('--chart-2');
+        document.documentElement.style.removeProperty('--chart-3');
+        document.documentElement.style.removeProperty('--chart-4');
+        document.documentElement.style.removeProperty('--chart-5');
+    }, []);
+    useEffect(() => {
+        if (mounted && activeTheme === "blue-dark") {
+            document.documentElement.classList.add("blue-dark");
+            applySavedColors();
+        }
+    }, [mounted, activeTheme, applySavedColors]);
+    const setThemeSafe = useCallback((value) => {
+        setTheme(value);
+        if (value === "light" || value === "dark") {
+            document.documentElement.classList.remove("blue-dark");
+            resetColors();
+        }
+        if (value === "blue-dark") {
+            document.documentElement.classList.add("blue-dark");
+            applySavedColors();
+        }
+    }, [setTheme, applySavedColors, resetColors]);
+    if (!mounted)
+        return null;
+    const triggerIcon = (() => {
+        if (activeTheme === "blue-dark")
+            return _jsx(Waves, { className: "h-5 w-5" });
+        if (activeTheme === "dark")
+            return _jsx(Moon, { className: "h-5 w-5" });
+        if (activeTheme === "light")
+            return _jsx(Sun, { className: "h-5 w-5" });
+        return _jsx(Laptop, { className: "h-5 w-5" });
+    })();
+    const isActive = (value) => activeTheme === value;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Change theme", title: `Theme: ${theme === "system" ? `system (${resolvedTheme})` : theme}`, children: triggerIcon }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 8, children: [_jsxs(DropdownMenuItem, { onClick: () => setThemeSafe("light"), className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Sun, { className: "mr-2 h-4 w-4" }), " Light"] }), isActive("light") && _jsx(Check, { className: "h-4 w-4" })] }), _jsxs(DropdownMenuItem, { onClick: () => setThemeSafe("dark"), className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Moon, { className: "mr-2 h-4 w-4" }), " Dark"] }), isActive("dark") && _jsx(Check, { className: "h-4 w-4" })] }), _jsxs(DropdownMenuItem, { onClick: () => setThemeSafe("blue-dark"), className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Waves, { className: "mr-2 h-4 w-4" }), " Custom"] }), isActive("blue-dark") && _jsx(Check, { className: "h-4 w-4" })] })] })] }));
 }

package/dist/ikoncomponents/upload-tab/index.d.ts

@@ -0,0 +1 @@
+export declare function UploadTab(): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/upload-tab/index.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { UploadIcon, X, Send } from "lucide-react";
+import { Button } from "../../shadcn/button";
+import { Input } from "../../shadcn/input";
+import { Label } from "../../shadcn/label";
+import { Progress } from "../../shadcn/progress";
+import { useForm } from "react-hook-form";
+import axios from "axios";
+import { Form, FormField, FormItem, FormControl, FormMessage, } from "../../shadcn/form";
+import { NoDataComponent } from "../no-data";
+export function UploadTab() {
+    const form = useForm({
+        defaultValues: {
+            text: "",
+            fileNames: [],
+        },
+    });
+    const [inputValue, setInputValue] = useState("");
+    const [texts, setTexts] = useState([]);
+    const [fileNames, setFileNames] = useState([]); // Updated type
+    const [formattedDate, setFormattedDate] = useState("");
+    const [noFilesUploaded, setNoFilesUploaded] = useState(true);
+    const isUploading = fileNames.some((file) => file.progress < 100);
+    const simulateFileUpload = async (idx, file) => {
+        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 ? Object.assign(Object.assign({}, f), { progress }) : f)));
+                },
+            });
+            setFileNames((prev) => prev.map((f, i) => i === idx ? Object.assign(Object.assign({}, 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 = {
+                text: inputValue.trim(),
+                fileNames: fileNames.map((file) => file.name),
+            };
+            setTexts([newEntry, ...texts]);
+            setInputValue("");
+            setFileNames([]);
+            setNoFilesUploaded(false);
+        }
+    };
+    const handleFileUpload = (e) => {
+        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) => {
+        const updatedFiles = fileNames.filter((_, idx) => idx !== index);
+        setFileNames(updatedFiles);
+        if (updatedFiles.length === 0 && texts.length === 0) {
+            setNoFilesUploaded(true);
+        }
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col h-full w-full gap-3", children: [_jsxs("div", { className: "flex-grow overflow-auto flex flex-col-reverse gap-2", children: [noFilesUploaded && _jsx(NoDataComponent, { text: "No files uploaded" }), fileNames.length > 0 && (_jsxs("div", { className: "p-2 my-1 rounded-md border", children: [_jsx("p", { className: "font-bold", children: "Selected Files:" }), fileNames.map((file, idx) => (_jsxs("div", { className: "flex flex-col mb-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("a", { href: file.url, download: file.name, className: "text-sm text-blue-600 underline cursor-pointer", children: file.name }), _jsx("button", { onClick: () => removeFile(idx), className: "text-red-500 hover:text-red-800", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx(Progress, { value: file.progress }), _jsxs("p", { className: "text-xs text-gray-500", children: [file.progress, "% uploaded"] })] }, idx)))] })), texts.map((entry, index) => (_jsxs("div", { className: "border-b text-sm pb-2", children: [entry.fileNames.map((fileName, idx) => {
+                                    var _a;
+                                    return (_jsx("p", { children: _jsx("a", { href: ((_a = fileNames.find((file) => file.name === fileName)) === null || _a === void 0 ? void 0 : _a.url) ||
+                                                "#", download: fileName, className: "text-sm text-blue-500 underline cursor-pointer", children: fileName }) }, idx));
+                                }), _jsx("p", { children: entry.text || "(No Text)" }), _jsxs("div", { className: "flex justify-between", children: [_jsx("p", { children: "John Doe" }), _jsx("p", { children: formattedDate })] })] }, index)))] }), _jsx(Form, Object.assign({}, form, { children: _jsx("form", { onSubmit: form.handleSubmit(() => handleAddText()), children: _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(FormField, { name: "text", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(Input, { id: "text-input", type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: "Type something..." }) }), _jsx(FormMessage, {})] })) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { htmlFor: "file-upload", className: "sr-only", children: "Upload Files" }), _jsx(Button, { variant: "outline", asChild: true, children: _jsx("label", { htmlFor: "file-upload", className: "cursor-pointer", children: _jsx(UploadIcon, { className: "w-5 h-5" }) }) }), _jsx(Input, { id: "file-upload", type: "file", multiple: true, onChange: handleFileUpload, className: "hidden" })] }), _jsx(Button, { variant: "outline", type: "submit", disabled: isUploading, children: _jsx(Send, {}) })] }) }) }) }))] }) }));
+}

package/dist/index.d.ts

@@ -34,6 +34,14 @@ export * from "./shadcn/tabs";
 export * from "./shadcn/textarea";
 export * from "./shadcn/tooltip";
 export * from "./shadcn/workflow";
+export * from "./shadcn/aspect-ratio";
+export * from "./shadcn/breadcrumb";
+export * from "./shadcn/collapsible";
+export * from "./shadcn/drawer";
+export * from "./shadcn/form";
+export * from "./shadcn/input-otp";
+export * from "./shadcn/toggle-group";
+export * from "./shadcn/toggle";
 export { ActionMenu } from "./ikoncomponents/action-menu";
 export type { ActionMenuProps, ExtraActionParams } from "./ikoncomponents/action-menu/type";
 export { CustomAlertDialog } from "./ikoncomponents/alert-dialog";
@@ -73,6 +81,39 @@ export { FrameworkItemDropdown } from "./ikoncomponents/twolevel-dropdown";
 export type { FrameworkEntry, TreeNode, ParentEntry, ProcessedFrameworkData } from "./ikoncomponents/twolevel-dropdown";
 export { Widgets } from "./ikoncomponents/widgets";
 export type { WidgetProps, WidgetsFunctionProps } from "./ikoncomponents/widgets/type";
+export { BreadcrumbProvider, useBreadcrumb } from "./ikoncomponents/app-breadcrumb/BreadcrumbProvider";
+export type { BreadcrumbItemProps } from "./ikoncomponents/app-breadcrumb/BreadcrumbProvider";
+export { AppBreadcrumb, RenderAppBreadcrumb } from "./ikoncomponents/app-breadcrumb";
+export { FormComboboxInput } from "./ikoncomponents/form-fields/combobox-input";
+export { FormComboboxInputWithValue } from "./ikoncomponents/form-fields/combobox-input-value";
+export { FormDateInput } from "./ikoncomponents/form-fields/date-input";
+export { FormFileInput } from "./ikoncomponents/form-fields/file-input";
+export { FormInput } from "./ikoncomponents/form-fields/input";
+export { dFormMultiComboboxInput } from "./ikoncomponents/form-fields/multi-combobox-input";
+export { FormOtpInput } from "./ikoncomponents/form-fields/otp-input";
+export { FormPhoneInput } from "./ikoncomponents/form-fields/phone-input";
+export { FormTextarea } from "./ikoncomponents/form-fields/textarea";
+export type { FormFieldProps, FormInputProps, FormTextareaProps, FormDateInputProps, FormComboboxInputProps, FormComboboxItemProps } from "./ikoncomponents/form-fields/types";
+export { GradeTableLoader } from "./ikoncomponents/skeleton-loader/skeleton-table";
+export type { GradeTableLoaderProps } from "./ikoncomponents/skeleton-loader/skeleton-table";
+export { SkeletonWidget } from "./ikoncomponents/skeleton-loader/skeleton-widget";
+export { UploadTab } from "./ikoncomponents/upload-tab";
+export { AppSidebar } from "./ikoncomponents/main-layout/app-sidebar";
+export { Footer } from "./ikoncomponents/main-layout/footer";
+export { Header } from "./ikoncomponents/main-layout/header";
+export type { Account, Software } from "./ikoncomponents/main-layout/main-sidebar";
+export { MainSidebar } from "./ikoncomponents/main-layout/main-sidebar";
+export { NavMain } from "./ikoncomponents/main-layout/nav-main";
+export type { SidebarNavSubItem, SidebarNavItem, SidebarNavContextType } from "./ikoncomponents/main-layout/SidebarNavContext";
+export { SidebarNavProvider, useSidebarNav } from "./ikoncomponents/main-layout/SidebarNavContext";
+export { MainLayout } from "./ikoncomponents/main-layout";
 export { ThemeProvider } from "./utils/theme-provider";
+export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
+export { FontProvider, useFont } from "./utils/font-provider";
 export { cn } from "./utils/cn";
+export type { CookieSessionOptionsProps } from "./utils/session/cookieSession";
+export { setCookieSession, getCookieSession, clearCookieSession, clearAllCookieSession } from "./utils/session/cookieSession";
+export { getValidAccessToken, refreshAccessToken, logOut } from "./utils/token-management";
+export type { AccessTokenOptionsProps } from "./utils/token-management";
+export type { TokenResponse } from "./utils/token-management/types";
 export { useIsMobile } from "./hooks/use-mobile";

package/dist/index.js

@@ -34,6 +34,14 @@ export * from "./shadcn/tabs";
 export * from "./shadcn/textarea";
 export * from "./shadcn/tooltip";
 export * from "./shadcn/workflow";
+export * from "./shadcn/aspect-ratio";
+export * from "./shadcn/breadcrumb";
+export * from "./shadcn/collapsible";
+export * from "./shadcn/drawer";
+export * from "./shadcn/form";
+export * from "./shadcn/input-otp";
+export * from "./shadcn/toggle-group";
+export * from "./shadcn/toggle";
 export { ActionMenu } from "./ikoncomponents/action-menu";
 export { CustomAlertDialog } from "./ikoncomponents/alert-dialog";
 export { TextButton, TextButtonWithTooltip, IconTextButton, IconTextButtonWithTooltip, IconButton, IconButtonWithTooltip } from "./ikoncomponents/buttons";
@@ -65,6 +73,31 @@ export { TitleProgress } from "./ikoncomponents/title-progress";
 export { TooltipComponent } from "./ikoncomponents/tooltip";
 export { FrameworkItemDropdown } from "./ikoncomponents/twolevel-dropdown";
 export { Widgets } from "./ikoncomponents/widgets";
+export { BreadcrumbProvider, useBreadcrumb } from "./ikoncomponents/app-breadcrumb/BreadcrumbProvider";
+export { AppBreadcrumb, RenderAppBreadcrumb } from "./ikoncomponents/app-breadcrumb";
+export { FormComboboxInput } from "./ikoncomponents/form-fields/combobox-input";
+export { FormComboboxInputWithValue } from "./ikoncomponents/form-fields/combobox-input-value";
+export { FormDateInput } from "./ikoncomponents/form-fields/date-input";
+export { FormFileInput } from "./ikoncomponents/form-fields/file-input";
+export { FormInput } from "./ikoncomponents/form-fields/input";
+export { dFormMultiComboboxInput } from "./ikoncomponents/form-fields/multi-combobox-input";
+export { FormOtpInput } from "./ikoncomponents/form-fields/otp-input";
+export { FormPhoneInput } from "./ikoncomponents/form-fields/phone-input";
+export { FormTextarea } from "./ikoncomponents/form-fields/textarea";
+export { GradeTableLoader } from "./ikoncomponents/skeleton-loader/skeleton-table";
+export { SkeletonWidget } from "./ikoncomponents/skeleton-loader/skeleton-widget";
+export { UploadTab } from "./ikoncomponents/upload-tab";
+export { AppSidebar } from "./ikoncomponents/main-layout/app-sidebar";
+export { Footer } from "./ikoncomponents/main-layout/footer";
+export { Header } from "./ikoncomponents/main-layout/header";
+export { MainSidebar } from "./ikoncomponents/main-layout/main-sidebar";
+export { NavMain } from "./ikoncomponents/main-layout/nav-main";
+export { SidebarNavProvider, useSidebarNav } from "./ikoncomponents/main-layout/SidebarNavContext";
+export { MainLayout } from "./ikoncomponents/main-layout";
 export { ThemeProvider } from "./utils/theme-provider";
+export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
+export { FontProvider, useFont } from "./utils/font-provider";
 export { cn } from "./utils/cn";
+export { setCookieSession, getCookieSession, clearCookieSession, clearAllCookieSession } from "./utils/session/cookieSession";
+export { getValidAccessToken, refreshAccessToken, logOut } from "./utils/token-management";
 export { useIsMobile } from "./hooks/use-mobile";

package/dist/shadcn/aspect-ratio.d.ts

@@ -0,0 +1,3 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };