67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
|
|
import { toast } from 'sonner';
|
|
import { Button } from '@/components/ui/button';
|
|
import { opportunityByIdOptions } from '../api/queries';
|
|
import { convertOpportunityMutation } from '../api/mutations';
|
|
import { InfoGrid, RelatedQuotationList, SectionCard, TimelineList } from './shared';
|
|
import { formatCurrency } from '../utils/format';
|
|
|
|
export function OpportunityDetailPage({ id }: { id: string }) {
|
|
const { data } = useSuspenseQuery(opportunityByIdOptions(id));
|
|
const baseMutation = convertOpportunityMutation;
|
|
const mutation = useMutation({
|
|
...baseMutation,
|
|
onSuccess: async (...args) => {
|
|
await baseMutation.onSuccess?.(...args);
|
|
toast.success('สร้าง quotation mock เรียบร้อย');
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className='space-y-4'>
|
|
<SectionCard
|
|
title={data.opportunity.title}
|
|
description={`${data.opportunity.code} / ${data.branch.name}`}
|
|
action={
|
|
<Button isLoading={mutation.isPending} onClick={() => mutation.mutate(data.opportunity.id)}>
|
|
Convert to Quotation
|
|
</Button>
|
|
}
|
|
>
|
|
<InfoGrid
|
|
cols={4}
|
|
items={[
|
|
{ label: 'Customer', value: data.customer.name },
|
|
{ label: 'Contact', value: data.contact.name },
|
|
{ label: 'Chance', value: `${data.opportunity.chancePercent}%` },
|
|
{ label: 'Potential', value: formatCurrency(data.opportunity.expectedValue) },
|
|
{ label: 'Project Location', value: data.opportunity.projectLocation },
|
|
{ label: 'Competitor', value: data.opportunity.competitor },
|
|
{ label: 'Salesman', value: data.salesman.name },
|
|
{ label: 'Requirement', value: data.opportunity.requirementSummary }
|
|
]}
|
|
/>
|
|
</SectionCard>
|
|
|
|
<SectionCard title='Timeline / Activity'>
|
|
<TimelineList
|
|
items={data.opportunity.activities.map((activity) => ({
|
|
id: activity.id,
|
|
title: activity.title,
|
|
detail: activity.detail,
|
|
actorName: activity.actorName,
|
|
timestamp: activity.createdAt
|
|
}))}
|
|
/>
|
|
</SectionCard>
|
|
|
|
<SectionCard title='Related Quotations'>
|
|
<RelatedQuotationList quotations={data.quotations} />
|
|
</SectionCard>
|
|
</div>
|
|
);
|
|
}
|
|
|