import { ReactNode } from 'react'; import { Head } from '@inertiajs/react'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import AdminLayout from '@/layouts/AdminLayout'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { ExternalLink, Palette, BookOpen, Newspaper, Star, Eye, Layout, Navigation, Settings, Plus } from 'lucide-react'; import CompanyBrandingPanel from '@/components/admin/CompanyBrandingPanel'; import CompanyFeaturedCoursesTab from '@/components/admin/company-detail/CompanyFeaturedCoursesTab'; import CompanyBlogTab from '@/components/admin/company-detail/CompanyBlogTab'; import CompanyTestimonialsTab from '@/components/admin/company-detail/CompanyTestimonialsTab'; import { toast } from 'sonner'; const csrfToken = () => (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? ''; const LocktelCMSPage = () => { const queryClient = useQueryClient(); // Find the company with branding subdomain = locktel-academy, or by name const { data: locktelCompany, isLoading } = useQuery({ queryKey: ['locktel-company'], queryFn: async () => { const res = await fetch('/api/admin/locktel-cms/company'); if (!res.ok) return null; const data = await res.json().catch(() => null); return data || null; }, }); // Auto-create Locktel Academy company if not found const createCompanyMutation = useMutation({ mutationFn: async () => { const res = await fetch('/api/admin/locktel-cms/company', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() }, body: JSON.stringify({ name: 'Locktel Academy', company_type: 'training_provider', status: 'approved', contact_email: 'info@locktelacademy.co.uk', branding: { subdomain: 'locktel-academy', is_active: true, tagline: 'From theory to the field', primary_color: '#DC2626', secondary_color: '#1E40AF', background_color: '#0F172A', font_color: '#FFFFFF', card_color: '#1E293B', card_font_color: '#F1F5F9', }, }), }); if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.error || 'Failed to create'); } return res.json(); }, onSuccess: () => { toast.success('Locktel Academy company and branding created!'); queryClient.invalidateQueries({ queryKey: ['locktel-company'] }); }, onError: (error: any) => { toast.error('Failed to create: ' + error.message); }, }); if (isLoading) { return ( <>
); } if (!locktelCompany) { return ( <>

Locktel Academy CMS

No Locktel Academy company found. Click below to auto-create the company with default branding.

); } const previewUrl = `${window.location.origin}/?tenant=locktel-academy`; return ( <>

Locktel Academy CMS

Manage the dedicated Locktel Academy frontend — branding, courses, content, and testimonials.

{locktelCompany.status}
Branding & Theme Homepage Content Navigation Featured Courses Blog / News Testimonials Domain Settings
); }; const HomepageContentTab = () => (
Hero Section

The hero section uses the hero image/video and tagline from the Branding & Theme tab. Stats shown are: 50+ Classroom Courses, 100+ E-Learning Modules, 10k+ Delegates Trained.

{['50+ Classroom Courses', '100+ E-Learning Modules', '10k+ Delegates Trained'].map((stat) => (

{stat}

))}
About Introduction

This section appears below the hero and provides an overview of Locktel Academy's offerings. Content is currently hardcoded — edit the LocktelHomePage component to customise.

Training Sections

Two side-by-side sections showcasing key training areas:

Smart Awards Training

Fibre optics, telecoms, NOPS card

CABWI NRSWA Training

Street works, excavation, SWQR card

 Why Choose Us — 4 Pillars
{[ { title: 'Cutting-Edge Curriculum', desc: 'Industry expert developed programs' }, { title: 'Hands-On Learning', desc: 'Real-world equipment and simulations' }, { title: 'Expert Instructors', desc: 'Seasoned industry professionals' }, { title: 'Flexible Options', desc: 'On-site, weekend, modular courses' }, ].map(({ title, desc }) => (

{title}

{desc}

))}
); const NavigationTab = () => (
Main Navigation Structure

The Locktel Academy navigation includes dropdown menus matching the live site structure. Navigation items are currently configured in code — future updates will make these editable here.

{[ { label: 'Home', type: 'link', href: '/' }, { label: 'Training Courses', type: 'dropdown', items: 'All Courses, Plant Machinery, Traffic Management, Health & Safety' }, { label: 'Smart Awards', type: 'dropdown', items: 'All Smart Awards, Fibre Optics, Telecoms Safety' }, { label: 'NRSWA Courses', type: 'dropdown', items: 'All NRSWA, Operative, Supervisor' }, { label: 'E-Learning', type: 'link', href: '/courses?cat=e-learning' }, { label: 'About', type: 'link', href: '/about' }, { label: 'Contact', type: 'link', href: '/contact' }, ].map((item) => (

{item.label}

{item.type === 'dropdown' && (

Dropdown: {item.items}

)}
{item.type}
))}
Footer Links

The footer includes Quick Links, Policy Pages (11 policies), Contact Details, and a Newsletter signup form.

Quick Links

Home, Courses, About Us, Contact, FAQs

Policy Pages

11 policy links (Privacy, H&S, Equality, etc.)
); const DomainSettingsTab = () => (
Domain Configuration

The Locktel Academy frontend can be served from its own domain. The domain-to-tenant mapping is configured in the application code and will activate when domains are connected via Project Settings → Domains.

locktelacademy.co.uk

Maps to → Locktel Academy frontend

Configured

utilitytrainingcentre.co.uk

Maps to → UTC Marketplace

Configured

yuta.utilitytrainingcentre.co.uk

Maps to → YUTA tenant (generic white-label)

Planned

Preview testing: Use ?tenant=locktel-academy query parameter to preview the Locktel frontend without connecting a domain.

); LocktelCMSPage.layout = (page: ReactNode) => {page}; export default LocktelCMSPage;