notification + admin panel
This commit is contained in:
root
321
app/admin/buyers/page.tsx
Normal file
321
app/admin/buyers/page.tsx
Normal file
@@ -0,0 +1,321 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
interface Buyer {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
created_at?: string
|
||||
}
|
||||
|
||||
export default function BuyersManagementPage() {
|
||||
const router = useRouter()
|
||||
const [buyers, setBuyers] = useState<Buyer[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [authenticated, setAuthenticated] = useState(false)
|
||||
const [editingBuyer, setEditingBuyer] = useState<Buyer | null>(null)
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// Check authentication
|
||||
fetch('/api/admin/check')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.authenticated) {
|
||||
setAuthenticated(true)
|
||||
fetchBuyers()
|
||||
} else {
|
||||
router.push('/admin/login')
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
router.push('/admin/login')
|
||||
})
|
||||
}, [router])
|
||||
|
||||
const fetchBuyers = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/buyers')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setBuyers(Array.isArray(data) ? data : [])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching buyers:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (buyer: Buyer) => {
|
||||
setEditingBuyer(buyer)
|
||||
setFormData({
|
||||
username: buyer.username,
|
||||
email: buyer.email,
|
||||
password: '',
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editingBuyer) return
|
||||
|
||||
try {
|
||||
const updateData: any = {}
|
||||
if (formData.username !== editingBuyer.username) {
|
||||
updateData.username = formData.username
|
||||
}
|
||||
if (formData.email !== editingBuyer.email) {
|
||||
updateData.email = formData.email
|
||||
}
|
||||
if (formData.password) {
|
||||
updateData.password = formData.password
|
||||
}
|
||||
|
||||
if (Object.keys(updateData).length === 0) {
|
||||
setEditingBuyer(null)
|
||||
return
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/buyers/${editingBuyer.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updateData),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
alert('Buyer updated successfully')
|
||||
setEditingBuyer(null)
|
||||
fetchBuyers()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(`Error: ${error.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating buyer:', error)
|
||||
alert('Failed to update buyer')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm('Are you sure you want to delete this buyer? This will also delete all their sales.')) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/buyers/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
alert('Buyer deleted successfully')
|
||||
fetchBuyers()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(`Error: ${error.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting buyer:', error)
|
||||
alert('Failed to delete buyer')
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'var(--bg)'
|
||||
}}>
|
||||
<p style={{ color: 'var(--muted)' }}>Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!authenticated) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'var(--bg)',
|
||||
padding: '40px 20px'
|
||||
}}>
|
||||
<div className="container" style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '30px'
|
||||
}}>
|
||||
<h1>Buyer Management</h1>
|
||||
<button
|
||||
onClick={() => router.push('/admin')}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
>
|
||||
Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{buyers.length === 0 ? (
|
||||
<p style={{ color: 'var(--muted)' }}>No buyers found</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
{buyers.map((buyer) => (
|
||||
<div
|
||||
key={buyer.id}
|
||||
className="drop-card"
|
||||
style={{
|
||||
background: editingBuyer?.id === buyer.id ? 'var(--bg-soft)' : 'var(--card)',
|
||||
padding: '20px'
|
||||
}}
|
||||
>
|
||||
{editingBuyer?.id === buyer.id ? (
|
||||
<div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>New Password (leave empty to keep current)</label>
|
||||
<input
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="cta"
|
||||
style={{ padding: '8px 16px', fontSize: '14px' }}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingBuyer(null)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
fontSize: '14px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<h3 style={{ marginBottom: '8px' }}>{buyer.username}</h3>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
|
||||
Email: {buyer.email}
|
||||
</p>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
|
||||
ID: {buyer.id}
|
||||
</p>
|
||||
{buyer.created_at && (
|
||||
<p style={{ color: 'var(--muted)', fontSize: '12px' }}>
|
||||
Created: {new Date(buyer.created_at).toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
onClick={() => handleEdit(buyer)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: '12px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '6px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(buyer.id)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: '12px',
|
||||
background: '#dc2626',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
846
app/admin/drops/page.tsx
Normal file
846
app/admin/drops/page.tsx
Normal file
@@ -0,0 +1,846 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
interface Drop {
|
||||
id: number
|
||||
item: string
|
||||
size: number
|
||||
fill: number
|
||||
unit: string
|
||||
ppu: number
|
||||
image_url: string | null
|
||||
created_at: string
|
||||
start_time: string | null
|
||||
}
|
||||
|
||||
interface Sale {
|
||||
id: number
|
||||
drop_id: number
|
||||
buyer_id: number
|
||||
size: number
|
||||
payment_id: string | null
|
||||
created_at: string
|
||||
buyer_username?: string
|
||||
buyer_email?: string
|
||||
buyer_fullname?: string
|
||||
buyer_address?: string
|
||||
buyer_phone?: string
|
||||
}
|
||||
|
||||
export default function DropsManagementPage() {
|
||||
const router = useRouter()
|
||||
const [drops, setDrops] = useState<Drop[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [authenticated, setAuthenticated] = useState(false)
|
||||
const [editingDrop, setEditingDrop] = useState<Drop | null>(null)
|
||||
const [creatingDrop, setCreatingDrop] = useState(false)
|
||||
const [showSalesPopup, setShowSalesPopup] = useState(false)
|
||||
const [salesForDrop, setSalesForDrop] = useState<Sale[]>([])
|
||||
const [selectedDropId, setSelectedDropId] = useState<number | null>(null)
|
||||
const [formData, setFormData] = useState({
|
||||
item: '',
|
||||
size: '',
|
||||
unit: 'g',
|
||||
ppu: '',
|
||||
imageUrl: '',
|
||||
startTime: '',
|
||||
})
|
||||
const [imageFile, setImageFile] = useState<File | null>(null)
|
||||
const [imagePreview, setImagePreview] = useState<string>('')
|
||||
const [uploadingImage, setUploadingImage] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// Check authentication
|
||||
fetch('/api/admin/check')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.authenticated) {
|
||||
setAuthenticated(true)
|
||||
fetchDrops()
|
||||
} else {
|
||||
router.push('/admin/login')
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
router.push('/admin/login')
|
||||
})
|
||||
}, [router])
|
||||
|
||||
const fetchDrops = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/drops')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setDrops(Array.isArray(data) ? data : [])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching drops:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (drop: Drop) => {
|
||||
setEditingDrop(drop)
|
||||
setFormData({
|
||||
item: drop.item,
|
||||
size: drop.size.toString(),
|
||||
unit: drop.unit,
|
||||
ppu: drop.ppu.toString(),
|
||||
imageUrl: drop.image_url || '',
|
||||
startTime: drop.start_time ? new Date(drop.start_time).toISOString().slice(0, 16) : '',
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editingDrop) return
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/drops/${editingDrop.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
item: formData.item,
|
||||
size: parseInt(formData.size),
|
||||
unit: formData.unit,
|
||||
ppu: parseInt(formData.ppu),
|
||||
imageUrl: formData.imageUrl || null,
|
||||
startTime: formData.startTime || null,
|
||||
}),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
alert('Drop updated successfully')
|
||||
setEditingDrop(null)
|
||||
fetchDrops()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(`Error: ${error.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating drop:', error)
|
||||
alert('Failed to update drop')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm('Are you sure you want to delete this drop? This will also delete all related sales.')) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/drops/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
alert('Drop deleted successfully')
|
||||
fetchDrops()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(`Error: ${error.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting drop:', error)
|
||||
alert('Failed to delete drop')
|
||||
}
|
||||
}
|
||||
|
||||
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) {
|
||||
setImageFile(file)
|
||||
setImagePreview(URL.createObjectURL(file))
|
||||
// Clear the imageUrl field when a file is selected
|
||||
setFormData({ ...formData, imageUrl: '' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
try {
|
||||
let imageUrl = formData.imageUrl || null
|
||||
|
||||
// Upload image file if provided
|
||||
if (imageFile) {
|
||||
setUploadingImage(true)
|
||||
const uploadFormData = new FormData()
|
||||
uploadFormData.append('file', imageFile)
|
||||
|
||||
const uploadResponse = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
body: uploadFormData,
|
||||
})
|
||||
|
||||
if (!uploadResponse.ok) {
|
||||
const error = await uploadResponse.json()
|
||||
alert(`Image upload failed: ${error.error}`)
|
||||
setUploadingImage(false)
|
||||
return
|
||||
}
|
||||
|
||||
const uploadData = await uploadResponse.json()
|
||||
imageUrl = uploadData.url
|
||||
setUploadingImage(false)
|
||||
}
|
||||
|
||||
const response = await fetch('/api/drops', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
item: formData.item,
|
||||
size: parseInt(formData.size),
|
||||
unit: formData.unit,
|
||||
ppu: parseInt(formData.ppu),
|
||||
imageUrl: imageUrl,
|
||||
startTime: formData.startTime || null,
|
||||
}),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
alert('Drop created successfully')
|
||||
setFormData({
|
||||
item: '',
|
||||
size: '',
|
||||
unit: 'g',
|
||||
ppu: '',
|
||||
imageUrl: '',
|
||||
startTime: '',
|
||||
})
|
||||
setImageFile(null)
|
||||
setImagePreview('')
|
||||
// Clear file input
|
||||
const fileInput = document.getElementById('imageFile') as HTMLInputElement
|
||||
if (fileInput) fileInput.value = ''
|
||||
setCreatingDrop(false)
|
||||
fetchDrops()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(`Error: ${error.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating drop:', error)
|
||||
alert('Failed to create drop')
|
||||
} finally {
|
||||
setUploadingImage(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleViewSales = async (dropId: number) => {
|
||||
try {
|
||||
const response = await fetch(`/api/sales/drop/${dropId}`)
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setSalesForDrop(Array.isArray(data) ? data : [])
|
||||
setSelectedDropId(dropId)
|
||||
setShowSalesPopup(true)
|
||||
} else {
|
||||
alert('Failed to fetch sales')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching sales:', error)
|
||||
alert('Failed to fetch sales')
|
||||
}
|
||||
}
|
||||
|
||||
const getProgressPercentage = (fill: number, size: number) => {
|
||||
return Math.min((fill / size) * 100, 100)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'var(--bg)'
|
||||
}}>
|
||||
<p style={{ color: 'var(--muted)' }}>Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!authenticated) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'var(--bg)',
|
||||
padding: '40px 20px'
|
||||
}}>
|
||||
<div className="container" style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '30px'
|
||||
}}>
|
||||
<h1>Drops Management</h1>
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setCreatingDrop(!creatingDrop)
|
||||
if (creatingDrop) {
|
||||
// Reset form when canceling
|
||||
setFormData({
|
||||
item: '',
|
||||
size: '',
|
||||
unit: 'g',
|
||||
ppu: '',
|
||||
imageUrl: '',
|
||||
startTime: '',
|
||||
})
|
||||
setImageFile(null)
|
||||
setImagePreview('')
|
||||
const fileInput = document.getElementById('imageFile') as HTMLInputElement
|
||||
if (fileInput) fileInput.value = ''
|
||||
}
|
||||
}}
|
||||
className="cta"
|
||||
style={{ padding: '10px 20px', fontSize: '14px' }}
|
||||
>
|
||||
{creatingDrop ? 'Cancel' : 'Create New Drop'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/admin')}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
>
|
||||
Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{creatingDrop && (
|
||||
<div className="drop-card" style={{ marginBottom: '30px', padding: '20px' }}>
|
||||
<h2 style={{ marginTop: 0, marginBottom: '20px' }}>Create New Drop</h2>
|
||||
<form onSubmit={handleCreate}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Item Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.item}
|
||||
onChange={(e) => setFormData({ ...formData, item: e.target.value })}
|
||||
required
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Size *</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.size}
|
||||
onChange={(e) => setFormData({ ...formData, size: e.target.value })}
|
||||
required
|
||||
min="1"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Unit *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.unit}
|
||||
onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
|
||||
required
|
||||
maxLength={12}
|
||||
placeholder="g, kg, ml, etc."
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Price Per Unit (cents) *</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.ppu}
|
||||
onChange={(e) => setFormData({ ...formData, ppu: e.target.value })}
|
||||
required
|
||||
min="1"
|
||||
placeholder="2500 = 2.50 CHF"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Product Image</label>
|
||||
<input
|
||||
type="file"
|
||||
id="imageFile"
|
||||
accept="image/jpeg,image/jpg,image/png,image/webp"
|
||||
onChange={handleImageChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
/>
|
||||
{imagePreview && (
|
||||
<div style={{ marginTop: '12px' }}>
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Preview"
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
maxHeight: '200px',
|
||||
borderRadius: '8px',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<p style={{ marginTop: '8px', fontSize: '12px', color: 'var(--muted)' }}>
|
||||
Max file size: 5MB. Allowed formats: JPEG, PNG, WebP
|
||||
</p>
|
||||
<p style={{ marginTop: '4px', fontSize: '12px', color: 'var(--muted)' }}>
|
||||
Or enter an image URL:
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.imageUrl}
|
||||
onChange={(e) => {
|
||||
setFormData({ ...formData, imageUrl: e.target.value })
|
||||
// Clear file selection when URL is entered
|
||||
if (e.target.value) {
|
||||
setImageFile(null)
|
||||
setImagePreview('')
|
||||
const fileInput = document.getElementById('imageFile') as HTMLInputElement
|
||||
if (fileInput) fileInput.value = ''
|
||||
}
|
||||
}}
|
||||
placeholder="https://example.com/image.jpg"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)',
|
||||
marginTop: '8px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Start Time</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="cta"
|
||||
disabled={uploadingImage}
|
||||
style={{ padding: '10px 20px', fontSize: '14px' }}
|
||||
>
|
||||
{uploadingImage ? 'Uploading image...' : 'Create Drop'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{drops.length === 0 ? (
|
||||
<p style={{ color: 'var(--muted)' }}>No drops found</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
{drops.map((drop) => (
|
||||
<div
|
||||
key={drop.id}
|
||||
className="drop-card"
|
||||
style={{
|
||||
background: editingDrop?.id === drop.id ? 'var(--bg-soft)' : 'var(--card)',
|
||||
padding: '20px'
|
||||
}}
|
||||
>
|
||||
{editingDrop?.id === drop.id ? (
|
||||
<div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Item Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.item}
|
||||
onChange={(e) => setFormData({ ...formData, item: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Size</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.size}
|
||||
onChange={(e) => setFormData({ ...formData, size: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Unit</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.unit}
|
||||
onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
|
||||
maxLength={12}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Price Per Unit (cents)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.ppu}
|
||||
onChange={(e) => setFormData({ ...formData, ppu: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Image URL</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.imageUrl}
|
||||
onChange={(e) => setFormData({ ...formData, imageUrl: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Start Time</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="cta"
|
||||
style={{ padding: '8px 16px', fontSize: '14px' }}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingDrop(null)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
fontSize: '14px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<h3 style={{ marginBottom: '8px' }}>{drop.item}</h3>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
|
||||
ID: {drop.id} · Size: {drop.size}{drop.unit} · Price: {(drop.ppu / 1000).toFixed(2)} CHF / {drop.unit}
|
||||
</p>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '12px', marginBottom: '12px' }}>
|
||||
Created: {new Date(drop.created_at).toLocaleString()}
|
||||
{drop.start_time && ` · Start: ${new Date(drop.start_time).toLocaleString()}`}
|
||||
</p>
|
||||
|
||||
{/* Fill Bar */}
|
||||
<div className="progress" style={{ marginBottom: '8px' }}>
|
||||
<span style={{ width: `${getProgressPercentage(drop.fill, drop.size)}%` }}></span>
|
||||
</div>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '12px' }}>
|
||||
{drop.unit === 'kg' ? drop.fill.toFixed(2) : Math.round(drop.fill)}{drop.unit} of {drop.size}{drop.unit} reserved
|
||||
</p>
|
||||
|
||||
{drop.image_url && (
|
||||
<img
|
||||
src={drop.image_url}
|
||||
alt={drop.item}
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
maxHeight: '200px',
|
||||
marginTop: '12px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||
<button
|
||||
onClick={() => handleViewSales(drop.id)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: '12px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '6px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
View Sales
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEdit(drop)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: '12px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '6px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(drop.id)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: '12px',
|
||||
background: '#dc2626',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sales Popup */}
|
||||
{showSalesPopup && (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1000,
|
||||
padding: '20px',
|
||||
}}
|
||||
onClick={() => setShowSalesPopup(false)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--card)',
|
||||
borderRadius: '16px',
|
||||
padding: '32px',
|
||||
maxWidth: '800px',
|
||||
width: '100%',
|
||||
maxHeight: '80vh',
|
||||
overflow: 'auto',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
|
||||
<h2 style={{ margin: 0 }}>Sales for Drop #{selectedDropId}</h2>
|
||||
<button
|
||||
onClick={() => setShowSalesPopup(false)}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: 'var(--text)',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
padding: '0',
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{salesForDrop.length === 0 ? (
|
||||
<p style={{ color: 'var(--muted)', textAlign: 'center', padding: '40px' }}>
|
||||
No sales found for this drop
|
||||
</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{salesForDrop.map((sale) => (
|
||||
<div
|
||||
key={sale.id}
|
||||
style={{
|
||||
background: 'var(--bg-soft)',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)'
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p style={{ margin: 0, marginBottom: '4px', fontWeight: '600' }}>
|
||||
Sale #{sale.id}
|
||||
</p>
|
||||
<p style={{ margin: 0, color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
|
||||
Buyer: {sale.buyer_username || `#${sale.buyer_id}`} ({sale.buyer_email || 'N/A'})
|
||||
</p>
|
||||
<p style={{ margin: 0, color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
|
||||
Size: {sale.size}g
|
||||
</p>
|
||||
{(sale.buyer_fullname || sale.buyer_address || sale.buyer_phone) && (
|
||||
<div style={{
|
||||
background: 'var(--card)',
|
||||
padding: '10px',
|
||||
borderRadius: '6px',
|
||||
marginTop: '8px',
|
||||
marginBottom: '8px'
|
||||
}}>
|
||||
<p style={{ margin: 0, color: 'var(--text)', fontSize: '12px', fontWeight: '600', marginBottom: '4px' }}>
|
||||
Delivery Information:
|
||||
</p>
|
||||
{sale.buyer_fullname && (
|
||||
<p style={{ margin: 0, color: 'var(--muted)', fontSize: '12px', marginBottom: '2px' }}>
|
||||
Name: {sale.buyer_fullname}
|
||||
</p>
|
||||
)}
|
||||
{sale.buyer_address && (
|
||||
<p style={{ margin: 0, color: 'var(--muted)', fontSize: '12px', marginBottom: '2px' }}>
|
||||
Address: {sale.buyer_address}
|
||||
</p>
|
||||
)}
|
||||
{sale.buyer_phone && (
|
||||
<p style={{ margin: 0, color: 'var(--muted)', fontSize: '12px', marginBottom: '2px' }}>
|
||||
Phone: {sale.buyer_phone}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<p style={{ margin: 0, color: 'var(--muted)', fontSize: '12px' }}>
|
||||
{new Date(sale.created_at).toLocaleString()}
|
||||
{sale.payment_id && ` · Payment ID: ${sale.payment_id}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
116
app/admin/login/page.tsx
Normal file
116
app/admin/login/page.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function AdminLoginPage() {
|
||||
const router = useRouter()
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// Check if already authenticated
|
||||
fetch('/api/admin/check')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.authenticated) {
|
||||
router.push('/admin')
|
||||
}
|
||||
})
|
||||
}, [router])
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ password }),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (response.ok) {
|
||||
router.push('/admin')
|
||||
} else {
|
||||
setError(data.error || 'Invalid password')
|
||||
}
|
||||
} catch (error) {
|
||||
setError('Failed to login. Please try again.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'var(--bg)',
|
||||
padding: '20px'
|
||||
}}>
|
||||
<div style={{
|
||||
background: 'var(--card)',
|
||||
padding: '40px',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
|
||||
maxWidth: '400px',
|
||||
width: '100%'
|
||||
}}>
|
||||
<h1 style={{ marginBottom: '24px', textAlign: 'center' }}>Admin Login</h1>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label htmlFor="password" style={{ display: 'block', marginBottom: '8px' }}>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<div style={{
|
||||
padding: '12px',
|
||||
background: '#fee2e2',
|
||||
color: '#dc2626',
|
||||
borderRadius: '8px',
|
||||
marginBottom: '20px',
|
||||
fontSize: '14px'
|
||||
}}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="cta"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{loading ? 'Logging in...' : 'Login'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
384
app/admin/sales/page.tsx
Normal file
384
app/admin/sales/page.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
interface Sale {
|
||||
id: number
|
||||
drop_id: number
|
||||
buyer_id: number
|
||||
size: number
|
||||
payment_id: string | null
|
||||
created_at: string
|
||||
drop_item?: string
|
||||
drop_unit?: string
|
||||
drop_ppu?: number
|
||||
buyer_username?: string
|
||||
buyer_email?: string
|
||||
buyer_fullname?: string
|
||||
buyer_address?: string
|
||||
buyer_phone?: string
|
||||
}
|
||||
|
||||
export default function SalesManagementPage() {
|
||||
const router = useRouter()
|
||||
const [sales, setSales] = useState<Sale[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [authenticated, setAuthenticated] = useState(false)
|
||||
const [editingSale, setEditingSale] = useState<Sale | null>(null)
|
||||
const [formData, setFormData] = useState({
|
||||
drop_id: '',
|
||||
buyer_id: '',
|
||||
size: '',
|
||||
payment_id: '',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// Check authentication
|
||||
fetch('/api/admin/check')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.authenticated) {
|
||||
setAuthenticated(true)
|
||||
fetchSales()
|
||||
} else {
|
||||
router.push('/admin/login')
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
router.push('/admin/login')
|
||||
})
|
||||
}, [router])
|
||||
|
||||
const fetchSales = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/sales/list')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setSales(Array.isArray(data) ? data : [])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching sales:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (sale: Sale) => {
|
||||
setEditingSale(sale)
|
||||
setFormData({
|
||||
drop_id: sale.drop_id.toString(),
|
||||
buyer_id: sale.buyer_id.toString(),
|
||||
size: sale.size.toString(),
|
||||
payment_id: sale.payment_id || '',
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editingSale) return
|
||||
|
||||
try {
|
||||
const updateData: any = {}
|
||||
if (parseInt(formData.drop_id) !== editingSale.drop_id) {
|
||||
updateData.drop_id = parseInt(formData.drop_id)
|
||||
}
|
||||
if (parseInt(formData.buyer_id) !== editingSale.buyer_id) {
|
||||
updateData.buyer_id = parseInt(formData.buyer_id)
|
||||
}
|
||||
if (parseInt(formData.size) !== editingSale.size) {
|
||||
updateData.size = parseInt(formData.size)
|
||||
}
|
||||
if (formData.payment_id !== (editingSale.payment_id || '')) {
|
||||
updateData.payment_id = formData.payment_id || null
|
||||
}
|
||||
|
||||
if (Object.keys(updateData).length === 0) {
|
||||
setEditingSale(null)
|
||||
return
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/sales/${editingSale.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updateData),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
alert('Sale updated successfully')
|
||||
setEditingSale(null)
|
||||
fetchSales()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(`Error: ${error.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating sale:', error)
|
||||
alert('Failed to update sale')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm('Are you sure you want to delete this sale?')) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/sales/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
alert('Sale deleted successfully')
|
||||
fetchSales()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
alert(`Error: ${error.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting sale:', error)
|
||||
alert('Failed to delete sale')
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'var(--bg)'
|
||||
}}>
|
||||
<p style={{ color: 'var(--muted)' }}>Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!authenticated) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'var(--bg)',
|
||||
padding: '40px 20px'
|
||||
}}>
|
||||
<div className="container" style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '30px'
|
||||
}}>
|
||||
<h1>Sales Management</h1>
|
||||
<button
|
||||
onClick={() => router.push('/admin')}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
>
|
||||
Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{sales.length === 0 ? (
|
||||
<p style={{ color: 'var(--muted)' }}>No sales found</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
{sales.map((sale) => (
|
||||
<div
|
||||
key={sale.id}
|
||||
className="drop-card"
|
||||
style={{
|
||||
background: editingSale?.id === sale.id ? 'var(--bg-soft)' : 'var(--card)',
|
||||
padding: '20px'
|
||||
}}
|
||||
>
|
||||
{editingSale?.id === sale.id ? (
|
||||
<div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Drop ID</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.drop_id}
|
||||
onChange={(e) => setFormData({ ...formData, drop_id: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Buyer ID</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.buyer_id}
|
||||
onChange={(e) => setFormData({ ...formData, buyer_id: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Size (grams)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.size}
|
||||
onChange={(e) => setFormData({ ...formData, size: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>Payment ID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.payment_id}
|
||||
onChange={(e) => setFormData({ ...formData, payment_id: e.target.value })}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-soft)',
|
||||
color: 'var(--text)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="cta"
|
||||
style={{ padding: '8px 16px', fontSize: '14px' }}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingSale(null)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
fontSize: '14px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<h3 style={{ marginBottom: '8px' }}>Sale #{sale.id}</h3>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
|
||||
Drop: {sale.drop_item || `#${sale.drop_id}`} · Size: {sale.size}g
|
||||
</p>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
|
||||
Buyer: {sale.buyer_username || `#${sale.buyer_id}`} ({sale.buyer_email || 'N/A'})
|
||||
</p>
|
||||
{(sale.buyer_fullname || sale.buyer_address || sale.buyer_phone) && (
|
||||
<div style={{
|
||||
background: 'var(--bg-soft)',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
marginTop: '8px',
|
||||
marginBottom: '8px'
|
||||
}}>
|
||||
<p style={{ color: 'var(--text)', fontSize: '13px', fontWeight: '600', marginBottom: '6px' }}>
|
||||
Delivery Information:
|
||||
</p>
|
||||
{sale.buyer_fullname && (
|
||||
<p style={{ color: 'var(--muted)', fontSize: '13px', marginBottom: '4px' }}>
|
||||
Name: {sale.buyer_fullname}
|
||||
</p>
|
||||
)}
|
||||
{sale.buyer_address && (
|
||||
<p style={{ color: 'var(--muted)', fontSize: '13px', marginBottom: '4px' }}>
|
||||
Address: {sale.buyer_address}
|
||||
</p>
|
||||
)}
|
||||
{sale.buyer_phone && (
|
||||
<p style={{ color: 'var(--muted)', fontSize: '13px', marginBottom: '4px' }}>
|
||||
Phone: {sale.buyer_phone}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{sale.drop_ppu && (
|
||||
<p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
|
||||
Price: {((sale.drop_ppu / 1000) * sale.size).toFixed(2)} CHF
|
||||
</p>
|
||||
)}
|
||||
<p style={{ color: 'var(--muted)', fontSize: '12px' }}>
|
||||
Created: {new Date(sale.created_at).toLocaleString()}
|
||||
{sale.payment_id && ` · Payment: ${sale.payment_id}`}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
onClick={() => handleEdit(sale)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: '12px',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '6px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(sale.id)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: '12px',
|
||||
background: '#dc2626',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user