updated select response
This commit is contained in:
@@ -1,36 +1,36 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useRouter } from '@/i18n/navigation';
|
||||
import { apiGetFetcher } from '@/lib/fetcher';
|
||||
|
||||
export default function PageSelect() {
|
||||
const t = useTranslations('Select');
|
||||
const router = useRouter();
|
||||
|
||||
const [selectionList, setSelectionList] = useState<{ type: string, list: any[] } | null>(null);
|
||||
const [selectedOption, setSelectedOption] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSelectionList = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
apiGetFetcher({ url: '/api/auth/selections', isNoCache: true }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.data && typeof res.data === 'object' && 'type' in res.data && 'list' in res.data) {
|
||||
setSelectionList(res.data as { type: string, list: any[] });
|
||||
}
|
||||
const fetchSelectionList = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
apiGetFetcher({ url: '/api/auth/selections', isNoCache: true }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.data && typeof res.data === 'object' && 'type' in res.data && 'list' in res.data) {
|
||||
setSelectionList(res.data as { type: string, list: any[] });
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error fetching selection list:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
fetchSelectionList();
|
||||
}, []);
|
||||
const handleSelection = (id: string) => { setSelectedOption(id) };
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error fetching selection list:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => { fetchSelectionList() }, []);
|
||||
|
||||
const handleSelection = (uuid: string) => { setSelectedOption(uuid) };
|
||||
const handleContinue = async () => {
|
||||
if (!selectedOption) return;
|
||||
setIsLoading(true);
|
||||
@@ -41,7 +41,7 @@ export default function PageSelect() {
|
||||
const result = await response.json();
|
||||
if (response.ok && result.status === 200) {
|
||||
console.log('Selection successful, redirecting to venue page');
|
||||
router.push('/venue');
|
||||
if (selectionList?.type === 'employee') { router.push('/office') } else if (selectionList?.type === 'occupant') { router.push('/venue') }
|
||||
} else {
|
||||
console.error('Selection failed:', result.message);
|
||||
alert(`Selection failed: ${result.message || 'Unknown error'}`);
|
||||
@@ -52,231 +52,362 @@ export default function PageSelect() {
|
||||
} finally { setIsLoading(false) }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-cyan-50 p-4 sm:p-6 md:p-8">
|
||||
<div className="max-w-6xl mx-auto w-full h-full flex flex-col">
|
||||
<div className="text-center mb-8 sm:mb-10 mt-4 sm:mt-6">
|
||||
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-2">{t('title')}</h1>
|
||||
<p className="text-base sm:text-lg text-gray-600">{t('description')}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow flex flex-col">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 flex-grow">
|
||||
{selectionList?.list?.map((item: any) => {
|
||||
if (selectionList.type === 'employee') {
|
||||
const staff = item.staff;
|
||||
const department = staff?.duties?.departments;
|
||||
const company = department?.companies;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.uu_id}
|
||||
className={`rounded-2xl p-6 cursor-pointer transition-all duration-300 flex flex-col justify-between h-full shadow-lg border-2 ${selectedOption === item.uu_id
|
||||
? 'bg-indigo-100 border-indigo-500 shadow-indigo-200 transform scale-[1.02]'
|
||||
: 'bg-white/90 border-indigo-100 hover:bg-indigo-50 hover:border-indigo-300 hover:shadow-indigo-100'}`}
|
||||
onClick={() => handleSelection(item.uu_id)}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg mr-4">
|
||||
{staff?.staff_code?.charAt(0) || 'E'}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800">{t('staff')}: {staff?.staff_code || t('employee')}</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-xs text-gray-700">{t('uuid')}:</span>
|
||||
<span className="ml-2 font-mono text-xs text-gray-600">{item?.uu_id}</span>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-gray-100 mt-2">
|
||||
<div className="flex items-center mb-1">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('department')}</span>
|
||||
</div>
|
||||
|
||||
<div className="ml-6 mt-1 space-y-1">
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-16">{t('name')}:</span>
|
||||
<span className="text-sm text-gray-600">{department?.department_name || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-16">{t('code')}:</span>
|
||||
<span className="text-sm text-gray-600">{department?.department_code || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('company')}:</span>
|
||||
<span className="ml-2 text-sm text-gray-600">{company?.public_name || company?.formal_name || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedOption === item.uu_id && (
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (selectionList.type === 'occupant') {
|
||||
const occupantType = item.occupant_types;
|
||||
const buildPart = item.build_parts;
|
||||
const build = buildPart?.build;
|
||||
const enums = buildPart?.api_enum_dropdown_build_parts_part_type_idToapi_enum_dropdown;
|
||||
return (
|
||||
<div
|
||||
key={item.uu_id}
|
||||
className={`rounded-2xl p-6 cursor-pointer transition-all duration-300 flex flex-col justify-between h-full shadow-lg border-2 ${selectedOption === item.uu_id
|
||||
? 'bg-indigo-100 border-indigo-500 shadow-indigo-200 transform scale-[1.02]'
|
||||
: 'bg-white/90 border-indigo-100 hover:bg-indigo-50 hover:border-indigo-300 hover:shadow-indigo-100'}`}
|
||||
onClick={() => handleSelection(item.uu_id)}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg mr-4">
|
||||
{occupantType?.occupant_code?.charAt(0) || 'O'}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800">{t('occupant_type')}: {occupantType?.occupant_type}</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-xs text-gray-700">{t('uuid')}:</span>
|
||||
<span className="ml-2 font-mono text-xs text-gray-600">{item?.uu_id}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('occupant_code')}:</span>
|
||||
<span className="ml-2 font-semibold text-indigo-600">{occupantType?.occupant_code}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('building')}:</span>
|
||||
<span className="ml-2 text-gray-600">{build?.build_name || 'Building'}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('type')}:</span>
|
||||
<span className="ml-2 text-gray-600">{enums?.value}</span>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-gray-100 mt-2">
|
||||
<div className="flex items-center mb-1">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('part_details')}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 ml-6 mt-1">
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-12">{t('code')}:</span>
|
||||
<span className="text-sm text-gray-600">{buildPart?.part_code}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-12">{t('no')}:</span>
|
||||
<span className="text-sm text-gray-600">{buildPart?.part_no}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-12">{t('level')}:</span>
|
||||
<span className="text-sm text-gray-600">{buildPart?.part_level}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-12">{t('status')}:</span>
|
||||
<span className={`text-sm font-medium ${buildPart?.human_livable ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{buildPart?.human_livable ? t('livable') : t('not_livable')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedOption === item.uu_id && (
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.uu_id}
|
||||
className={`rounded-2xl p-6 cursor-pointer transition-all duration-300 flex flex-col justify-between h-full shadow-lg border-2 ${selectedOption === item.uu_id
|
||||
? 'bg-indigo-100 border-indigo-500 shadow-indigo-200 transform scale-[1.02]'
|
||||
: 'bg-white/90 border-indigo-100 hover:bg-indigo-50 hover:border-indigo-300 hover:shadow-indigo-100'}`}
|
||||
onClick={() => handleSelection(item.uu_id)}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg mr-4">
|
||||
{item.uu_id?.charAt(0) || 'S'}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800">{selectionList.type || t('selection')}</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm">{item.uu_id || t('id')}</p>
|
||||
</div>
|
||||
|
||||
{selectedOption === item.uu_id && (
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
if (selectionList) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-cyan-50 p-4 sm:p-6 md:p-8">
|
||||
<div className="max-w-6xl mx-auto w-full h-full flex flex-col">
|
||||
<div className="text-center mb-8 sm:mb-10 mt-4 sm:mt-6">
|
||||
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-2">{t('title')}</h1>
|
||||
<p className="text-base sm:text-lg text-gray-600">{t('description')}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mt-10 flex justify-center">
|
||||
<button
|
||||
className={`px-8 py-4 rounded-xl font-bold text-white transition-all duration-300 text-lg ${selectedOption
|
||||
? 'bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 shadow-lg shadow-indigo-200 hover:shadow-indigo-300 transform hover:scale-105'
|
||||
: 'bg-gray-400 cursor-not-allowed'}`}
|
||||
disabled={!selectedOption || isLoading}
|
||||
onClick={handleContinue}
|
||||
>
|
||||
{isLoading ? t('processing') : selectedOption ? t('continue') : t('select_option')}
|
||||
</button>
|
||||
<div className="flex-grow flex flex-col">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 flex-grow">
|
||||
{selectionList?.list?.map((item: any) => {
|
||||
if (selectionList.type === 'employee') {
|
||||
const staff = item.staff;
|
||||
const department = staff?.duties?.departments;
|
||||
const company = department?.companies;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.uu_id}
|
||||
className={`rounded-2xl p-6 cursor-pointer transition-all duration-300 flex flex-col justify-between h-full shadow-lg border-2 ${selectedOption === item.uu_id
|
||||
? 'bg-indigo-100 border-indigo-500 shadow-indigo-200 transform scale-[1.02]'
|
||||
: 'bg-white/90 border-indigo-100 hover:bg-indigo-50 hover:border-indigo-300 hover:shadow-indigo-100'}`}
|
||||
onClick={() => handleSelection(item.uu_id)}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg mr-4">
|
||||
{staff?.staff_code?.charAt(0) || 'E'}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800">{t('staff')}: {staff?.staff_code || t('employee')}</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-xs text-gray-700">{t('uuid')}:</span>
|
||||
<span className="ml-2 font-mono text-xs text-gray-600">{item?.uu_id}</span>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-gray-100 mt-2">
|
||||
<div className="flex items-center mb-1">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('department')}</span>
|
||||
</div>
|
||||
|
||||
<div className="ml-6 mt-1 space-y-1">
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-16">{t('name')}:</span>
|
||||
<span className="text-sm text-gray-600">{department?.department_name || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-16">{t('code')}:</span>
|
||||
<span className="text-sm text-gray-600">{department?.department_code || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('company')}:</span>
|
||||
<span className="ml-2 text-sm text-gray-600">{company?.public_name || company?.formal_name || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedOption === item.uu_id && (
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (selectionList.type === 'occupant') {
|
||||
const occupantType = item.occupant_types;
|
||||
const buildPart = item.build_parts;
|
||||
const build = buildPart?.build;
|
||||
const enums = buildPart?.api_enum_dropdown_build_parts_part_type_idToapi_enum_dropdown;
|
||||
return (
|
||||
<div
|
||||
key={item.uu_id}
|
||||
className={`rounded-2xl p-6 cursor-pointer transition-all duration-300 flex flex-col justify-between h-full shadow-lg border-2 ${selectedOption === item.uu_id
|
||||
? 'bg-indigo-100 border-indigo-500 shadow-indigo-200 transform scale-[1.02]'
|
||||
: 'bg-white/90 border-indigo-100 hover:bg-indigo-50 hover:border-indigo-300 hover:shadow-indigo-100'}`}
|
||||
onClick={() => handleSelection(item.uu_id)}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg mr-4">
|
||||
{occupantType?.occupant_code?.charAt(0) || 'O'}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800">{t('occupant_type')}: {occupantType?.occupant_type}</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-xs text-gray-700">{t('uuid')}:</span>
|
||||
<span className="ml-2 font-mono text-xs text-gray-600">{item?.uu_id}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('occupant_code')}:</span>
|
||||
<span className="ml-2 font-semibold text-indigo-600">{occupantType?.occupant_code}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('building')}:</span>
|
||||
<span className="ml-2 text-gray-600">{build?.build_name || 'Building'}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('type')}:</span>
|
||||
<span className="ml-2 text-gray-600">{enums?.value}</span>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-gray-100 mt-2">
|
||||
<div className="flex items-center mb-1">
|
||||
<svg className="w-4 h-4 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span className="font-medium text-gray-700">{t('part_details')}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 ml-6 mt-1">
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-12">{t('code')}:</span>
|
||||
<span className="text-sm text-gray-600">{buildPart?.part_code}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-12">{t('no')}:</span>
|
||||
<span className="text-sm text-gray-600">{buildPart?.part_no}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-12">{t('level')}:</span>
|
||||
<span className="text-sm text-gray-600">{buildPart?.part_level}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-gray-500 w-12">{t('status')}:</span>
|
||||
<span className={`text-sm font-medium ${buildPart?.human_livable ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{buildPart?.human_livable ? t('livable') : t('not_livable')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedOption === item.uu_id && (
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.uu_id}
|
||||
className={`rounded-2xl p-6 cursor-pointer transition-all duration-300 flex flex-col justify-between h-full shadow-lg border-2 ${selectedOption === item.uu_id
|
||||
? 'bg-indigo-100 border-indigo-500 shadow-indigo-200 transform scale-[1.02]'
|
||||
: 'bg-white/90 border-indigo-100 hover:bg-indigo-50 hover:border-indigo-300 hover:shadow-indigo-100'}`}
|
||||
onClick={() => handleSelection(item.uu_id)}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg mr-4">
|
||||
{item.uu_id?.charAt(0) || 'S'}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800">{selectionList.type || t('selection')}</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm">{item.uu_id || t('id')}</p>
|
||||
</div>
|
||||
|
||||
{selectedOption === item.uu_id && (
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mt-10 flex justify-center">
|
||||
<button
|
||||
className={`px-8 py-4 rounded-xl font-bold text-white transition-all duration-300 text-lg ${selectedOption
|
||||
? 'bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 shadow-lg shadow-indigo-200 hover:shadow-indigo-300 transform hover:scale-105'
|
||||
: 'bg-gray-400 cursor-not-allowed'}`}
|
||||
disabled={!selectedOption || isLoading}
|
||||
onClick={handleContinue}
|
||||
>
|
||||
{isLoading ? t('processing') : selectedOption ? t('continue') : t('select_option')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-cyan-50 p-4 sm:p-6 md:p-8">
|
||||
<div className="max-w-6xl mx-auto w-full h-full flex flex-col">
|
||||
<div className="text-center mb-8 sm:mb-10 mt-4 sm:mt-6">
|
||||
<div className="skeleton h-8 w-64 mx-auto mb-2"></div>
|
||||
<div className="skeleton h-5 w-48 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow flex flex-col">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 flex-grow">
|
||||
{/* Skeleton items to match the grid layout */}
|
||||
<div className="rounded-2xl p-6 shadow-lg border-2 bg-white/90 border-indigo-100">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="skeleton w-12 h-12 rounded-xl mr-4"></div>
|
||||
<div className="skeleton h-5 w-32"></div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-4 w-16 mr-2"></div>
|
||||
<div className="skeleton h-4 w-24"></div>
|
||||
</div>
|
||||
<div className="pt-2 border-t border-gray-100 mt-2">
|
||||
<div className="flex items-center mb-1">
|
||||
<div className="skeleton h-4 w-20 mr-2"></div>
|
||||
</div>
|
||||
<div className="ml-6 mt-1 space-y-1">
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-3 w-12 mr-2"></div>
|
||||
<div className="skeleton h-3 w-20"></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-3 w-12 mr-2"></div>
|
||||
<div className="skeleton h-3 w-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-4 w-16 mr-2"></div>
|
||||
<div className="skeleton h-4 w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="skeleton w-6 h-6 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl p-6 shadow-lg border-2 bg-white/90 border-indigo-100">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="skeleton w-12 h-12 rounded-xl mr-4"></div>
|
||||
<div className="skeleton h-5 w-32"></div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-4 w-16 mr-2"></div>
|
||||
<div className="skeleton h-4 w-24"></div>
|
||||
</div>
|
||||
<div className="pt-2 border-t border-gray-100 mt-2">
|
||||
<div className="flex items-center mb-1">
|
||||
<div className="skeleton h-4 w-20 mr-2"></div>
|
||||
</div>
|
||||
<div className="ml-6 mt-1 space-y-1">
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-3 w-12 mr-2"></div>
|
||||
<div className="skeleton h-3 w-20"></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-3 w-12 mr-2"></div>
|
||||
<div className="skeleton h-3 w-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-4 w-16 mr-2"></div>
|
||||
<div className="skeleton h-4 w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="skeleton w-6 h-6 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl p-6 shadow-lg border-2 bg-white/90 border-indigo-100">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="skeleton w-12 h-12 rounded-xl mr-4"></div>
|
||||
<div className="skeleton h-5 w-32"></div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-4 w-16 mr-2"></div>
|
||||
<div className="skeleton h-4 w-24"></div>
|
||||
</div>
|
||||
<div className="pt-2 border-t border-gray-100 mt-2">
|
||||
<div className="flex items-center mb-1">
|
||||
<div className="skeleton h-4 w-20 mr-2"></div>
|
||||
</div>
|
||||
<div className="ml-6 mt-1 space-y-1">
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-3 w-12 mr-2"></div>
|
||||
<div className="skeleton h-3 w-20"></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-3 w-12 mr-2"></div>
|
||||
<div className="skeleton h-3 w-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="skeleton h-4 w-16 mr-2"></div>
|
||||
<div className="skeleton h-4 w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="skeleton w-6 h-6 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mt-10 flex justify-center">
|
||||
<div className="skeleton h-14 w-48 rounded-xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -2,10 +2,19 @@
|
||||
import { Locale } from 'next-intl';
|
||||
import { checkAccess, checkSelectionOnSelectPage } from '@/app/api/guards';
|
||||
import SelectPageClient from './SelectPage';
|
||||
import LocaleSwitcherServer from '@/components/LocaleSwitcherServer';
|
||||
|
||||
export default async function PageSelect({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
await checkAccess(locale as Locale);
|
||||
await checkSelectionOnSelectPage(locale as Locale);
|
||||
return <SelectPageClient />;
|
||||
// await checkSelectionOnSelectPage(locale as Locale);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='absolute top-2 right-2'>
|
||||
<LocaleSwitcherServer locale={locale} pathname="/login" />
|
||||
</div>
|
||||
<SelectPageClient />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,18 +6,18 @@ export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const { uuid } = await req.json();
|
||||
console.log("Select attempt for UUID:", uuid);
|
||||
|
||||
const response = await doSelect({ uuid });
|
||||
|
||||
const response = await doSelect({ uuid });
|
||||
console.log("Select response:", response);
|
||||
if (response.status !== 200) {
|
||||
console.log("Select failed with status:", response.status);
|
||||
return NextResponse.json({ status: 401, message: "Select failed" });
|
||||
}
|
||||
|
||||
|
||||
const data = response.data as any;
|
||||
const token = data.token;
|
||||
console.log("Select token received:", token ? "[PRESENT]" : "[MISSING]");
|
||||
|
||||
|
||||
if (!token) {
|
||||
console.error("No token received from select response");
|
||||
return NextResponse.json({ status: 500, message: "No token received" });
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
'use server';
|
||||
import { fetchData } from "@/fetchers/fecther";
|
||||
import { fetchData, fetchDataWithAccessToken } from "@/fetchers/fecther";
|
||||
import { urlSelectEndpoint, urlLoginEndpoint } from "@/fetchers/urls";
|
||||
import { LoginViaAccessKeys } from "@/fetchers/types/login/validations";
|
||||
import { setCookieAccessToken, setCookieSelectToken } from "@/fetchers/token/cookies";
|
||||
|
||||
|
||||
async function doLogin(payload: LoginViaAccessKeys) {
|
||||
@@ -20,7 +19,7 @@ async function doLogin(payload: LoginViaAccessKeys) {
|
||||
}
|
||||
|
||||
async function doSelect(payload: { uuid: string }) {
|
||||
const response = await fetchData(
|
||||
const response = await fetchDataWithAccessToken(
|
||||
urlSelectEndpoint,
|
||||
payload,
|
||||
"POST",
|
||||
|
||||
@@ -111,6 +111,23 @@ async function fetchDataWithToken<T>(
|
||||
return coreFetch<T>(endpoint, { method, cache, timeout }, headers, payload);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Fetch data with authentication token
|
||||
*/
|
||||
async function fetchDataWithAccessToken<T>(
|
||||
endpoint: string,
|
||||
payload?: any,
|
||||
method: HttpMethod = "POST",
|
||||
cache: boolean = false,
|
||||
timeout: number = DEFAULT_TIMEOUT
|
||||
): Promise<ApiResponse<T>> {
|
||||
const accessToken = await getPlainAccessToken();
|
||||
console.log('accessToken', accessToken);
|
||||
const headers = { ...defaultHeaders, acs: accessToken };
|
||||
return coreFetch<T>(endpoint, { method, cache, timeout }, headers, payload);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update data with authentication token and UUID
|
||||
*/
|
||||
@@ -133,4 +150,4 @@ async function updateDataWithToken<T>(
|
||||
);
|
||||
}
|
||||
|
||||
export { fetchData, fetchDataWithToken, updateDataWithToken };
|
||||
export { fetchData, fetchDataWithToken, fetchDataWithAccessToken, updateDataWithToken };
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Redis from "ioredis";
|
||||
|
||||
const redis = new Redis({
|
||||
host: process.env.REDIS_HOST,
|
||||
host: process.env.REDIS_HOST || "10.10.2.15",
|
||||
port: parseInt(process.env.REDIS_PORT || "6379", 10),
|
||||
password: process.env.REDIS_PASSWORD || "",
|
||||
password: process.env.REDIS_PASSWORD || "your_strong_password_here",
|
||||
db: parseInt(process.env.REDIS_DB || "0", 10),
|
||||
connectTimeout: 5000,
|
||||
maxRetriesPerRequest: 2,
|
||||
|
||||
Reference in New Issue
Block a user