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

feat: implement Sonner notifications, add Setting model, and reorganize user management into settings navigation.

Browse Source
This commit is contained in:
Firman Ramdhani
2026-09-11 11:39:43 +07:00
parent f4358eb00b
commit d1ed8f803b
15 changed files with 460 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.tsx
+6 -5
View File
@@ -2,7 +2,7 @@
import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
import { Menu, Calendar, Store, ClipboardList, Package, User, FileText, BarChart2 } from 'lucide-react'
import { Menu, Calendar, Store, ClipboardList, Package, User, FileText, BarChart2, Settings } from 'lucide-react'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Link from 'next/link'
@@ -54,12 +54,13 @@ export function Header({ onMenuClick }: { onMenuClick: () => void }) {
badge: 'Laporan',
Icon: BarChart2
}
case '/users':
case '/settings/users':
case '/settings/integrations':
return {
title: 'Manajemen Pengguna',
subtitle: 'Kelola data pengguna, role, dan status aktif.',
title: 'Pengaturan Aplikasi',
subtitle: 'Konfigurasi integrasi, role, dan sistem.',
badge: 'Superadmin',
Icon: User
Icon: Settings
}
default:
if (pathname.startsWith('/my-orders/')) {
src/components/OrderCard.tsx
+1
View File
@@ -123,6 +123,7 @@ export function OrderCard({ order }: { order: any }) {
<ShareButton
orderId={order.id}
orderTitle={order.title}
className="flex-1 h-9 rounded-xl font-bold text-xs gap-1.5 shadow-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 transition-all text-slate-700 dark:text-slate-300 px-1"
showText={true}
/>
src/components/ShareButton.tsx
+87 -28
View File
@@ -2,52 +2,111 @@
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Share2, Check } from 'lucide-react'
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Share2, Check, Copy, MessageCircle, MessageSquare, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import { broadcastToMattermost, getSettings } from '@/app/actions'
import { toast } from 'sonner'
interface ShareButtonProps {
orderId: string
orderTitle?: string
className?: string
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost"
size?: "default" | "sm" | "lg" | "icon"
showText?: boolean
}
export function ShareButton({ orderId, className, variant = "outline", size = "sm", showText = true }: ShareButtonProps) {
export function ShareButton({ orderId, orderTitle = 'Pesanan', className, variant = "outline", size = "sm", showText = true }: ShareButtonProps) {
const [copied, setCopied] = useState(false)
const [open, setOpen] = useState(false)
const [broadcasting, setBroadcasting] = useState(false)
const handleShare = () => {
const handleCopyLink = () => {
const url = `${window.location.origin}/order/${orderId}`
navigator.clipboard.writeText(url)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
const handleShareWA = async () => {
const settings = await getSettings()
let template = settings.WHATSAPP_TEMPLATE || 'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}'
const url = `${window.location.origin}/order/${orderId}`
const text = template.replace('{title}', orderTitle).replace('{url}', url)
window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`, '_blank')
}
const handleBroadcastMattermost = async () => {
setBroadcasting(true)
const url = `${window.location.origin}/order/${orderId}`
const res = await broadcastToMattermost(orderId, url)
if (res.success) {
toast.success('Broadcast Terkirim!', {
description: 'Berhasil mengirim pesan ke Mattermost.',
duration: 3000
})
setOpen(false)
} else {
toast.error('Gagal Broadcast', {
description: res.error || 'Terjadi kesalahan saat mengirim.',
duration: 3000
})
}
setBroadcasting(false)
}
return (
<Button
variant={variant}
size={size}
onClick={handleShare}
className={cn(
"transition-all",
copied
? "bg-emerald-50 text-emerald-600 border-emerald-200 hover:bg-emerald-100 hover:text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 dark:border-emerald-800"
: "",
className
)}
title="Bagikan PO"
>
{copied ? (
<>
<Check className="w-3.5 h-3.5 shrink-0" />
{showText && <span className="truncate hidden sm:inline">Tersalin</span>}
</>
) : (
<>
<Share2 className="w-3.5 h-3.5 shrink-0" />
{showText && <span className="truncate hidden sm:inline">Bagikan</span>}
</>
)}
</Button>
<>
<Button
variant={variant}
size={size}
className={cn("transition-all", className)}
title="Bagikan PO"
onClick={() => setOpen(true)}
>
<Share2 className="w-3.5 h-3.5 shrink-0" />
{showText && <span className="truncate hidden sm:inline">Bagikan</span>}
</Button>
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="sm:max-w-xs p-6 rounded-3xl border-slate-200/90 dark:border-slate-800">
<DialogTitle className="text-xl font-black text-center text-slate-900 dark:text-white mb-2">Bagikan Pesanan</DialogTitle>
<p className="text-sm text-slate-500 text-center mb-4">
Pilih metode untuk membagikan PO ini ke teman atau tim Anda.
</p>
<div className="space-y-3">
<Button
variant="outline"
onClick={handleCopyLink}
className="w-full h-11 rounded-xl justify-start font-bold gap-3 text-slate-700 dark:text-slate-300"
>
{copied ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4" />}
{copied ? 'Tautan Disalin!' : 'Salin Tautan'}
</Button>
<Button
onClick={handleShareWA}
className="w-full h-11 rounded-xl justify-start font-bold gap-3 bg-[#25D366] hover:bg-[#20bd5a] text-white"
>
<MessageCircle className="w-4 h-4" />
Kirim ke WhatsApp
</Button>
<Button
onClick={handleBroadcastMattermost}
disabled={broadcasting}
className="w-full h-11 rounded-xl justify-start font-bold gap-3 bg-[#0668E1] hover:bg-[#0557bc] text-white"
>
{broadcasting ? <Loader2 className="w-4 h-4 animate-spin" /> : <MessageSquare className="w-4 h-4" />}
{broadcasting ? 'Mengirim...' : 'Broadcast ke Mattermost'}
</Button>
</div>
</DialogContent>
</Dialog>
</>
)
}
src/components/Sidebar.tsx
+3 -2
View File
@@ -20,7 +20,8 @@ import {
ArrowUpRight,
Info,
BarChart2,
Wallet
Wallet,
Settings
} from 'lucide-react'
const menuItems = [
@@ -63,7 +64,7 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
// Dynamic Menu Items based on role
const finalMenuItems = [...menuItems]
if (userRole === 'superadmin') {
finalMenuItems.push({ name: 'User Management', href: '/users', icon: UserCircle, desc: 'Kelola pengguna' })
finalMenuItems.push({ name: 'Pengaturan', href: '/settings/users', icon: Settings, desc: 'Konfigurasi aplikasi' })
}
return (
src/components/ui/sonner.tsx
+53
View File
@@ -0,0 +1,53 @@
"use client"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
icons={{
success: (
<CircleCheckIcon className="size-4" />
),
info: (
<InfoIcon className="size-4" />
),
warning: (
<TriangleAlertIcon className="size-4" />
),
error: (
<OctagonXIcon className="size-4" />
),
loading: (
<Loader2Icon className="size-4 animate-spin" />
),
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
toastOptions={{
classNames: {
toast: "cn-toast group-[.toaster]:bg-white dark:group-[.toaster]:bg-slate-950 group-[.toaster]:text-slate-950 dark:group-[.toaster]:text-slate-50 group-[.toaster]:border-slate-200 dark:group-[.toaster]:border-slate-800",
title: "font-bold",
description: "!text-slate-700 dark:!text-slate-300",
success: "group-[.toaster]:border-emerald-500 group-[.toaster]:bg-emerald-50 dark:group-[.toaster]:bg-emerald-950/50 group-[.toaster]:text-emerald-900 dark:group-[.toaster]:text-emerald-100 [&_svg]:text-emerald-600 dark:[&_svg]:text-emerald-400 [&_[data-description]]:!text-emerald-700 dark:[&_[data-description]]:!text-emerald-300",
error: "group-[.toaster]:border-red-500 group-[.toaster]:bg-red-50 dark:group-[.toaster]:bg-red-950/50 group-[.toaster]:text-red-900 dark:group-[.toaster]:text-red-100 [&_svg]:text-red-600 dark:[&_svg]:text-red-400 [&_[data-description]]:!text-red-700 dark:[&_[data-description]]:!text-red-300",
},
}}
{...props}
/>
)
}
export { Toaster }
src/components/ui/textarea.tsx
+17
View File
@@ -0,0 +1,17 @@
import * as React from "react"
import { cn } from "cn"
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
return (
<textarea
data-slot="textarea"
className={cn(
"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
className
)}
{...props}
/>
)
}
export { Textarea }