openship 0.1.1 → 0.1.7

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/EnvironmentSettings.tsx

@@ -1,246 +0,0 @@
-"use client";
-import React, { useMemo, useState, useEffect, useRef } from "react";
-import EnvironmentVariables from "@/components/import-project/EnvironmentVariables";
-import { useProjectSettings } from "@/context/ProjectSettingsContext";
-import { useToast } from "@/context/ToastContext";
-import { projectsApi } from "@/lib/api";
-import generateIcon from "@/utils/icons";
-
-export const EnvironmentSettings: React.FC = () => {
-  const { environmentData, updateEnvironment, refreshEnvironment, id } = useProjectSettings();
-  const { showToast } = useToast();
-  // Convert environmentData.envVars format to EnvironmentVariables format
-  const savedEnvVars = useMemo(() => {
-    const allEnvs: Array<{ key: string; value: string; visible: boolean }> = [];
-
-    // Combine all environments into a single list
-    Object.entries(environmentData.envVars || {}).forEach(([env, vars]) => {
-      if (Array.isArray(vars)) {
-        vars.forEach((envVar: any) => {
-          allEnvs.push({
-            key: envVar.key,
-            value: envVar.value,
-            visible: false,
-          });
-        });
-      }
-    });
-
-    return allEnvs;
-  }, [environmentData.envVars]);
-
-  const [localEnvVars, setLocalEnvVars] = useState(savedEnvVars);
-  const [hasChanges, setHasChanges] = useState(false);
-  const [isEditingMode, setIsEditingMode] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const localEnvVarsRef = useRef(localEnvVars);
-
-  useEffect(() => {
-    localEnvVarsRef.current = localEnvVars;
-  }, [localEnvVars]);
-
-  // Fetch environment variables when component mounts if not already loaded
-  useEffect(() => {
-    const shouldFetch =
-      !environmentData.isLoading &&
-      !environmentData.error &&
-      (!environmentData.envVars || Object.keys(environmentData.envVars).length === 0);
-
-    if (shouldFetch) {
-      refreshEnvironment();
-    }
-  }, []);
-
-  // Update local state when environment data changes
-  useEffect(() => {
-    if (!environmentData.isLoading && savedEnvVars.length > 0) {
-      setLocalEnvVars(savedEnvVars);
-    }
-  }, [savedEnvVars]);
-
-  const handleEnvVarsChange = (
-    value:
-      | Array<{ key: string; value: string; visible: boolean }>
-      | ((
-        prev: Array<{ key: string; value: string; visible: boolean }>
-      ) => Array<{ key: string; value: string; visible: boolean }>)
-  ) => {
-    const newEnvVars = typeof value === "function" ? value(localEnvVars) : value;
-    setLocalEnvVars(newEnvVars);
-    setHasChanges(true);
-  };
-
-  const handleSave = async () => {
-    // Filter out completely empty entries (both key and value empty)
-    const filteredEnvVars = localEnvVarsRef.current.filter(env =>
-      env.key.trim() !== '' || env.value.trim() !== ''
-    );
-
-    // Validate: check if any entry has key without value or value without key
-    const invalidEntry = filteredEnvVars.find(env =>
-      (env.key.trim() !== '' && env.value.trim() === '') ||
-      (env.key.trim() === '' && env.value.trim() !== '')
-    );
-
-    if (invalidEntry) {
-      if (invalidEntry.key.trim() !== '' && invalidEntry.value.trim() === '') {
-        showToast(`Environment variable "${invalidEntry.key}" is missing a value`, 'error', 'Validation Error');
-      } else {
-        showToast('Environment variable has a value but is missing a key name', 'error', 'Validation Error');
-      }
-      return;
-    }
-
-    // Prepare data for API
-    const envData = filteredEnvVars.map(env => ({
-      key: env.key.trim(),
-      value: env.value.trim(),
-    }));
-
-    setIsSaving(true);
-
-    try {
-      // Make API request to save environment variables
-      const response = await projectsApi.setEnv(id, envData);
-
-      if (response.success) {
-        showToast('Environment variables saved successfully', 'success', 'Saved');
-
-        // Update local state with cleaned data
-        const cleanedEnvVars = filteredEnvVars.map(env => ({
-          key: env.key.trim(),
-          value: env.value.trim(),
-          visible: env.visible,
-        }));
-
-        setLocalEnvVars(cleanedEnvVars);
-
-        // Update context
-        const envVars = {
-          development: cleanedEnvVars.map((env, index) => ({
-            id: Date.now() + index,
-            key: env.key,
-            value: env.value,
-            encrypted: true,
-          })),
-          preview: [],
-          production: [],
-        };
-
-        updateEnvironment(envVars);
-        setHasChanges(false);
-        setIsEditingMode(false);
-
-      } else {
-        showToast(response.message || 'Failed to save environment variables', 'error', 'Save Failed');
-      }
-    } catch (error) {
-      console.error('Error saving environment variables:', error);
-      showToast('An error occurred while saving. Please try again.', 'error', 'Error');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setLocalEnvVars(savedEnvVars);
-    setHasChanges(false);
-    setIsEditingMode(false);
-  };
-
-  // Show loading state with skeleton
-  if (environmentData.isLoading) {
-    return (
-      <div className="space-y-4">
-        {/* Security Notice Skeleton */}
-        <div className="bg-gradient-to-r from-gray-100 to-gray-50 border border-gray-200 rounded-xl p-4 flex items-start gap-3 animate-pulse">
-          <div className="h-5 w-5 bg-gray-300/30 rounded-full mt-0.5 flex-shrink-0"></div>
-          <div className="flex-1 space-y-2">
-            <div className="h-4 bg-gray-300/30 rounded-full w-40"></div>
-            <div className="h-3 bg-gray-200/30 rounded-full w-full"></div>
-            <div className="h-3 bg-gray-200/30 rounded-full w-3/4"></div>
-          </div>
-        </div>
-
-        {/* Environment Variables Container Skeleton */}
-        <div className="bg-white border border-gray-200 rounded-xl p-6 space-y-4">
-          {/* Header Skeleton */}
-          <div className="flex items-center justify-between pb-4 border-b border-gray-200">
-            <div className="h-6 bg-gray-300/30 rounded-full w-48 animate-pulse"></div>
-            <div className="h-10 bg-gray-300/30 rounded-full w-32 animate-pulse"></div>
-          </div>
-
-          {/* Environment Variable Items Skeleton */}
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg animate-pulse">
-              <div className="flex-1 space-y-2">
-                <div className="h-4 bg-gray-300/30 rounded-full w-32"></div>
-                <div className="h-3 bg-gray-200/30 rounded-full w-48"></div>
-              </div>
-              <div className="flex gap-2">
-                <div className="h-8 w-8 bg-gray-300/30 rounded-full"></div>
-                <div className="h-8 w-8 bg-gray-300/30 rounded-full"></div>
-              </div>
-            </div>
-          ))}
-
-          {/* Add Button Skeleton */}
-          <div className="flex justify-center pt-4">
-            <div className="h-10 bg-gray-300/30 rounded-full w-48 animate-pulse"></div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Show error state
-  if (environmentData.error) {
-    return (
-      <div className="space-y-4">
-        <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-start gap-3">
-          <div className="flex-1">
-            <h4 className="font-semibold text-red-900 mb-1">Error Loading Environment</h4>
-            <p className="text-sm text-red-800">{environmentData.error}</p>
-            <button
-              onClick={refreshEnvironment}
-              className="mt-3 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-            >
-              Retry
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4" style={{ opacity: isSaving ? 0.5 : 1, transition: 'opacity 0.3s', pointerEvents: isSaving ? 'none' : 'auto' }}>
-      {/* Security Notice */}
-      <div className="bg-gradient-to-r from-green-50 to-emerald-50 border relative border-green-200 rounded-xl p-4 flex items-start gap-3">
-        <div className="w-10 h-10 bg-green-100 rounded-xl absolute flex items-center justify-center border border-green-200">
-          {generateIcon('shield-123-1691989638.png', 24, 'var(--color-green-600)')}
-        </div>
-        <div className="ml-14">
-          <h4 className="font-semibold text-green-900 mb-1">Secure & Encrypted</h4>
-          <p className="text-sm text-green-800">
-            All environment variables are stored with end-to-end encryption. We don't have access to your environment variables, and no third party can access them.
-          </p>
-        </div>
-      </div>
-
-      {/* Environment Variables Component */}
-      <EnvironmentVariables
-        mode="settings"
-        envVars={localEnvVars}
-        onEnvVarsChange={handleEnvVarsChange}
-        isEditingMode={isEditingMode}
-        setIsEditingMode={setIsEditingMode}
-        onSave={handleSave}
-        onCancel={handleCancel}
-        hasChanges={hasChanges}
-        isSaving={isSaving}
-      />
-    </div>
-  );
-};

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/GeneralSettings.tsx

@@ -1,93 +0,0 @@
-import React from "react";
-import {
-  TrafficChart,
-  TopPaths,
-  StatsCards,
-  ProductionUrl,
-  ProjectIdentity,
-  ProjectInfo,
-} from "./general";
-import { useProjectSettings } from "@/context/ProjectSettingsContext";
-
-export const GeneralSettings = () => {
-  const {
-    analyticsData,
-    isLoadingAnalytics,
-  } = useProjectSettings();
-
-  // Format large numbers
-  const formatNumber = (num: number): string => {
-    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
-    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
-    return num?.toString() || '0';
-  };
-
-  // Analytics stats
-  const stats = analyticsData ? [
-    {
-      label: "Server Requests",
-      value: formatNumber(analyticsData.summary?.uniqueRequests),
-      icon: 'server%20transfer-55-1658435258.png',
-      subtext: `${formatNumber(analyticsData.summary?.totalRequests)} total, ${analyticsData.summary?.avgRequestsPerHour}/hr avg`
-    },
-    {
-      label: "Unique IPs",
-      value: formatNumber(analyticsData.summary?.uniqueIPs),
-      icon: '3%20users-246-1658436041.png',
-      subtext: `${analyticsData.summary?.uniqueIPsPercentage}% of total`
-    },
-    {
-      label: "Avg Response",
-      value: `${analyticsData.performance?.avgResponseTimeMs?.toFixed(2) || 'N/A '}ms`,
-      icon: 'flash-109-1689918656.png',
-      subtext: "Response time"
-    },
-    {
-      label: "Bandwidth Out",
-      value: analyticsData.bandwidth?.totalOutFormatted || 'N/A',
-      icon: 'servers%20connect%203-61-1658435258.png',
-      subtext: `${analyticsData.bandwidth?.totalInFormatted} in`
-    },
-  ] : [
-    { label: "Server Requests", value: "...", icon: 'trend%20up-79-1681196106.png', subtext: "Loading..." },
-    { label: "Unique IPs", value: "...", icon: '3%20users-246-1658436041.png', subtext: "Loading..." },
-    { label: "Avg Response", value: "...", icon: 'flash-109-1689918656.png', subtext: "Loading..." },
-    { label: "Bandwidth", value: "...", icon: 'servers%20connect%203-61-1658435258.png', subtext: "Loading..." },
-  ];
-
-  // Prepare data for components
-  const trafficData = analyticsData?.trafficByHour || [];
-  const topPaths = analyticsData?.topPaths || [];
-  const dateRange = analyticsData
-    ? `${new Date(analyticsData.summary.firstRequest).toLocaleDateString()} - ${new Date(analyticsData.summary.lastRequest).toLocaleDateString()}`
-    : undefined;
-
-
-  return (
-    <div className="space-y-5">
-      {/* Main Grid Layout */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
-        {/* Left Column - 2 cols */}
-        <div className="lg:col-span-2 space-y-5">
-          <TrafficChart
-            trafficData={trafficData}
-            isLoading={isLoadingAnalytics}
-            dateRange={dateRange}
-            totalRequests={analyticsData?.summary.totalRequests}
-          />
-
-          <StatsCards stats={stats} />
-
-          <ProjectIdentity />
-        </div>
-
-        {/* Right Column - 1 col */}
-        <div className="space-y-5">
-          <ProductionUrl />
-          <ProjectInfo />
-          {topPaths.length > 0 && <TopPaths paths={topPaths} />}
-        </div>
-      </div>
-    </div>
-  );
-};

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/GitInfo.tsx

@@ -1,261 +0,0 @@
-import React, { useState } from "react";
-import { Github, GitCommit, Zap, GitBranch, Check, X } from "lucide-react";
-import { useProjectSettings } from "@/context/ProjectSettingsContext";
-import { projectsApi } from "@/lib/api";
-import { useToast } from "@/context/ToastContext";
-import generateIcon from "@/utils/icons";
-import { formatDate } from "@/utils/date";
-
-export const GitInfo = () => {
-  const { projectData, id, updateProjectData } = useProjectSettings();
-  const { showToast } = useToast();
-  
-  const [isEditingBranch, setIsEditingBranch] = useState(false);
-  const [tempBranch, setTempBranch] = useState(projectData?.branch || 'main');
-  const [branches, setBranches] = useState<string[]>([]);
-  const [loadingBranch, setLoadingBranch] = useState(false);
-  const [loadingAutoDeploy, setLoadingAutoDeploy] = useState(false);
-
-  const handleEditBranch = async () => {
-    if (!projectData?.id) return;
-
-    setLoadingBranch(true);
-    try {
-      // Fetch available branches
-      const response = await projectsApi.getBranches(projectData.id);
-      if (response.success) {
-        setBranches(response.branches || []);
-        setIsEditingBranch(true);
-        setTempBranch(projectData.branch || 'main');
-      } else {
-        showToast('Failed to fetch branches', 'error', 'Error');
-      }
-    } catch (error) {
-      console.error('Error fetching branches:', error);
-      showToast('Failed to fetch branches', 'error', 'Error');
-    } finally {
-      setLoadingBranch(false);
-    }
-  };
-
-  const handleSaveBranch = async () => {
-    if (!projectData?.id) return;
-
-    setLoadingBranch(true);
-    try {
-      const response = await projectsApi.setBranch(projectData.id, tempBranch);
-      if (response.success) {
-        setIsEditingBranch(false);
-        showToast('Branch updated successfully', 'success', 'Updated');
-        // You might need to refresh project data here
-      } else {
-        showToast(response.message || 'Failed to update branch', 'error', 'Error');
-      }
-    } catch (error) {
-      console.error('Error updating branch:', error);
-      showToast('Failed to update branch', 'error', 'Error');
-    } finally {
-      setLoadingBranch(false);
-    }
-  };
-
-  const handleCancelBranch = () => {
-    setIsEditingBranch(false);
-    setTempBranch(projectData?.branch || 'main');
-  };
-
-  const handleAutoDeployToggle = async () => {
-    if (!projectData?.id) return;
-
-    setLoadingAutoDeploy(true);
-    try {
-      const newAutoDeployState = !projectData.auto_deploy;
-      const response = await projectsApi.gitSwitch(projectData.id, newAutoDeployState);
-      
-      if (response.success) {
-        showToast(
-          newAutoDeployState ? 'Auto-deploy enabled' : 'Auto-deploy disabled', 
-          'success', 
-          'Updated'
-        );
-        updateProjectData({ auto_deploy: newAutoDeployState });
-      } else {
-        showToast(response.message || 'Failed to update auto-deploy', 'error', 'Error');
-      }
-    } catch (error) {
-      console.error('Error updating auto-deploy:', error);
-      showToast('Failed to update auto-deploy', 'error', 'Error');
-    } finally {
-      setLoadingAutoDeploy(false);
-    }
-  };
-
-  return (
-    <div className="lg:sticky lg:top-6 h-fit space-y-4">
-      {/* Git Repository Card */}
-      <div className="bg-white rounded-[20px] border border-black/5 p-5">
-        <div className="flex items-center gap-3 mb-5">
-          {generateIcon('https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', 24, 'white', {}, true)}
-          <div className="flex-1 min-w-0">
-            <p className="font-semibold text-base text-black truncate">{projectData?.owner + '/' + projectData?.repo || 'Repository'}</p>
-            <p className="text-sm text-black/50">{projectData?.branch || 'main'}</p>
-          </div>
-        </div>
-
-        {/* Auto-deploy Toggle */}
-        <div className="p-4 rounded-xl bg-black/5 mb-4">
-          <div className="flex items-center justify-between mb-2">
-            <div className="flex items-center gap-2">
-              <Zap className="h-4 w-4 text-indigo-600" />
-              <span className="text-sm font-medium text-black">Auto-deploy</span>
-            </div>
-            <button
-              type="button"
-              role="switch"
-              aria-checked={projectData?.auto_deploy || false}
-              onClick={handleAutoDeployToggle}
-              disabled={loadingAutoDeploy}
-              className={`
-                relative inline-flex h-6 w-11 items-center rounded-full transition-colors
-                ${projectData?.auto_deploy ? 'bg-indigo-600' : 'bg-black/20'}
-                ${loadingAutoDeploy ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
-              `}
-            >
-              {loadingAutoDeploy ? (
-                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mx-auto" />
-              ) : (
-                <span
-                  className={`
-                    inline-block h-4 w-4 transform rounded-full bg-white transition-transform
-                    ${projectData?.auto_deploy ? 'translate-x-6' : 'translate-x-1'}
-                  `}
-                />
-              )}
-            </button>
-          </div>
-          <p className="text-xs text-black/50">
-            {projectData?.auto_deploy
-              ? 'Deploys on every push'
-              : 'Manual deploys only'}
-          </p>
-        </div>
-
-        {/* Branch Selection */}
-        <div className="mb-4">
-          <div className="flex items-center justify-between mb-2">
-            <label className="block text-sm font-normal text-black">Branch to Deploy</label>
-            {!isEditingBranch && (
-              <button
-                onClick={handleEditBranch}
-                disabled={loadingBranch}
-                className="p-1.5 text-black/40 hover:text-indigo-600 transition-colors disabled:opacity-50"
-              >
-                {loadingBranch ? (
-                  <div className="w-4 h-4 border-2 border-black/20 border-t-black/60 rounded-full animate-spin" />
-                ) : (
-                  generateIcon('pen-411-1658238246.png', 16, 'rgb(0, 0, 0, 0.5)')
-                )}
-              </button>
-            )}
-          </div>
-
-          {isEditingBranch ? (
-            <div className="space-y-3">
-              <select
-                value={tempBranch}
-                onChange={(e) => setTempBranch(e.target.value)}
-                className="w-full px-5 py-3 border border-black/10 rounded-[15px] outline-none text-black bg-white focus:ring-2 focus:ring-black focus:border-transparent cursor-text"
-              >
-                {branches.map((branch) => (
-                  <option key={branch} value={branch}>
-                    {branch}
-                  </option>
-                ))}
-              </select>
-              <p className="text-xs text-black/50 mt-2">
-                Choose which branch to deploy from your repository
-              </p>
-              <div className="flex gap-2">
-                <button
-                  onClick={handleSaveBranch}
-                  disabled={loadingBranch}
-                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full transition-all text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-                >
-                  <Check className="w-4 h-4" />
-                  Save
-                </button>
-                <button
-                  onClick={handleCancelBranch}
-                  className="px-4 py-2 bg-black/5 hover:bg-black/10 text-black rounded-full transition-all text-sm font-medium flex items-center gap-2"
-                >
-                  <X className="w-4 h-4" />
-                  Cancel
-                </button>
-              </div>
-            </div>
-          ) : (
-            <div className="relative p-4 bg-white rounded-xl group hover:bg-black/5 transition-all border border-black/10">
-              <div className="flex items-center gap-3">
-                <GitBranch className="w-5 h-5 text-black/50" />
-                <p className="text-sm font-medium text-black flex-1 font-mono">{projectData?.branch || 'main'}</p>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Action Buttons */}
-        <div className="space-y-2">
-          <a
-            href={projectData?.repositoryUrl || 'https://github.com/' + projectData?.owner + '/' + projectData?.repo}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="w-full px-4 py-2.5 bg-black/5 hover:bg-black/10 text-black rounded-full font-medium text-sm transition-all flex items-center justify-center gap-2"
-          >
-            {generateIcon('External_link_HtLszLDBXqHilHK674zh2aKoSL7xUhyboAzP.png', 16, 'currentColor')}
-            View on GitHub
-          </a>
-        </div>
-      </div>
-
-      {/* Recent Commits - Only show if there are commits */}
-      {(projectData?.commitCount || 0) > 0 && (
-        <div className="bg-white rounded-[20px] border border-black/5 p-5">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-sm font-semibold text-black flex items-center gap-2">
-              {generateIcon('commit%20git-24-1658431404.png', 20, 'black')}
-              Recent Commits
-            </h3>
-            <span className="text-xs text-black/50 bg-black/5 px-2 py-1 rounded-full">
-              {projectData?.commitCount || 0} total
-            </span>
-          </div>
-          
-          {projectData?.recentCommits && projectData.recentCommits.length > 0 ? (
-            <div className="space-y-3">
-              {projectData.recentCommits.slice(0, 3).map((commit: any, i: number) => (
-                <div key={i} className="p-3 bg-black/5 rounded-lg border border-black/10">
-                  <div className="flex items-start gap-2 mb-2">
-                    <div className="w-2 h-2 bg-indigo-500 rounded-full mt-2 flex-shrink-0"></div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-xs font-medium text-black truncate">{commit.message}</p>
-                      <div className="flex items-center gap-2 text-xs mt-1 text-black/50">
-                        <span className="font-mono">{commit.id?.substring(0, 7)}</span>
-                        <span>•</span>
-                        <span>{formatDate(commit.time, undefined, undefined, true)}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-6">
-              <GitCommit className="h-8 w-8 text-black/20 mx-auto mb-2" />
-              <p className="text-xs text-black/50">No commits yet</p>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};