From f8d6c495fccc12cdd3e9520277054b6da17653a7 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 24 Apr 2026 21:22:55 +0700
Subject: [PATCH] feat: integrate GeneralSettings into homepage for dynamic
 display of logo, description, address, and contact information

---
 app/Http/Controllers/HomepageController.php |  2 ++
 resources/js/pages/homepage.tsx             | 25 ++++++++++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/Http/Controllers/HomepageController.php b/app/Http/Controllers/HomepageController.php
index e911083..4660532 100644
--- a/app/Http/Controllers/HomepageController.php
+++ b/app/Http/Controllers/HomepageController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Models\Category;
+use App\Models\GeneralSetting;
 use App\Models\Product;
 
 class HomepageController extends Controller
@@ -13,6 +14,7 @@ public function __invoke()
         $categorySlug = request('category');
 
         return inertia('homepage', [
+            'setting' => GeneralSetting::first(),
             'categories' => Category::active()->get(),
             'bestSellers' => Product::with(['categories' => fn ($q) => $q->active(), 'prices'])
                 ->when($search, function ($query, $search) {
diff --git a/resources/js/pages/homepage.tsx b/resources/js/pages/homepage.tsx
index 684cd65..d45f4cf 100644
--- a/resources/js/pages/homepage.tsx
+++ b/resources/js/pages/homepage.tsx
@@ -2,8 +2,9 @@ import { formatCurrency } from '@/lib/formatters';
 import { Link, router } from '@inertiajs/react';
 import { ArrowRight, Facebook, Instagram, Phone, Search, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { GeneralSetting } from '@/types/general-setting';
 
-export default function Homepage({ categories = [], bestSellers, topSellingProducts = [] }: { categories: any[], bestSellers: any, topSellingProducts: any[] }) {
+export default function Homepage({ categories = [], bestSellers, topSellingProducts = [], setting }: { categories: any[], bestSellers: any, topSellingProducts: any[], setting: GeneralSetting }) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isScrolled, setIsScrolled] = useState(false);
     const [selectedProduct, setSelectedProduct] = useState<any>(null);
@@ -401,12 +402,12 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                     <div className="mx-auto max-w-7xl border-x border-[#1e4a6d]/20">
                         <div className="grid grid-cols-1 gap-12 border-b border-[#1e4a6d]/10 px-6 py-16 lg:grid-cols-12 lg:px-12">
                             {/* Brand Info */}
-                            <div className="lg:col-span-5">
+                            <div className="lg:col-span-6">
                                 <div className="mb-6 flex items-center gap-2 text-xl font-bold uppercase tracking-tighter">
-                                    VN Grup
+                                    {setting?.logo_url ? <img src={setting.logo_url} alt={setting.name} className="max-h-8" /> : (setting?.name || 'VN Grup')}
                                 </div>
-                                <p className="mb-8 text-sm leading-relaxed opacity-60 lg:max-w-xs">
-                                    Menghadirkan produk esensial yang tak lekang oleh waktu dengan fokus pada kualitas, keberlanjutan, dan gaya yang abadi.
+                                <p className="mb-8 text-sm leading-relaxed opacity-60">
+                                    {setting?.description || 'Menghadirkan produk esensial yang tak lekang oleh waktu dengan fokus pada kualitas, keberlanjutan, dan gaya yang abadi.'}
                                 </p>
                                 <div className="flex gap-4">
                                     <Facebook size={18} className="cursor-pointer hover:opacity-50" />
@@ -426,23 +427,21 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                             </div>
 
                             {/* Contact Info */}
-                            <div className="lg:col-span-5">
+                            <div className="lg:col-span-4">
                                 <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Kontak</h3>
                                 <div className="space-y-4 text-sm opacity-60">
                                     <div className="flex gap-3">
                                         <div className="shrink-0 pt-1">
                                             <Search size={14} className="rotate-45" />
                                         </div>
-                                        <p className="leading-relaxed">
-                                            Jl. Raya Utama No. 123, <br />
-                                            Kec. Lengkong, Kota Bandung, <br />
-                                            Jawa Barat 40262
+                                        <p className="leading-relaxed whitespace-pre-line">
+                                            {setting?.address || 'Jl. Raya Utama No. 123, \n Kec. Lengkong, Kota Bandung, \n Jawa Barat 40262'}
                                         </p>
                                     </div>
                                     <div className="flex items-center gap-3">
                                         <Phone size={14} />
-                                        <a href="https://wa.me/628123456789" target="_blank" className="hover:underline">
-                                            +62 812 3456 789
+                                        <a href={`https://wa.me/${(setting?.phone || '+628123456789').replace(/\D/g, '')}`} target="_blank" className="hover:underline">
+                                            {setting?.phone || '+62 812 3456 789'}
                                         </a>
                                     </div>
                                 </div>
@@ -451,7 +450,7 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
 
                         {/* Bottom Bar */}
                         <div className="px-6 py-6 text-center text-[10px] font-bold uppercase tracking-widest lg:px-12 lg:text-left">
-                            <p className="opacity-50">© 2026 VN Grup.</p>
+                            <p className="opacity-50">© {new Date().getFullYear()} {setting?.name || 'VN Grup'}.</p>
                         </div>
                     </div>
                 </footer>