@djangocfg/layouts 1.0.2 → 1.0.4

package/src/layouts/PaymentsLayout/components/PaymentDetailsDialog.tsx

@@ -0,0 +1,323 @@
+/**
+ * Payment Details Dialog
+ * Shows payment details with QR code, address, and status
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  TokenIcon,
+} from '@djangocfg/ui';
+import { Copy, ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
+import { Hooks, api } from '@djangocfg/api';
+import type { API } from '@djangocfg/api';
+
+export const PAYMENT_DETAILS_EVENTS = {
+  OPEN_PAYMENT_DETAILS: 'open-payment-details',
+  CLOSE_PAYMENT_DETAILS: 'close-payment-details',
+} as const;
+
+export const PaymentDetailsDialog: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [paymentId, setPaymentId] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [timeLeft, setTimeLeft] = useState<string>('');
+
+  // Load payment data by ID using hook
+  // Only fetch when dialog is open and paymentId is set
+  const shouldFetch = open && !!paymentId;
+  const { data: payment, isLoading, error, mutate } = Hooks.usePaymentsPaymentRetrieve(
+    shouldFetch ? paymentId : '',
+    api as unknown as API
+  );
+
+  // Debug logging
+  useEffect(() => {
+    if (error) {
+      console.error('Payment loading error:', error);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    const handleOpen = (event: Event) => {
+      const customEvent = event as CustomEvent<{ paymentId: string }>;
+      console.log('Opening payment details for ID:', customEvent.detail.paymentId);
+      setPaymentId(customEvent.detail.paymentId);
+      setOpen(true);
+    };
+
+    const handleClose = () => {
+      setOpen(false);
+      setPaymentId(null);
+    };
+
+    window.addEventListener(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, handleOpen);
+    window.addEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, handleClose);
+
+    return () => {
+      window.removeEventListener(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, handleOpen);
+      window.removeEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, handleClose);
+    };
+  }, []);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleCopyAddress = async () => {
+    if (payment?.pay_address) {
+      await navigator.clipboard.writeText(payment.pay_address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  // Calculate time left until expiration
+  useEffect(() => {
+    if (!payment?.expires_at) return;
+
+    const updateTimeLeft = () => {
+      const now = new Date().getTime();
+      const expires = new Date(payment.expires_at!).getTime();
+      const diff = expires - now;
+
+      if (diff <= 0) {
+        setTimeLeft('Expired');
+        return;
+      }
+
+      const hours = Math.floor(diff / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+      setTimeLeft(`${hours}h ${minutes}m ${seconds}s`);
+    };
+
+    updateTimeLeft();
+    const interval = setInterval(updateTimeLeft, 1000);
+
+    return () => clearInterval(interval);
+  }, [payment?.expires_at]);
+
+  // Get status icon and color
+  const getStatusInfo = () => {
+    switch (payment?.status) {
+      case 'pending':
+        return { icon: Clock, color: 'text-yellow-500', bg: 'bg-yellow-500/10' };
+      case 'completed':
+        return { icon: CheckCircle2, color: 'text-green-500', bg: 'bg-green-500/10' };
+      case 'failed':
+        return { icon: XCircle, color: 'text-red-500', bg: 'bg-red-500/10' };
+      case 'expired':
+        return { icon: AlertCircle, color: 'text-gray-500', bg: 'bg-gray-500/10' };
+      default:
+        return { icon: Clock, color: 'text-gray-500', bg: 'bg-gray-500/10' };
+    }
+  };
+
+  if (!open) return null;
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Payment Details</DialogTitle>
+            <DialogDescription>Loading payment information...</DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center justify-center py-12">
+            <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Error state - only show error if we actually tried to fetch and failed
+  if (shouldFetch && !isLoading && (error || !payment)) {
+    return (
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Payment Details</DialogTitle>
+            <DialogDescription>Failed to load payment information</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col items-center justify-center py-12 space-y-4">
+            <XCircle className="h-12 w-12 text-destructive" />
+            <p className="text-sm text-muted-foreground">
+              {error ? `Error: ${error}` : 'Payment not found'}
+            </p>
+            <Button onClick={() => mutate()}>Try Again</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  const statusInfo = getStatusInfo();
+  const StatusIcon = statusInfo.icon;
+
+  // Generate QR code URL (using simple data URL)
+  const qrCodeUrl = payment.pay_address
+    ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}`
+    : null;
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Payment Details</DialogTitle>
+          <DialogDescription>
+            Send cryptocurrency to complete your payment
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Status Badge */}
+          <div className={`flex items-center gap-3 p-4 rounded-sm ${statusInfo.bg}`}>
+            <StatusIcon className={`h-5 w-5 ${statusInfo.color}`} />
+            <div className="flex-1">
+              <div className="font-semibold capitalize">{payment.status}</div>
+              {payment.status === 'pending' && timeLeft && (
+                <div className="text-sm text-muted-foreground">
+                  Expires in {timeLeft}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Amount Information */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between p-4 bg-muted rounded-sm">
+              <span className="text-sm text-muted-foreground">Amount to send</span>
+              <div className="flex items-center gap-2">
+                <TokenIcon symbol={String(payment.currency || 'BTC')} size={20} />
+                <span className="font-mono font-bold text-lg">
+                  {payment.amount_crypto?.toFixed(8)} {payment.currency}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between px-4">
+              <span className="text-sm text-muted-foreground">Equivalent to</span>
+              <span className="font-semibold text-lg">${payment.amount_usd?.toFixed(2)} USD</span>
+            </div>
+
+            {payment.provider_payment_id && (
+              <div className="flex items-center justify-between px-4">
+                <span className="text-sm text-muted-foreground">Payment Order #</span>
+                <span className="font-mono font-medium">{payment.provider_payment_id}</span>
+              </div>
+            )}
+
+            {payment.network && (
+              <div className="flex items-center justify-between px-4">
+                <span className="text-sm text-muted-foreground">Network</span>
+                <span className="font-medium">{payment.network}</span>
+              </div>
+            )}
+          </div>
+
+          {/* QR Code */}
+          {qrCodeUrl && payment.status === 'pending' && (
+            <div className="flex justify-center p-6 bg-white rounded-sm">
+              <img src={qrCodeUrl} alt="Payment QR Code" className="w-48 h-48" />
+            </div>
+          )}
+
+          {/* Payment Address */}
+          {payment.pay_address && payment.status === 'pending' && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Payment Address</label>
+              <div className="flex items-center gap-2">
+                <div className="flex-1 p-3 bg-muted rounded-sm font-mono text-sm break-all">
+                  {payment.pay_address}
+                </div>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={handleCopyAddress}
+                  className="shrink-0"
+                >
+                  {copied ? (
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Transaction Hash */}
+          {payment.transaction_hash && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Transaction Hash</label>
+              <div className="p-3 bg-muted rounded-sm font-mono text-sm break-all">
+                {payment.transaction_hash}
+              </div>
+            </div>
+          )}
+
+          {/* Payment URL */}
+          {payment.payment_url && payment.status === 'pending' && (
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => window.open(payment.payment_url!, '_blank')}
+            >
+              <ExternalLink className="h-4 w-4 mr-2" />
+              Open in Payment Provider
+            </Button>
+          )}
+
+          {/* Additional Info */}
+          <div className="pt-4 border-t space-y-2 text-xs text-muted-foreground">
+            <div className="flex justify-between">
+              <span>Payment ID</span>
+              <span className="font-mono">{payment.id}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Created</span>
+              <span>{new Date(payment.created_at!).toLocaleString()}</span>
+            </div>
+            {payment.confirmations_count !== undefined && (
+              <div className="flex justify-between">
+                <span>Confirmations</span>
+                <span>{payment.confirmations_count}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+// Helper function to open payment details dialog
+export const openPaymentDetails = (paymentId: string) => {
+  window.dispatchEvent(
+    new CustomEvent(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, {
+      detail: { paymentId },
+    })
+  );
+};
+
+export const closePaymentDetails = () => {
+  window.dispatchEvent(new Event(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS));
+};

package/src/layouts/PaymentsLayout/components/index.ts

@@ -1,4 +1,5 @@
 export { CreateApiKeyDialog } from './CreateApiKeyDialog';
 export { DeleteApiKeyDialog } from './DeleteApiKeyDialog';
 export { CreatePaymentDialog } from './CreatePaymentDialog';
+export { PaymentDetailsDialog, openPaymentDetails, closePaymentDetails } from './PaymentDetailsDialog';
 

package/src/layouts/PaymentsLayout/context/RootPaymentsContext.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, type ReactNode } from 'react';
+import { api, Hooks } from '@djangocfg/api';
+import type { API } from '@djangocfg/api';
+import type {
+  Currency,
+  PaginatedCurrencyListList,
+  ProviderCurrency,
+  PaginatedProviderCurrencyList,
+  Network,
+  PaginatedNetworkList,
+} from '@djangocfg/api';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context Type
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface RootPaymentsContextValue {
+  // Currencies
+  currencies: PaginatedCurrencyListList | undefined;
+  isLoadingCurrencies: boolean;
+  currenciesError: Error | undefined;
+  refreshCurrencies: () => Promise<void>;
+
+  // Provider Currencies
+  providerCurrencies: PaginatedProviderCurrencyList | undefined;
+  isLoadingProviderCurrencies: boolean;
+  providerCurrenciesError: Error | undefined;
+  refreshProviderCurrencies: () => Promise<void>;
+
+  // Networks
+  networks: PaginatedNetworkList | undefined;
+  isLoadingNetworks: boolean;
+  networksError: Error | undefined;
+  refreshNetworks: () => Promise<void>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+const RootPaymentsContext = createContext<RootPaymentsContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────
+
+export function RootPaymentsProvider({ children }: { children: ReactNode }) {
+  // List all currencies
+  const {
+    data: currencies,
+    error: currenciesError,
+    isLoading: isLoadingCurrencies,
+    mutate: mutateCurrencies,
+  } = Hooks.usePaymentsCurrenciesList({}, api as unknown as API);
+
+  // List all provider currencies
+  const {
+    data: providerCurrencies,
+    error: providerCurrenciesError,
+    isLoading: isLoadingProviderCurrencies,
+    mutate: mutateProviderCurrencies,
+  } = Hooks.usePaymentsProviderCurrenciesList({}, api as unknown as API);
+
+  // List all networks
+  const {
+    data: networks,
+    error: networksError,
+    isLoading: isLoadingNetworks,
+    mutate: mutateNetworks,
+  } = Hooks.usePaymentsNetworksList({}, api as unknown as API);
+
+  const refreshCurrencies = async () => {
+    await mutateCurrencies();
+  };
+
+  const refreshProviderCurrencies = async () => {
+    await mutateProviderCurrencies();
+  };
+
+  const refreshNetworks = async () => {
+    await mutateNetworks();
+  };
+
+  const value: RootPaymentsContextValue = {
+    currencies,
+    isLoadingCurrencies,
+    currenciesError,
+    refreshCurrencies,
+    providerCurrencies,
+    isLoadingProviderCurrencies,
+    providerCurrenciesError,
+    refreshProviderCurrencies,
+    networks,
+    isLoadingNetworks,
+    networksError,
+    refreshNetworks,
+  };
+
+  return (
+    <RootPaymentsContext.Provider value={value}>{children}</RootPaymentsContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────
+
+export function useRootPaymentsContext(): RootPaymentsContextValue {
+  const context = useContext(RootPaymentsContext);
+  if (!context) {
+    throw new Error('useRootPaymentsContext must be used within RootPaymentsProvider');
+  }
+  return context;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Re-export types
+// ─────────────────────────────────────────────────────────────────────────
+
+export type {
+  Currency,
+  PaginatedCurrencyListList,
+  ProviderCurrency,
+  PaginatedProviderCurrencyList,
+  Network,
+  PaginatedNetworkList,
+};

package/src/layouts/PaymentsLayout/views/apikeys/components/ApiKeysList.tsx

@@ -88,7 +88,7 @@ export const ApiKeysList: React.FC = () => {
         <CardContent>
           <div className="space-y-4">
             {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="flex items-center justify-between p-4 border rounded-lg">
+              <div key={i} className="flex items-center justify-between p-4 border rounded-sm">
                 <div className="space-y-2 flex-1">
                   <Skeleton className="h-4 w-32" />
                   <Skeleton className="h-3 w-48" />
@@ -131,7 +131,7 @@ export const ApiKeysList: React.FC = () => {
             {keysList.map((key) => (
               <div
                 key={key.id}
-                className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
+                className="flex items-center justify-between p-4 border rounded-sm hover:bg-accent/50 transition-colors"
               >
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-3 mb-2">

package/src/layouts/PaymentsLayout/views/overview/components/BalanceCard.tsx

@@ -16,15 +16,15 @@ import {
   Skeleton,
 } from '@djangocfg/ui';
 import { Wallet, RefreshCw, Plus } from 'lucide-react';
-import { useBalancesContext } from '@djangocfg/api/cfg/contexts';
+import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
 import { openCreatePaymentDialog } from '../../../events';
 
 export const BalanceCard: React.FC = () => {
-  const { 
-    balanceSummary, 
-    isLoadingSummary, 
-    refreshSummary 
-  } = useBalancesContext();
+  const {
+    balanceSummary,
+    isLoadingSummary,
+    refreshSummary
+  } = useOverviewContext();
 
   const formatCurrency = (amount?: number | null) => {
     if (amount === null || amount === undefined) return '$0.00';

package/src/layouts/PaymentsLayout/views/overview/components/RecentPayments.tsx

@@ -72,7 +72,7 @@ export const RecentPayments: React.FC = () => {
         </CardHeader>
         <CardContent className="space-y-3">
           {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="flex items-center justify-between p-3 border rounded-lg">
+            <div key={i} className="flex items-center justify-between p-3 border rounded-sm">
               <div className="space-y-2">
                 <Skeleton className="h-4 w-32" />
                 <Skeleton className="h-3 w-24" />
@@ -112,7 +112,7 @@ export const RecentPayments: React.FC = () => {
             {payments.map((payment) => (
               <div
                 key={payment.id}
-                className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent cursor-pointer transition-colors"
+                className="flex items-center justify-between p-3 border rounded-sm hover:bg-accent cursor-pointer transition-colors"
                 onClick={() => openPaymentDetailsDialog(payment.id)}
               >
                 <div className="flex-1">

package/src/layouts/PaymentsLayout/views/payments/components/PaymentsList.tsx

@@ -29,7 +29,8 @@ import {
 } from '@djangocfg/ui';
 import { Plus, Search, Filter, ChevronLeft, ChevronRight, RefreshCw, ExternalLink } from 'lucide-react';
 import { usePaymentsContext } from '@djangocfg/api/cfg/contexts';
-import { openCreatePaymentDialog, openPaymentDetailsDialog } from '../../../events';
+import { openCreatePaymentDialog } from '../../../events';
+import { openPaymentDetails } from '../../../components/PaymentDetailsDialog';
 
 export const PaymentsList: React.FC = () => {
   const {
@@ -155,7 +156,7 @@ export const PaymentsList: React.FC = () => {
         {isLoadingPayments ? (
           <div className="space-y-3">
             {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="flex items-center justify-between p-4 border rounded-lg">
+              <div key={i} className="flex items-center justify-between p-4 border rounded-sm">
                 <div className="space-y-2">
                   <Skeleton className="h-4 w-32" />
                   <Skeleton className="h-3 w-24" />
@@ -197,7 +198,11 @@ export const PaymentsList: React.FC = () => {
                 </TableHeader>
                 <TableBody>
                   {paymentsList.map((payment) => (
-                    <TableRow key={payment.id} className="cursor-pointer hover:bg-accent">
+                    <TableRow
+                      key={payment.id}
+                      className="cursor-pointer hover:bg-accent"
+                      onClick={() => openPaymentDetails(payment.id)}
+                    >
                       <TableCell>
                         <div>
                           <div className="font-medium">
@@ -229,7 +234,7 @@ export const PaymentsList: React.FC = () => {
                           size="sm"
                           onClick={(e) => {
                             e.stopPropagation();
-                            openPaymentDetailsDialog(payment.id);
+                            openPaymentDetails(payment.id);
                           }}
                         >
                           <ExternalLink className="h-4 w-4" />

package/src/layouts/SupportLayout/hooks/useInfiniteMessages.ts

@@ -4,9 +4,8 @@
  */
 
 import useSWRInfinite from 'swr/infinite';
-import { api, getSupportTicketsMessagesList } from '@djangocfg/api';
+import { api, Fetchers, CfgSupportTypes } from '@djangocfg/api';
 import type { API } from '@djangocfg/api';
-import { CfgSupportTypes } from '@djangocfg/api';
 
 type PaginatedMessageList = CfgSupportTypes.PaginatedMessageList;
 type Message = CfgSupportTypes.Message;
@@ -41,7 +40,7 @@ export function useInfiniteMessages(ticketUuid: string | null): UseInfiniteMessa
   };
 
   const fetcher = async ([, ticket_uuid, page, pageSize]: [string, string, number, number]) => {
-    return getSupportTicketsMessagesList(
+    return Fetchers.getSupportTicketsMessagesList(
       ticket_uuid,
       { page, page_size: pageSize },
       api as unknown as API

package/src/layouts/SupportLayout/hooks/useInfiniteTickets.ts

@@ -4,9 +4,8 @@
  */
 
 import useSWRInfinite from 'swr/infinite';
-import { api, getSupportTicketsList } from '@djangocfg/api';
+import { api, Fetchers, CfgSupportTypes } from '@djangocfg/api';
 import type { API } from '@djangocfg/api';
-import { CfgSupportTypes } from '@djangocfg/api';
 
 type PaginatedTicketList = CfgSupportTypes.PaginatedTicketList;
 type Ticket = CfgSupportTypes.Ticket;
@@ -37,7 +36,7 @@ export function useInfiniteTickets(): UseInfiniteTicketsReturn {
   };
 
   const fetcher = async ([, page, pageSize]: [string, number, number]) => {
-    return getSupportTicketsList(
+    return Fetchers.getSupportTicketsList(
       { page, page_size: pageSize },
       api as unknown as API
     );

package/src/snippets/Chat/components/SessionList.tsx

@@ -102,7 +102,7 @@ export const SessionList: React.FC<SessionListProps> = ({
               {sessions.map((session, index) => (
                 <div
                   key={session.id}
-                  className="group relative flex items-start gap-3 p-4 border rounded-lg 
+                  className="group relative flex items-start gap-3 p-4 border rounded-sm 
                            hover:bg-muted/50 hover:border-primary/50 hover:shadow-md
                            transition-all duration-200 cursor-pointer
                            animate-in fade-in slide-in-from-left-2"

package/src/snippets/Chat/hooks/useInfiniteSessions.ts

@@ -4,7 +4,7 @@
  */
 
 import useSWRInfinite from 'swr/infinite';
-import { api, getKnowbaseAdminSessionsList, CfgKnowbaseTypes } from '@djangocfg/api';
+import { api, Fetchers, CfgKnowbaseTypes } from '@djangocfg/api';
 import type { API } from '@djangocfg/api';
 
 type PaginatedChatSessionList = CfgKnowbaseTypes.PaginatedChatSessionList;
@@ -25,7 +25,7 @@ export function useInfiniteSessions() {
   };
 
   const fetcher = async ([, page, pageSize]: [string, number, number]) => {
-    return getKnowbaseAdminSessionsList(
+    return Fetchers.getKnowbaseAdminSessionsList(
       { page, page_size: pageSize },
       api as unknown as API
     );

package/src/snippets/VideoPlayer/VideoPlayer.tsx

@@ -71,7 +71,7 @@ export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(({
       {/* Video Player */}
       <div 
         className={cn(
-          "relative w-full overflow-hidden rounded-lg bg-black",
+          "relative w-full overflow-hidden rounded-sm bg-black",
           theme === 'minimal' && "rounded-none",
           theme === 'modern' && "rounded-xl shadow-2xl"
         )}