Update customer service

frontend/dashboard/src/pages/CustomerService/Components/CardFile.tsx

@@ -0,0 +1,50 @@
+import { Card, Typography } from "@mui/material";
+import { Stack } from '@mui/material';
+import { DetailFinalLogType } from "../FinalLog/Model/Types";
+import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+
+
+type CardDetail = {
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+const style1 = {
+    color: '#919EAB',
+    width: '30%'
+}
+const style2 = {
+    width: '70%'
+}
+const marginBottom1 = {
+    marginBottom: 1,
+}
+const marginBottom2 = {
+    marginBottom: 2,
+}
+
+
+export default function CardFile({requestLog} : CardDetail ) {
+    return (
+        <Card sx={{padding:2}}  >
+            <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files History</Typography>
+                {requestLog?.files?.map((documentType, index) => (
+                    <Stack direction="column" spacing={2} key={index}>
+                        <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                        <a
+                            href={documentType.url}
+                            style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
+                            target="_blank"
+                        >
+                            <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
+                        </a>
+                        </Stack>
+                    </Stack>
+                ))}
+            </Stack>
+            </Stack>
+        </Card>
+    )
+   
+}