freightdesk/frontend/src/components/BidSubmissionModal.jsx

91 lines
No EOL
2.9 KiB
JavaScript

import React, { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { supabase } from '../supabaseClient';
function BidSubmissionModal({ loadId, onClose, onSuccess }) {
const [bidAmount, setBidAmount] = useState('');
const [notes, setNotes] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: async (bidData) => {
const { data, error } = await supabase
.from('bids')
.insert({
load_id: loadId,
driver_id: (await supabase.auth.getUser()).data.user?.id,
bid_amount: parseFloat(bidAmount),
notes: notes,
status: 'pending',
})
.select();
if (error) throw error;
return data[0];
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['bids', loadId] });
onSuccess?.();
onClose();
},
});
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
try {
await mutation.mutateAsync();
} catch (err) {
console.error('Bid submission failed:', err.message);
} finally {
setIsSubmitting(false);
}
};
return (
<div className="modal d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
<div className="modal-dialog">
<form onSubmit={handleSubmit}>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Submit Bid for Load</h5>
<button type="button" className="btn-close" onClick={onClose}></button>
</div>
<div className="modal-body">
<div className="mb-3">
<label className="form-label">Bid Amount ()</label>
<input
type="number"
step="0.01"
className="form-control"
value={bidAmount}
onChange={(e) => setBidAmount(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label className="form-label">Notes (Optional)</label>
<textarea
className="form-control"
rows="3"
value={notes}
onChange={(e) => setNotes(e.target.value)}
/>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" onClick={onClose}>
Cancel
</button>
<button type="submit" className="btn btn-primary" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit Bid'}
</button>
</div>
</div>
</form>
</div>
</div>
);
}
export default BidSubmissionModal;