init

2026-04-05 15:22:01 +03:30
commit 33be1649c4
82 changed files with 23956 additions and 0 deletions
@@ -0,0 +1,119 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import Link from 'next/link';
+import api from '@/lib/api';
+import { useAuthStore } from '@/lib/store';
+import type { Application } from '@/types';
+
+const statusColors: Record<string, string> = {
+  running: 'bg-green-100 text-green-700',
+  pending: 'bg-yellow-100 text-yellow-700',
+  building: 'bg-blue-100 text-blue-700',
+  deploying: 'bg-blue-100 text-blue-700',
+  failed: 'bg-red-100 text-red-700',
+  build_failed: 'bg-red-100 text-red-700',
+  stopped: 'bg-gray-100 text-gray-700',
+};
+
+export default function DashboardPage() {
+  const user = useAuthStore((s) => s.user);
+
+  const { data: apps = [], isLoading } = useQuery<Application[]>({
+    queryKey: ['applications'],
+    queryFn: () => api.get('/applications').then((r) => r.data),
+  });
+
+  const runningApps = apps.filter(
+    (a) => a.deployments?.some((d) => d.status === 'running'),
+  );
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900">
+          Welcome back, {user?.firstName}! 👋
+        </h1>
+        <p className="mt-1 text-gray-500">
+          Here&apos;s an overview of your applications.
+        </p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="card">
+          <p className="text-sm font-medium text-gray-500">Total Apps</p>
+          <p className="mt-2 text-3xl font-bold text-gray-900">{apps.length}</p>
+        </div>
+        <div className="card">
+          <p className="text-sm font-medium text-gray-500">Running</p>
+          <p className="mt-2 text-3xl font-bold text-green-600">{runningApps.length}</p>
+        </div>
+        <div className="card">
+          <p className="text-sm font-medium text-gray-500">Deployments (7d)</p>
+          <p className="mt-2 text-3xl font-bold text-primary-600">
+            {apps.reduce((sum, a) => sum + (a.deployments?.length || 0), 0)}
+          </p>
+        </div>
+      </div>
+
+      {/* Recent Applications */}
+      <div>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold text-gray-900">Recent Applications</h2>
+          <Link href="/dashboard/deploy" className="btn-primary text-sm">
+            + New Application
+          </Link>
+        </div>
+
+        {isLoading ? (
+          <div className="card text-center py-12 text-gray-500">Loading...</div>
+        ) : apps.length === 0 ? (
+          <div className="card text-center py-12">
+            <p className="text-gray-500 text-lg">No applications yet</p>
+            <p className="text-gray-400 mt-2">
+              Deploy your first application to get started.
+            </p>
+            <Link href="/dashboard/deploy" className="btn-primary mt-4 inline-block">
+              Deploy your first app
+            </Link>
+          </div>
+        ) : (
+          <div className="grid gap-4">
+            {apps.slice(0, 5).map((app) => {
+              const latestDeploy = app.deployments?.[0];
+              const status = latestDeploy?.status || 'pending';
+              return (
+                <Link
+                  key={app.id}
+                  href={`/dashboard/apps/${app.id}`}
+                  className="card hover:border-primary-300 transition-colors flex items-center justify-between"
+                >
+                  <div className="flex items-center space-x-4">
+                    <div className="w-10 h-10 rounded-lg bg-primary-100 flex items-center justify-center text-lg">
+                      {app.runtime === 'nodejs' ? '🟩' : '🟧'}
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-gray-900">{app.name}</h3>
+                      <p className="text-sm text-gray-500">
+                        {app.runtime} · {app.replicas} replica{app.replicas > 1 ? 's' : ''}
+                        {app.databaseType !== 'none' && ` · ${app.databaseType}`}
+                      </p>
+                    </div>
+                  </div>
+                  <span
+                    className={`px-3 py-1 rounded-full text-xs font-medium ${
+                      statusColors[status] || 'bg-gray-100 text-gray-600'
+                    }`}
+                  >
+                    {status}
+                  </span>
+                </Link>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}