diff --git a/src/components/ClassCardDetail.tsx b/src/components/ClassCardDetail.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..38d528b03c63fe54bcda9342d134b4a7c03737fa
--- /dev/null
+++ b/src/components/ClassCardDetail.tsx
@@ -0,0 +1,78 @@
+import {
+ Box,
+ Text,
+ Image,
+ Spacer,
+ Stack,
+ Button,
+ HStack,
+ useDisclosure
+ } from '@chakra-ui/react';
+import AddEditData from './AddEditData';
+
+ export default function ClassCardDetail(props: any) {
+ const { isOpen, onOpen, onClose } = useDisclosure(); // Use Chakra UI useDisclosure hook
+ const handleAddDataClick = () => {
+ onOpen();
+ };
+ return (
+ <Box
+ w = '350px'
+ h = 'auto'
+ bg = 'white'
+ border={'1px solid #000'}
+ borderRadius={15}
+ padding={4}
+ >
+ <Stack w='100%' h='100%' align='left'>
+ <Image
+ width={'350px'}
+ height={'150px'}
+ objectFit= {'cover'}
+ alt='Katalog kelas mengemudi'
+ src={props.imageUrl}/>
+ <HStack alignItems={'left'} w='100%' pb={4}>
+ <Box>
+ <Text fontSize={'20px'} fontWeight={'Bold'} color='#02033B' pb={1}>{props.className}</Text>
+ <Text color='#02033B' pb={0.3}>{props.vehicle}</Text>
+ <Text color='#02033B' pb={0.3}>Jumlah sesi: {props.jml_sesi}</Text>
+ <Text color='#02033B' pb={0.3}>Total jam: {props.total_jam}</Text>
+ </Box>
+ <Spacer></Spacer>
+ <HStack alignItems={'top'} mt={0.5}>
+ <Text color='#02033B'>{props.price}</Text>
+ </HStack>
+ </HStack>
+ <Box textAlign={'center'}>
+ {(() => {
+ if (props.status === true) {
+ return (
+ <Button
+ bgColor='#02033B'
+ color='white'
+ _hover={{bg: '#00027A'}}
+ w='80%'
+ fontWeight={'bold'}
+ borderRadius={30}
+ onClick={handleAddDataClick}>Enroll</Button>
+ );
+ }
+ else {
+ return (
+ <Button
+ bgColor='gray'
+ color='white'
+ _hover={{bg: 'gray'}}
+ isDisabled={true}
+ w='80%'
+ fontWeight={'bold'}
+ borderRadius={30}>Closed</Button>
+ );
+ }})()}
+ </Box>
+ {isOpen && <AddEditData disclosure={{ isOpen, onOpen, onClose }} title={'Siswa'} placeholders={['Nama','Usia','No. Telepon','Alamat']} placeholderToVariableMap={props.placeholderToVariableMap} operation='add'/>}
+ </Stack>
+ </Box>
+ );
+ };
+
\ No newline at end of file
diff --git a/src/components/ClassDetail.tsx b/src/components/ClassDetail.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..545a712e74d55c68a5f6f3c6eaf91e0dcfe08a19
--- /dev/null
+++ b/src/components/ClassDetail.tsx
@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import { Text, Image, VStack, Heading, IconButton, HStack, useDisclosure, Spacer, Switch } from '@chakra-ui/react';
+import Edit from "../assets/edit_button.svg";
+import Delete from "../assets/delete_button.svg";
+import DeleteData from './Deletedata';
+import AddEditData from './AddEditData';
+import ClassCardDetail from './ClassCardDetail';
+
+interface ClassDetailProps {
+ className: string;
+ price: string;
+ vehicle: string;
+ imageUrl: string;
+ total_jam: number;
+ jml_sesi: number;
+ deskripsi: string;
+ status: boolean;
+}
+
+const ClassDetail: React.FC<ClassDetailProps> = ({ className, price, vehicle, imageUrl, total_jam, jml_sesi, deskripsi, status }) => {
+ const [isDeleteDataOpen, setIsDeleteDataOpen] = useState(false);
+ const { isOpen: isEditDataOpen, onOpen: handleOpenEditData, onClose: handleCloseEditData } = useDisclosure();
+ const [selectedData, setSelectedData] = useState<any>(null);
+
+ const handleEditDataClick = (data: any) => {
+ setSelectedData(data);
+ handleOpenEditData();
+ };
+
+ // Function to handle opening the DeleteData modal
+ const handleOpenDeleteData = (data: JSON) => {
+ setSelectedData(data);
+ setIsDeleteDataOpen(true);
+ };
+
+ // Function to handle closing the DeleteData modal
+ const handleCloseDeleteData = () => {
+ setSelectedData(null);
+ setIsDeleteDataOpen(false);
+ };
+
+ // Function to handle the deletion of data
+ const handleDelete = () => {
+ // Implement your logic to delete data here
+ // This is where you would call your API or update state to remove the data
+ console.log('Deleting data:', selectedData);
+ handleCloseDeleteData();
+ };
+
+ const placeholderToVariableMap = {
+ 'ID':'id',
+ 'Nama':'className',
+ 'Harga':'price',
+ 'Total Jam':'total_jam',
+ 'Jumlah Sesi':'jml_sesi',
+ 'Kendaraan' : 'vehicle',
+ 'Deskripsi' : 'deskripsi',
+ 'Link Gambar Kelas':'imageUrl'
+ };
+
+ return (
+ <VStack h='100%' w={'100vw'} align={'left'}>
+ <Image
+ style={{objectFit: 'cover'}}
+ alt='Katalog kelas mengemudi'
+ maxWidth={'100vw'}
+ maxHeight={'12vw'}
+ src={imageUrl}/>
+ <HStack
+ mt={8}
+ maxW="full"
+ alignItems={'left'}
+ marginLeft="6%" // Add 5% left margin
+ marginRight="6%" // Add 5% right margin
+ >
+ <Heading
+ fontWeight={"bold"}
+ fontSize={50}
+ color="#02033B"
+ whiteSpace={"nowrap"}
+ >
+ {className}
+ </Heading>
+ <Spacer></Spacer>
+ <HStack alignItems={'end'}>
+ {(() => {
+ if (status === true) {
+ return (
+ <Switch id='status' boxSize={35} size={'lg'} colorScheme='yellow' isChecked={true} mr={'7%'}/>
+ );
+ }
+ else {
+ return (
+ <Switch id='status' boxSize={35} colorScheme='yellow' isChecked={false}/>
+ );
+ }})()}
+ <IconButton
+ ml={"5%"}
+ aria-label="Edit"
+ icon={<Image src={Edit} boxSize={35} />}
+ onClick={handleEditDataClick}
+ size="lg"
+ />
+ <IconButton
+ aria-label="Delete"
+ icon={<Image src={Delete} boxSize={35} />}
+ onClick={handleOpenDeleteData}
+ size="lg"
+ />
+ <Spacer></Spacer>
+ </HStack>
+ </HStack>
+ <HStack
+ mt={8}
+ maxW="full"
+ alignItems={'left'}
+ marginLeft="6%" // Add 5% left margin
+ marginRight="6%" // Add 5% right margin
+ >
+ <Text w={'70%'} whiteSpace="pre-line" mr={"6%"} textAlign={'justify'}>
+ {deskripsi}
+ </Text>
+ <Spacer></Spacer>
+ <HStack align={'top'} height={'100%'}>
+ <ClassCardDetail
+ className={className}
+ price={price}
+ vehicle={vehicle}
+ imageUrl={imageUrl}
+ total_jam={total_jam}
+ jml_sesi={jml_sesi}
+ status={status}
+ />
+ </HStack>
+ </HStack>
+ {/* DeleteData modal */}
+ {isDeleteDataOpen && (
+ <DeleteData
+ disclosure={{ isOpen: isDeleteDataOpen, onOpen: handleOpenDeleteData, onClose: handleCloseDeleteData }}
+ onDelete={handleDelete}
+ />
+ )}
+
+ {isEditDataOpen && (
+ <AddEditData
+ disclosure={{ isOpen: isEditDataOpen, onOpen: handleOpenEditData, onClose: handleCloseEditData }}
+ title="Kelas"
+ placeholders={['Nama','Harga','Total Jam', 'Jumlah Sesi', 'Kendaraan', 'Deskripsi', 'Link Gambar Kelas']} // Set the placeholders
+ operation="edit"
+ dataToEdit={selectedData}
+ placeholderToVariableMap={placeholderToVariableMap}
+ />
+ )}
+ </VStack>
+ // <Box>
+ // <Image
+ // style={{ objectFit: 'contain' }}
+ // alt={`Katalog ${className}`}
+ // maxWidth={'100%'}
+ // maxHeight={'100%'}
+ // src={imageUrl}
+ // />
+ // <Text fontSize={'20px'} fontWeight={'bold'} color='#02033B' pt={4}>{className}</Text>
+ // <Text color='#02033B'>{vehicle}</Text>
+ // <Text color='#02033B'>{price}</Text>
+ // </Box>
+ );
+};
+
+export default ClassDetail;
diff --git a/src/pages/ClassOwnerDetail.tsx b/src/pages/ClassOwnerDetail.tsx
index b63cd00cf46f0db2bd6857e18367f1e9f64e148e..27e6386a678d0c678a9d193051e7798c9fd0a893 100644
--- a/src/pages/ClassOwnerDetail.tsx
+++ b/src/pages/ClassOwnerDetail.tsx
@@ -1,7 +1,57 @@
-export default function ClassOwnerDetail(){
- return(<>
- <h1>
- This is the class owner detail page
- </h1>
- </>)
-}
\ No newline at end of file
+import React from 'react';
+import Navbar from "../components/Navbar";
+import { Box, Flex} from "@chakra-ui/react";
+import ClassDetail from '../components/ClassDetail';
+
+const ClassData: React.FC = () => {
+ const classData = [
+ {
+ id: 1,
+ className: 'Economy Class',
+ price: 'IDR 1.000.000',
+ vehicle: 'Toyota Avanza',
+ imageUrl: 'https://www.toyotanorthedsa.com/wp-content/uploads/2022/03/header.jpg',
+ total_jam: 20,
+ jml_sesi: 10,
+ deskripsi: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper elit ut quam convallis, lacinia porta metus ullamcorper. In pharetra quam lorem. Ut nec urna ut mi porttitor aliquet. Aenean at nunc tincidunt, sollicitudin felis vitae, sagittis nisl. In ante sapien, consequat a sodales eu, tempor vulputate orci. Quisque consequat massa sed enim fringilla volutpat. Duis ullamcorper lobortis odio, sit amet ultricies risus luctus eget. Vivamus felis ligula, blandit ac fermentum ut, feugiat sit amet dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\n\nPhasellus eu tellus eget ex posuere tincidunt. Suspendisse lacus tortor, sagittis ac metus quis, placerat ornare sapien. Curabitur accumsan sapien quis posuere vulputate. Vivamus gravida mauris ligula, in lobortis arcu facilisis ut. Pellentesque a lacinia enim. Nulla magna felis, congue in turpis sit amet, mattis mattis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras mattis posuere tincidunt. Integer egestas enim est, eu tristique urna fringilla ac. Suspendisse nec felis non ligula viverra vestibulum. Sed vestibulum aliquam libero non hendrerit. Ut condimentum pellentesque felis a tincidunt.\n\nAenean ac molestie lorem. Donec vulputate bibendum metus. Ut condimentum dictum enim, a cursus ipsum tempor a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent quis pharetra urna, ac maximus sapien. Integer consectetur eget augue eu vehicula. Nam tincidunt quam purus, id lobortis velit cursus venenatis. Nunc mattis massa ut ante tincidunt rutrum.",
+ status: true
+ },
+ // Add more data as needed
+ ];
+
+ const placeholderToVariableMap = {
+ 'ID':'id',
+ 'Nama':'className',
+ 'Harga':'price',
+ 'Total Jam':'total_jam',
+ 'Jumlah Sesi':'jml_sesi',
+ 'Kendaraan' : 'vehicle',
+ 'Deskripsi' : 'deskripsi',
+ 'Link Gambar Kelas':'imageUrl'
+ };
+
+ return (
+ <Box h='100%' w={'100vw'}>
+ <Navbar status="owner"/>
+ <Flex
+ direction="column"
+ w='100vw'
+ >
+ {classData.map((data) => (
+ <ClassDetail
+ className={data.className}
+ price={data.price}
+ vehicle={data.vehicle}
+ imageUrl={data.imageUrl}
+ total_jam={data.total_jam}
+ jml_sesi={data.jml_sesi}
+ deskripsi={data.deskripsi}
+ status={data.status}
+ />
+ ))}
+ </Flex>
+ </Box>
+ );
+};
+
+export default ClassData;