diff --git a/src/components/Actionbuttons.tsx b/src/components/Actionbuttons.tsx
index 3355953194f3589144c4745a98a8c9be04e65cdc..68b36dd019836a6cdd7c5aaf1df50627d79fa868 100644
--- a/src/components/Actionbuttons.tsx
+++ b/src/components/Actionbuttons.tsx
@@ -7,6 +7,7 @@ import {
} from "@chakra-ui/react";
import Searchbar from "../components/Searchbar";
import Plus from "../assets/plus_button.svg";
+import AddData from "./AddData";
export default function ActionButtons(props: any) {
const { isOpen, onOpen, onClose } = useDisclosure(); // Use Chakra UI useDisclosure hook
@@ -30,7 +31,7 @@ export default function ActionButtons(props: any) {
whiteSpace={"nowrap"}
mr={"5%"}
>
- {props.title}
+ Data {props.title}
</Heading>
<Searchbar placeholder={props.placeholder} />
<IconButton
@@ -40,7 +41,7 @@ export default function ActionButtons(props: any) {
onClick={handleAddDataClick}
size="lg"
/>
- {isOpen && <props.addForm disclosure={{ isOpen, onOpen, onClose }} />}
+ {isOpen && <AddData disclosure={{ isOpen, onOpen, onClose }} title={props.title} placeholders={props.placeholders} />}
</HStack>
);
}
diff --git a/src/components/AddData.tsx b/src/components/AddData.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9d84685d1eb9f2cb0a81b8a7fc9b99da9173aa42
--- /dev/null
+++ b/src/components/AddData.tsx
@@ -0,0 +1,80 @@
+import React, { useRef} from 'react';
+import {
+ Button,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ ModalFooter,
+ FormControl,
+ FormLabel,
+ Input,
+ ChakraProvider,
+ extendTheme
+} from '@chakra-ui/react';
+
+const theme = extendTheme({
+ fonts: {
+ body: "Roboto Bold, sans-serif",
+ },
+ });
+
+interface AddDataProps {
+ disclosure: {
+ isOpen: boolean;
+ onOpen: () => void;
+ onClose: () => void;
+ };
+ title: string;
+ placeholders: string[];
+}
+
+const AddData: React.FC<AddDataProps> = ({disclosure, title, placeholders}) => {
+ const { isOpen, onOpen, onClose } = disclosure;
+ const initialRef = useRef<HTMLInputElement | null>(null);
+ const finalRef = useRef<HTMLButtonElement | null>(null);
+
+ return(
+ <ChakraProvider theme={theme}>
+ <Modal
+ initialFocusRef={initialRef}
+ finalFocusRef={finalRef}
+ isOpen={isOpen}
+ onClose={onClose}
+ size="xl"
+ >
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader
+ fontWeight="bold" // Set font weight to bold
+ color="#02033B" // Set color to #02033B
+ fontFamily="Roboto" // Set font family to Roboto
+ fontSize="2xl" // Set the font size to 2xl or adjust as needed
+ textAlign="center" // Center the text
+ >
+ Tambah {title} Baru
+ </ModalHeader>
+ <ModalCloseButton />
+ <ModalBody pb={6}>
+ {placeholders.map((placeholder, index) => (
+ <FormControl key={index} mt={4}>
+ <FormLabel>{placeholder}</FormLabel>
+ <Input ref={index === 0 ? initialRef : undefined} placeholder={placeholder} />
+ </FormControl>
+ ))}
+ </ModalBody>
+ <ModalFooter>
+ <Button colorScheme="orange" mr={3}>
+ Submit
+ </Button>
+ <Button onClick={onClose}>Cancel</Button>
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
+ </ChakraProvider>
+ )
+}
+
+export default AddData;
\ No newline at end of file
diff --git a/src/components/CardWrapper.tsx b/src/components/CardWrapper.tsx
index e66064527b87e59d020d421e9a02822e2f92b47c..4361077a197276136323d9be0023dc6d9810a7c4 100644
--- a/src/components/CardWrapper.tsx
+++ b/src/components/CardWrapper.tsx
@@ -23,6 +23,7 @@ const CardWrapper: React.FC<CardWrapperProps> = (props) => {
h='full'
pb={4}
pt={4}
+ mt={4}
overflowX={'auto'}
overflowY={'auto'}
whiteSpace='nowrap'
diff --git a/src/pages/ClassOwner.tsx b/src/pages/ClassOwner.tsx
index 53c0461bbda816c05362eda789ad867e827b045e..eb20860b4fecbcb8d1233be22f28770ab7c98ec6 100644
--- a/src/pages/ClassOwner.tsx
+++ b/src/pages/ClassOwner.tsx
@@ -1,10 +1,9 @@
import React from 'react';
import Navbar from "../components/Navbar";
-import { Flex, VStack, Heading, IconButton, Image, HStack } from "@chakra-ui/react";
+import { Flex, VStack} from "@chakra-ui/react";
import { ClassCard } from "../components/ClassCard"; // Assuming ClassCard is a component you've created
-import Plus from "../assets/plus_button.svg";
import CardWrapper from '../components/CardWrapper';
-import Searchbar from '../components/Searchbar';
+import ActionButtons from '../components/Actionbuttons';
interface ClassInfo {
id: number;
@@ -45,32 +44,11 @@ const ClassData: React.FC = () => {
<Navbar status="owner"/>
<Flex
direction="column"
- minHeight="100vh"
- bg="#F5F8FD" // Set the background color for the entire section here
w='100vw'
pl={25}
pr={25}
>
- <HStack
- mt={8}
- maxW="full"
- alignItems="center" // Center items vertically
- justifyContent="space-between" // Space between the title, search bar, and add button
- px={20} // Padding on the sides
- >
- <Heading fontWeight={'bold'} fontSize={'50'} color='#02033B' whiteSpace='nowrap'>
- Data Kelas
- </Heading>
-
- <Searchbar placeholder='Search Class'/>
-
- <IconButton
- aria-label='Add'
- icon={<Image src={Plus} boxSize={48} />}
- size={"lg"}
- variant={"ghost"}
- />
- </HStack>
+ <ActionButtons placeholder='Search Class' title='Kelas' placeholders={['Nama', 'Harga', 'Total Jam', 'Jumlah Sesi', 'Kendaraan']}/>
<CardWrapper columns={{base: 1, sm: 1, md: 2, lg: 3}}>
{classData.map((data) => (
<ClassCard
diff --git a/src/pages/StudentData.tsx b/src/pages/StudentData.tsx
index d4be872f04768bf3a8936697699ce04c6e0553f1..52cfa0a89238744a24510a1c15a34de93d394015 100644
--- a/src/pages/StudentData.tsx
+++ b/src/pages/StudentData.tsx
@@ -1,14 +1,11 @@
import React, { useState } from "react";
import Navbar from "../components/Navbar";
-import { Box, Text, Flex, Image, IconButton, useDisclosure } from "@chakra-ui/react";
-import Searchbar from "../components/Searchbar";
+import { Flex, useDisclosure } from "@chakra-ui/react";
import TableComponent from "../components/TableSiswa";
-import Plus from "../assets/plus_button.svg";
-import Adddata from "../components/Adddatasiswa";
import EditData from "../components/Editdatasiswa";
+import ActionButtons from "../components/Actionbuttons";
const UserData: React.FC = () => {
- const { isOpen, onOpen, onClose } = useDisclosure();
const { isOpen: isEditDataOpen, onOpen: handleOpenEditData, onClose: handleCloseEditData } = useDisclosure();
const [selectedData, setSelectedData] = useState<any>(null);
const studentData = [
@@ -41,10 +38,6 @@ const UserData: React.FC = () => {
}
];
- const handleAddDataClick = () => {
- onOpen();
- };
-
const handleEditDataClick = (data: any) => {
setSelectedData(data);
handleOpenEditData();
@@ -55,49 +48,8 @@ const UserData: React.FC = () => {
<Navbar status="admin"/>
<Flex
direction="column"
- minHeight="100vh"
- bg="#F5F8FD"
>
- <Box
- mt={8}
- maxW="2880px"
- display="flex"
- alignItems="center"
- style={{ whiteSpace: 'nowrap' }}
- marginLeft="5%" // Add 5% left margin
- marginRight="5%" // Add 5% right margin
- >
- <Text
- as="h1"
- fontSize="2xl"
- color="#02033B"
- fontWeight="bold"
- marginLeft="20px"
- marginTop="50px"
- >
- Data Siswa
- </Text>
-
- <Flex
- maxW="20%" // Adjusted to 20% for the search bar
- ml="auto" // Auto margin for better alignment
- mt="60px"
- justify="center"
- >
- <Searchbar placeholder="Search Student"/>
- </Flex>
-
- <Box ml="auto" mt="65px">
- <IconButton
- aria-label="Add"
- icon={<Image src={Plus} boxSize={40} />}
- onClick={handleAddDataClick}
- size="lg"
- variant="ghost"
- />
- </Box>
- </Box>
-
+ <ActionButtons placeholder='Search Student' title='Siswa' placeholders={['Nama','Usia','No. Telepon', 'Status', 'Kelas', 'Alamat']}/>
<Flex
mt={24}
maxW="100%"
@@ -109,10 +61,6 @@ const UserData: React.FC = () => {
</Flex>
</Flex>
- {isOpen && (
- <Adddata disclosure={{ isOpen, onOpen, onClose }} />
- )}
-
{isEditDataOpen && (
<EditData
disclosure={{ isOpen: isEditDataOpen, onOpen: handleOpenEditData, onClose: handleCloseEditData }}