role-based access control

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,6 +222,16 @@ const IndexTrending = memo(function IndexTrending() {
             </Card>
 
             {/* Statistics Cards */}
+            {!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">
@@ -380,6 +429,8 @@ const IndexTrending = memo(function IndexTrending() {
                     </Card>
                 </Col>
             </Row>
+                </>
+            )}
         </div>
         </React.Fragment>
     );