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>
<html lang="en">
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">

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

@ -13,7 +13,6 @@ function Header() {
const dispatch = useDispatch()
const { noOfNotifications, pageTitle } = useSelector(state => state.header)
// State untuk menyimpan tema saat ini
const [theme, setTheme] = useState(localStorage.getItem("theme") ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light")
);
@ -22,9 +21,8 @@ function Header() {
themeChange(false);
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme);
}, [theme]); // Setiap kali state theme berubah, update data-theme
}, [theme]);
// Fungsi untuk mengganti tema
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === "dark" ? "light" : "dark");
}
@ -48,12 +46,10 @@ function Header() {
</div>
<div className="flex-none">
{/* Light and dark theme selection toggle */}
<button onClick={toggleTheme} className="btn btn-ghost">
{theme === "dark" ? <SunIcon className="w-6 h-6" /> : <MoonIcon className="w-6 h-6" />}
</button>
{/* Notification icon */}
<button className="btn btn-ghost ml-4 btn-circle" onClick={openNotification}>
<div className="indicator">
<BellIcon className="h-6 w-6" />
@ -61,7 +57,6 @@ function Header() {
</div>
</button>
{/* Profile icon */}
<div className="dropdown dropdown-end ml-4">
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
<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 { useEffect } from "react"
import { removeNotificationMessage } from "@/Components/features/common/headerSlice"
// import { NotificationContainer, NotificationManager } from 'react-notifications';
import 'react-notifications/lib/notifications.css';
import ModalLayout from "./ModalLayout"
import { themeChange } from 'theme-change';
function Layout() {
function Layout({ children }) {
const dispatch = useDispatch()
const { newNotificationMessage, newNotificationStatus } = useSelector(state => state.header)
useEffect(() => {
themeChange(false)
}, [])
useEffect(() => {
if (newNotificationMessage !== "") {
@ -23,21 +25,13 @@ function Layout() {
return (
<>
{ /* Left drawer - containing page content and side bar (always open) */}
<div className="drawer lg:drawer-open">
<input id="left-sidebar-drawer" type="checkbox" className="drawer-toggle" />
<PageContent />
<PageContent>{children}</PageContent>
<LeftSidebar />
</div>
{ /* Right drawer - containing secondary content like notifications list etc.. */}
<RightSidebar />
{/** Notification layout container */}
{/* <NotificationContainer /> */}
{/* Modal layout container */}
<ModalLayout />
</>

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

@ -8,9 +8,6 @@ function LeftSidebar() {
const location = useLocation();
const dispatch = useDispatch()
console.log('anu')
const close = (e) => {
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()}>
<XMarkIcon className="h-5 inline-block w-5" />
</button>
<li className="mb-2 font-semibold text-xl">
<Link to={'/app/welcome'}><img className="mask mask-squircle w-10" src="/logo192.png" alt="DashWind Logo" />DashWind</Link> </li>
<Link to={'/app/welcome'}>DashWind</Link> </li>
{
routes.map((route, k) => {
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'))
function PageContent() {
function PageContent({ children }) {
const mainContentRef = useRef(null);
const { pageTitle } = useSelector(state => state.header)
// Scroll back to top on new page load
useEffect(() => {
mainContentRef.current.scroll({
top: 0,
@ -45,7 +43,9 @@ function PageContent() {
{/* <Route path="*" element={<Page404 />} /> */}
</Routes>
</Suspense>
<div className="h-16"></div>
<div className="min-h-screen">
{children}
</div>
</main>
</div>
)

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

@ -3,10 +3,10 @@ import { createSlice } from '@reduxjs/toolkit'
export const headerSlice = createSlice({
name: 'header',
initialState: {
pageTitle: "Home", // current page title state management
noOfNotifications : 15, // no of unread notifications
newNotificationMessage : "", // message of notification to be shown
newNotificationStatus : 1, // to check the notification type - success/ error/ info
pageTitle: "Home",
noOfNotifications: 15,
newNotificationMessage: "",
newNotificationStatus: 1,
},
reducers: {
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)
return (
<div className='text-red-500'>
<Layout />
{/* <Layout /> */}
<Head title="Manual Payment" />
<ModalInput showPayments={true} fields={fields} options={options} tableName='payments' initialData={selectedSantri} onClose={() => setSelectedSantri(null)} />
{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
import ManualPayment from '@/Pages/list-admin/payment/ManualPayment'
import IndexSantri from '@/Pages/list-admin/santri/IndexSantri'
import { lazy } from 'react'
const Dashboard = lazy(() => import('../pages/protected/Dashboard'))
@ -21,16 +23,16 @@ const Leads = lazy(() => import('../pages/protected/Leads'))
const routes = [
{
path: route('dashboard'), // the url
component: Dashboard, // view rendered
path: route('dashboard'),
component: Dashboard,
},
{
path: route('indexSantri'), // the url
component: Welcome, // view rendered
path: route('indexSantri'),
component: IndexSantri,
},
{
path: route('indexManualPayment'),
component: Leads,
component: ManualPayment,
},
// {
// path: '/settings-team',

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

@ -31,13 +31,13 @@ const routes = [
},
{
path: route('indexSantri'),
icon: <InboxArrowDownIcon className={iconClasses} />, // icon component
name: 'Data Santri', // name that appear in Sidebar
icon: <InboxArrowDownIcon className={iconClasses} />,
name: 'Data Santri',
},
{
path: route('indexManualPayment'), // url
icon: <CurrencyDollarIcon className={iconClasses} />, // icon component
name: 'Data Pembayaran', // name that appear in Sidebar
path: route('indexManualPayment'),
icon: <CurrencyDollarIcon className={iconClasses} />,
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 LeftSidebar from '@/Components/LeftSidebar';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
const Layout = lazy(() => import('./Components/Layout'))
// const Login = lazy(() => import('./pages/Login'))
@ -18,23 +19,23 @@ const Layout = lazy(() => import('./Components/Layout'))
// const Register = lazy(() => import('./pages/Register'))
// const Documentation = lazy(() => import('./pages/Documentation'))
useEffect(() => {
// 👆 daisy UI themes initialization
themeChange(false)
}, [])
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup({ el, App, props }) {
const root = createRoot(el);
const LayoutWrapper = props.initialPage.component.includes('Login') ?
({ children }) => <>{children}</> :
({ children }) => <Layout>{children}</Layout>
root.render(
<Provider store={store}>
<BrowserRouter>
<Header />
<LeftSidebar />
<App {...props} />
<LayoutWrapper>
<App {...props} />
</LayoutWrapper >
</BrowserRouter>
</Provider>
);

4
routes/web.php
View File

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

2
tailwind.config.js
View File

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