Initial commit

frontend/src/components/TimeEntry/RedeemForm.jsx

@@ -0,0 +1,82 @@
+import React, { useState, useContext } from 'react';
+import { pb } from '../../lib/pocketbase';
+import { LanguageContext } from '../../contexts/LanguageContext';
+
+const RedeemForm = ({ onRedeem }) => {
+    const { t } = useContext(LanguageContext);
+    const [amount, setAmount] = useState('');
+    const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
+    const [loading, setLoading] = useState(false);
+
+    const handleRedeem = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        const hoursToDeduct = parseFloat(amount);
+        if (hoursToDeduct <= 0) return;
+
+        const data = {
+            user: pb.authStore.model.id,
+            date,
+            duration: hoursToDeduct,
+            type: 'regular', // or 'leave'
+            day_type: 'workday',
+            multiplier: -1, // Negative multiplier or just negative calculated hours?
+            // Let's set calculated_hours directly to negative
+            is_banked: true,
+            calculated_hours: -hoursToDeduct,
+            notes: 'Time Off Redeemed',
+            manual_override: true
+        };
+
+        try {
+            await pb.collection('time_entries').create(data);
+            setAmount('');
+            onRedeem();
+        } catch (error) {
+            console.error("Error redeeming:", error);
+            alert("Failed to redeem hours");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="bg-white p-6 rounded-lg shadow-md">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">{t('redeem.title')}</h3>
+            <form onSubmit={handleRedeem} className="space-y-4">
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">{t('redeem.date')}</label>
+                    <input
+                        type="date"
+                        required
+                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
+                        value={date}
+                        onChange={e => setDate(e.target.value)}
+                    />
+                </div>
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">{t('redeem.hours')}</label>
+                    <input
+                        type="number"
+                        step="0.25"
+                        min="0.25"
+                        required
+                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
+                        value={amount}
+                        onChange={e => setAmount(e.target.value)}
+                    />
+                </div>
+                <button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full bg-green-600 text-white p-2 rounded-md hover:bg-green-700 transition"
+                >
+                    {loading ? t('redeem.processing') : t('redeem.submit')}
+                </button>
+            </form>
+        </div>
+    );
+};
+
+export default RedeemForm;