@djangocfg/layouts 2.1.9 → 2.1.14

package/src/layouts/PaymentsLayout/views/transactions/components/TransactionsList.tsx

@@ -1,273 +0,0 @@
-/**
- * Transactions List Component (v2.0 - Simplified)
- * Display transaction history with balance changes
- */
-
-'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-nextjs';
-import { History, Search, Filter, RefreshCw, ArrowUpRight, ArrowDownLeft } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/layouts/contexts';
-
-export const TransactionsList: React.FC = () => {
-  const {
-    transactions,
-    isLoadingTransactions,
-    refreshTransactions,
-  } = useOverviewContext();
-
-  const [searchTerm, setSearchTerm] = useState('');
-  const [typeFilter, setTypeFilter] = useState<string>('all');
-
-  // Extract transactions array from response (handle different possible structures)
-  const transactionsList = transactions?.results || transactions?.transactions || [];
-
-  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 formatDate = (date: string | null | undefined): string => {
-    if (!date) return 'N/A';
-    try {
-      return new Date(date).toLocaleString('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      });
-    } catch {
-      return 'Invalid date';
-    }
-  };
-
-  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 getTypeVariant = (
-    type: string | null | undefined
-  ): 'default' | 'destructive' | 'outline' | 'secondary' => {
-    switch (type?.toLowerCase()) {
-      case 'deposit':
-      case 'credit':
-        return 'default';
-      case 'withdrawal':
-      case 'debit':
-        return 'destructive';
-      default:
-        return 'outline';
-    }
-  };
-
-  const getTypeIcon = (type: string | null | undefined) => {
-    const isDeposit = type?.toLowerCase() === 'deposit' || type?.toLowerCase() === 'credit';
-    return isDeposit ? (
-      <ArrowDownLeft className="h-4 w-4 text-green-600" />
-    ) : (
-      <ArrowUpRight className="h-4 w-4 text-red-600" />
-    );
-  };
-
-  const handleSearch = async (value: string) => {
-    setSearchTerm(value);
-    await refreshTransactions();
-  };
-
-  const handleTypeFilter = async (type: string) => {
-    setTypeFilter(type);
-    await refreshTransactions();
-  };
-
-  // Filter transactions client-side
-  const filteredTransactions = transactionsList.filter((transaction: any) => {
-    const matchesSearch = searchTerm
-      ? transaction.id?.toString().toLowerCase().includes(searchTerm.toLowerCase()) ||
-        transaction.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        transaction.type?.toLowerCase().includes(searchTerm.toLowerCase())
-      : true;
-
-    const matchesType = typeFilter !== 'all'
-      ? transaction.type?.toLowerCase() === typeFilter.toLowerCase()
-      : true;
-
-    return matchesSearch && matchesType;
-  });
-
-  if (isLoadingTransactions) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <History className="h-5 w-5" />
-            Transaction History
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <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" />
-              </div>
-              <Skeleton className="h-6 w-16" />
-            </div>
-          ))}
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <History className="h-5 w-5" />
-            Transaction History
-          </div>
-          <Button variant="outline" size="sm" onClick={refreshTransactions} disabled={isLoadingTransactions}>
-            <RefreshCw className={`h-4 w-4 mr-2 ${isLoadingTransactions ? 'animate-spin' : ''}`} />
-            Refresh
-          </Button>
-        </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 by ID, description, or type..."
-              value={searchTerm}
-              onChange={(e) => handleSearch(e.target.value)}
-              className="pl-10"
-            />
-          </div>
-
-          <Select value={typeFilter} onValueChange={handleTypeFilter}>
-            <SelectTrigger className="w-full sm:w-48">
-              <Filter className="h-4 w-4 mr-2" />
-              <SelectValue placeholder="Filter by type" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Types</SelectItem>
-              <SelectItem value="deposit">Deposits</SelectItem>
-              <SelectItem value="withdrawal">Withdrawals</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* Transactions Table */}
-        {filteredTransactions.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">
-              <History className="w-8 h-8 text-muted-foreground" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">No Transactions Found</h3>
-            <p className="text-muted-foreground">
-              {searchTerm || typeFilter !== 'all'
-                ? 'No transactions match your current filters'
-                : "You don't have any transactions yet"}
-            </p>
-          </div>
-        ) : (
-          <div className="rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Date & Time</TableHead>
-                  <TableHead>Type</TableHead>
-                  <TableHead>Amount</TableHead>
-                  <TableHead>Balance After</TableHead>
-                  <TableHead>Description</TableHead>
-                  <TableHead>Reference</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredTransactions.map((transaction: any, index: number) => {
-                  const isDeposit = transaction.type?.toLowerCase() === 'deposit' || transaction.type?.toLowerCase() === 'credit';
-                  return (
-                    <TableRow key={transaction.id || index}>
-                      <TableCell>
-                        <div>
-                          <div className="font-medium">
-                            {formatDate(transaction.created_at || transaction.timestamp)}
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {getRelativeTime(transaction.created_at || transaction.timestamp)}
-                          </div>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex items-center gap-2">
-                          {getTypeIcon(transaction.type)}
-                          <Badge variant={getTypeVariant(transaction.type)}>
-                            {transaction.type || 'Unknown'}
-                          </Badge>
-                        </div>
-                      </TableCell>
-                      <TableCell className="font-mono font-semibold">
-                        <span className={isDeposit ? 'text-green-600' : 'text-red-600'}>
-                          {isDeposit ? '+' : '-'}
-                          {formatCurrency(Math.abs(transaction.amount || transaction.amount_usd || 0))}
-                        </span>
-                      </TableCell>
-                      <TableCell className="font-mono">
-                        {formatCurrency(transaction.balance_after || 0)}
-                      </TableCell>
-                      <TableCell className="text-sm">
-                        {transaction.description || transaction.note || 'No description'}
-                      </TableCell>
-                      <TableCell className="font-mono text-sm text-muted-foreground">
-                        {transaction.reference || transaction.payment_id
-                          ? `${(transaction.reference || transaction.payment_id).toString().slice(0, 8)}...`
-                          : 'N/A'}
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

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

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

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

@@ -1,17 +0,0 @@
-/**
- * Transactions View (v2.0 - Simplified)
- * View transaction history and balance changes
- */
-
-'use client';
-
-import React from 'react';
-import { TransactionsList } from './components';
-
-export const TransactionsView: React.FC = () => {
-  return (
-    <div className="space-y-6">
-      <TransactionsList />
-    </div>
-  );
-};

package/src/layouts/SupportLayout/README.md

@@ -1,91 +0,0 @@
-# Support Layout
-
-Modern support ticket system layout with resizable panels and mobile-optimized interface.
-
-## Features
-
-- ✅ **Desktop**: Resizable split-panel view (ticket list | conversation)
-- ✅ **Mobile**: Single-column navigation with back/forward flow
-- ✅ **Real-time**: Auto-refresh messages after sending
-- ✅ **Event-driven**: Dialog management via custom events
-- ✅ **Type-safe**: Full TypeScript support with generated API types
-- ✅ **Smart UI**: Unread counters, status badges, relative timestamps
-
-## Architecture
-
-```
-SupportLayout
-├── SupportLayoutProvider (UI state + events wrapper)
-│   └── SupportProvider (API context from @djangocfg/api)
-│       └── AccountsProvider (for user.id in ticket creation)
-└── Components
-    ├── TicketList (scrollable ticket cards)
-    ├── MessageList (conversation bubbles)
-    ├── MessageInput (with keyboard shortcuts)
-    └── CreateTicketDialog (event-driven)
-```
-
-## Usage
-
-```tsx
-import { SupportLayout } from '@djangocfg/layouts';
-
-export default function SupportPage() {
-  return <SupportLayout />;
-}
-```
-
-## Event-based Dialog Opening
-
-```tsx
-import { openCreateTicketDialog } from '@djangocfg/layouts';
-
-function MyComponent() {
-  return (
-    <Button onClick={openCreateTicketDialog}>
-      Create Ticket
-    </Button>
-  );
-}
-```
-
-## API Integration
-
-Uses generated SWR hooks from `@djangocfg/api/cfg/contexts`:
-- `useSupportContext()` - Tickets CRUD, messages CRUD
-- Automatic cache revalidation after mutations
-- Type-safe request/response handling
-
-## Mobile Optimization
-
-- Auto-detects screen width (≤768px)
-- Single-column navigation when mobile
-- Back button to return to ticket list
-- Optimized touch targets
-
-## Key Components
-
-### TicketCard
-- Status badges with color-coding
-- Unread message counters
-- Relative timestamps
-- Click to select
-
-### MessageList
-- Auto-scroll to latest message
-- User vs. Admin message styling
-- Avatar placeholders
-- Timestamp formatting
-
-### MessageInput
-- Multi-line support (Shift+Enter)
-- Submit on Enter
-- Disabled when ticket closed
-- Loading states
-
-### CreateTicketDialog
-- Subject + initial message
-- Zod validation
-- Auto-selects created ticket
-- Toast notifications
-

package/src/layouts/SupportLayout/SupportLayout.tsx

@@ -1,179 +0,0 @@
-// @ts-nocheck
-/**
- * Support Layout
- * Modern support layout with resizable panels for desktop and mobile-optimized view
- */
-
-'use client';
-
-import React from 'react';
-import { SupportProvider } from '@djangocfg/layouts/contexts';
-import { SupportLayoutProvider, useSupportLayoutContext } from './context';
-import {
-  TicketList,
-  MessageList,
-  MessageInput,
-  CreateTicketDialog,
-} from './components';
-import {
-  Button,
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from '@djangocfg/ui-nextjs';
-import { Plus, LifeBuoy, ArrowLeft } from 'lucide-react';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Support Layout Content (with context)
-// ─────────────────────────────────────────────────────────────────────────
-
-const SupportLayoutContent: React.FC = () => {
-  const { selectedTicket, selectTicket, openCreateDialog, getUnreadCount } =
-    useSupportLayoutContext();
-  const [isMobile, setIsMobile] = React.useState(false);
-  
-  React.useEffect(() => {
-    const checkMobile = () => setIsMobile(window.innerWidth <= 768);
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
-  }, []);
-
-  const unreadCount = getUnreadCount();
-
-  if (isMobile) {
-    // Mobile layout - single column with navigation
-    return (
-      <div className="h-screen flex flex-col overflow-hidden">
-        {/* Mobile Header */}
-        <div className="flex items-center justify-between p-4 border-b bg-background flex-shrink-0">
-          <div className="flex items-center gap-2">
-            {selectedTicket ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => selectTicket(null)}
-                className="p-1"
-              >
-                <ArrowLeft className="h-5 w-5" />
-              </Button>
-            ) : (
-              <LifeBuoy className="h-6 w-6 text-primary" />
-            )}
-            <h1 className="text-xl font-semibold">
-              {selectedTicket ? selectedTicket.subject : 'Support'}
-            </h1>
-            {unreadCount > 0 && !selectedTicket && (
-              <div className="h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
-                {unreadCount}
-              </div>
-            )}
-          </div>
-          {!selectedTicket && (
-            <Button onClick={openCreateDialog} size="sm">
-              <Plus className="h-4 w-4 mr-2" />
-              New Ticket
-            </Button>
-          )}
-        </div>
-
-        {/* Mobile Content */}
-        <div className="flex-1 min-h-0 overflow-hidden">
-          {selectedTicket ? (
-            // Show messages when ticket is selected
-            <div className="h-full flex flex-col">
-              <div className="flex-1 min-h-0 overflow-hidden">
-                <MessageList />
-              </div>
-              <div className="flex-shrink-0">
-                <MessageInput />
-              </div>
-            </div>
-          ) : (
-            // Show ticket list when no ticket is selected
-            <TicketList />
-          )}
-        </div>
-
-        {/* Dialog */}
-        <CreateTicketDialog />
-      </div>
-    );
-  }
-
-  // Desktop layout - resizable panels
-  return (
-    <div className="h-screen flex flex-col overflow-hidden">
-      {/* Desktop Header */}
-      <div className="flex items-center justify-between p-6 border-b bg-background flex-shrink-0">
-        <div className="flex items-center gap-3">
-          <LifeBuoy className="h-7 w-7 text-primary" />
-          <div>
-            <h1 className="text-2xl font-bold">Support Center</h1>
-            <p className="text-sm text-muted-foreground">Get help from our support team</p>
-          </div>
-          {unreadCount > 0 && (
-            <div className="h-6 w-6 bg-red-500 text-white text-sm rounded-full flex items-center justify-center">
-              {unreadCount}
-            </div>
-          )}
-        </div>
-
-        <Button onClick={openCreateDialog}>
-          <Plus className="h-4 w-4 mr-2" />
-          New Ticket
-        </Button>
-      </div>
-
-      {/* Desktop Content */}
-      <div className="flex-1 min-h-0 overflow-hidden">
-        <ResizablePanelGroup direction="horizontal" className="h-full">
-          {/* Ticket List Panel */}
-          <ResizablePanel defaultSize={35} minSize={25} maxSize={50}>
-            <div className="h-full border-r overflow-hidden">
-              <TicketList />
-            </div>
-          </ResizablePanel>
-
-          <ResizableHandle withHandle className="hover:bg-accent transition-colors" />
-
-          {/* Messages Panel */}
-          <ResizablePanel defaultSize={65} minSize={50}>
-            <div className="h-full flex flex-col overflow-hidden">
-              <div className="flex-1 min-h-0 overflow-hidden">
-                <MessageList />
-              </div>
-              <div className="flex-shrink-0">
-                <MessageInput />
-              </div>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
-
-      {/* Dialog */}
-      <CreateTicketDialog />
-    </div>
-  );
-};
-
-// ─────────────────────────────────────────────────────────────────────────
-// Support Layout (with providers)
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface SupportLayoutProps {
-  children?: React.ReactNode;
-}
-
-export const SupportLayout: React.FC<SupportLayoutProps> = () => {
-  return (
-    <div className="h-screen w-full overflow-hidden">
-      <SupportProvider>
-        <SupportLayoutProvider>
-          <SupportLayoutContent />
-        </SupportLayoutProvider>
-      </SupportProvider>
-    </div>
-  );
-};
-