77 lines
3.7 KiB
TypeScript
77 lines
3.7 KiB
TypeScript
import { CreditCardIcon, GiftIcon, HandHeartIcon } from '@phosphor-icons/react';
|
|
|
|
export default function RecoveryPlanTab() {
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{/* FINANCIAL REFUND */}
|
|
<div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<CreditCardIcon size={20} weight="bold" className="text-[#143d30]" />
|
|
<h3 className="text-[13px] font-bold text-[#143d30] tracking-wider">FINANCIAL REFUND</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-6">
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">REFUND AMOUNT</span>
|
|
<span className="block text-[15px] font-semibold text-[#1B9869]">EUR 0</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">REFUND STATUS</span>
|
|
<span className="block text-[15px] font-semibold text-gray-900">Pending Approval</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">REFUND METHOD</span>
|
|
<span className="block text-[15px] font-semibold text-gray-900">Original Payment Method</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* COMPENSATION & PERKS */}
|
|
<div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<GiftIcon size={20} weight="bold" className="text-[#143d30]" />
|
|
<h3 className="text-[13px] font-bold text-[#143d30] tracking-wider">COMPENSATION & PERKS</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-6">
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">CASH COMPENSATION</span>
|
|
<span className="block text-[15px] font-semibold text-[#1B9869]">EUR 0</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">VOUCHER ALTERNATIVE</span>
|
|
<span className="block text-[15px] font-semibold text-gray-900">Available (120%)</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">LOYALTY MILES</span>
|
|
<span className="block text-[15px] font-semibold text-gray-900">5,000 Points (Bonus)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* PASSENGER CARE */}
|
|
<div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<HandHeartIcon size={20} weight="bold" className="text-[#143d30]" />
|
|
<h3 className="text-[13px] font-bold text-[#143d30] tracking-wider">PASSENGER CARE</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-6">
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">MEAL VOUCHERS</span>
|
|
<span className="block text-[15px] font-semibold text-[#1B9869]">2 x $15.00 Issued</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">HOTEL ACCOMMODATION</span>
|
|
<span className="block text-[15px] font-semibold text-gray-900">1 Night (Pending)</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">GROUND TRANSPORT</span>
|
|
<span className="block text-[15px] font-semibold text-gray-900">Airport to City Center</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|