@djangocfg/layouts 1.0.1

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

@@ -0,0 +1,138 @@
+/**
+ * Recent Payments Component
+ * Display recent payment transactions
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Skeleton,
+} from '@djangocfg/ui';
+import { History, ExternalLink } from 'lucide-react';
+import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+import { openPaymentDetailsDialog } from '../../../events';
+
+export const RecentPayments: React.FC = () => {
+  const { recentPayments, isLoadingOverview } = useOverviewContext();
+
+  const formatCurrency = (amount?: number | null) => {
+    if (amount === null || amount === undefined) return '$0.00';
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+    }).format(amount);
+  };
+
+  const getRelativeTime = (date: string | null | undefined): string => {
+    if (!date) return 'N/A';
+
+    const now = new Date();
+    const target = new Date(date);
+    const diffInSeconds = Math.floor((now.getTime() - target.getTime()) / 1000);
+
+    if (diffInSeconds < 60) return 'Just now';
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+  };
+
+  const getStatusVariant = (
+    status: string | null | undefined
+  ): 'default' | 'destructive' | 'outline' | 'secondary' => {
+    switch (status?.toLowerCase()) {
+      case 'completed':
+      case 'success':
+        return 'default';
+      case 'pending':
+        return 'secondary';
+      case 'failed':
+      case 'error':
+        return 'destructive';
+      default:
+        return 'outline';
+    }
+  };
+
+  if (isLoadingOverview) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            Recent Payments
+          </CardTitle>
+        </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 className="space-y-2">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+              <Skeleton className="h-6 w-16" />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const payments = recentPayments?.results || [];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            Recent Payments
+          </div>
+          <Button variant="ghost" size="sm">
+            View All
+            <ExternalLink className="h-4 w-4 ml-2" />
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {payments.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
+            <p>No recent payments</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {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"
+                onClick={() => openPaymentDetailsDialog(payment.id)}
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{formatCurrency(payment.amount_usd)}</span>
+                    <Badge variant={getStatusVariant(payment.status)} className="text-xs">
+                      {payment.status}
+                    </Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {getRelativeTime(payment.created_at)} • {payment.provider || 'Unknown provider'}
+                  </p>
+                </div>
+                <ExternalLink className="h-4 w-4 text-muted-foreground" />
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+

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

@@ -0,0 +1,4 @@
+export { MetricsCards } from './MetricsCards';
+export { BalanceCard } from './BalanceCard';
+export { RecentPayments } from './RecentPayments';
+

package/src/layouts/PaymentsLayout/views/overview/index.tsx

@@ -0,0 +1,23 @@
+/**
+ * Overview View
+ * Dashboard with metrics, balance, and recent activity
+ */
+
+'use client';
+
+import React from 'react';
+import { MetricsCards, BalanceCard, RecentPayments } from './components';
+
+export const OverviewView: React.FC = () => {
+  return (
+    <div className="space-y-6">
+      <MetricsCards />
+      
+      <div className="grid gap-6 lg:grid-cols-2">
+        <BalanceCard />
+        <RecentPayments />
+      </div>
+    </div>
+  );
+};
+

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

@@ -0,0 +1,282 @@
+/**
+ * Payments List Component
+ * Display paginated list of payments with filters
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  Badge,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} 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';
+
+export const PaymentsList: React.FC = () => {
+  const {
+    payments,
+    isLoadingPayments,
+    refreshPayments,
+  } = usePaymentsContext();
+  
+  const paymentsList = payments?.results || [];
+  const paymentsPage = payments?.page || 1;
+  const paymentsPageSize = payments?.page_size || 20;
+  const paymentsTotalCount = payments?.count || 0;
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+
+  const formatCurrency = (amount?: number | null) => {
+    if (amount === null || amount === undefined) return '$0.00';
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+    }).format(amount);
+  };
+
+  const getRelativeTime = (date: string | null | undefined): string => {
+    if (!date) return 'N/A';
+
+    const now = new Date();
+    const target = new Date(date);
+    const diffInSeconds = Math.floor((now.getTime() - target.getTime()) / 1000);
+
+    if (diffInSeconds < 60) return 'Just now';
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+  };
+
+  const getStatusVariant = (
+    status: string | null | undefined
+  ): 'default' | 'destructive' | 'outline' | 'secondary' => {
+    switch (status?.toLowerCase()) {
+      case 'completed':
+      case 'success':
+        return 'default';
+      case 'pending':
+        return 'secondary';
+      case 'failed':
+      case 'error':
+        return 'destructive';
+      default:
+        return 'outline';
+    }
+  };
+
+  const handleSearch = async (value: string) => {
+    setSearchTerm(value);
+    // TODO: Implement search/filter in PaymentsContext
+    await refreshPayments();
+  };
+
+  const handleStatusFilter = async (status: string) => {
+    setStatusFilter(status);
+    // TODO: Implement search/filter in PaymentsContext
+    await refreshPayments();
+  };
+
+  const handlePageChange = async (page: number) => {
+    // TODO: Implement pagination in PaymentsContext
+    await refreshPayments();
+  };
+
+  const totalPages = Math.ceil((paymentsTotalCount || 0) / (paymentsPageSize || 20));
+  const showingFrom = ((paymentsPage || 1) - 1) * (paymentsPageSize || 20) + 1;
+  const showingTo = Math.min((paymentsPage || 1) * (paymentsPageSize || 20), paymentsTotalCount || 0);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span>Payment History</span>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={refreshPayments} disabled={isLoadingPayments}>
+              <RefreshCw className={`h-4 w-4 mr-2 ${isLoadingPayments ? 'animate-spin' : ''}`} />
+              Refresh
+            </Button>
+            <Button size="sm" onClick={() => openCreatePaymentDialog()}>
+              <Plus className="h-4 w-4 mr-2" />
+              New Payment
+            </Button>
+          </div>
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Filters */}
+        <div className="flex flex-col sm:flex-row gap-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search payments..."
+              value={searchTerm}
+              onChange={(e) => handleSearch(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+
+          <Select value={statusFilter} onValueChange={handleStatusFilter}>
+            <SelectTrigger className="w-full sm:w-48">
+              <Filter className="h-4 w-4 mr-2" />
+              <SelectValue placeholder="Filter by status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Statuses</SelectItem>
+              <SelectItem value="completed">Completed</SelectItem>
+              <SelectItem value="pending">Pending</SelectItem>
+              <SelectItem value="failed">Failed</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Payments Table */}
+        {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 className="space-y-2">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-3 w-24" />
+                </div>
+                <Skeleton className="h-6 w-16" />
+              </div>
+            ))}
+          </div>
+        ) : !paymentsList || paymentsList.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
+              <Search className="w-8 h-8 text-muted-foreground" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">No Payments Found</h3>
+            <p className="text-muted-foreground mb-4">
+              {searchTerm || statusFilter !== 'all'
+                ? 'No payments match your current filters'
+                : "You haven't made any payments yet"}
+            </p>
+            <Button onClick={() => openCreatePaymentDialog()}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create Payment
+            </Button>
+          </div>
+        ) : (
+          <>
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead>Amount</TableHead>
+                    <TableHead>Currency</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Provider</TableHead>
+                    <TableHead>ID</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {paymentsList.map((payment) => (
+                    <TableRow key={payment.id} className="cursor-pointer hover:bg-accent">
+                      <TableCell>
+                        <div>
+                          <div className="font-medium">
+                            {payment.created_at
+                              ? new Date(payment.created_at).toLocaleDateString()
+                              : 'N/A'}
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {getRelativeTime(payment.created_at)}
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell className="font-mono font-semibold">
+                        {formatCurrency(payment.amount_usd)}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">Currency #{payment.currency}</Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={getStatusVariant(payment.status)}>{payment.status}</Badge>
+                      </TableCell>
+                      <TableCell>{payment.provider || 'N/A'}</TableCell>
+                      <TableCell className="font-mono text-sm text-muted-foreground">
+                        {payment.id.slice(0, 8)}...
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            openPaymentDetailsDialog(payment.id);
+                          }}
+                        >
+                          <ExternalLink className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="flex items-center justify-between">
+                <div className="text-sm text-muted-foreground">
+                  Showing {showingFrom} to {showingTo} of {paymentsTotalCount} payments
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handlePageChange((paymentsPage || 1) - 1)}
+                    disabled={!paymentsPage || paymentsPage <= 1}
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </Button>
+
+                  <span className="text-sm">
+                    Page {paymentsPage || 1} of {totalPages}
+                  </span>
+
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handlePageChange((paymentsPage || 1) + 1)}
+                    disabled={!paymentsPage || paymentsPage >= totalPages}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+

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

@@ -0,0 +1,2 @@
+export { PaymentsList } from './PaymentsList';
+

package/src/layouts/PaymentsLayout/views/payments/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * Payments View
+ * List and manage payment transactions
+ */
+
+'use client';
+
+import React from 'react';
+import { PaymentsList } from './components';
+
+export const PaymentsView: React.FC = () => {
+  return (
+    <div className="space-y-6">
+      <PaymentsList />
+    </div>
+  );
+};
+

package/src/layouts/PaymentsLayout/views/tariffs/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * Tariffs View
+ * View and manage tariff plans
+ */
+
+'use client';
+
+import React from 'react';
+import { Card, CardContent } from '@djangocfg/ui';
+import { Crown } from 'lucide-react';
+
+export const TariffsView: React.FC = () => {
+  return (
+    <Card>
+      <CardContent className="py-12">
+        <div className="text-center">
+          <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
+            <Crown className="w-8 h-8 text-muted-foreground" />
+          </div>
+          <h3 className="text-lg font-semibold mb-2">Tariff Plans Coming Soon</h3>
+          <p className="text-muted-foreground">
+            Subscription tiers and pricing plans will be available here
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+

package/src/layouts/PaymentsLayout/views/transactions/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * Transactions View
+ * View transaction history and balance changes
+ */
+
+'use client';
+
+import React from 'react';
+import { Card, CardContent } from '@djangocfg/ui';
+import { History } from 'lucide-react';
+
+export const TransactionsView: React.FC = () => {
+  return (
+    <Card>
+      <CardContent className="py-12">
+        <div className="text-center">
+          <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
+            <History className="w-8 h-8 text-muted-foreground" />
+          </div>
+          <h3 className="text-lg font-semibold mb-2">Transactions Coming Soon</h3>
+          <p className="text-muted-foreground">
+            Transaction history and balance changes will be available here
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React from 'react';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@djangocfg/ui/components';
+import { AccountsProvider } from '@djangocfg/api/cfg/contexts';
+import { useAuth } from '../../auth';
+
+import { AvatarSection, ProfileForm } from './components';
+
+interface ProfileLayoutProps {
+  // Callbacks
+  onUnauthenticated?: () => void;
+
+  // Optional customization
+  title?: string;
+  description?: string;
+  showMemberSince?: boolean;
+}
+
+const ProfileContent = ({
+  onUnauthenticated,
+  title = 'Profile Settings',
+  description = 'Manage your account information and preferences',
+  showMemberSince = true
+}: ProfileLayoutProps) => {
+  const { user, isLoading } = useAuth();
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  // Show auth check if no user
+  if (!user && !isLoading) {
+    React.useEffect(() => {
+      if (onUnauthenticated) {
+        onUnauthenticated();
+      }
+    }, [onUnauthenticated]);
+
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-foreground mb-4">Not Authenticated</h1>
+          <p className="text-muted-foreground mb-4">Please log in to view your profile.</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="max-w-2xl mx-auto space-y-6">
+        {/* Header */}
+        <div className="text-center space-y-2">
+          <h1 className="text-3xl font-bold text-foreground">{title}</h1>
+          <p className="text-muted-foreground">{description}</p>
+        </div>
+
+        {/* Main Profile Card */}
+        <Card className="bg-card/50 backdrop-blur-sm border-border/50">
+          <CardHeader className="text-center pb-6">
+            <AvatarSection />
+
+            <CardTitle className="text-xl">
+              {user?.display_username || user?.email}
+            </CardTitle>
+            {showMemberSince && user?.date_joined && (
+              <CardDescription className="text-muted-foreground">
+                Member since {formatDate(user.date_joined)}
+              </CardDescription>
+            )}
+          </CardHeader>
+
+          <CardContent className="space-y-6">
+            {/* Profile Form */}
+            <ProfileForm />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export const ProfileLayout: React.FC<ProfileLayoutProps> = (props) => {
+  return (
+    <AccountsProvider>
+      <ProfileContent {...props} />
+    </AccountsProvider>
+  );
+};
+