[V0_FILE]typescriptreact:file="package.json" isEdit="true" isMerged="true" { "dependencies": { "@mui/icons-material": "^5.15.0", "@mui/material": "^5.15.0" } } [V0_FILE]typescriptreact:file="app/api/approvals/[stepId]/approve/route.ts" isMerged="true" import { NextResponse } from "next/server" // Onaylama API endpoint'i export async function POST(request: Request, { params }: { params: { stepId: string } }) { try { // Adım ID'sini al const stepId = params.stepId // İstek gövdesini al (boş payload olsa bile) const body = await request.json() // Burada gerçek API çağrısı yapılabilir // Örnek: Veritabanına onay kaydı eklemek, harici bir servise istek göndermek, vb. // Simüle edilmiş bir gecikme (gerçek API çağrısını taklit etmek için) await new Promise((resolve) => setTimeout(resolve, 1000)) // Başarılı yanıt return NextResponse.json({ success: true, message: `Adım ${stepId} başarıyla onaylandı.`, stepId, timestamp: new Date().toISOString(), }) } catch (error) { // Hata durumunda console.error("Onaylama API hatası:", error) return NextResponse.json( { success: false, message: error instanceof Error ? error.message : "Bir hata oluştu", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/approvals/[stepId]/reject/route.ts" isMerged="true" import { NextResponse } from "next/server" // Reddetme API endpoint'i export async function POST(request: Request, { params }: { params: { stepId: string } }) { try { // Adım ID'sini al const stepId = params.stepId // İstek gövdesini al (boş payload olsa bile) const body = await request.json() // Burada gerçek API çağrısı yapılabilir // Örnek: Veritabanına red kaydı eklemek, harici bir servise istek göndermek, vb. // Simüle edilmiş bir gecikme (gerçek API çağrısını taklit etmek için) await new Promise((resolve) => setTimeout(resolve, 1000)) // Başarılı yanıt return NextResponse.json({ success: true, message: `Adım ${stepId} başarıyla reddedildi.`, stepId, timestamp: new Date().toISOString(), }) } catch (error) { // Hata durumunda console.error("Reddetme API hatası:", error) return NextResponse.json( { success: false, message: error instanceof Error ? error.message : "Bir hata oluştu", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Select } from "@/components/ui/select" import { toast } from "@/components/ui/use-toast" // Material UI ikonlarını içe aktarma import CheckIcon from "@mui/icons-material/Check" import ExpandMoreIcon from "@mui/icons-material/ExpandMore" import ExpandLessIcon from "@mui/icons-material/ExpandLess" // Onay adımı için tip tanımı interface ApprovalStep { id: number isActive: boolean createdDate: string createdBy: number updatedDate: string updatedBy: number isReversed: boolean assigner: string // Onaylayıcı kişi approvedBy: string // Onaylayan kişi approveStatus: number // 0: başlanmadı, 1: devam ediyor, 2: tamamlandı approveDate: string // Onay tarihi demandId: number approvalStepId: number // Adım numarası } // API isteği için payload tipi interface ApprovalPayload { id: number // ApprovalStep.id demandId: number // Talep ID'si approveStatus: number // 1: onayla, 2: reddet } export default function ApprovalTimeline() { // Mevcut kullanıcı (simüle edilmiş) const currentUser = "Jane Smith" // Örnek veri (sağlanan array'e göre) const [approvalSteps, setApprovalSteps] = useState([ { id: 1, isActive: true, createdDate: "2025-05-08T09:19:41.527Z", createdBy: 0, updatedDate: "2025-05-08T09:19:41.527Z", updatedBy: 0, isReversed: true, assigner: "John Doe", approvedBy: "John Doe", approveStatus: 2, // tamamlandı approveDate: "2025-05-08T09:19:41.527Z", demandId: 100, // Örnek talep ID'si approvalStepId: 1, }, { id: 2, isActive: true, createdDate: "2025-05-08T09:19:41.527Z", createdBy: 0, updatedDate: "2025-05-08T09:19:41.527Z", updatedBy: 0, isReversed: true, assigner: "Jane Smith", // Mevcut kullanıcı bu adımın onaylayıcısı approvedBy: "", approveStatus: 1, // devam ediyor approveDate: "", demandId: 100, // Örnek talep ID'si approvalStepId: 2, }, { id: 3, isActive: true, createdDate: "2025-05-08T09:19:41.527Z", createdBy: 0, updatedDate: "2025-05-08T09:19:41.527Z", updatedBy: 0, isReversed: true, assigner: "Alex Johnson", approvedBy: "", approveStatus: 0, // başlanmadı approveDate: "", demandId: 100, // Örnek talep ID'si approvalStepId: 3, }, { id: 4, isActive: true, createdDate: "2025-05-08T09:19:41.527Z", createdBy: 0, updatedDate: "2025-05-08T09:19:41.527Z", updatedBy: 0, isReversed: true, assigner: "Sarah Williams", approvedBy: "", approveStatus: 0, // başlanmadı approveDate: "", demandId: 100, // Örnek talep ID'si approvalStepId: 4, }, { id: 5, isActive: true, createdDate: "2025-05-08T09:19:41.527Z", createdBy: 0, updatedDate: "2025-05-08T09:19:41.527Z", updatedBy: 0, isReversed: true, assigner: "Sarah Williams", approvedBy: "", approveStatus: 0, // başlanmadı approveDate: "", demandId: 100, // Örnek talep ID'si approvalStepId: 5, }, ]) // Yükleniyor durumları için state'ler const [loadingStepId, setLoadingStepId] = useState(null) const [isApproving, setIsApproving] = useState(false) const [isRejecting, setIsRejecting] = useState(false) // Varsayılan olarak genişletilecek adımın ID'si const [expandedStepId, setExpandedStepId] = useState(null) // Kullanıcı ve adım durumuna göre başlangıçta genişletilecek adımı belirleme useEffect(() => { // İlk "Devam Ediyor" durumundaki adımı bulma const inProgressStep = approvalSteps.find((step) => step.approveStatus === 1) if (inProgressStep) { // Eğer mevcut kullanıcı, devam eden adımın onaylayıcısı ise, o adımı göster if (inProgressStep.assigner === currentUser) { setExpandedStepId(inProgressStep.id) } else { // Değilse, önceki adımı bul (tamamlanmış olmalı) const inProgressIndex = approvalSteps.findIndex((step) => step.id === inProgressStep.id) if (inProgressIndex > 0) { const previousStep = approvalSteps[inProgressIndex - 1] setExpandedStepId(previousStep.id) } else { // Önceki adım yoksa, hiçbir şey genişletme setExpandedStepId(null) } } } else { // Devam eden adım yoksa, son tamamlanan adımı bul const lastCompletedStep = [...approvalSteps].reverse().find((step) => step.approveStatus === 2) if (lastCompletedStep) { setExpandedStepId(lastCompletedStep.id) } } }, [approvalSteps, currentUser]) // Adım detaylarını açma/kapama fonksiyonu const toggleStepDetails = (stepId: number) => { // ID'ye göre adımı bul const step = approvalSteps.find((s) => s.id === stepId) // "Başlanmadı" durumundaki adımların genişletilmesine izin verme if (step && step.approveStatus === 0) { return } // "Devam Ediyor" durumundaki adımlar için, sadece mevcut kullanıcı onaylayıcı ise izin ver if (step && step.approveStatus === 1 && step.assigner !== currentUser) { return } // Adım zaten genişletilmişse kapat, değilse aç if (expandedStepId === stepId) { setExpandedStepId(null) } else { setExpandedStepId(stepId) } } // API'ye onay/ret isteği gönderme const handleApprovalAction = async (stepId: number, isApprove: boolean) => { // İlgili adımı bulma const step = approvalSteps.find((s) => s.id === stepId) if (!step) return // Yükleniyor durumunu ayarlama setLoadingStepId(stepId) if (isApprove) { setIsApproving(true) setIsRejecting(false) } else { setIsApproving(false) setIsRejecting(true) } try { // API isteği için payload hazırlama const payload: ApprovalPayload = { id: step.id, // ApprovalStep.id demandId: step.demandId, // Talep ID'si approveStatus: isApprove ? 1 : 2, // 1: onayla, 2: reddet } // API isteği gönderme const response = await fetch("/v1/ApprovalFLow/approvedemand", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(payload), }) if (!response.ok) { throw new Error(`API hatası: ${response.status}`) } // Başarılı yanıt const data = await response.json() // UI'ı güncelleme setApprovalSteps((steps) => { const updatedSteps = steps.map((currentStep) => { // İşlem yapılan adımı güncelle if (currentStep.id === stepId) { if (isApprove) { // Onaylama durumu return { ...currentStep, approveStatus: 2, // Tamamlandı olarak işaretle approveDate: new Date().toISOString(), // Onay tarihini güncelle approvedBy: currentUser, // Onaylayan kişiyi kaydet } } else { // Reddetme durumu return { ...currentStep, approveStatus: 0, // Başlanmadı olarak işaretle approveDate: new Date().toISOString(), // Reddetme tarihini güncelle approvedBy: "", // Onaylayan kişiyi temizle } } } // Onaylama durumunda, bir sonraki adımı "Devam Ediyor" olarak ayarla if (isApprove && currentStep.approveStatus === 0) { const currentIndex = steps.findIndex((s) => s.id === stepId) const nextStepIndex = steps.findIndex((s) => s.id === currentStep.id) if (nextStepIndex === currentIndex + 1) { return { ...currentStep, approveStatus: 1 } // Bir sonraki adımı "Devam Ediyor" yap } } return currentStep }) return updatedSteps }) // Başarı bildirimi gösterme toast({ title: isApprove ? "Onaylama Başarılı" : "Reddetme Başarılı", description: isApprove ? `Adım ${stepId} başarıyla onaylandı.` : `Adım ${stepId} başarıyla reddedildi.`, variant: "default", }) } catch (error) { // Hata durumunda bildirim gösterme console.error(isApprove ? "Onaylama hatası:" : "Reddetme hatası:", error) toast({ title: isApprove ? "Onaylama Hatası" : "Reddetme Hatası", description: error instanceof Error ? error.message : "Bir hata oluştu", variant: "destructive", }) } finally { // Yükleniyor durumunu temizleme setLoadingStepId(null) setIsApproving(false) setIsRejecting(false) } } // Onaylama işlemi const handleApprove = (stepId: number) => { handleApprovalAction(stepId, true) } // Reddetme işlemi const handleReject = (stepId: number) => { handleApprovalAction(stepId, false) } // Onaylayıcı listesi const approvers = ["John Doe", "Jane Smith", "Alex Johnson", "Sarah Williams"] // Bir adımın tıklanabilir olup olmadığını kontrol etme const isStepClickable = (step: ApprovalStep) => { // "Başlanmadı" durumundaki adımlar tıklanamaz if (step.approveStatus === 0) return false // "Tamamlandı" durumundaki adımlar her zaman tıklanabilir if (step.approveStatus === 2) return true // "Devam Ediyor" durumundaki adımlar sadece mevcut kullanıcı onaylayıcı ise tıklanabilir return step.assigner === currentUser } return (

Approval Timeline

{/* Mevcut kullanıcıyı göster */}

Current User: {currentUser}

{/* Timeline (Zaman Çizelgesi) */}

{approvalSteps.map((step, index) => (

{/* Adımlar arası bağlantı çizgisi */} {index < approvalSteps.length - 1 && (

= 1 ? "bg-green-500" : "bg-gray-300" }`} >

)} {/* Adım dairesi */}

toggleStepDetails(step.id)} > {/* Tamamlandı ise onay işareti, değilse adım numarası göster */} {step.approveStatus === 2 ? : {step.approvalStepId}}

{/* Adım etiketi */}

{step.approveStatus === 0 ? "Not Started" : step.approveStatus === 1 ? "In Progress" : "Completed"}

))}

{/* Adım detayları */} {approvalSteps.map( (step) => expandedStepId === step.id && (

{/* Onaylayıcı seçimi */}

Approver

{/* Onay tarihi */}

Approval Date

{step.approveDate ? new Date(step.approveDate).toLocaleDateString() : "Not approved yet"}

{/* Onay durumu */}

Approval Status

{step.approveStatus === 0 ? "Not Started" : step.approveStatus === 1 ? "In Progress" : "Completed"}

{/* Talep ID'si */}

Demand ID

{step.demandId}

{/* Onay/Ret butonları */}

), )}

) }