sarlink-portal/app/(dashboard)/users/[userId]/verify/page.tsx

import InputReadOnly from '@/components/input-read-only';
import { Badge } from '@/components/ui/badge';
import UserRejectDialog from '@/components/user/user-reject-dialog';
import { UserVerifyDialog } from '@/components/user/user-verify-dialog';
import { getNationalPerson } from '@/lib/person';

import prisma from '@/lib/db';
import Image from 'next/image';

export default async function VerifyUserPage({
  params,
}: {
  params: Promise<{
    userId: string;
  }>;
}) {
  const userId = (await params).userId
  const dbUser = await prisma.user.findUnique({
    where: {
      id: userId,
    },
    include: {
      island: {
        include: {
          atoll: true
        }
      }
    }
  })

  const nationalData = await getNationalPerson({ idCard: dbUser?.id_card ?? "" })
  return (
    <div>
      <div className='flex items-center justify-between text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4'>
        <h3 className="">
          Verify user
        </h3>
        <div className='flex gap-2'>
          {dbUser && !dbUser?.verified && <UserVerifyDialog user={dbUser} />}
          {dbUser && !dbUser?.verified && <UserRejectDialog user={dbUser} />}
          {dbUser?.verified && <Badge variant={"secondary"} className='bg-lime-500'>Verified</Badge>}
        </div>

      </div>
      <div className='grid grid-cols-1 md:grid-cols-2 gap-4 items-start justify-start'>
        <div id="database-information">
          <h4 className='p-2 rounded font-semibold'>Database Information</h4>
          <div className='shadow p-2 rounded-lg title-bg space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2'>
            <InputReadOnly labelClassName='text-sarLinkOrange' label="ID Card" value={dbUser?.id_card ?? ""} />
            <InputReadOnly labelClassName='text-sarLinkOrange' label="Name" value={dbUser?.name ?? ""} />
            <InputReadOnly labelClassName='text-sarLinkOrange' label="House Name" value={dbUser?.address ?? ""} />
            <InputReadOnly labelClassName='text-sarLinkOrange' label="Island" value={dbUser?.island?.name ?? ""} />
            <InputReadOnly labelClassName='text-sarLinkOrange' label="Atoll" value={dbUser?.island?.atoll.name ?? ""} />

            <InputReadOnly labelClassName='text-sarLinkOrange' label="DOB" value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
              month: "short",
              day: "2-digit",
              year: "numeric",
            })} />
            <InputReadOnly labelClassName='text-sarLinkOrange' label="Phone Number" value={dbUser?.phoneNumber ?? ""} />
          </div>
        </div>
        <div id="national-information">
          <h4 className='p-2 rounded font-semibold'>National Information</h4>
          <div className='shadow p-2 rounded-md title-bg space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2'>
            <InputReadOnly labelClassName='text-green-500' label="ID Card" value={nationalData?.nic ?? ""} />
            <InputReadOnly labelClassName='text-green-500' label="Name" value={nationalData?.name_en ?? ""} />
            <InputReadOnly labelClassName='text-green-500' label="House Name" value={nationalData?.house_name_en ?? ""} />
            <InputReadOnly labelClassName='text-green-500' label="Island" value={nationalData?.island_name_en ?? ""} />
            <InputReadOnly labelClassName='text-green-500' label="Atoll" value={nationalData?.atoll_en ?? ""} />
            <InputReadOnly labelClassName='text-green-500' label="DOB" value={new Date(nationalData?.dob ?? "").toLocaleDateString("en-US", {
              month: "short",
              day: "2-digit",
              year: "numeric",
            })} />
            <InputReadOnly labelClassName='text-green-500' label="Phone Number" value={nationalData?.primary_contact ?? ""} />
            <div className='flex flex-col col-span-2 items-center justify-center'>
              <Image
                src={nationalData.image_url}
                height={100}
                width={100}
                className='object-fit aspect-square rounded-full'
                alt='id photo'
              />
            </div>

          </div>
        </div>
      </div>

    </div>
  )
}