Data Kehadiran Karyawan Setiap Perusahaan
- {attendanceSummary && v === "tooltip" ? "Attendance" : undefined!, color: "#2385DE", stack: "attendance", stackOffset: "expand", valueFormatter: (v) => v + " mandays"},
- {dataKey: "absent", label: (v) => v === "tooltip" ? "Absent" : undefined!, color: "#F7B500", stack: "attendance", stackOffset: "expand", valueFormatter: (v) => v + " mandays"},
+ undefined!, color: "#2385DE", stack: "attendance", stackOffset: "expand", valueFormatter: (v) => undefined!},
+ {dataKey: "absent", label: (v) => undefined!, color: "#F7B500", stack: "attendance", stackOffset: "expand", valueFormatter: (v) => undefined!},
]} xAxis={[
- {dataKey: "organization_code", label: "Nama Perusahaan", scaleType: "band", valueFormatter: (v, context) => context.location === "tooltip" ? attendanceSummary.find(e => e.organization_code === v)?.organization_name : v}
+ {dataKey: "organization_code", label: "Nama Perusahaan", scaleType: "band", valueFormatter: (v, context) => context.location === "tooltip" ? attendanceSummary?.find(e => e.organization_code === v)?.organization_name + ` (${Math.round(attendanceSummary?.find(e => e.organization_code === v)?.count!/attendanceSummary?.find(e => e.organization_code === v)?.workdays! * 100)}%)` : v }
]}
yAxis={[
{dataKey: "count",scaleType: "linear", valueFormatter: (v) => (v*100)+"%"}
]}
+ tooltip={{
+ trigger: "axis",
+ }}
slots={{
noDataOverlay: ()=> ,
}}
- />}
+ />
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index ed9b6ad..a41559a 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -14,6 +14,7 @@ import { useAppDispatch, useAppSelector } from "@/lib/hooks";
import { setFilter } from "@/lib/slice/filter";
import { format } from "date-fns";
import { useGetFilterOptionsQuery } from "@/services/api";
+import { NeedLoginRoute } from "../RouteGuard";
export default function DashboardLayout({children}:{children: React.ReactNode}) {
@@ -25,128 +26,130 @@ export default function DashboardLayout({children}:{children: React.ReactNode})
const [region, setRegion] = React.useState("");
return (
-
-
-
-
-
-
-
-
Halaman
-
-
-
Data Karyawan
-
-
-
-
Absensi
-
-
-
-
Turn Over Rate
-
-
-
-
Produktifitas Karyawan
-
-
-
-
HR Cost
-
-
-
-
Log Out
-
-
-
Powered by
-
-
+
+
+
+
+
+
+
+
+
Halaman
+
+
+
Data Karyawan
+
+
+
+
Absensi
+
+
+
+
Turn Over Rate
+
+
+
+
Produktifitas Karyawan
+
+
+
+
HR Cost
+
+
+
+
Log Out
+
+
-
-
-
-
- dispatch(setFilter({...filter, start_date: format(date ?? new Date(), "yyyy-MM-dd")}))}
- />
- dispatch(setFilter({...filter, end_date: format(date ?? new Date(), "yyyy-MM-dd")}))}
- />
-
-
-
option.name}
- renderInput={(params) => }
- onChange={(e, value) => {
- dispatch(setFilter({...filter, organization_code: value?.codes ?? ""}));
- setRegion(value?.codes ?? "");
- }}
- />
-
+
+
+
+ dispatch(setFilter({...filter, start_date: format(date ?? new Date(), "yyyy-MM-dd")}))}
+ />
+ dispatch(setFilter({...filter, end_date: format(date ?? new Date(), "yyyy-MM-dd")}))}
+ />
+
+
+
option.name}
- renderInput={(params) => }
- onChange={(e, value) => {
- dispatch(setFilter({...filter, organization_code: value?.code ?? ""}));
- if (value?.code == undefined) dispatch(setFilter({...filter, organization_code: region}));
- }}
- />
- option.name}
- renderInput={(params) => }
- onChange={(e, value) => dispatch(setFilter({...filter, estate_name: value?.name ?? ""}))}
- />
+ options={filterOptions?.regions ?? []}
+ getOptionLabel={(option) => option.name}
+ renderInput={(params) => }
+ onChange={(e, value) => {
+ dispatch(setFilter({...filter, organization_code: value?.codes ?? ""}));
+ setRegion(value?.codes ?? "");
+ }}
+ />
+ option.name}
+ renderInput={(params) => }
+ onChange={(e, value) => {
+ dispatch(setFilter({...filter, organization_code: value?.code ?? ""}));
+ if (value?.code == undefined) dispatch(setFilter({...filter, organization_code: region}));
+ }}
+ />
+ option.name}
+ renderInput={(params) => }
+ onChange={(e, value) => dispatch(setFilter({...filter, estate_name: value?.name ?? ""}))}
+ />
+
+
+ dispatch(setFilter({...filter, job_name: e.target.value}))}>
+
+
+
+
+
+
+
-
dispatch(setFilter({...filter, job_name: e.target.value}))}>
-
-
-
-
-
-
+
+ {children}
- {children}
-
-
+
)
}
\ No newline at end of file
diff --git a/src/app/AppProvider.tsx b/src/app/AppProvider.tsx
index 9ae6a15..517601f 100644
--- a/src/app/AppProvider.tsx
+++ b/src/app/AppProvider.tsx
@@ -1,23 +1,23 @@
"use client";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
-import { makeStore, AppStore } from '../lib/store'
+import { AppStore, persistor, store } from '../lib/store'
import { useRef } from "react";
import { Provider } from "react-redux";
import { StyledEngineProvider } from "@mui/material";
+import { PersistGate } from "redux-persist/integration/react";
+import { GuardedRoute } from "./RouteGuard";
export default function AppProvider({children}:{children: React.ReactNode}) {
- const storeRef = useRef
()
- if (!storeRef.current) {
- // Create the store instance the first time this renders
- storeRef.current = makeStore()
- }
-
return (
-
-
- {children}
-
+
+
+
+
+ {children}
+
+
+
)
diff --git a/src/app/RouteGuard.tsx b/src/app/RouteGuard.tsx
new file mode 100644
index 0000000..5f2cc92
--- /dev/null
+++ b/src/app/RouteGuard.tsx
@@ -0,0 +1,36 @@
+"use client";
+import React from "react";
+
+import { useAppSelector } from "@/lib/hooks";
+import { usePathname, useRouter } from "next/navigation";
+
+// set route for disabled user to come, if user has login
+const IF_LOGIN = ["/login", "/register"];
+
+export function GuardedRoute({ children }: React.PropsWithChildren) {
+ const router = useRouter();
+ const pathname = usePathname();
+
+ const auth = useAppSelector((state) => state.auth);
+ console.log("GuardedRoute", auth, pathname);
+
+ return children;
+}
+
+interface IGuardedRoute {
+ children: React.ReactNode;
+ role: string;
+}
+
+export function NeedLoginRoute({ children, role }: IGuardedRoute) {
+ const router = useRouter();
+
+ const auth = useAppSelector((state) => state.auth);
+
+ if (auth.token && auth.roles.includes(role)) {
+ return children;
+ }
+ console.log("NeedLoginRoute", auth, role);
+ router.push("/login");
+ return;
+}
\ No newline at end of file
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..9d90a0c
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,63 @@
+"use client"
+import Image from "next/image";
+import background from "../../../public/images/background.jpg";
+import loginImg from "../../../public/images/logo-login.png";
+import midsuit from "../../../public/images/midsuit-login.png";
+import { useEffect, useState } from "react";
+import { useLoginMutation } from "@/services/api";
+import { useAppDispatch } from "@/lib/hooks";
+import { setRoles, setToken, setUser } from "@/lib/slice/auth";
+import { useRouter } from "next/navigation";
+
+export default function LoginPage(){
+ const [login, {data: loginData, error: loginError}] = useLoginMutation();
+ const [username, setUsername] = useState("");
+ const [password, setPassword] = useState("");
+ const dispatch = useAppDispatch();
+ const router = useRouter();
+
+
+ useEffect(() => {
+ if(loginData){
+ dispatch(setUser(loginData.user))
+ dispatch(setToken(loginData.token))
+ dispatch(setRoles(loginData.roles))
+ router.push("/karyawan")
+ }
+ }, [loginData, loginError])
+
+ return (
+
+
+
+
+
+
+
+
+
HRM Dashboard
+
Masukan Username & Password
+
+
+ setUsername(e.target.value)}/>
+ setPassword(e.target.value)}/>
+
+
+ {loginError &&
{(loginError as any).data.message}
}
+
+
+
+
+
+