From 0dcb798894f41d978f2030ef15db91895a84c610 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 2 Jan 2026 23:02:30 +0700
Subject: [PATCH] feat: Add news detail page with view increment and media
 loading

---
 app/Http/Controllers/Home/NewsController.php  | 13 +++
 .../home/news/components/MainContent.jsx      |  1 +
 resources/js/pages/home/news/pages/Show.jsx   | 81 +++++++++++++++++++
 routes/web.php                                |  1 +
 4 files changed, 96 insertions(+)
 create mode 100644 resources/js/pages/home/news/pages/Show.jsx

diff --git a/app/Http/Controllers/Home/NewsController.php b/app/Http/Controllers/Home/NewsController.php
index 48d16f9..fe55cc4 100644
--- a/app/Http/Controllers/Home/NewsController.php
+++ b/app/Http/Controllers/Home/NewsController.php
@@ -67,4 +67,17 @@ public function index(Request $request)
             'filters' => request()->only(['search', 'category']),
         ]);
     }
+
+    public function show(News $news)
+    {
+        $news->load(['author', 'categories', 'tags']);
+        $news->increment('views');
+        $news->thumbnail = $news->getFirstMediaUrl('news');
+
+        return Inertia::render('home/news/pages/Show', [
+            'pageTitle' => 'Detail Berita',
+            'pageDescription' => $news->title,
+            'news' => $news,
+        ]);
+    }
 }
diff --git a/resources/js/pages/home/news/components/MainContent.jsx b/resources/js/pages/home/news/components/MainContent.jsx
index 6d361ea..690692f 100644
--- a/resources/js/pages/home/news/components/MainContent.jsx
+++ b/resources/js/pages/home/news/components/MainContent.jsx
@@ -210,6 +210,7 @@ export default function MainContent({ pageTitle, pageDescription, categories, ne
                             onBlur={handleBlur}
                             tabIndex={0}
                             className={focusedCardIndex === news.id ? 'Mui-focused' : ''}
+                            onClick={() => router.get(`/news/${news.slug}`)}
                         >
                             <CardMedia
                                 component="img"
diff --git a/resources/js/pages/home/news/pages/Show.jsx b/resources/js/pages/home/news/pages/Show.jsx
new file mode 100644
index 0000000..163f610
--- /dev/null
+++ b/resources/js/pages/home/news/pages/Show.jsx
@@ -0,0 +1,81 @@
+import CssBaseline from '@mui/material/CssBaseline';
+import Container from '@mui/material/Container';
+import AppTheme from '../../../theme/AppTheme';
+import Navbar from '../../components/Navbar';
+import Footer from '../../components/Footer';
+import { Box, CardMedia, Chip, styled, Typography } from '@mui/material';
+import Headline from '../../components/Headline';
+
+export default function NewsShowPage(props) {
+    const news = props.news;
+    console.log(news.tags, news.categories)
+
+    return (
+        <AppTheme {...props}>
+            <CssBaseline enableColorScheme />
+
+            <Navbar />
+            <Container
+                maxWidth="lg"
+                component="main"
+                sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+            >
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                    <div>
+                        <Headline pageTitle={props.pageTitle} pageDescription={props.pageDescription} />
+                    </div>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexDirection: { xs: 'column-reverse', md: 'row' },
+                            width: '100%',
+                            justifyContent: 'space-between',
+                            alignItems: { xs: 'start', md: 'center' },
+                            gap: 4,
+                            overflow: 'auto',
+                        }}
+                    >
+                    </Box>
+
+                    <CardMedia
+                        component="img"
+                        alt={news.title}
+                        image={news.thumbnail}
+                        sx={{
+                            aspectRatio: '16 / 9',
+                            borderBottom: '1px solid',
+                            borderColor: 'divider',
+                            borderRadius: 1,
+                        }}
+                    />
+
+                    <Typography gutterBottom variant="caption" component="div">
+                        {news.categories.map((category, index) =>
+                            <Chip label={category.name} color="success" variant="outlined" sx={{ mr: 1 }} key={index} />
+                        )}
+                    </Typography>
+
+                    <Typography gutterBottom variant="h6" component="div">
+                        {news.title}
+                    </Typography>
+
+                    <Typography
+                        variant="body2"
+                        color="text.secondary"
+                        gutterBottom
+                        dangerouslySetInnerHTML={{ __html: news.content }}
+                    />
+
+                    {news.tags && news.tags.length > 0 && (
+                        <Typography gutterBottom variant="caption" component="div">
+                            {news.tags.map((tag, index) =>
+                                <Chip label={tag.name} color="success" variant="outlined" sx={{ mr: 1 }} key={index} />
+                            )}
+                        </Typography>
+                    )}
+                </Box>
+            </Container>
+            <Footer />
+        </AppTheme>
+    );
+}
diff --git a/routes/web.php b/routes/web.php
index 2c6ac4a..fcf4a62 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,3 +6,4 @@
 
 Route::get('/', [HomepageController::class, 'index'])->name('homepage');
 Route::get('/news', [NewsController::class, 'index'])->name('news.index');
+Route::get('/news/{news:slug}', [NewsController::class, 'show'])->name('news.show');