courrier refactor rebuild 2

components/email/ComposeEmail.tsx

@@ -181,8 +181,38 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           const subject = subjectBase.match(/^Re:/i) ? subjectBase : `Re: ${subjectBase}`;
           setSubject(subject);
           
-          // Set an empty content with proper spacing before the quoted content
+          // Format the reply content with the quoted message included directly
-          setEmailContent('<div><br/><br/></div>');
+          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
+          const sender = initialEmail.from && initialEmail.from.length > 0 
+            ? initialEmail.from[0].name || initialEmail.from[0].address 
+            : 'Unknown sender';
+          const date = initialEmail.date ? 
+            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
+            new Date();
+          
+          // Format date for display
+          const formattedDate = date.toLocaleString('en-US', {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+          });
+          
+          // Create reply content with quote
+          const replyContent = `
+            <div><br></div>
+            <div><br></div>
+            <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
+            <blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
+              <div style="font-size: 13px;">
+                ${content}
+              </div>
+            </blockquote>
+          `;
+          
+          setEmailContent(replyContent);
           
           // Show CC field if there are CC recipients
           if (initialEmail.cc && initialEmail.cc.length > 0) {
@@ -195,8 +225,45 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           const subject = subjectBase.match(/^(Fwd|FW|Forward):/i) ? subjectBase : `Fwd: ${subjectBase}`;
           setSubject(subject);
           
-          // Set an empty content with proper spacing before the quoted content
+          // Format the forward content with the original email included directly
-          setEmailContent('<div><br/><br/></div>');
+          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
+          const fromString = formatEmailAddresses(initialEmail.from || []);
+          const toString = formatEmailAddresses(initialEmail.to || []);
+          const date = initialEmail.date ? 
+            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
+            new Date();
+          
+          // Format date for display
+          const formattedDate = date.toLocaleString('en-US', {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+          });
+          
+          // Create forwarded content
+          const forwardContent = `
+            <div><br></div>
+            <div><br></div>
+            <div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
+              <div style="font-family: Arial, sans-serif; color: #333;">
+                <div style="margin-bottom: 15px;">
+                  <div>---------- Forwarded message ---------</div>
+                  <div><b>From:</b> ${fromString}</div>
+                  <div><b>Date:</b> ${formattedDate}</div>
+                  <div><b>Subject:</b> ${initialEmail.subject || ''}</div>
+                  <div><b>To:</b> ${toString}</div>
+                </div>
+                <div class="email-original-content">
+                  ${content}
+                </div>
+              </div>
+            </div>
+          `;
+          
+          setEmailContent(forwardContent);
           
           // If the original email has attachments, we should include them
           if (initialEmail.attachments && initialEmail.attachments.length > 0) {
@@ -363,16 +430,6 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
               </div>
             </div>
             
-            {/* Add QuotedEmailContent for replies and forwards */}
-            {initialEmail && (type === 'reply' || type === 'reply-all' || type === 'forward') && (
-              <div className="mt-4">
-                <EmailMessageToQuotedContentAdapter 
-                  email={initialEmail} 
-                  type={type}
-                />
-              </div>
-            )}
-            
             {/* Attachments */}
             {attachments.length > 0 && (
               <div className="border rounded-md p-3 mt-4">
@@ -499,6 +556,78 @@ function LegacyAdapter({
     return 'new';
   };
   
+  // Format legacy content on mount if necessary
+  useEffect(() => {
+    // Only format if we have original email and no content was set yet
+    if ((originalEmail || replyTo || forwardFrom) && 
+       (!composeBody || composeBody === '<p></p>' || composeBody === '<br>')) {
+      
+      const type = determineType();
+      
+      if (type === 'reply' || type === 'reply-all') {
+        // For reply, format with sender info and original content
+        const content = originalEmail?.content || '';
+        const sender = replyTo?.name || replyTo?.email || 'Unknown sender';
+        const date = new Date().toLocaleString('en-US', {
+          weekday: 'short',
+          year: 'numeric', 
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+        
+        const replyContent = `
+          <div><br></div>
+          <div><br></div>
+          <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${date}, ${sender} wrote:</div>
+          <blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
+            <div style="font-size: 13px;">
+              ${content}
+            </div>
+          </blockquote>
+        `;
+        
+        setComposeBody(replyContent);
+      }
+      else if (type === 'forward') {
+        // For forward, format with original message details
+        const content = originalEmail?.content || '';
+        const fromString = forwardFrom?.name || forwardFrom?.email || 'Unknown';
+        const toString = 'Recipients';
+        const date = new Date().toLocaleString('en-US', {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+        
+        const forwardContent = `
+          <div><br></div>
+          <div><br></div>
+          <div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
+            <div style="font-family: Arial, sans-serif; color: #333;">
+              <div style="margin-bottom: 15px;">
+                <div>---------- Forwarded message ---------</div>
+                <div><b>From:</b> ${fromString}</div>
+                <div><b>Date:</b> ${date}</div>
+                <div><b>Subject:</b> ${composeSubject || ''}</div>
+                <div><b>To:</b> ${toString}</div>
+              </div>
+              <div class="email-original-content">
+                ${content}
+              </div>
+            </div>
+          </div>
+        `;
+        
+        setComposeBody(forwardContent);
+      }
+    }
+  }, [originalEmail, replyTo, forwardFrom, composeBody, determineType, composeSubject]);
+  
   // Converts attachments to the expected format
   const convertAttachments = () => {
     return attachments.map(att => ({
@@ -660,18 +789,6 @@ function LegacyAdapter({
               </div>
             </div>
             
-            {/* Add QuotedEmailContent for replies and forwards */}
-            {(originalEmail || replyTo || forwardFrom) && 
-             (determineType() === 'reply' || determineType() === 'reply-all' || determineType() === 'forward') && (
-              <div className="mt-4">
-                {/* For legacy adapter, we'd need to convert the different formats */}
-                {/* Since we don't have the full implementation for this, we'll add a placeholder */}
-                <div className="border-t border-gray-200 pt-4 mt-2 text-gray-500 italic">
-                  <p>Original message content would appear here</p>
-                </div>
-              </div>
-            )}
-            
             {/* Attachments */}
             {attachments.length > 0 && (
               <div className="border rounded-md p-3 mt-4">

components/email/RichEmailEditor.tsx

@@ -314,6 +314,38 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
           font-size: 13px !important;
         }
         
+        /* Status styles for email displays */
+        :global(.ql-editor td[class*="status"]), 
+        :global(.ql-editor td[class*="Status"]) {
+          background-color: #f8f9fa !important;
+          font-weight: 500 !important;
+        }
+        
+        /* Amount styles */
+        :global(.ql-editor td[class*="amount"]), 
+        :global(.ql-editor td[class*="Amount"]),
+        :global(.ql-editor td[class*="price"]),
+        :global(.ql-editor td[class*="Price"]) {
+          text-align: right !important;
+          font-family: monospace !important;
+        }
+        
+        /* Header row styles */
+        :global(.ql-editor tr:first-child td),
+        :global(.ql-editor th) {
+          background-color: #f8f9fa !important;
+          font-weight: 600 !important;
+        }
+        
+        /* Improve table cells with specific content */
+        :global(.ql-editor td:has(div[class*="number"])),
+        :global(.ql-editor td:has(div[class*="Number"])),
+        :global(.ql-editor td:has(div[class*="invoice"])),
+        :global(.ql-editor td:has(div[class*="Invoice"])) {
+          font-family: monospace !important;
+          letter-spacing: 0.5px !important;
+        }
+        
         /* Fix quoted paragraphs */
         :global(.ql-editor blockquote p) {
           margin-bottom: 8px !important;