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

Refactor import page and add password change feature

Browse Source 
This commit overhauls the invoice import UI and adds password
management. The changes:

- Replace custom import UI with reusable CSVImportPage component
- Add password change functionality with validation
- Improve form styling and accessibility
- Update import instructions for simplified CSV format
- Add client selection and validation
This commit is contained in:
Sean O'Connor
2025-07-16 14:40:15 -04:00
parent 1023bc0c2b
commit 5f02bc1ff3
5 changed files with 468 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -208,7 +208,7 @@ export default async function ClientDetailPage({
{/* Recent Invoices */}
{client.invoices && client.invoices.length > 0 && (
<Card className="card-primary">
<Card className="">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<div className="bg-blue-subtle rounded-lg p-2">
@@ -222,7 +222,7 @@ export default async function ClientDetailPage({
{client.invoices.slice(0, 3).map((invoice) => (
<div
key={invoice.id}
className="flex items-center justify-between rounded-lg border p-3"
className="card-secondary transition-colors hover:bg-gray-200/70 dark:hover:bg-gray-700/60 flex items-center justify-between rounded-lg border p-3"
>
<div>
<p className="text-foreground font-medium">

380
src/app/dashboard/invoices/import/page.tsx
View File

@@ -4,8 +4,8 @@ import { HydrateClient } from "~/trpc/server";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { Separator } from "~/components/ui/separator";
import { PageHeader } from "~/components/layout/page-header";
import { CSVImportPage } from "~/components/csv-import-page";
import {
ArrowLeft,
Upload,
@@ -14,133 +14,10 @@ import {
CheckCircle,
AlertCircle,
Info,
Zap,
FileSpreadsheet,
Eye,
RefreshCw,
} from "lucide-react";
// Import Statistics Component
function ImportStats() {
const stats = [
{
title: "Supported Formats",
value: "CSV",
icon: FileSpreadsheet,
color: "text-blue-600",
bgColor: "bg-blue-50 dark:bg-blue-900/20",
description: "Excel & Google Sheets exports",
},
{
title: "Max File Size",
value: "10MB",
icon: Upload,
color: "text-green-600",
bgColor: "bg-green-50 dark:bg-green-900/20",
description: "Up to 1000 invoices",
},
{
title: "Processing Time",
value: "< 1min",
icon: Zap,
color: "text-purple-600",
bgColor: "bg-purple-50 dark:bg-purple-900/20",
description: "Average processing speed",
},
{
title: "Success Rate",
value: "99.9%",
icon: CheckCircle,
color: "text-emerald-600",
bgColor: "bg-emerald-50 dark:bg-emerald-900/20",
description: "Import success rate",
},
];
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{stats.map((stat) => {
const Icon = stat.icon;
return (
<Card
key={stat.title}
className="card-primary transition-shadow hover:shadow-lg"
>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div className="space-y-2">
<p className="text-muted-foreground text-sm font-medium">
{stat.title}
</p>
<p className="text-2xl font-bold">{stat.value}</p>
<p className="text-muted-foreground text-xs">
{stat.description}
</p>
</div>
<div className={`rounded-full p-3 ${stat.bgColor}`}>
<Icon className={`h-6 w-6 ${stat.color}`} />
</div>
</div>
</CardContent>
</Card>
);
})}
</div>
);
}
// File Upload Component
function FileUploadArea() {
return (
<Card className="card-primary">
<CardHeader className="border-b">
<CardTitle className="card-title-secondary">
<Upload className="text-icon-emerald h-5 w-5" />
Upload CSV File
</CardTitle>
</CardHeader>
<CardContent className="p-8">
<div className="mx-auto max-w-xl">
{/* Drop Zone */}
<div className="bg-upload-zone">
<div className="bg-brand-muted mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
<Upload className="text-icon-emerald h-8 w-8" />
</div>
<h3 className="mb-2 text-lg font-semibold">
Drop your CSV file here
</h3>
<p className="text-muted-foreground mb-4">
or click to browse and select a file
</p>
<Button type="button" className="btn-brand-primary">
<Upload className="mr-2 h-4 w-4" />
Choose File
</Button>
<p className="text-muted-foreground mt-4 text-sm">
Maximum file size: 10MB • Supported format: CSV
</p>
</div>
{/* Upload Progress (hidden by default) */}
<div className="mt-6 hidden">
<div className="mb-2 flex items-center justify-between">
<span className="text-sm font-medium">Uploading...</span>
<span className="text-icon-emerald text-sm">75%</span>
</div>
<div className="bg-progress-track">
<div
className="bg-brand-gradient h-full transition-all duration-300"
style={{ width: "75%" }}
></div>
</div>
</div>
</div>
</CardContent>
</Card>
);
}
// CSV Format Instructions
// File Upload Instructions Component
function FormatInstructions() {
return (
<div className="grid gap-6 lg:grid-cols-2">
@@ -155,7 +32,7 @@ function FormatInstructions() {
<CardContent className="space-y-4">
<div className="bg-muted-subtle rounded-lg p-4">
<p className="text-secondary font-mono text-sm">
client_name,client_email,invoice_number,issue_date,due_date,description,hours,rate,tax_rate
DATE,DESCRIPTION,HOURS,RATE,AMOUNT
</p>
</div>
@@ -163,14 +40,14 @@ function FormatInstructions() {
<h4 className="font-semibold">Required Columns:</h4>
<div className="grid gap-2">
{[
{ field: "client_name", desc: "Full name of the client" },
{ field: "client_email", desc: "Client email address" },
{ field: "invoice_number", desc: "Unique invoice identifier" },
{ field: "issue_date", desc: "Date issued (YYYY-MM-DD)" },
{ field: "due_date", desc: "Payment due date (YYYY-MM-DD)" },
{ field: "description", desc: "Work description" },
{ field: "hours", desc: "Number of hours worked" },
{ field: "rate", desc: "Hourly rate (decimal)" },
{ field: "DATE", desc: "Date of work (M/DD/YY format)" },
{ field: "DESCRIPTION", desc: "Description of work performed" },
{ field: "HOURS", desc: "Number of hours worked" },
{ field: "RATE", desc: "Hourly rate (decimal)" },
{
field: "AMOUNT",
desc: "Total amount (calculated from hours × rate)",
},
].map((col) => (
<div key={col.field} className="flex items-start gap-3">
<Badge className="badge-outline text-xs">{col.field}</Badge>
@@ -183,12 +60,14 @@ function FormatInstructions() {
</div>
<div className="pt-2">
<h4 className="mb-2 font-semibold">Optional Columns:</h4>
<div className="flex flex-wrap gap-2">
<Badge className="badge-secondary text-xs">tax_rate</Badge>
<Badge className="badge-secondary text-xs">notes</Badge>
<Badge className="badge-secondary text-xs">client_phone</Badge>
</div>
<h4 className="mb-2 font-semibold">File Naming:</h4>
<p className="text-muted-foreground text-sm">
Name your CSV files in{" "}
<code className="bg-muted rounded px-1 text-xs">
YYYY-MM-DD.csv
</code>{" "}
format for automatic date detection.
</p>
</div>
</CardContent>
</Card>
@@ -204,7 +83,7 @@ function FormatInstructions() {
<CardContent className="space-y-4">
<p className="text-muted-foreground">
Download our sample CSV template to see the exact format required
for importing invoices.
for importing time entries.
</p>
<div className="bg-green-subtle rounded-lg p-4">
@@ -220,31 +99,21 @@ function FormatInstructions() {
</div>
</div>
<div className="space-y-3">
<Button variant="outline" className="w-full justify-start">
<Download className="mr-2 h-4 w-4" />
Download Sample CSV Template
</Button>
<Button variant="outline" className="w-full justify-start">
<Eye className="mr-2 h-4 w-4" />
View Template in Browser
</Button>
</div>
<Separator />
<div className="space-y-2">
<h4 className="text-sm font-semibold">Sample Row:</h4>
<div className="bg-muted-subtle rounded-lg p-3">
<p className="text-muted font-mono text-xs break-all">
&quot;Acme
Corp&quot;,&quot;john@acme.com&quot;,&quot;INV-001&quot;,&quot;2024-01-15&quot;,&quot;2024-02-14&quot;,&quot;Web
development
work&quot;,&quot;40&quot;,&quot;75.00&quot;,&quot;8.5&quot;
1/15/24,&quot;Web development work&quot;,8,75.00,600.00
</p>
</div>
</div>
<div className="space-y-2">
<h4 className="text-sm font-semibold">Sample Filename:</h4>
<div className="bg-muted-subtle rounded-lg p-3">
<p className="text-muted font-mono text-xs">2024-01-15.csv</p>
</div>
</div>
</CardContent>
</Card>
</div>
@@ -266,18 +135,18 @@ function ImportantNotes() {
<div>
<h4 className="mb-2 font-semibold">Before Importing:</h4>
<ul className="text-muted-foreground space-y-1 text-sm">
<li>• Ensure all client emails are valid</li>
<li>• Use YYYY-MM-DD format for dates</li>
<li>• Invoice numbers must be unique</li>
<li>• Rates should be in decimal format (e.g., 75.50)</li>
<li>• Use M/DD/YY format for dates (e.g., 1/15/24)</li>
<li>• Ensure rates are in decimal format (e.g., 75.50)</li>
<li>• File names should follow YYYY-MM-DD.csv format</li>
<li>• Select a client before importing</li>
</ul>
</div>
<div>
<h4 className="mb-2 font-semibold">What Happens:</h4>
<ul className="text-muted-foreground space-y-1 text-sm">
<li>• New clients will be created automatically</li>
<li>• Existing clients will be matched by email</li>
<li>• Invoices will be created in &quot;draft&quot; status</li>
<li>• Each CSV file creates one invoice</li>
<li>• Invoice dates are derived from filename</li>
<li>• Invoices are created in &quot;draft&quot; status</li>
<li>• You can review and edit before sending</li>
</ul>
</div>
@@ -287,124 +156,47 @@ function ImportantNotes() {
);
}
// Import History Component
function ImportHistory() {
const mockHistory = [
{
id: "1",
filename: "january_invoices.csv",
date: "2024-01-15",
status: "completed",
imported: 25,
errors: 0,
},
{
id: "2",
filename: "december_invoices.csv",
date: "2024-01-01",
status: "completed",
imported: 18,
errors: 2,
},
{
id: "3",
filename: "november_invoices.csv",
date: "2023-12-01",
status: "completed",
imported: 32,
errors: 1,
},
];
const getStatusBadge = (status: string) => {
if (status === "completed") {
return (
<Badge className="badge-success">
<CheckCircle className="mr-1 h-3 w-3" />
Completed
</Badge>
);
}
if (status === "processing") {
return (
<Badge className="badge-features">
<RefreshCw className="mr-1 h-3 w-3" />
Processing
</Badge>
);
}
return (
<Badge variant="outline">
<AlertCircle className="mr-1 h-3 w-3" />
Failed
</Badge>
);
};
// File Format Help Section
function FileFormatHelp() {
return (
<Card className="card-primary">
<CardHeader>
<CardTitle className="card-title-purple">
<FileText className="text-icon-purple h-5 w-5" />
Recent Imports
<CardTitle className="card-title-info">
<FileSpreadsheet className="text-icon-blue h-5 w-5" />
Supported File Formats
</CardTitle>
</CardHeader>
<CardContent className="p-0">
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-muted/50">
<tr className="border-b">
<th className="p-4 text-left text-sm font-medium">File</th>
<th className="p-4 text-left text-sm font-medium">Date</th>
<th className="p-4 text-left text-sm font-medium">Status</th>
<th className="p-4 text-right text-sm font-medium">Imported</th>
<th className="p-4 text-right text-sm font-medium">Errors</th>
<th className="p-4 text-center text-sm font-medium">Actions</th>
</tr>
</thead>
<tbody>
{mockHistory.map((item) => (
<tr
key={item.id}
className="hover:bg-muted/20 border-b transition-colors"
>
<td className="p-4">
<div className="flex items-center gap-3">
<div className="icon-bg-purple-muted">
<FileSpreadsheet className="text-icon-purple h-4 w-4" />
</div>
<span className="font-medium">{item.filename}</span>
</div>
</td>
<td className="p-4 text-sm">
{new Date(item.date).toLocaleDateString()}
</td>
<td className="p-4">{getStatusBadge(item.status)}</td>
<td className="p-4 text-right font-medium">
{item.imported}
</td>
<td className="p-4 text-right">
{item.errors > 0 ? (
<span className="status-text-error">{item.errors}</span>
) : (
<span className="text-muted-foreground">0</span>
)}
</td>
<td className="p-4 text-center">
<Button variant="ghost" size="sm">
<Eye className="h-4 w-4" />
</Button>
</td>
</tr>
))}
</tbody>
</table>
</div>
{mockHistory.length === 0 && (
<div className="py-8 text-center">
<p className="text-muted-foreground">No import history yet</p>
<CardContent className="space-y-4">
<div className="grid gap-4 md:grid-cols-3">
<div className="space-y-2 text-center">
<div className="mx-auto w-fit rounded-full bg-blue-50 p-3 dark:bg-blue-900/20">
<FileSpreadsheet className="h-6 w-6 text-blue-600" />
</div>
<h4 className="font-semibold">CSV Files</h4>
<p className="text-muted-foreground text-sm">
Comma-separated values from Excel, Google Sheets, or any CSV
editor
</p>
</div>
)}
<div className="space-y-2 text-center">
<div className="mx-auto w-fit rounded-full bg-green-50 p-3 dark:bg-green-900/20">
<Upload className="h-6 w-6 text-green-600" />
</div>
<h4 className="font-semibold">Max Size</h4>
<p className="text-muted-foreground text-sm">
Up to 10MB per file with no limit on number of rows
</p>
</div>
<div className="space-y-2 text-center">
<div className="mx-auto w-fit rounded-full bg-purple-50 p-3 dark:bg-purple-900/20">
<CheckCircle className="h-6 w-6 text-purple-600" />
</div>
<h4 className="font-semibold">Validation</h4>
<p className="text-muted-foreground text-sm">
Real-time validation with clear error messages and feedback
</p>
</div>
</div>
</CardContent>
</Card>
);
@@ -414,8 +206,8 @@ export default async function ImportPage() {
return (
<div className="space-y-8">
<PageHeader
title="Import Invoices"
description="Upload CSV files to create invoices in batch"
title="Import Time Entries"
description="Upload CSV files to create invoices from your time tracking data"
variant="gradient"
>
<Link href="/dashboard/invoices">
@@ -427,33 +219,17 @@ export default async function ImportPage() {
</PageHeader>
<HydrateClient>
<Suspense
fallback={
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{Array.from({ length: 4 }, (_, i) => (
<Card key={i} className="card-primary">
<CardContent className="p-6">
<div className="animate-pulse">
<div className="bg-muted mb-2 h-4 w-1/2 rounded"></div>
<div className="bg-muted mb-2 h-8 w-3/4 rounded"></div>
<div className="bg-muted h-3 w-1/3 rounded"></div>
</div>
</CardContent>
</Card>
))}
</div>
}
>
<ImportStats />
</Suspense>
{/* Main CSV Import Component */}
<CSVImportPage />
<FileUploadArea />
{/* File Format Help */}
<FileFormatHelp />
{/* Format Instructions */}
<FormatInstructions />
{/* Important Notes */}
<ImportantNotes />
<ImportHistory />
</HydrateClient>
</div>
);

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

@@ -10,10 +10,12 @@ import {
Database,
AlertTriangle,
Shield,
Settings,
FileText,
Users,
Building,
Key,
Eye,
EyeOff,
} from "lucide-react";
import { api } from "~/trpc/react";
@@ -58,6 +60,14 @@ export function SettingsContent() {
const [importData, setImportData] = useState("");
const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
// Password change state
const [currentPassword, setCurrentPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
const [showNewPassword, setShowNewPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
// Queries
const { data: profile, refetch: refetchProfile } =
api.settings.getProfile.useQuery();
@@ -74,6 +84,18 @@ export function SettingsContent() {
},
});
const changePasswordMutation = api.settings.changePassword.useMutation({
onSuccess: () => {
toast.success("Password changed successfully");
setCurrentPassword("");
setNewPassword("");
setConfirmPassword("");
},
onError: (error: { message: string }) => {
toast.error(`Failed to change password: ${error.message}`);
},
});
const exportDataQuery = api.settings.exportData.useQuery(undefined, {
enabled: false,
});
@@ -134,6 +156,27 @@ export function SettingsContent() {
updateProfileMutation.mutate({ name: name.trim() });
};
const handleChangePassword = (e: React.FormEvent) => {
e.preventDefault();
if (!currentPassword || !newPassword || !confirmPassword) {
toast.error("Please fill in all password fields");
return;
}
if (newPassword !== confirmPassword) {
toast.error("New passwords don't match");
return;
}
if (newPassword.length < 8) {
toast.error("New password must be at least 8 characters");
return;
}
changePasswordMutation.mutate({
currentPassword,
newPassword,
confirmPassword,
});
};
const handleExportData = () => {
void exportDataQuery.refetch();
};
@@ -239,21 +282,21 @@ export function SettingsContent() {
value: dataStats?.clients ?? 0,
icon: Users,
color: "text-blue-600",
bgColor: "bg-blue-100",
bgColor: "bg-blue-50 dark:bg-blue-900/20",
},
{
label: "Businesses",
value: dataStats?.businesses ?? 0,
icon: Building,
color: "text-purple-600",
bgColor: "bg-purple-100",
bgColor: "bg-purple-50 dark:bg-purple-900/20",
},
{
label: "Invoices",
value: dataStats?.invoices ?? 0,
icon: FileText,
color: "text-emerald-600",
bgColor: "bg-emerald-100",
bgColor: "bg-emerald-50 dark:bg-emerald-900/20",
},
];
@@ -264,10 +307,8 @@ export function SettingsContent() {
{/* Profile Section */}
<Card className="card-primary">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<div className="icon-bg-emerald">
<User className="text-icon-emerald h-5 w-5" />
</div>
<CardTitle className="card-title-secondary">
<User className="text-icon-blue h-5 w-5" />
Profile Information
</CardTitle>
<CardDescription>
@@ -283,7 +324,6 @@ export function SettingsContent() {
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your full name"
className="border-0 shadow-sm"
/>
</div>
<div className="space-y-2">
@@ -292,7 +332,7 @@ export function SettingsContent() {
id="email"
value={session?.user?.email ?? ""}
disabled
className="bg-muted border-0 shadow-sm"
className="bg-muted"
/>
<p className="text-muted-foreground text-sm">
Email address cannot be changed
@@ -314,10 +354,8 @@ export function SettingsContent() {
{/* Data Overview */}
<Card className="card-primary">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<div className="icon-bg-info">
<Database className="text-icon-blue h-5 w-5" />
</div>
<CardTitle className="card-title-info">
<Database className="text-icon-blue h-5 w-5" />
Account Data
</CardTitle>
<CardDescription>
@@ -329,24 +367,23 @@ export function SettingsContent() {
{dataStatItems.map((item) => {
const Icon = item.icon;
return (
<Card key={item.label} className="card-secondary">
<CardContent className="py-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className={`rounded-lg p-2 ${item.bgColor}`}>
<Icon className={`h-4 w-4 ${item.color}`} />
</div>
<span className="font-medium">{item.label}</span>
</div>
<Badge
variant="secondary"
className="text-lg font-semibold"
>
{item.value}
</Badge>
<div
key={item.label}
className="bg-card flex items-center justify-between rounded-lg border p-4 transition-shadow hover:shadow-sm"
>
<div className="flex items-center gap-3">
<div className={`rounded-lg p-2 ${item.bgColor}`}>
<Icon className={`h-4 w-4 ${item.color}`} />
</div>
</CardContent>
</Card>
<span className="font-medium">{item.label}</span>
</div>
<Badge
variant="secondary"
className="text-lg font-semibold"
>
{item.value}
</Badge>
</div>
);
})}
</div>
@@ -354,13 +391,118 @@ export function SettingsContent() {
</Card>
</div>
{/* Security Settings */}
<Card className="card-primary">
<CardHeader>
<CardTitle className="card-title-secondary">
<Key className="text-icon-amber h-5 w-5" />
Security Settings
</CardTitle>
<CardDescription>
Change your password and manage account security
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleChangePassword} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="current-password">Current Password</Label>
<div className="relative">
<Input
id="current-password"
type={showCurrentPassword ? "text" : "password"}
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
placeholder="Enter your current password"
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
>
{showCurrentPassword ? (
<EyeOff className="h-4 w-4" />
) : (
<Eye className="h-4 w-4" />
)}
</Button>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="new-password">New Password</Label>
<div className="relative">
<Input
id="new-password"
type={showNewPassword ? "text" : "password"}
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
placeholder="Enter your new password"
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
onClick={() => setShowNewPassword(!showNewPassword)}
>
{showNewPassword ? (
<EyeOff className="h-4 w-4" />
) : (
<Eye className="h-4 w-4" />
)}
</Button>
</div>
<p className="text-muted-foreground text-sm">
Password must be at least 8 characters long
</p>
</div>
<div className="space-y-2">
<Label htmlFor="confirm-password">Confirm New Password</Label>
<div className="relative">
<Input
id="confirm-password"
type={showConfirmPassword ? "text" : "password"}
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="Confirm your new password"
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
>
{showConfirmPassword ? (
<EyeOff className="h-4 w-4" />
) : (
<Eye className="h-4 w-4" />
)}
</Button>
</div>
</div>
<Button
type="submit"
disabled={changePasswordMutation.isPending}
className="btn-brand-primary"
>
{changePasswordMutation.isPending
? "Changing Password..."
: "Change Password"}
</Button>
</form>
</CardContent>
</Card>
{/* Data Management */}
<Card className="card-primary">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<div className="bg-indigo-subtle rounded-lg p-2">
<Shield className="text-icon-indigo h-5 w-5" />
</div>
<CardTitle className="card-title-secondary">
<Shield className="text-icon-indigo h-5 w-5" />
Data Management
</CardTitle>
<CardDescription>
@@ -429,38 +571,38 @@ export function SettingsContent() {
</DialogContent>
</Dialog>
</div>
</div>
{/* Backup Information */}
<div className="mt-6 rounded-lg border p-4">
<h4 className="font-medium">Backup Information</h4>
<ul className="text-muted-foreground mt-2 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>• Store backup files in a secure, accessible location</li>
</ul>
{/* Backup Information */}
<div className="border-border bg-muted/20 rounded-lg border p-4">
<h4 className="font-medium">Backup Information</h4>
<ul className="text-muted-foreground mt-2 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>• Store backup files in a secure, accessible location</li>
</ul>
</div>
</div>
</CardContent>
</Card>
{/* Danger Zone */}
<Card className="card-primary">
<Card className="card-primary border-l-4 border-l-red-500">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<div className="icon-bg-error">
<AlertTriangle className="text-icon-red h-5 w-5" />
</div>
Data Management
<CardTitle className="card-title-warning">
<AlertTriangle className="text-icon-red h-5 w-5" />
Danger Zone
</CardTitle>
<CardDescription>
Manage your account data with caution
Irreversible actions that permanently affect your account
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="rounded-lg border p-4">
<h4 className="font-medium text-red-600">
<div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
<h4 className="font-medium text-red-600 dark:text-red-400">
Delete All Account Data
</h4>
<p className="text-muted-foreground mt-2 text-sm">
@@ -472,7 +614,7 @@ export function SettingsContent() {
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="destructive" className="w-100">
<Button variant="destructive" className="w-full">
<AlertTriangle className="mr-2 h-4 w-4" />
Delete All Data
</Button>
@@ -485,7 +627,7 @@ export function SettingsContent() {
This action cannot be undone. This will permanently delete
all your:
</div>
<ul className="list-inside list-disc space-y-1 rounded-lg border p-3 text-sm">
<ul className="border-border bg-muted/50 list-inside list-disc space-y-1 rounded-lg border p-3 text-sm">
<li>Client information and contact details</li>
<li>Business profiles and settings</li>
<li>Invoices and invoice line items</li>
@@ -516,7 +658,7 @@ export function SettingsContent() {
deleteConfirmText !== "delete all my data" ||
deleteDataMutation.isPending
}
className="btn-danger"
className="bg-red-600 hover:bg-red-700"
>
{deleteDataMutation.isPending
? "Deleting..."

177
src/components/csv-import-page.tsx
View File

@@ -440,8 +440,8 @@ export function CSVImportPage() {
{/* Global Client Selection */}
<Card className="card-primary">
<CardHeader>
<CardTitle className="card-title-primary">
<Users className="h-5 w-5" />
<CardTitle className="card-title-secondary">
<Users className="text-icon-blue h-5 w-5" />
Default Client
</CardTitle>
</CardHeader>
@@ -460,7 +460,7 @@ export function CSVImportPage() {
applyGlobalClient(newClientId);
}
}}
className="h-12 w-full rounded-md border px-3 py-2"
className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-12 w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
disabled={loadingClients}
>
<option value="">No default client (select individually)</option>
@@ -470,7 +470,7 @@ export function CSVImportPage() {
</option>
))}
</select>
<p className="text-muted text-xs">
<p className="text-muted-foreground text-xs">
This client will be automatically selected for all uploaded files.
You can still change individual files below.
</p>
@@ -481,8 +481,8 @@ export function CSVImportPage() {
{/* File Upload Area */}
<Card className="card-primary">
<CardHeader>
<CardTitle className="card-title-primary">
<Upload className="h-5 w-5" />
<CardTitle className="card-title-secondary">
<Upload className="text-icon-emerald h-5 w-5" />
Upload CSV Files
</CardTitle>
</CardHeader>
@@ -496,38 +496,55 @@ export function CSVImportPage() {
description="Files must be named YYYY-MM-DD.csv (e.g., 2024-01-15.csv). Up to 50 files can be uploaded at once."
/>
{/* Summary Stats */}
{/* Summary Card */}
{totalFiles > 0 && (
<div className="grid grid-cols-2 gap-4 rounded-lg bg-emerald-50/50 p-4 md:grid-cols-4">
<div className="text-center">
<div className="text-icon-emerald text-2xl font-bold">
{totalFiles}
<Card className="card-primary">
<CardHeader>
<CardTitle className="card-title-secondary">
<FileText className="text-icon-emerald h-5 w-5" />
Import Summary
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 rounded-lg bg-green-50/50 p-4 md:grid-cols-4 dark:bg-green-900/10">
<div className="text-center">
<div className="text-2xl font-bold text-green-600">
{totalFiles}
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Files
</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-green-600">
{totalItems}
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Total Items
</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-green-600">
{totalAmount.toLocaleString("en-US", {
style: "currency",
currency: "USD",
})}
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Total Amount
</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-green-600">
{readyFiles}/{totalFiles}
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Ready
</div>
</div>
</div>
<div className="text-secondary text-sm">Files</div>
<div className="text-muted text-xs">of 50 max</div>
</div>
<div className="text-center">
<div className="text-icon-emerald text-2xl font-bold">
{totalItems}
</div>
<div className="text-secondary text-sm">Total Items</div>
</div>
<div className="text-center">
<div className="text-icon-emerald text-2xl font-bold">
{totalAmount.toLocaleString("en-US", {
style: "currency",
currency: "USD",
})}
</div>
<div className="text-secondary text-sm">Total Amount</div>
</div>
<div className="text-center">
<div className="text-icon-emerald text-2xl font-bold">
{readyFiles}/{totalFiles}
</div>
<div className="text-secondary text-sm">Ready</div>
</div>
</div>
</CardContent>
</Card>
)}
</CardContent>
</Card>
@@ -536,23 +553,25 @@ export function CSVImportPage() {
{files.length > 0 && (
<Card className="card-primary">
<CardHeader>
<CardTitle className="text-brand-light">Uploaded Files</CardTitle>
<CardTitle className="card-title-secondary">
Uploaded Files
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{files.map((fileData, index) => (
<div
key={index}
className="rounded-lg border border-gray-200 bg-white p-4"
className="border-border bg-card rounded-lg border p-4"
>
<div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-3">
<FileText className="text-icon-emerald h-5 w-5" />
<div>
<h3 className="text-accent truncate font-medium">
<h3 className="text-foreground truncate font-medium">
{fileData.file.name}
</h3>
<p className="text-muted text-sm">
<p className="text-muted-foreground text-sm">
{fileData.parsedItems.length} items •{" "}
{fileData.parsedItems
.reduce((sum, item) => sum + item.hours, 0)
@@ -574,7 +593,7 @@ export function CSVImportPage() {
variant="outline"
size="sm"
onClick={() => removeFile(index)}
className="text-icon-red hover:text-error"
className="text-red-600 hover:text-red-700"
>
<Trash2 className="mr-1 h-4 w-4" />
Remove
@@ -584,7 +603,7 @@ export function CSVImportPage() {
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div className="space-y-2">
<Label className="text-secondary text-xs font-medium">
<Label className="text-muted-foreground text-xs font-medium">
Invoice Number
</Label>
<Input
@@ -596,15 +615,18 @@ export function CSVImportPage() {
</div>
<div className="space-y-2">
<Label className="text-xs font-medium">Client</Label>
<Label className="text-muted-foreground text-xs font-medium">
Client
</Label>
<select
value={fileData.clientId}
onChange={(e) =>
updateFileData(index, { clientId: e.target.value })
}
className="h-9 w-full rounded-md border px-3 py-1 text-sm"
className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
disabled={loadingClients}
>
<option value="">Select client</option>
<option value="">Select Client</option>
{clients?.map((client) => (
<option key={client.id} value={client.id}>
{client.name}
@@ -614,7 +636,7 @@ export function CSVImportPage() {
</div>
<div className="space-y-2">
<Label className="text-secondary text-xs font-medium">
<Label className="text-muted-foreground text-xs font-medium">
Issue Date
</Label>
<DatePicker
@@ -628,7 +650,7 @@ export function CSVImportPage() {
</div>
<div className="space-y-2">
<Label className="text-secondary text-xs font-medium">
<Label className="text-muted-foreground text-xs font-medium">
Due Date
</Label>
<DatePicker
@@ -644,20 +666,20 @@ export function CSVImportPage() {
{/* Error Display */}
{fileData.errors.length > 0 && (
<div className="mt-4 rounded-lg border border-red-200 bg-red-50 p-3">
<div className="mt-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
<div className="mb-2 flex items-center gap-2">
<AlertCircle className="text-icon-red h-4 w-4" />
<span className="text-error text-sm font-medium">
<AlertCircle className="h-4 w-4 text-red-600" />
<span className="text-sm font-medium text-red-800 dark:text-red-200">
Issues Found
</span>
</div>
<ul className="text-error space-y-1 text-sm">
<ul className="space-y-1 text-sm text-red-700 dark:text-red-300">
{fileData.errors.map((error, errorIndex) => (
<li
key={errorIndex}
className="flex items-start gap-2"
>
<span className="text-icon-red">•</span>
<span className="text-red-600">•</span>
<span>{error}</span>
</li>
))}
@@ -666,7 +688,7 @@ export function CSVImportPage() {
)}
<div className="mt-4 flex items-center justify-between">
<div className="text-sm text-gray-600">
<div className="text-muted-foreground text-sm">
Total:{" "}
{fileData.parsedItems
.reduce((sum, item) => sum + item.amount, 0)
@@ -677,7 +699,7 @@ export function CSVImportPage() {
</div>
<div className="flex items-center gap-2">
{fileData.errors.length > 0 && (
<Badge className="badge-error text-xs">
<Badge variant="destructive" className="text-xs">
{fileData.errors.length} Error
{fileData.errors.length !== 1 ? "s" : ""}
</Badge>
@@ -692,6 +714,7 @@ export function CSVImportPage() {
? "default"
: "secondary"
}
className="text-xs"
>
{fileData.errors.length > 0
? "Has Errors"
@@ -713,20 +736,27 @@ export function CSVImportPage() {
{/* Batch Actions */}
{files.length > 0 && (
<Card className="card-primary">
<CardHeader>
<CardTitle className="card-title-secondary">
<DollarSign className="text-icon-green h-5 w-5" />
Create Invoices
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4">
{isProcessing && (
<div className="flex w-full flex-col gap-2">
<span className="text-xs text-gray-500">
Uploading invoices...
<span className="text-muted-foreground text-sm">
Creating invoices... ({progressCount}/{totalFiles})
</span>
<Progress
value={Math.round((progressCount / totalFiles) * 100)}
className="h-2"
/>
</div>
)}
<div className="flex items-center justify-between">
<div className="text-sm text-gray-600">
<div className="text-muted-foreground text-sm">
{readyFiles} of {totalFiles} files ready for import
</div>
<Button
@@ -790,24 +820,24 @@ export function CSVImportPage() {
</div>
<div className="min-h-0 flex-1 overflow-hidden">
<div className="max-h-96 overflow-y-auto">
<div className="overflow-x-auto">
<table className="w-full min-w-[600px] text-sm">
<thead className="sticky top-0 bg-gray-50">
<div className="p-0">
<div className="max-h-96 overflow-auto">
<table className="w-full border-collapse">
<thead className="bg-muted/50 sticky top-0">
<tr>
<th className="p-2 text-left font-medium whitespace-nowrap text-gray-700">
<th className="text-muted-foreground p-2 text-left font-medium">
Date
</th>
<th className="p-2 text-left font-medium text-gray-700">
<th className="text-muted-foreground p-2 text-left font-medium">
Description
</th>
<th className="p-2 text-right font-medium whitespace-nowrap text-gray-700">
<th className="text-muted-foreground p-2 text-right font-medium whitespace-nowrap">
Hours
</th>
<th className="p-2 text-right font-medium whitespace-nowrap text-gray-700">
<th className="text-muted-foreground p-2 text-right font-medium whitespace-nowrap">
Rate
</th>
<th className="p-2 text-right font-medium whitespace-nowrap text-gray-700">
<th className="text-muted-foreground p-2 text-right font-medium whitespace-nowrap">
Amount
</th>
</tr>
@@ -815,26 +845,23 @@ export function CSVImportPage() {
<tbody>
{files[selectedFileIndex].parsedItems.map(
(item, index) => (
<tr
key={index}
className="border-b border-gray-100"
>
<td className="p-2 whitespace-nowrap text-gray-600">
<tr key={index} className="border-border border-b">
<td className="text-foreground p-2 whitespace-nowrap">
{item.date.toLocaleDateString()}
</td>
<td className="max-w-xs truncate p-2 text-gray-600">
<td className="text-foreground max-w-xs truncate p-2">
{item.description}
</td>
<td className="p-2 text-right whitespace-nowrap text-gray-600">
<td className="text-foreground p-2 text-right whitespace-nowrap">
{item.hours}
</td>
<td className="p-2 text-right whitespace-nowrap text-gray-600">
<td className="text-foreground p-2 text-right whitespace-nowrap">
{item.rate.toLocaleString("en-US", {
style: "currency",
currency: "USD",
})}
</td>
<td className="text-secondary p-2 text-right font-medium whitespace-nowrap">
<td className="text-foreground p-2 text-right font-medium whitespace-nowrap">
{item.amount.toLocaleString("en-US", {
style: "currency",
currency: "USD",

104
src/server/api/routers/settings.ts
View File

@@ -1,12 +1,13 @@
import { z } from "zod";
import { eq, and } from "drizzle-orm";
import bcrypt from "bcryptjs";
import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
import {
users,
clients,
businesses,
invoices,
invoiceItems
invoiceItems,
} from "~/server/db/schema";
// Validation schemas for backup data
@@ -93,7 +94,7 @@ export const settingsRouter = createTRPCRouter({
.input(
z.object({
name: z.string().min(1, "Name is required"),
})
}),
)
.mutation(async ({ ctx, input }) => {
await ctx.db
@@ -106,6 +107,68 @@ export const settingsRouter = createTRPCRouter({
return { success: true };
}),
// Change user password
changePassword: protectedProcedure
.input(
z
.object({
currentPassword: z.string().min(1, "Current password is required"),
newPassword: z
.string()
.min(8, "New password must be at least 8 characters"),
confirmPassword: z
.string()
.min(1, "Password confirmation is required"),
})
.refine((data) => data.newPassword === data.confirmPassword, {
message: "Passwords don't match",
path: ["confirmPassword"],
}),
)
.mutation(async ({ ctx, input }) => {
const userId = ctx.session.user.id;
// Get the current user with password
const user = await ctx.db.query.users.findFirst({
where: eq(users.id, userId),
columns: {
id: true,
password: true,
},
});
if (!user || !user.password) {
throw new Error("User not found or no password set");
}
// Verify current password
const isCurrentPasswordValid = await bcrypt.compare(
input.currentPassword,
user.password,
);
if (!isCurrentPasswordValid) {
throw new Error("Current password is incorrect");
}
// Hash the new password
const saltRounds = 12;
const hashedNewPassword = await bcrypt.hash(
input.newPassword,
saltRounds,
);
// Update the password
await ctx.db
.update(users)
.set({
password: hashedNewPassword,
})
.where(eq(users.id, userId));
return { success: true };
}),
// Export user data (backup)
exportData: protectedProcedure.query(async ({ ctx }) => {
const userId = ctx.session.user.id;
@@ -193,7 +256,7 @@ export const settingsRouter = createTRPCRouter({
name: user?.name ?? "",
email: user?.email ?? "",
},
clients: userClients.map(client => ({
clients: userClients.map((client) => ({
name: client.name,
email: client.email ?? undefined,
phone: client.phone ?? undefined,
@@ -204,7 +267,7 @@ export const settingsRouter = createTRPCRouter({
postalCode: client.postalCode ?? undefined,
country: client.country ?? undefined,
})),
businesses: userBusinesses.map(business => ({
businesses: userBusinesses.map((business) => ({
name: business.name,
email: business.email ?? undefined,
phone: business.phone ?? undefined,
@@ -219,7 +282,7 @@ export const settingsRouter = createTRPCRouter({
logoUrl: business.logoUrl ?? undefined,
isDefault: business.isDefault ?? false,
})),
invoices: userInvoices.map(invoice => ({
invoices: userInvoices.map((invoice) => ({
invoiceNumber: invoice.invoiceNumber,
businessName: invoice.business?.name,
clientName: invoice.client.name,
@@ -307,10 +370,10 @@ export const settingsRouter = createTRPCRouter({
if (newInvoice && invoiceData.items.length > 0) {
// Import invoice items
await tx.insert(invoiceItems).values(
invoiceData.items.map(item => ({
invoiceData.items.map((item) => ({
...item,
invoiceId: newInvoice.id,
}))
})),
);
}
}
@@ -321,8 +384,11 @@ export const settingsRouter = createTRPCRouter({
clients: input.clients.length,
businesses: input.businesses.length,
invoices: input.invoices.length,
items: input.invoices.reduce((sum, inv) => sum + inv.items.length, 0),
}
items: input.invoices.reduce(
(sum, inv) => sum + inv.items.length,
0,
),
},
};
});
}),
@@ -336,17 +402,17 @@ export const settingsRouter = createTRPCRouter({
.select({ count: clients.id })
.from(clients)
.where(eq(clients.createdById, userId))
.then(result => result.length),
.then((result) => result.length),
ctx.db
.select({ count: businesses.id })
.from(businesses)
.where(eq(businesses.createdById, userId))
.then(result => result.length),
.then((result) => result.length),
ctx.db
.select({ count: invoices.id })
.from(invoices)
.where(eq(invoices.createdById, userId))
.then(result => result.length),
.then((result) => result.length),
]);
return {
@@ -358,11 +424,13 @@ export const settingsRouter = createTRPCRouter({
// Delete all user data (for account deletion)
deleteAllData: protectedProcedure
.input(z.object({
confirmText: z.string().refine(val => val === "DELETE ALL DATA", {
message: "You must type 'DELETE ALL DATA' to confirm",
.input(
z.object({
confirmText: z.string().refine((val) => val === "DELETE ALL DATA", {
message: "You must type 'DELETE ALL DATA' to confirm",
}),
}),
}))
)
.mutation(async ({ ctx }) => {
const userId = ctx.session.user.id;
@@ -376,7 +444,9 @@ export const settingsRouter = createTRPCRouter({
if (userInvoiceIds.length > 0) {
for (const invoice of userInvoiceIds) {
await tx.delete(invoiceItems).where(eq(invoiceItems.invoiceId, invoice.id));
await tx
.delete(invoiceItems)
.where(eq(invoiceItems.invoiceId, invoice.id));
}
}