layouts and components, oh my!
This commit is contained in:
Jason Jordan
@@ -0,0 +1,141 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import Button from '../../../components/Button';
|
||||
import InlineLink from "../../../components/InlineLink";
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { Schibsted_Grotesk } from 'next/font/google'
|
||||
|
||||
const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||||
|
||||
export default function Broker() {
|
||||
return (
|
||||
<div className="w-full h-full flex bg-black">
|
||||
<div className="w-full h-full flex p-4 bg-bluetang rounded-4xl">
|
||||
{/* <div className="w-1/24 h-full flex justify-end">
|
||||
<div className="w-4 flex flex-col justify-end z-1 bg-deepcove">
|
||||
<div className={classnames(
|
||||
"h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl border-deepcove bg-atmosphere",
|
||||
)} />
|
||||
<div className={classnames(
|
||||
"h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl border-deepcove bg-atmosphere",
|
||||
)} />
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-full h-full flex p-4 bg-atmosphere rounded-4xl">
|
||||
<div className="w-full h-full flex p-1 bg-bronze rounded-4xl">
|
||||
<div className="w-full h-full flex p-1 bg-copper rounded-3xl">
|
||||
<div className="w-full h-full flex p-5 bg-deepcove rounded-3xl flex flex-col justify-start">
|
||||
<div className="relative w-full h-20 p-2 flex flex-col justify-start">
|
||||
{/* <div className="w-6/7 h-full pl-3 flex flex-col justify-center text-3xl text-left">
|
||||
Dashboard | Items | Go | Here | More | Dashboard | Items | Go | Here | Too
|
||||
</div>
|
||||
<div className="w-1/7 flex flex-col justify-center items-center space-y-1 text-sm font-semibold">
|
||||
<Button className="h-8 w-39 bg-deepcove hover:bg-bluetang text-bluemana py-1 px-4 rounded">
|
||||
Change User Type
|
||||
</Button>
|
||||
<Button className="h-8 w-39 bg-platinum text-copper hover:text-bronze py-1 px-4 rounded border-1 border-copper hover:border-bronze">
|
||||
Sign Out
|
||||
</Button>
|
||||
</div> */}
|
||||
{/* <div className={`w-11/12 flex flex-col justify-start mb-[14px]`}> */}
|
||||
<div className="flex justify-between bg-deepcore">
|
||||
<div className={classnames(
|
||||
"mb-[7px] text-4xl text-left z-1 text-bluemana font-semibold"
|
||||
)}>
|
||||
Tom McSwain's Dashboard
|
||||
</div>
|
||||
<div className="w-2/7 flex justify-center space-x-2 text-sm font-semibold">
|
||||
<Button className="h-9 hover:bg-atmosphere bg-deepcove text-platinum py-1 px-4 rounded border-2 border-atmosphere">
|
||||
Change User Type
|
||||
</Button>
|
||||
<Link href="/" passHref>
|
||||
<button className="h-9 bg-copper text-platnium py-1 px-4 rounded hover:bg-bronze">
|
||||
Sign Out
|
||||
</button>
|
||||
</Link>
|
||||
{/* <Button className="h-9 bg-copper text-platnium py-1 px-4 rounded hover:bg-bronze">
|
||||
Sign Out
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames(
|
||||
"w-full h-[6px] ml-[-52px] rounded-r bg-bluetang"
|
||||
)}>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full flex flex-col justify-start rounded-3xl">
|
||||
<div className="flex gap-[2px] px-10 justify-center text-bluemana text-xl">
|
||||
<a className="relative rounded-out-b-2xl bg-platinum text-deepcove font-semibold px-8 py-2 rounded-t-2xl z-10">
|
||||
Dashboard Home
|
||||
</a>
|
||||
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||
Thing 1
|
||||
</a>
|
||||
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||
Thing 2
|
||||
</a>
|
||||
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||
Thing 3
|
||||
</a>
|
||||
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||
Thing 4
|
||||
</a>
|
||||
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||
Thing 5
|
||||
</a>
|
||||
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||
Thing 6
|
||||
</a>
|
||||
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||
Thing 7
|
||||
</a>
|
||||
</div>
|
||||
{/* <div className="w-full p-3 flex justify-between items-center text-2xl">
|
||||
<InlineLink alt >Dashboard Home</InlineLink>
|
||||
<InlineLink alt >Thing 1</InlineLink>
|
||||
<InlineLink alt >Thing 2</InlineLink>
|
||||
<InlineLink alt >Thing 3</InlineLink>
|
||||
<InlineLink alt >Thing 4</InlineLink>
|
||||
<InlineLink alt >Thing 5</InlineLink>
|
||||
<InlineLink alt >Thing 6</InlineLink>
|
||||
<InlineLink alt >Thing 7</InlineLink>
|
||||
</div> */}
|
||||
<div className={classnames("w-full flex flex-col justify-center items-start px-4 pt-6 pb-4 bg-platinum space-y-4 text-left text-deepcove text-lg rounded-2xl")} >
|
||||
<div className={classnames("w-full text-2xl font-semibold")} >
|
||||
Thing 1
|
||||
</div>
|
||||
<div className={classnames("w-full", font.className)} >
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
|
||||
<br />
|
||||
<br />
|
||||
Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis.
|
||||
</div>
|
||||
<div className={classnames("w-full text-2xl font-semibold")} >
|
||||
Thing 2
|
||||
</div>
|
||||
<div className={classnames("w-full", font.className)} >
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
|
||||
<br />
|
||||
<br />
|
||||
Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis.
|
||||
</div>
|
||||
<div className={classnames("w-full text-2xl font-semibold")} >
|
||||
Thing 3
|
||||
</div>
|
||||
<div className={classnames("w-full", font.className)} >
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
|
||||
<br />
|
||||
<br />
|
||||
Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
"user client"
|
||||
|
||||
import { sideNavItems } from '@/lib/dashboard';
|
||||
import { headers } from "next/headers";
|
||||
import Script from 'next/script';
|
||||
|
||||
import AccountDropdown from '../../components/AccountDropdown';
|
||||
import SideNav from "@/components/SideNav";
|
||||
import DashboardHeader from "@/components/DashboardHeader";
|
||||
import Image from 'next/image';
|
||||
import classnames from 'classnames';
|
||||
|
||||
|
||||
export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const headersList = await headers();
|
||||
const pathname = headersList.get("x-current-path");
|
||||
const dashboardType = pathname?.split('/').pop() || "";
|
||||
const pageNavItems = sideNavItems[dashboardType];
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<Script src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_PLACES_API_KEY}&libraries=places`} strategy="beforeInteractive" />
|
||||
<div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
|
||||
<div className="w-full -mb-[2px] flex justify-start">
|
||||
<div className="w-23/24 h-20 border-b-2 border-copper z-2" />
|
||||
</div>
|
||||
<div className="w-[60px] h-full flex justify-start">
|
||||
<div className="w-[32.5px] flex flex-col">
|
||||
<div className={classnames(
|
||||
"relative h-full border-r-6 rounded-out-tl-4xl rounded-tr-4xl bg-copper border-atmosphere"
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full flex items-start">
|
||||
<SideNav
|
||||
maxWidth="max-w-31"
|
||||
bgColor="bg-atmosphere"
|
||||
navItems={pageNavItems}
|
||||
/>
|
||||
<div className="w-full flex flex-col items-end">
|
||||
<div className="h-20 w-[calc(100vw-124px)] flex justify-between items-center">
|
||||
<div className={classnames('flex items-center')}>
|
||||
<div className="-ml-8.5 z-2">
|
||||
<Image
|
||||
src="/images/bbstpa-forsite.png"
|
||||
alt="Britton Logo"
|
||||
width={205}
|
||||
height={60}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-20 z-2">
|
||||
<AccountDropdown userRole="member" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full flex justify-start">
|
||||
<div className="flex flex-col w-full ml-8 pt-5 2xl:pt-7">
|
||||
<DashboardHeader
|
||||
userDisplayName="Robert La'Blah"
|
||||
/>
|
||||
<div className="flex w-full">
|
||||
{children}
|
||||
<div className="w-1/24 h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,352 @@
|
||||
import AccountDropdown from '../../../components/AccountDropdown';
|
||||
import SideNav from "@/components/SideNav";
|
||||
import Image from 'next/image';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { Schibsted_Grotesk } from 'next/font/google'
|
||||
import DashboardPieChart from '@/components/DashboardPieChart';
|
||||
import { FaRegIdCard, FaStethoscope } from "react-icons/fa";
|
||||
import { LuLayoutDashboard, LuClipboardList } from "react-icons/lu";
|
||||
import { IoDocumentsOutline } from "react-icons/io5";
|
||||
import { BsClipboardCheck } from "react-icons/bs";
|
||||
import { TbProgress } from "react-icons/tb";
|
||||
import { MdLocationOn } from "react-icons/md";
|
||||
import LocationSearchInput from '@/components/LocationSearchInput';
|
||||
import Button from '@/components/Button';
|
||||
|
||||
const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||||
|
||||
export default function Member() {
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
|
||||
<div className="w-full -mb-[2px] flex justify-start">
|
||||
<div className="w-23/24 h-20 border-b-2 border-copper" />
|
||||
</div>
|
||||
<div className="w-1/24 h-full flex justify-start">
|
||||
<div className="w-[calc(50%+6px)] flex flex-col">
|
||||
<div className={classnames(
|
||||
"relative h-full border-r-6 rounded-out-tl-4xl rounded-tr-4xl bg-copper border-atmosphere"
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full flex flex-col justify-start items-center">
|
||||
<div className="w-full">
|
||||
<div className="h-20 flex justify-between items-center">
|
||||
<div className={classnames('flex items-center')}>
|
||||
<div className="w-31 h-20 bg-atmosphere" />
|
||||
<div className="-ml-8.5">
|
||||
<Image
|
||||
src="/images/bbstpa-forsite.png"
|
||||
alt="Britton Logo"
|
||||
width={205}
|
||||
height={60}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="z-1 pr-20">
|
||||
<AccountDropdown userRole="member" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full flex justify-start">
|
||||
{/* <div className="relative w-31 h-full flex flex-col text-deepcove text-center bg-atmosphere divide-y divide-bluetang">
|
||||
<a href="#" className="w-full h-20 flex justify-center items-center bg-bluetang text-platinum">
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||
My Plan & Benefits
|
||||
</a>
|
||||
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||
Plan Utilization
|
||||
</a>
|
||||
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||
Claims & Authorizations
|
||||
</a>
|
||||
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||
Providers & Services
|
||||
</a>
|
||||
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||
Insurance Card
|
||||
</a>
|
||||
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum border-b border-bluetang">
|
||||
Benefits Documents
|
||||
</a>
|
||||
</div> */}
|
||||
<SideNav
|
||||
maxWidth="max-w-31"
|
||||
bgColor="bg-atmosphere"
|
||||
navItems={
|
||||
[
|
||||
{
|
||||
title: "Dashboard",
|
||||
url: "/",
|
||||
Icon: LuLayoutDashboard
|
||||
},
|
||||
{
|
||||
title: "My Plan & Benefits",
|
||||
url: "/",
|
||||
Icon: LuClipboardList
|
||||
},
|
||||
{
|
||||
title: "Plan Utilization",
|
||||
url: "/",
|
||||
Icon: TbProgress
|
||||
},
|
||||
{
|
||||
title: "Claims & Authorizations",
|
||||
url: "/",
|
||||
Icon: BsClipboardCheck
|
||||
},
|
||||
{
|
||||
title: "Providers & Services",
|
||||
url: "/",
|
||||
Icon: FaStethoscope
|
||||
},
|
||||
{
|
||||
title: "Insurance Card",
|
||||
url: "/",
|
||||
Icon: FaRegIdCard
|
||||
},
|
||||
{
|
||||
title: "Benefits Documents",
|
||||
url: "/",
|
||||
Icon: IoDocumentsOutline
|
||||
}
|
||||
]
|
||||
}
|
||||
/>
|
||||
<div className="flex w-full ml-8 pt-5 2xl:pt-7">
|
||||
<div className="w-full flex flex-col justify-start">
|
||||
<div className={classnames(
|
||||
"-mb-[34px] text-4xl text-left z-2 text-bluemana font-semibold text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove"
|
||||
)}>
|
||||
Robert La'Blah
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className={classnames(
|
||||
"w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[26px] 2xl:-mr-[16px]"
|
||||
)}>
|
||||
</div>
|
||||
<div className="w-1/21 h-full flex justify-start 2xl:pr-7.5">
|
||||
<div className="w-[calc(50%+6px)] 2xl:w-[calc(100%-6px)] flex flex-col justify-start z-1 bg-deepcove">
|
||||
<div className={classnames(
|
||||
"h-9 w-full -mb-[3px] relative border-b-6 border-r-6 rounded-br-4xl rounded-out-bl-4xl bg-copper border-atmosphere"
|
||||
)} />
|
||||
<div className={classnames(
|
||||
"h-9 w-full -mt-[3px] relative border-t-6 border-r-6 rounded-tr-4xl rounded-out-tl-4xl bg-copper border-atmosphere"
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames("w-full flex justify-start pt-4 z-2 space-x-4")}>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex space-x-4">
|
||||
<div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl">
|
||||
<div className="flex justify-between items-end px-4">
|
||||
<p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
|
||||
<div className="flex flex-col items-center">
|
||||
<DashboardPieChart paid={1007.23} remaining={492.77} />
|
||||
<p className="text-2xl">Deductable Progress</p>
|
||||
</div>
|
||||
<p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl">
|
||||
<div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
|
||||
<FaRegIdCard size={150} className="text-bluemana" />
|
||||
<div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
|
||||
<Button className="hover:text-bronze">
|
||||
View
|
||||
</Button>
|
||||
<p>|</p>
|
||||
<Button className="hover:text-bronze">
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="w-full flex flex-col px-4 py-3 border border-6 border-bluemana rounded-4xl">
|
||||
<div className="w-full pb-2 flex justify-center text-2xl text-bronze font-semibold">
|
||||
<p>Find A Provider By...</p>
|
||||
</div>
|
||||
<div className="w-full flex px-2">
|
||||
<div className="w-full flex border-x-2 border-t-2 rounded-t-xl font-semibold divide-x-2 divide-bronze">
|
||||
<a href="#" className="w-full h-9 flex justify-center items-center rounded-tl-lg bg-bluetang text-platinum">
|
||||
Location
|
||||
</a>
|
||||
<a href="#" className="w-full h-9 flex justify-center items-center text-platinum hover:text-bronze">
|
||||
Procedure
|
||||
</a>
|
||||
<a href="#" className="w-full h-9 flex justify-center items-center rounded-tr-lg text-platinum hover:text-bronze">
|
||||
Provider/Facility
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames("w-full flex items-start px-2 pb-2 text-xl", font.className)}>
|
||||
{/* <p className='pr-3'><GrMapLocation size={30} /></p> */}
|
||||
<Button className="h-10 text-deepcove hover:text-atmosphere bg-platinum rounded-bl-xl">
|
||||
<MdLocationOn size={30} />
|
||||
</Button>
|
||||
<LocationSearchInput className="h-10 pl-3 text-bluemana border-y-2 border-platinum" />
|
||||
<Button className="h-10 pr-3 pl-2 bg-platinum hover:bg-bluemana text-center text-deepcove font-semibold rounded-br-xl border-y-2 border-r-2 border-platinum">
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-full flex justify-end text-platinum font-semibold">
|
||||
<Button className="mr-2 underline hover:text-bronze">
|
||||
View Full Provider List
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="w-full flex flex-col px-4 py-3 border border-6 border-bronze rounded-4xl space-y-2">
|
||||
<div className="w-full flex justify-center text-2xl text-atmosphere font-semibold">
|
||||
<p>Recent Claims</p>
|
||||
</div>
|
||||
<div className={classnames("w-full flex flex-col px-2 text-lg", font.className)}>
|
||||
<div className="flex">
|
||||
<div className="w-1/6">
|
||||
<Button className="hover:text-bronze text-bluemana">
|
||||
2907457
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-2/6">
|
||||
LA'BLAH, ROBERT
|
||||
</div>
|
||||
<div className="w-2/6">
|
||||
HOUSE, GREGORY
|
||||
</div>
|
||||
<div className="w-1/6">
|
||||
07/21/2025
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="w-1/6">
|
||||
<Button className="hover:text-bronze text-bluemana">
|
||||
2907201
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-2/6">
|
||||
LA'BLAH, ROBERT
|
||||
</div>
|
||||
<div className="w-2/6">
|
||||
QUINN, MICHAELA
|
||||
</div>
|
||||
<div className="w-1/6">
|
||||
07/02/2025
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="w-1/6">
|
||||
<Button className="hover:text-bronze text-bluemana">
|
||||
2905891
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-2/6">
|
||||
LA'BLAH, JENNY
|
||||
</div>
|
||||
<div className="w-2/6">
|
||||
HOWSER, DOGGIE
|
||||
</div>
|
||||
<div className="w-1/6">
|
||||
05/15/2025
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="w-1/6">
|
||||
<Button className="hover:text-bronze text-bluemana">
|
||||
2905547
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-2/6">
|
||||
LA'BLAH, ROBERT
|
||||
</div>
|
||||
<div className="w-2/6">
|
||||
HOUSE, GREGORY
|
||||
</div>
|
||||
<div className="w-1/6">
|
||||
04/29/2025
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex justify-end text-platinum font-semibold">
|
||||
<Button className="mr-2 underline hover:text-bronze">
|
||||
View All Claims
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="flex space-x-4">
|
||||
<div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl">
|
||||
<div className="flex justify-between items-end px-4">
|
||||
<p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
|
||||
<div className="flex flex-col items-center">
|
||||
<DashboardPieChart paid={758.72} remaining={741.28} />
|
||||
<p className="text-2xl">Deductable Progress</p>
|
||||
</div>
|
||||
<p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-copper rounded-4xl">
|
||||
<div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
|
||||
<FaRegIdCard size={150} className="text-bronze" />
|
||||
<div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
|
||||
<div className="hover:text-bronze">View</div>
|
||||
<p>|</p>
|
||||
<div className="hover:text-bronze">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="w-2/5 flex flex-col justify-start items-center px-4 py-3 text-xl border border-6 border-platinum rounded-4xl">
|
||||
<p className="text-3xl underline py-2">Benefits At A Glance</p>
|
||||
<p className={classnames("text-2xl font-semibold py-2", font.className)}>CLASSIC 5K 100/5000</p>
|
||||
<div className={classnames("w-full flex justify-between", font.className)}>
|
||||
<div className="flex flex-col">
|
||||
<p>Physician Visit</p>
|
||||
<p>Specialist Visit</p>
|
||||
<p>Urgent Care</p>
|
||||
<p>INN-Ind Ded</p>
|
||||
<p>INN-Family Ded</p>
|
||||
<p>OON-Ind Ded</p>
|
||||
<p>OON-Family Ded</p>
|
||||
<p>Co-Insurance</p>
|
||||
<p>INN-Ind OOP</p>
|
||||
<p>INN-Family OOP</p>
|
||||
<p>OON-Ind OOP</p>
|
||||
<p>OON-Family OOP</p>
|
||||
<p>Emergency Room</p>
|
||||
<p>Preventive Care</p>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p>$25.00</p>
|
||||
<p>$50.00</p>
|
||||
<p>$50.00</p>
|
||||
<p>$5,000</p>
|
||||
<p>$10,000</p>
|
||||
<p>$10,000</p>
|
||||
<p>$20,000</p>
|
||||
<p>100%/0%</p>
|
||||
<p>$5,000</p>
|
||||
<p>$10,000</p>
|
||||
<p>$10,000</p>
|
||||
<p>$20,000</p>
|
||||
<p>Ded & Coin</p>
|
||||
<p>100%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/24 h-full" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import classnames from 'classnames';
|
||||
|
||||
import FindProvider from '@/components/FindProvider';
|
||||
import InsuranceCardWidget from '@/components/InsuranceCard';
|
||||
import DeductableProgressWidget from '@/components/DeductableProgressWidget';
|
||||
import RecentClaimsWidget from '@/components/RecentClaimsWidget';
|
||||
import BenefitsAAGWidget from '@/components/BenefitsAAGWidget';
|
||||
|
||||
export default function Member() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className={classnames("w-full flex justify-start pt-4 z-2 space-x-4")}>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex space-x-4">
|
||||
<DeductableProgressWidget />
|
||||
<InsuranceCardWidget />
|
||||
</div>
|
||||
<FindProvider />
|
||||
<RecentClaimsWidget />
|
||||
</div>
|
||||
<BenefitsAAGWidget />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user