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

feat: add PiutangManager component for handling receivables and bulk payments

Browse Source
This commit is contained in:
Firman Ramdhani
2026-09-16 14:11:33 +07:00
parent 51d05653c6
commit e57adc1646
4 changed files with 503 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(app)/my-orders/page.tsx
+36 -2
View File
@@ -53,6 +53,7 @@ import {
ChevronLeft,
ChevronRight,
} from 'lucide-react'
import PiutangManager from '@/components/PiutangManager'
export default function MyOrdersPage() {
const [userId, setUserId] = useState<string | null>(null)
@@ -63,6 +64,7 @@ export default function MyOrdersPage() {
const [orderToDelete, setOrderToDelete] = useState<any | null>(null)
const [orderToDuplicate, setOrderToDuplicate] = useState<any | null>(null)
const [deleting, setDeleting] = useState(false)
const [mainTab, setMainTab] = useState<'PO' | 'PIUTANG'>('PO')
const [activeTab, setActiveTab] = useState<'ALL' | 'OPEN' | 'DRAFT' | 'CLOSE'>('ALL')
const [currentPage, setCurrentPage] = useState(1)
const [searchQuery, setSearchQuery] = useState('')
@@ -154,8 +156,36 @@ export default function MyOrdersPage() {
return (
<div className="animate-in fade-in space-y-6 pb-12 duration-500">
{/* Top Controls & Segmented Control */}
<div className="flex flex-col items-start justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm md:flex-row md:items-center dark:border-slate-800 dark:bg-slate-900">
{/* Main Tab Switcher */}
<div className="flex w-full max-w-sm rounded-xl border border-slate-200 bg-slate-100 p-1 dark:border-slate-800 dark:bg-slate-900">
<button
onClick={() => setMainTab('PO')}
className={cn(
'flex-1 rounded-lg py-2 text-xs font-bold transition-all',
mainTab === 'PO'
? 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-white'
: 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
)}
>
Daftar PO
</button>
<button
onClick={() => setMainTab('PIUTANG')}
className={cn(
'flex-1 rounded-lg py-2 text-xs font-bold transition-all',
mainTab === 'PIUTANG'
? 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-white'
: 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
)}
>
Kelola Piutang
</button>
</div>
{mainTab === 'PO' ? (
<>
{/* Top Controls & Segmented Control */}
<div className="flex flex-col items-start justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm md:flex-row md:items-center dark:border-slate-800 dark:bg-slate-900">
<div className="flex w-full flex-col items-start gap-4 md:w-auto md:flex-row md:items-center">
{/* Segmented Control / Tabs */}
<div className="flex w-full items-center overflow-x-auto rounded-xl bg-slate-100 p-1 text-xs font-bold md:w-auto dark:bg-slate-800/80">
@@ -618,6 +648,10 @@ export default function MyOrdersPage() {
)}
</div>
)}
</>
) : (
<PiutangManager creatorId={userId!} />
)}
</div>
)
}