braid-ui 1.0.99 → 1.0.100

package/src/lib/schemas/wire-schemas.ts

@@ -1,44 +0,0 @@
-import { z } from "zod"
-import { addressSchema } from "./counterparty-schemas"
-
-export const wireBasicInfoSchema = z.object({
-  counterpartyName: z.string().min(1, "Counterparty name is required"),
-  shortName: z.string().min(1, "Short name is required"),
-  type: z.string().min(1, "Type is required"),
-  description: z.string().optional(),
-})
-
-export const beneficiarySchema = z.object({
-  name: z.string().min(1, "Beneficiary name is required"),
-  accountNumber: z.string().min(1, "Account number is required"),
-  address: addressSchema,
-})
-
-export const originatorFISchema = z.object({
-  accountNumber: z.string().min(1, "Account number is required"),
-  name: z.string().min(1, "FI name is required"),
-  idType: z.string().min(1, "ID type is required"),
-  idNumber: z.string().min(1, "ID number is required"),
-  address: addressSchema,
-})
-
-export const intermediaryFISchema = z.object({
-  accountNumber: z.string().optional(),
-  name: z.string().optional(),
-  idType: z.string().optional(),
-  idNumber: z.string().optional(),
-  address: addressSchema.optional(),
-})
-
-export const wireTransferSchema = z.object({
-  basicInfo: wireBasicInfoSchema,
-  beneficiary: beneficiarySchema,
-  originatorFI: originatorFISchema,
-  intermediaryFI: intermediaryFISchema.optional(),
-})
-
-export type WireBasicInfo = z.infer<typeof wireBasicInfoSchema>
-export type Beneficiary = z.infer<typeof beneficiarySchema>
-export type OriginatorFI = z.infer<typeof originatorFISchema>
-export type IntermediaryFI = z.infer<typeof intermediaryFISchema>
-export type WireTransfer = z.infer<typeof wireTransferSchema>

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);

package/src/pages/Cases.tsx

@@ -1,16 +0,0 @@
-import { PageLayout } from "@/components/ui/page-layout"
-
-const Cases = () => {
-  return (
-    <PageLayout 
-      title="Cases" 
-      description="Manage and track investigation cases"
-    >
-      <div className="text-center py-12 text-muted-foreground">
-        Cases content coming soon
-      </div>
-    </PageLayout>
-  )
-}
-
-export default Cases

package/src/pages/Dashboard.tsx

@@ -1,16 +0,0 @@
-import { PageLayout } from "@/components/ui/page-layout"
-
-const Dashboard = () => {
-  return (
-    <PageLayout 
-      title="Dashboard" 
-      description="Overview of your system metrics and activity"
-    >
-      <div className="text-center py-12 text-muted-foreground">
-        Dashboard content coming soon
-      </div>
-    </PageLayout>
-  )
-}
-
-export default Dashboard

package/src/pages/NotFound.tsx

@@ -1,27 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { useEffect } from "react";
-
-const NotFound = () => {
-  const location = useLocation();
-
-  useEffect(() => {
-    console.error(
-      "404 Error: User attempted to access non-existent route:",
-      location.pathname
-    );
-  }, [location.pathname]);
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">404</h1>
-        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
-        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
-          Return to Home
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default NotFound;

package/src/pages/TransactionHistory.tsx

@@ -1,532 +0,0 @@
-import { useState } from "react"
-import { useNavigate } from "react-router-dom"
-import { StatusBadge } from "@/components/ui/status-badge"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { ChevronLeft, ChevronRight, Filter, Calendar as CalendarIcon } from "lucide-react"
-import { mockTransactions, Transaction } from "@/lib/mock-data/transaction-data"
-import { format } from "date-fns"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from "@/components/ui/sheet"
-import { EnhancedInput } from "@/components/ui/enhanced-input"
-import { EnhancedSelect } from "@/components/ui/enhanced-select"
-import { Calendar } from "@/components/ui/calendar"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { cn } from "@/lib/utils"
-
-const TransactionHistory = () => {
-  const navigate = useNavigate()
-  const [currentPage, setCurrentPage] = useState(1)
-  const [rowsPerPage, setRowsPerPage] = useState(100)
-  const [filters, setFilters] = useState({
-    accountNumber: "",
-    product: "",
-    customerId: "",
-    counterpartyId: "",
-    settlementFileName: "",
-    originalFileName: "",
-    requesterIpAddress: "",
-    requesterUsername: "",
-    wireFileHandle: "",
-    paymentId: "",
-    transactionType: "",
-    transactionStatus: "",
-    processingStatus: "",
-    direction: "",
-    minAmount: "",
-    maxAmount: "",
-    creationDateStart: undefined as Date | undefined,
-    creationDateEnd: undefined as Date | undefined,
-    postDateStart: undefined as Date | undefined,
-    postDateEnd: undefined as Date | undefined
-  })
-
-  const handleFilterChange = (field: string, value: string | Date | undefined) => {
-    setFilters(prev => ({ ...prev, [field]: value }))
-  }
-
-  const applyFilters = () => {
-    // Apply filter logic here
-    console.log("Applying filters:", filters)
-  }
-
-  const resetFilters = () => {
-    setFilters({
-      accountNumber: "",
-      product: "",
-      customerId: "",
-      counterpartyId: "",
-      settlementFileName: "",
-      originalFileName: "",
-      requesterIpAddress: "",
-      requesterUsername: "",
-      wireFileHandle: "",
-      paymentId: "",
-      transactionType: "",
-      transactionStatus: "",
-      processingStatus: "",
-      direction: "",
-      minAmount: "",
-      maxAmount: "",
-      creationDateStart: undefined,
-      creationDateEnd: undefined,
-      postDateStart: undefined,
-      postDateEnd: undefined
-    })
-  }
-
-  // Pagination calculations
-  const totalPages = Math.ceil(mockTransactions.length / rowsPerPage)
-  const startIndex = (currentPage - 1) * rowsPerPage
-  const endIndex = startIndex + rowsPerPage
-  const paginatedTransactions = mockTransactions.slice(startIndex, endIndex)
-
-  const handlePageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= totalPages) {
-      setCurrentPage(newPage)
-    }
-  }
-
-  const handleRowsPerPageChange = (value: number) => {
-    setRowsPerPage(value)
-    setCurrentPage(1)
-  }
-
-  const formatCurrency = (value: number) => {
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2
-    }).format(value)
-    return formatted
-  }
-
-  return (
-    <div className="flex flex-col h-screen bg-gradient-subtle">
-      {/* Fixed Header */}
-      <div className="flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container mx-auto px-4 py-4 max-w-none">
-          <div className="flex items-center justify-between">
-            <h1 className="text-3xl font-bold text-foreground">Transaction History</h1>
-            <Sheet>
-              <SheetTrigger asChild>
-                <Button variant="outline" className="gap-2">
-                  <Filter className="h-4 w-4" />
-                  Filters
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="right" className="w-full sm:max-w-xl overflow-y-auto">
-                <SheetHeader>
-                  <SheetTitle>Transaction Filters</SheetTitle>
-                </SheetHeader>
-                
-                <div className="space-y-6 py-6">
-                  <div className="grid grid-cols-2 gap-4">
-                    <EnhancedInput
-                      label="Account Number"
-                      value={filters.accountNumber}
-                      onChange={(e) => handleFilterChange("accountNumber", e.target.value)}
-                      placeholder="Enter account number"
-                    />
-
-                    <EnhancedSelect
-                      label="Product"
-                      value={filters.product}
-                      onValueChange={(value) => handleFilterChange("product", value)}
-                      placeholder="Select product"
-                      options={[
-                        { value: "wire", label: "Wire" },
-                        { value: "ach", label: "ACH" },
-                        { value: "check", label: "Check" }
-                      ]}
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <EnhancedInput
-                      label="Customer ID"
-                      value={filters.customerId}
-                      onChange={(e) => handleFilterChange("customerId", e.target.value)}
-                      placeholder="Enter customer ID"
-                    />
-
-                    <EnhancedInput
-                      label="Counterparty ID"
-                      value={filters.counterpartyId}
-                      onChange={(e) => handleFilterChange("counterpartyId", e.target.value)}
-                      placeholder="Enter counterparty ID"
-                    />
-                  </div>
-
-                  <EnhancedInput
-                    label="Settlement File Name"
-                    value={filters.settlementFileName}
-                    onChange={(e) => handleFilterChange("settlementFileName", e.target.value)}
-                    placeholder="Enter settlement file name"
-                  />
-
-                  <EnhancedInput
-                    label="Original File Name"
-                    value={filters.originalFileName}
-                    onChange={(e) => handleFilterChange("originalFileName", e.target.value)}
-                    placeholder="Enter original file name"
-                  />
-
-                  <EnhancedInput
-                    label="Requester IP Address"
-                    value={filters.requesterIpAddress}
-                    onChange={(e) => handleFilterChange("requesterIpAddress", e.target.value)}
-                    placeholder="Enter IP address"
-                  />
-
-                  <EnhancedInput
-                    label="Requester Username"
-                    value={filters.requesterUsername}
-                    onChange={(e) => handleFilterChange("requesterUsername", e.target.value)}
-                    placeholder="Enter username"
-                  />
-
-                  <EnhancedInput
-                    label="Wire File Handle"
-                    value={filters.wireFileHandle}
-                    onChange={(e) => handleFilterChange("wireFileHandle", e.target.value)}
-                    placeholder="Enter wire file handle"
-                  />
-
-                  <EnhancedInput
-                    label="Payment ID"
-                    value={filters.paymentId}
-                    onChange={(e) => handleFilterChange("paymentId", e.target.value)}
-                    placeholder="Enter payment ID"
-                  />
-
-                  <EnhancedSelect
-                    label="Transaction Type"
-                    value={filters.transactionType}
-                    onValueChange={(value) => handleFilterChange("transactionType", value)}
-                    placeholder="Select transaction type"
-                    options={[
-                      { value: "ach_credit", label: "ACH Credit" },
-                      { value: "ach_debit", label: "ACH Debit" },
-                      { value: "wire_domestic", label: "Wire Domestic" },
-                      { value: "wire_international", label: "Wire International" }
-                    ]}
-                  />
-
-                  <EnhancedSelect
-                    label="Transaction Status"
-                    value={filters.transactionStatus}
-                    onValueChange={(value) => handleFilterChange("transactionStatus", value)}
-                    placeholder="Select transaction status"
-                    options={[
-                      { value: "PENDING", label: "Pending" },
-                      { value: "POSTED", label: "Posted" },
-                      { value: "FAILED", label: "Failed" },
-                      { value: "CANCELLED", label: "Cancelled" }
-                    ]}
-                  />
-
-                  <EnhancedSelect
-                    label="Processing Status"
-                    value={filters.processingStatus}
-                    onValueChange={(value) => handleFilterChange("processingStatus", value)}
-                    placeholder="Select processing status"
-                    options={[
-                      { value: "processing", label: "Processing" },
-                      { value: "completed", label: "Completed" },
-                      { value: "error", label: "Error" }
-                    ]}
-                  />
-
-                  <EnhancedSelect
-                    label="Direction"
-                    value={filters.direction}
-                    onValueChange={(value) => handleFilterChange("direction", value)}
-                    placeholder="Select direction"
-                    options={[
-                      { value: "credit", label: "Credit" },
-                      { value: "debit", label: "Debit" }
-                    ]}
-                  />
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <EnhancedInput
-                      label="Min Amount"
-                      type="number"
-                      value={filters.minAmount}
-                      onChange={(e) => handleFilterChange("minAmount", e.target.value)}
-                      placeholder="0.00"
-                    />
-
-                    <EnhancedInput
-                      label="Max Amount"
-                      type="number"
-                      value={filters.maxAmount}
-                      onChange={(e) => handleFilterChange("maxAmount", e.target.value)}
-                      placeholder="0.00"
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium">Creation Date Start</label>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            className={cn(
-                              "w-full justify-start text-left font-normal",
-                              !filters.creationDateStart && "text-muted-foreground"
-                            )}
-                          >
-                             <CalendarIcon className="mr-2 h-4 w-4" />
-                            {filters.creationDateStart ? format(filters.creationDateStart, "MM/dd/yyyy") : <span>MM/DD/YYYY</span>}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0 bg-background z-50" align="start">
-                          <Calendar
-                            mode="single"
-                            selected={filters.creationDateStart}
-                            onSelect={(date) => handleFilterChange("creationDateStart", date)}
-                            initialFocus
-                            className="pointer-events-auto"
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium">Creation Date End</label>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            className={cn(
-                              "w-full justify-start text-left font-normal",
-                              !filters.creationDateEnd && "text-muted-foreground"
-                            )}
-                          >
-                            <CalendarIcon className="mr-2 h-4 w-4" />
-                            {filters.creationDateEnd ? format(filters.creationDateEnd, "MM/dd/yyyy") : <span>MM/DD/YYYY</span>}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0 bg-background z-50" align="start">
-                          <Calendar
-                            mode="single"
-                            selected={filters.creationDateEnd}
-                            onSelect={(date) => handleFilterChange("creationDateEnd", date)}
-                            initialFocus
-                            className="pointer-events-auto"
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium">Post Date Start</label>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            className={cn(
-                              "w-full justify-start text-left font-normal",
-                              !filters.postDateStart && "text-muted-foreground"
-                            )}
-                          >
-                            <CalendarIcon className="mr-2 h-4 w-4" />
-                            {filters.postDateStart ? format(filters.postDateStart, "MM/dd/yyyy") : <span>MM/DD/YYYY</span>}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0 bg-background z-50" align="start">
-                          <Calendar
-                            mode="single"
-                            selected={filters.postDateStart}
-                            onSelect={(date) => handleFilterChange("postDateStart", date)}
-                            initialFocus
-                            className="pointer-events-auto"
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium">Post Date End</label>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            className={cn(
-                              "w-full justify-start text-left font-normal",
-                              !filters.postDateEnd && "text-muted-foreground"
-                            )}
-                          >
-                            <CalendarIcon className="mr-2 h-4 w-4" />
-                            {filters.postDateEnd ? format(filters.postDateEnd, "MM/dd/yyyy") : <span>MM/DD/YYYY</span>}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0 bg-background z-50" align="start">
-                          <Calendar
-                            mode="single"
-                            selected={filters.postDateEnd}
-                            onSelect={(date) => handleFilterChange("postDateEnd", date)}
-                            initialFocus
-                            className="pointer-events-auto"
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </div>
-                </div>
-
-                <SheetFooter className="gap-2">
-                  <Button variant="outline" onClick={resetFilters}>
-                    Reset Filters
-                  </Button>
-                  <Button onClick={applyFilters}>
-                    Apply Filters
-                  </Button>
-                </SheetFooter>
-              </SheetContent>
-            </Sheet>
-          </div>
-        </div>
-      </div>
-
-      {/* Scrollable Content */}
-      <div className="flex-1 overflow-hidden">
-        <div className="container mx-auto px-4 h-full max-w-none flex flex-col">
-          <div className="flex-1 mt-4 rounded-lg border bg-card overflow-hidden flex flex-col">
-            <div className="flex-1 overflow-auto">
-              <table className="w-full table-fixed">
-                <colgroup>
-                  <col className="w-28" />
-                  <col className="w-28" />
-                  <col className="w-24" />
-                  <col className="w-36" />
-                  <col className="w-36" />
-                  <col className="w-auto" />
-                  <col className="w-36" />
-                  <col className="w-24" />
-                  <col className="w-28" />
-                </colgroup>
-                <thead className="sticky top-0 bg-card z-10 shadow-sm">
-                  <tr className="border-b">
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Created</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Account Number</th>
-                    <th className="px-3 py-2 text-right text-xs font-medium bg-muted/50">Amount</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Customer</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Counterparty</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Description</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Transaction Type</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Status</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Updated</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {paginatedTransactions.map((transaction) => (
-                    <tr 
-                      key={transaction.id} 
-                      onClick={() => navigate(`/transactions/${transaction.id}`)}
-                      className="border-b hover:bg-muted/50 transition-colors cursor-pointer"
-                    >
-                      <td className="px-3 py-2 text-xs">{transaction.created}</td>
-                      <td className="px-3 py-2 text-xs">{transaction.accountNumber}</td>
-                      <td className="px-3 py-2 text-xs text-right">
-                        <span className={transaction.amount < 0 ? "text-destructive" : ""}>
-                          {formatCurrency(transaction.amount)}
-                        </span>
-                      </td>
-                      <td className="px-3 py-2">
-                        <Button variant="link" className="h-auto p-0 font-normal text-xs">
-                          {transaction.customer}
-                        </Button>
-                      </td>
-                      <td className="px-3 py-2">
-                        <Button variant="link" className="h-auto p-0 font-normal text-xs">
-                          {transaction.counterparty}
-                        </Button>
-                      </td>
-                      <td className="px-3 py-2 text-xs truncate">{transaction.description}</td>
-                      <td className="px-3 py-2">
-                        <Badge variant="outline" className="font-normal whitespace-nowrap text-xs">
-                          {transaction.transactionType}
-                        </Badge>
-                      </td>
-                      <td className="px-3 py-2">
-                        <StatusBadge status={transaction.status} />
-                      </td>
-                      <td className="px-3 py-2 text-xs">{transaction.updated}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            
-            {/* Pagination Footer */}
-            <div className="flex-none border-t bg-background py-3 px-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm text-muted-foreground">Rows per page:</span>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="outline" size="sm" className="h-8 gap-1">
-                        {rowsPerPage}
-                        <ChevronRight className="h-4 w-4 rotate-90" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="start" className="bg-background z-50">
-                      <DropdownMenuItem onClick={() => handleRowsPerPageChange(100)}>
-                        100
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => handleRowsPerPageChange(200)}>
-                        200
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => handleRowsPerPageChange(500)}>
-                        500
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-
-                <div className="flex items-center gap-4">
-                  <span className="text-sm text-muted-foreground">
-                    Page {currentPage} of {totalPages}
-                  </span>
-                  <div className="flex items-center gap-1">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-8 w-8 p-0"
-                      onClick={() => handlePageChange(currentPage - 1)}
-                      disabled={currentPage === 1}
-                    >
-                      <ChevronLeft className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-8 w-8 p-0"
-                      onClick={() => handlePageChange(currentPage + 1)}
-                      disabled={currentPage === totalPages}
-                    >
-                      <ChevronRight className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default TransactionHistory