braid-ui 1.0.97 → 1.0.99

package/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

package/public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /

package/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/App.tsx

@@ -0,0 +1,94 @@
+import { Toaster } from "@/components/ui/toaster";
+import { Toaster as Sonner } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/app-sidebar";
+import { MainLayout } from "@/components/MainLayout";
+import NotFound from "./pages/NotFound";
+
+// Counterparty pages
+import CounterpartyManage from "./pages/counterparty/Manage";
+import CreateCounterparty from "./pages/counterparty/Create";
+import CounterpartyDomesticWire from "./pages/counterparty/DomesticWire";
+
+// Alerts pages
+import Alerts from "./pages/alerts/Alerts";
+import AlertDetail from "./pages/alerts/AlertDetail";
+
+// Dashboard page
+import Dashboard from "./pages/Dashboard";
+
+// Cases page
+import Cases from "./pages/Cases";
+
+// Business pages
+import Business from "./pages/business/Business";
+import CreateBusiness from "./pages/business/Create";
+
+// UI Kit pages
+import UIKit from "./pages/UIKit";
+
+// Transaction pages
+import TransactionHistory from "./pages/TransactionHistory";
+import TransactionDetail from "./pages/transactions/TransactionDetail";
+import NewTransaction from "./pages/transactions/NewTransaction";
+
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <TooltipProvider>
+      <Toaster />
+      <Sonner />
+      <BrowserRouter>
+        <SidebarProvider>
+          <div className="flex min-h-screen w-full">
+            <AppSidebar />
+            <MainLayout>
+              <Routes>
+          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          
+          {/* Dashboard Route */}
+          <Route path="/dashboard" element={<Dashboard />} />
+          
+          {/* Alerts Routes */}
+          <Route path="/alerts" element={<Alerts />} />
+          <Route path="/alerts/:id" element={<AlertDetail />} />
+          <Route path="/cases" element={<Cases />} />
+          
+          {/* Counterparty Routes */}
+          <Route path="/counterparty/manage" element={<CounterpartyManage />} />
+          <Route path="/counterparty/create" element={<CreateCounterparty />} />
+          <Route path="/counterparty/domestic-wire" element={<CounterpartyDomesticWire />} />
+          
+          {/* Legacy redirects */}
+          <Route path="/counterparty/details" element={<Navigate to="/counterparty/manage" replace />} />
+          <Route path="/counterparty/ach" element={<Navigate to="/counterparty/manage" replace />} />
+          <Route path="/counterparty/wire" element={<Navigate to="/counterparty/manage" replace />} />
+          
+          {/* Business Routes */}
+          <Route path="/business" element={<Business />} />
+          <Route path="/business/create" element={<CreateBusiness />} />
+          
+          {/* UI Kit Routes */}
+          <Route path="/ui-kit" element={<UIKit />} />
+          
+          {/* Transaction Routes */}
+          <Route path="/transactions/history" element={<TransactionHistory />} />
+          <Route path="/transactions/new" element={<NewTransaction />} />
+          <Route path="/transactions/:id" element={<TransactionDetail />} />
+          
+                {/* Catch-all route */}
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            </MainLayout>
+          </div>
+        </SidebarProvider>
+      </BrowserRouter>
+    </TooltipProvider>
+  </QueryClientProvider>
+);
+
+export default App;

package/src/components/MainLayout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react"
+
+interface MainLayoutProps {
+  children: ReactNode
+}
+
+export const MainLayout = ({ children }: MainLayoutProps) => {
+  return (
+    <div className="flex min-h-screen w-full">
+      <main className="flex-1 pl-4">
+        {children}
+      </main>
+    </div>
+  )
+}

package/src/components/alerts/AlertDocuments.tsx

@@ -0,0 +1,320 @@
+import { useState } from "react"
+import { createPortal } from "react-dom"
+import { AlertDocument } from "@/lib/mock-data/alert-data"
+import { Button } from "@/components/ui/button"
+import { toast } from "@/hooks/use-toast"
+import { FileText, Upload, Download, Eye, Trash2, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { EnhancedInput } from "@/components/ui/enhanced-input"
+import { EnhancedTextarea } from "@/components/ui/enhanced-textarea"
+import { EnhancedSelect } from "@/components/ui/enhanced-select"
+
+interface AlertDocumentsProps {
+  alertId: string
+  documents: AlertDocument[]
+}
+
+export const AlertDocuments = ({ alertId, documents }: AlertDocumentsProps) => {
+  const [isUploading, setIsUploading] = useState(false)
+  const [showUploadDialog, setShowUploadDialog] = useState(false)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [documentName, setDocumentName] = useState("")
+  const [description, setDescription] = useState("")
+  const [documentType, setDocumentType] = useState("")
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    
+    setSelectedFile(file)
+    setDocumentName(file.name)
+  }
+
+  const handleUploadSubmit = () => {
+    if (!selectedFile || !documentName || !documentType) {
+      toast({
+        title: "Missing Information",
+        description: "Please fill in all required fields",
+        variant: "destructive"
+      })
+      return
+    }
+
+    setIsUploading(true)
+    
+    // Simulate upload
+    setTimeout(() => {
+      const newDocument: AlertDocument = {
+        id: String(Date.now()),
+        name: documentName,
+        type: documentType,
+        description: description || undefined,
+        size: `${(selectedFile.size / 1024 / 1024).toFixed(1)} MB`,
+        uploadedBy: "Current User",
+        uploadedAt: new Date().toISOString()
+      }
+      
+      toast({
+        title: "Upload Successful",
+        description: `${documentName} uploaded successfully`
+      })
+      setIsUploading(false)
+      setShowUploadDialog(false)
+      resetForm()
+    }, 1000)
+  }
+
+  const resetForm = () => {
+    setSelectedFile(null)
+    setDocumentName("")
+    setDescription("")
+    setDocumentType("")
+    const fileInput = document.getElementById("file-upload") as HTMLInputElement
+    if (fileInput) fileInput.value = ""
+  }
+
+  const handleCancelUpload = () => {
+    setShowUploadDialog(false)
+    resetForm()
+  }
+
+  const isImageType = (name: string) => {
+    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp']
+    return imageExtensions.some(ext => name.toLowerCase().endsWith(ext))
+  }
+
+  const getFileIcon = (type: string) => {
+    return <FileText className="h-5 w-5" />
+  }
+
+  const getFileTypeColor = (type: string) => {
+    switch (type.toUpperCase()) {
+      case "PDF":
+        return "text-red-500"
+      case "DOCX":
+      case "DOC":
+        return "text-blue-500"
+      case "XLSX":
+      case "XLS":
+        return "text-green-500"
+      case "JPG":
+      case "JPEG":
+      case "PNG":
+        return "text-purple-500"
+      default:
+        return "text-muted-foreground"
+    }
+  }
+
+  const documentTypeOptions = [
+    { value: "ID_DOCUMENT_FRONT", label: "ID Document (Front)" },
+    { value: "ID_DOCUMENT_BACK", label: "ID Document (Back)" },
+    { value: "PASSPORT", label: "Passport" },
+    { value: "PROOF_OF_ADDRESS", label: "Proof of Address" },
+    { value: "BANK_STATEMENT", label: "Bank Statement" },
+    { value: "BUSINESS_LICENSE", label: "Business License" },
+    { value: "TAX_DOCUMENT", label: "Tax Document" },
+    { value: "OTHER", label: "Other" }
+  ]
+
+  return (
+    <div className="space-y-6">
+      {/* Upload Dialog - Render using portal */}
+      {showUploadDialog && createPortal(
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+          <div 
+            className="fixed inset-0 bg-background/80 backdrop-blur-sm"
+            onClick={handleCancelUpload}
+          />
+          <div className="relative bg-card border rounded-lg shadow-lg max-w-lg w-full p-6 z-[101]">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-2xl font-bold">Upload Document</h2>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={handleCancelUpload}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="space-y-4">
+              {/* File Upload Area Inside Dialog */}
+              <div className="border-2 border-dashed rounded-lg p-6 text-center hover:border-primary/50 transition-colors">
+                <input
+                  type="file"
+                  id="file-upload-dialog"
+                  className="hidden"
+                  onChange={handleFileSelect}
+                  disabled={isUploading}
+                />
+                <label
+                  htmlFor="file-upload-dialog"
+                  className={cn(
+                    "cursor-pointer flex flex-col items-center gap-2",
+                    isUploading && "opacity-50 cursor-not-allowed"
+                  )}
+                >
+                  <Upload className="h-8 w-8 text-muted-foreground" />
+                  <div>
+                    <p className="text-sm font-medium text-foreground">
+                      {selectedFile ? "Change file" : "Click to upload or drag and drop"}
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      PDF, DOC, DOCX, JPG, PNG up to 10MB
+                    </p>
+                  </div>
+                </label>
+              </div>
+
+              {selectedFile && (
+                <div className="p-3 bg-muted/50 rounded-lg">
+                  <p className="text-sm text-muted-foreground">Selected file:</p>
+                  <p className="text-sm font-medium">{selectedFile.name}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+                  </p>
+                </div>
+              )}
+
+              <EnhancedInput
+                label="Document name"
+                value={documentName}
+                onChange={(e) => setDocumentName(e.target.value)}
+                placeholder="Enter document name"
+              />
+
+              <EnhancedTextarea
+                label="Description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Enter document description (optional)"
+                rows={3}
+              />
+
+              <EnhancedSelect
+                label="Document type"
+                value={documentType}
+                onValueChange={setDocumentType}
+                placeholder="Select document type"
+                options={documentTypeOptions}
+              />
+            </div>
+
+            <div className="flex gap-3 mt-6">
+              <Button
+                variant="outline"
+                onClick={handleCancelUpload}
+                disabled={isUploading}
+                className="flex-1"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleUploadSubmit}
+                disabled={isUploading}
+                className="flex-1"
+              >
+                {isUploading ? "Uploading..." : "Upload"}
+              </Button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Documents List */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium text-foreground">Uploaded Documents</h3>
+          <Button 
+            onClick={() => setShowUploadDialog(true)}
+            variant="ghost"
+            size="sm"
+            className="gap-2 text-primary hover:text-primary"
+          >
+            <Upload className="h-4 w-4" />
+            Upload
+          </Button>
+        </div>
+        {documents.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
+            <p>No documents uploaded yet</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {documents.map((doc) => (
+              <div
+                key={doc.id}
+                className="border rounded-lg hover:bg-muted/30 transition-colors overflow-hidden"
+              >
+                {/* Image Preview for image types */}
+                {isImageType(doc.name) && doc.url && (
+                  <div className="w-full bg-muted/50">
+                    <img 
+                      src={doc.url} 
+                      alt={doc.name}
+                      className="w-full h-48 object-cover"
+                    />
+                  </div>
+                )}
+                
+                <div className="flex items-center justify-between p-3">
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
+                    {!isImageType(doc.name) && (
+                      <div className={cn(getFileTypeColor(doc.type))}>
+                        {getFileIcon(doc.type)}
+                      </div>
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <h4 className="font-medium text-sm truncate">{doc.name}</h4>
+                        <span className={cn("text-xs px-2 py-0.5 rounded-full bg-muted", getFileTypeColor(doc.type))}>
+                          {doc.type}
+                        </span>
+                      </div>
+                      {doc.description && (
+                        <p className="text-sm text-foreground mt-1">{doc.description}</p>
+                      )}
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {doc.size} • Uploaded by {doc.uploadedBy} • {new Date(doc.uploadedAt).toLocaleDateString()}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0"
+                      onClick={() => toast({ title: "Preview", description: `Viewing ${doc.name}` })}
+                    >
+                      <Eye className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0"
+                      onClick={() => toast({ title: "Download", description: `Downloading ${doc.name}` })}
+                    >
+                      <Download className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                      onClick={() => toast({ title: "Delete", description: `Deleted ${doc.name}` })}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/alerts/AlertNotes.tsx

@@ -0,0 +1,185 @@
+import { useState } from "react"
+import { createPortal } from "react-dom"
+import { AlertNote } from "@/lib/mock-data/alert-data"
+import { Button } from "@/components/ui/button"
+import { EnhancedTextarea } from "@/components/ui/enhanced-textarea"
+import { EnhancedSelect } from "@/components/ui/enhanced-select"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "@/hooks/use-toast"
+import { MessageSquare, Plus, X, Trash2 } from "lucide-react"
+
+const NOTE_TYPE_OPTIONS = [
+  { value: "RFI Note", label: "RFI Note" },
+  { value: "Internal Note", label: "Internal Note" }
+]
+
+interface AlertNotesProps {
+  alertId: string
+  notes: AlertNote[]
+}
+
+export const AlertNotes = ({ alertId, notes }: AlertNotesProps) => {
+  const [showNoteDialog, setShowNoteDialog] = useState(false)
+  const [newNote, setNewNote] = useState("")
+  const [noteType, setNoteType] = useState<"RFI Note" | "Internal Note">("RFI Note")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const resetForm = () => {
+    setNewNote("")
+    setNoteType("RFI Note")
+  }
+
+  const handleCancelNote = () => {
+    setShowNoteDialog(false)
+    resetForm()
+  }
+
+  const handleAddNote = async () => {
+    if (!newNote.trim()) {
+      toast({
+        title: "Error",
+        description: "Please enter a note before submitting",
+        variant: "destructive"
+      })
+      return
+    }
+
+    setIsSubmitting(true)
+    
+    // Simulate API call
+    setTimeout(() => {
+      toast({
+        title: "Note Added",
+        description: "Your note has been added successfully"
+      })
+      setShowNoteDialog(false)
+      resetForm()
+      setIsSubmitting(false)
+    }, 500)
+  }
+
+  const handleDeleteNote = (noteId: string, noteContent: string) => {
+    toast({
+      title: "Note Deleted",
+      description: `Note deleted successfully`
+    })
+    // TODO: API call to delete note
+    console.log("Deleting note:", noteId)
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Add Note Dialog - Render using portal */}
+      {showNoteDialog && createPortal(
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+          <div 
+            className="fixed inset-0 bg-background/80 backdrop-blur-sm"
+            onClick={handleCancelNote}
+          />
+          <div className="relative bg-card border rounded-lg shadow-lg max-w-lg w-full p-6 z-[101]">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-2xl font-bold">Add Note</h2>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={handleCancelNote}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="space-y-4">
+              <EnhancedSelect
+                label="Note Type"
+                value={noteType}
+                onValueChange={(value) => setNoteType(value as "RFI Note" | "Internal Note")}
+                options={NOTE_TYPE_OPTIONS}
+              />
+              <EnhancedTextarea
+                label="Note"
+                placeholder="Enter your note here..."
+                value={newNote}
+                onChange={(e) => setNewNote(e.target.value)}
+                rows={6}
+              />
+            </div>
+
+            <div className="flex gap-3 mt-6">
+              <Button
+                variant="outline"
+                onClick={handleCancelNote}
+                disabled={isSubmitting}
+                className="flex-1"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleAddNote}
+                disabled={isSubmitting || !newNote.trim()}
+                className="flex-1"
+              >
+                {isSubmitting ? "Adding..." : "Add Note"}
+              </Button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Notes History */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium text-foreground">Note History</h3>
+          <Button 
+            onClick={() => setShowNoteDialog(true)}
+            variant="ghost"
+            size="sm"
+            className="gap-2 text-primary hover:text-primary"
+          >
+            <Plus className="h-4 w-4" />
+            Add Note
+          </Button>
+        </div>
+        {notes.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
+            <p>No notes yet</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {notes.map((note) => (
+              <div 
+                key={note.id} 
+                className="border rounded-lg p-4 bg-muted/30"
+              >
+                <div className="flex items-start justify-between gap-4 mb-2">
+                  <div className="flex items-center gap-2">
+                    <p className="font-medium text-sm text-foreground">{note.user}</p>
+                    <Badge variant={note.type === "RFI Note" ? "default" : "outline"}>
+                      {note.type}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-muted-foreground whitespace-nowrap">
+                      {note.timestamp}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                      onClick={() => handleDeleteNote(note.id, note.content)}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+                <p className="text-sm text-foreground">{note.content}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}