web-humas-fe/components/main/detail/statistic-recap.tsx

64 lines
3.1 KiB
TypeScript

'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
import React from 'react'
export default function StatiticAndRecap() {
return (
<div className='bg-white text-black p-1 md:p-5 px-0 lg:px-10'>
<div className='flex justify-center items-center'>
<div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
<div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>Statistik / Rekapitulasi</div>
<div className='hidden md:block absolute pb-10 pl-[400px]'><img src="/spark.png" alt="" /></div>
</div>
<div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] my-4 flex flex-col items-center'>
<Tabs
aria-label="Options" color='warning'
classNames={{
tabList: " bg-white text-red-500",
}}
>
<Tab key="dashboard" title="Dashboard" className='w-full'>
<div className='flex flex-col items-center border-2 border-red-900 space-y-5'>
<div className='text-xl font-bold text-center pt-3'>Dashboard Statistik / Rekapitulasi PPID Humas Polri</div>
<div>
<img src="/temp/statistik.png" alt="tabel" />
</div>
<div className='flex w-full justify-around'>
<div className='w-1/2 flex items-center justify-center'>
<img src="/temp/panel.png" alt="panel" />
</div>
<div className='w-1/2'>
<div>permohonan,pemberituauan</div>
<div>Pelayanan Informasi Publik</div>
<div>Pelayanan Keberatan</div>
</div>
</div>
<div className='flex w-full justify-evenly'>
<div>
<img src="/temp/panel.png" alt="" />
</div>
<div>
<img src="/temp/panel.png" alt="" />
</div>
</div>
<div className='flex w-full justify-evenly'>
<div>
<img src="/temp/statistik2.png" alt="" />
</div>
<div>
<img src="/temp/panel.png" alt="" />
</div>
</div>
</div>
</Tab>
<Tab key="report" title="Report">
<div className='md:flex'>
</div>
</Tab>
</Tabs>
</div>
</div>
)
}