soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2025-12-13 01:24:44 -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 Link from "next/link";
import { notFound, useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { useState, useEffect } from "react";
import { toast } from "sonner";
import { StatusBadge, type StatusType } from "~/components/data/status-badge";
import { PageHeader } from "~/components/layout/page-header";
@@ -505,7 +505,24 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
export default function InvoiceViewPage() {
const params = useParams();
const router = useRouter();
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} />;
}

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:
"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:
"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:
"bg-secondary text-muted-foreground-foreground shadow-xs hover:bg-secondary/80",
ghost:

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

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type}
data-slot="input"
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]",
"hover:border-border/60 hover:bg-background/60",
"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 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
line-height: 1.6;
color: #1f2937;
color: #0f0f0f;
background-color: #f9fafb;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
@@ -118,14 +118,14 @@ export function generateInvoiceEmailTemplate({
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 12px;
border-radius: 0;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
}
.header {
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
background: #0f0f0f;
padding: 32px 24px;
text-align: center;
color: white;
@@ -135,15 +135,15 @@ export function generateInvoiceEmailTemplate({
font-size: 28px;
font-weight: bold;
margin-bottom: 8px;
letter-spacing: -0.5px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
letter-spacing: 0.5px;
font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
}
.header-subtitle {
font-size: 16px;
opacity: 0.9;
opacity: 0.8;
font-weight: normal;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
}
.content {
@@ -154,21 +154,21 @@ export function generateInvoiceEmailTemplate({
font-size: 16px;
font-weight: bold;
margin-bottom: 24px;
color: #374151;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
color: #0f0f0f;
font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
}
.message {
font-size: 15px;
line-height: 1.7;
margin-bottom: 32px;
color: #4b5563;
color: #374151;
}
.invoice-card {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0;
padding: 16px;
margin: 24px 0;
}
@@ -180,9 +180,9 @@ export function generateInvoiceEmailTemplate({
.invoice-number {
font-size: 24px;
font-weight: bold;
color: #16a34a;
color: #0f0f0f;
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 {
@@ -243,9 +243,9 @@ export function generateInvoiceEmailTemplate({
.business-name {
font-size: 16px;
font-weight: bold;
color: #1f2937;
color: #0f0f0f;
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 {
@@ -268,8 +268,8 @@ export function generateInvoiceEmailTemplate({
text-align: center;
margin: 32px 0;
padding: 24px;
background-color: #f8fafc;
border-radius: 8px;
background-color: #f9fafb;
border-radius: 0;
}
.cta-text {
@@ -279,9 +279,9 @@ export function generateInvoiceEmailTemplate({
}
.attachment-notice {
background-color: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0;
padding: 16px;
margin: 20px 0;
display: flex;
@@ -292,16 +292,16 @@ export function generateInvoiceEmailTemplate({
.attachment-icon {
width: 20px;
height: 20px;
background-color: #16a34a;
border-radius: 50%;
background-color: #374151;
border-radius: 0;
flex-shrink: 0;
}
.attachment-text {
font-size: 14px;
color: #166534;
color: #374151;
font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-family: ui-monospace, 'Geist Mono', 'Courier New', monospace;
}
.signature {
@@ -313,9 +313,9 @@ export function generateInvoiceEmailTemplate({
.signature-name {
font-size: 16px;
font-weight: bold;
color: #1f2937;
color: #0f0f0f;
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 {
@@ -333,18 +333,19 @@ export function generateInvoiceEmailTemplate({
.footer-brand {
font-size: 18px;
font-weight: bold;
color: #16a34a;
color: #0f0f0f;
margin: 0 auto 8px;
display: block;
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 {
font-size: 12px;
color: #9ca3af;
color: #6b7280;
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 */
@@ -370,8 +371,8 @@ export function generateInvoiceEmailTemplate({
/* Apple Mail attachment preview fix */
.attachment-notice {
border: 2px dashed #bbf7d0 !important;
background-color: #f0fdf4 !important;
border: 1px solid #e5e7eb !important;
background-color: #f9fafb !important;
}
@media (max-width: 600px) {
@@ -414,7 +415,7 @@ export function generateInvoiceEmailTemplate({
<div class="greeting">${getTimeOfDayGreeting()},</div>
<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>
${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>
${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;">
<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-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>
</table>
</div>

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

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