+
+
+
+
+
+
+
+
+
+
+ {headerGroups.map((headerGroup) => (
+
+
+ | {column.render("Header")} | + ))} +Action | +
|---|---|
| + {cell.column.id === 'rowNumber' ? i + 1 : cell.render('Cell')} + | + ); + })} ++ + + | +
+
+
+ );
+}
+
+const GlobalFilter = ({
+ globalFilter,
+ setGlobalFilter,
+ tabFilterData,
+ onSelectedTabFilter,
+ selectedRole
+}) => {
+ const [value, setValue] = React.useState(globalFilter)
+ const onChange = useAsyncDebounce(value => {
+ setGlobalFilter(value || undefined)
+ }, 200)
+
+ const tabsFilter = ['All', ...tabFilterData];
+
+ return (
+ <>
+
+ previousPage()} disabled={!canPreviousPage}>Previous
+ nextPage()} disabled={!canNextPage}>Next
+
+
+
+
+
+ Page {state.pageIndex + 1} of {pageOptions.length}
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setValue(e.target.value);
+ onChange(e.target.value)
+ }}
+ autocomplete="off"
+ />
+
+
+
+ {tabsFilter.map((filter) => (
+
+ ))}
+
+
+ )
+}
+
+export default DataTable;
\ No newline at end of file
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
new file mode 100644
index 0000000..d5774bc
--- /dev/null
+++ b/src/components/Header/index.jsx
@@ -0,0 +1,98 @@
+import { useDispatch } from 'react-redux';
+import { logout } from '../../actions';
+
+const Header = (props) => {
+
+ const dispatch = useDispatch();
+
+ const handleLogoutClick = () => {
+ dispatch(logout())
+ navigate("/")
+ }
+
+ return (
+
+
+
+ {/* */}
+
+ {/* */}
+
+ {/*
+ 
+ */}
+
+
+
+
+
+
+
+
+ {/* Loan market / {props.routeName}
+
+
*/}
+ -
+
+
+
+ );
+};
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
new file mode 100644
index 0000000..d4aa230
--- /dev/null
+++ b/src/components/Sidebar/index.jsx
@@ -0,0 +1,253 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+// import Logo from './vite.svg';
+import SidebarLinkGroup from '../SidebarLinkGroup';
+import { useSelector } from 'react-redux';
+
+// interface SidebarProps {
+// sidebarOpen: boolean;
+// setSidebarOpen: (arg: boolean) => void;
+// }
+
+const Sidebar = ({ sidebarOpen, setSidebarOpen }) => {
+ const location = useLocation();
+ const { pathname } = location;
+
+ const auth = useSelector(state => state.auth)
+
+ const trigger = useRef(null);
+ const sidebar = useRef(null);
+
+ const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
+ const [sidebarExpanded, setSidebarExpanded] = useState(
+ storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'
+ );
+
+ // close on click outside
+ useEffect(() => {
+ const clickHandler = ({ target }) => {
+ if (!sidebar.current || !trigger.current) return;
+ if (
+ !sidebarOpen ||
+ sidebar.current.contains(target) ||
+ trigger.current.contains(target)
+ )
+ return;
+ setSidebarOpen(false);
+ };
+ document.addEventListener('click', clickHandler);
+ return () => document.removeEventListener('click', clickHandler);
+ });
+
+ // close if the esc key is pressed
+ useEffect(() => {
+ const keyHandler = ({ keyCode }) => {
+ if (!sidebarOpen || keyCode !== 27) return;
+ setSidebarOpen(false);
+ };
+ document.addEventListener('keydown', keyHandler);
+ return () => document.removeEventListener('keydown', keyHandler);
+ });
+
+ useEffect(() => {
+ localStorage.setItem('sidebar-expanded', sidebarExpanded.toString());
+ if (sidebarExpanded) {
+ document.querySelector('body')?.classList.add('sidebar-expanded');
+ } else {
+ document.querySelector('body')?.classList.remove('sidebar-expanded');
+ }
+ }, [sidebarExpanded]);
+
+ return (
+
+ );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/src/components/SidebarLinkGroup/index.jsx b/src/components/SidebarLinkGroup/index.jsx
new file mode 100644
index 0000000..06fa402
--- /dev/null
+++ b/src/components/SidebarLinkGroup/index.jsx
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+
+const SidebarLinkGroup = ({
+ children,
+ activeCondition,
+}) => {
+ const [open, setOpen] = useState(activeCondition);
+
+ const handleClick = () => {
+ setOpen(!open);
+ };
+
+ return
+
+ {props.label}
+{props.completed} %
+
+
+
+
+
+ {/* */}
+
+ );
+};
+
+export default DefaultLayout;
\ No newline at end of file
diff --git a/src/layouts/index.jsx b/src/layouts/index.jsx
new file mode 100644
index 0000000..ebc5fd2
--- /dev/null
+++ b/src/layouts/index.jsx
@@ -0,0 +1,5 @@
+import DefaultLayout from "./DefaultLayout";
+
+export {
+ DefaultLayout,
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 54b39dd..a6838ce 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,9 +2,12 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
+import { BrowserRouter as Router} from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+
+ {/* */}
+
+ {/* */}
+ Dashboard
+
+
+
+
+ { auth.role_id != 2 &&
+
+ }
+ Dashboard
+User quantity
+
+
+
+
+
+
+
+
+
+ {data.users_data.total_users}
+User
+
+
+
+
+
+
+
+ {data.users_data.total_users}
+User
+
+
+
+
+
+
+
+ {data.users_data.total_users}
+User
+
+
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+
+
+
+
+
+ Admin office
+4
+
+
+ {/* container */}
+ Data & analytics
+Show updates of post
+
+ {/* 2 grid */}
+
)
}
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
index 35bdd47..c4447d0 100644
--- a/src/pages/Login/index.jsx
+++ b/src/pages/Login/index.jsx
@@ -1,9 +1,14 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import user from "../../datas/users.json";
import { useDispatch, useSelector } from "react-redux";
import { authAdded } from "../../features/auth/authSlice";
+import { useNavigate } from "react-router-dom";
const Login = () => {
+ const dispatch = useDispatch();
+ const auth = useSelector(state => state.auth);
+ const navigate = useNavigate();
+
const [authForm, setAuthForm] = useState({
email: '',
password: ''
@@ -14,9 +19,6 @@ const Login = () => {
message: ''
});
- const dispatch = useDispatch();
- const auth = useSelector(state => state.auth);
-
const handleAuthForm = (e) => {
if(err.err) {
setErr({ ...err, err: false})
@@ -42,9 +44,16 @@ const Login = () => {
return;
}
dispatch(authAdded({current_user}));
- console.log(auth);
+ navigate("/dashboard")
}
+ useEffect(() => {
+ if(!auth == {}) {
+ console.log("BRUHH", auth);
+ navigate("/dashboard")
+ }
+ })
+
return (
<>
+ {/* inside 2 grid */}
+
+
+ {/* header */}
+
+
+
+
+
+
+
+ Belum diproses
+9123
+
+
+
+
+
+
+ Sudah diproses
+9123
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Customer
+9123
+
+
+
+
+
@@ -95,7 +104,7 @@ const Login = () => {