braid-ui 1.0.99 → 1.0.100

package/src/pages/UIKit.tsx

@@ -1,51 +0,0 @@
-import * as React from "react"
-import { Container } from "@/components/ui/container"
-import { Stack } from "@/components/ui/stack"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { UIKitShowcase } from "@/components/ui-kit/showcase"
-import { PatternLibrary } from "@/components/ui-kit/pattern-library"
-import { DashboardDemo } from "@/components/ui-kit/dashboard-demo"
-import { Breadcrumb } from "@/components/ui/breadcrumb"
-
-export default function UIKit() {
-  const breadcrumbs = [
-    { label: "UI Kit" }
-  ]
-
-  return (
-    <div className="min-h-screen bg-gradient-subtle">
-      <Container size="xl">
-        <Stack spacing="lg">
-          <Breadcrumb items={breadcrumbs} />
-          
-          <div>
-            <h1 className="text-3xl font-bold text-foreground">UI Kit</h1>
-            <p className="text-muted-foreground mt-2">
-              Complete collection of reusable components, layouts, and patterns
-            </p>
-          </div>
-
-          <Tabs defaultValue="showcase" className="w-full">
-            <TabsList className="grid w-full grid-cols-3">
-              <TabsTrigger value="showcase">Component Showcase</TabsTrigger>
-              <TabsTrigger value="patterns">Pattern Library</TabsTrigger>
-              <TabsTrigger value="demo">Dashboard Demo</TabsTrigger>
-            </TabsList>
-
-            <TabsContent value="showcase" className="mt-6">
-              <UIKitShowcase />
-            </TabsContent>
-
-            <TabsContent value="patterns" className="mt-6">
-              <PatternLibrary />
-            </TabsContent>
-
-            <TabsContent value="demo" className="mt-6">
-              <DashboardDemo />
-            </TabsContent>
-          </Tabs>
-        </Stack>
-      </Container>
-    </div>
-  )
-}

package/src/pages/alerts/AlertDetail.tsx

@@ -1,193 +0,0 @@
-import { useState } from "react"
-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 { Edit } from "lucide-react"
-import { mockAlerts } from "@/lib/mock-data/alert-data"
-import { cn } from "@/lib/utils"
-import { AlertTimeline } from "@/components/alerts/AlertTimeline"
-import { AlertNotes } from "@/components/alerts/AlertNotes"
-import { AlertDocuments } from "@/components/alerts/AlertDocuments"
-import { ContextSection } from "@/components/alerts/ContextSection"
-import { InfoField } from "@/components/ui/info-field"
-import { EditableInfoField } from "@/components/ui/editable-info-field"
-
-const RFI_STATUS_OPTIONS = [
-  { value: "Completed", label: "Completed" },
-  { value: "Provided", label: "Provided" },
-  { value: "Pending", label: "Pending" }
-]
-
-const ASSIGNEE_OPTIONS = [
-  { value: "John Smith", label: "John Smith" },
-  { value: "Sarah Johnson", label: "Sarah Johnson" },
-  { value: "Michael Chen", label: "Michael Chen" },
-  { value: "approverdev", label: "approverdev" },
-  { value: "Unassigned", label: "Unassigned" }
-]
-
-const AlertDetail = () => {
-  const { id } = useParams()
-  const navigate = useNavigate()
-  
-  const alert = mockAlerts.find(a => a.id === id)
-  
-  // Local state for editable fields
-  const [rfiStatus, setRfiStatus] = useState(alert?.rfiStatus || "")
-  const [assignee, setAssignee] = useState(alert?.assignee || "Unassigned")
-
-  const handleRfiStatusChange = (newStatus: string) => {
-    setRfiStatus(newStatus)
-    console.log("RFI Status updated to:", newStatus)
-    // TODO: API call to update alert
-  }
-
-  const handleAssigneeChange = (newAssignee: string) => {
-    setAssignee(newAssignee)
-    console.log("Assignee updated to:", newAssignee)
-    // TODO: API call to update alert
-  }
-  
-  if (!alert) {
-    return (
-      <div className="container mx-auto px-4 py-8">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-2">Alert Not Found</h1>
-          <p className="text-muted-foreground mb-4">The alert #{id} could not be found.</p>
-          <Button onClick={() => navigate("/alerts")}>
-            Back to Alerts
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
-  const getTypeBadgeVariant = (type: string): any => {
-    switch (type) {
-      case "Ofac":
-        return "alert-ofac"
-      case "Dual Approval":
-        return "alert-dual"
-      case "Transaction Monitoring":
-        return "alert-monitoring"
-      case "Transaction Processing Error":
-        return "alert-error"
-      default:
-        return "outline"
-    }
-  }
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "Unassigned":
-        return "text-destructive"
-      case "Closed":
-        return "text-success"
-      case "In Progress":
-        return "text-warning"
-      default:
-        return ""
-    }
-  }
-
-  return (
-    <PageLayout 
-      title={`Alert #${alert.id}`}
-      description={alert.description}
-      maxWidth="full"
-      actions={[
-        {
-          label: "Back to Alerts",
-          variant: "outline",
-          onClick: () => navigate("/alerts")
-        },
-        {
-          label: "Assign",
-          variant: "outline",
-          onClick: () => console.log("Assign alert")
-        },
-        {
-          label: "Close Alert",
-          variant: "default",
-          onClick: () => console.log("Close alert")
-        }
-      ]}
-    >
-      {/* 3-Column Layout: 2x2 Grid on Left, Timeline on Right */}
-      <div className="flex flex-col lg:flex-row gap-6">
-        {/* Left Section: 2x2 Grid */}
-        <div className="flex-1 grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Alert Information */}
-          <FormCard
-            title="Alert Information"
-            headerActions={
-              <Button variant="ghost" size="sm">
-                <Edit className="h-4 w-4" />
-              </Button>
-            }
-          >
-            <div className="grid grid-cols-2 gap-4">
-              <InfoField label="Alert ID" value={alert.id} />
-              <InfoField 
-                label="Type" 
-                value={<Badge variant={getTypeBadgeVariant(alert.type)}>{alert.type}</Badge>} 
-              />
-              <InfoField 
-                label="Status" 
-                value={<span className={cn("font-medium", getStatusColor(alert.status))}>{alert.status}</span>} 
-              />
-              <InfoField label="Created At" value={alert.createdAt} />
-              <InfoField 
-                label="Context Type" 
-                value={<Badge variant="outline">{alert.contextType}</Badge>} 
-              />
-              <InfoField label="Context ID" value={alert.contextId || "N/A"} />
-              <EditableInfoField
-                label="Assignee"
-                value={assignee}
-                options={ASSIGNEE_OPTIONS}
-                onChange={handleAssigneeChange}
-                placeholder="Unassigned"
-              />
-              <EditableInfoField
-                label="RFI Status"
-                value={rfiStatus}
-                options={RFI_STATUS_OPTIONS}
-                onChange={handleRfiStatusChange}
-                placeholder="Select status"
-                renderValue={(value) => <Badge variant="success">{value}</Badge>}
-              />
-              <div className="col-span-2">
-                <InfoField label="Description" value={alert.description} />
-              </div>
-            </div>
-          </FormCard>
-
-          {/* Context Section */}
-          <ContextSection alert={alert} />
-
-          {/* Notes Section */}
-          <FormCard title="Notes">
-            <AlertNotes alertId={alert.id} notes={alert.notes || []} />
-          </FormCard>
-
-          {/* Documents Section */}
-          <FormCard title="Documents">
-            <AlertDocuments alertId={alert.id} documents={alert.documents || []} />
-          </FormCard>
-        </div>
-
-        {/* Right Section: Timeline Column */}
-        <div className="lg:w-64">
-          <FormCard title="Status Timeline" className="h-full">
-            <AlertTimeline events={alert.timeline || []} />
-          </FormCard>
-        </div>
-      </div>
-    </PageLayout>
-  )
-}
-
-export default AlertDetail

package/src/pages/alerts/Alerts.tsx

@@ -1,373 +0,0 @@
-import { useState } from "react"
-import { useNavigate } from "react-router-dom"
-import { PageLayout } from "@/components/ui/page-layout"
-import { Button } from "@/components/ui/button"
-import { Filter, ChevronLeft, ChevronRight } from "lucide-react"
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from "@/components/ui/sheet"
-import { Badge } from "@/components/ui/badge"
-import { mockAlerts, Alert } from "@/lib/mock-data/alert-data"
-import { EnhancedInput } from "@/components/ui/enhanced-input"
-import { EnhancedSelect } from "@/components/ui/enhanced-select"
-import { cn } from "@/lib/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const Alerts = () => {
-  const navigate = useNavigate()
-  const [filters, setFilters] = useState({
-    alertId: "",
-    contextId: "",
-    contextType: "",
-    alertType: "",
-    alertStatus: "",
-    assignee: "",
-    rfiStatus: "",
-    startDate: "",
-    endDate: ""
-  })
-
-  const [filteredAlerts, setFilteredAlerts] = useState<Alert[]>(mockAlerts)
-  const [currentPage, setCurrentPage] = useState(1)
-  const [rowsPerPage, setRowsPerPage] = useState(100)
-
-  const handleFilterChange = (field: string, value: string) => {
-    setFilters(prev => ({ ...prev, [field]: value }))
-  }
-
-  const applyFilters = () => {
-    let filtered = mockAlerts
-
-    if (filters.alertId) {
-      filtered = filtered.filter(alert => alert.id.includes(filters.alertId))
-    }
-    if (filters.alertStatus) {
-      filtered = filtered.filter(alert => alert.status === filters.alertStatus)
-    }
-    if (filters.alertType) {
-      filtered = filtered.filter(alert => alert.type === filters.alertType)
-    }
-    if (filters.contextType) {
-      filtered = filtered.filter(alert => alert.contextType === filters.contextType)
-    }
-    if (filters.rfiStatus) {
-      filtered = filtered.filter(alert => alert.rfiStatus === filters.rfiStatus)
-    }
-
-    setFilteredAlerts(filtered)
-    setCurrentPage(1) // Reset to first page when applying filters
-  }
-
-  const resetFilters = () => {
-    setFilters({
-      alertId: "",
-      contextId: "",
-      contextType: "",
-      alertType: "",
-      alertStatus: "",
-      assignee: "",
-      rfiStatus: "",
-      startDate: "",
-      endDate: ""
-    })
-    setFilteredAlerts(mockAlerts)
-    setCurrentPage(1) // Reset to first page when resetting filters
-  }
-
-  const getTypeBadgeVariant = (type: string): any => {
-    switch (type) {
-      case "Ofac":
-        return "alert-ofac"
-      case "Dual Approval":
-        return "alert-dual"
-      case "Transaction Monitoring":
-        return "alert-monitoring"
-      case "Transaction Processing Error":
-        return "alert-error"
-      default:
-        return "outline"
-    }
-  }
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "Unassigned":
-        return "text-destructive"
-      case "Closed":
-        return "text-success"
-      case "In Progress":
-        return "text-warning"
-      default:
-        return ""
-    }
-  }
-
-  // Pagination calculations
-  const totalPages = Math.ceil(filteredAlerts.length / rowsPerPage)
-  const startIndex = (currentPage - 1) * rowsPerPage
-  const endIndex = startIndex + rowsPerPage
-  const paginatedAlerts = filteredAlerts.slice(startIndex, endIndex)
-
-  const handlePageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= totalPages) {
-      setCurrentPage(newPage)
-    }
-  }
-
-  const handleRowsPerPageChange = (value: number) => {
-    setRowsPerPage(value)
-    setCurrentPage(1) // Reset to first page when changing rows per page
-  }
-
-  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">Alerts</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>Alert Filters</SheetTitle>
-                </SheetHeader>
-                
-                <div className="space-y-6 py-6">
-                  <EnhancedInput
-                    label="Alert ID"
-                    value={filters.alertId}
-                    onChange={(e) => handleFilterChange("alertId", e.target.value)}
-                    placeholder="Enter alert ID"
-                  />
-
-                  <EnhancedInput
-                    label="Context ID"
-                    value={filters.contextId}
-                    onChange={(e) => handleFilterChange("contextId", e.target.value)}
-                    placeholder="Enter context ID"
-                  />
-
-                  <EnhancedSelect
-                    label="Context Type"
-                    value={filters.contextType}
-                    onValueChange={(value) => handleFilterChange("contextType", value)}
-                    placeholder="Select context type"
-                    options={[
-                      { value: "Ofac", label: "Ofac" },
-                      { value: "Transaction", label: "Transaction" },
-                      { value: "Product", label: "Product" },
-                      { value: "File Record", label: "File Record" }
-                    ]}
-                  />
-
-                  <EnhancedSelect
-                    label="Alert Type"
-                    value={filters.alertType}
-                    onValueChange={(value) => handleFilterChange("alertType", value)}
-                    placeholder="Select alert type"
-                    options={[
-                      { value: "Ofac", label: "Ofac" },
-                      { value: "Dual Approval", label: "Dual Approval" },
-                      { value: "Transaction Monitoring", label: "Transaction Monitoring" },
-                      { value: "Transaction Processing Error", label: "Transaction Processing Error" }
-                    ]}
-                  />
-
-                  <EnhancedSelect
-                    label="Alert Status"
-                    value={filters.alertStatus}
-                    onValueChange={(value) => handleFilterChange("alertStatus", value)}
-                    placeholder="Select status"
-                    options={[
-                      { value: "Unassigned", label: "Unassigned" },
-                      { value: "Closed", label: "Closed" },
-                      { value: "In Progress", label: "In Progress" }
-                    ]}
-                  />
-
-                  <EnhancedInput
-                    label="Assignee"
-                    value={filters.assignee}
-                    onChange={(e) => handleFilterChange("assignee", e.target.value)}
-                    placeholder="Enter assignee name"
-                  />
-
-                  <EnhancedSelect
-                    label="RFI Status"
-                    value={filters.rfiStatus}
-                    onValueChange={(value) => handleFilterChange("rfiStatus", value)}
-                    placeholder="Select RFI status"
-                    options={[
-                      { value: "Completed", label: "Completed" },
-                      { value: "Provided", label: "Provided" },
-                      { value: "Pending", label: "Pending" }
-                    ]}
-                  />
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <EnhancedInput
-                      label="Start Date"
-                      type="date"
-                      value={filters.startDate}
-                      onChange={(e) => handleFilterChange("startDate", e.target.value)}
-                    />
-
-                    <EnhancedInput
-                      label="End Date"
-                      type="date"
-                      value={filters.endDate}
-                      onChange={(e) => handleFilterChange("endDate", e.target.value)}
-                    />
-                  </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-36" />
-                  <col className="w-52" />
-                  <col className="w-32" />
-                  <col className="w-36" />
-                  <col className="w-32" />
-                  <col className="w-auto" />
-                </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">Alert ID</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Created At</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">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">Context Type</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">RFI Status</th>
-                    <th className="px-3 py-2 text-left text-xs font-medium bg-muted/50">Description</th>
-                  </tr>
-                </thead>
-                <tbody>
-                    {paginatedAlerts.map((alert) => (
-                      <tr 
-                        key={alert.id} 
-                        className="border-b hover:bg-muted/50 transition-colors cursor-pointer"
-                        onClick={() => navigate(`/alerts/${alert.id}`)}
-                      >
-                        <td className="px-3 py-2 text-xs">{alert.id}</td>
-                        <td className="px-3 py-2 text-xs">{alert.createdAt}</td>
-                        <td className="px-3 py-2">
-                          <Badge variant={getTypeBadgeVariant(alert.type)} className="whitespace-nowrap">
-                            {alert.type}
-                          </Badge>
-                        </td>
-                        <td className="px-3 py-2">
-                          <span className={cn("text-xs font-medium", getStatusColor(alert.status))}>
-                            {alert.status}
-                          </span>
-                        </td>
-                        <td className="px-3 py-2">
-                          <Badge variant="outline" className="whitespace-nowrap">
-                            {alert.contextType}
-                          </Badge>
-                        </td>
-                        <td className="px-3 py-2">
-                          {alert.rfiStatus && (
-                            <Badge variant="success" className="whitespace-nowrap">
-                              {alert.rfiStatus}
-                            </Badge>
-                          )}
-                        </td>
-                        <td className="px-3 py-2 text-xs truncate">
-                          {alert.description}
-                        </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 Alerts

package/src/pages/business/Business.tsx

@@ -1,48 +0,0 @@
-import { DetailPageLayout } from "@/components/ui/detail-page-layout"
-import { BusinessProfileCard } from "@/components/form-sections/BusinessProfileCard"
-import { BusinessStatusCard } from "@/components/form-sections/BusinessStatusCard"
-import { ContactInfoCard } from "@/components/form-sections/ContactInfoCard"
-import { BankingDetailsCard } from "@/components/form-sections/BankingDetailsCard"
-
-const Business = () => {
-  return (
-    <DetailPageLayout
-      title="Business Management"
-      description="Manage business entities and their configurations"
-      cards={[
-        {
-          key: "profile",
-          component: BusinessProfileCard,
-          expandOnEdit: true
-        },
-        {
-          key: "status",
-          component: BusinessStatusCard,
-          expandOnEdit: true
-        },
-        {
-          key: "contact", 
-          component: ContactInfoCard,
-          expandOnEdit: true
-        },
-        {
-          key: "banking",
-          component: BankingDetailsCard,
-          expandOnEdit: true
-        }
-      ]}
-      actions={[
-        {
-          label: "Export Data",
-          variant: "outline"
-        },
-        {
-          label: "Edit Business",
-          className: "bg-gradient-primary hover:opacity-90"
-        }
-      ]}
-    />
-  )
-}
-
-export default Business