openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,62 @@
+"use client";
+
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import { generateIcon } from "@/utils/icons";
+import { useEffect } from "react";
+
+export const ProjectsBottomNavigation = () => {
+
+    const {
+        projectNotFound,
+        activeTab,
+        tabs,
+        setActiveTab,
+        projectData
+    } = useProjectSettings();
+
+    // Validate active tab in useEffect to avoid setState during render
+    useEffect(() => {
+        if(!tabs.some((tab) => tab.id === activeTab)) {
+            setActiveTab(tabs[0].id);
+        }
+    }, [tabs, activeTab, setActiveTab]);
+
+    const handleTabChange = (tabId: string) => {
+        setActiveTab(tabId);
+        window.history.replaceState({}, '', `/projects/${projectData.id}/${tabId}`);
+    };
+
+    if(!projectData.id || !projectData.activeDeploymentId) {
+        return null;
+    }
+
+    return (
+        <div>
+            {/* Fixed Bottom Navigation - Hide when project not found */}
+            {!projectNotFound && (
+                <div className="fixed bottom-0 left-0 right-0 z-50">
+                    <div className="w-[95vw] mx-auto lg:max-w-[calc(100vw-20vw)] lg:ml-auto lg:mr-0 flex justify-center">
+                        <div className="flex items-center justify-center gap-2 p-2 mb-6 bg-black overflow-x-auto backdrop-blur-sm rounded-full">
+                            {tabs.map((tab) => {
+                                const isActive = activeTab === tab.id;
+                                return (
+                                    <button
+                                        key={tab.id}
+                                        onClick={() => handleTabChange(tab.id)}
+                                        className={`flex items-center gap-2 px-4 lg:px-5 py-2.5 lg:py-2 rounded-full font-normal text-base transition-all duration-300 whitespace-nowrap ${isActive ? 'bg-white text-black shadow-lg': 'bg-black text-white'}`}
+                                    >
+                                        <span className="lg:hidden">{generateIcon(tab.icon, 22, isActive ? 'black' : 'white')}</span>
+                                        <span className="hidden lg:inline">{generateIcon(tab.icon, 20, isActive ? 'black' : 'white')}</span>
+                                        <span className="hidden sm:inline">{tab.label}</span>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ProjectsBottomNavigation;

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

@@ -0,0 +1,333 @@
+import React, { useState, useEffect } from 'react';
+import { generateIcon } from '@/utils/icons';
+import { useToast } from '@/context/ToastContext';
+import { projectsApi } from "@/lib/api";
+
+interface ResourceTier {
+  name: string;
+  tier: 'lightweight' | 'standard' | 'performance' | 'enterprise' | 'autoscale';
+  cpu: string;
+  memory: string;
+  description: string;
+  icon: string;
+}
+
+interface ResourceSettingsProps {
+  projectId: string;
+  currentResources?: {
+    cpu_cores: number;
+    memory_mb: number;
+    tier: string;
+  };
+}
+
+const RESOURCE_TIERS: ResourceTier[] = [
+  { 
+    name: 'Lightweight', 
+    tier: 'lightweight', 
+    cpu: '0.5 vCPU', 
+    memory: '512 MB',
+    description: 'Small apps and static sites',
+    icon: 'dollar%20down-95-1658432931.png' 
+  },
+  { 
+    name: 'Standard', 
+    tier: 'standard', 
+    cpu: '1 vCPU', 
+    memory: '1 GB',
+    description: 'Most web applications',
+    icon: 'scale-95-1691989638.png' 
+  },
+  { 
+    name: 'Performance', 
+    tier: 'performance', 
+    cpu: '2 vCPU', 
+    memory: '2 GB',
+    description: 'High-traffic applications',
+    icon: 'rocket-123-1683012680.png' 
+  },
+  { 
+    name: 'Enterprise', 
+    tier: 'enterprise', 
+    cpu: '4 vCPU', 
+    memory: '4 GB',
+    description: 'Large scale production apps',
+    icon: 'server-59-1658435258.png' 
+  },
+  { 
+    name: 'Auto Scale', 
+    tier: 'autoscale', 
+    cpu: 'Dynamic', 
+    memory: 'Dynamic',
+    description: 'Scales based on demand',
+    icon: 'ai%20network-130-1686045753.png' 
+  },
+];
+
+export const ResourceSettings: React.FC<ResourceSettingsProps> = ({ 
+  projectId, 
+  currentResources 
+}) => {
+  const { showToast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [selectedTier, setSelectedTier] = useState(currentResources?.tier || 'lightweight');
+  const [customCpu, setCustomCpu] = useState(currentResources?.cpu_cores || 0.5);
+  const [customMemory, setCustomMemory] = useState(currentResources?.memory_mb || 512);
+  const [showCustomEdit, setShowCustomEdit] = useState(false);
+
+  useEffect(() => {
+    if (currentResources) {
+      setSelectedTier(currentResources.tier);
+      setCustomCpu(currentResources.cpu_cores);
+      setCustomMemory(currentResources.memory_mb);
+      
+      // If custom tier but no values set, show edit panel
+      if (currentResources.tier === 'custom' && (!currentResources.cpu_cores || currentResources.cpu_cores === 0.5) && (!currentResources.memory_mb || currentResources.memory_mb === 512)) {
+        setShowCustomEdit(true);
+      }
+    }
+  }, [currentResources]);
+
+  const handleTierSelect = async (tier: ResourceTier) => {
+    if (loading || selectedTier === tier.tier) return;
+    
+    setLoading(true);
+    setShowCustomEdit(false);
+    
+    const cpuValue = tier.tier === 'autoscale' ? -1 : parseFloat(tier.cpu);
+    const memoryValue = tier.tier === 'autoscale' ? -1 : parseInt(tier.memory);
+    
+    const response = await projectsApi.setResources(projectId, {
+      tier: tier.tier,
+      cpu_cores: cpuValue,
+      memory_mb: memoryValue
+    });
+
+    if (response.success) {
+      setSelectedTier(tier.tier);
+      showToast('Resources updated successfully', 'success');
+    } else {
+      showToast(response.error || 'Failed to update resources', 'error');
+    }
+    setLoading(false);
+  };
+
+  const handleCustomSave = async () => {
+    if (loading) return;
+
+    if (customCpu < 0.25 || customCpu > 4.0) {
+      showToast('CPU must be between 0.25 and 4.00 cores', 'error');
+      return;
+    }
+
+    if (customMemory < 128 || customMemory > 8192) {
+      showToast('Memory must be between 128 MB and 8192 MB', 'error');
+      return;
+    }
+
+    setLoading(true);
+    const response = await projectsApi.setResources(projectId, {
+      tier: 'custom',
+      cpu_cores: customCpu,
+      memory_mb: customMemory
+    });
+
+    if (response.success) {
+      setSelectedTier('custom');
+      setShowCustomEdit(false);
+      showToast('Custom resources saved successfully', 'success');
+    } else {
+      showToast(response.error || 'Failed to save custom resources', 'error');
+    }
+    setLoading(false);
+  };
+
+  const formatMemory = (mb: number) => {
+    if (mb >= 1024) return `${(mb / 1024).toFixed(mb % 1024 === 0 ? 0 : 1)} GB`;
+    return `${mb} MB`;
+  };
+
+  return (
+    <div className="bg-white rounded-[20px] border border-black/5 p-6">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-5">
+        <div className="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center border border-indigo-200">
+          {generateIcon('cpu%20processor%203-115-1658236937.png', 24, 'rgb(79, 70, 229)')}
+        </div>
+        <div>
+        <h3 className="text-lg font-semibold text-black">Machine Power</h3>
+          <p className="text-xs text-black/50">
+            Configure the machine power for your project.
+          </p>
+        </div>
+      </div>
+
+      {/* Tier Options - Grid Layout (includes Custom) */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mb-3">
+        {RESOURCE_TIERS.map((tier) => {
+          const isSelected = selectedTier === tier.tier;
+          return (
+            <button
+              key={tier.tier}
+              onClick={() => handleTierSelect(tier)}
+              disabled={loading}
+              className={`relative flex items-center gap-3 p-3 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
+                isSelected
+                  ? 'bg-indigo-50 border-2 border-indigo-500'
+                  : 'bg-black/5 hover:bg-black/10 border-2 border-transparent'
+              }`}
+            >
+              {isSelected && (
+                <div className="absolute top-2 right-2">
+                  <div className="w-4 h-4 bg-indigo-500 rounded-full flex items-center justify-center">
+                    {generateIcon('checkmark-7-1662452248.png', 12, 'white')}
+                  </div>
+                </div>
+              )}
+              <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${isSelected ? 'bg-indigo-500' : 'bg-black/10'}`}>
+                {generateIcon(tier.icon, 24, isSelected ? 'white' : 'rgb(0, 0, 0, 0.5)')}
+              </div>
+              <div className="flex-1 text-left">
+                <p className={`text-sm font-semibold mb-0.5 ${isSelected ? 'text-indigo-900' : 'text-black'}`}>
+                  {tier.name}
+                </p>
+                <p className={`text-[11px] ${isSelected ? 'text-indigo-700/80' : 'text-black/50'}`}>
+                  {tier.description}
+                </p>
+                <div className="flex items-center gap-3 mt-1.5">
+                  <div className={`text-[11px] ${isSelected ? 'text-indigo-900/70' : 'text-black/60'}`}>
+                    <span className="font-medium">{tier.cpu}</span>
+                  </div>
+                  <div className="w-1 h-1 rounded-full bg-black/20"></div>
+                  <div className={`text-[11px] ${isSelected ? 'text-indigo-900/70' : 'text-black/60'}`}>
+                    <span className="font-medium">{tier.memory}</span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          );
+        })}
+
+        {/* Custom Card */}
+        <button
+          onClick={() => {
+            if (selectedTier !== 'custom') {
+              setSelectedTier('custom');
+              setShowCustomEdit(true);
+            }
+          }}
+          disabled={loading}
+          className={`relative flex items-center gap-3 p-3 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
+            selectedTier === 'custom'
+              ? 'bg-indigo-50 border-2 border-indigo-500'
+              : 'bg-black/5 hover:bg-black/10 border-2 border-transparent'
+          }`}
+        >
+          {selectedTier === 'custom' && (
+            <div className="absolute top-2 right-2 flex items-center gap-1">
+              <div
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowCustomEdit(true);
+                }}
+                className="w-7 h-7 bg-indigo-500 hover:bg-indigo-600 rounded-full flex items-center justify-center transition-all cursor-pointer"
+              >
+                {generateIcon('edit-1648128800.png', 14, 'white')}
+              </div>
+              <div className="w-4 h-4 bg-indigo-500 rounded-full flex items-center justify-center">
+                {generateIcon('checkmark-7-1662452248.png', 12, 'white')}
+              </div>
+            </div>
+          )}
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${selectedTier === 'custom' ? 'bg-indigo-500' : 'bg-black/10'}`}>
+            {generateIcon('setting-100-1658432731.png', 24, selectedTier === 'custom' ? 'white' : 'rgb(0, 0, 0, 0.5)')}
+          </div>
+          <div className="flex-1 text-left">
+            <p className={`text-sm font-semibold mb-0.5 ${selectedTier === 'custom' ? 'text-indigo-900' : 'text-black'}`}>
+              Custom
+            </p>
+            <p className={`text-[11px] ${selectedTier === 'custom' ? 'text-indigo-700/80' : 'text-black/50'}`}>
+              Define your own resources
+            </p>
+            {selectedTier === 'custom' ? (
+              <div className="flex items-center gap-3 mt-1.5">
+                <div className={`text-[11px] ${selectedTier === 'custom' ? 'text-indigo-900/70' : 'text-black/60'}`}>
+                  <span className="font-medium">{customCpu} vCPU</span>
+                </div>
+                <div className="w-1 h-1 rounded-full bg-black/20"></div>
+                <div className={`text-[11px] ${selectedTier === 'custom' ? 'text-indigo-900/70' : 'text-black/60'}`}>
+                  <span className="font-medium">{formatMemory(customMemory)}</span>
+                </div>
+              </div>
+            ) : (
+              <div className={`text-[11px] mt-1.5 ${selectedTier === 'custom' ? 'text-indigo-900/70' : 'text-black/60'}`}>
+                Click to configure
+              </div>
+            )}
+          </div>
+        </button>
+      </div>
+
+      {/* Custom Edit Panel */}
+      {showCustomEdit && selectedTier === 'custom' && (
+        <div className="mt-3 p-4 bg-indigo-50 rounded-xl border border-indigo-200 space-y-4">
+          <div className="flex items-center justify-between mb-2">
+            <h4 className="text-sm font-semibold text-indigo-900">Configure Custom Resources</h4>
+            <button
+              onClick={() => setShowCustomEdit(false)}
+              className="w-6 h-6 rounded-md flex items-center justify-center hover:bg-indigo-100 transition-all"
+            >
+              {generateIcon('x-29-1658234823.png', 14, 'rgb(79, 70, 229)')}
+            </button>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-xs font-medium text-indigo-900/70 mb-2 block">CPU Cores</label>
+              <input
+                type="number"
+                min="0.25"
+                max="4.00"
+                step="0.25"
+                value={customCpu}
+                onChange={(e) => setCustomCpu(parseFloat(e.target.value) || 0)}
+                className="w-full px-3 py-2 bg-white border border-indigo-200 rounded-lg text-sm text-black focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                placeholder="0.50"
+              />
+              <p className="text-xs text-indigo-700/60 mt-1">Range: 0.25 - 4.00</p>
+            </div>
+            <div>
+              <label className="text-xs font-medium text-indigo-900/70 mb-2 block">Memory (MB)</label>
+              <input
+                type="number"
+                min="128"
+                max="8192"
+                step="128"
+                value={customMemory}
+                onChange={(e) => setCustomMemory(parseInt(e.target.value) || 0)}
+                className="w-full px-3 py-2 bg-white border border-indigo-200 rounded-lg text-sm text-black focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                placeholder="512"
+              />
+              <p className="text-xs text-indigo-700/60 mt-1">Range: 128 - 8192</p>
+            </div>
+          </div>
+          <div className="flex gap-3">
+            <button
+              onClick={() => setShowCustomEdit(false)}
+              disabled={loading}
+              className="flex-1 px-4 py-2.5 bg-white border border-indigo-200 hover:bg-indigo-50 text-indigo-900 font-medium text-sm rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleCustomSave}
+              disabled={loading}
+              className="flex-1 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Saving...' : 'Save Configuration'}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { Edit2, Save, X } from "lucide-react";
+
+interface Props {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  isEditing?: boolean;
+  onEdit?: () => void;
+  onSave?: () => void;
+  onCancel?: () => void;
+  showEditButton?: boolean;
+}
+
+export const SettingSection = ({ 
+  title, 
+  description, 
+  children, 
+  isEditing = false,
+  onEdit,
+  onSave,
+  onCancel,
+  showEditButton = false
+}: Props) => (
+  <div className="bg-white border border-gray-200 rounded-xl mb-6 shadow-sm overflow-hidden">
+    <div className="bg-gradient-to-r from-gray-50 to-white p-6 border-b border-gray-200">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-black mb-1">{title}</h3>
+          {description && <p className="text-sm text-gray-600">{description}</p>}
+        </div>
+        {showEditButton && (
+          <div className="flex gap-2">
+            {!isEditing ? (
+              <button
+                onClick={onEdit}
+                className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-all duration-200 font-medium text-sm"
+              >
+                <Edit2 className="w-4 h-4" />
+                Edit
+              </button>
+            ) : (
+              <>
+                <button
+                  onClick={onSave}
+                  className="flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-all duration-200 font-medium text-sm"
+                >
+                  <Save className="w-4 h-4" />
+                  Save
+                </button>
+                <button
+                  onClick={onCancel}
+                  className="flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-all duration-200 font-medium text-sm"
+                >
+                  <X className="w-4 h-4" />
+                  Cancel
+                </button>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+    <div className="p-6 bg-white">{children}</div>
+  </div>
+);

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

@@ -0,0 +1,27 @@
+import React from "react";
+
+export const SettingsNavigation = ({ tabs, activeTab, onTabChange }: any) => (
+  <div className="w-64 flex-shrink-0 border-r border-zinc-800">
+    <nav className="p-6">
+      <div className="space-y-1">
+        {tabs.map((tab: any) => {
+          const Icon = tab.icon;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
+                activeTab === tab.id
+                  ? "bg-zinc-800 text-white"
+                  : "text-zinc-400 hover:bg-zinc-900 hover:text-zinc-300"
+              }`}
+            >
+              <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
+              <span>{tab.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  </div>
+);

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

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { generateIcon } from '@/utils/icons';
+import { useToast } from '@/context/ToastContext';
+import { projectsApi } from "@/lib/api";
+
+interface SleepModeSettingsProps {
+  projectId: string;
+  currentMode: 'always_on' | 'auto_sleep';
+}
+
+export const SleepModeSettings: React.FC<SleepModeSettingsProps> = ({ 
+  projectId, 
+  currentMode 
+}) => {
+  const { showToast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [selectedMode, setSelectedMode] = useState(currentMode || 'auto_sleep');
+
+  const handleModeChange = async (mode: 'always_on' | 'auto_sleep') => {
+    if (loading || selectedMode === mode) return;
+    
+    setLoading(true);
+    const response = await projectsApi.setSleepMode(projectId, mode);
+
+    if (response.success) {
+      setSelectedMode(mode);
+      showToast('Sleep mode updated successfully', 'success');
+    } else {
+      showToast(response.error || 'Failed to update sleep mode', 'error');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="bg-white rounded-[20px] border border-black/5 p-6">
+      <div className="flex items-center gap-3 mb-5">
+        <div className="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center border border-indigo-200">
+          {generateIcon('preferences-95-1658432731.png', 24, 'rgb(79, 70, 229)')}
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-black">Machine Mode</h3>
+          <p className="text-xs text-black/50">Control availability and cost efficiency</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        {/* Auto Sleep Mode */}
+        <button
+          onClick={() => handleModeChange('auto_sleep')}
+          disabled={loading}
+          className={`relative flex items-center gap-3 p-3 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
+            selectedMode === 'auto_sleep'
+              ? 'bg-indigo-50 border-2 border-indigo-500'
+              : 'bg-black/5 hover:bg-black/10 border-2 border-transparent'
+          }`}
+        >
+          {selectedMode === 'auto_sleep' && (
+            <div className="absolute top-2 right-2">
+              <div className="w-4 h-4 bg-indigo-500 rounded-full flex items-center justify-center">
+                {generateIcon('checkmark-7-1662452248.png', 12, 'white')}
+              </div>
+            </div>
+          )}
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${selectedMode === 'auto_sleep' ? 'bg-indigo-500' : 'bg-black/10'}`}>
+            {generateIcon('auto%20flash-91-1689918656.png', 24, selectedMode === 'auto_sleep' ? 'white' : 'rgb(0, 0, 0, 0.5)')}
+          </div>
+          <div className="flex-1 text-left pr-4">
+            <div className="flex items-center gap-2 mb-0.5">
+              <p className={`text-sm font-semibold ${selectedMode === 'auto_sleep' ? 'text-indigo-900' : 'text-black'}`}>
+                Auto Sleep
+              </p>
+              <span className="px-1.5 py-0.5 bg-emerald-100 text-emerald-700 text-[9px] font-semibold rounded-full">
+                RECOMMENDED
+              </span>
+            </div>
+            <p className={`text-[11px] ${selectedMode === 'auto_sleep' ? 'text-indigo-700/80' : 'text-black/50'}`}>
+              Stops when idle, wakes instantly
+            </p>
+            <p className={`text-[11px] ${selectedMode === 'auto_sleep' ? 'text-indigo-600/70' : 'text-black/40'}`}>
+              Cost-efficient • No cold start
+            </p>
+          </div>
+        </button>
+
+        {/* Always On Mode */}
+        <button
+          onClick={() => handleModeChange('always_on')}
+          disabled={loading}
+          className={`relative flex items-center gap-3 p-3 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
+            selectedMode === 'always_on'
+              ? 'bg-indigo-50 border-2 border-indigo-500'
+              : 'bg-black/5 hover:bg-black/10 border-2 border-transparent'
+          }`}
+        >
+          {selectedMode === 'always_on' && (
+            <div className="absolute top-2 right-2">
+              <div className="w-4 h-4 bg-indigo-500 rounded-full flex items-center justify-center">
+                {generateIcon('checkmark-7-1662452248.png', 12, 'white')}
+              </div>
+            </div>
+          )}
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${selectedMode === 'always_on' ? 'bg-indigo-500' : 'bg-black/10'}`}>
+            {generateIcon('connected%20cable-99-1689918656.png', 24, selectedMode === 'always_on' ? 'white' : 'rgb(0, 0, 0, 0.5)')}
+          </div>
+          <div className="flex-1 text-left pr-4">
+            <p className={`text-sm font-semibold mb-0.5 ${selectedMode === 'always_on' ? 'text-indigo-900' : 'text-black'}`}>
+              Always On
+            </p>
+            <p className={`text-[11px] ${selectedMode === 'always_on' ? 'text-indigo-700/80' : 'text-black/50'}`}>
+              Container never stops
+            </p>
+            <p className={`text-[11px] ${selectedMode === 'always_on' ? 'text-indigo-600/70' : 'text-black/40'}`}>
+              Maximum availability • Higher cost
+            </p>
+          </div>
+        </button>
+      </div>
+
+      {/* Info Box */}
+      <div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-xl">
+        <div className="flex items-start gap-2">
+          {generateIcon('info%20circle-16-1662452248.png', 16, 'var(--color-amber-600)')}
+          <div>
+            <p className="text-xs font-semibold text-amber-900 mb-0.5">How Auto Sleep works</p>
+            <p className="text-[11px] text-amber-800/80 leading-relaxed">
+              When there are requests, your container stays running. After inactivity, it sleeps to save costs. 
+              On the next request, it wakes up <span className="font-semibold">instantly</span> - no cold start delays.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { generateIcon } from "@/utils/icons";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+
+
+export const ProductionUrl: React.FC = () => {
+  const { domain } = useProjectSettings();
+  return (
+    <div className="bg-white rounded-[20px] border border-black/5 p-5 hover:shadow-md transition-all">
+      <div className="flex items-center gap-2 mb-4">
+        {generateIcon('world-229-1658433759.png', 24, 'rgb(79, 70, 229)')}
+        <h3 className="text-base font-semibold text-black">Production URL</h3>
+      </div>
+      <a
+        href={`https://${domain}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm font-medium text-black hover:text-indigo-600 truncate flex items-center gap-2 transition-colors"
+      >
+        {domain || 'Not configured'}
+        {generateIcon('External_link_HtLszLDBXqHilHK674zh2aKoSL7xUhyboAzP.png', 14, 'currentColor')}
+      </a>
+    </div>
+  );
+};