openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,391 @@
+import React, { useState, useEffect, useRef } from "react";
+import { GitBranch, Github, ExternalLink, GitCommit, User, FileCode, Plus, ChevronDown, ChevronRight, Sparkles, Zap, Settings } from "lucide-react";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import generateIcon from "@/utils/icons";
+import { formatDate } from "@/utils/date";
+import FileIcon from "@/components/ui/FileIcon";
+import { projectsApi } from "@/lib/api";
+// Loading Skeleton Components
+const RepositoryInfoSkeleton = () => {
+  return (
+    <div className="p-5 border border-black/10 rounded-xl bg-white animate-pulse">
+      <div className="flex items-start gap-4 mb-5">
+        <div className="w-12 h-12 bg-gray-300/30 rounded-xl"></div>
+        <div className="flex-1">
+          <div className="h-5 w-48 bg-gray-300/30 rounded-full mb-2"></div>
+          <div className="flex items-center gap-3">
+            <div className="h-6 w-20 bg-gray-200/30 rounded-full"></div>
+            <div className="h-4 w-16 bg-gray-200/30 rounded-full"></div>
+          </div>
+        </div>
+      </div>
+      <div className="flex gap-3 pt-4 border-t border-black/10">
+        <div className="flex-1 h-10 bg-gray-200/30 rounded-full"></div>
+        <div className="h-10 w-28 bg-gray-200/30 rounded-full"></div>
+      </div>
+    </div>
+  );
+};
+
+const IntegrationStatusSkeleton = () => {
+  return (
+    <div className="p-5 border border-black/10 rounded-xl bg-white animate-pulse">
+      <div className="h-4 w-32 bg-gray-300/30 rounded-full mb-4"></div>
+      <div className="grid grid-cols-2 gap-3">
+        <div className="p-3 bg-gray-100 rounded-lg border border-gray-200">
+          <div className="h-3 w-16 bg-gray-200/30 rounded-full mb-1"></div>
+          <div className="h-4 w-12 bg-gray-300/30 rounded-full"></div>
+        </div>
+        <div className="p-3 bg-gray-100 rounded-lg border border-gray-200">
+          <div className="h-3 w-16 bg-gray-200/30 rounded-full mb-1"></div>
+          <div className="h-4 w-12 bg-gray-300/30 rounded-full"></div>
+        </div>
+        <div className="col-span-2 p-3 bg-gray-100 rounded-lg border border-gray-200">
+          <div className="h-3 w-16 bg-gray-200/30 rounded-full mb-1"></div>
+          <div className="h-4 w-20 bg-gray-300/30 rounded-full"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const CommitsSkeleton = () => {
+  return (
+    <div>
+      <div className="h-4 w-32 bg-gray-300/30 rounded-full mb-4 animate-pulse"></div>
+      <div className="space-y-2">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="bg-white border border-black/10 rounded-lg p-3 animate-pulse">
+            <div className="flex items-start gap-2 mb-2">
+              <div className="w-4 h-4 bg-gray-200/30 rounded-full mt-0.5"></div>
+              <div className="h-5 w-16 bg-gray-200/30 rounded-full"></div>
+              <div className="flex-1 min-w-0">
+                <div className="h-4 w-full bg-gray-300/30 rounded-full mb-2"></div>
+                <div className="flex items-center gap-2">
+                  <div className="w-5 h-5 rounded-full bg-gray-200/30"></div>
+                  <div className="h-3 w-20 bg-gray-200/30 rounded-full"></div>
+                  <div className="h-3 w-16 bg-gray-200/30 rounded-full"></div>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 text-xs ml-6">
+              <div className="h-3 w-12 bg-gray-200/30 rounded-full"></div>
+              <div className="h-3 w-8 bg-gray-200/30 rounded-full"></div>
+              <div className="h-3 w-8 bg-gray-200/30 rounded-full"></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const EmptyCommitsState = () => {
+  return (
+    <div className="bg-white rounded-[20px] border border-black/5 shadow-sm p-8 text-center">
+      <div className="max-w-md mx-auto">
+        {generateIcon('git%20branch-159-1658431404.png', 64, 'rgba(79, 70, 229, 0.2)')}
+        <h3 className="text-xl font-semibold text-black mb-2 mt-6">
+          No Commits Yet
+        </h3>
+        <p className="text-sm text-black/50 mb-6">
+          Push your first commit to see it appear here
+        </p>
+        
+        <div className="bg-indigo-50/50 rounded-xl border border-indigo-100/50 p-5 text-left">
+          <div className="flex items-center gap-2 mb-3">
+            <Zap className="h-4 w-4 text-indigo-600" />
+            <p className="text-sm font-semibold text-black">Quick Start</p>
+          </div>
+          <div className="space-y-2 text-xs text-black/70">
+            <p className="font-mono bg-white px-3 py-2 rounded-lg border border-black/10">
+              git add .
+            </p>
+            <p className="font-mono bg-white px-3 py-2 rounded-lg border border-black/10">
+              git commit -m "Initial commit"
+            </p>
+            <p className="font-mono bg-white px-3 py-2 rounded-lg border border-black/10">
+              git push origin main
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const EmptyStateGit = () => {
+  return (
+    <div className="bg-white rounded-[20px] border border-black/5 shadow-sm p-10 text-center max-w-2xl mx-auto">
+      <Github className="h-16 w-16 text-black/10 mx-auto mb-6" />
+      <h3 className="text-2xl font-semibold text-black mb-3">
+        Connect Your Repository
+      </h3>
+      <p className="text-base text-black/50 mb-8 max-w-md mx-auto">
+        Link your GitHub repository to enable automatic deployments
+      </p>
+      
+      <div className="flex items-center justify-center gap-3 mb-8">
+        <button className="flex items-center gap-2.5 px-6 py-3.5 bg-black text-white hover:bg-gray-900 rounded-full font-medium text-sm transition-all shadow-sm hover:shadow-md">
+          <Github className="h-5 w-5" />
+          Connect GitHub
+        </button>
+      </div>
+
+      {/* Features */}
+      <div className="grid grid-cols-3 gap-4 pt-6 border-t border-black/10">
+        <div className="text-center">
+          <Zap className="h-5 w-5 text-indigo-600 mx-auto mb-2" />
+          <p className="text-xs text-black/70 font-medium">Auto-Deploy</p>
+        </div>
+        <div className="text-center">
+          <GitBranch className="h-5 w-5 text-indigo-600 mx-auto mb-2" />
+          <p className="text-xs text-black/70 font-medium">Branch Previews</p>
+        </div>
+        <div className="text-center">
+          <GitCommit className="h-5 w-5 text-indigo-600 mx-auto mb-2" />
+          <p className="text-xs text-black/70 font-medium">Full History</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const GitSettings = () => {
+  const { gitData, refreshGit, id } = useProjectSettings();
+  const [expandedCommit, setExpandedCommit] = useState<string | null>(null);
+  const [isTogglingAutoDeploy, setIsTogglingAutoDeploy] = useState(false);
+  const hasRefreshed = useRef(false);
+
+  // Load git data when component mounts - only once
+  useEffect(() => {
+    if (!hasRefreshed.current) {
+      hasRefreshed.current = true;
+      refreshGit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleAutoDeployToggle = async () => {
+    setIsTogglingAutoDeploy(true);
+    try {
+      const newState = !gitData.autoDeployEnabled;
+      // Make API call to toggle auto-deploy
+      const response = await projectsApi.setAutoDeploy(id, newState);
+      if (response.success) {
+        await refreshGit();
+      }
+    } catch (error) {
+      console.error('Failed to toggle auto-deploy:', error);
+    } finally {
+      setIsTogglingAutoDeploy(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    
+  };
+
+  // Loading State
+  if (gitData.isLoading) {
+    return (
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left Column - Repository Info */}
+        <div className="lg:col-span-2 space-y-6">
+          <RepositoryInfoSkeleton />
+          <IntegrationStatusSkeleton />
+        </div>
+
+        {/* Right Column - Recent Commits */}
+        <div>
+          <CommitsSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {gitData.repository ? (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left Column - Recent Commits */}
+          <div className="lg:col-span-2">
+            <h3 className="text-base font-bold text-black mb-4 flex items-center gap-2">
+              {generateIcon('commit%20git-24-1658431404.png', 24, 'black')}
+              Recent Commits
+            </h3>
+            {gitData.recentCommits && gitData.recentCommits.length > 0 && false ? (
+            <div className="space-y-3">
+              {gitData.recentCommits.map((commit, i) => {
+                const statusConfig: Record<string, { bg: string; border: string; text: string; label: string }> = {
+                  success: { bg: 'bg-emerald-50', border: 'border-emerald-200', text: 'text-emerald-700', label: 'Success' },
+                  failed: { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-700', label: 'Failed' },
+                  pending: { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-700', label: 'Pending' },
+                };
+                const config = statusConfig[commit.status] || statusConfig.pending;
+
+                return (
+                  <div
+                    key={i}
+                    className="bg-white border border-black/10 rounded-xl transition-all overflow-hidden"
+                  >
+                    <div
+                      className="p-4 cursor-pointer"
+                      onClick={() => setExpandedCommit(expandedCommit === commit.id ? null : commit.id)}
+                    >
+                      <div className="flex items-start gap-3 mb-3">
+                        <div className="flex items-center gap-2 flex-1 min-w-0">
+                          <div className="flex-shrink-0 mr-2">
+                            {expandedCommit === commit.id ? (
+                              generateIcon('chevron%20right-18-1696832403.png', 18, 'rgb(0,0,0,0.5)', { transform: 'rotate(90deg)' })
+                            ) : (
+                              generateIcon('chevron%20right-18-1696832403.png', 18, 'rgb(0,0,0,0.5)')
+                            )}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <p className="text-sm font-semibold text-black mb-1 truncate">{commit.message}</p>
+                              <code className="bg-black/5 px-2 rounded-full text-black/60 text-xs">
+                                {commit.id.substring(0, 7)}
+                              </code>
+                            </div>
+                            <div className="flex items-center gap-2 text-xs mt-1.5 text-black/50 flex-wrap">
+                              <div className="flex items-center gap-1.5">
+                                {commit.avatar && (<div style={{ backgroundImage: `url(${commit.avatar})` }} className="w-4 h-4 rounded-full bg-cover bg-center bg-no-repeat bg-black/10" />)}
+                                <span className="font-normal">{commit.author}</span>
+                              </div>
+                              <span className="text-black/25">•</span>
+                              <span>{formatDate(commit.time, undefined, undefined, true)}</span>
+                            </div>
+                          </div>
+                        </div>
+                        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${config.bg} ${config.border} ${config.text} border whitespace-nowrap`}>
+                          {config.label}
+                        </span>
+                      </div>
+
+                      <div className="flex items-center gap-3 text-xs ml-8.5">
+                        <div className="flex items-center gap-1.5 text-black/60">
+                          {generateIcon('document%20zip-76-1662364367.png', 16, 'rgb(0,0,0,0.4)')}
+                          <span className="font-normal">{commit.files} file{commit.files !== 1 ? 's' : ''} changed</span>
+                        </div>
+                        {commit.url && (
+                          <a
+                            href={commit.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            onClick={(e) => e.stopPropagation()}
+                            className="flex items-center gap-1 text-black font-normal"
+                          >
+                            {generateIcon('External_link_HtLszLDBXqHilHK674zh2aKoSL7xUhyboAzP.png', 15, 'rgb(0,0,0,1)')}
+                            <span>View on GitHub</span>
+                          </a>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Expandable File Changes */}
+                    {expandedCommit === commit.id && commit.changedFiles.length > 0 && (
+                      <div className="border-t ml-12 border-black/10 bg-gray-50/50 p-4">
+                        <p className="text-xs font-semibold text-black/60 mb-3 uppercase tracking-wide">Changed Files</p>
+                        <div className="space-y-1.5">
+                          {commit.changedFiles.map((file: any, idx: number) => {
+                            const fileTypeConfig: Record<string, { text: string }> = {
+                              added: { text: '+ Added' },
+                              modified: { text: '~ Modified' },
+                              removed: { text: '- Removed' },
+                            };
+                            const typeConfig = fileTypeConfig[file.type] || fileTypeConfig.modified;
+
+                            return (
+                              <div key={idx} className="flex items-center gap-2 p-2.5 bg-white rounded-lg border border-black/5 hover:border-black/10 transition-colors">
+                                <div className="flex items-center gap-2 flex-1 min-w-0">
+                                  <FileIcon fileName={file.name} language={file.language} style={{}} />
+                                  <span className="text-xs text-black/80 truncate font-mono">{file.name}</span>
+                                </div>
+                                <span className={`text-xs text-black/50 ${typeConfig.text}`}>{typeConfig.text}</span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+            ) : (
+              <EmptyCommitsState />
+            )}
+          </div>
+
+          {/* Right Column - Repository Info (Sticky) */}
+          <div className="lg:sticky lg:top-6 h-fit space-y-4">
+            {/* Repository Card */}
+            <div className="bg-white rounded-[20px] border border-black/5 shadow-sm p-5">
+              <div className="flex items-center gap-3 mb-5">
+                <Github className="h-6 w-6 text-black" />
+                <div className="flex-1 min-w-0">
+                  <p className="font-semibold text-base text-black truncate">{gitData.repository?.name || 'Repository'}</p>
+                  <p className="text-xs text-black/50 font-mono">{gitData.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={gitData.autoDeployEnabled}
+                    onClick={handleAutoDeployToggle}
+                    disabled={isTogglingAutoDeploy}
+                    className={`
+                      relative inline-flex h-6 w-11 items-center rounded-full transition-colors
+                      ${gitData.autoDeployEnabled ? 'bg-indigo-600' : 'bg-black/20'}
+                      ${isTogglingAutoDeploy ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+                    `}
+                  >
+                    <span
+                      className={`
+                        inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm
+                        ${gitData.autoDeployEnabled ? 'translate-x-6' : 'translate-x-1'}
+                      `}
+                    />
+                  </button>
+                </div>
+                <p className="text-xs text-black/50">
+                  {gitData.autoDeployEnabled
+                    ? 'Deploys on every push'
+                    : 'Manual deploys only'}
+                </p>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="space-y-2">
+                <a
+                  href={gitData.repository?.url}
+                  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>
+                <button onClick={handleDisconnect} className="w-full px-4 py-2.5 bg-red-50 text-red-600 hover:bg-red-100 rounded-full font-medium text-sm transition-all">
+                  Disconnect
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <EmptyStateGit />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,133 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Terminal, Server } from "lucide-react";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import { TerminalLogs } from "./logs/TerminalLogs";
+import { ServerLogs } from "./logs/ServerLogs";
+import { LogsActions } from "./logs/LogsActions";
+
+type LogsTab = 'terminal' | 'server';
+
+export const LogsSettings = () => {
+  const { projectData, buildData, id, terminalLogsData, serverLogsData, clearTerminalLogs, clearServerLogs } = useProjectSettings();
+  const [activeTab, setActiveTab] = useState<LogsTab>(buildData.hasServer ? 'terminal' : 'server');
+  const [copied, setCopied] = useState(false);
+  const [currentLogs, setCurrentLogs] = useState<string[]>([]);
+
+  const handleLogsChange = useCallback((logs: string[]) => {
+    setCurrentLogs(logs);
+  }, []);
+
+  // Update current logs when active tab or logs data changes
+  useEffect(() => {
+    if (activeTab === 'terminal') {
+      setCurrentLogs(terminalLogsData.logs);
+    } else {
+      const serverLogsStrings = serverLogsData.logs.map(log =>
+        `${log.timestamp} - ${log.ip} - ${log.method} ${log.path} - ${log.statusCode} - ${log.responseTime}ms`
+      );
+      setCurrentLogs(serverLogsStrings);
+    }
+  }, [activeTab, terminalLogsData.logs, serverLogsData.logs]);
+
+  const copyLogs = useCallback(() => {
+    if (currentLogs.length === 0) return;
+    navigator.clipboard.writeText(currentLogs.join('\n'));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [currentLogs]);
+
+  const downloadLogs = useCallback(() => {
+    if (currentLogs.length === 0) return;
+    const blob = new Blob([currentLogs.join('\n')], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${activeTab}-logs-${new Date().toISOString()}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [currentLogs, activeTab]);
+
+  const clearLogs = useCallback(() => {
+    if (currentLogs.length === 0) return;
+
+    // Clear logs from context based on active tab
+    if (activeTab === 'terminal') {
+      clearTerminalLogs();
+      // Also trigger the event for terminal to reset its display
+      window.dispatchEvent(new CustomEvent('clearLogs'));
+    } else {
+      clearServerLogs();
+    }
+  }, [currentLogs, activeTab, clearTerminalLogs, clearServerLogs]);
+
+  return (
+    <div className="flex flex-col h-full gap-4">
+      {/* Tabs - Top */}
+      <div className="flex items-center gap-3">
+        {buildData.hasServer && <button
+          onClick={() => setActiveTab('terminal')}
+          className={`relative flex items-center gap-2.5 px-5 py-3 rounded-xl font-medium text-sm transition-all ${activeTab === 'terminal'
+            ? 'bg-white text-black shadow-md border border-black/10'
+            : 'bg-transparent text-black/50 hover:text-black/70 hover:bg-white/50'
+            }`}
+        >
+          {activeTab === 'terminal' && (
+            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-indigo-500 rounded-r-full"></div>
+          )}
+          <div className={`w-2 h-2 rounded-full transition-colors ${activeTab === 'terminal' ? 'bg-indigo-500' : 'bg-black/20'
+            }`}></div>
+          <Terminal className="w-4 h-4" />
+          Terminal Logs
+        </button>}
+        <button
+          onClick={() => setActiveTab('server')}
+          className={`relative flex items-center gap-2.5 px-5 py-3 rounded-xl font-medium text-sm transition-all ${activeTab === 'server'
+            ? 'bg-white text-black shadow-md border border-black/10'
+            : 'bg-transparent text-black/50 hover:text-black/70 hover:bg-white/50'
+            }`}
+        >
+          {activeTab === 'server' && (
+            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-emerald-500 rounded-r-full"></div>
+          )}
+          <div className={`w-2 h-2 rounded-full transition-colors ${activeTab === 'server' ? 'bg-emerald-500' : 'bg-black/20'
+            }`}></div>
+          <Server className="w-4 h-4" />
+          Server Logs
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-h-[500px]">
+        {activeTab === 'terminal' && buildData.hasServer && (
+          <TerminalLogs
+            projectId={id}
+            projectName={projectData?.name || 'Project'}
+            onLogsChange={handleLogsChange}
+          />
+        )}
+        {activeTab === 'server' && (
+          <ServerLogs
+            projectId={id}
+            projectName={projectData?.name || 'Project'}
+            onLogsChange={handleLogsChange}
+          />
+        )}
+      </div>
+
+      {/* Actions Bar - Bottom */}
+      <div className="bg-gradient-to-r from-gray-50 to-gray-100/50 rounded-2xl px-6 py-4 border border-black/5 shadow-sm">
+        <div className="flex items-center justify-center">
+          <LogsActions
+            onCopy={copyLogs}
+            onDownload={downloadLogs}
+            onClear={clearLogs}
+            copied={copied}
+            logsCount={currentLogs.length}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { Home, RefreshCw, AlertCircle } from "lucide-react";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+
+export const ProjectNotFound: React.FC = () => {
+  const { domain } = useProjectSettings();
+  return (
+    <div className="flex items-center justify-center min-h-[500px] p-6">
+      <div className="max-w-xl w-full">
+        <div className="bg-white rounded-2xl border-2 border-gray-200 shadow-xl p-8">
+          {/* Icon and Title */}
+          <div className="text-center mb-6">
+            <div className="w-20 h-20 bg-red-50 rounded-2xl flex items-center justify-center mx-auto mb-4 border-2 border-red-100">
+              <AlertCircle className="w-10 h-10 text-red-600" strokeWidth={2} />
+            </div>
+
+            <h1 className="text-2xl font-bold text-black mb-2">
+              Project Not Found
+            </h1>
+
+            <p className="text-gray-600 text-sm">
+              We couldn't locate this project
+            </p>
+          </div>
+
+          {/* Content Section */}
+          <div>
+            <div className="bg-gray-50 rounded-xl border border-gray-200 p-5 mb-6">
+              <p className="text-gray-600 text-sm leading-relaxed mb-3 text-center">
+                The project <code className="px-2 py-1 bg-white rounded-lg  text-xs text-black font-semibold border border-gray-200">{domain}</code> doesn't exist in your workspace.
+              </p>
+              <div className="space-y-1.5 text-xs text-gray-600">
+                <div className="flex items-center gap-2">
+                  <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+                  <span>The project may have been deleted</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+                  <span>You may not have access to this project</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+                  <span>The domain URL might be incorrect</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex gap-3 mb-6">
+              <button
+                onClick={() => window.location.href = '/'}
+                className="flex items-center justify-center flex-1 bg-black hover:bg-gray-800 text-white font-semibold py-3 rounded-xl transition-all gap-2"
+              >
+                <Home className="w-4 h-4" />
+                Dashboard
+              </button>
+
+              <button
+                onClick={() => window.location.reload()}
+                className="flex items-center justify-center flex-1 bg-gray-100 hover:bg-gray-200 text-black font-semibold py-3 rounded-xl transition-all gap-2"
+              >
+                <RefreshCw className="w-4 h-4" />
+                Reload
+              </button>
+            </div>
+
+            {/* Help Link */}
+            <div className="pt-4 border-t border-gray-200 text-center">
+              <p className="text-xs text-gray-500 mb-2">
+                Need help?
+              </p>
+              <div className="flex justify-center gap-2 text-xs">
+                <a
+                  href="https://docs.oblien.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-black hover:text-gray-700 font-semibold transition-colors"
+                >
+                  Documentation
+                </a>
+                <span className="text-gray-400">·</span>
+                <a
+                  href="mailto:support@oblien.com"
+                  className="text-black hover:text-gray-700 font-semibold transition-colors"
+                >
+                  Support
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};