openship 0.1.0 → 0.1.1

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

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

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

@@ -0,0 +1,261 @@
+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>
+  );
+};