-
-
ID
-
-
CN
+
option.name}
- renderInput={(params) => }
+ renderInput={(params) => }
onChange={(e, value) => {
dispatch(setFilter({...filter, organization_code: value?.codes ?? ""}));
setRegion(value?.codes ?? "");
@@ -156,7 +159,7 @@ export default function DashboardLayout({children}:{children: React.ReactNode})
className="w-full"
options={filterOptions?.organizations ?? []}
getOptionLabel={(option) => option.name}
- renderInput={(params) => }
+ renderInput={(params) => }
onChange={(e, value) => {
dispatch(setFilter({...filter, organization_code: value?.code ?? ""}));
if (value?.code == undefined) dispatch(setFilter({...filter, organization_code: region}));
@@ -166,17 +169,17 @@ export default function DashboardLayout({children}:{children: React.ReactNode})
className="w-full"
options={filterOptions?.estates ?? []}
getOptionLabel={(option) => option.name}
- renderInput={(params) => }
+ 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}))}>
+
+
+
+
+
diff --git a/src/app/(dashboard)/productivity/page.tsx b/src/app/(dashboard)/productivity/page.tsx
index 9a3a704..252f1b2 100644
--- a/src/app/(dashboard)/productivity/page.tsx
+++ b/src/app/(dashboard)/productivity/page.tsx
@@ -1,6 +1,7 @@
"use client";
import { useAppSelector } from "@/lib/hooks";
+import { useLocale } from "@/lib/hooks/useLocale";
import { useGetFilterOptionsQuery, useGetProductivityByRegionQuery, useGetProductivityByAgeQuery, useGetProductivityByTenureQuery, useGetTonnageHarvestGroupEmployeeQuery, useGetTonnageHarvestByEmployeeOriginQuery, useGetTonnageHarvestByEmployeeSalaryQuery, useGetTargetTonnageQuery, useGetOrganizationAttendanceQuery, useGetCostQuery } from "@/services/api";
import { Filter } from "@/services/types";
import { useState } from "react";
@@ -8,6 +9,7 @@ import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContaine
import { PageLoader } from "@/components/Loader";
export default function ProductivityPage() {
+ const { t } = useLocale();
const filter = useAppSelector(state => state.filter.filter);
const { data: filterOptions, isLoading: isLoadingFilterOptions, isFetching: isFetchingFilterOptions } = useGetFilterOptionsQuery(filter);
const { data: productivityByRegion, isLoading: isLoadingProductivityByRegion, isFetching: isFetchingProductivityByRegion } = useGetProductivityByRegionQuery(filter);
@@ -32,7 +34,7 @@ export default function ProductivityPage() {
// Show loader while any data is loading
if (isLoading) {
- return
;
+ return
;
}
// Calculate total tonnage for percentage calculations (convert kg to tons)
@@ -109,7 +111,6 @@ export default function ProductivityPage() {
name: item.salary_range,
value: item.tonnage / 1000, // Convert kg to tons
count: item.count,
- percentage: item.percentage.toFixed(1)
})).sort((a, b) => b.value - a.value) || []; // Sort by tonnage descending
// Calculate current total tonnage from region data (already in tons)
@@ -138,14 +139,14 @@ export default function ProductivityPage() {
return (
-
Produktifitas
+
{t('productivity.produktifitas')}
-
Target Tonase
+
{t('productivity.targetTonase')}
{/* Target tonnage background (lighter) */}
- {targetTonnageValue.toLocaleString('id-ID', { maximumFractionDigits: 0 })} Ton
+ {targetTonnageValue.toLocaleString('id-ID', { maximumFractionDigits: 0 })} {t('common.ton')}
{/* Current tonnage overlay (darker) */}
{currentPercentage >= 30 && (
- {currentTotalTonnage.toLocaleString('id-ID', { maximumFractionDigits: 0 })} Ton
+ {currentTotalTonnage.toLocaleString('id-ID', { maximumFractionDigits: 0 })} {t('common.ton')}
)}
- Current: {currentTotalTonnage.toLocaleString('id-ID', { maximumFractionDigits: 0 })} Ton | Target: {targetTonnageValue.toLocaleString('id-ID', { maximumFractionDigits: 0 })} Ton ({currentPercentage.toFixed(1)}% achieved)
+ {t('productivity.current')}: {currentTotalTonnage.toLocaleString('id-ID', { maximumFractionDigits: 0 })} {t('common.ton')} | {t('productivity.target')}: {targetTonnageValue.toLocaleString('id-ID', { maximumFractionDigits: 0 })} {t('common.ton')} ({currentPercentage.toFixed(1)}% {t('productivity.achieved')})
-
Rasio Absensi
+
{t('productivity.rasioAbsensi')}
{/* Total workdays background (lighter) */}
- {totalWorkdays.toLocaleString('id-ID')} Hari Kerja
+ {totalWorkdays.toLocaleString('id-ID')} {t('productivity.hariKerja')}
{/* Attendance overlay (darker) */}
{attendancePercentage >= 30 && (
- {totalAttendance.toLocaleString('id-ID')} Masuk
+ {totalAttendance.toLocaleString('id-ID')} {t('productivity.masuk')}
)}
- Masuk: {totalAttendance.toLocaleString('id-ID')} Hari | Hari Kerja: {totalWorkdays.toLocaleString('id-ID')} Hari ({attendancePercentage.toFixed(1)}% kehadiran)
+ {t('productivity.masuk')}: {totalAttendance.toLocaleString('id-ID')} {t('productivity.hari')} | {t('productivity.hariKerja')}: {totalWorkdays.toLocaleString('id-ID')} {t('productivity.hari')} ({attendancePercentage.toFixed(1)}% {t('productivity.kehadiran')})
-
Cost Per Kilo
+
{t('productivity.costPerKilo')}
Rp {costPerKilo?.toLocaleString('id-ID', { maximumFractionDigits: 0 }) || '0'}
-
Analisa Produktifitas Berdasarkan Wilayah
+
{t('productivity.analisaProduktifitas')}
{productivityByRegion && productivityByRegion.length > 0 ? (
@@ -202,19 +203,19 @@ export default function ProductivityPage() {
dataKey="organization_code"
tick={{ fontSize: 12 }}
/>
-
-
+
+
{
- if (name === 'Tonnage') {
- return [`${Math.round(Number(value)).toLocaleString('id-ID')} ton`, 'Tonnage'];
+ if (name === t('productivity.tonnage')) {
+ return [`${Math.round(Number(value)).toLocaleString('id-ID')} ${t('common.ton')}`, t('productivity.tonnage')];
}
- if (name === 'Employee Count') {
- return [`${Number(value).toLocaleString('id-ID')} employees`, 'Employee Count'];
+ if (name === t('productivity.employeeCount')) {
+ return [`${Number(value).toLocaleString('id-ID')} ${t('common.employees')}`, t('productivity.employeeCount')];
}
- if (name === 'Ratio per Employee') {
- return [`${Number(value).toFixed(2)} ton/employee`, 'Ratio per Employee'];
+ if (name === t('productivity.ratioPerEmployee')) {
+ return [`${Number(value).toFixed(2)} ${t('productivity.tonPerEmployee')}`, t('productivity.ratioPerEmployee')];
}
return [value, name];
}}
@@ -224,21 +225,21 @@ export default function ProductivityPage() {
}}
/>
-
-
-
+
+
+
) : (
- Data belum tersedia
+ {t('common.dataNotAvailable')}
)}
-
Output Ton Per Tenaga Kerja
+
{t('productivity.outputTonPerTenagaKerja')}
{tonnageGroupData && tonnageGroupData.length > 0 ? (
@@ -258,11 +259,11 @@ export default function ProductivityPage() {
[
- `${Number(value).toLocaleString('id-ID')} karyawan`,
- 'Jumlah Karyawan'
+ `${Number(value).toLocaleString('id-ID')} ${t('common.karyawan')}`,
+ t('productivity.jumlahKaryawan')
]}
labelFormatter={(label, payload) => {
- return `Range Tonase: ${label}`;
+ return `${t('productivity.rangeTonase')}: ${label}`;
}}
/>
-
Output Ton Berdasarkan Gaji
+
{t('productivity.outputTonBerdasarkanGaji')}
@@ -303,19 +304,19 @@ export default function ProductivityPage() {
[
- `${value.toLocaleString('id-ID')} ton`,
- 'Output Tonnage'
+ `${value.toLocaleString('id-ID')} ${t('common.ton')}`,
+ t('productivity.outputTonnage')
]}
- labelFormatter={(label) => `Gaji: ${label}`}
+ labelFormatter={(label) => `${t('productivity.gaji')}: ${label}`}
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
const data = payload[0].payload;
return (
-
{`Gaji: ${payload[0].name}`}
-
{`Output: ${data.value.toLocaleString('id-ID')} ton`}
-
{`Karyawan: ${data.count.toLocaleString('id-ID')} orang`}
-
{`Persentase: ${data.percentage}%`}
+
{`${t('productivity.gaji')}: ${payload[0].name}`}
+
{`${t('productivity.output')}: ${data.value.toLocaleString('id-ID')} ${t('common.ton')}`}
+
{`${t('common.karyawan')}: ${data.count.toLocaleString('id-ID')} ${t('common.orang')}`}
+
{`${t('productivity.persentase')}: ${data.percentage}%`}
-
Output Ton Berdasarkan Domisili
+
{t('productivity.outputTonBerdasarkanDomisili')}
@@ -360,10 +361,10 @@ export default function ProductivityPage() {
[
- `${props.payload?.count?.toLocaleString('id-ID') ?? 0} karyawan`,
- `${Math.round(Number(props.payload?.value ?? 0)).toLocaleString('id-ID')} ton`
+ `${props.payload?.count?.toLocaleString('id-ID') ?? 0} ${t('common.karyawan')}`,
+ `${Math.round(Number(props.payload?.value ?? 0)).toLocaleString('id-ID')} ${t('common.ton')}`
]}
- labelFormatter={(label) => `Category: ${label}`}
+ labelFormatter={(label) => `${t('productivity.category')}: ${label}`}
/>
-
Rasio Usia Karyawan : Tonase
+
{t('productivity.rasioUsiaKaryawan')}
-
-
+
+
{
- if (name === 'Tonnage') {
- return [`${Math.round(Number(value)).toLocaleString('id-ID')} ton`, 'Tonnage'];
+ if (name === t('productivity.tonnage')) {
+ return [`${Math.round(Number(value)).toLocaleString('id-ID')} ${t('common.ton')}`, t('productivity.tonnage')];
}
- if (name === 'Employee Count') {
- return [`${Number(value).toLocaleString('id-ID')} employees`, 'Employee Count'];
+ if (name === t('productivity.employeeCount')) {
+ return [`${Number(value).toLocaleString('id-ID')} ${t('common.employees')}`, t('productivity.employeeCount')];
}
- if (name === 'Ratio per Employee') {
- return [`${Number(value).toFixed(2)} ton/employee`, 'Ratio per Employee'];
+ if (name === t('productivity.ratioPerEmployee')) {
+ return [`${Number(value).toFixed(2)} ${t('productivity.tonPerEmployee')}`, t('productivity.ratioPerEmployee')];
}
return [value, name];
}}
/>
-
-
-
+
+
+
-
Rasio Masa Kerja Karyawan : Tonase
+
{t('productivity.rasioMasaKerja')}
-
-
+
+
{
- if (name === 'Tonnage') {
- return [`${Math.round(Number(value)).toLocaleString('id-ID')} ton`, 'Tonnage'];
+ if (name === t('productivity.tonnage')) {
+ return [`${Math.round(Number(value)).toLocaleString('id-ID')} ${t('common.ton')}`, t('productivity.tonnage')];
}
- if (name === 'Employee Count') {
- return [`${Number(value).toLocaleString('id-ID')} employees`, 'Employee Count'];
+ if (name === t('productivity.employeeCount')) {
+ return [`${Number(value).toLocaleString('id-ID')} ${t('common.employees')}`, t('productivity.employeeCount')];
}
- if (name === 'Ratio per Employee') {
- return [`${Number(value).toFixed(2)} ton/employee`, 'Ratio per Employee'];
+ if (name === t('productivity.ratioPerEmployee')) {
+ return [`${Number(value).toFixed(2)} ${t('productivity.tonPerEmployee')}`, t('productivity.ratioPerEmployee')];
}
return [value, name];
}}
/>
-
-
-
+
+
+
diff --git a/src/app/(dashboard)/turnover/page.tsx b/src/app/(dashboard)/turnover/page.tsx
index 6f7c113..5c378ba 100644
--- a/src/app/(dashboard)/turnover/page.tsx
+++ b/src/app/(dashboard)/turnover/page.tsx
@@ -1,6 +1,7 @@
"use client"
import { useAppSelector } from "@/lib/hooks";
import { useDimensions } from "@/lib/hooks/dimension";
+import { useLocale } from "@/lib/hooks/useLocale";
import { useGetEmployeeMovementQuery, useGetMppRecruitmentQuery, useGetResignCategoryQuery, useGetResignReasonQuery, useGetResignSummaryQuery, useGetResignTypeQuery } from "@/services/api";
import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
import { Loader, LucideLoader2 } from "lucide-react";
@@ -10,7 +11,7 @@ import { Tooltip as ReactTooltip } from "react-tooltip";
import { PageLoader } from "@/components/Loader";
export default function TurnoverPage() {
-
+ const { t } = useLocale();
const filter = useAppSelector(state => state.filter.filter);
const resignRef = useRef
(null);
const recruitmentRef = useRef(null);
@@ -170,13 +171,13 @@ export default function TurnoverPage() {
// Show loader while any data is loading
if (isLoading) {
- return ;
+ return ;
}
return (
-
Karyawan Baru Seluruh Perusahaan
+
{t('turnover.karyawanBaruSeluruh')}
{isLoadingEmployeeMovement ? (
@@ -188,15 +189,15 @@ export default function TurnoverPage() {
-
Rasio Recruitment
+
{t('turnover.rasioRecruitment')}
{recruitmentRatio} %
-
Karyawan Baru
+
{t('turnover.karyawanBaru')}
{totalRecruitment}
-
Karyawan Aktif
+
{t('turnover.karyawanAktif')}
{totalActiveEmployees}
@@ -204,7 +205,7 @@ export default function TurnoverPage() {
)}
-
Man Power Planning per Perusahaan : Recruitment
+
{t('turnover.manPowerPlanning')}
{mppRecruitmentSummary && !isLoadingMppRecruitment ? (
@@ -224,10 +225,10 @@ export default function TurnoverPage() {
{
const orgData = mppRecruitmentSummary.find(e => e.organization_code === props.payload.organization_code);
- if (name === "Recruited") {
- return [`${orgData?.recruited || 0} employees`, "Recruited"];
+ if (name === t('turnover.recruited')) {
+ return [`${orgData?.recruited || 0} ${t('common.employees')}`, t('turnover.recruited')];
} else {
- return [`${orgData?.remaining || 0} employees`, "Remaining"];
+ return [`${orgData?.remaining || 0} ${t('common.employees')}`, t('turnover.remaining')];
}
}}
labelFormatter={(label) => {
@@ -236,41 +237,41 @@ export default function TurnoverPage() {
}}
/>
-
-
+
+
) : isLoadingMppRecruitment ? (
) : (
- Data belum tersedia
+ {t('common.dataNotAvailable')}
)}
-
Karyawan Resign Seluruh Perusahaan
+
{t('turnover.karyawanResignSeluruh')}
-
Rasio Turn Over
+
{t('turnover.rasioTurnOver')}
{turnOverRatio} %
-
Karyawan Resign
+
{t('turnover.karyawanResign')}
{resign}
-
Karyawan Aktif
+
{t('turnover.karyawanAktif')}
{active}
-
Resignment per Perusahaan : Jumlah Karyawan
+
{t('turnover.resignmentPerPerusahaan')}
{limitedResignSummary && !isLoadingResignSummary ? (
@@ -290,10 +291,10 @@ export default function TurnoverPage() {
{
const orgData = limitedResignSummary.find(e => e.organization_code === props.payload.organization_code);
- if (name === "Resign") {
- return [`${orgData?.count || 0} employees`, "Resign"];
+ if (name === t('turnover.resign')) {
+ return [`${orgData?.count || 0} ${t('common.employees')}`, t('turnover.resign')];
} else {
- return [`${orgData?.active || 0} employees`, "Active"];
+ return [`${orgData?.active || 0} ${t('common.employees')}`, t('turnover.active')];
}
}}
labelFormatter={(label) => {
@@ -302,24 +303,24 @@ export default function TurnoverPage() {
}}
/>
-
-
+
+
) : isLoadingResignSummary || isFetchingResignSummary ? (
) : (
- Data belum tersedia
+ {t('common.dataNotAvailable')}
)}
-
Jenis Pemutusan Hubungan Kerja
+
{t('turnover.jenisPemutusanHubungan')}
{resignType && resignType.map((resign, index) => (
-
+
{resign.type}
@@ -327,12 +328,12 @@ export default function TurnoverPage() {
))}
- {resignType && resignType.length === 0 &&
Data belum tersedia}
+ {resignType && resignType.length === 0 &&
{t('common.dataNotAvailable')}}
-
Kategory Resign
+
{t('turnover.kategoriResign')}
{resignCategory && resignCategory.length > 0 ? (
@@ -350,7 +351,7 @@ export default function TurnoverPage() {
|
))}
- [`${value} employees`, name]} />
+ [`${value} ${t('common.employees')}`, name]} />
-
Alasan Pemutusan Hubungan Kerja
+
{t('turnover.alasanPemutusanHubungan')}
{resignReason && resignReason.map((resign, index) => (
-
+
{resign.reason}
@@ -378,7 +379,7 @@ export default function TurnoverPage() {
))}
- {resignReason && resignReason.length === 0 &&
Data belum tersedia}
+ {resignReason && resignReason.length === 0 &&
{t('common.dataNotAvailable')}}
diff --git a/src/app/AppProvider.tsx b/src/app/AppProvider.tsx
index 517601f..9da252d 100644
--- a/src/app/AppProvider.tsx
+++ b/src/app/AppProvider.tsx
@@ -7,18 +7,22 @@ import { Provider } from "react-redux";
import { StyledEngineProvider } from "@mui/material";
import { PersistGate } from "redux-persist/integration/react";
import { GuardedRoute } from "./RouteGuard";
+import { I18nextProvider } from "react-i18next";
+import i18n from "../lib/i18n";
export default function AppProvider({children}:{children: React.ReactNode}) {
return (
-
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
)
}
\ No newline at end of file
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 417eb11..4594dcc 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -8,6 +8,8 @@ import { useLoginMutation } from "@/services/api";
import { useAppDispatch } from "@/lib/hooks";
import { setRoles, setToken, setUser } from "@/lib/slice/auth";
import { useRouter } from "next/navigation";
+import { useLocale } from "@/lib/hooks/useLocale";
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
export default function LoginPage(){
const [login, {data: loginData, error: loginError}] = useLoginMutation();
@@ -15,6 +17,7 @@ export default function LoginPage(){
const [password, setPassword] = useState("");
const dispatch = useAppDispatch();
const router = useRouter();
+ const { t } = useLocale();
useEffect(() => {
@@ -29,18 +32,36 @@ export default function LoginPage(){
return (
+
+ {/* Language Switcher positioned at top right */}
+
+
+
+
-
HRM Dashboard
-
Masukan Username & Password
+
{t('auth.loginTitle')}
+
{t('auth.loginSubtitle')}
- setUsername(e.target.value)}/>
- setPassword(e.target.value)}/>
+ setUsername(e.target.value)}
+ />
+ setPassword(e.target.value)}
+ />
{loginError &&
{(loginError as any).data.message}
}
@@ -48,9 +69,9 @@ export default function LoginPage(){
onClick={async () => {
await login({username, password})
}}
- >Log In
+ >{t('auth.loginButton')}
-
Powered by
+
{t('auth.poweredBy')}
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000..1bff5b5
--- /dev/null
+++ b/src/components/LanguageSwitcher.tsx
@@ -0,0 +1,38 @@
+"use client";
+import React from 'react';
+import { useLocale } from '@/lib/hooks/useLocale';
+import { SupportedLocale } from '@/lib/slice/locale';
+
+interface LanguageSwitcherProps {
+ className?: string;
+}
+
+export const LanguageSwitcher: React.FC
= ({ className = '' }) => {
+ const { currentLocale, changeLanguage } = useLocale();
+
+ const languages = [
+ { code: 'id' as SupportedLocale, name: 'Bahasa Indonesia', flag: '🇮🇩' },
+ { code: 'cn' as SupportedLocale, name: '中文', flag: '🇨🇳' },
+ ];
+
+ return (
+
+
+
+