112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
"use client";
|
||
import React from "react";
|
||
import { loginSelectOccupant } from "@/apicalls/login/login";
|
||
import { useRouter } from "next/navigation";
|
||
import { BuildingMap } from "./types";
|
||
|
||
interface LoginOccupantProps {
|
||
selectionList: BuildingMap;
|
||
lang?: "en" | "tr";
|
||
}
|
||
|
||
// Language dictionary for internationalization
|
||
const languageDictionary = {
|
||
tr: {
|
||
occupantSelection: "Daire Seçimi",
|
||
loggedInAs: "Kiracı olarak giriş yaptınız",
|
||
buildingInfo: "Bina Bilgisi",
|
||
level: "Kat",
|
||
noSelections: "Seçenek bulunamadı",
|
||
},
|
||
en: {
|
||
occupantSelection: "Select your occupant type",
|
||
loggedInAs: "You are logged in as an occupant",
|
||
buildingInfo: "Building Info",
|
||
level: "Level",
|
||
noSelections: "No selections available",
|
||
},
|
||
};
|
||
|
||
function LoginOccupant({
|
||
selectionList,
|
||
lang = "en"
|
||
}: LoginOccupantProps) {
|
||
const t = languageDictionary[lang] || languageDictionary.en;
|
||
const router = useRouter();
|
||
|
||
const handleSelect = (uu_id: string) => {
|
||
console.log("Selected occupant uu_id:", uu_id);
|
||
|
||
loginSelectOccupant({
|
||
build_living_space_uu_id: uu_id,
|
||
})
|
||
.then((responseData: any) => {
|
||
if (responseData?.status === 200 || responseData?.status === 202) {
|
||
router.push("/dashboard");
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.error(error);
|
||
});
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="text-2xl font-bold">{t.occupantSelection}</div>
|
||
<div className="text-sm text-gray-500 mt-4">
|
||
{t.loggedInAs}
|
||
</div>
|
||
{selectionList && Object.keys(selectionList).length > 0 ? (
|
||
Object.keys(selectionList).map((buildKey: string) => {
|
||
const building = selectionList[buildKey];
|
||
return (
|
||
<div key={buildKey} className="mb-6">
|
||
<div className="w-full p-3 bg-blue-100 rounded-t-lg">
|
||
<h3 className="text-lg font-medium text-blue-800">
|
||
<span className="mr-1">{t.buildingInfo}:</span>
|
||
{building.build_name} - No: {building.build_no}
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="space-y-2 mt-2">
|
||
{building.occupants.map((occupant: any, idx: number) => (
|
||
<div
|
||
key={`${buildKey}-${idx}`}
|
||
className="w-full p-4 bg-emerald-300 hover:bg-emerald-500 rounded-lg transition-colors duration-200 cursor-pointer"
|
||
onClick={() => handleSelect(occupant.build_living_space_uu_id)}
|
||
>
|
||
<div className="flex flex-col">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-xl font-medium">
|
||
{occupant.description}
|
||
</span>
|
||
<span className="text-sm font-medium bg-blue-500 text-white px-2 py-1 rounded">
|
||
{occupant.code}
|
||
</span>
|
||
</div>
|
||
<div className="mt-2">
|
||
<span className="text-md font-medium">
|
||
{occupant.part_name}
|
||
</span>
|
||
</div>
|
||
<div className="mt-1">
|
||
<span className="text-sm text-gray-700">
|
||
{t.level}: {occupant.part_level}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
) : (
|
||
<div className="text-center p-4">{t.noSelections}</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default LoginOccupant;
|