Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b8b2eb798a | |||
| c373f66b98 | |||
| 66486db6da | |||
| 7e94d1ee9c | |||
| 563beb9e67 | |||
| dddc04a1ff | |||
| 8b1449269b |
@@ -1,29 +1,59 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
||||||
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
|
||||||
import ContactText from "@/components/sections/contact/ContactText";
|
|
||||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||||
import Link from "next/link";
|
import { FileText, Send, Download, Plus, Trash2 } from "lucide-react";
|
||||||
import {
|
|
||||||
Sparkles,
|
interface BillEntry {
|
||||||
Zap,
|
id: string;
|
||||||
DollarSign,
|
metalType: string;
|
||||||
TrendingUp,
|
weight: string;
|
||||||
BarChart3,
|
description: string;
|
||||||
Lock,
|
customerPhone: string;
|
||||||
Users,
|
}
|
||||||
Shield,
|
|
||||||
Gauge,
|
export default function AdminBillingPage() {
|
||||||
Database,
|
const [bills, setBills] = useState<BillEntry[]>([]);
|
||||||
AlertCircle,
|
const [formData, setFormData] = useState({
|
||||||
CheckCircle2,
|
metalType: "gold", weight: "", description: "", customerPhone: ""});
|
||||||
Crown,
|
|
||||||
} from "lucide-react";
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddBill = () => {
|
||||||
|
if (!formData.weight || !formData.customerPhone) {
|
||||||
|
alert("Please fill in all required fields");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newBill: BillEntry = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
metalType: formData.metalType,
|
||||||
|
weight: formData.weight,
|
||||||
|
description: formData.description,
|
||||||
|
customerPhone: formData.customerPhone,
|
||||||
|
};
|
||||||
|
|
||||||
|
setBills((prev) => [newBill, ...prev]);
|
||||||
|
setFormData({
|
||||||
|
metalType: "gold", weight: "", description: "", customerPhone: ""});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGenerateBill = (bill: BillEntry) => {
|
||||||
|
alert(`Bill Generated:\nMetal: ${bill.metalType}\nWeight: ${bill.weight}g\nCustomer Phone: ${bill.customerPhone}\nDescription: ${bill.description}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteBill = (id: string) => {
|
||||||
|
setBills((prev) => prev.filter((bill) => bill.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
export default function AdminPage() {
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-magnetic"
|
defaultButtonVariant="hover-magnetic"
|
||||||
@@ -44,217 +74,162 @@ export default function AdminPage() {
|
|||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "Features", id: "#features" },
|
{ name: "Features", id: "#features" },
|
||||||
|
{ name: "How It Works", id: "#how-it-works" },
|
||||||
{ name: "Pricing", id: "#pricing" },
|
{ name: "Pricing", id: "#pricing" },
|
||||||
{ name: "Admin", id: "admin-controls" },
|
{ name: "Admin", id: "/admin" },
|
||||||
]}
|
]}
|
||||||
button={{
|
button={{
|
||||||
text: "Dashboard",
|
text: "Get Started", href: "/login"}}
|
||||||
href: "/dashboard",
|
|
||||||
}}
|
|
||||||
animateOnLoad={true}
|
animateOnLoad={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Admin Controls Section */}
|
{/* Main Content */}
|
||||||
<div id="admin-controls" data-section="admin-controls" className="w-full py-20">
|
<div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-950 py-20 px-4">
|
||||||
<FeatureBento
|
<div className="max-w-5xl mx-auto">
|
||||||
title="Admin Dashboard Controls"
|
{/* Header */}
|
||||||
description="Manage your billing system with advanced admin features and real-time controls"
|
<div className="mb-12 text-center">
|
||||||
tag="Admin Panel"
|
<h1 className="text-4xl font-bold text-white mb-4">Admin Billing Form</h1>
|
||||||
tagIcon={Sparkles}
|
<p className="text-gray-400 text-lg">Create and manage bills with metal type, weight, description, and customer phone number</p>
|
||||||
tagAnimation="slide-up"
|
</div>
|
||||||
features={[
|
|
||||||
{
|
|
||||||
title: "Price Management",
|
|
||||||
description: "Update gold and silver prices in real-time across your system",
|
|
||||||
bentoComponent: "icon-info-cards",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
icon: DollarSign,
|
|
||||||
label: "Live Updates",
|
|
||||||
value: "Instant Sync",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: TrendingUp,
|
|
||||||
label: "Price History",
|
|
||||||
value: "Track Changes",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Gauge,
|
|
||||||
label: "Bulk Adjust",
|
|
||||||
value: "Mass Update",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Analytics Dashboard",
|
|
||||||
description: "View comprehensive reports and metrics about your shop operations",
|
|
||||||
bentoComponent: "icon-info-cards",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
icon: BarChart3,
|
|
||||||
label: "Sales Metrics",
|
|
||||||
value: "Real-time Data",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Database,
|
|
||||||
label: "Bill Stats",
|
|
||||||
value: "Monthly Report",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Users,
|
|
||||||
label: "Customer Insights",
|
|
||||||
value: "Demographics",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Security Settings",
|
|
||||||
description: "Control user access, permissions, and system security features",
|
|
||||||
bentoComponent: "3d-stack-cards",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
icon: Lock,
|
|
||||||
title: "User Management",
|
|
||||||
subtitle: "Control Access",
|
|
||||||
detail: "Add and manage staff accounts",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Shield,
|
|
||||||
title: "Security Audit",
|
|
||||||
subtitle: "Activity Logs",
|
|
||||||
detail: "Track all system changes",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: AlertCircle,
|
|
||||||
title: "Alerts & Notifications",
|
|
||||||
subtitle: "System Updates",
|
|
||||||
detail: "Get important notifications",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
textboxLayout="default"
|
|
||||||
animationType="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Access Dashboard",
|
|
||||||
href: "/dashboard",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Advanced Plans Section */}
|
{/* Form Section */}
|
||||||
<div id="advanced-features" data-section="advanced-features" className="w-full py-20">
|
<div className="bg-gray-800 rounded-xl p-8 mb-12 shadow-lg border border-gray-700">
|
||||||
<PricingCardTwo
|
<h2 className="text-2xl font-semibold text-white mb-6 flex items-center gap-2">
|
||||||
title="Admin Plan Features"
|
<FileText size={24} /> Create New Bill
|
||||||
description="Comprehensive admin packages for different shop sizes"
|
</h2>
|
||||||
tag="For Shop Owners"
|
|
||||||
tagIcon={Zap}
|
|
||||||
tagAnimation="slide-up"
|
|
||||||
plans={[
|
|
||||||
{
|
|
||||||
id: "admin-starter",
|
|
||||||
badge: "Starter Admin",
|
|
||||||
badgeIcon: Sparkles,
|
|
||||||
price: "₹999/mo",
|
|
||||||
subtitle: "Single location management",
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
text: "Setup Admin",
|
|
||||||
href: "/admin/setup",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "Learn More",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"1 admin account",
|
|
||||||
"Price management",
|
|
||||||
"Basic analytics",
|
|
||||||
"Bill export",
|
|
||||||
"Email support",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "admin-pro",
|
|
||||||
badge: "Professional Admin",
|
|
||||||
badgeIcon: Crown,
|
|
||||||
price: "₹2,999/mo",
|
|
||||||
subtitle: "Multi-user team management",
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
text: "Setup Admin",
|
|
||||||
href: "/admin/setup",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "Learn More",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"5 admin accounts",
|
|
||||||
"Advanced price control",
|
|
||||||
"Custom reports",
|
|
||||||
"Role-based access",
|
|
||||||
"Priority support",
|
|
||||||
"API access",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "admin-enterprise",
|
|
||||||
badge: "Enterprise Admin",
|
|
||||||
badgeIcon: Zap,
|
|
||||||
price: "₹7,999/mo",
|
|
||||||
subtitle: "Large-scale operations",
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
text: "Contact Sales",
|
|
||||||
href: "/contact",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "Schedule Demo",
|
|
||||||
href: "/demo",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"Unlimited admin accounts",
|
|
||||||
"Multi-location management",
|
|
||||||
"Advanced analytics",
|
|
||||||
"Custom integrations",
|
|
||||||
"Dedicated support",
|
|
||||||
"White-label options",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
textboxLayout="default"
|
|
||||||
animationType="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Support CTA Section */}
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||||
<div id="support-cta" data-section="support-cta" className="w-full py-20">
|
{/* Metal Type */}
|
||||||
<ContactText
|
<div>
|
||||||
text="Need help setting up your admin dashboard? Our expert team is ready to assist you with configuration and training."
|
<label className="block text-gray-300 font-medium mb-2">Metal Type *</label>
|
||||||
animationType="entrance-slide"
|
<select
|
||||||
buttons={[
|
name="metalType"
|
||||||
{
|
value={formData.metalType}
|
||||||
text: "Contact Support",
|
onChange={handleInputChange}
|
||||||
href: "/support",
|
className="w-full px-4 py-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:border-blue-500 focus:outline-none"
|
||||||
},
|
>
|
||||||
{
|
<option value="gold">Gold</option>
|
||||||
text: "View Documentation",
|
<option value="silver">Silver</option>
|
||||||
href: "/docs",
|
<option value="platinum">Platinum</option>
|
||||||
},
|
<option value="copper">Copper</option>
|
||||||
]}
|
</select>
|
||||||
background={{ variant: "plain" }}
|
</div>
|
||||||
useInvertedBackground={true}
|
|
||||||
/>
|
{/* Weight */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-gray-300 font-medium mb-2">Weight (grams) *</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="weight"
|
||||||
|
value={formData.weight}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="Enter weight in grams"
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-gray-700 text-white placeholder-gray-500 border border-gray-600 focus:border-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Customer Phone */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-gray-300 font-medium mb-2">Customer Phone Number *</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
name="customerPhone"
|
||||||
|
value={formData.customerPhone}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="Enter customer phone number"
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-gray-700 text-white placeholder-gray-500 border border-gray-600 focus:border-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-gray-300 font-medium mb-2">Description</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="description"
|
||||||
|
value={formData.description}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="Enter item description"
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-gray-700 text-white placeholder-gray-500 border border-gray-600 focus:border-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add Bill Button */}
|
||||||
|
<button
|
||||||
|
onClick={handleAddBill}
|
||||||
|
className="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg flex items-center justify-center gap-2 transition-colors"
|
||||||
|
>
|
||||||
|
<Plus size={20} /> Add Bill
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bills List Section */}
|
||||||
|
<div className="bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-700">
|
||||||
|
<h2 className="text-2xl font-semibold text-white mb-6">Bills Created ({bills.length})</h2>
|
||||||
|
|
||||||
|
{bills.length === 0 ? (
|
||||||
|
<p className="text-gray-400 text-center py-8">No bills created yet. Add a new bill using the form above.</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{bills.map((bill) => (
|
||||||
|
<div
|
||||||
|
key={bill.id}
|
||||||
|
className="bg-gray-700 rounded-lg p-6 border border-gray-600 hover:border-gray-500 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-400 text-sm">Metal Type</p>
|
||||||
|
<p className="text-white font-semibold capitalize">{bill.metalType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-400 text-sm">Weight</p>
|
||||||
|
<p className="text-white font-semibold">{bill.weight}g</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-400 text-sm">Description</p>
|
||||||
|
<p className="text-white font-semibold">{bill.description || "N/A"}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-400 text-sm">Customer Phone</p>
|
||||||
|
<p className="text-white font-semibold">{bill.customerPhone}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-400 text-sm">Bill ID</p>
|
||||||
|
<p className="text-white font-semibold text-xs">{bill.id}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-3 mt-4">
|
||||||
|
<button
|
||||||
|
onClick={() => handleGenerateBill(bill)}
|
||||||
|
className="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors text-sm font-medium"
|
||||||
|
>
|
||||||
|
<Download size={16} /> Generate Bill
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
alert(`WhatsApp message would be sent to ${bill.customerPhone}`);
|
||||||
|
}}
|
||||||
|
className="flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition-colors text-sm font-medium"
|
||||||
|
>
|
||||||
|
<Send size={16} /> Send WhatsApp
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDeleteBill(bill.id)}
|
||||||
|
className="flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors text-sm font-medium ml-auto"
|
||||||
|
>
|
||||||
|
<Trash2 size={16} /> Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
@@ -264,66 +239,39 @@ export default function AdminPage() {
|
|||||||
copyrightText="© 2025 GoldBill Pro | Billing Solutions for Gold & Silver Shops"
|
copyrightText="© 2025 GoldBill Pro | Billing Solutions for Gold & Silver Shops"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Product",
|
title: "Product", items: [
|
||||||
items: [
|
|
||||||
{
|
{
|
||||||
label: "Features",
|
label: "Features", href: "#features"},
|
||||||
href: "#admin-controls",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Admin Panel",
|
label: "Pricing", href: "#pricing"},
|
||||||
href: "#advanced-features",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Dashboard",
|
label: "How It Works", href: "#how-it-works"},
|
||||||
href: "/dashboard",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Documentation",
|
label: "Security", href: "#"},
|
||||||
href: "/docs",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Company",
|
title: "Company", items: [
|
||||||
items: [
|
|
||||||
{
|
{
|
||||||
label: "About Us",
|
label: "About Us", href: "/about"},
|
||||||
href: "/about",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Blog",
|
label: "Blog", href: "/blog"},
|
||||||
href: "/blog",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Careers",
|
label: "Careers", href: "/careers"},
|
||||||
href: "/careers",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Contact",
|
label: "Contact", href: "#"},
|
||||||
href: "/support",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Legal",
|
title: "Legal", items: [
|
||||||
items: [
|
|
||||||
{
|
{
|
||||||
label: "Privacy Policy",
|
label: "Privacy Policy", href: "#"},
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Terms of Service",
|
label: "Terms of Service", href: "#"},
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Cookie Policy",
|
label: "Cookie Policy", href: "#"},
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Support",
|
label: "Support", href: "/support"},
|
||||||
href: "/support",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@@ -331,4 +279,4 @@ export default function AdminPage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
1434
src/app/layout.tsx
1434
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
113
src/app/page.tsx
113
src/app/page.tsx
@@ -33,9 +33,77 @@ import {
|
|||||||
MessageSquare,
|
MessageSquare,
|
||||||
Check,
|
Check,
|
||||||
Crown,
|
Crown,
|
||||||
|
PrinterIcon,
|
||||||
|
Share2,
|
||||||
|
MessageCircle,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
|
// Print functionality
|
||||||
|
const handlePrintBill = (billData: any) => {
|
||||||
|
const printWindow = window.open("", "PRINT_BILL", "height=600,width=800");
|
||||||
|
if (printWindow) {
|
||||||
|
printWindow.document.write(`
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>GoldBill Receipt</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
||||||
|
.bill-header { text-align: center; margin-bottom: 20px; }
|
||||||
|
.bill-details { margin: 10px 0; }
|
||||||
|
.bill-items { width: 100%; border-collapse: collapse; margin: 20px 0; }
|
||||||
|
.bill-items th, .bill-items td { border: 1px solid #000; padding: 8px; text-align: left; }
|
||||||
|
.bill-total { text-align: right; font-weight: bold; margin-top: 20px; }
|
||||||
|
@media print { body { margin: 0; } }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="bill-header">
|
||||||
|
<h1>GoldBill Pro</h1>
|
||||||
|
<p>Professional Billing Receipt</p>
|
||||||
|
</div>
|
||||||
|
<div class="bill-details">
|
||||||
|
<p><strong>Customer:</strong> ${billData.customerName || "N/A"}</p>
|
||||||
|
<p><strong>Phone:</strong> ${billData.customerPhone || "N/A"}</p>
|
||||||
|
<p><strong>Date:</strong> ${new Date().toLocaleDateString()}</p>
|
||||||
|
</div>
|
||||||
|
<table class="bill-items">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Item Type</th>
|
||||||
|
<th>Weight (g)</th>
|
||||||
|
<th>Price/g</th>
|
||||||
|
<th>Total</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>${billData.itemType || "Gold/Silver"}</td>
|
||||||
|
<td>${billData.weight || "0"}</td>
|
||||||
|
<td>₹${billData.pricePerGram || "0"}</td>
|
||||||
|
<td>₹${billData.total || "0"}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="bill-total">
|
||||||
|
<p>Total Amount: ₹${billData.total || "0"}</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`);
|
||||||
|
printWindow.document.close();
|
||||||
|
printWindow.print();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// WhatsApp integration
|
||||||
|
const handleSendWhatsAppMessage = (customerPhone: string, billData: any) => {
|
||||||
|
const message = `Thank you for your purchase at GoldBill Pro!\n\nBill Details:\nItem: ${billData.itemType || "Gold/Silver"}\nWeight: ${billData.weight || "0"}g\nTotal: ₹${billData.total || "0"}\n\nWe appreciate your business!`;
|
||||||
|
const encodedMessage = encodeURIComponent(message);
|
||||||
|
const whatsappUrl = `https://wa.me/${customerPhone}?text=${encodedMessage}`;
|
||||||
|
window.open(whatsappUrl, "_blank");
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-magnetic"
|
defaultButtonVariant="hover-magnetic"
|
||||||
@@ -83,9 +151,11 @@ export default function HomePage() {
|
|||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
mediaItems={[
|
mediaItems={[
|
||||||
{
|
{
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/low-carbon-footprint-eco-food_482257-96781.jpg?_wi=1", imageAlt: "billing software dashboard interface admin panel"},
|
imageSrc:
|
||||||
|
"http://img.b2bpic.net/free-photo/low-carbon-footprint-eco-food_482257-96781.jpg?_wi=1", imageAlt: "billing software dashboard interface admin panel"},
|
||||||
{
|
{
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-office-using-printer_23-2149456964.jpg?_wi=1", imageAlt: "printing invoice bill receipt paper professional"},
|
imageSrc:
|
||||||
|
"http://img.b2bpic.net/free-photo/woman-working-office-using-printer_23-2149456964.jpg?_wi=1", imageAlt: "printing invoice bill receipt paper professional"},
|
||||||
]}
|
]}
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
rating={5}
|
rating={5}
|
||||||
@@ -104,7 +174,8 @@ export default function HomePage() {
|
|||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
title: "Dynamic Price Management", description: "Set real-time gold and silver prices per gram and update instantly across all bills", bentoComponent: "icon-info-cards", items: [
|
title: "Dynamic Price Management", description:
|
||||||
|
"Set real-time gold and silver prices per gram and update instantly across all bills", bentoComponent: "icon-info-cards", items: [
|
||||||
{
|
{
|
||||||
icon: DollarSign,
|
icon: DollarSign,
|
||||||
label: "Live Pricing", value: "Real-time Updates"},
|
label: "Live Pricing", value: "Real-time Updates"},
|
||||||
@@ -117,7 +188,8 @@ export default function HomePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Bill Creation Steps", description: "Add items with weight, metal type, description and customer details automatically", bentoComponent: "3d-task-list", items: [
|
title: "Bill Creation Steps", description:
|
||||||
|
"Add items with weight, metal type, description and customer details automatically", bentoComponent: "3d-task-list", items: [
|
||||||
{
|
{
|
||||||
icon: Package,
|
icon: Package,
|
||||||
label: "Select Item Type", time: "30 seconds"},
|
label: "Select Item Type", time: "30 seconds"},
|
||||||
@@ -130,20 +202,21 @@ export default function HomePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "One-Click Printing", description: "Professional bill templates ready to print with all transaction details", bentoComponent: "phone", statusIcon: Printer,
|
title: "One-Click Printing & WhatsApp", description:
|
||||||
|
"Professional bill templates ready to print with one click and automated WhatsApp thank you messages", bentoComponent: "phone", statusIcon: Printer,
|
||||||
alertIcon: CheckCircle,
|
alertIcon: CheckCircle,
|
||||||
alertTitle: "Bill Ready", alertMessage: "Click to print your professional bill", apps: [
|
alertTitle: "Bill Ready", alertMessage: "Click to print and send WhatsApp", apps: [
|
||||||
{
|
{
|
||||||
name: "Print", icon: Printer,
|
name: "Print", icon: PrinterIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "WhatsApp", icon: MessageCircle,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Save", icon: Download,
|
name: "Save", icon: Download,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Share", icon: Send,
|
name: "Share", icon: Share2,
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Email", icon: Mail,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "History", icon: Clock,
|
name: "History", icon: Clock,
|
||||||
@@ -160,7 +233,8 @@ export default function HomePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Complete Bill History", description: "Access all past bills with search, filter and export capabilities", bentoComponent: "timeline", heading: "Bill Timeline", subheading: "Track all transactions", items: [
|
title: "Complete Bill History", description:
|
||||||
|
"Access all past bills with search, filter and export capabilities", bentoComponent: "timeline", heading: "Bill Timeline", subheading: "Track all transactions", items: [
|
||||||
{
|
{
|
||||||
label: "Bill Created", detail: "Initial bill entry recorded"},
|
label: "Bill Created", detail: "Initial bill entry recorded"},
|
||||||
{
|
{
|
||||||
@@ -191,7 +265,8 @@ export default function HomePage() {
|
|||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
title: "Setup Your Prices", description: "Enter current gold and silver rates per gram on your first login", bentoComponent: "orbiting-icons", centerIcon: Settings,
|
title: "Setup Your Prices", description:
|
||||||
|
"Enter current gold and silver rates per gram on your first login", bentoComponent: "orbiting-icons", centerIcon: Settings,
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
icon: DollarSign,
|
icon: DollarSign,
|
||||||
@@ -212,7 +287,8 @@ export default function HomePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Create a New Bill", description: "Select item type, enter weight, add description and customer phone number", bentoComponent: "3d-stack-cards", items: [
|
title: "Create a New Bill", description:
|
||||||
|
"Select item type, enter weight, add description and customer phone number", bentoComponent: "3d-stack-cards", items: [
|
||||||
{
|
{
|
||||||
icon: FileText,
|
icon: FileText,
|
||||||
title: "Select Type", subtitle: "Gold or Silver", detail: "Choose metal type"},
|
title: "Select Type", subtitle: "Gold or Silver", detail: "Choose metal type"},
|
||||||
@@ -225,8 +301,9 @@ export default function HomePage() {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Print & Send", description: "Print bill instantly and automatically send thank you message to customer WhatsApp", bentoComponent: "marquee", centerIcon: Send,
|
title: "Print & Send WhatsApp", description:
|
||||||
variant: "icon", icons: [Printer, Send, MessageSquare, Check, Download],
|
"Print bill instantly and automatically send thank you message to customer WhatsApp", bentoComponent: "marquee", centerIcon: Send,
|
||||||
|
variant: "icon", icons: [Printer, MessageCircle, MessageSquare, Check, Download],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
@@ -287,7 +364,7 @@ export default function HomePage() {
|
|||||||
{/* Contact Section */}
|
{/* Contact Section */}
|
||||||
<div id="contact" data-section="contact" className="w-full py-20">
|
<div id="contact" data-section="contact" className="w-full py-20">
|
||||||
<ContactText
|
<ContactText
|
||||||
text="Ready to transform your gold shop billing? Join hundreds of happy shop owners using GoldBill Pro today."
|
text="Ready to transform your gold shop billing? Join hundreds of happy shop owners using GoldBill Pro today. Print professional bills instantly and keep your customers engaged with automated WhatsApp messages."
|
||||||
animationType="entrance-slide"
|
animationType="entrance-slide"
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
@@ -347,4 +424,4 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user