soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2025-12-15 10:34:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

New invoice bug fix

Browse Source
This commit is contained in:
Sean O'Connor
2025-07-31 18:54:24 -04:00
parent cd062d6670
commit 817689001c
6 changed files with 90 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/dashboard/invoices/[id]/page.tsx
View File

@@ -3,7 +3,7 @@
import { DollarSign, Edit, Loader2, Trash2 } from "lucide-react"; import { DollarSign, Edit, Loader2, Trash2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { notFound, useParams, useRouter } from "next/navigation"; import { notFound, useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useState, useEffect } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { StatusBadge, type StatusType } from "~/components/data/status-badge"; import { StatusBadge, type StatusType } from "~/components/data/status-badge";
import { PageHeader } from "~/components/layout/page-header"; import { PageHeader } from "~/components/layout/page-header";
@@ -505,7 +505,24 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
export default function InvoiceViewPage() { export default function InvoiceViewPage() {
const params = useParams(); const params = useParams();
const router = useRouter();
const id = params.id as string; const id = params.id as string;
// Handle /invoices/new route - redirect to dedicated new page
useEffect(() => {
if (id === "new") {
router.replace("/dashboard/invoices/new");
}
}, [id, router]);
// Don't render anything if we're redirecting
if (id === "new") {
return (
<div className="flex h-96 items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin" />
</div>
);
}
return <InvoiceViewContent invoiceId={id} />; return <InvoiceViewContent invoiceId={id} />;
} }

7
src/app/dashboard/invoices/new/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
"use client";
import InvoiceForm from "~/components/forms/invoice-form";
export default function NewInvoicePage() {
return <InvoiceForm />;
}

2
src/components/ui/button.tsx
View File

@@ -16,7 +16,7 @@ const buttonVariants = cva(
destructive: destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: outline:
"border border-border/40 bg-background/60 shadow-sm backdrop-blur-sm hover:bg-accent/50 hover:text-foreground-foreground hover:border-border/60 transition-colors duration-150", "border border-border/40 bg-background/60 shadow-sm hover:bg-accent/50 hover:text-foreground-foreground hover:border-border/60 transition-colors duration-150",
secondary: secondary:
"bg-secondary text-muted-foreground-foreground shadow-xs hover:bg-secondary/80", "bg-secondary text-muted-foreground-foreground shadow-xs hover:bg-secondary/80",
ghost: ghost:

2
src/components/ui/input.tsx
View File

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type} type={type}
data-slot="input" data-slot="input"
className={cn( className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background/50 text-foreground border-border/40 flex h-10 w-full min-w-0 border px-3 py-2 text-sm shadow-sm backdrop-blur-sm transition-all duration-200 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background/50 text-foreground border-border/40 flex h-10 w-full min-w-0 border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
"focus-visible:border-ring focus-visible:bg-background/80 focus-visible:ring-ring/20 focus-visible:ring-[3px]", "focus-visible:border-ring focus-visible:bg-background/80 focus-visible:ring-ring/20 focus-visible:ring-[3px]",
"hover:border-border/60 hover:bg-background/60", "hover:border-border/60 hover:bg-background/60",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",

79
src/lib/email-templates/invoice-email.ts
View File

@@ -106,9 +106,9 @@ export function generateInvoiceEmailTemplate({
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
line-height: 1.6; line-height: 1.6;
color: #1f2937; color: #0f0f0f;
background-color: #f9fafb; background-color: #f9fafb;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
@@ -118,14 +118,14 @@ export function generateInvoiceEmailTemplate({
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
background-color: #ffffff; background-color: #ffffff;
border-radius: 12px; border-radius: 0;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
.header { .header {
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); background: #0f0f0f;
padding: 32px 24px; padding: 32px 24px;
text-align: center; text-align: center;
color: white; color: white;
@@ -135,15 +135,15 @@ export function generateInvoiceEmailTemplate({
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
margin-bottom: 8px; margin-bottom: 8px;
letter-spacing: -0.5px; letter-spacing: 0.5px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
.header-subtitle { .header-subtitle {
font-size: 16px; font-size: 16px;
opacity: 0.9; opacity: 0.8;
font-weight: normal; font-weight: normal;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
.content { .content {
@@ -154,21 +154,21 @@ export function generateInvoiceEmailTemplate({
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-bottom: 24px; margin-bottom: 24px;
color: #374151; color: #0f0f0f;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
.message { .message {
font-size: 15px; font-size: 15px;
line-height: 1.7; line-height: 1.7;
margin-bottom: 32px; margin-bottom: 32px;
color: #4b5563; color: #374151;
} }
.invoice-card { .invoice-card {
background-color: #f8fafc; background-color: #f9fafb;
border: 1px solid #e2e8f0; border: 1px solid #e5e7eb;
border-radius: 12px; border-radius: 0;
padding: 16px; padding: 16px;
margin: 24px 0; margin: 24px 0;
} }
@@ -180,9 +180,9 @@ export function generateInvoiceEmailTemplate({
.invoice-number { .invoice-number {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #16a34a; color: #0f0f0f;
margin-bottom: 8px; margin-bottom: 8px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
.invoice-date { .invoice-date {
@@ -243,9 +243,9 @@ export function generateInvoiceEmailTemplate({
.business-name { .business-name {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #1f2937; color: #0f0f0f;
margin-bottom: 8px; margin-bottom: 8px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
.business-details { .business-details {
@@ -268,8 +268,8 @@ export function generateInvoiceEmailTemplate({
text-align: center; text-align: center;
margin: 32px 0; margin: 32px 0;
padding: 24px; padding: 24px;
background-color: #f8fafc; background-color: #f9fafb;
border-radius: 8px; border-radius: 0;
} }
.cta-text { .cta-text {
@@ -279,9 +279,9 @@ export function generateInvoiceEmailTemplate({
} }
.attachment-notice { .attachment-notice {
background-color: #f0fdf4; background-color: #f9fafb;
border: 1px solid #bbf7d0; border: 1px solid #e5e7eb;
border-radius: 8px; border-radius: 0;
padding: 16px; padding: 16px;
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
@@ -292,16 +292,16 @@ export function generateInvoiceEmailTemplate({
.attachment-icon { .attachment-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: #16a34a; background-color: #374151;
border-radius: 50%; border-radius: 0;
flex-shrink: 0; flex-shrink: 0;
} }
.attachment-text { .attachment-text {
font-size: 14px; font-size: 14px;
color: #166534; color: #374151;
font-weight: bold; font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
.signature { .signature {
@@ -313,9 +313,9 @@ export function generateInvoiceEmailTemplate({
.signature-name { .signature-name {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #1f2937; color: #0f0f0f;
margin-bottom: 4px; margin-bottom: 4px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
.signature-email { .signature-email {
@@ -333,18 +333,19 @@ export function generateInvoiceEmailTemplate({
.footer-brand { .footer-brand {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #16a34a; color: #0f0f0f;
margin: 0 auto 8px; margin: 0 auto 8px;
display: block; display: block;
text-align: center; text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
letter-spacing: 0.5px;
} }
.footer-text { .footer-text {
font-size: 12px; font-size: 12px;
color: #9ca3af; color: #6b7280;
line-height: 1.5; line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
} }
/* Email client specific fixes */ /* Email client specific fixes */
@@ -370,8 +371,8 @@ export function generateInvoiceEmailTemplate({
/* Apple Mail attachment preview fix */ /* Apple Mail attachment preview fix */
.attachment-notice { .attachment-notice {
border: 2px dashed #bbf7d0 !important; border: 1px solid #e5e7eb !important;
background-color: #f0fdf4 !important; background-color: #f9fafb !important;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@@ -414,7 +415,7 @@ export function generateInvoiceEmailTemplate({
<div class="greeting">${getTimeOfDayGreeting()},</div> <div class="greeting">${getTimeOfDayGreeting()},</div>
<p>I hope this email finds you well. Please find attached invoice <strong>#${invoice.invoiceNumber}</strong> <p>I hope this email finds you well. Please find attached invoice <strong>#${invoice.invoiceNumber}</strong>
for the services provided. The invoice details are summarized below for your reference.</p> for the services provided. The invoice details are summarized below for your reference.</p>
${customMessage ? `<div style="margin: 16px 0; padding: 16px; background-color: #f0fdf4; border-left: 4px solid #16a34a; border-radius: 4px;">${customMessage}</div>` : ""} ${customMessage ? `<div style="margin: 16px 0; padding: 16px; background-color: #f9fafb; border-left: 4px solid #374151; border-radius: 0;">${customMessage}</div>` : ""}
</div> </div>
${customContent ? `<div class="message custom-content">${customContent}</div>` : ""} ${customContent ? `<div class="message custom-content">${customContent}</div>` : ""}
@@ -451,7 +452,7 @@ export function generateInvoiceEmailTemplate({
<table class="detail-row" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: separate; border-spacing: 0; width: 100%; border-top: 2px solid #e5e7eb; margin-top: 8px; padding-top: 12px;"> <table class="detail-row" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: separate; border-spacing: 0; width: 100%; border-top: 2px solid #e5e7eb; margin-top: 8px; padding-top: 12px;">
<tr> <tr>
<td class="detail-label" style="width: 50%; vertical-align: top; padding: 8px 0; text-align: left; font-weight: bold; font-size: 16px;">Total</td> <td class="detail-label" style="width: 50%; vertical-align: top; padding: 8px 0; text-align: left; font-weight: bold; font-size: 16px;">Total</td>
<td class="detail-value" style="width: 50%; vertical-align: top; padding: 8px 0; text-align: right; font-weight: bold; font-size: 18px; color: #16a34a;">${formatCurrency(total)}</td> <td class="detail-value" style="width: 50%; vertical-align: top; padding: 8px 0; text-align: right; font-weight: bold; font-size: 18px; color: #0f0f0f;">${formatCurrency(total)}</td>
</tr> </tr>
</table> </table>
</div> </div>

47
src/lib/email-templates/password-reset-email.ts
View File

@@ -27,10 +27,10 @@ export function generatePasswordResetEmailTemplate({
<title>Password Reset - beenvoice</title> <title>Password Reset - beenvoice</title>
<style> <style>
body { body {
font-family: 'Geist Mono', ui-monospace, 'Courier New', monospace; font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
line-height: 1.6; line-height: 1.6;
color: #0f0f0f; color: #0f0f0f;
background-color: #fafafa; background-color: #f9fafb;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@@ -38,24 +38,20 @@ export function generatePasswordResetEmailTemplate({
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #e5e5e5; border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
} }
.header { .header {
background-color: #f5f5f5; background-color: #0f0f0f;
padding: 32px 32px 24px; padding: 32px 32px 24px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e7eb;
} }
.logo { .logo {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: #0f0f0f; color: #ffffff;
margin: 0; margin: 0;
} letter-spacing: 0.5px;
.logo .dollar {
color: #16a34a;
}
.logo .voice {
opacity: 0.7;
} }
.content { .content {
padding: 32px; padding: 32px;
@@ -77,23 +73,26 @@ export function generatePasswordResetEmailTemplate({
} }
.button { .button {
display: inline-block; display: inline-block;
background-color: #16a34a; background-color: #374151;
color: #ffffff; color: #ffffff;
padding: 12px 24px; padding: 12px 24px;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
border: none; border: 1px solid #374151;
border-radius: 0;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.button:hover { .button:hover {
background-color: #15803d; background-color: #1f2937;
border-color: #1f2937;
} }
.security-notice { .security-notice {
background-color: #f5f5f5; background-color: #f9fafb;
border-left: 4px solid #16a34a; border-left: 4px solid #374151;
padding: 16px; padding: 16px;
margin: 24px 0; margin: 24px 0;
border-radius: 0;
} }
.security-notice h4 { .security-notice h4 {
margin: 0 0 8px 0; margin: 0 0 8px 0;
@@ -107,14 +106,14 @@ export function generatePasswordResetEmailTemplate({
color: #525252; color: #525252;
} }
.footer { .footer {
background-color: #f5f5f5; background-color: #f9fafb;
padding: 24px 32px; padding: 24px 32px;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e7eb;
font-size: 12px; font-size: 12px;
color: #737373; color: #6b7280;
} }
.footer a { .footer a {
color: #16a34a; color: #374151;
text-decoration: none; text-decoration: none;
} }
.footer a:hover { .footer a:hover {
@@ -122,7 +121,7 @@ export function generatePasswordResetEmailTemplate({
} }
.divider { .divider {
height: 1px; height: 1px;
background-color: #e5e5e5; background-color: #e5e7eb;
margin: 24px 0; margin: 24px 0;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@@ -140,7 +139,7 @@ export function generatePasswordResetEmailTemplate({
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<h1 class="logo"> <h1 class="logo">
<span class="dollar">$</span> been<span class="voice">voice</span> beenvoice
</h1> </h1>
</div> </div>
@@ -161,7 +160,7 @@ export function generatePasswordResetEmailTemplate({
<p class="text"> <p class="text">
If the button doesn't work, copy and paste this link into your browser: If the button doesn't work, copy and paste this link into your browser:
<br> <br>
<a href="${resetUrl}" style="color: #16a34a; word-break: break-all;">${resetUrl}</a> <a href="${resetUrl}" style="color: #374151; word-break: break-all;">${resetUrl}</a>
</p> </p>
<div class="security-notice"> <div class="security-notice">