mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2025-12-14 01:54:43 -05:00
Add settings page, port to turso
This commit is contained in:
503
src/app/dashboard/settings/page.tsx
Normal file
503
src/app/dashboard/settings/page.tsx
Normal file
@@ -0,0 +1,503 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import * as React from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import {
|
||||
Download,
|
||||
Upload,
|
||||
User,
|
||||
Database,
|
||||
AlertTriangle,
|
||||
Shield,
|
||||
} from "lucide-react";
|
||||
|
||||
import { api } from "~/trpc/react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "~/components/ui/alert-dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "~/components/ui/dialog";
|
||||
import { Textarea } from "~/components/ui/textarea";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { data: session } = useSession();
|
||||
const [name, setName] = useState("");
|
||||
const [deleteConfirmText, setDeleteConfirmText] = useState("");
|
||||
const [importData, setImportData] = useState("");
|
||||
const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
|
||||
|
||||
// Queries
|
||||
const { data: profile, refetch: refetchProfile } =
|
||||
api.settings.getProfile.useQuery();
|
||||
const { data: dataStats } = api.settings.getDataStats.useQuery();
|
||||
|
||||
// Mutations
|
||||
const updateProfileMutation = api.settings.updateProfile.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Your profile has been successfully updated.");
|
||||
void refetchProfile();
|
||||
},
|
||||
onError: (error: { message: string }) => {
|
||||
toast.error(`Error updating profile: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const exportDataQuery = api.settings.exportData.useQuery(undefined, {
|
||||
enabled: false,
|
||||
});
|
||||
|
||||
// Handle export data success/error
|
||||
React.useEffect(() => {
|
||||
if (exportDataQuery.data && !exportDataQuery.isFetching) {
|
||||
// Create and download the backup file
|
||||
const blob = new Blob([JSON.stringify(exportDataQuery.data, null, 2)], {
|
||||
type: "application/json",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `beenvoice-backup-${new Date().toISOString().split("T")[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast.success("Your data backup has been downloaded.");
|
||||
}
|
||||
|
||||
if (exportDataQuery.error) {
|
||||
toast.error(`Error exporting data: ${exportDataQuery.error.message}`);
|
||||
}
|
||||
}, [exportDataQuery.data, exportDataQuery.isFetching, exportDataQuery.error]);
|
||||
|
||||
const importDataMutation = api.settings.importData.useMutation({
|
||||
onSuccess: (result) => {
|
||||
toast.success(
|
||||
`Data imported successfully! Imported ${result.imported.clients} clients, ${result.imported.businesses} businesses, and ${result.imported.invoices} invoices.`,
|
||||
);
|
||||
setImportData("");
|
||||
setIsImportDialogOpen(false);
|
||||
void refetchProfile();
|
||||
},
|
||||
onError: (error: { message: string }) => {
|
||||
toast.error(`Error importing data: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteDataMutation = api.settings.deleteAllData.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Your account data has been permanently deleted.");
|
||||
setDeleteConfirmText("");
|
||||
},
|
||||
onError: (error: { message: string }) => {
|
||||
toast.error(`Error deleting data: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const handleUpdateProfile = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim()) {
|
||||
toast.error("Please enter your name.");
|
||||
return;
|
||||
}
|
||||
updateProfileMutation.mutate({ name: name.trim() });
|
||||
};
|
||||
|
||||
const handleExportData = () => {
|
||||
void exportDataQuery.refetch();
|
||||
};
|
||||
|
||||
// Type guard for backup data
|
||||
const isValidBackupData = (
|
||||
data: unknown,
|
||||
): data is {
|
||||
exportDate: string;
|
||||
version: string;
|
||||
user: { name?: string; email: string };
|
||||
clients: Array<{
|
||||
name: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
addressLine1?: string;
|
||||
addressLine2?: string;
|
||||
city?: string;
|
||||
state?: string;
|
||||
postalCode?: string;
|
||||
country?: string;
|
||||
}>;
|
||||
businesses: Array<{
|
||||
name: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
addressLine1?: string;
|
||||
addressLine2?: string;
|
||||
city?: string;
|
||||
state?: string;
|
||||
postalCode?: string;
|
||||
country?: string;
|
||||
website?: string;
|
||||
taxId?: string;
|
||||
logoUrl?: string;
|
||||
isDefault?: boolean;
|
||||
}>;
|
||||
invoices: Array<{
|
||||
invoiceNumber: string;
|
||||
businessName?: string;
|
||||
clientName: string;
|
||||
issueDate: Date;
|
||||
dueDate: Date;
|
||||
status?: string;
|
||||
totalAmount?: number;
|
||||
taxRate?: number;
|
||||
notes?: string;
|
||||
items: Array<{
|
||||
date: Date;
|
||||
description: string;
|
||||
hours: number;
|
||||
rate: number;
|
||||
amount: number;
|
||||
position?: number;
|
||||
}>;
|
||||
}>;
|
||||
} => {
|
||||
return !!(
|
||||
data &&
|
||||
typeof data === "object" &&
|
||||
data !== null &&
|
||||
"exportDate" in data &&
|
||||
"version" in data &&
|
||||
"user" in data &&
|
||||
"clients" in data &&
|
||||
"businesses" in data &&
|
||||
"invoices" in data
|
||||
);
|
||||
};
|
||||
|
||||
const handleImportData = () => {
|
||||
try {
|
||||
const parsedData: unknown = JSON.parse(importData);
|
||||
|
||||
if (isValidBackupData(parsedData)) {
|
||||
importDataMutation.mutate(parsedData);
|
||||
} else {
|
||||
toast.error("Invalid backup file format.");
|
||||
}
|
||||
} catch {
|
||||
toast.error("Invalid JSON. Please check your backup file format.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAllData = () => {
|
||||
if (deleteConfirmText !== "DELETE ALL DATA") {
|
||||
toast.error("Please type 'DELETE ALL DATA' to confirm.");
|
||||
return;
|
||||
}
|
||||
deleteDataMutation.mutate({ confirmText: deleteConfirmText });
|
||||
};
|
||||
|
||||
// Set initial name value when profile loads
|
||||
if (profile && !name && profile.name) {
|
||||
setName(profile.name);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-4xl font-bold text-transparent">
|
||||
Settings
|
||||
</h1>
|
||||
<p className="mt-2 text-lg text-gray-600">
|
||||
Manage your account and data preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-2">
|
||||
{/* Profile Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<User className="h-5 w-5" />
|
||||
Profile
|
||||
</CardTitle>
|
||||
<CardDescription>Update your personal information</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<form onSubmit={handleUpdateProfile} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Your full name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
value={session?.user?.email ?? ""}
|
||||
disabled
|
||||
className="bg-gray-50"
|
||||
/>
|
||||
<p className="text-sm text-gray-500">Email cannot be changed</p>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={updateProfileMutation.isPending}
|
||||
className="bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{updateProfileMutation.isPending
|
||||
? "Updating..."
|
||||
: "Update Profile"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Data Statistics */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
Your Data
|
||||
</CardTitle>
|
||||
<CardDescription>Overview of your account data</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-emerald-600">
|
||||
{dataStats?.clients ?? 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">Clients</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-emerald-600">
|
||||
{dataStats?.businesses ?? 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">Businesses</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-emerald-600">
|
||||
{dataStats?.invoices ?? 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">Invoices</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Backup & Restore Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Shield className="h-5 w-5" />
|
||||
Backup & Restore
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Export your data for backup or import from a previous backup
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{/* Export Data */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="font-semibold">Export Data</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Download all your clients, businesses, and invoices as a JSON
|
||||
backup file.
|
||||
</p>
|
||||
<Button
|
||||
onClick={handleExportData}
|
||||
disabled={exportDataQuery.isFetching}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{exportDataQuery.isFetching ? "Exporting..." : "Export Data"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Import Data */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="font-semibold">Import Data</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Restore your data from a previous backup file.
|
||||
</p>
|
||||
<Dialog
|
||||
open={isImportDialogOpen}
|
||||
onOpenChange={setIsImportDialogOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" className="w-full">
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Import Data
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Import Backup Data</DialogTitle>
|
||||
<DialogDescription>
|
||||
Paste the contents of your backup JSON file below. This
|
||||
will add the data to your existing account.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<Textarea
|
||||
placeholder="Paste your backup JSON data here..."
|
||||
value={importData}
|
||||
onChange={(e) => setImportData(e.target.value)}
|
||||
rows={10}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsImportDialogOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleImportData}
|
||||
disabled={
|
||||
!importData.trim() || importDataMutation.isPending
|
||||
}
|
||||
className="bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{importDataMutation.isPending
|
||||
? "Importing..."
|
||||
: "Import Data"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-blue-50 p-4">
|
||||
<h4 className="font-medium text-blue-900">Backup Tips</h4>
|
||||
<ul className="mt-2 space-y-1 text-sm text-blue-800">
|
||||
<li>• Regular backups help protect your data</li>
|
||||
<li>
|
||||
• Backup files contain all your business data in JSON format
|
||||
</li>
|
||||
<li>
|
||||
• Import will add data to your existing account (not replace)
|
||||
</li>
|
||||
<li>• Keep your backup files in a secure location</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<Card className="border-red-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
Danger Zone
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Irreversible actions for your account data
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg bg-red-50 p-4">
|
||||
<h4 className="font-medium text-red-900">Delete All Data</h4>
|
||||
<p className="mt-1 text-sm text-red-800">
|
||||
This will permanently delete all your clients, businesses,
|
||||
invoices, and related data. This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive">Delete All Data</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription className="space-y-2">
|
||||
<p>
|
||||
This action cannot be undone. This will permanently delete
|
||||
all your:
|
||||
</p>
|
||||
<ul className="list-inside list-disc space-y-1 text-sm">
|
||||
<li>Clients and their information</li>
|
||||
<li>Business profiles</li>
|
||||
<li>Invoices and invoice items</li>
|
||||
<li>All related data</li>
|
||||
</ul>
|
||||
<p className="font-medium">
|
||||
Type{" "}
|
||||
<span className="rounded bg-gray-100 px-1 font-mono">
|
||||
DELETE ALL DATA
|
||||
</span>{" "}
|
||||
to confirm:
|
||||
</p>
|
||||
<Input
|
||||
value={deleteConfirmText}
|
||||
onChange={(e) => setDeleteConfirmText(e.target.value)}
|
||||
placeholder="Type: DELETE ALL DATA"
|
||||
className="font-mono"
|
||||
/>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setDeleteConfirmText("")}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDeleteAllData}
|
||||
disabled={
|
||||
deleteConfirmText !== "DELETE ALL DATA" ||
|
||||
deleteDataMutation.isPending
|
||||
}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
{deleteDataMutation.isPending
|
||||
? "Deleting..."
|
||||
: "Delete All Data"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
180
src/app/page.tsx
180
src/app/page.tsx
@@ -1,32 +1,30 @@
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "~/server/auth";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { AuthRedirect } from "~/components/AuthRedirect";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
import { Logo } from "~/components/logo";
|
||||
import {
|
||||
Users,
|
||||
FileText,
|
||||
DollarSign,
|
||||
Calendar,
|
||||
import {
|
||||
Users,
|
||||
FileText,
|
||||
DollarSign,
|
||||
CheckCircle,
|
||||
ArrowRight,
|
||||
Star,
|
||||
Zap,
|
||||
Shield,
|
||||
Clock
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
|
||||
export default async function HomePage() {
|
||||
const session = await auth();
|
||||
|
||||
if (session?.user) {
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
||||
// Landing page for non-authenticated users
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100">
|
||||
<AuthRedirect />
|
||||
{/* Header */}
|
||||
<header className="border-b border-green-200 bg-white/80 backdrop-blur-sm">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
@@ -45,25 +43,25 @@ export default async function HomePage() {
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 px-4">
|
||||
<div className="container mx-auto text-center max-w-4xl">
|
||||
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
|
||||
<section className="px-4 py-20">
|
||||
<div className="container mx-auto max-w-4xl text-center">
|
||||
<h1 className="mb-6 text-5xl font-bold text-gray-900 md:text-6xl">
|
||||
Simple Invoicing for
|
||||
<span className="text-green-600"> Freelancers</span>
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
Create professional invoices, manage clients, and get paid faster with beenvoice.
|
||||
The invoicing app that works as hard as you do.
|
||||
<p className="mx-auto mb-8 max-w-2xl text-xl text-gray-600">
|
||||
Create professional invoices, manage clients, and get paid faster
|
||||
with beenvoice. The invoicing app that works as hard as you do.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<Link href="/auth/register">
|
||||
<Button size="lg" className="text-lg px-8 py-6">
|
||||
<Button size="lg" className="px-8 py-6 text-lg">
|
||||
Start Free Trial
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="#features">
|
||||
<Button variant="outline" size="lg" className="text-lg px-8 py-6">
|
||||
<Button variant="outline" size="lg" className="px-8 py-6 text-lg">
|
||||
See How It Works
|
||||
</Button>
|
||||
</Link>
|
||||
@@ -72,21 +70,21 @@ export default async function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 px-4 bg-white">
|
||||
<section id="features" className="bg-white px-4 py-20">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-gray-900">
|
||||
Everything you need to invoice like a pro
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
<p className="mx-auto max-w-2xl text-xl text-gray-600">
|
||||
Powerful features designed for freelancers and small businesses
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<Users className="h-12 w-12 text-green-600 mb-4" />
|
||||
<Users className="mb-4 h-12 w-12 text-green-600" />
|
||||
<CardTitle>Client Management</CardTitle>
|
||||
<CardDescription>
|
||||
Keep all your client information organized in one place
|
||||
@@ -95,15 +93,15 @@ export default async function HomePage() {
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
Store contact details and addresses
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
Track client history and invoices
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
Search and filter clients easily
|
||||
</li>
|
||||
</ul>
|
||||
@@ -112,7 +110,7 @@ export default async function HomePage() {
|
||||
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<FileText className="h-12 w-12 text-green-600 mb-4" />
|
||||
<FileText className="mb-4 h-12 w-12 text-green-600" />
|
||||
<CardTitle>Professional Invoices</CardTitle>
|
||||
<CardDescription>
|
||||
Create beautiful, detailed invoices with line items
|
||||
@@ -121,15 +119,15 @@ export default async function HomePage() {
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
Add multiple line items with dates
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
Automatic calculations and totals
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
Professional invoice numbering
|
||||
</li>
|
||||
</ul>
|
||||
@@ -138,7 +136,7 @@ export default async function HomePage() {
|
||||
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<DollarSign className="h-12 w-12 text-green-600 mb-4" />
|
||||
<DollarSign className="mb-4 h-12 w-12 text-green-600" />
|
||||
<CardTitle>Payment Tracking</CardTitle>
|
||||
<CardDescription>
|
||||
Monitor invoice status and track payments
|
||||
@@ -147,15 +145,15 @@ export default async function HomePage() {
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
Track draft, sent, paid, and overdue status
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
View outstanding amounts at a glance
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
Payment history and analytics
|
||||
</li>
|
||||
</ul>
|
||||
@@ -166,45 +164,61 @@ export default async function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="py-20 px-4 bg-gray-50">
|
||||
<section className="bg-gray-50 px-4 py-20">
|
||||
<div className="container mx-auto max-w-4xl text-center">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-16">
|
||||
<h2 className="mb-16 text-4xl font-bold text-gray-900">
|
||||
Why choose beenvoice?
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
|
||||
<div className="grid gap-12 md:grid-cols-2">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<Zap className="h-8 w-8 text-green-600 mt-1" />
|
||||
<Zap className="mt-1 h-8 w-8 text-green-600" />
|
||||
<div className="text-left">
|
||||
<h3 className="text-xl font-semibold mb-2">Lightning Fast</h3>
|
||||
<p className="text-gray-600">Create invoices in seconds, not minutes. Our streamlined interface gets you back to work faster.</p>
|
||||
<h3 className="mb-2 text-xl font-semibold">Lightning Fast</h3>
|
||||
<p className="text-gray-600">
|
||||
Create invoices in seconds, not minutes. Our streamlined
|
||||
interface gets you back to work faster.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<Shield className="h-8 w-8 text-green-600 mt-1" />
|
||||
<Shield className="mt-1 h-8 w-8 text-green-600" />
|
||||
<div className="text-left">
|
||||
<h3 className="text-xl font-semibold mb-2">Secure & Private</h3>
|
||||
<p className="text-gray-600">Your data is encrypted and secure. We never share your information with third parties.</p>
|
||||
<h3 className="mb-2 text-xl font-semibold">
|
||||
Secure & Private
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Your data is encrypted and secure. We never share your
|
||||
information with third parties.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<Star className="h-8 w-8 text-green-600 mt-1" />
|
||||
<Star className="mt-1 h-8 w-8 text-green-600" />
|
||||
<div className="text-left">
|
||||
<h3 className="text-xl font-semibold mb-2">Professional Quality</h3>
|
||||
<p className="text-gray-600">Generate invoices that look professional and build trust with your clients.</p>
|
||||
<h3 className="mb-2 text-xl font-semibold">
|
||||
Professional Quality
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Generate invoices that look professional and build trust
|
||||
with your clients.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<Clock className="h-8 w-8 text-green-600 mt-1" />
|
||||
<Clock className="mt-1 h-8 w-8 text-green-600" />
|
||||
<div className="text-left">
|
||||
<h3 className="text-xl font-semibold mb-2">Save Time</h3>
|
||||
<p className="text-gray-600">Automated calculations, templates, and client management save you hours every month.</p>
|
||||
<h3 className="mb-2 text-xl font-semibold">Save Time</h3>
|
||||
<p className="text-gray-600">
|
||||
Automated calculations, templates, and client management
|
||||
save you hours every month.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -213,54 +227,44 @@ export default async function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 px-4 bg-green-600">
|
||||
<div className="container mx-auto text-center max-w-2xl">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">
|
||||
<section className="bg-green-600 px-4 py-20">
|
||||
<div className="container mx-auto max-w-2xl text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-white">
|
||||
Ready to get started?
|
||||
</h2>
|
||||
<p className="text-xl text-green-100 mb-8">
|
||||
Join thousands of freelancers who trust beenvoice for their invoicing needs.
|
||||
<p className="mb-8 text-xl text-green-100">
|
||||
Join thousands of freelancers who trust beenvoice for their
|
||||
invoicing needs.
|
||||
</p>
|
||||
<Link href="/auth/register">
|
||||
<Button size="lg" variant="secondary" className="text-lg px-8 py-6">
|
||||
<Button size="lg" variant="secondary" className="px-8 py-6 text-lg">
|
||||
Start Your Free Trial
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<p className="text-green-200 mt-4 text-sm">
|
||||
<p className="mt-4 text-sm text-green-200">
|
||||
No credit card required • Cancel anytime
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-12 px-4 bg-gray-900 text-white">
|
||||
<footer className="bg-gray-900 px-4 py-12 text-white">
|
||||
<div className="container mx-auto text-center">
|
||||
<Logo className="mx-auto mb-4" />
|
||||
<p className="text-gray-400 mb-4">
|
||||
<p className="mb-4 text-gray-400">
|
||||
Simple invoicing for freelancers and small businesses
|
||||
</p>
|
||||
<div className="flex justify-center space-x-6 text-sm text-gray-400">
|
||||
<Link href="/auth/signin" className="hover:text-white">Sign In</Link>
|
||||
<Link href="/auth/register" className="hover:text-white">Register</Link>
|
||||
<Link href="/auth/signin" className="hover:text-white">
|
||||
Sign In
|
||||
</Link>
|
||||
<Link href="/auth/register" className="hover:text-white">
|
||||
Register
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Client components for stats and activity
|
||||
function DashboardStats({ type }: { type: "clients" | "invoices" | "revenue" | "outstanding" }) {
|
||||
// This will be implemented with tRPC queries
|
||||
return <span>0</span>;
|
||||
}
|
||||
|
||||
function RecentActivity() {
|
||||
// This will be implemented with tRPC queries
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">No recent activity</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
20
src/components/AuthRedirect.tsx
Normal file
20
src/components/AuthRedirect.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export function AuthRedirect() {
|
||||
const { data: session, status } = useSession();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// Only redirect if we're sure the user is authenticated
|
||||
if (status === "authenticated" && session?.user) {
|
||||
router.push("/dashboard");
|
||||
}
|
||||
}, [session, status, router]);
|
||||
|
||||
// This component doesn't render anything
|
||||
return null;
|
||||
}
|
||||
157
src/components/ui/alert-dialog.tsx
Normal file
157
src/components/ui/alert-dialog.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||
|
||||
import { cn } from "~/lib/utils"
|
||||
import { buttonVariants } from "~/components/ui/button"
|
||||
|
||||
function AlertDialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Action
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
}
|
||||
@@ -22,9 +22,9 @@ export function middleware(request: NextRequest) {
|
||||
|
||||
// Check for session token in cookies (Auth.js v5 cookie names)
|
||||
const sessionToken =
|
||||
request.cookies.get("authjs.session-token")?.value ||
|
||||
request.cookies.get("__Secure-authjs.session-token")?.value ||
|
||||
request.cookies.get("next-auth.session-token")?.value ||
|
||||
request.cookies.get("authjs.session-token")?.value ??
|
||||
request.cookies.get("__Secure-authjs.session-token")?.value ??
|
||||
request.cookies.get("next-auth.session-token")?.value ??
|
||||
request.cookies.get("__Secure-next-auth.session-token")?.value;
|
||||
|
||||
// If no session token, redirect to sign-in
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { clientsRouter } from "~/server/api/routers/clients";
|
||||
import { businessesRouter } from "~/server/api/routers/businesses";
|
||||
import { invoicesRouter } from "~/server/api/routers/invoices";
|
||||
import { settingsRouter } from "~/server/api/routers/settings";
|
||||
import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
|
||||
|
||||
/**
|
||||
@@ -12,6 +13,7 @@ export const appRouter = createTRPCRouter({
|
||||
clients: clientsRouter,
|
||||
businesses: businessesRouter,
|
||||
invoices: invoicesRouter,
|
||||
settings: settingsRouter,
|
||||
});
|
||||
|
||||
// export type definition of API
|
||||
|
||||
395
src/server/api/routers/settings.ts
Normal file
395
src/server/api/routers/settings.ts
Normal file
@@ -0,0 +1,395 @@
|
||||
import { z } from "zod";
|
||||
import { eq, and } from "drizzle-orm";
|
||||
import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
|
||||
import {
|
||||
users,
|
||||
clients,
|
||||
businesses,
|
||||
invoices,
|
||||
invoiceItems
|
||||
} from "~/server/db/schema";
|
||||
|
||||
// Validation schemas for backup data
|
||||
const ClientBackupSchema = z.object({
|
||||
name: z.string(),
|
||||
email: z.string().optional(),
|
||||
phone: z.string().optional(),
|
||||
addressLine1: z.string().optional(),
|
||||
addressLine2: z.string().optional(),
|
||||
city: z.string().optional(),
|
||||
state: z.string().optional(),
|
||||
postalCode: z.string().optional(),
|
||||
country: z.string().optional(),
|
||||
});
|
||||
|
||||
const BusinessBackupSchema = z.object({
|
||||
name: z.string(),
|
||||
email: z.string().optional(),
|
||||
phone: z.string().optional(),
|
||||
addressLine1: z.string().optional(),
|
||||
addressLine2: z.string().optional(),
|
||||
city: z.string().optional(),
|
||||
state: z.string().optional(),
|
||||
postalCode: z.string().optional(),
|
||||
country: z.string().optional(),
|
||||
website: z.string().optional(),
|
||||
taxId: z.string().optional(),
|
||||
logoUrl: z.string().optional(),
|
||||
isDefault: z.boolean().default(false),
|
||||
});
|
||||
|
||||
const InvoiceItemBackupSchema = z.object({
|
||||
date: z.date(),
|
||||
description: z.string(),
|
||||
hours: z.number(),
|
||||
rate: z.number(),
|
||||
amount: z.number(),
|
||||
position: z.number().default(0),
|
||||
});
|
||||
|
||||
const InvoiceBackupSchema = z.object({
|
||||
invoiceNumber: z.string(),
|
||||
businessName: z.string().optional(),
|
||||
clientName: z.string(),
|
||||
issueDate: z.date(),
|
||||
dueDate: z.date(),
|
||||
status: z.string().default("draft"),
|
||||
totalAmount: z.number().default(0),
|
||||
taxRate: z.number().default(0),
|
||||
notes: z.string().optional(),
|
||||
items: z.array(InvoiceItemBackupSchema),
|
||||
});
|
||||
|
||||
const BackupDataSchema = z.object({
|
||||
exportDate: z.string(),
|
||||
version: z.string().default("1.0"),
|
||||
user: z.object({
|
||||
name: z.string().optional(),
|
||||
email: z.string(),
|
||||
}),
|
||||
clients: z.array(ClientBackupSchema),
|
||||
businesses: z.array(BusinessBackupSchema),
|
||||
invoices: z.array(InvoiceBackupSchema),
|
||||
});
|
||||
|
||||
export const settingsRouter = createTRPCRouter({
|
||||
// Get user profile information
|
||||
getProfile: protectedProcedure.query(async ({ ctx }) => {
|
||||
const user = await ctx.db.query.users.findFirst({
|
||||
where: eq(users.id, ctx.session.user.id),
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
email: true,
|
||||
image: true,
|
||||
},
|
||||
});
|
||||
|
||||
return user;
|
||||
}),
|
||||
|
||||
// Update user profile
|
||||
updateProfile: protectedProcedure
|
||||
.input(
|
||||
z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
})
|
||||
)
|
||||
.mutation(async ({ ctx, input }) => {
|
||||
await ctx.db
|
||||
.update(users)
|
||||
.set({
|
||||
name: input.name,
|
||||
})
|
||||
.where(eq(users.id, ctx.session.user.id));
|
||||
|
||||
return { success: true };
|
||||
}),
|
||||
|
||||
// Export user data (backup)
|
||||
exportData: protectedProcedure.query(async ({ ctx }) => {
|
||||
const userId = ctx.session.user.id;
|
||||
|
||||
// Get user info
|
||||
const user = await ctx.db.query.users.findFirst({
|
||||
where: eq(users.id, userId),
|
||||
columns: {
|
||||
name: true,
|
||||
email: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Get all clients
|
||||
const userClients = await ctx.db.query.clients.findMany({
|
||||
where: eq(clients.createdById, userId),
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
email: true,
|
||||
phone: true,
|
||||
addressLine1: true,
|
||||
addressLine2: true,
|
||||
city: true,
|
||||
state: true,
|
||||
postalCode: true,
|
||||
country: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Get all businesses
|
||||
const userBusinesses = await ctx.db.query.businesses.findMany({
|
||||
where: eq(businesses.createdById, userId),
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
email: true,
|
||||
phone: true,
|
||||
addressLine1: true,
|
||||
addressLine2: true,
|
||||
city: true,
|
||||
state: true,
|
||||
postalCode: true,
|
||||
country: true,
|
||||
website: true,
|
||||
taxId: true,
|
||||
logoUrl: true,
|
||||
isDefault: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Get all invoices with their items
|
||||
const userInvoices = await ctx.db.query.invoices.findMany({
|
||||
where: eq(invoices.createdById, userId),
|
||||
with: {
|
||||
client: {
|
||||
columns: {
|
||||
name: true,
|
||||
},
|
||||
},
|
||||
business: {
|
||||
columns: {
|
||||
name: true,
|
||||
},
|
||||
},
|
||||
items: {
|
||||
columns: {
|
||||
date: true,
|
||||
description: true,
|
||||
hours: true,
|
||||
rate: true,
|
||||
amount: true,
|
||||
position: true,
|
||||
},
|
||||
orderBy: (items, { asc }) => [asc(items.position)],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Format the data for export
|
||||
const backupData = {
|
||||
exportDate: new Date().toISOString(),
|
||||
version: "1.0",
|
||||
user: {
|
||||
name: user?.name ?? "",
|
||||
email: user?.email ?? "",
|
||||
},
|
||||
clients: userClients.map(client => ({
|
||||
name: client.name,
|
||||
email: client.email ?? undefined,
|
||||
phone: client.phone ?? undefined,
|
||||
addressLine1: client.addressLine1 ?? undefined,
|
||||
addressLine2: client.addressLine2 ?? undefined,
|
||||
city: client.city ?? undefined,
|
||||
state: client.state ?? undefined,
|
||||
postalCode: client.postalCode ?? undefined,
|
||||
country: client.country ?? undefined,
|
||||
})),
|
||||
businesses: userBusinesses.map(business => ({
|
||||
name: business.name,
|
||||
email: business.email ?? undefined,
|
||||
phone: business.phone ?? undefined,
|
||||
addressLine1: business.addressLine1 ?? undefined,
|
||||
addressLine2: business.addressLine2 ?? undefined,
|
||||
city: business.city ?? undefined,
|
||||
state: business.state ?? undefined,
|
||||
postalCode: business.postalCode ?? undefined,
|
||||
country: business.country ?? undefined,
|
||||
website: business.website ?? undefined,
|
||||
taxId: business.taxId ?? undefined,
|
||||
logoUrl: business.logoUrl ?? undefined,
|
||||
isDefault: business.isDefault ?? false,
|
||||
})),
|
||||
invoices: userInvoices.map(invoice => ({
|
||||
invoiceNumber: invoice.invoiceNumber,
|
||||
businessName: invoice.business?.name,
|
||||
clientName: invoice.client.name,
|
||||
issueDate: invoice.issueDate,
|
||||
dueDate: invoice.dueDate,
|
||||
status: invoice.status,
|
||||
totalAmount: invoice.totalAmount,
|
||||
taxRate: invoice.taxRate,
|
||||
notes: invoice.notes ?? undefined,
|
||||
items: invoice.items,
|
||||
})),
|
||||
};
|
||||
|
||||
return backupData;
|
||||
}),
|
||||
|
||||
// Import user data (restore)
|
||||
importData: protectedProcedure
|
||||
.input(BackupDataSchema)
|
||||
.mutation(async ({ ctx, input }) => {
|
||||
const userId = ctx.session.user.id;
|
||||
|
||||
return await ctx.db.transaction(async (tx) => {
|
||||
// Create a map to track old to new client IDs
|
||||
const clientIdMap = new Map<string, string>();
|
||||
const businessIdMap = new Map<string, string>();
|
||||
|
||||
// Import clients
|
||||
for (const clientData of input.clients) {
|
||||
const [newClient] = await tx
|
||||
.insert(clients)
|
||||
.values({
|
||||
...clientData,
|
||||
createdById: userId,
|
||||
})
|
||||
.returning({ id: clients.id });
|
||||
|
||||
if (newClient) {
|
||||
clientIdMap.set(clientData.name, newClient.id);
|
||||
}
|
||||
}
|
||||
|
||||
// Import businesses
|
||||
for (const businessData of input.businesses) {
|
||||
const [newBusiness] = await tx
|
||||
.insert(businesses)
|
||||
.values({
|
||||
...businessData,
|
||||
createdById: userId,
|
||||
})
|
||||
.returning({ id: businesses.id });
|
||||
|
||||
if (newBusiness) {
|
||||
businessIdMap.set(businessData.name, newBusiness.id);
|
||||
}
|
||||
}
|
||||
|
||||
// Import invoices
|
||||
for (const invoiceData of input.invoices) {
|
||||
const clientId = clientIdMap.get(invoiceData.clientName);
|
||||
if (!clientId) {
|
||||
throw new Error(`Client ${invoiceData.clientName} not found`);
|
||||
}
|
||||
|
||||
const businessId = invoiceData.businessName
|
||||
? businessIdMap.get(invoiceData.businessName)
|
||||
: null;
|
||||
|
||||
const [newInvoice] = await tx
|
||||
.insert(invoices)
|
||||
.values({
|
||||
invoiceNumber: invoiceData.invoiceNumber,
|
||||
businessId,
|
||||
clientId,
|
||||
issueDate: invoiceData.issueDate,
|
||||
dueDate: invoiceData.dueDate,
|
||||
status: invoiceData.status,
|
||||
totalAmount: invoiceData.totalAmount,
|
||||
taxRate: invoiceData.taxRate,
|
||||
notes: invoiceData.notes,
|
||||
createdById: userId,
|
||||
})
|
||||
.returning({ id: invoices.id });
|
||||
|
||||
if (newInvoice && invoiceData.items.length > 0) {
|
||||
// Import invoice items
|
||||
await tx.insert(invoiceItems).values(
|
||||
invoiceData.items.map(item => ({
|
||||
...item,
|
||||
invoiceId: newInvoice.id,
|
||||
}))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
imported: {
|
||||
clients: input.clients.length,
|
||||
businesses: input.businesses.length,
|
||||
invoices: input.invoices.length,
|
||||
items: input.invoices.reduce((sum, inv) => sum + inv.items.length, 0),
|
||||
}
|
||||
};
|
||||
});
|
||||
}),
|
||||
|
||||
// Get data statistics
|
||||
getDataStats: protectedProcedure.query(async ({ ctx }) => {
|
||||
const userId = ctx.session.user.id;
|
||||
|
||||
const [clientCount, businessCount, invoiceCount] = await Promise.all([
|
||||
ctx.db
|
||||
.select({ count: clients.id })
|
||||
.from(clients)
|
||||
.where(eq(clients.createdById, userId))
|
||||
.then(result => result.length),
|
||||
ctx.db
|
||||
.select({ count: businesses.id })
|
||||
.from(businesses)
|
||||
.where(eq(businesses.createdById, userId))
|
||||
.then(result => result.length),
|
||||
ctx.db
|
||||
.select({ count: invoices.id })
|
||||
.from(invoices)
|
||||
.where(eq(invoices.createdById, userId))
|
||||
.then(result => result.length),
|
||||
]);
|
||||
|
||||
return {
|
||||
clients: clientCount,
|
||||
businesses: businessCount,
|
||||
invoices: invoiceCount,
|
||||
};
|
||||
}),
|
||||
|
||||
// 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",
|
||||
}),
|
||||
}))
|
||||
.mutation(async ({ ctx }) => {
|
||||
const userId = ctx.session.user.id;
|
||||
|
||||
return await ctx.db.transaction(async (tx) => {
|
||||
// Delete in order due to foreign key constraints
|
||||
// 1. Invoice items (cascade should handle this, but being explicit)
|
||||
const userInvoiceIds = await tx
|
||||
.select({ id: invoices.id })
|
||||
.from(invoices)
|
||||
.where(eq(invoices.createdById, userId));
|
||||
|
||||
if (userInvoiceIds.length > 0) {
|
||||
for (const invoice of userInvoiceIds) {
|
||||
await tx.delete(invoiceItems).where(eq(invoiceItems.invoiceId, invoice.id));
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Invoices
|
||||
await tx.delete(invoices).where(eq(invoices.createdById, userId));
|
||||
|
||||
// 3. Clients
|
||||
await tx.delete(clients).where(eq(clients.createdById, userId));
|
||||
|
||||
// 4. Businesses
|
||||
await tx.delete(businesses).where(eq(businesses.createdById, userId));
|
||||
|
||||
return { success: true };
|
||||
});
|
||||
}),
|
||||
});
|
||||
Reference in New Issue
Block a user