Merge version_2 into main #4

Merged
bender merged 3 commits from version_2 into main 2026-03-09 02:43:24 +00:00
3 changed files with 322 additions and 1704 deletions

View File

@@ -1,29 +1,59 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
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 Link from "next/link";
import {
Sparkles,
Zap,
DollarSign,
TrendingUp,
BarChart3,
Lock,
Users,
Shield,
Gauge,
Database,
AlertCircle,
CheckCircle2,
Crown,
} from "lucide-react";
import { FileText, Send, Download, Plus, Trash2 } from "lucide-react";
interface BillEntry {
id: string;
metalType: string;
weight: string;
description: string;
customerPhone: string;
}
export default function AdminBillingPage() {
const [bills, setBills] = useState<BillEntry[]>([]);
const [formData, setFormData] = useState({
metalType: "gold", weight: "", description: "", customerPhone: ""});
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 (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -44,217 +74,162 @@ export default function AdminPage() {
navItems={[
{ name: "Home", id: "/" },
{ name: "Features", id: "#features" },
{ name: "How It Works", id: "#how-it-works" },
{ name: "Pricing", id: "#pricing" },
{ name: "Admin", id: "admin-controls" },
{ name: "Admin", id: "/admin" },
]}
button={{
text: "Dashboard",
href: "/dashboard",
}}
text: "Get Started", href: "/login"}}
animateOnLoad={true}
/>
</div>
{/* Admin Controls Section */}
<div id="admin-controls" data-section="admin-controls" className="w-full py-20">
<FeatureBento
title="Admin Dashboard Controls"
description="Manage your billing system with advanced admin features and real-time controls"
tag="Admin Panel"
tagIcon={Sparkles}
tagAnimation="slide-up"
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>
{/* Main Content */}
<div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-950 py-20 px-4">
<div className="max-w-5xl mx-auto">
{/* Header */}
<div className="mb-12 text-center">
<h1 className="text-4xl font-bold text-white mb-4">Admin Billing Form</h1>
<p className="text-gray-400 text-lg">Create and manage bills with metal type, weight, description, and customer phone number</p>
</div>
{/* Advanced Plans Section */}
<div id="advanced-features" data-section="advanced-features" className="w-full py-20">
<PricingCardTwo
title="Admin Plan Features"
description="Comprehensive admin packages for different shop sizes"
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>
{/* Form Section */}
<div className="bg-gray-800 rounded-xl p-8 mb-12 shadow-lg border border-gray-700">
<h2 className="text-2xl font-semibold text-white mb-6 flex items-center gap-2">
<FileText size={24} /> Create New Bill
</h2>
{/* Support CTA Section */}
<div id="support-cta" data-section="support-cta" className="w-full py-20">
<ContactText
text="Need help setting up your admin dashboard? Our expert team is ready to assist you with configuration and training."
animationType="entrance-slide"
buttons={[
{
text: "Contact Support",
href: "/support",
},
{
text: "View Documentation",
href: "/docs",
},
]}
background={{ variant: "plain" }}
useInvertedBackground={true}
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
{/* Metal Type */}
<div>
<label className="block text-gray-300 font-medium mb-2">Metal Type *</label>
<select
name="metalType"
value={formData.metalType}
onChange={handleInputChange}
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>
<option value="silver">Silver</option>
<option value="platinum">Platinum</option>
<option value="copper">Copper</option>
</select>
</div>
{/* 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>
{/* Footer */}
@@ -264,66 +239,39 @@ export default function AdminPage() {
copyrightText="© 2025 GoldBill Pro | Billing Solutions for Gold & Silver Shops"
columns={[
{
title: "Product",
items: [
title: "Product", items: [
{
label: "Features",
href: "#admin-controls",
},
label: "Features", href: "#features"},
{
label: "Admin Panel",
href: "#advanced-features",
},
label: "Pricing", href: "#pricing"},
{
label: "Dashboard",
href: "/dashboard",
},
label: "How It Works", href: "#how-it-works"},
{
label: "Documentation",
href: "/docs",
},
label: "Security", href: "#"},
],
},
{
title: "Company",
items: [
title: "Company", items: [
{
label: "About Us",
href: "/about",
},
label: "About Us", href: "/about"},
{
label: "Blog",
href: "/blog",
},
label: "Blog", href: "/blog"},
{
label: "Careers",
href: "/careers",
},
label: "Careers", href: "/careers"},
{
label: "Contact",
href: "/support",
},
label: "Contact", href: "#"},
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
{
label: "Cookie Policy",
href: "#",
},
label: "Cookie Policy", href: "#"},
{
label: "Support",
href: "/support",
},
label: "Support", href: "/support"},
],
},
]}
@@ -331,4 +279,4 @@ export default function AdminPage() {
</div>
</ThemeProvider>
);
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -33,9 +33,77 @@ import {
MessageSquare,
Check,
Crown,
PrinterIcon,
Share2,
MessageCircle,
} from "lucide-react";
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 (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -83,9 +151,11 @@ export default function HomePage() {
buttonAnimation="slide-up"
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"
rating={5}
@@ -104,7 +174,8 @@ export default function HomePage() {
tagAnimation="slide-up"
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,
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,
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,
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: "Share", icon: Send,
},
{
name: "Email", icon: Mail,
name: "Share", icon: Share2,
},
{
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"},
{
@@ -191,7 +265,8 @@ export default function HomePage() {
tagAnimation="slide-up"
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: [
{
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,
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,
variant: "icon", icons: [Printer, Send, MessageSquare, Check, Download],
title: "Print & Send WhatsApp", description:
"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"
@@ -287,7 +364,7 @@ export default function HomePage() {
{/* Contact Section */}
<div id="contact" data-section="contact" className="w-full py-20">
<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"
buttons={[
{
@@ -347,4 +424,4 @@ export default function HomePage() {
</div>
</ThemeProvider>
);
}
}