Files
Sankofa/portal/src/app/well-architected/page.tsx
defiQUG 85fe29adc1 portal: Apollo dashboard queries, strict TypeScript build, UI primitives
- Add GraphQL dashboard operations, ApolloProvider, CardDescription, label/checkbox/alert
- Fix case-sensitive UI imports, Crossplane VM metadata uid, VMList spec parsing
- Extend next-auth session user (id, role); fairness filters as unknown; ESLint relax to warnings
- Remove unused session destructure across pages; next.config without skip TS/ESLint

api: GraphQL/WebSocket hardening, logger import in websocket service
Made-with: Cursor
2026-03-25 20:46:57 -07:00

72 lines
3.0 KiB
TypeScript

'use client';
import { useSession } from 'next-auth/react';
import { signIn } from 'next-auth/react';
// Well-Architected Framework dashboard - component to be implemented
// import WAFDashboard from '@/components/well-architected/WAFDashboard';
export default function WellArchitectedPage() {
const { status } = useSession();
if (status === 'loading') {
return (
<div className="flex min-h-screen items-center justify-center bg-gray-900">
<div className="text-center">
<div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600 mx-auto"></div>
<p className="text-gray-400">Loading...</p>
</div>
</div>
);
}
if (status === 'unauthenticated') {
return (
<div className="flex min-h-screen items-center justify-center bg-gray-900">
<div className="text-center max-w-md mx-auto p-8">
<h1 className="text-2xl font-bold text-white mb-4">Access Denied</h1>
<p className="text-gray-400 mb-6">Please sign in to view Well-Architected Framework</p>
<button
onClick={() => signIn()}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Sign In
</button>
</div>
</div>
);
}
return (
<div className="container mx-auto p-6">
<h1 className="text-3xl font-bold mb-6 text-white">Well-Architected Framework</h1>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div className="border rounded-lg p-4 bg-gray-800">
<h2 className="text-xl font-semibold mb-2 text-white">Security</h2>
<p className="text-gray-400">Security pillar assessment coming soon</p>
</div>
<div className="border rounded-lg p-4 bg-gray-800">
<h2 className="text-xl font-semibold mb-2 text-white">Reliability</h2>
<p className="text-gray-400">Reliability pillar assessment coming soon</p>
</div>
<div className="border rounded-lg p-4 bg-gray-800">
<h2 className="text-xl font-semibold mb-2 text-white">Performance</h2>
<p className="text-gray-400">Performance pillar assessment coming soon</p>
</div>
<div className="border rounded-lg p-4 bg-gray-800">
<h2 className="text-xl font-semibold mb-2 text-white">Cost Optimization</h2>
<p className="text-gray-400">Cost optimization assessment coming soon</p>
</div>
<div className="border rounded-lg p-4 bg-gray-800">
<h2 className="text-xl font-semibold mb-2 text-white">Operational Excellence</h2>
<p className="text-gray-400">Operational excellence assessment coming soon</p>
</div>
<div className="border rounded-lg p-4 bg-gray-800">
<h2 className="text-xl font-semibold mb-2 text-white">Sustainability</h2>
<p className="text-gray-400">Sustainability assessment coming soon</p>
</div>
</div>
</div>
);
}