VIBN Frontend for Coolify deployment
This commit is contained in:
239
app/[workspace]/debug-projects/page.tsx
Normal file
239
app/[workspace]/debug-projects/page.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { auth, db } from '@/lib/firebase/config';
|
||||
import { collection, query, where, getDocs } from 'firebase/firestore';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
|
||||
interface ProjectDebugInfo {
|
||||
id: string;
|
||||
productName: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
userId: string;
|
||||
workspacePath?: string;
|
||||
createdAt: any;
|
||||
updatedAt: any;
|
||||
}
|
||||
|
||||
export default function DebugProjectsPage() {
|
||||
const [projects, setProjects] = useState<ProjectDebugInfo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [userId, setUserId] = useState<string>('');
|
||||
|
||||
const loadProjects = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
setError('Not authenticated');
|
||||
return;
|
||||
}
|
||||
|
||||
setUserId(user.uid);
|
||||
|
||||
const projectsRef = collection(db, 'projects');
|
||||
const projectsQuery = query(
|
||||
projectsRef,
|
||||
where('userId', '==', user.uid)
|
||||
);
|
||||
const snapshot = await getDocs(projectsQuery);
|
||||
|
||||
const projectsData = snapshot.docs.map(doc => {
|
||||
const data = doc.data();
|
||||
return {
|
||||
id: doc.id,
|
||||
productName: data.productName || 'N/A',
|
||||
name: data.name || 'N/A',
|
||||
slug: data.slug || 'N/A',
|
||||
userId: data.userId || 'N/A',
|
||||
workspacePath: data.workspacePath,
|
||||
createdAt: data.createdAt,
|
||||
updatedAt: data.updatedAt,
|
||||
};
|
||||
});
|
||||
|
||||
console.log('DEBUG: All projects from Firebase:', projectsData);
|
||||
setProjects(projectsData);
|
||||
} catch (err: any) {
|
||||
console.error('Error loading projects:', err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = auth.onAuthStateChanged((user) => {
|
||||
if (user) {
|
||||
loadProjects();
|
||||
} else {
|
||||
setError('Please sign in');
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
return () => unsubscribe();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-8 bg-background">
|
||||
<div className="max-w-6xl mx-auto space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">🔍 Projects Debug Page</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
View all your projects and their unique IDs from Firebase
|
||||
</p>
|
||||
{userId && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
User ID: <code className="bg-muted px-2 py-1 rounded">{userId}</code>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={loadProjects} disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Card className="border-red-500">
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-red-600">Error: {error}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{loading && !error && (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-center text-muted-foreground">Loading projects from Firebase...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total Projects</p>
|
||||
<p className="text-2xl font-bold">{projects.length}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Unique IDs</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{new Set(projects.map(p => p.id)).size}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Duplicate IDs?</p>
|
||||
<p className={`text-2xl font-bold ${projects.length !== new Set(projects.map(p => p.id)).size ? 'text-red-500' : 'text-green-500'}`}>
|
||||
{projects.length !== new Set(projects.map(p => p.id)).size ? 'YES ⚠️' : 'NO ✓'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold">All Projects</h2>
|
||||
{projects.map((project, index) => (
|
||||
<Card key={project.id + index}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center justify-between">
|
||||
<span>#{index + 1}: {project.productName}</span>
|
||||
<a
|
||||
href={`/marks-account/project/${project.id}/overview`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary hover:underline"
|
||||
>
|
||||
Open Overview →
|
||||
</a>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-muted-foreground">Project ID</p>
|
||||
<code className="block bg-muted px-2 py-1 rounded mt-1 break-all">
|
||||
{project.id}
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Slug</p>
|
||||
<code className="block bg-muted px-2 py-1 rounded mt-1 break-all">
|
||||
{project.slug}
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Product Name</p>
|
||||
<p className="font-medium mt-1">{project.productName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Internal Name</p>
|
||||
<p className="font-medium mt-1">{project.name}</p>
|
||||
</div>
|
||||
{project.workspacePath && (
|
||||
<div className="col-span-2">
|
||||
<p className="text-muted-foreground">Workspace Path</p>
|
||||
<code className="block bg-muted px-2 py-1 rounded mt-1 break-all text-xs">
|
||||
{project.workspacePath}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(project.id);
|
||||
alert('Project ID copied to clipboard!');
|
||||
}}
|
||||
>
|
||||
Copy ID
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const url = `/marks-account/project/${project.id}/v_ai_chat`;
|
||||
window.open(url, '_blank');
|
||||
}}
|
||||
>
|
||||
Open Chat
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
console.log('Full project data:', project);
|
||||
alert('Check browser console for full data');
|
||||
}}
|
||||
>
|
||||
Log to Console
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user