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

Responsive flow for mobile updates

Browse Source
This commit is contained in:
Sean O'Connor
2025-08-01 13:51:41 -04:00
parent 4fbb12643c
commit eaf185d89e
5 changed files with 179 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/dashboard/_components/monthly-metrics-chart.tsx
View File

@@ -191,7 +191,7 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
</div> </div>
{/* Legend */} {/* Legend */}
<div className="flex justify-center space-x-4"> <div className="flex flex-wrap justify-center gap-x-4 gap-y-2">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div <div
className="h-3 w-3 rounded-full" className="h-3 w-3 rounded-full"

88
src/app/dashboard/clients/[id]/page.tsx
View File

@@ -83,7 +83,7 @@ export default async function ClientDetailPage({
<Card className="bg-card border-border border"> <Card className="bg-card border-border border">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<div className="bg-primary/10 p-2"> <div className="bg-primary/10 p-2">
<Building className="text-primary h-5 w-5" /> <Building className="text-primary h-5 w-5" />
</div> </div>
<span>Contact Information</span> <span>Contact Information</span>
@@ -94,7 +94,7 @@ export default async function ClientDetailPage({
<div className="grid grid-cols-1 gap-4 md:grid-cols-2"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{client.email && ( {client.email && (
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="bg-primary/10 p-2"> <div className="bg-primary/10 p-2">
<Mail className="text-primary h-4 w-4" /> <Mail className="text-primary h-4 w-4" />
</div> </div>
<div> <div>
@@ -108,7 +108,7 @@ export default async function ClientDetailPage({
{client.phone && ( {client.phone && (
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="bg-primary/10 p-2"> <div className="bg-primary/10 p-2">
<Phone className="text-primary h-4 w-4" /> <Phone className="text-primary h-4 w-4" />
</div> </div>
<div> <div>
@@ -126,7 +126,7 @@ export default async function ClientDetailPage({
<div> <div>
<h3 className="mb-4 text-lg font-semibold">Client Address</h3> <h3 className="mb-4 text-lg font-semibold">Client Address</h3>
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
<div className="bg-primary/10 p-2"> <div className="bg-primary/10 p-2">
<MapPin className="text-primary h-4 w-4" /> <MapPin className="text-primary h-4 w-4" />
</div> </div>
<div className="space-y-1 text-sm"> <div className="space-y-1 text-sm">
@@ -155,7 +155,7 @@ export default async function ClientDetailPage({
<div> <div>
<h3 className="mb-4 text-lg font-semibold">Client Details</h3> <h3 className="mb-4 text-lg font-semibold">Client Details</h3>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="bg-primary/10 p-2"> <div className="bg-primary/10 p-2">
<Calendar className="text-primary h-4 w-4" /> <Calendar className="text-primary h-4 w-4" />
</div> </div>
<div> <div>
@@ -177,7 +177,7 @@ export default async function ClientDetailPage({
<Card className="bg-card border-border border"> <Card className="bg-card border-border border">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<div className="bg-primary/10 p-2"> <div className="bg-primary/10 p-2">
<DollarSign className="text-primary h-5 w-5" /> <DollarSign className="text-primary h-5 w-5" />
</div> </div>
<span>Invoice Summary</span> <span>Invoice Summary</span>
@@ -213,7 +213,7 @@ export default async function ClientDetailPage({
<Card className=""> <Card className="">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<div className="bg-primary/10 p-2"> <div className="bg-primary/10 p-2">
<DollarSign className="text-primary h-5 w-5" /> <DollarSign className="text-primary h-5 w-5" />
</div> </div>
<span>Recent Invoices</span> <span>Recent Invoices</span>
@@ -224,46 +224,48 @@ export default async function ClientDetailPage({
{client.invoices.slice(0, 3).map((invoice) => ( {client.invoices.slice(0, 3).map((invoice) => (
<div <div
key={invoice.id} key={invoice.id}
className="card-secondary hover:bg-muted/50 flex items-center justify-between border p-3 transition-colors" className="card-secondary hover:bg-muted/50 border p-3 transition-colors"
> >
<div> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<p className="text-foreground font-medium"> <div className="min-w-0">
{invoice.invoiceNumber} <p className="text-foreground font-medium break-words">
</p> {invoice.invoiceNumber}
<p className="text-muted-foreground text-sm"> </p>
{formatDate(invoice.issueDate)} <p className="text-muted-foreground text-sm">
</p> {formatDate(invoice.issueDate)}
</div> </p>
<div className="text-right"> </div>
<p className="text-foreground font-semibold"> <div className="flex flex-shrink-0 items-center gap-2 self-start sm:flex-col sm:items-end sm:gap-1">
{formatCurrency(invoice.totalAmount)} <p className="text-foreground font-semibold">
</p> {formatCurrency(invoice.totalAmount)}
<Badge </p>
variant={ <Badge
getEffectiveInvoiceStatus( variant={
invoice.status as StoredInvoiceStatus, getEffectiveInvoiceStatus(
invoice.dueDate, invoice.status as StoredInvoiceStatus,
) === "paid" invoice.dueDate,
? "default" ) === "paid"
: getEffectiveInvoiceStatus( ? "default"
invoice.status as StoredInvoiceStatus,
invoice.dueDate,
) === "sent"
? "secondary"
: getEffectiveInvoiceStatus( : getEffectiveInvoiceStatus(
invoice.status as StoredInvoiceStatus, invoice.status as StoredInvoiceStatus,
invoice.dueDate, invoice.dueDate,
) === "overdue" ) === "sent"
? "destructive" ? "secondary"
: "outline" : getEffectiveInvoiceStatus(
} invoice.status as StoredInvoiceStatus,
className="text-xs" invoice.dueDate,
> ) === "overdue"
{getEffectiveInvoiceStatus( ? "destructive"
invoice.status as StoredInvoiceStatus, : "outline"
invoice.dueDate, }
)} className="text-xs"
</Badge> >
{getEffectiveInvoiceStatus(
invoice.status as StoredInvoiceStatus,
invoice.dueDate,
)}
</Badge>
</div>
</div> </div>
</div> </div>
))} ))}

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

@@ -146,10 +146,10 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
<Card> <Card>
<CardContent className="p-4 sm:p-6"> <CardContent className="p-4 sm:p-6">
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-start justify-between gap-6"> <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
<div className="min-w-0 flex-1 space-y-2"> <div className="min-w-0 flex-1 space-y-2">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
<h2 className="text-foreground truncate text-2xl font-bold"> <h2 className="text-foreground text-2xl font-bold break-words">
{invoice.invoiceNumber} {invoice.invoiceNumber}
</h2> </h2>
<StatusBadge status={getStatusType()} /> <StatusBadge status={getStatusType()} />
@@ -163,7 +163,7 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
</div> </div>
</div> </div>
</div> </div>
<div className="flex-shrink-0 text-right"> <div className="flex-shrink-0 text-left sm:text-right">
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-sm">
Total Amount Total Amount
</p> </p>
@@ -326,29 +326,33 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{invoice.items.map((item) => ( {invoice.items.map((item) => (
<Card key={item.id} className="card-secondary"> <Card key={item.id} className="card-secondary">
<CardContent className="py-2"> <CardContent className="p-3">
<div className="flex items-start justify-between gap-4"> <div className="space-y-3">
<div className="min-w-0 flex-1"> <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
<p className="text-foreground mb-2 text-base font-medium"> <div className="min-w-0 flex-1">
{item.description} <p className="text-foreground mb-2 text-base font-medium break-words">
</p> {item.description}
<div className="text-muted-foreground text-sm"> </p>
<span className="inline whitespace-nowrap"> <div className="text-muted-foreground text-sm">
{formatDate(item.date).replace(/ /g, "\u00A0")} <div className="flex flex-wrap gap-x-4 gap-y-1">
</span> <span className="whitespace-nowrap">
<span className="inline whitespace-nowrap before:mx-2 before:content-['_|_']"> {formatDate(item.date).replace(/ /g, "\u00A0")}
{item.hours.toString().replace(/ /g, "\u00A0")} </span>
&nbsp;hours <span className="whitespace-nowrap">
</span> {item.hours.toString().replace(/ /g, "\u00A0")}
<span className="inline whitespace-nowrap before:mx-2 before:content-['_|_']"> &nbsp;hours
@&nbsp;${item.rate}/hr </span>
</span> <span className="whitespace-nowrap">
@&nbsp;${item.rate}/hr
</span>
</div>
</div>
</div>
<div className="flex-shrink-0 self-start">
<p className="text-primary text-lg font-semibold">
{formatCurrency(item.amount)}
</p>
</div> </div>
</div>
<div className="flex-shrink-0 text-right">
<p className="text-primary text-lg font-semibold">
{formatCurrency(item.amount)}
</p>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@@ -356,16 +360,16 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
))} ))}
{/* Totals */} {/* Totals */}
<div className="bg-muted/30 p-4"> <div className="bg-muted/30 rounded-lg p-4">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex justify-between"> <div className="flex flex-wrap justify-between gap-x-4 gap-y-1">
<span className="text-muted-foreground">Subtotal:</span> <span className="text-muted-foreground">Subtotal:</span>
<span className="font-medium"> <span className="font-medium">
{formatCurrency(subtotal)} {formatCurrency(subtotal)}
</span> </span>
</div> </div>
{invoice.taxRate > 0 && ( {invoice.taxRate > 0 && (
<div className="flex justify-between"> <div className="flex flex-wrap justify-between gap-x-4 gap-y-1">
<span className="text-muted-foreground"> <span className="text-muted-foreground">
Tax ({invoice.taxRate}%): Tax ({invoice.taxRate}%):
</span> </span>
@@ -375,7 +379,7 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
</div> </div>
)} )}
<Separator /> <Separator />
<div className="flex justify-between text-lg font-bold"> <div className="flex flex-wrap justify-between gap-x-4 gap-y-1 text-lg font-bold">
<span>Total:</span> <span>Total:</span>
<span className="text-primary"> <span className="text-primary">
{formatCurrency(total)} {formatCurrency(total)}

83
src/app/dashboard/page.tsx
View File

@@ -324,28 +324,23 @@ function QuickActions() {
{actions.map((action) => { {actions.map((action) => {
const Icon = action.icon; const Icon = action.icon;
return ( return (
<Button <Link
key={action.title} key={action.title}
asChild href={action.href}
variant="outline" className={`flex w-full items-start space-x-3 rounded-lg border p-4 transition-colors ${
className={`h-auto w-full justify-start p-4 ${
action.featured action.featured
? "border-foreground/20 bg-muted/50 hover:bg-muted" ? "border-foreground/20 bg-muted/50 hover:bg-muted"
: "hover:bg-muted/50" : "border-border bg-background hover:bg-muted/50"
}`} }`}
> >
<Link href={action.href}> <Icon className="h-5 w-5 flex-shrink-0" />
<div className="flex items-center space-x-3"> <div className="min-w-0 flex-1">
<Icon className="h-5 w-5 flex-shrink-0" /> <p className="font-semibold">{action.title}</p>
<div className="text-left"> <p className="text-muted-foreground text-sm leading-relaxed">
<p className="font-semibold">{action.title}</p> {action.description}
<p className="text-muted-foreground text-sm"> </p>
{action.description} </div>
</p> </Link>
</div>
</div>
</Link>
</Button>
); );
})} })}
</CardContent> </CardContent>
@@ -408,17 +403,19 @@ async function CurrentWork() {
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h3 className="text-lg font-semibold"> <h3 className="text-lg font-semibold break-words">
#{currentInvoice.invoiceNumber} #{currentInvoice.invoiceNumber}
</h3> </h3>
<span className="text-primary text-2xl font-bold"> <span className="text-primary text-2xl font-bold">
${currentInvoice.totalAmount.toFixed(2)} ${currentInvoice.totalAmount.toFixed(2)}
</span> </span>
</div> </div>
<div className="text-muted-foreground flex items-center justify-between text-sm"> <div className="text-muted-foreground flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between">
<span>{currentInvoice.client?.name}</span> <span className="break-words">{currentInvoice.client?.name}</span>
<span>{totalHours.toFixed(1)} hours logged</span> <span className="text-xs sm:text-sm">
{totalHours.toFixed(1)} hours logged
</span>
</div> </div>
</div> </div>
@@ -490,8 +487,8 @@ async function RecentActivity() {
</CardTitle> </CardTitle>
<Button variant="ghost" size="sm" asChild> <Button variant="ghost" size="sm" asChild>
<Link href="/dashboard/invoices"> <Link href="/dashboard/invoices">
View All <span className="hidden sm:inline">View All</span>
<ArrowUpRight className="ml-1 h-4 w-4" /> <ArrowUpRight className="h-4 w-4 sm:ml-1" />
</Link> </Link>
</Button> </Button>
</CardHeader> </CardHeader>
@@ -518,27 +515,35 @@ async function RecentActivity() {
href={`/dashboard/invoices/${invoice.id}`} href={`/dashboard/invoices/${invoice.id}`}
className="block" className="block"
> >
<div className="hover:bg-muted/50 flex items-center justify-between rounded-lg border p-3 transition-colors"> <div className="bg-muted/50 hover:bg-muted border-foreground/20 rounded-lg border p-3 transition-colors">
<div className="flex items-center space-x-3"> <div className="flex items-start gap-3">
<div className="bg-muted rounded-lg p-2"> <div className="bg-muted flex-shrink-0 rounded-lg p-2">
<FileText className="text-muted-foreground h-4 w-4" /> <FileText className="text-muted-foreground h-4 w-4" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1 space-y-2">
<p className="font-medium">#{invoice.invoiceNumber}</p> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<p className="text-muted-foreground text-sm"> <div className="min-w-0">
{invoice.client?.name} •{" "} <p className="truncate font-medium">
#{invoice.invoiceNumber}
</p>
<p className="text-muted-foreground truncate text-sm">
{invoice.client?.name}
</p>
</div>
<div className="flex flex-shrink-0 items-center gap-2">
<Badge style={getStatusStyle(invoice.status)}>
{invoice.status}
</Badge>
<span className="text-primary font-semibold">
${invoice.totalAmount.toFixed(2)}
</span>
</div>
</div>
<p className="text-muted-foreground text-xs">
{new Date(invoice.issueDate).toLocaleDateString()} {new Date(invoice.issueDate).toLocaleDateString()}
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-center space-x-3">
<Badge style={getStatusStyle(invoice.status)}>
{invoice.status}
</Badge>
<span className="font-semibold">
${invoice.totalAmount.toFixed(2)}
</span>
</div>
</div> </div>
</Link> </Link>
))} ))}

83
src/app/dashboard/settings/_components/settings-content.tsx
View File

@@ -15,8 +15,9 @@ import {
Building, Building,
Key, Key,
Eye, Eye,
EyeOff,
FileUp, FileUp,
ChevronDown,
Info,
} from "lucide-react"; } from "lucide-react";
import { api } from "~/trpc/react"; import { api } from "~/trpc/react";
@@ -28,6 +29,11 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "~/components/ui/card"; } from "~/components/ui/card";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "~/components/ui/collapsible";
import { Input } from "~/components/ui/input"; import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label"; import { Label } from "~/components/ui/label";
import { Textarea } from "~/components/ui/textarea"; import { Textarea } from "~/components/ui/textarea";
@@ -358,20 +364,23 @@ export function SettingsContent() {
return ( return (
<div <div
key={item.label} key={item.label}
className="bg-card flex items-center justify-between border p-4 transition-shadow hover:shadow-sm" className="bg-card border p-4 transition-shadow hover:shadow-sm"
> >
<div className="flex items-center gap-3"> <div className="flex items-center justify-between">
<div className={`p-2 ${item.bgColor}`}> <div className="flex items-center gap-3">
<Icon className={`h-4 w-4 ${item.color}`} /> <div className={`p-2 ${item.bgColor}`}>
<Icon className={`h-4 w-4 ${item.color}`} />
</div>
<span className="font-medium break-words">
{item.label}
</span>
</div>
<div className="text-right">
<span className="text-foreground text-2xl font-bold">
{item.value}
</span>
</div> </div>
<span className="font-medium">{item.label}</span>
</div> </div>
<Badge
variant="secondary"
className="text-lg font-semibold"
>
{item.value}
</Badge>
</div> </div>
); );
})} })}
@@ -500,12 +509,12 @@ export function SettingsContent() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex gap-4"> <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
<Button <Button
onClick={handleExportData} onClick={handleExportData}
disabled={exportDataQuery.isFetching} disabled={exportDataQuery.isFetching}
variant="outline" variant="outline"
className="flex-1" className="w-full sm:flex-1"
> >
<Download className="mr-2 h-4 w-4" /> <Download className="mr-2 h-4 w-4" />
{exportDataQuery.isFetching ? "Exporting..." : "Export Backup"} {exportDataQuery.isFetching ? "Exporting..." : "Export Backup"}
@@ -516,7 +525,7 @@ export function SettingsContent() {
onOpenChange={setIsImportDialogOpen} onOpenChange={setIsImportDialogOpen}
> >
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="outline" className="flex-1"> <Button variant="outline" className="w-full sm:flex-1">
<Upload className="mr-2 h-4 w-4" /> <Upload className="mr-2 h-4 w-4" />
Import Backup Import Backup
</Button> </Button>
@@ -620,18 +629,38 @@ export function SettingsContent() {
</div> </div>
{/* Backup Information */} {/* Backup Information */}
<div className="border-border bg-muted/20 border p-4"> <Collapsible>
<h4 className="font-medium">Backup Information</h4> <CollapsibleTrigger asChild>
<ul className="text-muted-foreground mt-2 space-y-1 text-sm"> <Button variant="ghost" className="w-full justify-between p-0">
<li>• Regular backups protect your important business data</li> <div className="flex items-center gap-2">
<li>• Backup files contain all data in secure JSON format</li> <Info className="h-4 w-4" />
<li> <span className="font-medium">Backup Information</span>
• Import adds to existing data without replacing anything </div>
</li> <ChevronDown className="h-4 w-4" />
<li>• Upload JSON files directly or paste content manually</li> </Button>
<li>• Store backup files in a secure, accessible location</li> </CollapsibleTrigger>
</ul> <CollapsibleContent className="mt-3">
</div> <div className="border-border bg-muted/20 border p-4">
<ul className="text-muted-foreground space-y-1 text-sm">
<li>
• Regular backups protect your important business data
</li>
<li>
• Backup files contain all data in secure JSON format
</li>
<li>
• Import adds to existing data without replacing anything
</li>
<li>
• Upload JSON files directly or paste content manually
</li>
<li>
• Store backup files in a secure, accessible location
</li>
</ul>
</div>
</CollapsibleContent>
</Collapsible>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>