diff --git a/frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx b/frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
index 3dd6be43..a3f32953 100644
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
@@ -116,6 +116,22 @@ export default function Detail() {
     // Handle Edit Detail Benefit
     const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
     const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
+
+    // Buat total data 
+    const totalAmountIncurred = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
+        return accumulator + (item.amount_incurred || 0);
+      }, 0);
+    const totalAmountApprove = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
+        return accumulator + (item.amount_approved || 0);
+      }, 0);
+    const totalAmountNotApprove = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
+        return accumulator + (item.amount_not_approved || 0);
+      }, 0);
+    const totalExcessPaid = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
+        return accumulator + (item.excess_paid || 0);
+      }, 0);
+      
+
     return (
         <Page title='Detail'>
         <Container maxWidth={themeStretch ? false : 'xl'}>
@@ -402,8 +418,98 @@ export default function Detail() {
                             </Grid>
                         </Box>
                         ))}
-                      
-                        
+                        <hr/>
+                        <br/>
+                    {requestLog?.benefit_data && requestLog.benefit_data.length > 0 ? (
+                        <Box key={requestLog.benefit_data.length+1} sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '24px', py: '20px', marginBottom: '24px', borderRadius: '12px'}}> 
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={6}>
+                                            <Typography variant="body2" sx={{ fontWeight: 'bold'}}>
+                                                Total Benefit
+                                            </Typography>
+                                        </Grid>
+                                        
+                                    </Grid>
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <Box sx={{ py: '8px', px: '12px', background: palette.light.grey[50012], borderRadius: '6px'}}>
+                                        <Grid container spacing={1}>
+
+                                            {/* Amount Incurred */}
+                                            <Grid item xs={2}>
+                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Amount Incurred
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {fNumber(totalAmountIncurred)}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+
+                                            {/* Amount Approved */}
+                                            <Grid item xs={2}>
+                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Amount Approved
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {fNumber(totalAmountApprove)}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+
+                                            {/* Amount Not Approved */}
+                                            <Grid item xs={3}>
+                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Amount Not Approved
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {fNumber(totalAmountNotApprove)}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+
+                                            {/* Excess Paid* */}
+                                            <Grid item xs={2}>
+                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Excess Paid
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {fNumber(totalExcessPaid)}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Box>
+                                </Grid>
+                            
+                            </Grid>
+                        </Box>
+                    ) 
+                    : (
+                        null
+                    )}    
                     </Card>
 
                     {/* PR Buat pindahin ke componen */}