@@ -146,7 +167,13 @@ const Navigation = ({ user }) => {
{/* Authentication */}
- Logout
+
+
+ Logout
+
diff --git a/src/components/NavLink.js b/src/components/NavLink.js
index fbc43371..124739c4 100644
--- a/src/components/NavLink.js
+++ b/src/components/NavLink.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
const NavLink = ({ active = false, children, ...props }) => (
{
+ return (
+
+
+
+
+
+
+ {generatePageNumbers().map((page, index) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/laos/SearchFilter.js b/src/components/laos/SearchFilter.js
new file mode 100644
index 00000000..91382b5d
--- /dev/null
+++ b/src/components/laos/SearchFilter.js
@@ -0,0 +1,637 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch, faTasks } from '@fortawesome/free-solid-svg-icons'
+
+const SearchFilter = ({
+ searchWorkerId,
+ handleSearchWorkerId,
+ handleResetSearch,
+ setSearchWorkerId,
+
+ showOnlyTypeT,
+ showOnlyTypeC,
+ showOnlyTypeM,
+ showOnlyTypeL,
+ setShowOnlyTypeT,
+ setShowOnlyTypeC,
+ setShowOnlyTypeM,
+ setShowOnlyTypeL,
+
+ showOvernightt,
+ showOvernightf,
+ setShowOnlyOvernightt,
+ setShowOnlyOvernightf,
+ selectedStatus,
+ setSelectedStatus,
+ selectedJob,
+ setSelectedJob,
+
+ selectedZone,
+ setSelectedZone,
+
+ selectedOutside,
+ setSelectedOutside,
+}) => {
+ return (
+
+
+
+
+
+
+ {' '}
+ ตั้งค่าการแสดงผล
+
+
+
+
+
+
+
+ setSearchWorkerId(e.target.value)}
+ className="input bg-gray-100 w-full lg:w-80 join-item"
+ />
+
+
+
+
+
+
+ )
+}
+
+export default SearchFilter
diff --git a/src/components/laos/WorkerCard.js b/src/components/laos/WorkerCard.js
new file mode 100644
index 00000000..bd676060
--- /dev/null
+++ b/src/components/laos/WorkerCard.js
@@ -0,0 +1,215 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+ faCircleCheck,
+ faCirclePause,
+ faFileCircleCheck,
+ faClock,
+ faArrowRightArrowLeft,
+ faPersonCircleExclamation,
+ faUserCheck,
+ faCircleXmark,
+ faQuestion,
+} from '@fortawesome/free-solid-svg-icons'
+
+const WorkerCard = ({
+ item,
+ imageLoading,
+ setImageLoading,
+ handleFreeButtonClick,
+ getBackgroundClass,
+ getFlagUrl,
+ getfapi,
+}) => {
+ const getStatusData = status => {
+ switch (status) {
+ case 'wait':
+ return {
+ styles: 'bg-gray-100 text-gray-500 border-gray-500',
+ icon: faClock,
+ text: 'ว่างงาน',
+ }
+ case 'save':
+ return {
+ styles: 'bg-amber-100 text-amber-500 border-amber-500',
+ icon: faCirclePause,
+ text: 'จอง',
+ }
+ case 'incomplete':
+ return {
+ styles: 'bg-blue-100 text-blue-500 border-blue-500',
+ icon: faFileCircleCheck,
+ text: 'รอทำสัญญา',
+ }
+ case 'woker':
+ return {
+ styles:
+ 'bg-emerald-100 text-emerald-500 border-emerald-500',
+ icon: faCircleCheck,
+ text: 'ได้งานแล้ว',
+ }
+ case 'retry':
+ return {
+ styles: 'bg-purple-100 text-purple-500 border-purple-500',
+ icon: faPersonCircleExclamation,
+ text: 'เคลม',
+ }
+ case 'changepp':
+ return {
+ styles: 'bg-gray-100 text-black border-black',
+ icon: faArrowRightArrowLeft,
+ text: 'เปลี่ยน',
+ }
+ case 'bfprocess':
+ return {
+ styles: 'bg-sky-100 text-sky-500 border-sky-500',
+ icon: faUserCheck,
+ text: 'สพ.แล้ว',
+ }
+ case 'export':
+ return {
+ styles: 'bg-red-100 text-red-500 border-red-500',
+ icon: faCircleXmark,
+ text: 'ห้ามส่งงาน',
+ }
+ default:
+ return {
+ styles: '',
+ icon: faQuestion,
+ text: 'Unknown Status',
+ }
+ }
+ }
+
+ return (
+
+
+
+ {imageLoading && (
+
+ )}
+ 
setImageLoading(false)}
+ />
+
+ {item.worker_nickname}
+
+
+ })
+
+
+
+
+ {item.worker_id}{' '}
+ {item.worker_namelist === 1 ? (
+
+ ) : null}
+
+
+
+ {(() => {
+ const { styles, icon, text } = getStatusData(
+ item.worker_status,
+ )
+ return (
+
+
+ {text}
+
+ )
+ })()}
+
+
+ {item.workposition_id1 && (
+ -
+ {item.workposition_id1}
+
+ )}
+ {item.workposition_id2 && (
+ -
+ {item.workposition_id2}
+
+ )}
+ {item.workposition_id3 && (
+ -
+ {item.workposition_id3}
+
+ )}
+ {item.workposition_id4 && (
+ -
+ {item.workposition_id4}
+
+ )}
+
+
+
+
+
+
+
+
+ )
+}
+
+export default WorkerCard
diff --git a/src/components/laos/WorkerDetailsDrawer.js b/src/components/laos/WorkerDetailsDrawer.js
new file mode 100644
index 00000000..15ea4ac4
--- /dev/null
+++ b/src/components/laos/WorkerDetailsDrawer.js
@@ -0,0 +1,225 @@
+import React, { useState, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleXmark, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import axios from 'axios'
+
+const WorkerDetailsDrawer = ({ isOpen, onClose, workerId, getfapi, gettoken }) => {
+ const [workerData, setWorkerData] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [imageLoading, setImageLoading] = useState(true)
+
+ const workerTypeMapping = {
+ t: 'ไทย',
+ m: 'พม่า',
+ l: 'ลาว',
+ c: 'กัมพูชา',
+ // Add more mappings as needed
+ }
+
+ const getBackgroundClass = workpositionId => {
+ switch (workpositionId) {
+ case 'แม่บ้านทั่วไป':
+ return 'text-green-700'
+ case 'พี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'ดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านพี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'กรรมกร':
+ return 'text-blue-500'
+ case 'พ่อบ้านทั่วไป':
+ return 'text-blue-500'
+ case '-':
+ return 'text-black'
+ // Add more cases as needed
+ default:
+ return 'text-black' // Default to no background color
+ }
+ }
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ setLoading(true)
+
+ const response = await axios.get(
+ `${getfapi}/api/i_worker?token=${gettoken}&data_id=${workerId}`,
+ )
+
+ const data = response.data
+ const firstWorker = Array.isArray(data) ? data[0] : data
+
+ setWorkerData(firstWorker)
+ setLoading(false)
+ } catch (error) {
+ console.error('Error fetching worker data:', error)
+ setLoading(false)
+ }
+ }
+
+ if (isOpen && workerId) {
+ fetchData()
+ }
+ }, [isOpen, workerId])
+
+ return (
+
+ {/* Drawer content */}
+
+ {/* Drawer header */}
+
+
+ ทะเบียนย่อ {workerId}
+
+
+
+
+ {loading ? (
+
+ ) : (
+ <>
+ {workerData ? (
+ <>
+
+ {imageLoading && (
+
+ )}
+ 
setImageLoading(false)} // Set loading to false when the image is loaded
+ />
+
+
+
+
+ {
+ workerTypeMapping[
+ workerData.worker_type
+ ]
+ }
+
+ {workerData.worker_nationality} /{' '}
+ {workerData.worker_race}
+
+
+
+
+ {workerData.worker_fullname}
+
+
+ {workerData.worker_nickname}
+ {workerData.worker_namelist === 1 ? (
+
+ ) : null}
+
+
+
ประเภทงาน
+
+
+ {workerData.workposition_id1 && (
+ -
+ {workerData.workposition_id1}
+
+ )}
+ {workerData.workposition_id2 && (
+ -
+ {workerData.workposition_id2}
+
+ )}
+ {workerData.workposition_id3 && (
+ -
+ {workerData.workposition_id3}
+
+ )}
+ {workerData.workposition_id4 && (
+ -
+ {workerData.workposition_id4}
+
+ )}
+
+
+
+
+
+
+
+ ) : workerData === null ? (
+
Error fetching data. Please try again later.
+ ) : (
+
+ )}
+
+ )}
+
+
+ )
+}
+
+export default WorkerDetailsDrawer
diff --git a/src/components/online/Pagination.js b/src/components/online/Pagination.js
new file mode 100644
index 00000000..758fa991
--- /dev/null
+++ b/src/components/online/Pagination.js
@@ -0,0 +1,55 @@
+// Pagination.jsx
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons';
+
+const Pagination = ({
+ currentPage,
+ lastPage,
+ handlePrevPage,
+ handleNextPage,
+ handlePageClick, // Add this prop
+ generatePageNumbers,
+}) => {
+ return (
+
+
+
+
+
+
+ {generatePageNumbers().map((page, index) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/online/SearchFilter.js b/src/components/online/SearchFilter.js
new file mode 100644
index 00000000..91382b5d
--- /dev/null
+++ b/src/components/online/SearchFilter.js
@@ -0,0 +1,637 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch, faTasks } from '@fortawesome/free-solid-svg-icons'
+
+const SearchFilter = ({
+ searchWorkerId,
+ handleSearchWorkerId,
+ handleResetSearch,
+ setSearchWorkerId,
+
+ showOnlyTypeT,
+ showOnlyTypeC,
+ showOnlyTypeM,
+ showOnlyTypeL,
+ setShowOnlyTypeT,
+ setShowOnlyTypeC,
+ setShowOnlyTypeM,
+ setShowOnlyTypeL,
+
+ showOvernightt,
+ showOvernightf,
+ setShowOnlyOvernightt,
+ setShowOnlyOvernightf,
+ selectedStatus,
+ setSelectedStatus,
+ selectedJob,
+ setSelectedJob,
+
+ selectedZone,
+ setSelectedZone,
+
+ selectedOutside,
+ setSelectedOutside,
+}) => {
+ return (
+
+
+
+
+
+
+ {' '}
+ ตั้งค่าการแสดงผล
+
+
+
+
+
+
+
+ setSearchWorkerId(e.target.value)}
+ className="input bg-gray-100 w-full lg:w-80 join-item"
+ />
+
+
+
+
+
+
+ )
+}
+
+export default SearchFilter
diff --git a/src/components/online/WorkerCard.js b/src/components/online/WorkerCard.js
new file mode 100644
index 00000000..d0eb1ef9
--- /dev/null
+++ b/src/components/online/WorkerCard.js
@@ -0,0 +1,210 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+ faCircleCheck,
+ faCirclePause,
+ faFileCircleCheck,
+ faClock,
+ faArrowRightArrowLeft,
+ faPersonCircleExclamation,
+ faUserCheck,
+ faCircleXmark,
+ faQuestion,
+} from '@fortawesome/free-solid-svg-icons'
+
+const WorkerCard = ({
+ item,
+ imageLoading,
+ setImageLoading,
+ handleFreeButtonClick,
+ getBackgroundClass,
+ getFlagUrl,
+ getfapi,
+}) => {
+ const getStatusData = status => {
+ switch (status) {
+ case 'wait':
+ return {
+ styles: 'bg-gray-100 text-gray-500 border-gray-500',
+ icon: faClock,
+ text: 'ว่างงาน',
+ }
+ case 'save':
+ return {
+ styles: 'bg-amber-100 text-amber-500 border-amber-500',
+ icon: faCirclePause,
+ text: 'จอง',
+ }
+ case 'incomplete':
+ return {
+ styles: 'bg-blue-100 text-blue-500 border-blue-500',
+ icon: faFileCircleCheck,
+ text: 'รอทำสัญญา',
+ }
+ case 'woker':
+ return {
+ styles:
+ 'bg-emerald-100 text-emerald-500 border-emerald-500',
+ icon: faCircleCheck,
+ text: 'ได้งานแล้ว',
+ }
+ case 'retry':
+ return {
+ styles: 'bg-purple-100 text-purple-500 border-purple-500',
+ icon: faPersonCircleExclamation,
+ text: 'เคลม',
+ }
+ case 'changepp':
+ return {
+ styles: 'bg-gray-100 text-black border-black',
+ icon: faArrowRightArrowLeft,
+ text: 'เปลี่ยน',
+ }
+ case 'bfprocess':
+ return {
+ styles: 'bg-sky-100 text-sky-500 border-sky-500',
+ icon: faUserCheck,
+ text: 'สพ.แล้ว',
+ }
+ case 'export':
+ return {
+ styles: 'bg-red-100 text-red-500 border-red-500',
+ icon: faCircleXmark,
+ text: 'ห้ามส่งงาน',
+ }
+ default:
+ return {
+ styles: '',
+ icon: faQuestion,
+ text: 'Unknown Status',
+ }
+ }
+ }
+
+ return (
+
+
+
+ {imageLoading && (
+
+ )}
+ setImageLoading(false)}
+ />
+
+ {item.worker_nickname}
+
+
+
+ {getFlagUrl(item.worker_type)}
+
+
+
+
+
+ {item.worker_id}{' '}
+ {item.worker_namelist === 1 ? (
+
+ ) : null}
+
+
+
+ {(() => {
+ const { styles, icon, text } = getStatusData(
+ item.worker_status,
+ )
+ return (
+
+
+ {text}
+
+ )
+ })()}
+
+
+ {item.workposition_id1 && (
+ -
+ {item.workposition_id1}
+
+ )}
+ {item.workposition_id2 && (
+ -
+ {item.workposition_id2}
+
+ )}
+ {item.workposition_id3 && (
+ -
+ {item.workposition_id3}
+
+ )}
+ {item.workposition_id4 && (
+ -
+ {item.workposition_id4}
+
+ )}
+
+
+
+
+
+
+
+
+ )
+}
+
+export default WorkerCard
diff --git a/src/components/online/WorkerDetailsDrawer.js b/src/components/online/WorkerDetailsDrawer.js
new file mode 100644
index 00000000..1718ae47
--- /dev/null
+++ b/src/components/online/WorkerDetailsDrawer.js
@@ -0,0 +1,225 @@
+import React, { useState, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleXmark, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import axios from 'axios'
+
+const WorkerDetailsDrawer = ({ isOpen, onClose, workerId, getfapi, gettoken }) => {
+ const [workerData, setWorkerData] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [imageLoading, setImageLoading] = useState(true)
+
+ const workerTypeMapping = {
+ n: 'รหัส 48',
+ jno: 'รหัส 82 Online',
+ jnw: 'รหัส 82',
+ g: 'รหัส G',
+ // Add more mappings as needed
+ }
+
+ const getBackgroundClass = workpositionId => {
+ switch (workpositionId) {
+ case 'แม่บ้านทั่วไป':
+ return 'text-green-700'
+ case 'พี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'ดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านพี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'กรรมกร':
+ return 'text-blue-500'
+ case 'พ่อบ้านทั่วไป':
+ return 'text-blue-500'
+ case '-':
+ return 'text-black'
+ // Add more cases as needed
+ default:
+ return 'text-black' // Default to no background color
+ }
+ }
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ setLoading(true)
+
+ const response = await axios.get(
+ `${getfapi}/api/i_worker?token=${gettoken}&data_id=${workerId}`,
+ )
+
+ const data = response.data
+ const firstWorker = Array.isArray(data) ? data[0] : data
+
+ setWorkerData(firstWorker)
+ setLoading(false)
+ } catch (error) {
+ console.error('Error fetching worker data:', error)
+ setLoading(false)
+ }
+ }
+
+ if (isOpen && workerId) {
+ fetchData()
+ }
+ }, [isOpen, workerId])
+
+ return (
+
+ {/* Drawer content */}
+
+ {/* Drawer header */}
+
+
+ ทะเบียนย่อ {workerId}
+
+
+
+
+ {loading ? (
+
+ ) : (
+ <>
+ {workerData ? (
+ <>
+
+ {imageLoading && (
+
+ )}
+ setImageLoading(false)} // Set loading to false when the image is loaded
+ />
+
+
+
+
+ {
+ workerTypeMapping[
+ workerData.worker_type
+ ]
+ }
+
+ {workerData.worker_nationality} /{' '}
+ {workerData.worker_race}
+
+
+
+
+ {workerData.worker_fullname}
+
+
+ {workerData.worker_nickname}
+ {workerData.worker_namelist === 1 ? (
+
+ ) : null}
+
+
+
ประเภทงาน
+
+
+ {workerData.workposition_id1 && (
+ -
+ {workerData.workposition_id1}
+
+ )}
+ {workerData.workposition_id2 && (
+ -
+ {workerData.workposition_id2}
+
+ )}
+ {workerData.workposition_id3 && (
+ -
+ {workerData.workposition_id3}
+
+ )}
+ {workerData.workposition_id4 && (
+ -
+ {workerData.workposition_id4}
+
+ )}
+
+
+
+
+
+
+
+ ) : workerData === null ? (
+
Error fetching data. Please try again later.
+ ) : (
+
+ )}
+
+ )}
+
+
+ )
+}
+
+export default WorkerDetailsDrawer
diff --git a/src/components/styles/globals.css b/src/components/styles/globals.css
new file mode 100644
index 00000000..6d6133f5
--- /dev/null
+++ b/src/components/styles/globals.css
@@ -0,0 +1,78 @@
+/* styles/globals.css */
+
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100;200;300;400;500;600;700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+
+.font-1{
+ font-family: 'Anuphan', sans-serif;
+}
+.font-2{
+ font-family: 'Prompt', sans-serif;
+}
+.font-3{
+ font-family: 'Kanit', sans-serif;
+}
+.font-4{
+ font-family: 'Sarabun', sans-serif;
+}
+
+.tooltip:before {
+ font-size: x-small;
+}
+
+.gradient-icon {
+ position: relative;
+ display: inline-block;
+ }
+
+ .gradient-icon:before {
+ content: ' ';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(to right, #ff0000, #0000ff); /* Specify your gradient colors here */
+ clip-path: inset(0 0 0 0); /* Ensure the gradient is clipped to the icon shape */
+ z-index: -1;
+ }
+
+body {
+ font-family: 'Anuphan', sans-serif;
+ }
+
+ button{
+ font-family: 'Prompt', sans-serif;
+ }
+ input{
+ font-family: 'Kanit', sans-serif;
+ font-weight: 500;
+ }
+ nav{
+ font-family: 'Anuphan', sans-serif;
+ }
+
+ .menu-title{
+ font-family: 'Anuphan', sans-serif;
+ font-weight: 700;
+ }
+ ul{
+ font-family: 'Sarabun', sans-serif;
+ font-weight: 800;
+ }
+
+ .badge-gold{
+ color:#ffcc00;
+ background: -webkit-linear-gradient(rgb(255 191 2), rgb(255 150 0));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .badge-danger{
+ color:#ff0000;
+ background: -webkit-linear-gradient(rgb(255, 2, 2), rgb(128, 0, 0));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+/* Rest of your global styles */
+/* ... */
diff --git a/src/hooks/auth.js b/src/hooks/auth.js
index d3eeb48a..4fcb56ac 100644
--- a/src/hooks/auth.js
+++ b/src/hooks/auth.js
@@ -1,11 +1,11 @@
import useSWR from 'swr'
import axios from '@/lib/axios'
-import { useEffect } from 'react'
+import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
const router = useRouter()
-
+ const [loading, setLoading] = useState(true)
const { data: user, error, mutate } = useSWR('/api/user', () =>
axios
.get('/api/user')
@@ -13,7 +13,7 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
.catch(error => {
if (error.response.status !== 409) throw error
- router.push('/verify-email')
+ router.push('/login')
}),
)
@@ -101,11 +101,13 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
useEffect(() => {
if (middleware === 'guest' && redirectIfAuthenticated && user)
router.push(redirectIfAuthenticated)
+ setLoading(false)
if (
window.location.pathname === '/verify-email' &&
user?.email_verified_at
)
router.push(redirectIfAuthenticated)
+ setLoading(false)
if (middleware === 'auth' && error) logout()
}, [user, error])
@@ -117,5 +119,6 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
resetPassword,
resendEmailVerification,
logout,
+ loading,
}
}
diff --git a/src/lib/axios.js b/src/lib/axios.js
index 58e109c4..8e7d31af 100644
--- a/src/lib/axios.js
+++ b/src/lib/axios.js
@@ -6,7 +6,7 @@ const axios = Axios.create({
'X-Requested-With': 'XMLHttpRequest',
},
withCredentials: true,
- withXSRFToken: true
+ withXSRFToken: true,
})
export default axios
diff --git a/src/pages/48/info/[id].js b/src/pages/48/info/[id].js
new file mode 100644
index 00000000..9f36eb2b
--- /dev/null
+++ b/src/pages/48/info/[id].js
@@ -0,0 +1,17 @@
+import AppLayout from '@/components/Layouts/AppLayout'
+import React, { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons'
+import axios from 'axios'
+import { useAuth } from '@/hooks/auth'
+
+export default function Page() {
+ const router = useRouter()
+
+ return (
+
+ Post: {router.query.id}
+
+ )
+}
diff --git a/src/pages/48/worker.js b/src/pages/48/worker.js
new file mode 100644
index 00000000..b1319a05
--- /dev/null
+++ b/src/pages/48/worker.js
@@ -0,0 +1,325 @@
+import AppLayout from '@/components/Layouts/AppLayout'
+import React, { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+ faCaretRight,
+ faCaretLeft,
+ faCircleCheck,
+ faQuestion,
+ faCirclePause,
+ faFileCircleCheck,
+ faClock,
+ faArrowRightArrowLeft,
+ faPersonCircleExclamation,
+ faUserCheck,
+} from '@fortawesome/free-solid-svg-icons'
+import SearchFilter from '@/components/48/SearchFilter'
+import Pagination from '@/components/48/Pagination'
+import WorkerCard from '@/components/48/WorkerCard'
+import WorkerDetailsDrawer from '@/components/48/WorkerDetailsDrawer'
+import axios from 'axios'
+import { useAuth } from '@/hooks/auth'
+
+
+export default function Home() {
+ const router = useRouter()
+ const [data, setData] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [lastPage, setLastPage] = useState(1)
+ const [imageLoading, setImageLoading] = useState(true)
+ const [drawerOpen, setDrawerOpen] = useState(false)
+ const [selectedWorkerId, setSelectedWorkerId] = useState(null)
+ const [searchWorkerId, setSearchWorkerId] = useState('')
+ const [resetSearch, setResetSearch] = useState(false)
+ const [showOnlyTypeT, setShowOnlyTypeT] = useState(false)
+ const [showOnlyTypeC, setShowOnlyTypeC] = useState(false)
+ const [showOnlyTypeM, setShowOnlyTypeM] = useState(false)
+ const [showOnlyTypeL, setShowOnlyTypeL] = useState(false)
+ const [showOvernightt, setShowOnlyOvernightt] = useState(false)
+ const [showOvernightf, setShowOnlyOvernightf] = useState(false)
+ const [selectedStatus, setSelectedStatus] = useState(null)
+ const [selectedJob, setSelectedJob] = useState(null)
+ const [selectedZone, setSelectedZone] = useState(null)
+ const [selectedOutside, setSelectedOutside] = useState(null)
+ const [filteredData, setFilteredData] = useState([])
+ const { user } = useAuth({ middleware: 'auth' })
+
+const token =`1amwall0ck`
+const f_url = `https://beta.wb.in.th`
+const getname = `48`
+
+ const fetchData = async () => {
+ try {
+ setLoading(true)
+
+ let apiUrl = `${f_url}/api/worker?token=${token}&page=${currentPage}`
+
+ if (searchWorkerId && !resetSearch) {
+ apiUrl += `&search=${searchWorkerId}`
+ }
+
+ if (selectedStatus !== null) {
+ apiUrl += `&status=${selectedStatus}`
+ }
+
+ if (selectedJob !== null) {
+ apiUrl += `&job=${selectedJob}`
+ }
+
+ if (selectedZone !== null) {
+ apiUrl += `&zone=${selectedZone}`
+ }
+
+ if (selectedOutside !== null) {
+ apiUrl += `&outside=${selectedOutside}`
+ }
+
+ const response = await axios.get(apiUrl)
+
+ const result = response.data
+
+ // Check if result has last_page before using it
+ if ('last_page' in result) {
+ setLastPage(result.last_page)
+ }
+
+ if (resetSearch) {
+ setSearchWorkerId('')
+ }
+ setData(result.data)
+ setLoading(false)
+ setResetSearch(false)
+ } catch (error) {
+ console.error('Error fetching data:', error)
+ setLoading(false)
+ } finally {
+ setResetSearch(false) // Move this line to the finally block to ensure it's always reset
+ }
+ }
+
+ useEffect(() => {
+ if (user?.type48 !== 1) {
+ router.push('/');
+ }
+ fetchData()
+ }, [currentPage, lastPage, selectedStatus, selectedJob, selectedZone, selectedOutside])
+
+ useEffect(() => {
+ if (data) {
+ let filtered = data
+
+ // Filter by worker type
+ if (
+ showOnlyTypeT ||
+ showOnlyTypeC ||
+ showOnlyTypeM ||
+ showOnlyTypeL
+ ) {
+ filtered = filtered.filter(item => {
+ if (showOnlyTypeT && item.worker_type === 't') return true
+ if (showOnlyTypeC && item.worker_type === 'c') return true
+ if (showOnlyTypeM && item.worker_type === 'm') return true
+ if (showOnlyTypeL && item.worker_type === 'l') return true
+ return false
+ })
+ }
+
+ // Filter by overnight
+ if (showOvernightt || showOvernightf) {
+ filtered = filtered.filter(item => {
+ if (showOvernightt && item.worker_overnight === '2')
+ return true
+ if (showOvernightf && item.worker_overnight === '1')
+ return true
+ return false
+ })
+ }
+
+ setFilteredData(filtered)
+ }
+ }, [
+ data,
+ showOnlyTypeT,
+ showOnlyTypeC,
+ showOnlyTypeM,
+ showOnlyTypeL,
+ showOvernightt,
+ showOvernightf,
+ ])
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ fetchData()
+ }, 1 * 60 * 1000)
+
+ return () => clearInterval(intervalId)
+ }, [currentPage, lastPage, searchWorkerId, selectedStatus, selectedJob, selectedZone, selectedOutside])
+
+ const handleNextPage = () => {
+ // Increment the current page when loading next page
+ setCurrentPage(prevPage => prevPage + 1)
+ }
+
+ const handlePrevPage = () => {
+ // Decrement the current page when loading previous page, ensuring it doesn't go below 1
+ setCurrentPage(prevPage => Math.max(prevPage - 1, 1))
+ }
+
+ const generatePageNumbers = () => {
+ const maxButtons = 5 // Maximum number of pagination buttons to show
+ const pages = []
+ let startPage = Math.max(currentPage - Math.floor(maxButtons / 2), 1)
+ let endPage = startPage + maxButtons - 1
+
+ // Ensure that the last page is not exceeded
+ if (endPage > lastPage) {
+ endPage = lastPage
+ startPage = Math.max(endPage - maxButtons + 1, 1)
+ }
+
+ for (let i = startPage; i <= endPage; i++) {
+ pages.push(i)
+ }
+
+ return pages
+ }
+
+ const handleFreeButtonClick = workerId => {
+ // Set the worker ID and open the drawer
+ setSelectedWorkerId(workerId)
+ setDrawerOpen(true)
+ }
+
+ const getBackgroundClass = workpositionId => {
+ switch (workpositionId) {
+ case 'แม่บ้านทั่วไป':
+ return 'text-green-700'
+ case 'พี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'ดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านพี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'กรรมกร':
+ return 'text-blue-500'
+ case 'พ่อบ้านทั่วไป':
+ return 'text-blue-500'
+ case '-':
+ return 'text-black'
+ // Add more cases as needed
+ default:
+ return 'text-black' // Default to no background color
+ }
+ }
+
+ const getFlagUrl = nationality => {
+ switch (nationality) {
+ case 'm':
+ return '/flag/myanmar.svg'
+ case 't':
+ return '/flag/thai.svg'
+ case 'c':
+ return '/flag/cambodia.svg'
+ case 'l':
+ return '/flag/laos.svg'
+ default:
+ return '/flag/blank.svg'
+ }
+ }
+
+ const handleSearchWorkerId = workerId => {
+ fetchData()
+ }
+
+ const handleResetSearch = () => {
+ setSearchWorkerId('')
+ setResetSearch(true)
+ fetchData()
+ setCurrentPage(1)
+ setResetSearch(false)
+ }
+
+ return (
+
+
+ {loading ? (
+
+
+ {[...Array(30)].map((_, index) => (
+
+ ))}
+
+
+
+ {filteredData.map(item => (
+
+ ))}
+
+
+ )
+}
diff --git a/src/pages/82/worker.js b/src/pages/82/worker.js
new file mode 100644
index 00000000..3cf89b96
--- /dev/null
+++ b/src/pages/82/worker.js
@@ -0,0 +1,322 @@
+import AppLayout from '@/components/Layouts/AppLayout'
+import React, { useEffect, useState, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+ faCaretRight,
+ faCaretLeft,
+ faCircleCheck,
+ faQuestion,
+ faCirclePause,
+ faFileCircleCheck,
+ faClock,
+ faArrowRightArrowLeft,
+ faPersonCircleExclamation,
+ faUserCheck,
+} from '@fortawesome/free-solid-svg-icons'
+import SearchFilter from '@/components/82/SearchFilter'
+import Pagination from '@/components/82/Pagination'
+import WorkerCard from '@/components/82/WorkerCard'
+import WorkerDetailsDrawer from '@/components/82/WorkerDetailsDrawer'
+import axios from 'axios'
+import { useAuth } from '@/hooks/auth'
+import { useRouter } from 'next/router'
+
+export default function Home() {
+ const [data, setData] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [lastPage, setLastPage] = useState(1)
+ const [imageLoading, setImageLoading] = useState(true)
+ const [drawerOpen, setDrawerOpen] = useState(false)
+ const [selectedWorkerId, setSelectedWorkerId] = useState(null)
+ const [searchWorkerId, setSearchWorkerId] = useState('')
+ const [resetSearch, setResetSearch] = useState(false)
+ const [showOnlyTypeT, setShowOnlyTypeT] = useState(false)
+ const [showOnlyTypeC, setShowOnlyTypeC] = useState(false)
+ const [showOnlyTypeM, setShowOnlyTypeM] = useState(false)
+ const [showOnlyTypeL, setShowOnlyTypeL] = useState(false)
+ const [showOvernightt, setShowOnlyOvernightt] = useState(false)
+ const [showOvernightf, setShowOnlyOvernightf] = useState(false)
+ const [selectedStatus, setSelectedStatus] = useState(null)
+ const [selectedJob, setSelectedJob] = useState(null)
+ const [selectedZone, setSelectedZone] = useState(null)
+ const [selectedOutside, setSelectedOutside] = useState(null)
+ const [filteredData, setFilteredData] = useState([])
+ const { user } = useAuth({ middleware: 'auth' })
+ const router = useRouter()
+
+const token =`1amwall0ck`
+const f_url = `https://dd.wb.in.th`
+
+ const fetchData = async () => {
+ try {
+ setLoading(true)
+
+ let apiUrl = `${f_url}/api/worker?token=${token}&page=${currentPage}`
+
+ if (searchWorkerId && !resetSearch) {
+ apiUrl += `&search=${searchWorkerId}`
+ }
+
+ if (selectedStatus !== null) {
+ apiUrl += `&status=${selectedStatus}`
+ }
+
+ if (selectedJob !== null) {
+ apiUrl += `&job=${selectedJob}`
+ }
+
+ if (selectedZone !== null) {
+ apiUrl += `&zone=${selectedZone}`
+ }
+
+ if (selectedOutside !== null) {
+ apiUrl += `&outside=${selectedOutside}`
+ }
+
+ const response = await axios.get(apiUrl)
+
+ const result = response.data
+
+ // Check if result has last_page before using it
+ if ('last_page' in result) {
+ setLastPage(result.last_page)
+ }
+
+ if (resetSearch) {
+ setSearchWorkerId('')
+ }
+ setData(result.data)
+ setLoading(false)
+ setResetSearch(false)
+ } catch (error) {
+ console.error('Error fetching data:', error)
+ setLoading(false)
+ } finally {
+ setResetSearch(false) // Move this line to the finally block to ensure it's always reset
+ }
+ }
+
+ useEffect(() => {
+ if (user?.type82 !== 1) {
+ router.push('/');
+ }
+ fetchData()
+ }, [currentPage, lastPage, selectedStatus, selectedJob, selectedZone, selectedOutside])
+
+ useEffect(() => {
+ if (data) {
+ let filtered = data
+
+ // Filter by worker type
+ if (
+ showOnlyTypeT ||
+ showOnlyTypeC ||
+ showOnlyTypeM ||
+ showOnlyTypeL
+ ) {
+ filtered = filtered.filter(item => {
+ if (showOnlyTypeT && item.worker_type === 't') return true
+ if (showOnlyTypeC && item.worker_type === 'c') return true
+ if (showOnlyTypeM && item.worker_type === 'm') return true
+ if (showOnlyTypeL && item.worker_type === 'l') return true
+ return false
+ })
+ }
+
+ // Filter by overnight
+ if (showOvernightt || showOvernightf) {
+ filtered = filtered.filter(item => {
+ if (showOvernightt && item.worker_overnight === '2')
+ return true
+ if (showOvernightf && item.worker_overnight === '1')
+ return true
+ return false
+ })
+ }
+
+ setFilteredData(filtered)
+ }
+ }, [
+ data,
+ showOnlyTypeT,
+ showOnlyTypeC,
+ showOnlyTypeM,
+ showOnlyTypeL,
+ showOvernightt,
+ showOvernightf,
+ ])
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ fetchData()
+ }, 1 * 60 * 1000)
+
+ return () => clearInterval(intervalId)
+ }, [currentPage, lastPage, searchWorkerId, selectedStatus, selectedJob, selectedZone, selectedOutside])
+
+ const handleNextPage = () => {
+ // Increment the current page when loading next page
+ setCurrentPage(prevPage => prevPage + 1)
+ }
+
+ const handlePrevPage = () => {
+ // Decrement the current page when loading previous page, ensuring it doesn't go below 1
+ setCurrentPage(prevPage => Math.max(prevPage - 1, 1))
+ }
+
+ const generatePageNumbers = () => {
+ const maxButtons = 5 // Maximum number of pagination buttons to show
+ const pages = []
+ let startPage = Math.max(currentPage - Math.floor(maxButtons / 2), 1)
+ let endPage = startPage + maxButtons - 1
+
+ // Ensure that the last page is not exceeded
+ if (endPage > lastPage) {
+ endPage = lastPage
+ startPage = Math.max(endPage - maxButtons + 1, 1)
+ }
+
+ for (let i = startPage; i <= endPage; i++) {
+ pages.push(i)
+ }
+
+ return pages
+ }
+
+ const handleFreeButtonClick = workerId => {
+ // Set the worker ID and open the drawer
+ setSelectedWorkerId(workerId)
+ setDrawerOpen(true)
+ }
+
+ const getBackgroundClass = workpositionId => {
+ switch (workpositionId) {
+ case 'แม่บ้านทั่วไป':
+ return 'text-green-700'
+ case 'พี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'ดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านพี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'กรรมกร':
+ return 'text-blue-500'
+ case 'พ่อบ้านทั่วไป':
+ return 'text-blue-500'
+ case '-':
+ return 'text-black'
+ // Add more cases as needed
+ default:
+ return 'text-black' // Default to no background color
+ }
+ }
+
+ const getFlagUrl = nationality => {
+ switch (nationality) {
+ case 'm':
+ return '/flag/myanmar.svg'
+ case 't':
+ return '/flag/thai.svg'
+ case 'c':
+ return '/flag/cambodia.svg'
+ case 'l':
+ return '/flag/laos.svg'
+ default:
+ return '/flag/blank.svg'
+ }
+ }
+
+ const handleSearchWorkerId = workerId => {
+ fetchData()
+ }
+
+ const handleResetSearch = () => {
+ setSearchWorkerId('')
+ setResetSearch(true)
+ fetchData()
+ setCurrentPage(1)
+ setResetSearch(false)
+ }
+
+ return (
+
+
+ {loading ? (
+
+
+ {[...Array(30)].map((_, index) => (
+
+ ))}
+
+
+
+ {filteredData.map(item => (
+
+ ))}
+
+
+ )
+}
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 6257f033..b62cbbf7 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,5 +1,8 @@
import 'tailwindcss/tailwind.css'
+import 'components/styles/globals.css'
-const App = ({ Component, pageProps }) =>
+const App = ({ Component, pageProps }) => {
+ return
+}
export default App
diff --git a/src/pages/_document.js b/src/pages/_document.js
deleted file mode 100644
index 371885e2..00000000
--- a/src/pages/_document.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-
-class MyDocument extends Document {
- static async getInitialProps(ctx) {
- const initialProps = await Document.getInitialProps(ctx)
- return { ...initialProps }
- }
-
- render() {
- return (
-
-
-
-
-
-
-
-
-
- )
- }
-}
-
-export default MyDocument
diff --git a/src/pages/dashboard.js b/src/pages/dashboard.js
index de06c7f2..7f4b1f00 100644
--- a/src/pages/dashboard.js
+++ b/src/pages/dashboard.js
@@ -1,29 +1,180 @@
import AppLayout from '@/components/Layouts/AppLayout'
-import Head from 'next/head'
+import React, { useEffect, useState, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faServer } from '@fortawesome/free-solid-svg-icons'
+import axios from 'axios'
+
+export default function dashboard() {
+ const [databeta, setDataBeta] = useState(null)
+ const [datadd, setDataDD] = useState(null)
+ const [datalaos, setDataLaos] = useState(null)
+ const [datathai, setDataThai] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [lastPage, setLastPage] = useState(1)
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ setLoading(true)
+
+ const response1 = await axios.get(
+ `https://beta.wb.in.th/api/status_sv`,
+ )
+ const result1 = response1.data
+ setDataBeta(result1)
+
+ const response2 = await axios.get(
+ `https://dd.wb.in.th/api/status_sv`,
+ )
+ const result2 = response2.data
+ setDataDD(result2)
+
+ const response3 = await axios.get(
+ `https://laos.wb.in.th/api/status_sv`,
+ )
+ const result3 = response3.data
+ setDataLaos(result3)
+
+ const response4 = await axios.get(
+ `https://thai.wb.in.th/api/status_sv`,
+ )
+ const result4 = response4.data
+ setDataThai(result4)
+
+ setLoading(false)
+ } catch (error) {
+ console.error('Error fetching data:', error)
+ setLoading(false)
+ }
+ }
+
+ fetchData()
+ }, [])
-const Dashboard = () => {
return (
-
- Dashboard
-
- }>
-
- Laravel - Dashboard
-
-
-
-
-
-
- You're logged in!
-
+
+ {loading ? (
+
-
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+ ฐานข้อมูล 48
+
+
+ {databeta}
+
+
+ ทั้งหมด : 05 Record
+
+
+
+
+
+
+
+
+ ฐานข้อมูล 82
+
+
+ {datadd}
+
+
+ ทั้งหมด : 05 Record
+
+
+
+
+
+
+
+
+ ฐานข้อมูล Laos
+
+
+ {datalaos}
+
+
+ ทั้งหมด : 05 Record
+
+
+
+
+
+
+
+
+ ฐานข้อมูล ThaiOnline
+
+
+ {datathai}
+
+
+ ทั้งหมด : 05 Record
+
+
+
+
+
+
+
+
+ Welcome Back
+
+
+ ระบบจัดการพนักงานและองค์กรภายใน
+
+
+
+
+
+
+
+
+ ข่าวสาร & อัพเดทล่าสุด
+
+
+
+ ระบบนี้จัดทำขึ้นเพื่อเป็นระบบกลางในการจัดการคนงานในระบบเก่า โดยไม่ต้องเข้า-ออกหลายหน้าต่างหลายระบบ
+ สามารถใช้งานได้ทุกระบบในระบบเดียว
+ ขนาดนี้ v3 อยู่ในช่วงทดสอบระบบการใช้งานจริง อาจมีบัคหรือทำงานผิดพลาดบ้าง
+ ในระหว่างนี้สามารถใช้งานได้ทั้งระบบ v2 และระบบ v3 ตามปกติครับ
+ หากบาง Function ใช้งานไม่ได้โปรดแจ้งผู้พัฒนาเพื่อแก้ไข และกลับไปใช้ v2 ก่อน
+
+ {/*
+ UPDATE NEW!
+
*/}
+
+
+
+
+ )}
)
}
-
-export default Dashboard
diff --git a/src/pages/index.js b/src/pages/index.js
index e1bbc839..b282175b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,293 +1,55 @@
-import Head from 'next/head'
-import Link from 'next/link'
import { useAuth } from '@/hooks/auth'
-
-export default function Home() {
- const { user } = useAuth({ middleware: 'guest' })
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGear } from '@fortawesome/free-solid-svg-icons'
+
+const Home = () => {
+ const { user } = useAuth({ middleware: 'auth' })
+ const router = useRouter()
+ useEffect(() => {
+ if (!user) {
+ router.push('/login')
+ }else{
+ router.push('/dashboard')
+ }
+ }, [])
return (
- <>
+
-
Laravel
+
JS-System v3
-
-
-
- {user ? (
-
- Dashboard
-
- ) : (
- <>
-
- Login
-
-
-
- Register
-
-
- )}
-
-
-
-
-
+
+
+
+
+ {' '}
+ JS-System
+
+ v3
+
+
+
+ ระบบจัดการพนักงานและองค์กรภายใน
+
-
-
-
-
-
-
-
-
- Laravel has wonderful, thorough
- documentation covering every aspect of
- the framework. Whether you are new to
- the framework or have previous
- experience with Laravel, we recommend
- reading all of the documentation from
- beginning to end.
-
-
-
-
-
-
-
-
-
- Laracasts offers thousands of video
- tutorials on Laravel, PHP, and
- JavaScript development. Check them out,
- see for yourself, and massively level up
- your development skills in the process.
-
-
-
-
-
-
-
-
-
- Laravel News is a community driven
- portal and newsletter aggregating all of
- the latest and most important news in
- the Laravel ecosystem, including new
- package releases and tutorials.
-
-
-
-
-
-
-
-
-
- Vibrant Ecosystem
-
-
-
-
-
- Laravel's robust library of first-party
- tools and libraries, such as{' '}
-
- Forge
-
- ,{' '}
-
- Vapor
-
- ,{' '}
-
- Nova
-
- , and{' '}
-
- Envoyer
- {' '}
- help you take your projects to the next
- level. Pair them with powerful open
- source libraries like{' '}
-
- Cashier
-
- ,{' '}
-
- Dusk
-
- ,{' '}
-
- Echo
-
- ,{' '}
-
- Horizon
-
- ,{' '}
-
- Sanctum
-
- ,{' '}
-
- Telescope
-
- , and more.
-
-
-
-
-
-
-
-
-
-
- Laravel Breeze + Next.js template
-
+
+
+
+
+ กำลังดาวน์โหลดข้อมูล กรุณารอสักครู่...
-
+
)
}
+
+export default Home
diff --git a/src/pages/laos/worker.js b/src/pages/laos/worker.js
new file mode 100644
index 00000000..fa6ab3b1
--- /dev/null
+++ b/src/pages/laos/worker.js
@@ -0,0 +1,322 @@
+import AppLayout from '@/components/Layouts/AppLayout'
+import React, { useEffect, useState, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+ faCaretRight,
+ faCaretLeft,
+ faCircleCheck,
+ faQuestion,
+ faCirclePause,
+ faFileCircleCheck,
+ faClock,
+ faArrowRightArrowLeft,
+ faPersonCircleExclamation,
+ faUserCheck,
+} from '@fortawesome/free-solid-svg-icons'
+import SearchFilter from '@/components/laos/SearchFilter'
+import Pagination from '@/components/laos/Pagination'
+import WorkerCard from '@/components/laos/WorkerCard'
+import WorkerDetailsDrawer from '@/components/laos/WorkerDetailsDrawer'
+import axios from 'axios'
+import { useAuth } from '@/hooks/auth'
+import { useRouter } from 'next/router'
+
+export default function Home() {
+ const [data, setData] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [lastPage, setLastPage] = useState(1)
+ const [imageLoading, setImageLoading] = useState(true)
+ const [drawerOpen, setDrawerOpen] = useState(false)
+ const [selectedWorkerId, setSelectedWorkerId] = useState(null)
+ const [searchWorkerId, setSearchWorkerId] = useState('')
+ const [resetSearch, setResetSearch] = useState(false)
+ const [showOnlyTypeT, setShowOnlyTypeT] = useState(false)
+ const [showOnlyTypeC, setShowOnlyTypeC] = useState(false)
+ const [showOnlyTypeM, setShowOnlyTypeM] = useState(false)
+ const [showOnlyTypeL, setShowOnlyTypeL] = useState(false)
+ const [showOvernightt, setShowOnlyOvernightt] = useState(false)
+ const [showOvernightf, setShowOnlyOvernightf] = useState(false)
+ const [selectedStatus, setSelectedStatus] = useState(null)
+ const [selectedJob, setSelectedJob] = useState(null)
+ const [selectedZone, setSelectedZone] = useState(null)
+ const [selectedOutside, setSelectedOutside] = useState(null)
+ const [filteredData, setFilteredData] = useState([])
+ const { user } = useAuth({ middleware: 'auth' })
+ const router = useRouter()
+
+const token =`1amwall0ck`
+const f_url = `https://laos.wb.in.th`
+
+ const fetchData = async () => {
+ try {
+ setLoading(true)
+
+ let apiUrl = `${f_url}/api/worker?token=${token}&page=${currentPage}`
+
+ if (searchWorkerId && !resetSearch) {
+ apiUrl += `&search=${searchWorkerId}`
+ }
+
+ if (selectedStatus !== null) {
+ apiUrl += `&status=${selectedStatus}`
+ }
+
+ if (selectedJob !== null) {
+ apiUrl += `&job=${selectedJob}`
+ }
+
+ if (selectedZone !== null) {
+ apiUrl += `&zone=${selectedZone}`
+ }
+
+ if (selectedOutside !== null) {
+ apiUrl += `&outside=${selectedOutside}`
+ }
+
+ const response = await axios.get(apiUrl)
+
+ const result = response.data
+
+ // Check if result has last_page before using it
+ if ('last_page' in result) {
+ setLastPage(result.last_page)
+ }
+
+ if (resetSearch) {
+ setSearchWorkerId('')
+ }
+ setData(result.data)
+ setLoading(false)
+ setResetSearch(false)
+ } catch (error) {
+ console.error('Error fetching data:', error)
+ setLoading(false)
+ } finally {
+ setResetSearch(false) // Move this line to the finally block to ensure it's always reset
+ }
+ }
+
+ useEffect(() => {
+ if (user?.typelaos !== 1) {
+ router.push('/');
+ }
+ fetchData()
+ }, [currentPage, lastPage, selectedStatus, selectedJob, selectedZone, selectedOutside])
+
+ useEffect(() => {
+ if (data) {
+ let filtered = data
+
+ // Filter by worker type
+ if (
+ showOnlyTypeT ||
+ showOnlyTypeC ||
+ showOnlyTypeM ||
+ showOnlyTypeL
+ ) {
+ filtered = filtered.filter(item => {
+ if (showOnlyTypeT && item.worker_type === 't') return true
+ if (showOnlyTypeC && item.worker_type === 'c') return true
+ if (showOnlyTypeM && item.worker_type === 'm') return true
+ if (showOnlyTypeL && item.worker_type === 'l') return true
+ return false
+ })
+ }
+
+ // Filter by overnight
+ if (showOvernightt || showOvernightf) {
+ filtered = filtered.filter(item => {
+ if (showOvernightt && item.worker_overnight === '2')
+ return true
+ if (showOvernightf && item.worker_overnight === '1')
+ return true
+ return false
+ })
+ }
+
+ setFilteredData(filtered)
+ }
+ }, [
+ data,
+ showOnlyTypeT,
+ showOnlyTypeC,
+ showOnlyTypeM,
+ showOnlyTypeL,
+ showOvernightt,
+ showOvernightf,
+ ])
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ fetchData()
+ }, 1 * 60 * 1000)
+
+ return () => clearInterval(intervalId)
+ }, [currentPage, lastPage, searchWorkerId, selectedStatus, selectedJob, selectedZone, selectedOutside])
+
+ const handleNextPage = () => {
+ // Increment the current page when loading next page
+ setCurrentPage(prevPage => prevPage + 1)
+ }
+
+ const handlePrevPage = () => {
+ // Decrement the current page when loading previous page, ensuring it doesn't go below 1
+ setCurrentPage(prevPage => Math.max(prevPage - 1, 1))
+ }
+
+ const generatePageNumbers = () => {
+ const maxButtons = 5 // Maximum number of pagination buttons to show
+ const pages = []
+ let startPage = Math.max(currentPage - Math.floor(maxButtons / 2), 1)
+ let endPage = startPage + maxButtons - 1
+
+ // Ensure that the last page is not exceeded
+ if (endPage > lastPage) {
+ endPage = lastPage
+ startPage = Math.max(endPage - maxButtons + 1, 1)
+ }
+
+ for (let i = startPage; i <= endPage; i++) {
+ pages.push(i)
+ }
+
+ return pages
+ }
+
+ const handleFreeButtonClick = workerId => {
+ // Set the worker ID and open the drawer
+ setSelectedWorkerId(workerId)
+ setDrawerOpen(true)
+ }
+
+ const getBackgroundClass = workpositionId => {
+ switch (workpositionId) {
+ case 'แม่บ้านทั่วไป':
+ return 'text-green-700'
+ case 'พี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'ดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านดูแลผู้สูงอายุ':
+ return 'text-red-600'
+ case 'แม่บ้านพี่เลี้ยงน้อง':
+ return 'text-orange-500'
+ case 'กรรมกร':
+ return 'text-blue-500'
+ case 'พ่อบ้านทั่วไป':
+ return 'text-blue-500'
+ case '-':
+ return 'text-black'
+ // Add more cases as needed
+ default:
+ return 'text-black' // Default to no background color
+ }
+ }
+
+ const getFlagUrl = nationality => {
+ switch (nationality) {
+ case 'm':
+ return '/flag/myanmar.svg'
+ case 't':
+ return '/flag/thai.svg'
+ case 'c':
+ return '/flag/cambodia.svg'
+ case 'l':
+ return '/flag/laos.svg'
+ default:
+ return '/flag/blank.svg'
+ }
+ }
+
+ const handleSearchWorkerId = workerId => {
+ fetchData()
+ }
+
+ const handleResetSearch = () => {
+ setSearchWorkerId('')
+ setResetSearch(true)
+ fetchData()
+ setCurrentPage(1)
+ setResetSearch(false)
+ }
+
+ return (
+
+
+ {loading ? (
+
+
+ {[...Array(30)].map((_, index) => (
+
+ ))}
+
+
+
+ {filteredData.map(item => (
+
+ ))}
+
+
+ )
+}
diff --git a/src/pages/login.js b/src/pages/login.js
index b4ce88ab..78728a8c 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -1,17 +1,15 @@
-import ApplicationLogo from '@/components/ApplicationLogo'
-import AuthCard from '@/components/AuthCard'
+import React from 'react'
import AuthSessionStatus from '@/components/AuthSessionStatus'
-import Button from '@/components/Button'
-import GuestLayout from '@/components/Layouts/GuestLayout'
-import Input from '@/components/Input'
import InputError from '@/components/InputError'
-import Label from '@/components/Label'
import Link from 'next/link'
import { useAuth } from '@/hooks/auth'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
+import Head from 'next/head'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
-const Login = () => {
+const LoginPage = () => {
const router = useRouter()
const { login } = useAuth({
@@ -19,11 +17,12 @@ const Login = () => {
redirectIfAuthenticated: '/dashboard',
})
- const [email, setEmail] = useState('')
+ const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [shouldRemember, setShouldRemember] = useState(false)
const [errors, setErrors] = useState([])
const [status, setStatus] = useState(null)
+ const [loading, setLoading] = useState(false)
useEffect(() => {
if (router.query.reset?.length > 0 && errors.length === 0) {
@@ -35,99 +34,136 @@ const Login = () => {
const submitForm = async event => {
event.preventDefault()
-
+ setLoading(true)
login({
- email,
+ username,
password,
remember: shouldRemember,
setErrors,
setStatus,
- })
+ }).finally(() => setLoading(false))
}
-
return (
-
-
-
-
- }>
- {/* Session Status */}
-
-
-