v1.0.0

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';
 

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'

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'

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<any>(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) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
+    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 (
+        <div className="min-h-screen bg-gray-50">
+            <Head>
+                <title>{getPageTitle('Beranda')}</title>
+            </Head>
+
+            {/* Hero Section */}
+            <div className="relative bg-white overflow-hidden">
+                <div className="max-w-7xl mx-auto">
+                    <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
+                        <svg
+                            className="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
+                            fill="currentColor"
+                            viewBox="0 0 100 100"
+                            preserveAspectRatio="none"
+                            aria-hidden="true"
+                        >
+                            <polygon points="50,0 100,0 50,100 0,100" />
+                        </svg>
+
+                        <main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
+                            <div className="sm:text-center lg:text-left">
+                                <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+                                    <span className="block xl:inline">Sistem Informasi</span>{' '}
+                                    <span className="block text-blue-600 xl:inline">Sekolah Indonesia</span>
+                                </h1>
+                                <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+                                    Solusi digital terintegrasi untuk manajemen akademik, keuangan (SPP), 
+                                    absensi real-time, dan komunikasi sekolah yang modern.
+                                </p>
+                                <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
+                                    <div className="rounded-md shadow">
+                                        <BaseButton
+                                            href="/login"
+                                            label="Masuk ke Sistem"
+                                            color="info"
+                                            className="w-full flex items-center justify-center px-8 py-3 md:py-4 md:text-lg md:px-10"
+                                        />
+                                    </div>
+                                    <div className="mt-3 sm:mt-0 sm:ml-3">
+                                        <BaseButton
+                                            href="/register"
+                                            label="Daftar Sekolah"
+                                            color="white"
+                                            className="w-full flex items-center justify-center px-8 py-3 md:py-4 md:text-lg md:px-10"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </main>
+                    </div>
+                </div>
+                <div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
+                    {illustrationImage ? (
+                        <img
+                            className="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
+                            src={illustrationImage?.src?.large2x || illustrationImage?.src?.original}
+                            alt="School"
+                        />
+                    ) : (
+                        <div className="h-56 w-full bg-blue-100 sm:h-72 md:h-96 lg:w-full lg:h-full flex items-center justify-center">
+                            <BaseIcon path={icon.mdiSchool} size={120} className="text-blue-300" />
+                        </div>
+                    )}
+                </div>
             </div>
+
+            {/* Features Section */}
+            <div className="py-12 bg-gray-50">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="lg:text-center">
+                        <h2 className="text-base text-blue-600 font-semibold tracking-wide uppercase">Fitur Utama</h2>
+                        <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+                            Satu Platform untuk Semua Kebutuhan
+                        </p>
+                    </div>
+
+                    <div className="mt-10">
+                        <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
+                            {roles.map((role) => (
+                                <div key={role.title} className="relative bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
+                                    <dt>
+                                        <div className={`absolute flex items-center justify-center h-12 w-12 rounded-md ${role.bg} ${role.color}`}>
+                                            <BaseIcon path={role.icon} size={24} />
+                                        </div>
+                                        <p className="ml-16 text-lg leading-6 font-medium text-gray-900">{role.title}</p>
+                                    </dt>
+                                    <dd className="mt-2 ml-16 text-base text-gray-500">
+                                        {role.description}
+                                    </dd>
+                                </div>
+                            ))}
+                        </dl>
+                    </div>
+                </div>
+            </div>
+
+            {/* Stats Section */}
+            <div className="bg-blue-700 py-12">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="grid grid-cols-1 gap-8 sm:grid-cols-3 text-center">
+                        <div>
+                            <p className="text-5xl font-extrabold text-white">100%</p>
+                            <p className="mt-2 text-xl font-medium text-blue-100">Transparan</p>
+                        </div>
+                        <div>
+                            <p className="text-5xl font-extrabold text-white">Real-time</p>
+                            <p className="mt-2 text-xl font-medium text-blue-100">Absensi & Nilai</p>
+                        </div>
+                        <div>
+                            <p className="text-5xl font-extrabold text-white">Mudah</p>
+                            <p className="mt-2 text-xl font-medium text-blue-100">Pembayaran SPP</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Footer */}
+            <footer className="bg-white">
+                <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-100">
+                    <div className="flex flex-col md:flex-row justify-between items-center">
+                        <p className="text-base text-gray-400">&copy; 2026 {title}. Hak Cipta Dilindungi.</p>
+                        <div className="flex space-x-6 mt-4 md:mt-0">
+                            <Link href="/privacy-policy" className="text-gray-400 hover:text-gray-500">
+                                Kebijakan Privasi
+                            </Link>
+                            <Link href="/terms-of-use" className="text-gray-400 hover:text-gray-500">
+                                Syarat & Ketentuan
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </footer>
         </div>
     );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
-
-  return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
-      <Head>
-        <title>{getPageTitle('Starter Page')}</title>
-      </Head>
-
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your Sistem Sekolah Indonesia app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
-        </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
-
-    </div>
-  );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+Home.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutGuest>{page}</LayoutGuest>;
+};

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';