task-g

src/features/foundation/document-template/components/template-settings.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { documentTemplatesQueryOptions } from '../queries';
+
+export function TemplateSettings() {
+  const { data } = useSuspenseQuery(
+    documentTemplatesQueryOptions({ documentType: 'quotation', fileType: 'pdfme' })
+  );
+
+  return (
+    <div className='space-y-6'>
+      {!data.items.length ? (
+        <div className='text-muted-foreground rounded-lg border border-dashed p-8 text-center text-sm'>
+          No production document templates found.
+        </div>
+      ) : (
+        data.items.map((template) => (
+          <Card key={template.id}>
+            <CardHeader className='flex flex-row items-start justify-between gap-4'>
+              <div className='space-y-1'>
+                <CardTitle>{template.templateName}</CardTitle>
+                <CardDescription>{template.description || 'No description provided.'}</CardDescription>
+              </div>
+              <div className='flex flex-wrap gap-2'>
+                {template.isDefault ? <Badge>Default</Badge> : null}
+                <Badge variant={template.isActive ? 'secondary' : 'outline'}>
+                  {template.isActive ? 'Active' : 'Inactive'}
+                </Badge>
+                <Badge variant='outline'>{template.fileType}</Badge>
+              </div>
+            </CardHeader>
+            <CardContent className='grid gap-4 md:grid-cols-2 xl:grid-cols-5'>
+              <div>
+                <div className='text-muted-foreground text-xs'>Document Type</div>
+                <div className='text-sm font-medium'>{template.documentType}</div>
+              </div>
+              <div>
+                <div className='text-muted-foreground text-xs'>Product Type</div>
+                <div className='text-sm font-medium'>{template.productType}</div>
+              </div>
+              <div>
+                <div className='text-muted-foreground text-xs'>Latest Version</div>
+                <div className='text-sm font-medium'>{template.latestVersion ?? '-'}</div>
+              </div>
+              <div>
+                <div className='text-muted-foreground text-xs'>Version Count</div>
+                <div className='text-sm font-medium'>{template.versionCount}</div>
+              </div>
+              <div>
+                <div className='text-muted-foreground text-xs'>Mapping Count</div>
+                <div className='text-sm font-medium'>{template.mappingCount}</div>
+              </div>
+            </CardContent>
+          </Card>
+        ))
+      )}
+    </div>
+  );
+}