107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { Modal } from '../components/reusable';
|
|
import { CallsView } from '../components/rv';
|
|
import { CallDetail } from '../components/dv';
|
|
import { useState } from 'react';
|
|
import { Button } from '../components/buttons/Button';
|
|
import { Plus } from 'lucide-react';
|
|
import { DynamicForm } from '../components/forms/DynamicForm';
|
|
import { ORDER_BOOKING } from '../api/config';
|
|
import { orderBookingClient } from '../api/clients';
|
|
|
|
export function CallsPage() {
|
|
const params = useParams();
|
|
const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
|
|
const navigate = useNavigate();
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|
const [activeActivity, setActiveActivity] = useState<{ id: string; name: string } | null>(null);
|
|
const [isFabOpen, setIsFabOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<CallsView
|
|
refreshKey={refreshKey}
|
|
onRowClick={(row) => {
|
|
const id = row.instance_id as number | string | undefined;
|
|
if (id != null) navigate(`/calls/${id}`);
|
|
}}
|
|
headerActions={
|
|
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => setIsCreating(true)}>
|
|
Log Visit
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<Modal
|
|
open={isCreating}
|
|
onClose={() => setIsCreating(false)}
|
|
title="Log Visit"
|
|
width="md"
|
|
>
|
|
<DynamicForm
|
|
client={orderBookingClient}
|
|
activityId={ORDER_BOOKING.activities.LOG_VISIT.uid}
|
|
onSuccess={() => {
|
|
setIsCreating(false);
|
|
setRefreshKey(k => k + 1);
|
|
}}
|
|
onCancel={() => setIsCreating(false)}
|
|
/>
|
|
</Modal>
|
|
|
|
<Modal
|
|
open={instanceId != null}
|
|
onClose={() => { navigate(`/calls`); setIsFabOpen(false); }}
|
|
title={instanceId != null ? `Call #${instanceId}` : undefined}
|
|
width="lg"
|
|
>
|
|
{instanceId != null && (
|
|
<>
|
|
<CallDetail instanceId={instanceId} />
|
|
<div className="absolute bottom-6 right-6 flex flex-col items-end gap-3 z-50">
|
|
{isFabOpen && (
|
|
<div className="flex flex-col gap-2 bg-white p-3 rounded-sm shadow-xl border border-border-subtle animate-in fade-in slide-in-from-bottom-2">
|
|
<Button size="sm" variant="secondary" onClick={() => { setActiveActivity({ id: ORDER_BOOKING.activities.POTENTIAL_MINING.uid, name: 'Potential Mining' }); setIsFabOpen(false); }}>
|
|
Potential Mining
|
|
</Button>
|
|
<Button size="sm" onClick={() => { setActiveActivity({ id: ORDER_BOOKING.activities.PLACE_ORDER.uid, name: 'Place Order' }); setIsFabOpen(false); }}>
|
|
Place Order
|
|
</Button>
|
|
</div>
|
|
)}
|
|
<Button size='fab'
|
|
className="rounded-full shadow-xl flex items-center justify-center !p-0"
|
|
onClick={() => setIsFabOpen(!isFabOpen)}
|
|
>
|
|
<Plus size={24} className={`transition-transform duration-200 ${isFabOpen ? "rotate-45" : ""}`} />
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Modal>
|
|
|
|
<Modal
|
|
open={activeActivity != null}
|
|
onClose={() => setActiveActivity(null)}
|
|
title={activeActivity?.name}
|
|
width="md"
|
|
>
|
|
{activeActivity && instanceId != null && (
|
|
<DynamicForm
|
|
client={orderBookingClient}
|
|
activityId={activeActivity.id}
|
|
instanceId={instanceId}
|
|
ignorePrefill={activeActivity.id === ORDER_BOOKING.activities.PLACE_ORDER.uid}
|
|
onSuccess={() => {
|
|
setActiveActivity(null);
|
|
setRefreshKey(k => k + 1);
|
|
}}
|
|
onCancel={() => setActiveActivity(null)}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|