From 016c77a586320792b5546c7044dd5cd761b95944 Mon Sep 17 00:00:00 2001 From: Fachba Date: Tue, 23 Dec 2025 12:17:17 +0700 Subject: [PATCH] fixing redirect detail notification tab --- src/App.jsx | 3 + src/components/Global/ApiRequest.jsx | 13 +- src/layout/LayoutMenu.jsx | 2 +- src/pages/blank/RedirectWa.jsx | 49 +++++ .../jadwalShift/component/ListJadwalShift.jsx | 4 +- .../IndexNotificationDetail.jsx | 180 ++++++++++++------ 6 files changed, 190 insertions(+), 61 deletions(-) create mode 100644 src/pages/blank/RedirectWa.jsx diff --git a/src/App.jsx b/src/App.jsx index ea24775..b0fbd5f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -53,6 +53,7 @@ import IndexHistoryEvent from './pages/history/event/IndexHistoryEvent'; // Image Viewer import ImageViewer from './Utils/ImageViewer'; +import RedirectWa from './pages/blank/RedirectWa'; const App = () => { return ( @@ -72,6 +73,8 @@ const App = () => { element={} /> + } /> + {/* Protected Routes */} }> } /> diff --git a/src/components/Global/ApiRequest.jsx b/src/components/Global/ApiRequest.jsx index cf166cf..2a6fedd 100644 --- a/src/components/Global/ApiRequest.jsx +++ b/src/components/Global/ApiRequest.jsx @@ -70,7 +70,18 @@ async function ApiRequest({ method = 'GET', params = {}, prefix = '/', token = t }, }; - const rawToken = localStorage.getItem('token'); + const tokenRedirect = sessionStorage.getItem('token_redirect'); + + let rawToken = ''; + + if (tokenRedirect !== null) { + rawToken = tokenRedirect; + // console.log(`sessionStorage: ${tokenRedirect}`); + } else { + rawToken = localStorage.getItem('token'); + // console.log(`localStorage: ${rawToken}`); + } + if (token && rawToken) { const cleanToken = rawToken.replace(/"/g, ''); request.headers['Authorization'] = `Bearer ${cleanToken}`; diff --git a/src/layout/LayoutMenu.jsx b/src/layout/LayoutMenu.jsx index f3eb489..607bc2f 100644 --- a/src/layout/LayoutMenu.jsx +++ b/src/layout/LayoutMenu.jsx @@ -146,7 +146,7 @@ const allItems = [ { key: 'master-sparepart', icon: , - label: sparepart, + label: Sparepart, }, // { // key: 'master-shift', diff --git a/src/pages/blank/RedirectWa.jsx b/src/pages/blank/RedirectWa.jsx new file mode 100644 index 0000000..ccfe7a0 --- /dev/null +++ b/src/pages/blank/RedirectWa.jsx @@ -0,0 +1,49 @@ +import { useLocation, useNavigate, useParams } from 'react-router-dom'; +import { useEffect, useState } from 'react'; +import { verifyRedirect } from '../../api/auth'; +import { encryptData } from '../../components/Global/Formatter'; +import NotFound from './NotFound'; +import Waiting from './Waiting'; +import NotificationDetailTab from '../notificationDetail/IndexNotificationDetail'; + +export default function RedirectWa() { + const [idData, setIdData] = useState(0); + const [ready, setReady] = useState(0); + + const location = useLocation(); + + // URLSearchParams untuk ambil query + const queryParams = new URLSearchParams(location.search); + const token = queryParams.get('token'); + + const handleInitForm = async (encodedToken) => { + const originalToken = decodeURIComponent(encodedToken); + // console.log(originalToken); + + const response = await verifyRedirect({ + tokenRedirect: originalToken, + }); + + console.log('tes', response); + + const tokenResult = JSON.stringify(response.data?.accessToken); + + sessionStorage.setItem('token_redirect', tokenResult); + response.data.auth = true; + sessionStorage.setItem('session', encryptData(response?.data)); + + setIdData(response.data.data.idData); + + setReady(1); + }; + + useEffect(() => { + handleInitForm(token); + }, [idData]); + + if (ready == 0) return ; + + if (idData === 0) return ; + + return ; +} diff --git a/src/pages/jadwalShift/component/ListJadwalShift.jsx b/src/pages/jadwalShift/component/ListJadwalShift.jsx index e0249c8..7e279f0 100644 --- a/src/pages/jadwalShift/component/ListJadwalShift.jsx +++ b/src/pages/jadwalShift/component/ListJadwalShift.jsx @@ -352,7 +352,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) { Jadwal Shift - + {/* @@ -383,7 +383,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) { - + */}
{loading ? ( diff --git a/src/pages/notificationDetail/IndexNotificationDetail.jsx b/src/pages/notificationDetail/IndexNotificationDetail.jsx index 6144c4b..1a43f09 100644 --- a/src/pages/notificationDetail/IndexNotificationDetail.jsx +++ b/src/pages/notificationDetail/IndexNotificationDetail.jsx @@ -1,6 +1,20 @@ import React, { useState, useEffect } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; -import { Layout, Card, Row, Col, Typography, Space, Button, Spin, Result, Input, message, Avatar, Tag } from 'antd'; +import { + Layout, + Card, + Row, + Col, + Typography, + Space, + Button, + Spin, + Result, + Input, + message, + Avatar, + Tag, +} from 'antd'; import { ArrowLeftOutlined, CloseCircleFilled, @@ -20,7 +34,11 @@ import { SyncOutlined, SendOutlined, } from '@ant-design/icons'; -import { getNotificationDetail, createNotificationLog, getNotificationLogByNotificationId } from '../../api/notification'; +import { + getNotificationDetail, + createNotificationLog, + getNotificationLogByNotificationId, +} from '../../api/notification'; const { Content } = Layout; const { Text, Paragraph, Link } = Typography; @@ -41,12 +59,12 @@ const transformNotificationData = (apiData) => { description: apiData.message_error_issue || 'No details available', timestamp: apiData.created_at ? new Date(apiData.created_at).toLocaleString('id-ID', { - day: '2-digit', - month: '2-digit', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - }) + ' WIB' + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }) + ' WIB' : 'N/A', location: apiData.plant_sub_section_name || 'Location not specified', details: apiData.message_error_issue || 'No details available', @@ -64,9 +82,9 @@ const transformNotificationData = (apiData) => { ...activeSolution, path_document: activeSolution.path_document ? activeSolution.path_document.replace( - '/detail-notification/pdf/', - '/notification-detail/pdf/' - ) + '/detail-notification/pdf/', + '/notification-detail/pdf/' + ) : activeSolution.path_document, }, // Include the active solution data with fixed URL error_code: errorCodeData, @@ -113,9 +131,17 @@ const getDummyUsers = (notification) => { const getStatusTag = (status) => { switch (status) { case 'delivered': - return } color="success">Delivered; + return ( + } color="success"> + Delivered + + ); case 'sent': - return } color="processing">Sent; + return ( + } color="processing"> + Sent + + ); case 'failed': return Failed; default: @@ -136,8 +162,9 @@ const getIconAndColor = (type) => { } }; -const NotificationDetailTab = () => { - const { notificationId } = useParams(); // Mungkin perlu disesuaikan jika route berbeda +const NotificationDetailTab = (props) => { + const params = useParams(); // Mungkin perlu disesuaikan jika route berbeda + const notificationId = props.id ?? params.notificationId; const navigate = useNavigate(); const [notification, setNotification] = useState(null); const [loading, setLoading] = useState(true); @@ -161,12 +188,12 @@ const NotificationDetailTab = () => { id: log.notification_error_log_id, timestamp: log.created_at ? new Date(log.created_at).toLocaleString('id-ID', { - day: '2-digit', - month: '2-digit', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - }) + ' WIB' + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }) + ' WIB' : 'N/A', addedBy: { name: log.contact_name || 'Unknown', @@ -296,18 +323,21 @@ const NotificationDetailTab = () => { marginBottom: '24px', }} > - - - - - + {!props.id && ( + + + + + + )} +
{ {/* Kolom Kanan: User History */} - -
- + +
+ {getDummyUsers(notification).map((user) => ( - + - } /> + } + />
{user.name} -
- - {user.phone} +
+ + + {user.phone} +
@@ -457,7 +512,9 @@ const NotificationDetailTab = () => { size="small" onClick={(e) => { e.stopPropagation(); - console.log(`Resend to ${user.name}`); + console.log( + `Resend to ${user.name}` + ); }} > Resend @@ -505,9 +562,7 @@ const NotificationDetailTab = () => { - + { style={{ width: '100%' }} > {notification.error_code?.solution && - notification.error_code.solution.length > 0 ? ( + notification.error_code.solution.length > 0 ? ( <> {notification.error_code.solution .filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif @@ -607,7 +662,7 @@ const NotificationDetailTab = () => { ) : null} {sol.type_solution === 'text' && - sol.text_solution ? ( + sol.text_solution ? ( { style={{ width: '100%' }} > {notification.spareparts && - notification.spareparts.length > 0 ? ( + notification.spareparts.length > 0 ? ( notification.spareparts.map((sparepart, index) => ( { color: sparepart.sparepart_stok === 'Available' || - sparepart.sparepart_stok === + sparepart.sparepart_stok === 'available' ? '#52c41a' : '#ff4d4f', @@ -797,7 +852,9 @@ const NotificationDetailTab = () => { rows={2} placeholder="Tuliskan update penanganan di sini..." value={newLogDescription} - onChange={(e) => setNewLogDescription(e.target.value)} + onChange={(e) => + setNewLogDescription(e.target.value) + } disabled={submitLoading} /> @@ -806,8 +863,18 @@ const NotificationDetailTab = () => { type={isAddingLog ? 'primary' : 'dashed'} size="small" block - icon={submitLoading ? : (!isAddingLog && )} - onClick={isAddingLog ? handleSubmitLog : () => setIsAddingLog(true)} + icon={ + submitLoading ? ( + + ) : ( + !isAddingLog && + ) + } + onClick={ + isAddingLog + ? handleSubmitLog + : () => setIsAddingLog(true) + } loading={submitLoading} disabled={submitLoading} > @@ -855,7 +922,6 @@ const NotificationDetailTab = () => { - ); };