diff --git a/src/pages/history/trending/IndexTrending.jsx b/src/pages/history/trending/IndexTrending.jsx
index 0a1ade5..ec81f95 100644
--- a/src/pages/history/trending/IndexTrending.jsx
+++ b/src/pages/history/trending/IndexTrending.jsx
@@ -5,6 +5,7 @@ import { Typography, Select, DatePicker, Button, Row, Col, Card, Statistic } fro
 import { ResponsiveLine } from '@nivo/line';
 import { ResponsivePie } from '@nivo/pie';
 import { FileTextOutlined, ToolOutlined, CheckCircleOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { decryptData } from '../../../components/Global/Formatter';
 import dayjs from 'dayjs';
 import './trending.css';
 
@@ -18,10 +19,33 @@ const IndexTrending = memo(function IndexTrending() {
     const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
     const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
     const [periode, setPeriode] = useState('Bulanan');
+    const [userRole, setUserRole] = useState(null);
+    const [roleLevel, setRoleLevel] = useState(null);
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
+            // Get user data and role
+            let userData = null;
+            const sessionData = localStorage.getItem('session');
+            if (sessionData) {
+                userData = decryptData(sessionData);
+            } else {
+                const userRaw = localStorage.getItem('user');
+                if (userRaw) {
+                    try {
+                        userData = { user: JSON.parse(userRaw) };
+                    } catch (e) {
+                        console.error('Error parsing user data:', e);
+                    }
+                }
+            }
+
+            if (userData?.user) {
+                setUserRole(userData.user.role_name);
+                setRoleLevel(userData.user.role_level);
+            }
+
             setBreadcrumbItems([
                 { title: <Text strong style={{ fontSize: '14px' }}>• History</Text> },
                 { title: <Text strong style={{ fontSize: '14px' }}>Trending</Text> },
@@ -106,6 +130,12 @@ const IndexTrending = memo(function IndexTrending() {
         setPeriode('Bulanan');
     };
 
+    // Check if user has permission to view data (all except guest)
+    const canViewData = userRole && userRole !== 'guest';
+
+    // Check if user can export/filter (administrator, engineer)
+    const canExportData = userRole && (userRole === 'administrator' || userRole === 'engineer');
+
     return (
         <React.Fragment>
             <div className="trending-container">
@@ -170,12 +200,21 @@ const IndexTrending = memo(function IndexTrending() {
                 </Row>
                 <Row gutter={8} style={{ marginTop: '16px' }}>
                     <Col>
-                        <Button type="primary" danger icon={<FileTextOutlined />}>
+                        <Button
+                            type="primary"
+                            danger
+                            icon={<FileTextOutlined />}
+                            disabled={!canViewData}
+                        >
                             Tampilkan
                         </Button>
                     </Col>
                     <Col>
-                        <Button onClick={handleReset} style={{ backgroundColor: '#6c757d', color: 'white' }}>
+                        <Button
+                            onClick={handleReset}
+                            style={{ backgroundColor: '#6c757d', color: 'white' }}
+                            disabled={!canViewData}
+                        >
                             Reset
                         </Button>
                     </Col>
@@ -183,56 +222,66 @@ const IndexTrending = memo(function IndexTrending() {
             </Card>
 
             {/* Statistics Cards */}
-            <Row gutter={16} style={{ marginTop: '24px' }}>
-                <Col xs={24} sm={12} md={6}>
-                    <Card className="stat-card stat-card-red">
-                        <div className="stat-icon">
-                            <FileTextOutlined style={{ fontSize: '24px' }} />
-                        </div>
-                        <Statistic
-                            title={<Text style={{ fontSize: '12px', color: '#666' }}>Total Error</Text>}
-                            value={245}
-                            valueStyle={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}
-                        />
-                    </Card>
-                </Col>
-                <Col xs={24} sm={12} md={6}>
-                    <Card className="stat-card stat-card-orange">
-                        <div className="stat-icon">
-                            <ToolOutlined style={{ fontSize: '24px' }} />
-                        </div>
-                        <Statistic
-                            title={<Text style={{ fontSize: '12px', color: '#666' }}>Sedang Maintenance</Text>}
-                            value={12}
-                            valueStyle={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}
-                        />
-                    </Card>
-                </Col>
-                <Col xs={24} sm={12} md={6}>
-                    <Card className="stat-card stat-card-green">
-                        <div className="stat-icon">
-                            <CheckCircleOutlined style={{ fontSize: '24px' }} />
-                        </div>
-                        <Statistic
-                            title={<Text style={{ fontSize: '12px', color: '#666' }}>Selesai Diperbaiki</Text>}
-                            value={233}
-                            valueStyle={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}
-                        />
-                    </Card>
-                </Col>
-                <Col xs={24} sm={12} md={6}>
-                    <Card className="stat-card stat-card-blue">
-                        <div className="stat-icon">
-                            <ClockCircleOutlined style={{ fontSize: '24px' }} />
-                        </div>
-                        <Statistic
-                            title={<Text style={{ fontSize: '12px', color: '#666' }}>Rata-rata Waktu Perbaikan</Text>}
-                            value="2.5 jam"
-                            valueStyle={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}
-                        />
-                    </Card>
-                </Col>
-            </Row>
+            {!canViewData ? (
+                <Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
+                    <Text style={{ fontSize: '16px', color: '#999' }}>
+                        Anda tidak memiliki akses untuk melihat data trending.
+                        <br />
+                        Silakan hubungi administrator untuk mendapatkan akses.
+                    </Text>
+                </Card>
+            ) : (
+                <>
+                    <Row gutter={16} style={{ marginTop: '24px' }}>
+                        <Col xs={24} sm={12} md={6}>
+                            <Card className="stat-card stat-card-red">
+                                <div className="stat-icon">
+                                    <FileTextOutlined style={{ fontSize: '24px' }} />
+                                </div>
+                                <Statistic
+                                    title={<Text style={{ fontSize: '12px', color: '#666' }}>Total Error</Text>}
+                                    value={245}
+                                    valueStyle={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}
+                                />
+                            </Card>
+                        </Col>
+                        <Col xs={24} sm={12} md={6}>
+                            <Card className="stat-card stat-card-orange">
+                                <div className="stat-icon">
+                                    <ToolOutlined style={{ fontSize: '24px' }} />
+                                </div>
+                                <Statistic
+                                    title={<Text style={{ fontSize: '12px', color: '#666' }}>Sedang Maintenance</Text>}
+                                    value={12}
+                                    valueStyle={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}
+                                />
+                            </Card>
+                        </Col>
+                        <Col xs={24} sm={12} md={6}>
+                            <Card className="stat-card stat-card-green">
+                                <div className="stat-icon">
+                                    <CheckCircleOutlined style={{ fontSize: '24px' }} />
+                                </div>
+                                <Statistic
+                                    title={<Text style={{ fontSize: '12px', color: '#666' }}>Selesai Diperbaiki</Text>}
+                                    value={233}
+                                    valueStyle={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}
+                                />
+                            </Card>
+                        </Col>
+                        <Col xs={24} sm={12} md={6}>
+                            <Card className="stat-card stat-card-blue">
+                                <div className="stat-icon">
+                                    <ClockCircleOutlined style={{ fontSize: '24px' }} />
+                                </div>
+                                <Statistic
+                                    title={<Text style={{ fontSize: '12px', color: '#666' }}>Rata-rata Waktu Perbaikan</Text>}
+                                    value="2.5 jam"
+                                    valueStyle={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}
+                                />
+                            </Card>
+                        </Col>
+                    </Row>
 
             {/* Charts Section */}
             <Row gutter={16} style={{ marginTop: '24px' }}>
@@ -380,6 +429,8 @@ const IndexTrending = memo(function IndexTrending() {
                     </Card>
                 </Col>
             </Row>
+                </>
+            )}
         </div>
         </React.Fragment>
     );