diff --git a/src/components/ClassCard.tsx b/src/components/ClassCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..671713fb5e25b24283857bbbb842ac799cb3df4a
--- /dev/null
+++ b/src/components/ClassCard.tsx
@@ -0,0 +1,32 @@
+import { Box, Image, Text, Button, VStack } from '@chakra-ui/react';
+
+interface ClassCardProps {
+ className: string;
+ price: string;
+ vehicle: string;
+ imageUrl: string;
+}
+
+export const ClassCard: React.FC<ClassCardProps> = ({ className, price, vehicle, imageUrl }) => {
+ return (
+ <Box
+ maxW="sm"
+ borderWidth="1px"
+ borderRadius="lg"
+ overflow="hidden"
+ p={4}
+ m={2}
+ boxShadow="md"
+ >
+ <Image src={imageUrl} alt={`Class ${className}`} />
+ <VStack align="stretch" mt={4}>
+ <Text fontWeight="bold">{className}</Text>
+ <Text>{price}</Text>
+ <Text>{vehicle}</Text>
+ <Button colorScheme="blue" variant="solid">
+ Lihat Detail
+ </Button>
+ </VStack>
+ </Box>
+ );
+};
diff --git a/src/components/ClassGrid.tsx b/src/components/ClassGrid.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e7ef2675fa44a8fd8f44b81215fb94a758685beb
--- /dev/null
+++ b/src/components/ClassGrid.tsx
@@ -0,0 +1,27 @@
+import { SimpleGrid } from '@chakra-ui/react';
+import { ClassCard } from './ClassCard';
+
+interface ClassGridProps {
+ classes: Array<{
+ className: string;
+ price: string;
+ vehicle: string;
+ imageUrl: string;
+ }>;
+}
+
+export const ClassGrid: React.FC<ClassGridProps> = ({ classes }) => {
+ return (
+ <SimpleGrid columns={{ sm: 2, md: 3 }} spacing={10} p={10}>
+ {classes.map((classInfo, index) => (
+ <ClassCard
+ key={index}
+ className={classInfo.className}
+ price={classInfo.price}
+ vehicle={classInfo.vehicle}
+ imageUrl={classInfo.imageUrl}
+ />
+ ))}
+ </SimpleGrid>
+ );
+};
diff --git a/src/components/NavbarAdmin.tsx b/src/components/NavbarAdmin.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..91284556ed70758cc7f899563e90ae723c39fa9b
--- /dev/null
+++ b/src/components/NavbarAdmin.tsx
@@ -0,0 +1,130 @@
+import React from "react";
+import {
+ Box,
+ Flex,
+ Spacer,
+ Text,
+ ChakraProvider,
+ extendTheme,
+ Link,
+ Icon,
+ Image,
+} from "@chakra-ui/react";
+import Admin from '../assets/Admin.svg';
+import KarsusLogo from '../assets/logo_horizontal.svg'
+
+const theme = extendTheme({
+ fonts: {
+ body: "Roboto Bold, sans-serif",
+ },
+});
+
+// ... (previous imports)
+
+const Navbar = () => {
+ return (
+ <ChakraProvider theme={theme}>
+ <Box
+ bg="#FDB235"
+ color="#02033B"
+ p={4}
+ fontSize="lg"
+ fontWeight="bold"
+ display={{ md: "flex" }}
+ alignItems="center"
+ justifyContent="space-between"
+ width="100%"
+ maxWidth="100%"
+ marginX="auto"
+ position="relative"
+ >
+ <Image
+ src={KarsusLogo}
+ alt="Logo"
+ boxSize={32}
+ h={12}
+ objectFit="contain"
+ />
+
+ {/* Links */}
+ <Flex display={{ base: "none", md: "flex" }}>
+ <Box
+ mx={10}
+ position="relative"
+ fontWeight="bold"
+ padding= '10px'
+ style={{ whiteSpace: 'nowrap' }}
+ _hover={{
+ color: 'white',
+ bgColor: '#02033B',
+ rounded: 'md',
+ }}
+ >
+ <Link
+ fontWeight="bold" // Make the link text bold
+ _hover={{
+ color: 'white',
+ }}
+ >
+ Data Kelas
+ </Link>
+ </Box>
+ <Box
+ mx={10}
+ position="relative"
+ fontWeight="bold"
+ rounded= 'md'
+ padding='10px'
+ style={{ whiteSpace: 'nowrap' }}
+ _hover={{
+ color: 'white',
+ bgColor: '#02033B',
+ }}
+ >
+ <Link
+ fontWeight="bold" // Make the link text bold
+ _hover={{
+ textColor: 'white',
+ }}
+ >
+ Data Siswa
+ </Link>
+
+ </Box>
+ <Box
+ mx={10}
+ position="relative"
+ fontWeight="bold"
+ rounded ='md'
+ padding ='10px'
+ style={{ whiteSpace: 'nowrap' }}
+ _hover={{
+ color: 'white',
+ bgColor: '#02033B',
+ }}
+ >
+ <Link
+ fontWeight="bold" // Make the link text bold
+ _hover={{
+ color: 'white',
+ }}
+ >
+ Data Kendaraan
+ </Link>
+
+ </Box>
+ </Flex>
+
+ <Spacer mx={48} />
+
+ {/* Admin Greeting */}
+ <Flex alignItems="center">
+ <Text mr={4} fontWeight="bold" style={{ whiteSpace: 'nowrap' }}>Hi, Admin</Text>
+ <Image src={Admin} boxSize={6} />
+ </Flex>
+ </Box>
+ </ChakraProvider>
+ );
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/NavbarOwner.tsx b/src/components/NavbarOwner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..af6c29b17cb32617721c85fd48c65687480c08c7
--- /dev/null
+++ b/src/components/NavbarOwner.tsx
@@ -0,0 +1,130 @@
+import React from "react";
+import {
+ Box,
+ Flex,
+ Spacer,
+ Text,
+ ChakraProvider,
+ extendTheme,
+ Link,
+ Icon,
+ Image,
+} from "@chakra-ui/react";
+import Admin from '../assets/Admin.svg';
+import KarsusLogo from '../assets/logo_horizontal.svg'
+
+const theme = extendTheme({
+ fonts: {
+ body: "Roboto Bold, sans-serif",
+ },
+});
+
+// ... (previous imports)
+
+const Navbar = () => {
+ return (
+ <ChakraProvider theme={theme}>
+ <Box
+ bg="#FDB235"
+ color="#02033B"
+ p={4}
+ fontSize="lg"
+ fontWeight="bold"
+ display={{ md: "flex" }}
+ alignItems="center"
+ justifyContent="space-between"
+ width="100%"
+ maxWidth="100%"
+ marginX="auto"
+ position="relative"
+ >
+ <Image
+ src={KarsusLogo}
+ alt="Logo"
+ boxSize={32}
+ h={12}
+ objectFit="contain"
+ />
+
+ {/* Links */}
+ <Flex display={{ base: "none", md: "flex" }}>
+ <Box
+ mx={10}
+ position="relative"
+ fontWeight="bold"
+ padding= '10px'
+ style={{ whiteSpace: 'nowrap' }}
+ _hover={{
+ color: 'white',
+ bgColor: '#02033B',
+ rounded: 'md',
+ }}
+ >
+ <Link
+ fontWeight="bold" // Make the link text bold
+ _hover={{
+ color: 'white',
+ }}
+ >
+ Data Kelas
+ </Link>
+ </Box>
+ <Box
+ mx={10}
+ position="relative"
+ fontWeight="bold"
+ rounded= 'md'
+ padding='10px'
+ style={{ whiteSpace: 'nowrap' }}
+ _hover={{
+ color: 'white',
+ bgColor: '#02033B',
+ }}
+ >
+ <Link
+ fontWeight="bold" // Make the link text bold
+ _hover={{
+ textColor: 'white',
+ }}
+ >
+ Data Siswa
+ </Link>
+
+ </Box>
+ <Box
+ mx={10}
+ position="relative"
+ fontWeight="bold"
+ rounded ='md'
+ padding ='10px'
+ style={{ whiteSpace: 'nowrap' }}
+ _hover={{
+ color: 'white',
+ bgColor: '#02033B',
+ }}
+ >
+ <Link
+ fontWeight="bold" // Make the link text bold
+ _hover={{
+ color: 'white',
+ }}
+ >
+ Data Kendaraan
+ </Link>
+
+ </Box>
+ </Flex>
+
+ <Spacer mx={48} />
+
+ {/* Admin Greeting */}
+ <Flex alignItems="center">
+ <Text mr={4} fontWeight="bold" style={{ whiteSpace: 'nowrap' }}>Hi, Owner</Text>
+ <Image src={Admin} boxSize={6} />
+ </Flex>
+ </Box>
+ </ChakraProvider>
+ );
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/StatusSwitch.tsx b/src/components/StatusSwitch.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..913e3e3b4fbff4f049a1952e185c1140b4372a3e
--- /dev/null
+++ b/src/components/StatusSwitch.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Switch, FormControl, FormLabel } from '@chakra-ui/react';
+
+interface StatusSwitchProps {
+ isChecked: boolean;
+}
+
+const StatusSwitch: React.FC<StatusSwitchProps> = ({ isChecked }) => {
+ // Add change handling logic if needed
+ const handleSwitchChange = () => {
+ // Implement your switch change logic here
+ };
+
+ return (
+ <FormControl display="flex" alignItems="center">
+ <FormLabel htmlFor="status-switch" mb="0">
+ <Switch id="status-switch" colorScheme="orange" isChecked={isChecked} onChange={handleSwitchChange} />
+ </FormLabel>
+ </FormControl>
+ );
+};
+
+export default StatusSwitch;
+
diff --git a/src/components/TableVehicleOwner.tsx b/src/components/TableVehicleOwner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e1b1c99b38605321128546b6d75b7fc9846c0f51
--- /dev/null
+++ b/src/components/TableVehicleOwner.tsx
@@ -0,0 +1,80 @@
+// TableComponent.tsx
+
+import React from 'react';
+import { ChakraProvider, Table, Thead, Tbody, Tr, Th, Td, IconButton, Image } from '@chakra-ui/react';
+import Delete from "../assets/delete_button.svg"
+import Edit from "../assets/edit_button.svg"
+
+
+interface VehicleData {
+ id: number;
+ vehicle: string;
+ mileage: string;
+ plate: string;
+ type: string;
+ lastService: string;
+ status: boolean; // Assuming status is a boolean
+}
+
+interface TableProps {
+ data: VehicleData[];
+ handleEdit?: (id: number) => void; // Optional edit handler
+ handleDelete?: (id: number) => void; // Optional delete handler
+}
+
+const TableComponent: React.FC<TableProps> = ({ data, handleEdit, handleDelete }) => {
+ return (
+ <ChakraProvider>
+ <Table variant="striped" colorScheme="gray" size="lg" bg="white" borderRadius="lg">
+ <Thead>
+ <Tr>
+ <Th>ID</Th>
+ <Th>Kendaraan</Th>
+ <Th>Mileage</Th>
+ <Th>Plat Kend.</Th>
+ <Th>Jenis</Th>
+ <Th>Last Service</Th>
+ <Th>Status Kend.</Th>
+ <Th>Actions</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {data.map((vehicle) => (
+ <Tr key={vehicle.id}>
+ <Td>{vehicle.id}</Td>
+ <Td>{vehicle.vehicle}</Td>
+ <Td>{vehicle.mileage}</Td>
+ <Td>{vehicle.plate}</Td>
+ <Td>{vehicle.type}</Td>
+ <Td>{vehicle.lastService}</Td>
+ <Td>{vehicle.status ? 'Active' : 'Inactive'}</Td>
+ <Td>
+ {/*Edit Icon*/}
+ <IconButton
+ aria-label="Edit"
+ size="sm"
+ mr={2}
+ //onClick={() => handleEdit(item.ID)}
+ >
+ <Image src={Edit} alt="Edit Icon" boxSize={8} />
+ </IconButton>
+ </Td>
+ <Td>
+ {/* Delete Icon as Image */}
+ <IconButton
+ aria-label="Delete"
+ size="sm"
+ //onClick={() => handleDelete(item.ID)}
+ >
+ <Image src={Delete} alt="Delete Icon" boxSize={8} />
+ </IconButton>
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ </ChakraProvider>
+ );
+};
+
+export default TableComponent;
diff --git a/src/index.css b/src/index.css
index 2c3fac689c7c4680cfb84bc0746512858b90b908..f0283e7cc7eade6de24af75bd2be79e734a62ba9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,6 +14,11 @@
-webkit-text-size-adjust: 100%;
}
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
a {
font-weight: 500;
color: #646cff;
@@ -25,7 +30,6 @@ a:hover {
body {
margin: 0;
- display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
@@ -36,6 +40,15 @@ h1 {
line-height: 1.1;
}
+html, body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+
button {
border-radius: 8px;
border: 1px solid transparent;
diff --git a/src/pages/ClassPublic.tsx b/src/pages/ClassPublic.tsx
index 1c384f9ecd8d15371008bdfb3576d8bcc9a7c98c..3d5646c2bf3ff34d7b12358ad393046852faec0a 100644
--- a/src/pages/ClassPublic.tsx
+++ b/src/pages/ClassPublic.tsx
@@ -1,7 +1,110 @@
+<<<<<<< Updated upstream
export default function ClassPublic(){
return(<>
<h1>
This is the class public page
</h1>
</>)
-}
\ No newline at end of file
+}
+=======
+import React from 'react';
+import Navbar from "../components/NavbarAdmin";
+import { Box, Flex, Text, IconButton, Image, SimpleGrid } from "@chakra-ui/react";
+import Searchbar from "../components/Searchbar";
+import { ClassCard } from "../components/ClassCard"; // Assuming ClassCard is a component you've created
+import Plus from "../assets/plus_button.svg";
+
+interface ClassInfo {
+ id: number;
+ className: string;
+ price: string;
+ vehicle: string;
+ imageUrl: string;
+}
+
+const classData: ClassInfo[] = [
+ {
+ id: 1,
+ className: 'Economy Class',
+ price: 'IDR 1.000.000',
+ vehicle: 'Toyota Yaris',
+ imageUrl: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 2,
+ className: 'Business Class',
+ price: 'IDR 2.000.000',
+ vehicle: 'Honda Civic',
+ imageUrl: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 3,
+ className: 'First Class',
+ price: 'IDR 3.000.000',
+ vehicle: 'BMW 3 Series',
+ imageUrl: 'https://via.placeholder.com/150',
+ },
+ // ...add more classes
+];
+
+const ClassData: React.FC = () => {
+ return (
+ <>
+ <Navbar />
+ <Flex
+ direction="column"
+ minHeight="100vh"
+ bg="#F5F8FD" // Set the background color for the entire section here
+ >
+ <Flex
+ 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
+ >
+ <Text
+ as="h1"
+ fontSize="2xl"
+ color="#02033B"
+ fontWeight="bold"
+ my={8} // Margin on top and bottom
+ >
+ Data Kelas
+ </Text>
+
+ <Searchbar />
+
+ <IconButton
+ aria-label="Add"
+ icon={<Image src={Plus} boxSize={6} />}
+ // onClick={handleClick}
+ size="lg"
+ variant="ghost"
+ />
+ </Flex>
+
+ <SimpleGrid
+ mt={8}
+ columns={{ sm: 1, md: 2, lg: 3 }}
+ spacing={10}
+ px={20} // Padding on the sides
+ >
+ {classData.map((data) => (
+ <ClassCard
+ key={data.id}
+ className={data.className}
+ price={data.price}
+ vehicle={data.vehicle}
+ imageUrl={data.imageUrl}
+ />
+ ))}
+ </SimpleGrid>
+
+ </Flex>
+ </>
+ );
+};
+
+export default ClassData;
+>>>>>>> Stashed changes
diff --git a/src/pages/StudentData.tsx b/src/pages/StudentData.tsx
index ef1f9760b1214db083421100a673b19f53245c58..4f7485f15f2043a1c996ad131022ab0bc4aeb7ef 100644
--- a/src/pages/StudentData.tsx
+++ b/src/pages/StudentData.tsx
@@ -1,7 +1,91 @@
+<<<<<<< Updated upstream
export default function StudentData(){
return(<>
<h1>
This is the student data page
</h1>
</>)
-}
\ No newline at end of file
+}
+=======
+import React from "react";
+import Navbar from "../components/NavbarAdmin";
+import { Box, Text, Flex, Image, IconButton } from "@chakra-ui/react";
+import Searchbar from "../components/Searchbar";
+import TableComponent from "../components/Table";
+import Plus from "../assets/plus_button.svg";
+
+const UserData: React.FC = () => {
+ const studentData = [
+ {
+ ID: 1,
+ Nama: 'John Doe',
+ Usia: 20,
+ 'No Telepon': '123456789',
+ Status: 'Active',
+ Kelas: 'Class A',
+ Alamat: '123 Main St',
+ },
+ // Add more data as needed
+ ];
+
+ return (
+ <>
+ <Navbar />
+ <Flex
+ direction="column"
+ minHeight="100vh"
+ bg="#F5F8FD" // Set the background color for the entire section here
+ alignItems="center" // Center content horizontally
+ >
+ <Box
+ mt={8}
+ maxW="2880px"
+ display="flex"
+ flexDirection="column"
+ alignItems="center" // Center items vertically
+ style={{ whiteSpace: 'nowrap' }}
+ >
+ <Text
+ as="h1"
+ fontSize="2xl"
+ color="#02033B"
+ fontWeight="bold"
+ marginTop="50px"
+ >
+ Data Siswa
+ </Text>
+
+ <Flex
+ maxW="1000px"
+ mt="20px"
+ justify="space-between" // Space out the items
+ width="100%"
+ >
+ <Searchbar />
+
+ <Box>
+ <IconButton
+ aria-label="Add"
+ icon={<Image src={Plus} boxSize="3rem" />} /* Adjust the boxSize to your desired height */
+ //onClick={handleClick}
+ size="lg"
+ variant="ghost"
+ />
+ </Box>
+ </Flex>
+ </Box>
+
+ <Flex
+ mt={24}
+ maxW="1000px"
+ justify="center" // Center the content horizontally
+ >
+ <TableComponent data={studentData} />
+ </Flex>
+ </Flex>
+ </>
+ );
+};
+
+export default UserData;
+>>>>>>> Stashed changes
diff --git a/src/pages/VehicleDataAdmin.tsx b/src/pages/VehicleDataAdmin.tsx
index d8a3ed080fc63974003f797f10bad069782bda29..29701797873295894aebd197c72c57fb2d08a7a5 100644
--- a/src/pages/VehicleDataAdmin.tsx
+++ b/src/pages/VehicleDataAdmin.tsx
@@ -1,7 +1,7 @@
export default function VehicleDataAdmin(){
return(<>
<h1>
- This is the vehicle admin
+ This is the instructor page
</h1>
</>)
}
\ No newline at end of file
diff --git a/src/pages/VehicleDataOwner.tsx b/src/pages/VehicleDataOwner.tsx
index 191ada56cb9be1da862f2f364b2188a421f22133..d8c4f98543342cf66d89fe422193ea0cf3de678c 100644
--- a/src/pages/VehicleDataOwner.tsx
+++ b/src/pages/VehicleDataOwner.tsx
@@ -1,7 +1,101 @@
-export default function VehicleDataOwner(){
- return(<>
- <h1>
- This is the vehicle data owner
- </h1>
- </>)
-}
\ No newline at end of file
+import React from "react";
+import Navbar from "../components/NavbarOwner"
+import { Box, Text, Flex, Image, IconButton } from "@chakra-ui/react";
+import Searchbar from "../components/Searchbar";
+import TableComponent from "../components/TableVehicleOwner";
+import Plus from "../assets/plus_button.svg";
+
+interface VehicleData {
+ id: number;
+ vehicle: string;
+ mileage: string;
+ plate: string;
+ type: string;
+ lastService: string;
+ status: boolean;
+}
+
+const VehicleDataOwner: React.FC = () => {
+ const vehicleData: VehicleData[] = [
+ {
+ id: 1,
+ vehicle: 'Toyota Corolla',
+ mileage: '50000 KM',
+ plate: 'AB-123-CD',
+ type: 'Sedan',
+ lastService: '2023-01-15',
+ status: true,
+ },
+ {
+ id: 2,
+ vehicle: 'Honda Civic',
+ mileage: '62000 KM',
+ plate: 'XY-456-ZD',
+ type: 'Coupe',
+ lastService: '2023-02-20',
+ status: false,
+ },
+ // ... more vehicle data
+ ];
+
+ return (
+ <>
+ <Navbar />
+ <Flex
+ direction="column"
+ minHeight="100vh"
+ bg="#F5F8FD" // Set the background color for the entire section here
+ alignItems="center" // Center content horizontally
+ >
+ <Box
+ mt={8}
+ maxW="2880px"
+ display="flex"
+ flexDirection="column"
+ alignItems="center" // Center items vertically
+ style={{ whiteSpace: 'nowrap' }}
+ >
+ <Text
+ as="h1"
+ fontSize="2xl"
+ color="#02033B"
+ fontWeight="bold"
+ marginTop="50px"
+ >
+ Data Kendaraan
+ </Text>
+
+ <Flex
+ maxW="1000px"
+ mt="20px"
+ justify="space-between" // Space out the items
+ width="100%"
+ >
+ <Searchbar />
+
+ <Box>
+ <IconButton
+ aria-label="Add"
+ icon={<Image src={Plus} boxSize="3rem" />} /* Adjust the boxSize to your desired height */
+ //onClick={handleClick}
+ size="lg"
+ variant="ghost"
+ />
+ </Box>
+ </Flex>
+ </Box>
+
+ <Flex
+ mt={24}
+ maxW="10000px"
+ justify="center" // Center the content horizontally
+ >
+ <TableComponent data={vehicleData} />
+ </Flex>
+ </Flex>
+ </>
+ );
+};
+
+export default VehicleDataOwner;
+