braid-ui 1.0.99 → 1.0.100

package/src/pages/transactions/TransactionDetail.tsx

@@ -1,192 +0,0 @@
-import { useParams, useNavigate } from "react-router-dom"
-import { PageLayout } from "@/components/ui/page-layout"
-import { FormCard } from "@/components/ui/form-card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { mockTransactions } from "@/lib/mock-data/transaction-data"
-import { mockTransactionTimeline } from "@/lib/mock-data/transaction-data"
-import { InfoField } from "@/components/ui/info-field"
-import { AlertTimeline } from "@/components/alerts/AlertTimeline"
-import { cn } from "@/lib/utils"
-import { WireDetailsSection } from "@/components/transaction/WireDetailsSection"
-import { ACHDetailsSection } from "@/components/transaction/ACHDetailsSection"
-
-const TransactionDetail = () => {
-  const { id } = useParams()
-  const navigate = useNavigate()
-  
-  const transaction = mockTransactions.find(t => t.id === id)
-  
-  if (!transaction) {
-    return (
-      <div className="container mx-auto px-4 py-8">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-2">Transaction Not Found</h1>
-          <p className="text-muted-foreground mb-4">The transaction #{id} could not be found.</p>
-          <Button onClick={() => navigate("/transactions/history")}>
-            Back to Transaction History
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "POSTED":
-        return "text-success"
-      case "PENDING":
-        return "text-warning"
-      case "FAILED":
-        return "text-destructive"
-      case "CANCELLED":
-        return "text-muted-foreground"
-      default:
-        return ""
-    }
-  }
-
-  const getStatusVariant = (status: string): any => {
-    switch (status) {
-      case "POSTED":
-        return "success"
-      case "PENDING":
-        return "warning"
-      case "FAILED":
-        return "destructive"
-      case "CANCELLED":
-        return "outline"
-      default:
-        return "outline"
-    }
-  }
-
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2
-    }).format(value)
-  }
-
-  const isWireTransfer = transaction.transactionType.toLowerCase().includes('wire')
-  const isACHTransfer = transaction.transactionType.toLowerCase().includes('ach')
-
-  return (
-    <PageLayout 
-      title={`Transaction #${transaction.id}`}
-      maxWidth="full"
-      actions={[
-        {
-          label: "Return",
-          variant: "outline",
-          onClick: () => console.log("Return transaction")
-        },
-        {
-          label: "Cancel",
-          variant: "default",
-          onClick: () => console.log("Cancel transaction")
-        }
-      ]}
-    >
-      {/* 3-Column Layout: Left section with cards, Timeline on Right */}
-      <div className="flex flex-col lg:flex-row items-start gap-6">
-        {/* Left Section: Transaction cards */}
-        <div className="flex-1 space-y-6">
-          {/* Transaction Information */}
-          <FormCard title="Details">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
-              <InfoField 
-                label="Transaction Type" 
-                value={<Badge variant="outline">{transaction.transactionType}</Badge>}
-                layout="horizontal"
-              />
-              <InfoField 
-                label="Status" 
-                value={<Badge variant={getStatusVariant(transaction.status)}>{transaction.status}</Badge>}
-                layout="horizontal"
-              />
-              <InfoField 
-                label="Amount" 
-                value={
-                  <span className={cn(
-                    "font-semibold",
-                    transaction.amount < 0 ? "text-destructive" : "text-success"
-                  )}>
-                    {formatCurrency(transaction.amount)}
-                  </span>
-                }
-                layout="horizontal"
-              />
-              <InfoField 
-                label="Account Number" 
-                value={
-                  <Button variant="link" className="h-auto p-0 text-sm">
-                    {transaction.accountNumber}
-                  </Button>
-                }
-                layout="horizontal"
-              />
-              <InfoField 
-                label="Customer Name" 
-                value={
-                  <Button variant="link" className="h-auto p-0 text-sm">
-                    {transaction.customer}
-                  </Button>
-                }
-                layout="horizontal"
-              />
-              <InfoField label="Description" value={transaction.description} layout="horizontal" />
-              <InfoField 
-                label="Direction" 
-                value={transaction.amount < 0 ? "DEBIT" : "CREDIT"}
-                layout="horizontal"
-              />
-              <InfoField label="Counterparty Name" value={transaction.counterparty} layout="horizontal" />
-              <InfoField label="Post Date" value={transaction.created.split(' ')[0]} layout="horizontal" />
-              <InfoField label="OFAC ID" value={<Button variant="link" className="h-auto p-0 text-sm">18323208</Button>} layout="horizontal" />
-              <InfoField label="Original Filename" value="-" layout="horizontal" />
-              <InfoField label="Loaded From File" value="iso21130757012764355B7.xml.126534273Q299" layout="horizontal" />
-              <InfoField label="Payment ID" value={transaction.id} layout="horizontal" />
-              <InfoField label="Linked Payment ID" value="-" layout="horizontal" />
-              <InfoField label="Is Inbound" value="True" layout="horizontal" />
-              <InfoField label="Pending until Date" value="-" layout="horizontal" />
-              <InfoField label="Processing Status" value="Sent" layout="horizontal" />
-              <InfoField label="Further Credit To" value="-" layout="horizontal" />
-              <InfoField label="Balance Available Date" value="-" layout="horizontal" />
-              <InfoField label="Requester Username" value="-" layout="horizontal" />
-              <InfoField label="Requester IP Address" value="-" layout="horizontal" />
-              <InfoField label="Settlement Filename" value="-" layout="horizontal" />
-              <InfoField label="Duplicate of Payment ID" value="-" layout="horizontal" />
-              <InfoField 
-                label="Product ID" 
-                value={<Button variant="link" className="h-auto p-0 text-sm">130</Button>}
-                layout="horizontal"
-              />
-              <InfoField label="Returned In File" value="-" layout="horizontal" />
-              <InfoField label="Alerts" value="-" layout="horizontal" />
-            </div>
-          </FormCard>
-
-          {/* ACH or Wire Details */}
-          {isACHTransfer && transaction.achDetails && (
-            <ACHDetailsSection data={transaction.achDetails} />
-          )}
-          
-          {isWireTransfer && transaction.wireDetails && (
-            <WireDetailsSection data={transaction.wireDetails} />
-          )}
-        </div>
-
-        {/* Right Section: Timeline Column */}
-        <div className="lg:w-64">
-          <FormCard title="Transaction Timeline">
-            <AlertTimeline events={mockTransactionTimeline} />
-          </FormCard>
-        </div>
-      </div>
-    </PageLayout>
-  )
-}
-
-export default TransactionDetail

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tailwind.config.ts

@@ -1,124 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-	darkMode: ["class"],
-	content: [
-		"./pages/**/*.{ts,tsx}",
-		"./components/**/*.{ts,tsx}",
-		"./app/**/*.{ts,tsx}",
-		"./src/**/*.{ts,tsx}",
-	],
-	prefix: "",
-	theme: {
-		container: {
-			center: true,
-			padding: '2rem',
-			screens: {
-				'2xl': '1400px'
-			}
-		},
-		extend: {
-			colors: {
-				border: 'hsl(var(--border))',
-				input: 'hsl(var(--input))',
-				ring: 'hsl(var(--ring))',
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))',
-					glow: 'hsl(var(--primary-glow))'
-				},
-				secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
-					foreground: 'hsl(var(--secondary-foreground))'
-				},
-				destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
-					foreground: 'hsl(var(--destructive-foreground))'
-				},
-				success: {
-					DEFAULT: 'hsl(var(--success))',
-					foreground: 'hsl(var(--success-foreground))'
-				},
-				warning: {
-					DEFAULT: 'hsl(var(--warning))',
-					foreground: 'hsl(var(--warning-foreground))'
-				},
-				muted: {
-					DEFAULT: 'hsl(var(--muted))',
-					foreground: 'hsl(var(--muted-foreground))'
-				},
-				accent: {
-					DEFAULT: 'hsl(var(--accent))',
-					foreground: 'hsl(var(--accent-foreground))'
-				},
-				popover: {
-					DEFAULT: 'hsl(var(--popover))',
-					foreground: 'hsl(var(--popover-foreground))'
-				},
-				card: {
-					DEFAULT: 'hsl(var(--card))',
-					foreground: 'hsl(var(--card-foreground))'
-				},
-				form: {
-					background: 'hsl(var(--form-background))',
-					border: 'hsl(var(--form-border))',
-					'border-focus': 'hsl(var(--form-border-focus))',
-					'border-error': 'hsl(var(--form-border-error))',
-					'border-success': 'hsl(var(--form-border-success))'
-				},
-				sidebar: {
-					DEFAULT: 'hsl(var(--sidebar-background))',
-					foreground: 'hsl(var(--sidebar-foreground))',
-					primary: 'hsl(var(--sidebar-primary))',
-					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-					accent: 'hsl(var(--sidebar-accent))',
-					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-					border: 'hsl(var(--sidebar-border))',
-					ring: 'hsl(var(--sidebar-ring))'
-				}
-			},
-			borderRadius: {
-				lg: 'var(--radius)',
-				md: 'calc(var(--radius) - 2px)',
-				sm: 'calc(var(--radius) - 4px)'
-			},
-			keyframes: {
-				'accordion-down': {
-					from: {
-						height: '0'
-					},
-					to: {
-						height: 'var(--radix-accordion-content-height)'
-					}
-				},
-				'accordion-up': {
-					from: {
-						height: 'var(--radix-accordion-content-height)'
-					},
-					to: {
-						height: '0'
-					}
-				}
-			},
-			animation: {
-				'accordion-down': 'accordion-down 0.2s ease-out',
-				'accordion-up': 'accordion-up 0.2s ease-out'
-			},
-			backgroundImage: {
-				'gradient-primary': 'var(--gradient-primary)',
-				'gradient-subtle': 'var(--gradient-subtle)'
-			},
-			boxShadow: {
-				'form': 'var(--shadow-form)',
-				'form-focus': 'var(--shadow-form-focus)',
-				'form-error': 'var(--shadow-form-error)'
-			},
-			transitionProperty: {
-				'form': 'var(--transition-form)'
-			}
-		}
-	},
-	plugins: [require("tailwindcss-animate")],
-} satisfies Config;

package/tsconfig.app.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": false,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noImplicitAny": false,
-    "noFallthroughCasesInSwitch": false,
-
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "noImplicitAny": false,
-    "noUnusedParameters": false,
-    "skipLibCheck": true,
-    "allowJs": true,
-    "noUnusedLocals": false,
-    "strictNullChecks": false
-  }
-}

package/tsconfig.node.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,22 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import path from "path";
-import { componentTagger } from "lovable-tagger";
-
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => ({
-  server: {
-    host: "::",
-    port: 8080,
-  },
-  plugins: [
-    react(),
-    mode === 'development' &&
-    componentTagger(),
-  ].filter(Boolean),
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-}));