117 lines
4.9 KiB
TypeScript
117 lines
4.9 KiB
TypeScript
import React from 'react'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import { motion } from 'framer-motion'
|
|
import { FaTimes } from 'react-icons/fa'
|
|
|
|
interface OvertimeRequestModalProps {
|
|
onClose: () => void
|
|
onSubmit: () => void
|
|
}
|
|
|
|
const OvertimeRequestModal: React.FC<OvertimeRequestModalProps> = ({ onClose, onSubmit }) => {
|
|
const { translate } = useLocalization();
|
|
return (
|
|
<>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/50 z-40"
|
|
onClick={onClose}
|
|
/>
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between sticky top-0 bg-white dark:bg-gray-800 z-10">
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
|
{translate('::App.Platform.Intranet.OvertimeRequestModal.Title')}
|
|
</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
|
>
|
|
<FaTimes className="w-5 h-5 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
onSubmit()
|
|
}}
|
|
className="p-6 space-y-4"
|
|
>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{translate('::App.Platform.Intranet.OvertimeRequestModal.Date')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
required
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{translate('::App.Platform.Intranet.OvertimeRequestModal.StartTime')}
|
|
</label>
|
|
<input
|
|
type="time"
|
|
required
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{translate('::App.Platform.Intranet.OvertimeRequestModal.EndTime')}
|
|
</label>
|
|
<input
|
|
type="time"
|
|
required
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{translate('::App.Platform.Intranet.OvertimeRequestModal.Description')}
|
|
</label>
|
|
<textarea
|
|
required
|
|
rows={3}
|
|
placeholder={translate('::App.Platform.Intranet.OvertimeRequestModal.ReasonPlaceholder')}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
|
>
|
|
{translate('::App.Platform.Intranet.OvertimeRequestModal.Cancel')}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-lg transition-colors"
|
|
>
|
|
{translate('::App.Platform.Intranet.OvertimeRequestModal.Submit')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</motion.div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default OvertimeRequestModal
|