openship 0.1.0 → 0.1.1

package/apps/dashboard/src/components/ui/CustomSelect.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { ChevronDown, Check } from "lucide-react";
+
+interface Option<T extends string> {
+  value: T;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+interface CustomSelectProps<T extends string> {
+  value: T;
+  options: Option<T>[];
+  onChange: (value: T) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function CustomSelect<T extends string>({
+  value,
+  options,
+  onChange,
+  placeholder = "Select",
+  className = "",
+}: CustomSelectProps<T>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+
+  const handleSelect = (optionValue: T) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`}>
+      {/* Select Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`
+          w-full px-4 py-3 rounded-2xl text-sm font-medium
+          transition-all duration-200 flex items-center justify-between gap-2
+          border border-border/50
+          ${isOpen 
+            ? 'bg-muted/80 border-border' 
+            : 'bg-muted/40 hover:bg-muted/60 hover:border-border'
+          }
+        `}
+        type="button"
+      >
+        <span className="flex items-center gap-2 truncate text-foreground/70">
+          {selectedOption?.icon}
+          {selectedOption?.label || <span className="text-muted-foreground">{placeholder}</span>}
+        </span>
+        <ChevronDown
+          className={`w-4 h-4 text-muted-foreground transition-transform duration-200 flex-shrink-0 ${
+            isOpen ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute z-50 w-full mt-2 bg-popover border border-border/50 rounded-2xl overflow-hidden shadow-xl shadow-black/[0.08]">
+          <div className="py-1.5 max-h-64 overflow-y-auto">
+            {options.map((option) => {
+              const isSelected = option.value === value;
+              return (
+                <button
+                  key={option.value}
+                  onClick={() => handleSelect(option.value)}
+                  className={`
+                    w-full px-4 py-2.5 text-left flex items-center justify-between gap-2 
+                    text-sm transition-all duration-150
+                    ${isSelected 
+                      ? 'bg-accent text-accent-foreground font-medium' 
+                      : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+                    }
+                  `}
+                  type="button"
+                >
+                  <span className="flex items-center gap-2 truncate">
+                    {option.icon}
+                    {option.label}
+                  </span>
+                  {isSelected && (
+                    <Check className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/dashboard/src/components/ui/DropdownMenu.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { MoreHorizontal } from "lucide-react";
+
+export interface MenuAction {
+  id: string;
+  /** Omit `label` (and `onClick`) to render a pure horizontal divider row. */
+  label?: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  variant?: "default" | "danger" | "success" | "warning";
+  disabled?: boolean;
+  /** Render a horizontal rule after this item (or as this item when `label` is omitted). */
+  divider?: boolean;
+}
+
+interface DropdownMenuProps {
+  actions: MenuAction[];
+  trigger?: React.ReactNode;
+  align?: "left" | "right";
+  className?: string;
+  triggerClassName?: string;
+  disabled?: boolean;
+}
+
+const DropdownMenu: React.FC<DropdownMenuProps> = ({
+  actions,
+  trigger,
+  align = "right",
+  className = "",
+  triggerClassName = "",
+  disabled = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+
+  const handleActionClick = (action: MenuAction) => {
+    if (!action.disabled && action.onClick) {
+      action.onClick();
+      setIsOpen(false);
+    }
+  };
+
+  const getVariantStyles = (variant: MenuAction["variant"]) => {
+    switch (variant) {
+      case "danger":
+        return {
+          color: "#ef4444",
+          hoverBg: "rgba(239, 68, 68, 0.08)",
+        };
+      case "success":
+        return {
+          color: "#10b981",
+          hoverBg: "rgba(16, 185, 129, 0.08)",
+        };
+      case "warning":
+        return {
+          color: "#f59e0b",
+          hoverBg: "rgba(245, 158, 11, 0.08)",
+        };
+      default:
+        return {
+          color: "#1f2937",
+          hoverBg: "rgba(0, 0, 0, 0.04)",
+        };
+    }
+  };
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`}>
+      {/* Trigger Button */}
+      <button
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`${triggerClassName ||
+          `p-2 rounded-lg transition-all duration-200 ${
+            disabled
+              ? "opacity-50 cursor-not-allowed"
+              : "hover:bg-muted active:bg-muted/80"
+          }`
+        }`}
+        type="button"
+        style={{
+          backgroundColor: isOpen && !triggerClassName ? "hsl(var(--muted))" : undefined,
+        }}
+      >
+        {trigger || <MoreHorizontal className="w-4 h-4 text-muted-foreground" />}
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div
+          className={`absolute z-50 mt-2 bg-card border border-border/50 rounded-2xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200 ${align === "right" ? "right-0" : "left-0"
+            }`}
+          style={{
+            minWidth: "220px",
+            boxShadow: "0 20px 40px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06)",
+          }}
+        >
+          <div className="py-2 px-2 flex flex-col">
+            {actions.map((action, index) => {
+              // Pure divider row — no button, just a line
+              if (!action.label && action.divider) {
+                return <div key={action.id} className="my-2 mx-3 border-t border-border/50" />;
+              }
+
+              const styles = getVariantStyles(action.variant);
+              const iconString = typeof action.icon === 'string' ? action.icon : undefined;
+
+              return (
+                <React.Fragment key={action.id}>
+                  <button
+                    onClick={() => handleActionClick(action)}
+                    disabled={action.disabled}
+                    className={`w-full hover:bg-muted active:bg-muted/80 px-3 py-3 text-left flex items-center gap-3 transition-all duration-200 rounded-xl ${action.disabled
+                        ? "opacity-50 cursor-not-allowed"
+                        : "cursor-pointer"
+                      }`}
+                    type="button"
+                    style={{
+                      color: action.disabled ? "hsl(var(--muted-foreground))" : styles.color,
+                    }}
+                  >
+                    {action.icon && (
+                      <div className="icon-wrapper w-5 h-5 flex items-center justify-center flex-shrink-0 transition-transform duration-200">
+                        {action.icon}
+                      </div>
+                    )}
+                    <span className="text-[14px] font-medium truncate">
+                      {action.label}
+                    </span>
+                  </button>
+                  {action.divider && index < actions.length - 1 && (
+                    <div className="my-2 mx-3 border-t border-border/50" />
+                  )}
+                </React.Fragment>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DropdownMenu;

package/apps/dashboard/src/components/ui/FileIcon.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { extToLangMap } from '@/utils/extToLang.js';
+// Import the icon theme data
+import { theme } from '@/utils/theme.js';
+
+// File/Folder icon component
+const FileIcon = ({ language, fileName = '', style }) => {
+
+    // Get file extension for mapping
+    const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
+    // console.log(fileExtension, fileName);
+    // Get icon definition
+    let id
+
+        if (theme.fileNames[fileName]) {
+        id = theme.fileNames[fileName]
+    } else if (theme.fileExtensions[fileExtension]) {
+        id = theme.fileExtensions[fileExtension]
+    } else if (theme.languageIds[language]) {
+        id = theme.languageIds[language]
+    } else if (theme.languageIds[extToLangMap[fileExtension]]) {
+        id = theme.languageIds[extToLangMap[fileExtension]]
+    } else if (theme.languageIds[fileExtension]) {
+        id = theme.languageIds[fileExtension]
+    } else {
+
+     }
+
+    const iconDef = theme.iconDefinitions[id]
+
+    if (iconDef) {
+        return (
+            <div className="flex items-center">
+                <span
+                    className="mr-1 w-[16px]"
+                    data-icon={id}
+                    style={{
+                        fontFamily: 'monokai_pro_icons',
+                        color: iconDef.fontColor,
+                        fontSize: '16px',
+                        width: '16px',
+                        height: '16px',
+                        lineHeight: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        ...style
+                    }}
+                >
+                    {String.fromCharCode(parseInt(iconDef.fontCharacter.replace('\\', '0x'), 16))}
+                </span>
+            </div>
+        );
+    }else {
+    }
+
+};
+
+export default FileIcon;

package/apps/dashboard/src/components/ui/IconPickerModal.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Search, Loader2, X } from 'lucide-react';
+import { iconsApi } from '@/lib/api';
+import generateIcon from '@/utils/icons';
+
+interface IconResult {
+    url: string;
+    filename: string;
+    name?: string;
+}
+
+interface IconPickerModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectIcon: (filename: string) => void;
+    currentIcon?: string;
+    title?: string;
+}
+
+export function IconPickerModal({
+    isOpen,
+    onClose,
+    onSelectIcon,
+    currentIcon,
+    title = "Choose Icon"
+}: IconPickerModalProps) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [icons, setIcons] = useState<IconResult[]>([]);
+    const [isSearching, setIsSearching] = useState(false);
+    const [selectedIcon, setSelectedIcon] = useState<string | null>(currentIcon || null);
+    const [offset, setOffset] = useState(0);
+    const [hasMore, setHasMore] = useState(false);
+    const [total, setTotal] = useState(0);
+    const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const isLoadingMoreRef = useRef(false);
+
+    // Debounced search
+    useEffect(() => {
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+
+        if (!searchTerm.trim()) {
+            setIcons([]);
+            setOffset(0);
+            setHasMore(false);
+            setTotal(0);
+            return;
+        }
+
+        searchTimeoutRef.current = setTimeout(() => {
+            searchIcons(false);
+        }, 500);
+
+        return () => {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, [searchTerm]);
+
+    // Reset selected icon when modal opens
+    useEffect(() => {
+        if (isOpen) {
+            setSelectedIcon(currentIcon || null);
+        }
+    }, [isOpen, currentIcon]);
+
+    const searchIcons = async (append = false) => {
+        if (isSearching) return;
+
+        const query = searchTerm.trim();
+        if (!query) return;
+
+        setIsSearching(true);
+
+        try {
+            const currentOffset = append ? offset : 0;
+            const response = await iconsApi.search(query, currentOffset, append ? 50 : 100);
+
+            if (response && response.results) {
+                const results = Array.isArray(response.results)
+                    ? response.results
+                    : Object.values(response.results);
+
+                if (append) {
+                    setIcons(prev => [...prev, ...results]);
+                } else {
+                    setIcons(results);
+                }
+
+                setOffset(response.offset || 0);
+                setHasMore(response.hasMore || false);
+                setTotal(response.total || 0);
+            }
+        } catch (error) {
+            console.error('Error searching icons:', error);
+        } finally {
+            setIsSearching(false);
+            isLoadingMoreRef.current = false;
+        }
+    };
+
+    const handleScroll = useCallback(() => {
+        if (!scrollContainerRef.current || isLoadingMoreRef.current || !hasMore || isSearching) {
+            return;
+        }
+
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+
+        if (scrollHeight - scrollTop <= clientHeight + 300) {
+            isLoadingMoreRef.current = true;
+            searchIcons(true);
+        }
+    }, [hasMore, isSearching, offset]);
+
+    const handleSelectIcon = (filename: string) => {
+        setSelectedIcon(filename);
+    };
+
+    const handleConfirm = () => {
+        if (selectedIcon) {
+            onSelectIcon(selectedIcon);
+            onClose();
+        }
+    };
+
+    const handleClose = () => {
+        setSearchTerm('');
+        setIcons([]);
+        setOffset(0);
+        setHasMore(false);
+        setTotal(0);
+        onClose();
+    };
+
+    return (
+        <div className="flex flex-col h-full min-h-[30rem]">
+            {/* Header */}
+            <div className="px-6 py-4 border-b border-border/50 flex-shrink-0">
+                <div className="flex items-center justify-between gap-4">
+                    <div className="flex-1">
+                        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+                    </div>
+
+                    {/* Search Box - inline with header */}
+                    <div className="flex-1 relative">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                        <input
+                            type="text"
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            placeholder="Search icons..."
+                            className="w-full pl-9 pr-4 py-2 bg-muted/50 border border-border/50 rounded-lg text-sm text-foreground placeholder:text-muted-foreground focus:outline-none transition-all"
+                            autoFocus
+                        />
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                        {total > 0 && (
+                            <p className="text-xs text-muted-foreground whitespace-nowrap">
+                                {offset} of {total}
+                            </p>
+                        )}
+                        <button
+                            onClick={handleClose}
+                            className="p-1.5 rounded-xl bg-card hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+                        >
+                            <X className="w-5 h-5" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Icons Grid */}
+            <div
+                ref={scrollContainerRef}
+                onScroll={handleScroll}
+                className="flex-1 overflow-y-auto min-h-0 relative"
+            >
+                {!searchTerm.trim() ? (
+                    <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-6">
+                        <div className="w-16 h-16 rounded-xl bg-muted flex items-center justify-center mb-3">
+                            <Search className="w-8 h-8 text-muted-foreground" />
+                        </div>
+                        <h3 className="text-base font-medium text-muted-foreground mb-1">Start Searching</h3>
+                        <p className="text-sm text-muted-foreground">Enter a keyword to find icons</p>
+                    </div>
+                ) : isSearching && icons.length === 0 ? (
+                    <div className="absolute inset-0 flex flex-col items-center justify-center p-6">
+                        <Loader2 className="w-8 h-8 text-muted-foreground animate-spin mb-3" />
+                        <p className="text-sm text-muted-foreground">Searching for icons...</p>
+                    </div>
+                ) : icons.length === 0 ? (
+                    <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-6">
+                        <div className="w-16 h-16 rounded-xl bg-muted flex items-center justify-center mb-3">
+                            <Search className="w-8 h-8 text-muted-foreground" />
+                        </div>
+                        <h3 className="text-base font-medium text-muted-foreground mb-1">No Icons Found</h3>
+                        <p className="text-sm text-muted-foreground">Try a different search term</p>
+                    </div>
+                ) : (
+                    <div className="p-6">
+                        <div className="flex flex-wrap gap-3 justify-between">
+                            {icons.map((icon, index) => {
+                                const filename = icon.filename || icon.url.split('/').pop() || '';
+                                const isSelected = selectedIcon === filename;
+
+                                return (
+                                    <button
+                                        key={`${filename}-${index}`}
+                                        onClick={() => handleSelectIcon(filename)}
+                                        className={`flex w-16 h-16 flex-col items-center justify-center p-3 rounded-lg transition-all group ${isSelected
+                                                ? 'bg-primary text-primary-foreground ring-2 ring-primary'
+                                                : ''
+                                            }`}
+                                    >
+                                        <div className={`w-16 h-16 rounded-lg flex items-center justify-center  transition-all ${isSelected
+                                                ? ''
+                                                : 'group-hover:scale-105'
+                                            }`}>
+                                            <div className="scale-[0.75]">
+                                                {generateIcon(filename, 40, isSelected ? 'hsl(var(--primary-foreground))' : 'hsl(var(--foreground))')}
+                                            </div>
+                                        </div>
+                                    </button>
+                                );
+                            })}
+                        </div>
+
+                        {/* Loading More Indicator */}
+                        {isSearching && icons.length > 0 && (
+                            <div className="flex justify-center items-center py-6">
+                                <Loader2 className="w-5 h-5 text-muted-foreground animate-spin" />
+                                <span className="ml-2 text-xs text-muted-foreground">Loading more...</span>
+                            </div>
+                        )}
+
+                        {/* No More Results */}
+                        {!hasMore && icons.length > 0 && (
+                            <div className="text-center py-6">
+                                <p className="text-xs text-muted-foreground">No more results</p>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            {/* Footer */}
+            <div className="px-6 py-3 border-t border-border/50 flex gap-3 flex-shrink-0">
+                <button
+                    onClick={handleClose}
+                    className="flex-1 px-4 py-3 text-sm font-medium text-foreground bg-muted hover:bg-muted/80 rounded-xl transition-colors"
+                >
+                    Cancel
+                </button>
+                <button
+                    onClick={handleConfirm}
+                    disabled={!selectedIcon}
+                    className="flex-1 px-4 py-3 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    {selectedIcon ? 'Select Icon' : 'Choose an icon'}
+                </button>
+            </div>
+        </div>
+    );
+}
+
+
+export default IconPickerModal;

package/apps/dashboard/src/components/ui/InfoBanner.jsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Info, ChevronDown, ChevronUp } from 'lucide-react';
+
+const InfoBanner = ({ title, children, content, icon, defaultExpanded = false }) => {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  // Support both children and content props for flexibility
+  const bannerContent = content || children;
+  const bannerIcon = <Info className="w-5 h-5 text-indigo-600 flex-shrink-0" />;
+
+  return (
+    <div className="bg-indigo-50 rounded-[20px] border border-indigo-100 overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full p-5 flex items-center justify-between hover:bg-indigo-100/50 transition-colors"
+      >
+        <div className="flex items-center space-x-3">
+          {bannerIcon}
+          <h4 className="text-sm font-semibold text-indigo-900">{title}</h4>
+        </div>
+        {expanded ? (
+          <ChevronUp className="w-5 h-5 text-indigo-600" />
+        ) : (
+          <ChevronDown className="w-5 h-5 text-indigo-600" />
+        )}
+      </button>
+      {expanded && bannerContent && (
+        <div className="px-5 pb-5">
+          {bannerContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InfoBanner;
+

package/apps/dashboard/src/components/ui/Logo.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface LogoProps {
+  className?: string;
+  color?: string;
+}
+
+const Logo: React.FC<LogoProps> = ({ className = '', color = '#fff' }) => {
+  return (
+    <svg style={{width: 60,height: 50}} version="1.0" xmlns="http://www.w3.org/2000/svg" width="499.000000pt" height="359.000000pt" viewBox="0 0 499.000000 359.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,359.000000) scale(0.100000,-0.100000)" fill={color} stroke="none"><path d="M2817 2923 c-4 -3 -7 -241 -7 -527 l0 -521 131 -103 c72 -57 132   -102 133 -100 2 2 19 38 39 81 141 302 522 398 785 199 252 -191 280 -549 60   -778 -156 -163 -395 -207 -594 -109 -99 48 -115 61 -779 605 -605 495 -738   594 -866 648 -281 116 -602 64 -841 -137 -301 -254 -387 -673 -211 -1026 46   -92 87 -146 170 -226 82 -78 143 -121 228 -160 255 -115 548 -100 786 41 129   76 280 241 328 358 15 36 29 20 -144 160 -55 45 -102 78 -106 74 -3 -4 -13   -28 -23 -54 -60 -163 -205 -286 -381 -323 -88 -18 -122 -18 -210 0 -245 52   -415 261 -415 510 0 200 113 383 290 468 173 83 343 71 516 -36 56 -35 847   -673 1314 -1060 105 -87 249 -164 360 -191 217 -54 452 -17 657 106 66 39 196   163 241 229 50 75 99 180 124 265 30 104 32 323 4 424 -84 303 -303 526 -602   612 -65 19 -103 22 -219 22 -163 0 -243 -18 -375 -84 l-80 -40 0 340 0 340   -153 0 c-85 0 -157 -3 -160 -7z"></path></g></svg>
+  );
+};
+
+export default Logo;