aleandra
/
MIF_E31222881
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fe

This commit is contained in:
alealien666 2025-02-27 14:28:33 +07:00
parent d1e06e99aa
commit a111e526bf
12 changed files with 44 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="light">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">

7
resources/js/Components/Header.jsx
View File

@ -13,7 +13,6 @@ function Header() {
const dispatch = useDispatch() const dispatch = useDispatch()
const { noOfNotifications, pageTitle } = useSelector(state => state.header) const { noOfNotifications, pageTitle } = useSelector(state => state.header)
// State untuk menyimpan tema saat ini
const [theme, setTheme] = useState(localStorage.getItem("theme") || const [theme, setTheme] = useState(localStorage.getItem("theme") ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light") (window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light")
); );
@ -22,9 +21,8 @@ function Header() {
themeChange(false); themeChange(false);
document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
}, [theme]); // Setiap kali state theme berubah, update data-theme }, [theme]);
// Fungsi untuk mengganti tema
const toggleTheme = () => { const toggleTheme = () => {
setTheme(prevTheme => prevTheme === "dark" ? "light" : "dark"); setTheme(prevTheme => prevTheme === "dark" ? "light" : "dark");
} }
@ -48,12 +46,10 @@ function Header() {
</div> </div>
<div className="flex-none"> <div className="flex-none">
{/* Light and dark theme selection toggle */}
<button onClick={toggleTheme} className="btn btn-ghost"> <button onClick={toggleTheme} className="btn btn-ghost">
{theme === "dark" ? <SunIcon className="w-6 h-6" /> : <MoonIcon className="w-6 h-6" />} {theme === "dark" ? <SunIcon className="w-6 h-6" /> : <MoonIcon className="w-6 h-6" />}
</button> </button>
{/* Notification icon */}
<button className="btn btn-ghost ml-4 btn-circle" onClick={openNotification}> <button className="btn btn-ghost ml-4 btn-circle" onClick={openNotification}>
<div className="indicator"> <div className="indicator">
<BellIcon className="h-6 w-6" /> <BellIcon className="h-6 w-6" />
@ -61,7 +57,6 @@ function Header() {
</div> </div>
</button> </button>
{/* Profile icon */}
<div className="dropdown dropdown-end ml-4"> <div className="dropdown dropdown-end ml-4">
<label tabIndex={0} className="btn btn-ghost btn-circle avatar"> <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
<div className="w-10 rounded-full"> <div className="w-10 rounded-full">

18
resources/js/Components/Layout.jsx
View File

@ -4,14 +4,16 @@ import { useSelector, useDispatch } from 'react-redux'
import RightSidebar from './RightSidebar' import RightSidebar from './RightSidebar'
import { useEffect } from "react" import { useEffect } from "react"
import { removeNotificationMessage } from "@/Components/features/common/headerSlice" import { removeNotificationMessage } from "@/Components/features/common/headerSlice"
// import { NotificationContainer, NotificationManager } from 'react-notifications';
import 'react-notifications/lib/notifications.css';
import ModalLayout from "./ModalLayout" import ModalLayout from "./ModalLayout"
import { themeChange } from 'theme-change';
function Layout() { function Layout({ children }) {
const dispatch = useDispatch() const dispatch = useDispatch()
const { newNotificationMessage, newNotificationStatus } = useSelector(state => state.header) const { newNotificationMessage, newNotificationStatus } = useSelector(state => state.header)
useEffect(() => {
themeChange(false)
}, [])
useEffect(() => { useEffect(() => {
if (newNotificationMessage !== "") { if (newNotificationMessage !== "") {
@ -23,21 +25,13 @@ function Layout() {
return ( return (
<> <>
{ /* Left drawer - containing page content and side bar (always open) */}
<div className="drawer lg:drawer-open"> <div className="drawer lg:drawer-open">
<input id="left-sidebar-drawer" type="checkbox" className="drawer-toggle" /> <input id="left-sidebar-drawer" type="checkbox" className="drawer-toggle" />
<PageContent /> <PageContent>{children}</PageContent>
<LeftSidebar /> <LeftSidebar />
</div> </div>
{ /* Right drawer - containing secondary content like notifications list etc.. */}
<RightSidebar /> <RightSidebar />
{/** Notification layout container */}
{/* <NotificationContainer /> */}
{/* Modal layout container */}
<ModalLayout /> <ModalLayout />
</> </>

7
resources/js/Components/LeftSidebar.jsx
View File

@ -8,9 +8,6 @@ function LeftSidebar() {
const location = useLocation(); const location = useLocation();
const dispatch = useDispatch() const dispatch = useDispatch()
console.log('anu')
const close = (e) => { const close = (e) => {
document.getElementById('left-sidebar-drawer').click() document.getElementById('left-sidebar-drawer').click()
} }
@ -22,10 +19,8 @@ function LeftSidebar() {
<button className="btn btn-ghost bg-base-300 btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden" onClick={() => close()}> <button className="btn btn-ghost bg-base-300 btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden" onClick={() => close()}>
<XMarkIcon className="h-5 inline-block w-5" /> <XMarkIcon className="h-5 inline-block w-5" />
</button> </button>
<li className="mb-2 font-semibold text-xl"> <li className="mb-2 font-semibold text-xl">
<Link to={'/app/welcome'}>DashWind</Link> </li>
<Link to={'/app/welcome'}><img className="mask mask-squircle w-10" src="/logo192.png" alt="DashWind Logo" />DashWind</Link> </li>
{ {
routes.map((route, k) => { routes.map((route, k) => {
return ( return (

8
resources/js/Components/PageContent.jsx
View File

@ -9,12 +9,10 @@ import { useEffect, useRef } from "react"
// const Page404 = lazy(() => import('@/Pages/protected/404')) // const Page404 = lazy(() => import('@/Pages/protected/404'))
function PageContent() { function PageContent({ children }) {
const mainContentRef = useRef(null); const mainContentRef = useRef(null);
const { pageTitle } = useSelector(state => state.header) const { pageTitle } = useSelector(state => state.header)
// Scroll back to top on new page load
useEffect(() => { useEffect(() => {
mainContentRef.current.scroll({ mainContentRef.current.scroll({
top: 0, top: 0,
@ -45,7 +43,9 @@ function PageContent() {
{/* <Route path="*" element={<Page404 />} /> */} {/* <Route path="*" element={<Page404 />} /> */}
</Routes> </Routes>
</Suspense> </Suspense>
<div className="h-16"></div> <div className="min-h-screen">
{children}
</div>
</main> </main>
</div> </div>
) )

8
resources/js/Components/features/common/headerSlice.jsx
View File

@ -3,10 +3,10 @@ import { createSlice } from '@reduxjs/toolkit'
export const headerSlice = createSlice({ export const headerSlice = createSlice({
name: 'header', name: 'header',
initialState: { initialState: {
pageTitle: "Home", // current page title state management pageTitle: "Home",
noOfNotifications : 15, // no of unread notifications noOfNotifications: 15,
newNotificationMessage : "", // message of notification to be shown newNotificationMessage: "",
newNotificationStatus : 1, // to check the notification type - success/ error/ info newNotificationStatus: 1,
}, },
reducers: { reducers: {
setPageTitle: (state, action) => { setPageTitle: (state, action) => {

2
resources/js/Pages/list-admin/payment/ManualPayment.jsx
View File

@ -9,7 +9,7 @@ export default function ManualPayment({ santri, penalty, bill, fields, options }
// console.log(LeftSidebar) // console.log(LeftSidebar)
return ( return (
<div className='text-red-500'> <div className='text-red-500'>
<Layout /> {/* <Layout /> */}
<Head title="Manual Payment" /> <Head title="Manual Payment" />
<ModalInput showPayments={true} fields={fields} options={options} tableName='payments' initialData={selectedSantri} onClose={() => setSelectedSantri(null)} /> <ModalInput showPayments={true} fields={fields} options={options} tableName='payments' initialData={selectedSantri} onClose={() => setSelectedSantri(null)} />
{santri && santri.length > 0 ? santri.map((item, i) => ( {santri && santri.length > 0 ? santri.map((item, i) => (

12
resources/js/Routes/index.jsx
View File

@ -1,5 +1,7 @@
// All components mapping with path for internal routes // All components mapping with path for internal routes
import ManualPayment from '@/Pages/list-admin/payment/ManualPayment'
import IndexSantri from '@/Pages/list-admin/santri/IndexSantri'
import { lazy } from 'react' import { lazy } from 'react'
const Dashboard = lazy(() => import('../pages/protected/Dashboard')) const Dashboard = lazy(() => import('../pages/protected/Dashboard'))
@ -21,16 +23,16 @@ const Leads = lazy(() => import('../pages/protected/Leads'))
const routes = [ const routes = [
{ {
path: route('dashboard'), // the url path: route('dashboard'),
component: Dashboard, // view rendered component: Dashboard,
}, },
{ {
path: route('indexSantri'), // the url path: route('indexSantri'),
component: Welcome, // view rendered component: IndexSantri,
}, },
{ {
path: route('indexManualPayment'), path: route('indexManualPayment'),
component: Leads, component: ManualPayment,
}, },
// { // {
// path: '/settings-team', // path: '/settings-team',

10
resources/js/Routes/sidebar.jsx
View File

@ -31,13 +31,13 @@ const routes = [
}, },
{ {
path: route('indexSantri'), path: route('indexSantri'),
icon: <InboxArrowDownIcon className={iconClasses} />, // icon component icon: <InboxArrowDownIcon className={iconClasses} />,
name: 'Data Santri', // name that appear in Sidebar name: 'Data Santri',
}, },
{ {
path: route('indexManualPayment'), // url path: route('indexManualPayment'),
icon: <CurrencyDollarIcon className={iconClasses} />, // icon component icon: <CurrencyDollarIcon className={iconClasses} />,
name: 'Data Pembayaran', // name that appear in Sidebar name: 'Data Pembayaran',
}, },
] ]

17
resources/js/app.jsx
View File

@ -11,6 +11,7 @@ import { BrowserRouter } from 'react-router-dom';
import Header from '@/Components/Header'; import Header from '@/Components/Header';
import LeftSidebar from '@/Components/LeftSidebar'; import LeftSidebar from '@/Components/LeftSidebar';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
const Layout = lazy(() => import('./Components/Layout')) const Layout = lazy(() => import('./Components/Layout'))
// const Login = lazy(() => import('./pages/Login')) // const Login = lazy(() => import('./pages/Login'))
@ -18,23 +19,23 @@ const Layout = lazy(() => import('./Components/Layout'))
// const Register = lazy(() => import('./pages/Register')) // const Register = lazy(() => import('./pages/Register'))
// const Documentation = lazy(() => import('./pages/Documentation')) // const Documentation = lazy(() => import('./pages/Documentation'))
useEffect(() => {
// 👆 daisy UI themes initialization
themeChange(false)
}, [])
createInertiaApp({ createInertiaApp({
title: (title) => `${title} - ${appName}`, title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')), resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup({ el, App, props }) { setup({ el, App, props }) {
const root = createRoot(el); const root = createRoot(el);
const LayoutWrapper = props.initialPage.component.includes('Login') ?
({ children }) => <>{children}</> :
({ children }) => <Layout>{children}</Layout>
root.render( root.render(
<Provider store={store}> <Provider store={store}>
<BrowserRouter> <BrowserRouter>
<Header /> <LayoutWrapper>
<LeftSidebar /> <App {...props} />
<App {...props} /> </LayoutWrapper >
</BrowserRouter> </BrowserRouter>
</Provider> </Provider>
); );

4
routes/web.php
View File

@ -44,6 +44,10 @@
Route::get('/index-manual-payment', [PaymentController::class, 'indexManualPayment'])->name('indexManualPayment'); Route::get('/index-manual-payment', [PaymentController::class, 'indexManualPayment'])->name('indexManualPayment');
Route::post('/updatepayments/{paymentId}', [PaymentController::class, 'manualPayment'])->name('manualPayment'); Route::post('/updatepayments/{paymentId}', [PaymentController::class, 'manualPayment'])->name('manualPayment');
Route::get('profile-settings', function () {
return Inertia::render('ProfileSettings');
});
Route::get('/dashboard', function () { Route::get('/dashboard', function () {
return Inertia::render('Dashboard'); return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard'); })->middleware(['auth', 'verified'])->name('dashboard');

2
tailwind.config.js
View File

@ -24,6 +24,6 @@ export default {
], ],
daisyui: { daisyui: {
themes: ['light'] themes: ['light', 'dark']
} }
}; };