indas-ui 0.0.1 → 0.1.1

package/dist/components/modals/Modal.js

@@ -0,0 +1,264 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X, ChevronLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { cn } from "../../lib/utils.js";
+// =============================================================================
+// SIZE PRESETS
+// On mobile (<md): sm/md/lg/xl go full-screen for better usability
+// =============================================================================
+const modalSizes = {
+    sm: 'max-w-md w-full mx-4 h-auto max-h-[90vh] max-md:max-w-full max-md:h-full max-md:max-h-none max-md:mx-0 max-md:rounded-none',
+    md: 'max-w-lg w-full mx-4 h-auto max-h-[90vh] max-md:max-w-full max-md:h-full max-md:max-h-none max-md:mx-0 max-md:rounded-none',
+    lg: 'max-w-2xl w-full mx-4 h-auto max-h-[90vh] max-md:max-w-full max-md:h-full max-md:max-h-none max-md:mx-0 max-md:rounded-none',
+    xl: 'max-w-4xl w-full mx-4 h-auto max-h-[90vh] max-md:max-w-full max-md:h-full max-md:max-h-none max-md:mx-0 max-md:rounded-none',
+    master: 'w-[90vw] h-[90vh] max-w-none max-md:w-full max-md:h-full max-md:rounded-none',
+    fullscreen: 'w-[98vw] h-[98vh] max-w-none'
+};
+// =============================================================================
+// HOOKS
+// =============================================================================
+/**
+ * SSR-safe mobile detection hook
+ * @param breakpoint - Pixel width threshold (default 768)
+ */
+export function useIsMobile(breakpoint = 768) {
+    const [isMobile, setIsMobile] = React.useState(false);
+    React.useEffect(() => {
+        const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
+        setIsMobile(mq.matches);
+        const handler = (e) => setIsMobile(e.matches);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, [breakpoint]);
+    return isMobile;
+}
+/**
+ * Stable ref wrapper — prevents React 19 infinite update loop caused by
+ * @radix-ui/react-presence creating a new callback ref every render.
+ */
+function useStableRef(forwardedRef) {
+    const forwardedRefRef = React.useRef(forwardedRef);
+    React.useEffect(() => { forwardedRefRef.current = forwardedRef; });
+    const stableCallback = React.useCallback((node) => {
+        const ref = forwardedRefRef.current;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, []);
+    return stableCallback;
+}
+// =============================================================================
+// MODAL CONTEXT — lets ModalTitle register its text for the mobile page header
+// =============================================================================
+const ModalMobileContext = React.createContext({ isMobilePage: false });
+// =============================================================================
+// CORE COMPONENTS
+// =============================================================================
+/**
+ * Nesting depth of the current modal. A modal rendered inside another modal's
+ * React tree reads its parent's depth + 1. Used to stack z-index and to let
+ * only the innermost modal own the device back button.
+ */
+const ModalDepthContext = React.createContext(0);
+/** Lets a nested modal tell its parent it is open (+1) or closed (-1). */
+const ModalChildRegistryContext = React.createContext(null);
+/** Reads whether THIS modal currently has an open child modal. */
+const ModalHasOpenChildContext = React.createContext(null);
+/** Monotonic id so each modal can recognise the history entry it pushed. */
+let modalSentinelSeq = 0;
+export function useModalDepth() {
+    return React.useContext(ModalDepthContext);
+}
+/**
+ * Modal wrapper — intercepts the device back button in standalone PWA mode.
+ * When a modal opens, a history entry is pushed. Pressing the device back
+ * button fires `popstate` which closes the modal instead of navigating away.
+ */
+function Modal({ open, onOpenChange, ...props }) {
+    const parentDepth = React.useContext(ModalDepthContext);
+    const depth = parentDepth + 1;
+    // Most controlled call sites pass `onOpenChange={onClose}` — a 0-arg handler
+    // that ignores the boolean, so a Radix-fired onOpenChange(true) would read as
+    // "close". For controlled modals the parent already owns `open`, so only the
+    // close transition needs forwarding. Uncontrolled (trigger-driven) modals must
+    // still receive `true` or they never open.
+    const isControlled = open !== undefined;
+    const handleOpenChange = React.useCallback((next) => {
+        if (isControlled && next)
+            return;
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const openRef = React.useRef(open);
+    const onOpenChangeRef = React.useRef(handleOpenChange);
+    openRef.current = open;
+    onOpenChangeRef.current = handleOpenChange;
+    // Tracks how many child modals are open beneath this one, so Escape and
+    // outside-clicks are handled by the innermost modal only. (The back button is
+    // handled separately, by sentinel id — a counter is cleared too early to be
+    // reliable there.)
+    const childOpenCountRef = React.useRef(0);
+    const registerChild = React.useContext(ModalChildRegistryContext);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        registerChild?.(1);
+        return () => { registerChild?.(-1); };
+    }, [open, registerChild]);
+    const childRegistry = React.useCallback((delta) => {
+        childOpenCountRef.current += delta;
+    }, []);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        // Only manage history on mobile — desktop doesn't need back-button interception
+        const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
+        if (!isMobileDevice)
+            return;
+        // Push a sentinel tagged with THIS modal's identity, so we can tell our own
+        // dismissal apart from a nested child retracting its entry. Without the id
+        // the parent closes too when a child modal applies or cancels.
+        const id = ++modalSentinelSeq;
+        window.history.pushState({ __modal: true, __modalId: id }, '');
+        let selfPopped = false;
+        const onPopState = () => {
+            // React only when OUR sentinel is the one that just left the stack.
+            // After a child pops its own entry ours becomes top-of-stack again —
+            // that means we survived, not that we were dismissed.
+            const state = window.history.state;
+            if (state && state.__modal && state.__modalId === id)
+                return;
+            // Our entry is gone and no deeper modal owns the new top: this is a real
+            // back-button press aimed at us.
+            if (childOpenCountRef.current > 0)
+                return;
+            selfPopped = true;
+            if (openRef.current) {
+                onOpenChangeRef.current?.(false);
+            }
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => {
+            window.removeEventListener('popstate', onPopState);
+            // Closing normally (Apply / Cancel / X) — retract our own sentinel so the
+            // history stack doesn't grow. If the back button already popped it,
+            // calling back() again would navigate the real page away.
+            if (selfPopped)
+                return;
+            const state = window.history.state;
+            if (state && state.__modal && state.__modalId === id) {
+                window.history.back();
+            }
+        };
+    }, [open]);
+    return (_jsx(ModalHasOpenChildContext.Provider, { value: childOpenCountRef, children: _jsx(ModalDepthContext.Provider, { value: depth, children: _jsx(ModalChildRegistryContext.Provider, { value: childRegistry, children: _jsx(DialogPrimitive.Root, { open: open, onOpenChange: handleOpenChange, ...props }) }) }) }));
+}
+/**
+ * ADAPTIVE TRIGGER
+ *
+ * On desktop: opens the modal dialog as normal.
+ * On mobile + mobilePageUrl: navigates to a dedicated page instead,
+ * so users get native back-button support and full-screen real estate.
+ */
+const ModalTrigger = React.forwardRef(({ className, mobilePageUrl, onMobileNavigate, mobileBreakpoint = 768, onClick, ...props }, ref) => {
+    const router = useRouter();
+    const handleClick = (e) => {
+        if (mobilePageUrl && typeof window !== 'undefined') {
+            const isMobile = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`).matches;
+            if (isMobile) {
+                e.preventDefault();
+                e.stopPropagation();
+                onMobileNavigate?.(mobilePageUrl);
+                router.push(mobilePageUrl);
+                return;
+            }
+        }
+        onClick?.(e);
+    };
+    return (_jsx(DialogPrimitive.Trigger, { ref: ref, className: className, onClick: handleClick, ...props }));
+});
+ModalTrigger.displayName = "ModalTrigger";
+const ModalPortal = DialogPrimitive.Portal;
+const ModalClose = DialogPrimitive.Close;
+// Overlay with backdrop blur
+const ModalOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-[100] bg-black/50 backdrop-blur-[2px]", 
+    // z-index may be overridden inline by ModalContent for nested modals
+    className), ...props })));
+ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
+/**
+ * ADAPTIVE MODAL CONTENT
+ *
+ * Desktop: standard Radix dialog overlay (unchanged)
+ * Mobile: renders as a full-screen page with a back-arrow header.
+ *         No Radix overlay/portal — just a fixed div on top of everything.
+ *         ModalHeader/ModalTitle inside become the page header automatically.
+ */
+const ModalContent = React.forwardRef(({ className, children, hideCloseButton, disableOutsideClick, size, style, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const stableRef = useStableRef(ref);
+    const isMobile = useIsMobile();
+    // Nested modals must paint above their parent. Radix portals every modal to
+    // <body>, so equal z-index makes stacking fall back to DOM order and the
+    // child renders behind / overlapping the parent.
+    const depth = useModalDepth();
+    const zIndex = 100 + (depth - 1) * 10;
+    // Radix delivers Escape to every open Dialog. Without this, closing a nested
+    // modal with Escape also closes its parent.
+    const hasOpenChild = React.useContext(ModalHasOpenChildContext);
+    const handleEscapeKeyDown = React.useCallback((e) => {
+        if (hasOpenChild && hasOpenChild.current > 0)
+            e.preventDefault();
+    }, [hasOpenChild]);
+    // On mobile: render as a full-screen page
+    if (isMobile) {
+        return (_jsx(DialogPrimitive.Portal, { children: _jsx(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed inset-0 flex flex-col", "bg-[rgb(var(--bg-surface))]", className), 
+                // Always block outside click on mobile — there's nothing "outside"
+                onInteractOutside: (e) => e.preventDefault(), onEscapeKeyDown: handleEscapeKeyDown, ...props, children: _jsx(ModalMobileContext.Provider, { value: { isMobilePage: true, onClose: undefined }, children: children }) }) }));
+    }
+    // Desktop: unchanged Radix dialog
+    return (_jsxs(ModalPortal, { children: [_jsx(ModalOverlay, { style: { zIndex: zIndex - 1 } }), _jsxs(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed left-[50%] top-[50%] grid translate-x-[-50%] translate-y-[-50%]", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-lg", "rounded-lg sm:rounded-lg", size ? modalSizes[size] : "max-w-lg w-full mx-4 h-auto max-h-[85vh]", 
+                // Gap + padding only for standard modals — fullscreen/master/p-0 modals
+                // run their own flush header/body/footer layout, so the gap shows as bands.
+                size !== 'master' && size !== 'fullscreen' && !className?.includes('p-0') && "gap-3 sm:gap-4 p-4 sm:p-6", className), onInteractOutside: (e) => {
+                    // A nested modal is open — clicks belong to it, not the parent.
+                    if (disableOutsideClick || (hasOpenChild && hasOpenChild.current > 0)) {
+                        e.preventDefault();
+                    }
+                }, onEscapeKeyDown: handleEscapeKeyDown, ...props, children: [children, !hideCloseButton && (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-[rgb(var(--bg-surface))] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-[rgb(var(--bg-hover))] data-[state=open]:text-[rgb(var(--fg-muted))]", children: [_jsx(X, { className: "h-4 w-4 sm:h-5 sm:w-5 text-[rgb(var(--color-icon))]" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+});
+ModalContent.displayName = DialogPrimitive.Content.displayName;
+/**
+ * ADAPTIVE HEADER
+ *
+ * Desktop: renders as normal header div
+ * Mobile page mode: renders as a sticky top bar with a back arrow (ChevronLeft)
+ *                   that closes the modal, plus the title inline
+ */
+const ModalHeader = ({ className, children, ...props }) => {
+    const { isMobilePage } = React.useContext(ModalMobileContext);
+    if (isMobilePage) {
+        return (_jsxs("div", { className: cn("flex items-center gap-2 px-2 py-3 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shrink-0", className), ...props, children: [_jsx(DialogPrimitive.Close, { className: "p-1.5 -ml-1 rounded-lg text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] transition-colors", children: _jsx(ChevronLeft, { className: "h-5 w-5" }) }), _jsx("div", { className: "flex-1 min-w-0", children: children })] }));
+    }
+    return (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props, children: children }));
+};
+ModalHeader.displayName = "ModalHeader";
+const ModalFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+ModalFooter.displayName = "ModalFooter";
+const ModalTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight text-[rgb(var(--fg-default))]", className), ...props })));
+ModalTitle.displayName = DialogPrimitive.Title.displayName;
+const ModalDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-[rgb(var(--fg-muted))]", className), ...props })));
+ModalDescription.displayName = DialogPrimitive.Description.displayName;
+// Backwards compatibility aliases
+export const Dialog = Modal;
+export const DialogTrigger = ModalTrigger;
+export const DialogPortal = ModalPortal;
+export const DialogClose = ModalClose;
+export const DialogOverlay = ModalOverlay;
+export const DialogContent = ModalContent;
+export const DialogHeader = ModalHeader;
+export const DialogFooter = ModalFooter;
+export const DialogTitle = ModalTitle;
+export const DialogDescription = ModalDescription;
+export { Modal, ModalPortal, ModalOverlay, ModalClose, ModalTrigger, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription, };

package/dist/components/modals/StandardModal.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface StandardModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    subtitle?: string;
+    badge?: {
+        label: string;
+        variant?: 'default' | 'outline' | 'secondary' | 'destructive';
+    };
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    className?: string;
+    showFooter?: boolean;
+    footerActions?: React.ReactNode;
+    onSave?: () => void;
+    onCancel?: () => void;
+    saveLabel?: string;
+    cancelLabel?: string;
+    saveIcon?: LucideIcon;
+    cancelIcon?: LucideIcon;
+    saving?: boolean;
+    ariaDescribedBy?: string;
+    ariaDescription?: string;
+}
+export declare function StandardModal({ isOpen, onClose, title, subtitle, badge, children, size, className, showFooter, footerActions, onSave, onCancel, saveLabel, cancelLabel, saveIcon: SaveIcon, cancelIcon: CancelIcon, saving, ariaDescribedBy, ariaDescription }: StandardModalProps): React.JSX.Element;

package/dist/components/modals/StandardModal.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { X, Save, XCircle } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Button, Badge } from '../ui/index.js';
+import { Footer } from '../layout/footer.js';
+import { cn } from '../../lib/utils.js';
+const sizeClasses = {
+    sm: 'w-[500px] h-[400px]',
+    md: 'w-[700px] h-[600px]',
+    lg: 'w-[90vw] h-[80vh]',
+    xl: 'w-[95vw] h-[90vh]',
+    full: 'w-[98vw] h-[98vh]'
+};
+export function StandardModal({ isOpen, onClose, title, subtitle, badge, children, size = 'lg', className, showFooter = true, footerActions, onSave, onCancel, saveLabel = 'Save', cancelLabel = 'Cancel', saveIcon: SaveIcon = Save, cancelIcon: CancelIcon = XCircle, saving = false, ariaDescribedBy = 'modal-description', ariaDescription }) {
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            onClose();
+        }
+    };
+    const defaultFooterActions = (onSave || onCancel) && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "action-cancel", onClick: handleCancel, icon: CancelIcon, disabled: saving, children: cancelLabel }), onSave && (_jsx(Button, { variant: "action-save", onClick: onSave, icon: SaveIcon, disabled: saving, children: saving ? 'Saving...' : saveLabel }))] }));
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: _jsxs(DialogContent, { className: cn('max-w-none bg-[rgb(var(--bg-surface))] p-0 flex flex-col overflow-hidden', sizeClasses[size], className), hideCloseButton: true, "aria-describedby": ariaDescribedBy, children: [_jsxs(DialogHeader, { className: "flex-shrink-0 px-6 pt-3 pb-2 border-b border-[rgb(var(--bd-default))] bg-gradient-to-r from-blue-50 to-indigo-50", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { children: [_jsx(DialogTitle, { className: "text-lg font-semibold text-[rgb(var(--fg-default))]", children: title }), subtitle && (_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))] mt-1", children: subtitle }))] }), badge && (_jsx(Badge, { variant: badge.variant || 'outline', className: "text-sm", children: badge.label }))] }), _jsx("button", { onClick: onClose, className: "close-btn-md hover:bg-[rgb(var(--bg-subtle))] rounded transition-colors p-1", "aria-label": "Close modal", children: _jsx(X, { className: "h-5 w-5 text-[rgb(var(--fg-default))]" }) })] }), ariaDescription && (_jsx("div", { id: ariaDescribedBy, className: "sr-only", children: ariaDescription }))] }), _jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: children }), showFooter && (_jsx(Footer, { variant: "modal", gradient: true, actions: footerActions || defaultFooterActions }))] }) }));
+}

package/dist/components/modals/api-config-modal.d.ts

@@ -0,0 +1,7 @@
+interface APIConfigModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfigured?: () => void;
+}
+export declare function APIConfigModal({ isOpen, onClose, onConfigured }: APIConfigModalProps): import("react").JSX.Element;
+export {};

package/dist/components/modals/api-config-modal.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Button, Input, Label, Alert, AlertDescription } from '../ui/index.js';
+import { Loader2, CheckCircle, AlertCircle, TestTube } from 'lucide-react';
+import { StandardModal } from './StandardModal.js';
+import { getAuthAPIConfig, clearAuthAPIConfig } from '../../lib/api/index.js';
+export function APIConfigModal({ isOpen, onClose, onConfigured }) {
+    const [baseURL, setBaseURL] = useState('');
+    const [authEndpoint, setAuthEndpoint] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState(false);
+    useEffect(() => {
+        if (isOpen) {
+            // Load existing configuration
+            const config = getAuthAPIConfig();
+            if (config) {
+                setBaseURL(config.baseURL);
+                setAuthEndpoint(config.authEndpoint || '/api/GetLoginDetails');
+            }
+            else {
+                // Set default values
+                setBaseURL('');
+                setAuthEndpoint('/api/GetLoginDetails');
+            }
+            setError('');
+            setSuccess(false);
+        }
+    }, [isOpen]);
+    const handleSave = async () => {
+        setIsLoading(true);
+        setError('');
+        setSuccess(false);
+        try {
+            // Validate inputs
+            if (!baseURL.trim()) {
+                throw new Error('Base URL is required');
+            }
+            if (!authEndpoint.trim()) {
+                throw new Error('Auth endpoint is required');
+            }
+            // Test the configuration by making a request to the configure endpoint
+            const response = await fetch('/api/auth/configure', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    baseURL: baseURL.trim(),
+                    authEndpoint: authEndpoint.trim()
+                })
+            });
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error || 'Failed to configure API');
+            }
+            setSuccess(true);
+            setTimeout(() => {
+                onConfigured?.();
+                onClose();
+            }, 1500);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Configuration failed');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleClear = async () => {
+        try {
+            clearAuthAPIConfig();
+            setBaseURL('');
+            setAuthEndpoint('/api/GetLoginDetails');
+            setSuccess(false);
+            setError('');
+        }
+        catch (err) {
+            setError('Failed to clear configuration');
+        }
+    };
+    const handleTestConnection = async () => {
+        if (!baseURL.trim()) {
+            setError('Please enter a base URL first');
+            return;
+        }
+        setIsLoading(true);
+        setError('');
+        try {
+            const testUrl = baseURL.trim().replace(/\/$/, '') + '/api/test';
+            const response = await fetch(testUrl, {
+                method: 'GET',
+                signal: AbortSignal.timeout(5000)
+            });
+            if (response.ok) {
+                setSuccess(true);
+                setTimeout(() => setSuccess(false), 3000);
+            }
+            else {
+                setError(`Server responded with ${response.status}: ${response.statusText}`);
+            }
+        }
+        catch (err) {
+            if (err instanceof Error && err.name === 'AbortError') {
+                setError('Connection test timed out');
+            }
+            else {
+                setError('Unable to connect to server');
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (_jsx(StandardModal, { isOpen: isOpen, onClose: onClose, title: "Configure API Authentication", subtitle: "Set up the base URL and authentication endpoint for API requests", size: "md", onSave: handleSave, onCancel: onClose, saveLabel: "Save Configuration", saving: isLoading, footerActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "action-secondary", onClick: handleTestConnection, disabled: isLoading || !baseURL.trim(), icon: TestTube, children: isLoading ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : 'Test Connection' }), _jsx(Button, { variant: "action-secondary", onClick: handleClear, disabled: isLoading, children: "Clear" }), _jsx(Button, { variant: "action-save", onClick: handleSave, disabled: isLoading || !baseURL.trim() || !authEndpoint.trim(), children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ('Save Configuration') })] }), ariaDescription: "Configure API authentication settings including base URL and authentication endpoint", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "baseURL", className: "text-[rgb(var(--fg-default))]", children: "Base URL" }), _jsx(Input, { id: "baseURL", placeholder: "https://your-api-domain.com", value: baseURL, onChange: (e) => setBaseURL(e.target.value), disabled: isLoading, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "The base URL of your API server (e.g., https://api.indusanalytics.co.in)" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "authEndpoint", className: "text-[rgb(var(--fg-default))]", children: "Authentication Endpoint" }), _jsx(Input, { id: "authEndpoint", placeholder: "/api/GetLoginDetails", value: authEndpoint, onChange: (e) => setAuthEndpoint(e.target.value), disabled: isLoading, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "The endpoint path for authentication (default: /api/GetLoginDetails)" })] }), error && (_jsxs(Alert, { variant: "destructive", className: "border-[rgb(var(--bd-default))]", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx(AlertDescription, { children: error })] })), success && (_jsxs(Alert, { className: "border-[rgb(var(--bd-default))] bg-green-50", children: [_jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }), _jsx(AlertDescription, { className: "text-green-800", children: "Configuration saved successfully!" })] }))] }) }));
+}

package/dist/components/modals/global-api-config-modal.d.ts

@@ -0,0 +1,7 @@
+interface GlobalAPIConfigModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfigured?: () => void;
+}
+export declare function GlobalAPIConfigModal({ isOpen, onClose, onConfigured }: GlobalAPIConfigModalProps): import("react").JSX.Element;
+export {};

package/dist/components/modals/global-api-config-modal.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Button, Input, Label, Alert, AlertDescription } from '../ui/index.js';
+import { Loader2, CheckCircle, AlertCircle, Server, User, Lock, TestTube, Eye, EyeOff } from 'lucide-react';
+import { StandardModal } from './StandardModal.js';
+import { getGlobalAPIConfig, setGlobalAPIConfig, clearGlobalAPIConfig, isAPIConfigured } from '../../lib/api/index.js';
+import { pingAPI } from '../../lib/api/index.js';
+export function GlobalAPIConfigModal({ isOpen, onClose, onConfigured }) {
+    const [baseURL, setBaseURL] = useState('');
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isTesting, setIsTesting] = useState(false);
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState(false);
+    const [isConfigured, setIsConfigured] = useState(false);
+    useEffect(() => {
+        if (isOpen) {
+            // Load existing configuration
+            const config = getGlobalAPIConfig();
+            setIsConfigured(isAPIConfigured());
+            if (config) {
+                setBaseURL(config.baseURL);
+                setUsername(config.username);
+                setPassword(config.password);
+            }
+            else {
+                // Set default values
+                setBaseURL('');
+                setUsername('');
+                setPassword('');
+            }
+            setError('');
+            setSuccess(false);
+            setShowPassword(false);
+        }
+    }, [isOpen]);
+    const handleSave = async () => {
+        setIsLoading(true);
+        setError('');
+        setSuccess(false);
+        try {
+            // Validate inputs
+            if (!baseURL.trim()) {
+                throw new Error('Base URL is required');
+            }
+            if (!username.trim()) {
+                throw new Error('Username is required');
+            }
+            if (!password.trim()) {
+                throw new Error('Password is required');
+            }
+            // Set the global configuration
+            setGlobalAPIConfig({
+                baseURL: baseURL.trim(),
+                username: username.trim(),
+                password: password.trim()
+            });
+            setSuccess(true);
+            setIsConfigured(true);
+            setTimeout(() => {
+                onConfigured?.();
+                onClose();
+            }, 1500);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Configuration failed');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleClear = async () => {
+        try {
+            clearGlobalAPIConfig();
+            setBaseURL('');
+            setUsername('');
+            setPassword('');
+            setSuccess(false);
+            setError('');
+            setIsConfigured(false);
+        }
+        catch (err) {
+            setError('Failed to clear configuration');
+        }
+    };
+    const handleTestConnection = async () => {
+        if (!baseURL.trim() || !username.trim() || !password.trim()) {
+            setError('Please fill in all fields before testing');
+            return;
+        }
+        setIsTesting(true);
+        setError('');
+        try {
+            // Temporarily set the configuration for testing
+            setGlobalAPIConfig({
+                baseURL: baseURL.trim(),
+                username: username.trim(),
+                password: password.trim()
+            });
+            // Test the connection
+            const isConnected = await pingAPI();
+            if (isConnected) {
+                setSuccess(true);
+                setTimeout(() => setSuccess(false), 3000);
+            }
+            else {
+                setError('Connection test failed - server is not reachable or authentication failed');
+            }
+        }
+        catch (err) {
+            setError('Connection test failed - please check your configuration');
+        }
+        finally {
+            setIsTesting(false);
+        }
+    };
+    return (_jsx(StandardModal, { isOpen: isOpen, onClose: onClose, title: "Global API Configuration", subtitle: "Configure base URL and authentication credentials for all API requests", size: "md", badge: isConfigured ? {
+            label: 'Configured',
+            variant: 'default'
+        } : undefined, onSave: handleSave, onCancel: onClose, saveLabel: "Save Configuration", saving: isLoading, footerActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "action-secondary", onClick: handleTestConnection, disabled: isLoading || isTesting || !baseURL.trim() || !username.trim() || !password.trim(), icon: TestTube, children: isTesting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Testing..."] })) : ('Test Connection') }), _jsx(Button, { variant: "action-secondary", onClick: handleClear, disabled: isLoading || isTesting, children: "Clear All" }), _jsx(Button, { variant: "action-save", onClick: handleSave, disabled: isLoading || isTesting || !baseURL.trim() || !username.trim() || !password.trim(), children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ('Save Configuration') })] }), ariaDescription: "Global API configuration for base URL and authentication credentials", children: _jsxs("div", { className: "space-y-4", children: [isConfigured && (_jsxs(Alert, { className: "border-[rgb(var(--bd-default))] bg-green-50", children: [_jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }), _jsx(AlertDescription, { className: "text-green-800", children: "API is currently configured and ready for use." })] })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "baseURL", className: "flex items-center gap-2 text-[rgb(var(--fg-default))]", children: [_jsx(Server, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" }), "Base URL"] }), _jsx(Input, { id: "baseURL", placeholder: "https://api.my-domain.com/", value: baseURL, onChange: (e) => setBaseURL(e.target.value), disabled: isLoading || isTesting, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "The base domain for all API calls (e.g., https://api.my-domain.com/)" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "username", className: "flex items-center gap-2 text-[rgb(var(--fg-default))]", children: [_jsx(User, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" }), "API Username"] }), _jsx(Input, { id: "username", placeholder: "your-api-username", value: username, onChange: (e) => setUsername(e.target.value), disabled: isLoading || isTesting, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "password", className: "flex items-center gap-2 text-[rgb(var(--fg-default))]", children: [_jsx(Lock, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" }), "API Password"] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "password", type: showPassword ? 'text' : 'password', placeholder: "your-api-password", value: password, onChange: (e) => setPassword(e.target.value), disabled: isLoading || isTesting, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "absolute right-0 top-0 h-full px-3 py-2 hover:bg-[rgb(var(--bg-subtle))]", onClick: () => setShowPassword(!showPassword), disabled: isLoading || isTesting, children: showPassword ? (_jsx(EyeOff, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" })) : (_jsx(Eye, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" })) })] }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Credentials for Basic Authentication (stored securely in session)" })] }), error && (_jsxs(Alert, { variant: "destructive", className: "border-[rgb(var(--bd-default))]", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx(AlertDescription, { children: error })] })), success && (_jsxs(Alert, { className: "border-[rgb(var(--bd-default))] bg-green-50", children: [_jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }), _jsx(AlertDescription, { className: "text-green-800", children: "Configuration saved successfully!" })] })), _jsxs("div", { className: "bg-[rgb(var(--bg-subtle))] p-3 rounded-md text-xs border border-[rgb(var(--bd-default))]", children: [_jsx("h4", { className: "font-medium mb-2 text-[rgb(var(--fg-default))]", children: "Usage Information:" }), _jsxs("ul", { className: "space-y-1 text-[rgb(var(--fg-muted))]", children: [_jsx("li", { children: "\u2022 All API calls will use: BASE_URL + \"api/...\"" }), _jsx("li", { children: "\u2022 Authentication: Basic Auth with provided credentials" }), _jsx("li", { children: "\u2022 Configuration applies to entire application" }), _jsx("li", { children: "\u2022 Update once, use everywhere" })] })] })] }) }));
+}

package/dist/components/modals/index.d.ts

@@ -0,0 +1,7 @@
+export { APIConfigModal } from './api-config-modal.js';
+export { GlobalAPIConfigModal } from './global-api-config-modal.js';
+export { ImageModal } from './ImageModal.js';
+export { ThreeDModal } from './3DModal.js';
+export { LogoutModal } from './logout-modal.js';
+export { StandardModal } from './StandardModal.js';
+export type { StandardModalProps } from './StandardModal.js';

package/dist/components/modals/index.js

@@ -0,0 +1,8 @@
+'use client';
+// Modal components exports
+export { APIConfigModal } from './api-config-modal.js';
+export { GlobalAPIConfigModal } from './global-api-config-modal.js';
+export { ImageModal } from './ImageModal.js';
+export { ThreeDModal } from './3DModal.js';
+export { LogoutModal } from './logout-modal.js';
+export { StandardModal } from './StandardModal.js';

package/dist/components/modals/logout-modal.d.ts

@@ -0,0 +1,32 @@
+export interface DeviceInfo {
+    id: string;
+    name: string;
+    type: 'desktop' | 'mobile' | 'tablet';
+    browser?: string;
+    os?: string;
+    lastUsed: Date;
+    isCurrent: boolean;
+}
+export interface TaskStatus {
+    overdue: number;
+    dueSoon: number;
+    total: number;
+}
+export interface LogoutModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onLogout: () => void;
+    onLogoutEverywhere: () => void;
+    sessionData: {
+        duration: string;
+        startTime: Date;
+        tasks: TaskStatus;
+        activeDevices: DeviceInfo[];
+        isInactivityWarning?: boolean;
+        timeUntilAutoLogout?: string;
+    };
+    onExtendSession?: () => void;
+    onViewTasks?: () => void;
+    className?: string;
+}
+export declare function LogoutModal({ isOpen, onClose, onLogout, sessionData, onViewTasks, className }: LogoutModalProps): import("react").JSX.Element;