firmanr/titipin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat: add description field to orders and support marking menu items as sold out

Browse Source
This commit is contained in:
Firman Ramdhani
2026-09-11 10:40:23 +07:00
parent e3c8f980f7
commit f4358eb00b
14 changed files with 435 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(app)/my-purchases/page.tsx
+57 -8
View File
@@ -1,7 +1,7 @@
'use client'
import { useEffect, useState } from 'react'
import { getMyPurchases, submitOrder, getUserSubmission, getSessionUser } from '@/app/actions'
import { getMyPurchases, submitOrder, getUserSubmission, getSessionUser, deleteSubmission } from '@/app/actions'
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
import { Button, buttonVariants } from '@/components/ui/button'
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
@@ -23,7 +23,8 @@ import {
Sparkles,
CheckCircle2,
ChevronLeft,
ChevronRight
ChevronRight,
Trash2
} from 'lucide-react'
import Link from 'next/link'
@@ -33,10 +34,25 @@ export default function MyPurchasesPage() {
const [loading, setLoading] = useState(true)
const [filter, setFilter] = useState<'ALL' | 'BELUM_BAYAR' | 'LUNAS'>('ALL')
const [editingPurchase, setEditingPurchase] = useState<any | null>(null)
const [deletingPurchase, setDeletingPurchase] = useState<any | null>(null)
const [isDeleting, setIsDeleting] = useState(false)
const [currentPage, setCurrentPage] = useState(1)
const [searchQuery, setSearchQuery] = useState('')
const ITEMS_PER_PAGE = 5
const handleDelete = async (submissionId: string) => {
if (!userId) return
setIsDeleting(true)
const res = await deleteSubmission(submissionId, userId)
if (res.success) {
loadPurchases(userId)
setDeletingPurchase(null)
} else {
alert(res.error || 'Gagal membatalkan pesanan')
}
setIsDeleting(false)
}
useEffect(() => {
const init = async () => {
const user = await getSessionUser()
@@ -153,6 +169,30 @@ export default function MyPurchasesPage() {
</Dialog>
)}
{/* Delete Confirmation Modal */}
<Dialog open={!!deletingPurchase} onOpenChange={(open) => !open && setDeletingPurchase(null)}>
<DialogContent className="sm:max-w-md p-6 rounded-3xl border-slate-200/90 dark:border-slate-800">
<div className="flex flex-col items-center justify-center text-center gap-4">
<div className="w-16 h-16 bg-red-100 dark:bg-red-950/50 text-red-600 dark:text-red-400 rounded-full flex items-center justify-center">
<Trash2 className="w-8 h-8" />
</div>
<div>
<DialogTitle className="text-xl font-black text-slate-900 dark:text-white mb-2">Batalkan Titipan?</DialogTitle>
<p className="text-sm text-slate-500">
Apakah Anda yakin ingin membatalkan titipan Anda untuk PO <strong>{deletingPurchase?.order?.title}</strong>? Aksi ini tidak dapat dibatalkan.
</p>
</div>
<div className="flex gap-3 w-full mt-4">
<Button variant="outline" onClick={() => setDeletingPurchase(null)} disabled={isDeleting} className="flex-1 rounded-xl h-11 font-bold border-slate-200 dark:border-slate-700">Tutup</Button>
<Button onClick={() => handleDelete(deletingPurchase?.id)} disabled={isDeleting} className="flex-1 rounded-xl h-11 bg-red-600 hover:bg-red-700 text-white font-bold shadow-md shadow-red-600/20 gap-2">
{isDeleting && <Loader2 className="w-4 h-4 animate-spin" />}
{isDeleting ? 'Membatalkan...' : 'Ya, Batalkan'}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
{filteredPurchases.length === 0 ? (
<div className="flex flex-col items-center justify-center p-16 text-center rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
<div className="w-16 h-16 bg-[#1B2CC1]/10 rounded-2xl flex items-center justify-center mb-4 text-[#1B2CC1]">
@@ -279,12 +319,21 @@ export default function MyPurchasesPage() {
{/* Update Order Action Button */}
<div className="w-full mt-1">
{isOrderOpen ? (
<Button
onClick={() => setEditingPurchase(sub)}
className="w-full h-10 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-xs shadow-sm gap-1.5"
>
<Pencil className="w-3.5 h-3.5" /> Ubah Titipan
</Button>
<div className="flex gap-2">
<Button
onClick={() => setEditingPurchase(sub)}
className="flex-1 h-10 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-xs shadow-sm gap-1.5"
>
<Pencil className="w-3.5 h-3.5" /> Ubah
</Button>
<Button
onClick={() => setDeletingPurchase(sub)}
className="flex-1 h-10 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow-sm gap-1.5"
title="Batalkan Pesanan"
>
<Trash2 className="w-3.5 h-3.5" /> Batalkan
</Button>
</div>
) : (
<div className="flex items-center justify-center gap-1.5 py-2 text-[11px] text-slate-400 font-medium bg-slate-100/70 dark:bg-slate-800/40 rounded-xl">
<Lock className="w-3 h-3" />