import AdminLayout from '@/Layouts/AdminLayout'; import { Head, useForm, Link, router } from '@inertiajs/react'; import { Palette, Save, ArrowLeft, Upload, Globe, Hash, Instagram, Twitter, Linkedin, Facebook, Image as ImageIcon } from 'lucide-react'; import { useState, useRef } from 'react'; import { toast } from 'sonner'; import MediaPicker from '@/Components/MediaPicker'; interface Props { settings: { app_name: string; app_tagline: string; app_logo: string | null; app_favicon: string | null; primary_color: string; secondary_color: string; social_instagram: string | null; social_twitter: string | null; social_linkedin: string | null; social_facebook: string | null; }; } export default function Branding({ settings }: Props) { const { data, setData, patch, processing } = useForm({ app_name: settings.app_name, app_tagline: settings.app_tagline, primary_color: settings.primary_color, secondary_color: settings.secondary_color, social_instagram: settings.social_instagram || '', social_twitter: settings.social_twitter || '', social_linkedin: settings.social_linkedin || '', social_facebook: settings.social_facebook || '', }); const [activeTab, setActiveTab] = useState<'identity' | 'visuals' | 'social'>('identity'); const [pickerOpen, setPickerOpen] = useState(false); const [pickerType, setPickerType] = useState<'app_logo' | 'app_favicon' | null>(null); const submit = (e: React.FormEvent) => { e.preventDefault(); patch(route('admin.settings.branding.update'), { onSuccess: () => toast.success('Branding settings updated'), }); }; const openPicker = (type: 'app_logo' | 'app_favicon') => { setPickerType(type); setPickerOpen(true); }; const handleMediaSelect = (media: any) => { if (!pickerType) return; // Save the selection immediately to the database using the same logic as before router.post(route('admin.settings.branding.logo'), { type: pickerType, file_url: media.url // We'll update the controller to accept a direct URL too }, { onSuccess: () => toast.success(`${pickerType === 'app_logo' ? 'Logo' : 'Favicon'} updated`), }); }; return (
Back to Settings

Branding

Customize your platform's identity and visual presence.

{/* Horizontal Tabs - Scrollable on mobile */}
{[ { id: 'identity', label: 'Identity', icon: Globe }, { id: 'visuals', label: 'Visuals', icon: Palette }, { id: 'social', label: 'Social Presence', icon: Hash }, ].map((tab) => ( ))}
{/* Form Content */}
{activeTab === 'identity' && (
setData('app_name', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all" placeholder="Altivate Solutions" />
setData('app_tagline', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all" placeholder="Accelerating digital growth" />
{settings.app_logo ? ( Logo ) : (
Select from Library
)}
{settings.app_favicon ? ( Favicon ) : ( )}
)} {activeTab === 'visuals' && (
setData('primary_color', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] font-mono outline-none focus:border-accent" /> setData('primary_color', e.target.value)} className="mt-2 w-full h-2 rounded cursor-pointer" />
setData('secondary_color', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] font-mono outline-none focus:border-accent" /> setData('secondary_color', e.target.value)} className="mt-2 w-full h-2 rounded cursor-pointer" />
{/* Live Preview Sample */}
UI Preview
)} {activeTab === 'social' && (
{[ { id: 'social_instagram', label: 'Instagram', icon: Instagram, placeholder: 'https://instagram.com/yourbrand' }, { id: 'social_twitter', label: 'Twitter (X)', icon: Twitter, placeholder: 'https://twitter.com/yourbrand' }, { id: 'social_linkedin', label: 'LinkedIn', icon: Linkedin, placeholder: 'https://linkedin.com/company/yourbrand' }, { id: 'social_facebook', label: 'Facebook', icon: Facebook, placeholder: 'https://facebook.com/yourbrand' }, ].map((field) => (
setData(field.id as any, e.target.value)} className="w-full pl-11 pr-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] outline-none focus:border-accent" placeholder={field.placeholder} />
))}
)}
setPickerOpen(false)} onSelect={handleMediaSelect} title={`Select ${pickerType === 'app_logo' ? 'Logo' : 'Favicon'}`} /> ); }