import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Head, Link } from '@inertiajs/react'; import { ArrowLeft, Edit } from 'lucide-react'; interface PricingRule { id: number; country_code: string; service_type: 'call' | 'sms' | 'phone_number'; base_cost: number; markup_percentage: number; selling_price: number; tier: string; is_active: boolean; created_at: string; } interface Props { pricingRule: PricingRule; } export default function ShowPricingRule({ pricingRule }: Props) { const getServiceLabel = (type: string) => { switch (type) { case 'call': return 'Voice Call'; case 'sms': return 'SMS'; case 'phone_number': return 'Phone Number'; default: return type; } }; return (
Basic Information

Country Code

{pricingRule.country_code}

Service Type

{getServiceLabel(pricingRule.service_type)}

Pricing Tier

{pricingRule.tier}

Status

{pricingRule.is_active ? 'Active' : 'Inactive'}
Pricing Details

Base Cost

${Number(pricingRule.base_cost).toFixed(4)}

Markup Percentage

{Number(pricingRule.markup_percentage).toFixed(2)}%

Selling Price

${Number(pricingRule.selling_price).toFixed(4)}

Profit Margin

${(Number(pricingRule.selling_price) - Number(pricingRule.base_cost)).toFixed(4)}

Additional Information

Created At

{new Date(pricingRule.created_at).toLocaleString()}
); }