426 lines
17 KiB
TypeScript
426 lines
17 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import {
|
||
FaPlus,
|
||
FaEdit,
|
||
FaSave,
|
||
FaTimesCircle,
|
||
FaAward,
|
||
FaPalette,
|
||
FaInfoCircle,
|
||
} from "react-icons/fa";
|
||
import { HrBadge, BadgeCategoryEnum, BadgeRarityEnum } from "../../../types/hr";
|
||
import { iconOptions } from "../../../utils/erp";
|
||
|
||
interface BadgeEditModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
badge?: HrBadge | null;
|
||
onSubmit: (badgeData: HrBadge) => void;
|
||
mode: "create" | "edit";
|
||
}
|
||
|
||
const BadgeEditModal: React.FC<BadgeEditModalProps> = ({
|
||
isOpen,
|
||
onClose,
|
||
badge,
|
||
onSubmit,
|
||
mode,
|
||
}) => {
|
||
const [formData, setFormData] = useState<HrBadge>({
|
||
id: "",
|
||
code: "",
|
||
name: "",
|
||
description: "",
|
||
icon: "⭐",
|
||
color: "#FFD700",
|
||
backgroundColor: "#FFF8DC",
|
||
category: BadgeCategoryEnum.Performance,
|
||
criteria: "",
|
||
points: 10,
|
||
rarity: BadgeRarityEnum.Common,
|
||
isActive: true,
|
||
creationTime: new Date(),
|
||
lastModificationTime: new Date(),
|
||
});
|
||
|
||
const generateBadgeCode = () => {
|
||
const timestamp = Date.now().toString().slice(-6);
|
||
return `BADGE-${timestamp}`;
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (mode === "edit" && badge) {
|
||
setFormData({
|
||
id: badge.id,
|
||
code: badge.code,
|
||
name: badge.name,
|
||
description: badge.description,
|
||
icon: badge.icon,
|
||
color: badge.color,
|
||
backgroundColor: badge.backgroundColor,
|
||
category: badge.category,
|
||
criteria: badge.criteria,
|
||
points: badge.points,
|
||
rarity: badge.rarity,
|
||
isActive: badge.isActive,
|
||
creationTime: badge.creationTime,
|
||
lastModificationTime: badge.lastModificationTime,
|
||
});
|
||
} else {
|
||
// Reset form for create mode
|
||
setFormData({
|
||
id: "",
|
||
code: generateBadgeCode(),
|
||
name: "",
|
||
description: "",
|
||
icon: "⭐",
|
||
color: "#FFD700",
|
||
backgroundColor: "#FFF8DC",
|
||
category: BadgeCategoryEnum.Performance,
|
||
criteria: "",
|
||
points: 10,
|
||
rarity: BadgeRarityEnum.Common,
|
||
isActive: true,
|
||
creationTime: new Date(),
|
||
lastModificationTime: new Date(),
|
||
});
|
||
}
|
||
}, [mode, badge, isOpen]);
|
||
|
||
const handleInputChange = (
|
||
e: React.ChangeEvent<
|
||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
||
>
|
||
) => {
|
||
const { name, value, type } = e.target;
|
||
|
||
if (type === "checkbox") {
|
||
const checked = (e.target as HTMLInputElement).checked;
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
[name]: checked,
|
||
}));
|
||
} else if (name === "points") {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
[name]: parseInt(value) || 0,
|
||
}));
|
||
} else {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
[name]: value,
|
||
}));
|
||
}
|
||
};
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
onSubmit(formData);
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
isOpen && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-t-xl">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
{mode === "edit" ? (
|
||
<FaEdit className="w-5 h-5 text-white" />
|
||
) : (
|
||
<FaPlus className="w-5 h-5 text-white" />
|
||
)}
|
||
</div>
|
||
<div className="text-sm">
|
||
<h3 className="text-xl font-bold text-gray-900">
|
||
{mode === "edit" ? "Rozet Düzenle" : "Yeni Rozet Oluştur"}
|
||
</h3>
|
||
<p className="text-sm text-gray-600">
|
||
{mode === "edit"
|
||
? "Mevcut rozet bilgilerini güncelleyin"
|
||
: "Yeni bir başarı rozeti tanımlayın"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-gray-400 hover:text-gray-600 p-1 hover:bg-gray-100 rounded-lg transition-colors"
|
||
>
|
||
<FaTimesCircle className="w-6 h-6" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<form onSubmit={handleSubmit} className="p-4">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||
{/* Sol Kolon */}
|
||
<div className="space-y-4">
|
||
<div className="bg-gray-50 p-3 rounded-lg">
|
||
<h4 className="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||
<FaAward className="w-5 h-5 text-blue-600" />
|
||
Temel Bilgiler
|
||
</h4>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Rozet Kodu <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="code"
|
||
value={formData.code}
|
||
onChange={handleInputChange}
|
||
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||
placeholder="Rozet kodunu girin..."
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Rozet Adı <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
value={formData.name}
|
||
onChange={handleInputChange}
|
||
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||
placeholder="Rozet adını girin..."
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Açıklama
|
||
</label>
|
||
<textarea
|
||
name="description"
|
||
value={formData.description}
|
||
onChange={handleInputChange}
|
||
rows={1}
|
||
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||
placeholder="Rozet açıklaması..."
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Kazanma Kriteri <span className="text-red-500">*</span>
|
||
</label>
|
||
<textarea
|
||
name="criteria"
|
||
value={formData.criteria}
|
||
onChange={handleInputChange}
|
||
rows={2}
|
||
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||
placeholder="Bu rozeti kazanmak için gerekli şartlar..."
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sağ Kolon */}
|
||
<div className="space-y-4">
|
||
<div className="bg-gray-50 p-3 rounded-lg">
|
||
<h4 className="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||
<FaPalette className="w-5 h-5 text-purple-600" />
|
||
Görsel ve Özellikler
|
||
</h4>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
İkon
|
||
</label>
|
||
<select
|
||
name="icon"
|
||
value={formData.icon}
|
||
onChange={handleInputChange}
|
||
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||
>
|
||
{iconOptions.map((option) => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.value} {option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Renk
|
||
</label>
|
||
<input
|
||
type="color"
|
||
name="color"
|
||
value={formData.color}
|
||
onChange={handleInputChange}
|
||
className="w-full h-9 border border-gray-300 rounded-lg cursor-pointer"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Arka Plan Rengi
|
||
</label>
|
||
<input
|
||
type="color"
|
||
name="backgroundColor"
|
||
value={formData.backgroundColor}
|
||
onChange={handleInputChange}
|
||
className="w-full h-9 border border-gray-300 rounded-lg cursor-pointer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Kategori
|
||
</label>
|
||
<select
|
||
name="category"
|
||
value={formData.category}
|
||
onChange={handleInputChange}
|
||
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||
>
|
||
{Object.values(BadgeCategoryEnum).map((category) => (
|
||
<option key={category} value={category}>
|
||
{category === BadgeCategoryEnum.Performance &&
|
||
"Performans"}
|
||
{category === BadgeCategoryEnum.Leadership &&
|
||
"Liderlik"}
|
||
{category === BadgeCategoryEnum.Innovation &&
|
||
"İnovasyon"}
|
||
{category === BadgeCategoryEnum.Teamwork &&
|
||
"Takım Çalışması"}
|
||
{category === BadgeCategoryEnum.Customer &&
|
||
"Müşteri"}
|
||
{category === BadgeCategoryEnum.Safety &&
|
||
"Güvenlik"}
|
||
{category === BadgeCategoryEnum.Attendance &&
|
||
"Devam"}
|
||
{category === BadgeCategoryEnum.Training &&
|
||
"Eğitim"}
|
||
{category === BadgeCategoryEnum.Project && "Proje"}
|
||
{category === BadgeCategoryEnum.Special && "Özel"}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Puan
|
||
</label>
|
||
<input
|
||
type="number"
|
||
name="points"
|
||
value={formData.points}
|
||
onChange={handleInputChange}
|
||
min="1"
|
||
max="1000"
|
||
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||
placeholder="10"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Nadirlık
|
||
</label>
|
||
<select
|
||
name="rarity"
|
||
value={formData.rarity}
|
||
onChange={handleInputChange}
|
||
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||
>
|
||
{Object.values(BadgeRarityEnum).map((rarity) => (
|
||
<option key={rarity} value={rarity}>
|
||
{rarity === BadgeRarityEnum.Common && "Yaygın"}
|
||
{rarity === BadgeRarityEnum.Uncommon && "Nadir"}
|
||
{rarity === BadgeRarityEnum.Rare && "Çok Nadir"}
|
||
{rarity === BadgeRarityEnum.Epic && "Efsanevi"}
|
||
{rarity === BadgeRarityEnum.Legendary && "Efsane"}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
name="isActive"
|
||
checked={formData.isActive}
|
||
onChange={handleInputChange}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label className="ml-2 block text-sm text-gray-900">
|
||
Aktif
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Preview */}
|
||
<div className="bg-gray-50 p-3 rounded-lg">
|
||
<h4 className="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||
<FaInfoCircle className="w-5 h-5 text-green-600" />
|
||
Önizleme
|
||
</h4>
|
||
<div className="flex items-center gap-3 p-3 bg-white rounded-lg border">
|
||
<div
|
||
className="w-12 h-12 rounded-full flex items-center justify-center text-xl"
|
||
style={{
|
||
backgroundColor: formData.backgroundColor,
|
||
border: `2px solid ${formData.color}`,
|
||
}}
|
||
>
|
||
{formData.icon}
|
||
</div>
|
||
<div>
|
||
<div className="font-medium text-gray-900">
|
||
{formData.name || "Rozet Adı"}
|
||
</div>
|
||
<div className="text-sm text-gray-500">
|
||
{formData.points} puan • {formData.category}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="flex items-center justify-end gap-3 mt-4 pt-4 border-t border-gray-200">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors flex items-center gap-2"
|
||
>
|
||
<FaTimesCircle className="w-4 h-4" />
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2 shadow-md hover:shadow-lg"
|
||
>
|
||
<FaSave className="w-4 h-4" />
|
||
{mode === "edit" ? "Güncelle" : "Oluştur"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)
|
||
);
|
||
};
|
||
|
||
export default BadgeEditModal;
|