mock data for catalogue

src/App.tsx

@@ -7,6 +7,7 @@ import { Apps } from './routes/Authenticated/Apps/Apps';
 import { AppDetail } from './routes/Authenticated/Apps/App';
 import { Servers } from './routes/Authenticated/Servers/Servers';
 import { Server } from './routes/Authenticated/Servers/Server';
+import { Recipes } from './routes/Authenticated/Recipes/Recipes';
 
 function App() {
   return (
@@ -24,6 +25,7 @@ function App() {
             <Route path="/apps/:server/:appName" element={<AppDetail />} />
             <Route path="/servers" element={<Servers />} />
             <Route path="/servers/:serverName" element={<Server />} />
+            <Route path="/recipes" element={<Recipes />} />
           </Route>
           
           {/* 404 catch-all */}

src/routes/Authenticated/Recipes/RecipeForm.tsx

@@ -0,0 +1,112 @@
+import { useState, useEffect } from "react";
+import { apiService } from '../../../services/api';
+import type { AbraServer } from '../../../types';
+
+
+
+function RecipeForm({ recipe, onClose }) {
+  const [loading, setLoading] = useState(true);
+  const [servers, setServers] = useState<AbraServer[]>([]);
+  const [selectedServer, setSelectedServer] = useState(""); // ❌ only one value
+  const [chaos, setChaos] = useState(false);
+  const [secrets, setSecrets] = useState(false);
+  const [error, setError] = useState('');
+  
+  useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const [serversData] = await Promise.all([
+            apiService.getServers(),
+          ]);
+            
+          setServers(serversData);
+          
+        } catch (err) {
+          setError(err instanceof Error ? err.message : 'Failed to load servers');
+        } finally {
+          setLoading(false);
+        }
+      };
+  
+      fetchData();
+    });
+  const [formData, setFormData] = useState({
+    domain: "",
+    chaos: false,
+    secrets: true,
+  });
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Submitting:", formData);
+    onClose();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h2>{recipe.name}</h2>
+      { loading ? (<p> Loading servers...</p> 
+      ) : (
+      <div>
+        <label>
+            Choose a server to deploy to: 
+            <select
+              value={selectedServer}
+              onChange={(e) => setSelectedServer(e.target.value)}
+            >
+              <option value="">None</option>
+              {servers.map((server) => (
+                <option key={server.name} value={server.name}>
+                  {server.name}
+                </option>
+              ))}
+            </select>
+        </label>
+      </div>
+      )}
+      <div> 
+        <label>
+          Domain:
+          <input
+            name="Domain"
+            value={formData.name}
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+      <div> 
+        <label>
+          Chaos Mode Enabled: 
+          <input
+            type="checkbox"
+            name="chaos"
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+
+      <div> 
+        <label>
+          Autogenerate Secrets: 
+          <input
+            type="checkbox"
+            name="secrets"
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+
+      <button type="submit">Submit</button>
+      <button type="button" onClick={onClose}>Cancel</button>
+    </form>
+  );
+}
+
+export default RecipeForm;

src/routes/Authenticated/Recipes/Recipes.scss

@@ -0,0 +1,177 @@
+@use '../../../assets/scss/variables' as *;
+@use '../../../assets/scss/mixins' as *;
+@use '../../../assets/scss/global' as *;
+
+// Extend global page wrapper
+.recipes-page {
+  @extend .page-wrapper;
+}
+
+.recipes-content {
+  @extend .page-content;
+}
+
+// Servers grid
+.recipes-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: $spacing-xl;
+  margin-bottom: $spacing-xl;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Server card
+.recipe-card {
+  @include card;
+  display: grid;
+  grid-template-rows: 1fr 2fr auto 0.9fr;
+  transition: transform $transition-base, box-shadow $transition-base;
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: $shadow-xl;
+  }
+
+  .recipe-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: $spacing-lg;
+    padding-bottom: $spacing-md;
+    border-bottom: 2px solid $bg-secondary;
+
+    .recipe-title {
+      h3 {
+        margin: 0 0 $spacing-xs;
+        font-size: $font-size-xl;
+        color: $text-primary;
+        font-weight: $font-weight-bold;
+      }
+
+      .recipe-host {
+        font-size: $font-size-sm;
+        color: $text-muted;
+        font-family: monospace;
+      }
+    }
+    img {
+      width: clamp(20px, 3vw, 32px);
+      height: clamp(20px, 3vw, 32px);
+      object-fit: contain;
+    }
+  }
+  .card-tags {
+    display: flex;
+    gap: 6px;
+    margin-top: $spacing-sm;
+    height: $spacing-md;
+    flex-wrap: wrap;
+  }
+  .tag-category {
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 5px;
+    color: rgb(255, 255, 255);
+    font-weight: 700;
+    background-color: rgb(111, 128, 255);
+
+  }
+  .tag-feature {
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 5px;
+    color: rgb(255, 255, 255);
+    font-weight: 700;
+    background-color: rgb(22, 180, 22);
+
+  }
+  .recipe-stats {
+    flex-grow: 1;
+    flex: 1;
+    margin-bottom: $spacing-lg;
+
+    .stat-row {
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+    }
+  }
+
+  .recipe-actions {
+    display: flex;
+    gap: $spacing-sm;
+    .action-btn {
+      flex: 1;
+      padding: $spacing-sm $spacing-md;
+      border: 2px solid $border-color;
+      background: none;
+      color: $text-primary;
+      border-radius: $radius-md;
+      font-size: $font-size-sm;
+      font-weight: $font-weight-medium;
+      cursor: pointer;
+      transition: all $transition-base;
+
+      &:hover {
+        background-color: rgba($primary, 0.1);
+        border-color: $primary;
+        transform: translateY(-1px);
+      }
+
+      &.primary {
+        background-color: $primary;
+        color: white;
+        border-color: $primary;
+
+        &:hover {
+          background-color: $primary-light;
+          border-color: $primary-light;
+        }
+      }
+    }
+  }
+
+  .recipe-alert {
+    background-color: rgba($warning, 0.1);
+    border-left: 4px solid $warning;
+    padding: $spacing-sm $spacing-md;
+    margin: 0 (-$spacing-xl) (-$spacing-xl);
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+
+    .alert-icon {
+      font-size: $font-size-lg;
+      color: $warning;
+    }
+
+    .alert-text {
+      font-size: $font-size-sm;
+      color: $text-primary;
+      font-weight: $font-weight-medium;
+    }
+  }
+}
+.modal-overlay {
+position: fixed;
+inset: 0;
+background: rgba(0, 0, 0, 0.4);
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+.modal {
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  width: min(90%, 500px);
+}

src/routes/Authenticated/Recipes/Recipes.tsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from '../../../components/Header/Header';
+import { apiService } from '../../../services/api';
+import type { AbraApp, AppWithServer, AbraRecipe } from '../../../types';
+import RecipeForm from './RecipeForm.tsx'
+import './Recipes.scss';
+
+export const Recipes: React.FC = () => {
+  const navigate = useNavigate();
+  const [recipesData, setRecipesData] = useState<AbraRecipe[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterServer, setFilterServer] = useState<string>('all');
+  const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [selectedRecipe, setSelectedRecipe] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+
+
+
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        if (isMockMode) {
+          const { mockApiService } = await import('../../../services/mockApi');
+          const data = await mockApiService.getRecipes();
+          console.log(data)
+          setRecipesData(data);
+        } else {
+          const data = await apiService.getRecipes();
+          setRecipesData(data);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load apps');
+      } finally {
+        setLoading(false);
+      }
+    }; 
+    
+    fetchData();
+  }, [isMockMode]);
+
+  // Flatten and enrich apps data
+  const allRecipes: AbraRecipe[] = useMemo(() => {
+    if (!recipesData) return [];
+    
+    return recipesData;
+  }, [recipesData]);
+
+
+  // Filter apps
+  const filteredRecipes = useMemo(() => {
+    return allRecipes.filter(recipe => {
+      const matchesSearch = 
+        recipe.name.toLowerCase().includes(searchTerm.toLowerCase());
+
+      return matchesSearch;
+    });
+  }, [allRecipes, searchTerm, filterServer, filterStatus]);
+
+  const stats = useMemo(() => {
+    const total = allRecipes.length;
+
+    return { total };
+  }, [allRecipes]);
+
+  if (loading) {
+    return (
+      <div className="apps-page">
+        <Header />
+        <main className="recipes-content">
+          <div className="loading">Loading applications...</div>
+        </main>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="recipes-page">
+        <Header />
+        <main className="recipes-content">
+          <div className="error">Error: {error}</div>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="recipes-page">
+      <Header />
+      <main className="recipes-content">
+        <div className="page-header">
+          <h1>Applications</h1>
+          <p className="subtitle">{stats.total} recipes</p>
+        </div>
+
+        {/* Stats Overview */}
+        <div className="stats-grid">
+          <div className="stat-card">
+            <div className="stat-info">
+              <p className="stat-number">{stats.total}</p>
+              <p className="stat-label">Total Recipes</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="filters">
+          <input
+            type="text"
+            placeholder="Search apps by name, recipe, or domain..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="search-input"
+          />
+
+          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
+            <option value="all">All Status</option>
+            <option value="stable">Stable</option>
+            <option value="chaos">Chaos Mode</option>
+          </select>
+
+        </div>
+
+        {/* Server Cards */}
+        <div className="recipes-grid">
+          {filteredRecipes.length === 0 ? (
+            <div className="no-results">No recipes found matching your search</div>
+          ) : (
+            filteredRecipes.map((recipe) => (
+              <div 
+                key={recipe.name} 
+                className="recipe-card"
+                style={{ cursor: 'pointer' }}
+              >
+                <div className="recipe-header">
+                  <div className="recipe-title">
+                    <h3>{recipe.name}</h3>
+                  </div>
+                  <div>
+                    {recipe.icon.length > 0 ? <img src={`${recipe.icon}`} /> : null }
+                  </div>
+                </div>
+
+                <div className="recipe-stats">
+                  <div className="stat-row">
+                    <span className="stat-value">{recipe.description}</span>
+                  </div>
+                </div>
+
+                <div className="recipe-actions">
+                  <button 
+                    className="action-btn"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      console.log('clicked');
+                      setSelectedRecipe(recipe);
+                      console.log('selectedRecipe:', selectedRecipe);
+                    }}
+                  >
+                    Add Recipe
+                  </button>
+                </div>
+                <div className="card-tags">
+                  {recipe.features.backups.toLowerCase().includes("yes") ? <span className="tag-feature"> Backups </span> : null}
+                  {recipe.features.healthcheck.toLowerCase().includes("yes") ? <span className="tag-feature"> Healthcheck </span> : null}
+                  {recipe.category.length > 0 ? <span className="tag-category"> {recipe.category} </span> : null}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+        {selectedRecipe && (
+          <div className="modal-overlay" onClick={() => setSelectedRecipe(null)}>
+            <div className="modal" onClick={(e) => e.stopPropagation()}>
+              {}
+              <RecipeForm recipe={selectedRecipe} onClose={() => setSelectedRecipe(null)} />
+            </div>
+          </div>
+        )}
+
+        <div className="results-count">
+          Showing {filteredRecipes.length} of {allRecipes.length} apps
+        </div>
+      </main>
+    </div>
+  );
+};

src/services/api.ts

@@ -1,4 +1,4 @@
-import type { AbraApp, AbraServer, AuthResponse, LoginCredentials, User } from '../types';
+import type { AbraApp, AbraServer, AuthResponse, AbraRecipe, LoginCredentials, User } from '../types';
 
 const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';
 
@@ -62,6 +62,10 @@ class ApiService {
     return this.request<ServerAppsResponse>('/abra/apps');
   }
 
+  async getRecipes(): Promise<AbraRecipe[]> {
+    return this.request<AbraRecipe[]>('/abra/catalogue');
+  }
+
   async getServers(): Promise<AbraServer[]> {
     return this.request<AbraServer[]>('/abra/servers');
   }

src/services/mockApi.ts

@@ -1,6 +1,7 @@
-import type { AbraServer, ServerAppsResponse } from '../types';
+import type { AbraServer, ServerAppsResponse, AbraRecipe } from '../types';
 import appsData from './mock-apps.json';
 import serversData from './mock-servers.json';
+import recipesData from './mock-catalogue.json';
 
 // Simulate API delay
 const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
@@ -15,6 +16,10 @@ export const mockApiService = {
     await delay(300);
     return serversData as AbraServer[];
   },
+  async getRecipes(): Promise<AbraRecipe[]> {
+    await delay(300);
+    return recipesData as AbraRecipe[];
+  },
 
   async deployApp(appName: string): Promise<void> {
     await delay(1000);

src/types/index.ts

@@ -47,6 +47,38 @@ export interface ServerAppsResponse {
   };
 }
 
+export interface Image {
+  image: string;
+  rating: string
+  source: string
+  url: string
+}
+type RecipeVersions = Record<string, Record<string, ServiceMeta>>[];
+export interface ServiceMeta {
+  image: string;
+  tag: string
+}
+export interface Features {
+  backups: string;
+  email: string;
+  healthcheck: string;
+  image: Image;
+  status: number;
+  tests: string;
+  sso: string;
+}
+export interface AbraRecipe {
+  category: string;
+  default_branch: string;
+  description: string;
+  features: Features;
+  icon: string;
+  name: string;
+  repository: string;
+  ssh_url: string;
+  versions: RecipeVersions;
+  website: string;
+}
 export interface AppWithServer extends AbraApp {
   serverStats: {
     appCount: number;