openship 0.1.1 → 0.1.7

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

@@ -1,126 +0,0 @@
-"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

@@ -1,174 +0,0 @@
-"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

@@ -1,59 +0,0 @@
-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

@@ -1,273 +0,0 @@
-"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

@@ -1,39 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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;