From 710c2d14f52b3e097b5e538dee13012d5feeff1e Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Thu, 12 Feb 2026 05:47:12 +0000 Subject: [PATCH] v1.0.0 --- frontend/src/components/AsideMenuLayer.tsx | 3 +- frontend/src/components/NavBarItem.tsx | 3 +- frontend/src/layouts/Authenticated.tsx | 3 +- frontend/src/pages/index.tsx | 315 +++++++++++---------- frontend/src/pages/search.tsx | 3 +- 5 files changed, 177 insertions(+), 150 deletions(-) diff --git a/frontend/src/components/AsideMenuLayer.tsx b/frontend/src/components/AsideMenuLayer.tsx index b08d7ea..6d284ca 100644 --- a/frontend/src/components/AsideMenuLayer.tsx +++ b/frontend/src/components/AsideMenuLayer.tsx @@ -3,10 +3,9 @@ import { mdiLogout, mdiClose } from '@mdi/js' import BaseIcon from './BaseIcon' import AsideMenuList from './AsideMenuList' import { MenuAsideItem } from '../interfaces' -import { useAppSelector } from '../stores/hooks' +import { useAppSelector, useAppDispatch } from '../stores/hooks' import Link from 'next/link'; -import { useAppDispatch } from '../stores/hooks'; import { createAsyncThunk } from '@reduxjs/toolkit'; import axios from 'axios'; diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx index 72935e6..995a452 100644 --- a/frontend/src/components/NavBarItem.tsx +++ b/frontend/src/components/NavBarItem.tsx @@ -1,6 +1,5 @@ -import React, {useEffect, useRef} from 'react' +import React, {useEffect, useRef, useState} from 'react' import Link from 'next/link' -import { useState } from 'react' import { mdiChevronUp, mdiChevronDown } from '@mdi/js' import BaseDivider from './BaseDivider' import BaseIcon from './BaseIcon' diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx index 1b9907d..73d8391 100644 --- a/frontend/src/layouts/Authenticated.tsx +++ b/frontend/src/layouts/Authenticated.tsx @@ -1,5 +1,4 @@ -import React, { ReactNode, useEffect } from 'react' -import { useState } from 'react' +import React, { ReactNode, useEffect, useState } from 'react' import jwt from 'jsonwebtoken'; import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js' import menuAside from '../menuAside' diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 56b663f..23297cd 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,166 +1,197 @@ - import React, { useEffect, useState } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; +import * as icon from '@mdi/js'; import BaseButton from '../components/BaseButton'; -import CardBox from '../components/CardBox'; +import BaseIcon from '../components/BaseIcon'; import SectionFullScreen from '../components/SectionFullScreen'; import LayoutGuest from '../layouts/Guest'; -import BaseDivider from '../components/BaseDivider'; -import BaseButtons from '../components/BaseButtons'; import { getPageTitle } from '../config'; import { useAppSelector } from '../stores/hooks'; -import CardBoxComponentTitle from "../components/CardBoxComponentTitle"; -import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'; +import { getPexelsImage } from '../helpers/pexels'; - -export default function Starter() { - const [illustrationImage, setIllustrationImage] = useState({ - src: undefined, - photographer: undefined, - photographer_url: undefined, - }) - const [illustrationVideo, setIllustrationVideo] = useState({video_files: []}) - const [contentType, setContentType] = useState('image'); - const [contentPosition, setContentPosition] = useState('left'); +export default function Home() { + const [illustrationImage, setIllustrationImage] = useState(null); const textColor = useAppSelector((state) => state.style.linkColor); + const title = 'Sistem Sekolah Indonesia'; - const title = 'Sistem Sekolah Indonesia' - - // Fetch Pexels image/video useEffect(() => { async function fetchData() { - const image = await getPexelsImage(); - const video = await getPexelsVideo(); + const image = await getPexelsImage('school building'); setIllustrationImage(image); - setIllustrationVideo(video); } fetchData(); }, []); - const imageBlock = (image) => ( -
-
- - Photo by {image?.photographer} on Pexels - + const roles = [ + { + title: 'Admin Yayasan', + description: 'Kelola data sekolah, jenjang pendidikan, dan setting biaya SPP.', + icon: icon.mdiShieldAccount, + color: 'text-blue-600', + bg: 'bg-blue-50', + }, + { + title: 'Guru', + description: 'Input absensi harian, tugas, nilai, dan jadwal pelajaran.', + icon: icon.mdiAccountTie, + color: 'text-green-600', + bg: 'bg-green-50', + }, + { + title: 'Siswa', + description: 'Lihat jadwal, kerjakan tugas, dan ikuti ujian online.', + icon: icon.mdiAccountSchool, + color: 'text-purple-600', + bg: 'bg-purple-50', + }, + { + title: 'Orang Tua', + description: 'Pantau absensi anak, nilai, dan status pembayaran SPP.', + icon: icon.mdiAccountChild, + color: 'text-orange-600', + bg: 'bg-orange-50', + }, + ]; + + return ( +
+ + {getPageTitle('Beranda')} + + + {/* Hero Section */} +
+
+
+ + +
+
+

+ Sistem Informasi{' '} + Sekolah Indonesia +

+

+ Solusi digital terintegrasi untuk manajemen akademik, keuangan (SPP), + absensi real-time, dan komunikasi sekolah yang modern. +

+
+
+ +
+
+ +
+
+
+
+
+
+
+ {illustrationImage ? ( + School + ) : ( +
+ +
+ )} +
+ + {/* Features Section */} +
+
+
+

Fitur Utama

+

+ Satu Platform untuk Semua Kebutuhan +

+
+ +
+
+ {roles.map((role) => ( +
+
+
+ +
+

{role.title}

+
+
+ {role.description} +
+
+ ))} +
+
+
+
+ + {/* Stats Section */} +
+
+
+
+

100%

+

Transparan

+
+
+

Real-time

+

Absensi & Nilai

+
+
+

Mudah

+

Pembayaran SPP

+
+
+
+
+ + {/* Footer */} +
+
+
+

© 2026 {title}. Hak Cipta Dilindungi.

+
+ + Kebijakan Privasi + + + Syarat & Ketentuan + +
+
+
+
); - - const videoBlock = (video) => { - if (video?.video_files?.length > 0) { - return ( -
- - -
) - } - }; - - return ( -
- - {getPageTitle('Starter Page')} - - - -
- {contentType === 'image' && contentPosition !== 'background' - ? imageBlock(illustrationImage) - : null} - {contentType === 'video' && contentPosition !== 'background' - ? videoBlock(illustrationVideo) - : null} -
- - - -
-

This is a React.js/Node.js app generated by the Flatlogic Web App Generator

-

For guides and documentation please check - your local README.md and the Flatlogic documentation

-
- - - - - - -
-
- -
-

© 2026 {title}. All rights reserved

- - Privacy Policy - -
- -
- ); } -Starter.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - +Home.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; \ No newline at end of file diff --git a/frontend/src/pages/search.tsx b/frontend/src/pages/search.tsx index a46cc96..94bb6a5 100644 --- a/frontend/src/pages/search.tsx +++ b/frontend/src/pages/search.tsx @@ -1,9 +1,8 @@ import React, { ReactElement, useEffect, useState } from 'react'; import Head from 'next/head'; import 'react-datepicker/dist/react-datepicker.css'; -import { useAppDispatch } from '../stores/hooks'; +import { useAppDispatch, useAppSelector } from '../stores/hooks'; -import { useAppSelector } from '../stores/hooks'; import { useRouter } from 'next/router'; import LayoutAuthenticated from '../layouts/Authenticated';