367 lines
15 KiB
TypeScript
367 lines
15 KiB
TypeScript
import React, { useState } from 'react'
|
||
import {
|
||
FaPlus,
|
||
FaSearch,
|
||
FaEdit,
|
||
FaTrash,
|
||
FaCodeBranch,
|
||
FaUsers,
|
||
FaCog,
|
||
FaClock,
|
||
FaCheckCircle,
|
||
FaEye,
|
||
} from 'react-icons/fa'
|
||
import { MmApprovalWorkflow } from '../../../types/mm'
|
||
import ApprovalWorkflowModal from './ApprovalWorkflowModal'
|
||
import { mockApprovalWorkflows } from '../../../mocks/mockApprovalWorkflows'
|
||
import {
|
||
getApprovalLevelColor,
|
||
getApprovalLevelText,
|
||
getRequestTypeColor,
|
||
getRequestTypeText,
|
||
} from '../../../utils/erp'
|
||
import { Container } from '@/components/shared'
|
||
|
||
const ApprovalWorkflows: React.FC = () => {
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const [showModal, setShowModal] = useState(false)
|
||
const [editingWorkflow, setEditingWorkflow] = useState<MmApprovalWorkflow | null>(null)
|
||
const [selectedWorkflow, setSelectedWorkflow] = useState<MmApprovalWorkflow | null>(null)
|
||
const [modalMode, setModalMode] = useState<'create' | 'view' | 'edit'>('create')
|
||
|
||
// Mock data - replace with actual API calls
|
||
const [workflows] = useState<MmApprovalWorkflow[]>(mockApprovalWorkflows)
|
||
|
||
const filteredWorkflows = workflows.filter(
|
||
(workflow) =>
|
||
workflow.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
workflow.departmentId.toLowerCase().includes(searchTerm.toLowerCase()),
|
||
)
|
||
|
||
const getTotalSteps = (workflow: MmApprovalWorkflow) => {
|
||
return workflow.approvalLevels.length
|
||
}
|
||
|
||
const getRequiredSteps = (workflow: MmApprovalWorkflow) => {
|
||
return workflow.approvalLevels.filter((level) => level.isRequired).length
|
||
}
|
||
|
||
const getMaxTimeout = (workflow: MmApprovalWorkflow) => {
|
||
return Math.max(...workflow.approvalLevels.map((level) => level.timeoutDays || 0))
|
||
}
|
||
|
||
const handleEdit = (workflow: MmApprovalWorkflow) => {
|
||
setEditingWorkflow(workflow)
|
||
setModalMode('edit')
|
||
setShowModal(true)
|
||
}
|
||
|
||
const handleView = (workflow: MmApprovalWorkflow) => {
|
||
setEditingWorkflow(workflow)
|
||
setModalMode('view')
|
||
setShowModal(true)
|
||
}
|
||
|
||
const handleAddNew = () => {
|
||
setEditingWorkflow(null)
|
||
setModalMode('create')
|
||
setShowModal(true)
|
||
}
|
||
|
||
const handleViewDetails = (workflow: MmApprovalWorkflow) => {
|
||
setSelectedWorkflow(workflow)
|
||
}
|
||
|
||
const handleSaveWorkflow = (workflow: MmApprovalWorkflow) => {
|
||
// TODO: Implement save logic
|
||
console.log('Saving workflow:', workflow)
|
||
setShowModal(false)
|
||
setEditingWorkflow(null)
|
||
}
|
||
|
||
const handleCloseModal = () => {
|
||
setShowModal(false)
|
||
setEditingWorkflow(null)
|
||
}
|
||
|
||
return (
|
||
<Container>
|
||
<div className="space-y-2">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900">Onay Süreçleri</h2>
|
||
<p className="text-gray-600">Departman bazlı satınalma onay süreçlerini yönetin</p>
|
||
</div>
|
||
<button
|
||
onClick={handleAddNew}
|
||
className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 flex items-center space-x-2 text-sm"
|
||
>
|
||
<FaPlus className="w-4 h-4" />
|
||
<span>Yeni Onay Süreci</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Search Bar */}
|
||
<div className="relative">
|
||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||
<input
|
||
type="text"
|
||
placeholder="Onay süreci ara..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||
{/* Workflow List */}
|
||
<div className="space-y-3 pt-2">
|
||
<h3 className="text-base font-semibold text-gray-900">Onay Süreçleri</h3>
|
||
{filteredWorkflows.map((workflow) => (
|
||
<div
|
||
key={workflow.id}
|
||
className="bg-white rounded-lg shadow-md border border-gray-200 p-3 hover:shadow-lg transition-shadow cursor-pointer"
|
||
onClick={() => handleViewDetails(workflow)}
|
||
>
|
||
<div className="flex items-start justify-between mb-2">
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2 mb-1">
|
||
<FaCodeBranch className="w-4 h-4 text-gray-600" />
|
||
<h4 className="text-base font-semibold text-gray-900">{workflow.name}</h4>
|
||
<span
|
||
className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestTypeColor(
|
||
workflow.requestType,
|
||
)}`}
|
||
>
|
||
{getRequestTypeText(workflow.requestType)}
|
||
</span>
|
||
</div>
|
||
<p className="text-xs text-gray-600 mb-1">
|
||
Departman: {workflow.department?.name}
|
||
</p>
|
||
<p className="text-sm text-gray-600">
|
||
Limit: ₺{workflow.amountThreshold.toLocaleString()} ve üzeri
|
||
</p>
|
||
</div>
|
||
<div className="flex space-x-1">
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleView(workflow)
|
||
}}
|
||
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
|
||
title="Görüntüle"
|
||
>
|
||
<FaEye className="w-4 h-4" />
|
||
</button>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleEdit(workflow)
|
||
}}
|
||
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
|
||
title="Düzenle"
|
||
>
|
||
<FaEdit className="w-4 h-4" />
|
||
</button>
|
||
<button
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
|
||
title="Sil"
|
||
>
|
||
<FaTrash className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3 text-xs mb-2">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-gray-500 flex items-center">
|
||
<FaUsers className="w-4 h-4 mr-1" />
|
||
Toplam Adım
|
||
</span>
|
||
<span className="font-medium">{getTotalSteps(workflow)}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-gray-500 flex items-center">
|
||
<FaCheckCircle className="w-4 h-4 mr-1" />
|
||
Zorunlu Adım
|
||
</span>
|
||
<span className="font-medium">{getRequiredSteps(workflow)}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-gray-500 flex items-center">
|
||
<FaClock className="w-4 h-4 mr-1" />
|
||
Maks. Süre
|
||
</span>
|
||
<span className="font-medium">{getMaxTimeout(workflow)} gün</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-gray-500">Son Güncelleme</span>
|
||
<span className="font-medium">
|
||
{workflow.lastModificationTime.toLocaleDateString('tr-TR')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<span
|
||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||
workflow.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||
}`}
|
||
>
|
||
{workflow.isActive ? 'Aktif' : 'Pasif'}
|
||
</span>
|
||
<div className="flex items-center space-x-1">
|
||
{workflow.approvalLevels.some((level) => level.isParallel) && (
|
||
<span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded flex items-center">
|
||
<FaCodeBranch className="w-3 h-3 mr-1" />
|
||
Paralel Onay
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{filteredWorkflows.length === 0 && (
|
||
<div className="text-center py-6">
|
||
<FaCodeBranch className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||
<h3 className="text-base font-medium text-gray-900 mb-2">Onay süreci bulunamadı</h3>
|
||
<p className="text-sm text-gray-500">
|
||
Arama kriterlerinizi değiştirin veya yeni bir onay süreci ekleyin.
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Workflow Details */}
|
||
<div className="space-y-3 pt-2">
|
||
<h3 className="text-base font-semibold text-gray-900">Onay Adımları</h3>
|
||
{selectedWorkflow ? (
|
||
<div className="bg-white rounded-lg shadow-md border border-gray-200 p-3">
|
||
<div className="mb-3">
|
||
<h4 className="font-semibold text-base text-gray-900 mb-2">
|
||
{selectedWorkflow.name}
|
||
</h4>
|
||
<div className="grid grid-cols-2 gap-1 text-xs text-gray-600 mb-2">
|
||
<div>Departman: {selectedWorkflow.departmentId}</div>
|
||
<div>Tür: {getRequestTypeText(selectedWorkflow.requestType)}</div>
|
||
<div>Tutar Limiti: ₺{selectedWorkflow.amountThreshold.toLocaleString()}</div>
|
||
<div>Durum: {selectedWorkflow.isActive ? 'Aktif' : 'Pasif'}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
{selectedWorkflow.approvalLevels
|
||
.sort((a, b) => a.sequence - b.sequence)
|
||
.map((level, index) => (
|
||
<div key={level.id} className="border border-gray-200 rounded-lg p-2">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">
|
||
Adım {level.sequence}
|
||
</span>
|
||
<span
|
||
className={`px-2 py-1 rounded-full text-xs font-medium ${getApprovalLevelColor(
|
||
level.level,
|
||
)}`}
|
||
>
|
||
{getApprovalLevelText(level.level)}
|
||
</span>
|
||
{level.isRequired && (
|
||
<span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">
|
||
Zorunlu
|
||
</span>
|
||
)}
|
||
{level.isParallel && (
|
||
<span className="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">
|
||
Paralel
|
||
</span>
|
||
)}
|
||
</div>
|
||
{level.timeoutDays && (
|
||
<span className="text-xs text-gray-500 flex items-center">
|
||
<FaClock className="w-3 h-3 mr-1" />
|
||
{level.timeoutDays} gün
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-xs">
|
||
<div className="font-medium text-gray-900 mb-1">Onaylayanlar:</div>
|
||
<div className="space-y-1">
|
||
{level.approverNames.map((name, idx) => (
|
||
<div key={idx} className="flex items-center space-x-2">
|
||
<FaUsers className="w-4 h-4 text-gray-400" />
|
||
<span className="text-gray-700">{name}</span>
|
||
<span className="text-xs text-gray-500">
|
||
({level.approverUserIds[idx]})
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{index < selectedWorkflow.approvalLevels.length - 1 && (
|
||
<div className="flex justify-center mt-3">
|
||
<div className="w-px h-4 bg-gray-300"></div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Workflow Statistics */}
|
||
<div className="mt-3 pt-3 border-t border-gray-100">
|
||
<div className="grid grid-cols-3 gap-3 text-xs">
|
||
<div className="text-center">
|
||
<div className="font-medium text-gray-900">
|
||
{getTotalSteps(selectedWorkflow)}
|
||
</div>
|
||
<div className="text-gray-500">Toplam Adım</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="font-medium text-gray-900">
|
||
{getRequiredSteps(selectedWorkflow)}
|
||
</div>
|
||
<div className="text-gray-500">Zorunlu Adım</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="font-medium text-gray-900">
|
||
{getMaxTimeout(selectedWorkflow)}
|
||
</div>
|
||
<div className="text-gray-500">Maks. Gün</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="bg-gray-50 rounded-lg p-6 text-center">
|
||
<FaCog className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||
Onay Adımlarını Görüntüle
|
||
</h3>
|
||
<p className="text-sm text-gray-500">
|
||
Detaylarını görmek için sol taraftan bir onay süreci seçin.
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Approval Workflow Modal */}
|
||
<ApprovalWorkflowModal
|
||
isOpen={showModal}
|
||
onClose={handleCloseModal}
|
||
onSave={handleSaveWorkflow}
|
||
workflow={editingWorkflow}
|
||
mode={modalMode}
|
||
/>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default ApprovalWorkflows
|