salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pre luanch plan phase 1 complete

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-05 03:40:39 +00:00
parent 1f2e734ea2
commit e93ea77c2b
60 changed files with 492 additions and 5215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/common/PageLoader.tsx Normal file
View File

@@ -0,0 +1,31 @@
/**
* Page Loader Component - Global page loading indicator
* Displays a consistent spinner overlay when pages are loading
* Used in AppLayout to provide unified loading experience across all pages
*/
import React from 'react';
import { Spinner } from '../ui/spinner/Spinner';
import { usePageLoadingContext } from '../../context/PageLoadingContext';
interface PageLoaderProps {
className?: string;
}
export const PageLoader: React.FC<PageLoaderProps> = ({ className = '' }) => {
const { isLoading, loadingMessage } = usePageLoadingContext();
if (!isLoading) return null;
return (
<div className={`flex flex-col items-center justify-center py-20 ${className}`}>
<Spinner size="lg" color="primary" />
{loadingMessage && (
<p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
{loadingMessage}
</p>
)}
</div>
);
};
export default PageLoader;

34
frontend/src/components/common/SiteCard.tsx
View File

@@ -52,8 +52,8 @@ export default function SiteCard({
return (
<article className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3">
<div className="relative p-5 pb-9">
<div className="flex items-center gap-3 mb-3">
<div className="relative p-3 pb-5">
<div className="flex items-center gap-2 mb-1">
<div className="inline-flex items-center justify-center">
{icon}
</div>
@@ -61,32 +61,34 @@ export default function SiteCard({
{site.name}
</h3>
</div>
<p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2">
{site.description || 'No description'}
</p>
{site.domain && (
<p className="text-xs text-gray-400 dark:text-gray-500 mb-2">
<p className="text-xs text-gray-400 dark:text-gray-500 mb-2 ml-8">
{site.domain}
</p>
)}
<div className="flex items-center gap-2 mb-2 flex-wrap">
<SiteTypeBadge hostingType={site.hosting_type} />
{site.description && (
<p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2">
{site.description}
</p>
)}
<div className="flex items-center gap-1.5 mb-2 flex-wrap">
<SiteTypeBadge hostingType={site.hosting_type} size="xs" />
{site.industry_name && (
<Badge variant="soft" color="warning" size="sm">
<Badge variant="soft" color="warning" size="xs">
{site.industry_name}
</Badge>
)}
<Badge variant="soft" color="neutral" size="sm">
<Badge variant="soft" color="neutral" size="xs">
{site.active_sectors_count} / 5 Sectors
</Badge>
{site.status && (
<Badge variant={site.is_active ? 'solid' : 'soft'} color={site.status === 'active' ? 'success' : 'neutral'} size="sm">
<Badge variant={site.is_active ? 'solid' : 'soft'} color={site.status === 'active' ? 'success' : 'neutral'} size="xs">
{site.status}
</Badge>
)}
</div>
{/* Setup Checklist - Compact View */}
<div className="mt-3">
<div className="mt-2">
<SiteSetupChecklist
siteId={site.id}
siteName={site.name}
@@ -98,18 +100,18 @@ export default function SiteCard({
/>
</div>
{/* Status Text and Circle - Same row */}
<div className="absolute top-5 right-5 flex items-center gap-2">
<div className="absolute top-3 right-3 flex items-center gap-2">
<span className={`text-sm ${statusText.color} ${statusText.bold ? 'font-bold' : ''} transition-colors duration-200`}>
{statusText.text}
</span>
<div
className={`w-[25px] h-[25px] rounded-full ${getStatusColor()} transition-colors duration-200`}
className={`w-[20px] h-[20px] rounded-full ${getStatusColor()} transition-colors duration-200`}
title={site.is_active ? 'Active site' : 'Inactive site'}
/>
</div>
</div>
<div className="flex items-center justify-between border-t border-gray-200 p-4 dark:border-gray-800">
<div className="flex gap-2 flex-1">
<div className="flex items-center justify-between border-t border-gray-200 p-2 dark:border-gray-800">
<div className="flex gap-1.5 flex-1">
<Button
variant="primary"
tone="brand"