Implement Project Dashboard and Detail UI with deployment orchestration

- Add ProjectCard component and ProjectDetailPage
- Implement deployment triggering and real-time status polling
- Add configuration management for Web Services and Static Sites
- Implement secret (Environment Variables) management with masking
- Add comprehensive styling for the project lifecycle dashboard

Co-authored-by: Gemini CLI

Author: ImranullahKhann

.gitignore

@@ -28,3 +28,6 @@ coverage.out
 
 # Docker
 .docker/
+data/
+cookies.txt
+backend/worker

backend/internal/httpapi/httpapi.go

@@ -329,12 +329,13 @@ func (h *Handler) handleProjectByID(w http.ResponseWriter, r *http.Request) {
 	}
 
 	path := strings.TrimPrefix(r.URL.Path, "/projects/")
-	parts := strings.Split(path, "/")
-	if len(parts) == 0 || parts[0] == "" {
+	path = strings.TrimSuffix(path, "/")
+	if path == "" {
 		writeJSON(w, http.StatusNotFound, map[string]string{"error": "not found"})
 		return
 	}
 
+	parts := strings.Split(path, "/")
 	projectID := parts[0]
 
 	if len(parts) == 2 {
@@ -356,10 +357,13 @@ func (h *Handler) handleProjectByID(w http.ResponseWriter, r *http.Request) {
 			}
 			writeMethodNotAllowed(w, http.MethodGet)
 			return
+		default:
+			writeJSON(w, http.StatusNotFound, map[string]string{"error": "not found"})
+			return
 		}
 	}
 
-	if len(parts) > 1 {
+	if len(parts) > 2 {
 		writeJSON(w, http.StatusNotFound, map[string]string{"error": "not found"})
 		return
 	}
@@ -563,12 +567,13 @@ func (h *Handler) handleDeploymentByID(w http.ResponseWriter, r *http.Request) {
 	}
 
 	path := strings.TrimPrefix(r.URL.Path, "/deployments/")
-	parts := strings.Split(path, "/")
-	if len(parts) == 0 || parts[0] == "" {
+	path = strings.TrimSuffix(path, "/")
+	if path == "" {
 		writeJSON(w, http.StatusNotFound, map[string]string{"error": "not found"})
 		return
 	}
 
+	parts := strings.Split(path, "/")
 	deploymentID := parts[0]
 
 	if len(parts) == 2 && parts[1] == "events" {

backend/internal/project/service.go

@@ -251,7 +251,7 @@ func (s *Service) GetConfig(ctx context.Context, userID, projectID string) (Proj
 	)
 	if err != nil {
 		if errors.Is(err, pgx.ErrNoRows) {
-			return ProjectConfig{}, ErrConfigNotFound
+			return ProjectConfig{ProjectID: projectID}, nil
 		}
 		return ProjectConfig{}, fmt.Errorf("get config: %w", err)
 	}
@@ -302,7 +302,7 @@ func (s *Service) GetConfigInternal(ctx context.Context, projectID string) (Proj
 	)
 	if err != nil {
 		if errors.Is(err, pgx.ErrNoRows) {
-			return ProjectConfig{}, ErrConfigNotFound
+			return ProjectConfig{ProjectID: projectID}, nil
 		}
 		return ProjectConfig{}, fmt.Errorf("get config internal: %w", err)
 	}

frontend/src/App.tsx

@@ -5,6 +5,8 @@ import { LoginPage } from './pages/LoginPage';
 import { SignupPage } from './pages/SignupPage';
 import { DashboardPage } from './pages/DashboardPage';
 
+import { ProjectDetailPage } from './pages/ProjectDetailPage';
+
 export default function App() {
   return (
     <BrowserRouter>
@@ -21,6 +23,14 @@ export default function App() {
               </ProtectedRoute>
             }
           />
+          <Route
+            path="/projects/:id"
+            element={
+              <ProtectedRoute>
+                <ProjectDetailPage />
+              </ProtectedRoute>
+            }
+          />
         </Routes>
       </AuthProvider>
     </BrowserRouter>

frontend/src/pages/DashboardPage.tsx

@@ -1,7 +1,62 @@
 import { useState, useEffect, FormEvent } from 'react';
-import { api, Project } from '../api/client';
+import { Link } from 'react-router-dom';
+import { api, Project, Deployment, APIError } from '../api/client';
 import { Navigation } from '../components/Navigation';
-import { APIError } from '../api/client';
+
+function ProjectCard({ project }: { project: Project }) {
+  const [latestDeployment, setLatestDeployment] = useState<Deployment | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadLatestDeployment();
+  }, [project.id]);
+
+  const loadLatestDeployment = async () => {
+    try {
+      const deployments = await api.projects.listDeployments(project.id);
+      if (deployments.length > 0) {
+        setLatestDeployment(deployments[0]);
+      }
+    } catch (err) {
+      console.error('Failed to load deployments', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Link to={`/projects/${project.id}`} className="project-card-link">
+      <div className="project-card clickable">
+        <div className="project-card-header">
+          <h3>{project.name}</h3>
+          <span className={`workload-badge ${project.workload_type}`}>
+            {project.workload_type === 'web_service' ? 'Web Service' : 'Static Site'}
+          </span>
+        </div>
+        
+        <div className="project-details">
+          <p><strong>Repository:</strong> {project.git_repo_url}</p>
+          <p><strong>Branch:</strong> {project.branch}</p>
+        </div>
+
+        <div className="deployment-summary">
+          {loading ? (
+            <p className="status-text">Loading...</p>
+          ) : latestDeployment ? (
+            <div className="status-line">
+              <span className={`status-badge ${latestDeployment.status}`}>
+                {latestDeployment.status}
+              </span>
+              {latestDeployment.status === 'running' && <span className="live-indicator">● Live</span>}
+            </div>
+          ) : (
+            <p className="status-text">No deployments</p>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
 
 export function DashboardPage() {
   const [projects, setProjects] = useState<Project[]>([]);
@@ -50,7 +105,7 @@ export function DashboardPage() {
         formData.branch,
         formData.workloadType
       );
-      setProjects([...projects, newProject]);
+      setProjects([newProject, ...projects]);
       setShowCreateForm(false);
       setFormData({ name: '', gitRepoUrl: '', branch: 'main', workloadType: 'web_service' });
     } catch (err) {
@@ -174,27 +229,7 @@ export function DashboardPage() {
         ) : (
           <div className="projects-list">
             {projects.map((project) => (
-              <div key={project.id} className="project-card">
-                <div className="project-card-header">
-                  <h3>{project.name}</h3>
-                  <span className={`workload-badge ${project.workload_type}`}>
-                    {project.workload_type === 'web_service'
-                      ? 'Web Service'
-                      : 'Static Site'}
-                  </span>
-                </div>
-                <div className="project-details">
-                  <p>
-                    <strong>Repository:</strong> {project.git_repo_url}
-                  </p>
-                  <p>
-                    <strong>Branch:</strong> {project.branch}
-                  </p>
-                  <p className="project-date">
-                    Created {new Date(project.created_at).toLocaleDateString()}
-                  </p>
-                </div>
-              </div>
+              <ProjectCard key={project.id} project={project} />
             ))}
           </div>
         )}