braid-ui 1.0.99 → 1.0.100

package/src/components/alerts/AlertDocuments.tsx

@@ -1,320 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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>
-  )
-}

package/src/components/alerts/AlertTimeline.tsx

@@ -1,79 +0,0 @@
-import { TimelineEvent } from "@/lib/mock-data/alert-data"
-import { CheckCircle, Circle, UserPlus, Edit, XCircle } from "lucide-react"
-import { cn } from "@/lib/utils"
-
-interface AlertTimelineProps {
-  events: TimelineEvent[]
-}
-
-export const AlertTimeline = ({ events }: AlertTimelineProps) => {
-  const getIcon = (action: string) => {
-    if (action.includes("Created")) return <Circle className="h-4 w-4" />
-    if (action.includes("Assigned")) return <UserPlus className="h-4 w-4" />
-    if (action.includes("Updated") || action.includes("Modified")) return <Edit className="h-4 w-4" />
-    if (action.includes("Closed") || action.includes("Resolved")) return <CheckCircle className="h-4 w-4" />
-    if (action.includes("Rejected")) return <XCircle className="h-4 w-4" />
-    return <Circle className="h-4 w-4" />
-  }
-
-  const getStatusColor = (status?: string) => {
-    switch (status) {
-      case "Unassigned":
-        return "text-destructive"
-      case "Closed":
-        return "text-success"
-      case "In Progress":
-        return "text-warning"
-      default:
-        return "text-muted-foreground"
-    }
-  }
-
-  if (events.length === 0) {
-    return (
-      <div className="text-center py-8 text-muted-foreground">
-        No timeline events yet
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-3">
-      {events.map((event, index) => (
-        <div key={event.id} className="relative pl-6 pb-3">
-          {/* Timeline line */}
-          {index !== events.length - 1 && (
-            <div className="absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" />
-          )}
-          
-          {/* Icon */}
-          <div className={cn(
-            "absolute left-0 top-0 flex-none",
-            getStatusColor(event.status)
-          )}>
-            <div className="h-4 w-4">
-              {getIcon(event.action)}
-            </div>
-          </div>
-          
-          {/* Content */}
-          <div className="space-y-0.5">
-            <p className="text-xs font-medium text-foreground">{event.action}</p>
-            <p className="text-xs text-muted-foreground">by {event.user}</p>
-            {event.details && (
-              <p className="text-xs text-muted-foreground">{event.details}</p>
-            )}
-            {event.status && (
-              <p className={cn("text-xs font-medium", getStatusColor(event.status))}>
-                Status: {event.status}
-              </p>
-            )}
-            <p className="text-xs text-muted-foreground/70 pt-0.5">
-              {event.timestamp}
-            </p>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}