task-d5.5.1

src/features/crm-demo/components/opportunity-detail.tsx

@@ -0,0 +1,66 @@
+'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>
+  );
+}
+