@apptimate/ui 5.2.0 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
@@ -14,7 +14,8 @@
     "react-apexcharts": "^2.1.1",
     "recharts": "^2.15.4",
     "tailwind-merge": "^3.5.0",
-    "use-debounce": "^10.1.1"
+    "use-debounce": "^10.1.1",
+    "xlsx": "^0.18.5"
   },
   "publishConfig": {
     "access": "public"

package/src/base-components/ChartOfAccountPicker.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { BookOpen } from "lucide-react";
+import {  EntityPickerModal, PickerItem, PickerTrigger  } from "@apptimate/ui";
+
+interface AccountOption {
+  id: number;
+  code: string;
+  name: string;
+  type: string;
+}
+
+interface ChartOfAccountPickerProps {
+  value: number | string;
+  displayValue?: string | null;
+  onChange: (accountId: number | string, account?: AccountOption) => void;
+  accounts?: AccountOption[];
+  fetchAccounts?: (type?: string) => Promise<{ is_success: boolean; result?: AccountOption[] }>;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  /** Use compact trigger style for grid/table rows */
+  compact?: boolean;
+  filterType?: string;
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  asset: "Assets",
+  liability: "Liabilities",
+  equity: "Equity",
+  revenue: "Revenue",
+  expense: "Expenses",
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  asset: "text-blue-500",
+  liability: "text-amber-500",
+  equity: "text-violet-500",
+  revenue: "text-emerald-500",
+  expense: "text-red-500",
+};
+
+/**
+ * Chart of Accounts picker using the EntityPickerModal pattern.
+ * Opens a searchable popup grouped by account type.
+ */
+export function ChartOfAccountPicker({
+  value,
+  displayValue,
+  onChange,
+  accounts: externalAccounts,
+  fetchAccounts,
+  label = "Account",
+  placeholder = "Select account…",
+  isRequired = false,
+  compact = false,
+  filterType,
+}: ChartOfAccountPickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [accounts, setAccounts] = useState<AccountOption[]>(externalAccounts || []);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (externalAccounts?.length) setAccounts(externalAccounts);
+  }, [externalAccounts]);
+
+  useEffect(() => {
+    setAccounts([]);
+  }, [filterType]);
+
+  const fetchData = useCallback(async () => {
+    if (accounts.length > 0) return;
+    if (!fetchAccounts) return;
+    setIsLoading(true);
+    try {
+      const res = await fetchAccounts(filterType);
+      if (res.is_success) setAccounts(res.result || []);
+    } catch {}
+    setIsLoading(false);
+  }, [accounts.length, filterType, fetchAccounts]);
+
+  const handleOpen = () => {
+    setSearch("");
+    setIsOpen(true);
+    fetchData();
+  };
+
+  const handleSelect = (account: AccountOption) => {
+    onChange(account.id, account);
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange("", undefined);
+  };
+
+  const selectedAccount = accounts.find(a => String(a.id) === String(value));
+  const currentDisplay = displayValue || (selectedAccount ? `${selectedAccount.code} — ${selectedAccount.name}` : null);
+
+  const searchLower = (search || "").toLowerCase();
+  const filtered = accounts.filter(a =>
+    a.code.toLowerCase().includes(searchLower) ||
+    a.name.toLowerCase().includes(searchLower) ||
+    a.type.toLowerCase().includes(searchLower)
+  );
+
+  // Group by account type
+  const grouped = filtered.reduce<Record<string, AccountOption[]>>((acc, item) => {
+    const type = item.type || "other";
+    if (!acc[type]) acc[type] = [];
+    acc[type].push(item);
+    return acc;
+  }, {});
+  const typeOrder = ["asset", "liability", "equity", "revenue", "expense"];
+  const sortedTypes = Object.keys(grouped).sort((a, b) => {
+    const ia = typeOrder.indexOf(a), ib = typeOrder.indexOf(b);
+    return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
+  });
+
+  return (
+    <>
+      {compact ? (
+        /* Compact trigger for grid/table rows — matches the input height */
+        <button
+          type="button"
+          onClick={handleOpen}
+          className={`w-full flex items-center justify-between bg-surface-0 border-[1.5px] border-border-subtle rounded-lg px-2.5 py-2 text-[12px] text-left outline-none hover:border-gray-300 focus:border-gray-400 transition-colors ${
+            currentDisplay ? "text-gray-800 font-medium" : "text-gray-400"
+          }`}
+        >
+          <span className="truncate">{currentDisplay || placeholder}</span>
+          <BookOpen size={12} className="text-gray-400 flex-shrink-0 ml-1" />
+        </button>
+      ) : (
+        <PickerTrigger
+          label={label}
+          value={currentDisplay}
+          placeholder={placeholder}
+          isRequired={isRequired}
+          onClick={handleOpen}
+          onClear={value ? handleClear : undefined}
+        />
+      )}
+
+      <EntityPickerModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onSelect={handleSelect}
+        title="Select Account"
+        searchPlaceholder="Search by code or name…"
+        selectedId={value}
+        search={search}
+        onSearchChange={setSearch}
+        size="md"
+      >
+        {isLoading ? (
+          <div className="py-12 text-center">
+            <div className="inline-block h-6 w-6 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
+            <p className="mt-3 text-sm text-gray-400">Loading accounts…</p>
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-12 text-center">
+            <BookOpen size={32} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400">No accounts found</p>
+          </div>
+        ) : (
+          <div className="py-1">
+            {sortedTypes.map(type => (
+              <div key={type}>
+                {/* Type group header */}
+                <div className="px-3 py-1.5 sticky top-0 bg-gray-50/95 backdrop-blur-sm z-10">
+                  <span className={`text-[9px] font-extrabold uppercase tracking-widest ${TYPE_COLORS[type] || "text-gray-400"}`}>
+                    {TYPE_LABELS[type] || type}
+                  </span>
+                </div>
+
+                {/* Account items */}
+                <div className="space-y-0.5 px-1">
+                  {grouped[type].map(account => (
+                    <PickerItem
+                      key={account.id}
+                      label={account.name}
+                      sublabel={`Code: ${account.code}`}
+                      isSelected={String(value) === String(account.id)}
+                      onClick={() => handleSelect(account)}
+                      trailing={
+                        <code className="text-[10px] font-mono text-gray-400 flex-shrink-0">
+                          {account.code}
+                        </code>
+                      }
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+    </>
+  );
+}

package/src/base-components/ColorPicker.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { cn } from '@apptimate/core-lib';
+import { Check, Paintbrush } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { Label } from './Label';
+
+export interface ColorPickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    error?: string;
+    isRequired?: boolean;
+    onChange?: (e: any) => void;
+}
+
+const PRESET_COLORS = [
+    "#6366F1", // Indigo
+    "#3B82F6", // Blue
+    "#06B6D4", // Cyan
+    "#14B8A6", // Teal
+    "#10B981", // Emerald
+    "#8B5CF6", // Purple
+    "#EC4899", // Pink
+    "#EF4444", // Red
+    "#F97316", // Orange
+    "#F59E0B", // Amber
+];
+
+export const ColorPicker = React.forwardRef<HTMLInputElement, ColorPickerProps>(
+    ({ label, error, isRequired, className, value, defaultValue, name, onChange, disabled, ...props }, ref) => {
+        const [color, setColor] = useState<string>((value as string) || (defaultValue as string) || "#6366F1");
+        const customInputRef = useRef<HTMLInputElement>(null);
+
+        // Sync with controlled value changes from props
+        useEffect(() => {
+            if (value !== undefined) {
+                setColor(value as string);
+            }
+        }, [value]);
+
+        const handleColorChange = (newColor: string) => {
+            if (disabled) return;
+            
+            // Normalize hex color (ensure it starts with #)
+            const cleanColor = newColor.startsWith('#') ? newColor : '#' + newColor;
+            
+            if (/^#[0-9A-F]{6}$/i.test(cleanColor)) {
+                setColor(cleanColor);
+                if (onChange) {
+                    onChange({
+                        target: {
+                            name: name || '',
+                            value: cleanColor,
+                        }
+                    });
+                }
+            } else {
+                setColor(newColor); // Keep the typing state
+            }
+        };
+
+        // Combine refs to intercept react-hook-form setting .value programmatically (like on reset() or initial mount)
+        const combinedRef = (node: HTMLInputElement | null) => {
+            if (typeof ref === 'function') {
+                ref(node);
+            } else if (ref) {
+                (ref as any).current = node;
+            }
+
+            if (node) {
+                // Set initial state from node value if set on mount
+                if (node.value && node.value !== color) {
+                    setColor(node.value);
+                }
+
+                // Intercept programmatic setting of value property (e.g. from react-hook-form reset() or setValue())
+                if (!(node as any).__valueSetIntercepted) {
+                    (node as any).__valueSetIntercepted = true;
+                    const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                    if (descriptor && descriptor.set) {
+                        const originalSet = descriptor.set;
+                        Object.defineProperty(node, 'value', {
+                            get() {
+                                return descriptor.get?.call(this);
+                            },
+                            set(val) {
+                                originalSet.call(this, val);
+                                setColor(val);
+                            },
+                            configurable: true
+                        });
+                    }
+                }
+            }
+        };
+
+        const isPreset = PRESET_COLORS.some(c => c.toLowerCase() === color.toLowerCase());
+
+        return (
+            <div className={cn("flex flex-col gap-1.5 w-full", className)}>
+                {/* Hidden input for react-hook-form integration */}
+                <input
+                    ref={combinedRef}
+                    type="hidden"
+                    name={name}
+                    value={color}
+                    {...props}
+                />
+
+                {label && (
+                    <Label isRequired={isRequired}>
+                        {label}
+                    </Label>
+                )}
+                <div className="flex flex-col gap-3">
+                    {/* Color Swatches Grid */}
+                    <div className="flex flex-wrap items-center gap-2.5">
+                        {PRESET_COLORS.map((presetColor) => {
+                            const isSelected = color.toLowerCase() === presetColor.toLowerCase();
+                            return (
+                                <button
+                                    key={presetColor}
+                                    type="button"
+                                    onClick={() => handleColorChange(presetColor)}
+                                    disabled={disabled}
+                                    className={cn(
+                                        "w-8 h-8 rounded-full cursor-pointer relative border border-gray-200/50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
+                                        isSelected ? "scale-105 ring-2 ring-primary-500 ring-offset-2" : "hover:shadow-md"
+                                    )}
+                                    style={{ 
+                                        backgroundColor: presetColor,
+                                        "--tw-ring-color": presetColor 
+                                    } as React.CSSProperties}
+                                    title={presetColor}
+                                >
+                                    {isSelected && (
+                                        <Check className="absolute inset-0 m-auto text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" size={14} strokeWidth={3} />
+                                    )}
+                                </button>
+                            );
+                        })}
+
+                        {/* Custom Color Button */}
+                        <div className="relative">
+                            <button
+                                type="button"
+                                onClick={() => customInputRef.current?.click()}
+                                disabled={disabled}
+                                className={cn(
+                                    "w-8 h-8 rounded-full border border-dashed border-gray-300 flex items-center justify-center cursor-pointer transition-all hover:scale-105 active:scale-95 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed",
+                                    !isPreset ? "scale-105 ring-2 ring-offset-2 ring-primary-500 bg-white" : "hover:bg-gray-50 bg-white"
+                                )}
+                                style={{
+                                    "--tw-ring-color": !isPreset ? color : "transparent"
+                                } as React.CSSProperties}
+                                title="Custom Color Picker"
+                            >
+                                <span 
+                                    className="absolute inset-0.5 rounded-full bg-gradient-to-tr from-rose-400 via-fuchsia-500 to-indigo-500 opacity-80" 
+                                    style={!isPreset ? { backgroundColor: color, backgroundImage: 'none' } : undefined}
+                                />
+                                <Paintbrush className={cn("relative", !isPreset ? "text-white" : "text-gray-500")} size={13} strokeWidth={2.5} />
+                                {!isPreset && (
+                                    <Check className="absolute inset-0 m-auto text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" size={14} strokeWidth={3} />
+                                )}
+                            </button>
+                            {/* Hidden native color input */}
+                            <input
+                                ref={customInputRef}
+                                type="color"
+                                value={color}
+                                onChange={(e) => handleColorChange(e.target.value)}
+                                disabled={disabled}
+                                className="absolute top-0 left-0 w-0 h-0 opacity-0 pointer-events-none"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Manual Hex Input */}
+                    <div className="flex items-center gap-2">
+                        <div 
+                            className="w-5 h-5 rounded-md border border-gray-200 shadow-sm transition-colors"
+                            style={{ backgroundColor: /^#[0-9A-F]{6}$/i.test(color) ? color : "#6366F1" }}
+                        />
+                        <div className="relative flex items-center w-28">
+                            <span className="absolute left-2.5 text-xs font-semibold font-mono text-gray-400 select-none">#</span>
+                            <input
+                                type="text"
+                                value={color.replace('#', '').toUpperCase()}
+                                onChange={(e) => handleColorChange(e.target.value)}
+                                disabled={disabled}
+                                maxLength={6}
+                                placeholder="FFFFFF"
+                                className="w-full bg-surface-0 border border-border-default rounded-lg pl-6 pr-2.5 py-1.5 text-xs font-mono text-gray-700 outline-none transition-all hover:border-gray-300 focus:border-primary-500 focus:bg-surface-1 uppercase disabled:opacity-50 disabled:cursor-not-allowed"
+                            />
+                        </div>
+                    </div>
+                </div>
+                {error && <span className="text-[11px] text-danger-alt font-medium">{error}</span>}
+            </div>
+        );
+    }
+);
+
+ColorPicker.displayName = 'ColorPicker';

package/src/base-components/Modal.tsx

@@ -20,10 +20,18 @@ export interface ModalProps {
     zIndex?: number;
 }
 
-export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm', position = 'center', zIndex }: ModalProps) => {
+export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm', position = 'bottom', zIndex }: ModalProps) => {
     // SSR-safe portal mount guard — document is only available on the client
     const [mounted, setMounted] = useState(false);
-    useEffect(() => { setMounted(true); }, []);
+    const [isDesktop, setIsDesktop] = useState(true);
+
+    useEffect(() => { 
+        setMounted(true); 
+        const checkDesktop = () => setIsDesktop(window.innerWidth >= 640);
+        checkDesktop();
+        window.addEventListener('resize', checkDesktop);
+        return () => window.removeEventListener('resize', checkDesktop);
+    }, []);
 
     useEffect(() => {
         if (isOpen) {
@@ -51,12 +59,14 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
         full: 'max-w-[100vw]',
     };
 
+    const effectivePosition = position === 'bottom' && isDesktop ? 'center' : position;
+
     const content = (
         <AnimatePresence>
             {isOpen && (
                 <div className={cn(
                     "fixed inset-0 flex",
-                    position === 'center' ? "items-center justify-center p-2 sm:p-4" : "items-end justify-center sm:items-center p-0 sm:p-4",
+                    effectivePosition === 'center' ? "items-center justify-center p-2 sm:p-4" : "items-end justify-center sm:items-center p-0 sm:p-4",
                     size === 'full' ? 'p-0 sm:p-0' : ''
                 )} style={{ zIndex: zIndex ?? 50 }}>
                     <motion.div
@@ -67,13 +77,13 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
                         className={backdropClasses}
                     />
                     <motion.div
-                        initial={position === 'bottom' ? { opacity: 0, y: "100%" } : { opacity: 0, scale: 0.95, y: 20 }}
-                        animate={position === 'bottom' ? { opacity: 1, y: 0 } : { opacity: 1, scale: 1, y: 0 }}
-                        exit={position === 'bottom' ? { opacity: 0, y: "100%" } : { opacity: 0, scale: 0.95, y: 20 }}
+                        initial={effectivePosition === 'bottom' ? { opacity: 0, y: "100%" } : { opacity: 0, scale: 0.95, y: 20 }}
+                        animate={effectivePosition === 'bottom' ? { opacity: 1, y: 0 } : { opacity: 1, scale: 1, y: 0 }}
+                        exit={effectivePosition === 'bottom' ? { opacity: 0, y: "100%" } : { opacity: 0, scale: 0.95, y: 20 }}
                         transition={{ type: "spring", damping: 25, stiffness: 300 }}
                         className={cn(
                             "relative w-full bg-surface-1 shadow-[0_8px_40px_rgba(0,0,0,0.2)] flex flex-col overflow-hidden",
-                            size === 'full' ? "rounded-none h-screen max-h-screen" : position === 'bottom' ? "rounded-t-[24px] sm:rounded-[24px] max-h-[90vh]" : "rounded-[16px] sm:rounded-[24px] max-h-[90vh]",
+                            size === 'full' ? "rounded-none h-screen max-h-screen" : effectivePosition === 'bottom' ? "rounded-t-[24px] sm:rounded-[24px] max-h-[90vh]" : "rounded-[16px] sm:rounded-[24px] max-h-[90vh]",
                             sizeClasses[size],
                             className
                         )}

package/src/base-components/RichEmailEditor.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { Paperclip } from "lucide-react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+
+export interface RichEmailEditorHandle {
+  insertToken: (token: string) => void;
+}
+
+export interface RichEmailEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  minHeightClassName?: string;
+  onAttachFiles?: (files: File[]) => void;
+  attachmentAccept?: string;
+}
+
+const commands = [
+  ["bold", "B"],
+  ["italic", "I"],
+  ["underline", "U"],
+  ["insertOrderedList", "1."],
+  ["insertUnorderedList", "•"],
+] as const;
+
+export const RichEmailEditor = forwardRef<RichEmailEditorHandle, RichEmailEditorProps>(
+  function RichEmailEditor({
+    value,
+    onChange,
+    minHeightClassName = "min-h-56",
+    onAttachFiles,
+    attachmentAccept,
+  }, ref) {
+    const editorRef = useRef<HTMLDivElement>(null);
+    const savedRange = useRef<Range | null>(null);
+
+    useEffect(() => {
+      if (editorRef.current && editorRef.current.innerHTML !== value) {
+        editorRef.current.innerHTML = value;
+      }
+    }, [value]);
+
+    const rememberSelection = () => {
+      const selection = window.getSelection();
+      if (selection?.rangeCount && editorRef.current?.contains(selection.anchorNode)) {
+        savedRange.current = selection.getRangeAt(0).cloneRange();
+      }
+    };
+
+    const runCommand = (command: string, commandValue?: string) => {
+      editorRef.current?.focus();
+      const selection = window.getSelection();
+      if (selection && savedRange.current) {
+        selection.removeAllRanges();
+        selection.addRange(savedRange.current);
+      }
+      document.execCommand(command, false, commandValue);
+      rememberSelection();
+      onChange(editorRef.current?.innerHTML ?? "");
+    };
+
+    useImperativeHandle(ref, () => ({
+      insertToken(token: string) {
+        editorRef.current?.focus();
+        const selection = window.getSelection();
+        if (selection && savedRange.current) {
+          selection.removeAllRanges();
+          selection.addRange(savedRange.current);
+        }
+        document.execCommand("insertText", false, token);
+        rememberSelection();
+        onChange(editorRef.current?.innerHTML ?? "");
+      },
+    }));
+
+    return (
+      <div className="overflow-hidden rounded-[10px] border-[1.5px] border-border-subtle bg-white focus-within:border-primary-400">
+        <div className="flex flex-wrap items-center gap-1 border-b border-gray-100 bg-gray-50 px-2 py-1.5">
+          <select aria-label="Paragraph style" onChange={(event) => runCommand("formatBlock", event.target.value)} className="rounded border border-gray-200 bg-white px-2 py-1 text-xs" defaultValue="p">
+            <option value="p">Normal</option>
+            <option value="h2">Heading</option>
+            <option value="h3">Subheading</option>
+          </select>
+          <select aria-label="Font size" onChange={(event) => runCommand("fontSize", event.target.value)} className="rounded border border-gray-200 bg-white px-2 py-1 text-xs" defaultValue="3">
+            <option value="2">10px</option>
+            <option value="3">12px</option>
+            <option value="4">14px</option>
+            <option value="5">18px</option>
+          </select>
+          {commands.map(([command, label]) => (
+            <button key={command} type="button" onMouseDown={(event) => event.preventDefault()} onClick={() => runCommand(command)} className="rounded px-2 py-1 text-xs font-semibold text-gray-600 hover:bg-gray-200">
+              {label}
+            </button>
+          ))}
+          <label title="Text color" className="flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-200">
+            <span>A</span>
+            <input type="color" aria-label="Text color" onMouseDown={rememberSelection} onChange={(event) => runCommand("foreColor", event.target.value)} className="h-5 w-5 cursor-pointer border-0 bg-transparent p-0" />
+          </label>
+          <label title="Highlight color" className="flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-200">
+            <span>Highlight</span>
+            <input type="color" aria-label="Highlight color" onMouseDown={rememberSelection} onChange={(event) => runCommand("hiliteColor", event.target.value)} className="h-5 w-5 cursor-pointer border-0 bg-transparent p-0" />
+          </label>
+          {onAttachFiles && (
+            <label title="Attach documents" className="flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-200">
+              <Paperclip size={14} />
+              <span>Attach</span>
+              <input
+                type="file"
+                multiple
+                accept={attachmentAccept}
+                className="sr-only"
+                onChange={(event) => {
+                  onAttachFiles(Array.from(event.target.files ?? []));
+                  event.target.value = "";
+                }}
+              />
+            </label>
+          )}
+        </div>
+        <div
+          ref={editorRef}
+          contentEditable
+          suppressContentEditableWarning
+          role="textbox"
+          aria-multiline="true"
+          onInput={() => onChange(editorRef.current?.innerHTML ?? "")}
+          onKeyUp={rememberSelection}
+          onMouseUp={rememberSelection}
+          onBlur={rememberSelection}
+          className={`${minHeightClassName} p-3 text-sm outline-none [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:my-0.5`}
+        />
+      </div>
+    );
+  },
+);
+
+RichEmailEditor.displayName = "RichEmailEditor";

package/src/common-components/DashboardLayout.tsx

@@ -193,7 +193,23 @@ export function DashboardLayout({
                 key={menu.id}
                 onClick={() => {
                   setActiveMenuId(menu.id);
-                  setIsSubSidebarOpen(true);
+                  if (menu.groups?.length === 1 && menu.groups[0].items?.length === 1) {
+                    const firstItemPath = menu.groups[0].items[0].path;
+                    const isInternal = basePath
+                      ? firstItemPath.startsWith(basePath)
+                      : !externalPaths.some(path => firstItemPath.startsWith(path));
+                    const href = basePath && isInternal
+                      ? firstItemPath.replace(basePath, "") || "/"
+                      : firstItemPath;
+
+                    if (isInternal) {
+                      router.push(href);
+                    } else {
+                      window.location.href = href;
+                    }
+                  } else {
+                    setIsSubSidebarOpen(true);
+                  }
                 }}
                 className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors w-full px-1 ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
                   }`}