import { Button } from '@admin/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@admin/components/ui/card'; import { Badge } from '@admin/components/ui/badge'; import { Label } from '@admin/components/ui/label'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import { Head, router } from '@inertiajs/react'; import { ArrowLeft, Edit, CreditCard, Building2, Package, Calendar, DollarSign, Users, Activity } from 'lucide-react'; interface Transaction { id: number; amount: number; status: string; created_at: string; } interface Subscription { id: number; tenant: { id: number; name: string; email: string; phone?: string; }; package: { id: number; name: string; pricing_type: number; }; start_date: string; end_date: string; amount: number; billing_cycle: string; status: string; user_count: number; transactions: Transaction[]; } interface Props { subscription: Subscription; } export default function Show({ subscription }: Props) { const handleBack = () => { router.visit(route('admin.subscriptions.index')); }; const handleEdit = () => { router.visit(route('admin.subscriptions.edit', subscription.id)); }; const handlePayment = () => { router.visit(route('admin.transactions.payment', subscription.id)); }; const getStatusBadge = (status: string) => { const statusConfig = { 'Active': { variant: 'default' as const, color: 'bg-green-100 text-green-800' }, 'Inactive': { variant: 'secondary' as const, color: 'bg-gray-100 text-gray-800' }, 'Suspended': { variant: 'destructive' as const, color: 'bg-red-100 text-red-800' }, 'Expired': { variant: 'outline' as const, color: 'bg-yellow-100 text-yellow-800' }, }; const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.Inactive; return ( {status} ); }; const isExpired = new Date(subscription.end_date) < new Date(); const daysUntilExpiry = Math.floor((new Date(subscription.end_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)); return (

View Subscription

Administration › Subscriptions › View
ID: {subscription.id} {getStatusBadge(subscription.status)} {isExpired && ( Expired )}
{/* Left Column - Subscription Details */}
{/* Subscription Overview */}
Subscription Overview
Detailed information about this subscription {/* Basic Information */}

{subscription.tenant.name}

{subscription.tenant.email}

{subscription.tenant.phone && (

{subscription.tenant.phone}

)}

{subscription.package.name}

{subscription.package.pricing_type === 1 ? 'Per User' : 'Per Tenant'}

{new Date(subscription.start_date).toLocaleDateString()} - {new Date(subscription.end_date).toLocaleDateString()}

{daysUntilExpiry > 0 ? `${daysUntilExpiry} days remaining` : daysUntilExpiry === 0 ? 'Expires today' : `Expired ${Math.abs(daysUntilExpiry)} days ago` }

${subscription.amount.toFixed(2)}

{subscription.billing_cycle}

{/* Additional Details */}

Users

{subscription.user_count}

Total Amount

${subscription.amount.toFixed(2)}

Status

{getStatusBadge(subscription.status)}
{/* Transaction History */}
Transaction History
Payment history for this subscription {subscription.transactions && subscription.transactions.length > 0 ? (
{subscription.transactions.map((transaction) => (

${transaction.amount.toFixed(2)}

{new Date(transaction.created_at).toLocaleDateString()}

{transaction.status}
))}
) : (

No transactions found for this subscription.

)}
{/* Right Column - Quick Actions & Summary */}
Quick Actions Common actions for this subscription Subscription Summary
Status {getStatusBadge(subscription.status)}
Package {subscription.package.name}
Amount ${subscription.amount.toFixed(2)}
Users {subscription.user_count}
Billing {subscription.billing_cycle}
Expires {new Date(subscription.end_date).toLocaleDateString()}
); }