task-p.5

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

@@ -19,6 +19,7 @@ import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { TemplateJsonSheet } from './template-json-sheet';
+import { TemplateVersionManagementPanel } from './template-version-management-panel';
 import {
   createDocumentTemplateMappingMutation,
   createDocumentTemplateMutation,
@@ -527,7 +528,10 @@ function MappingDialog({
 function TemplateDetailCard({ templateId }: { templateId: string }) {
   const { data } = useSuspenseQuery(documentTemplateByIdOptions(templateId));
   const template = data.template;
-  const [versionDialogOpen, setVersionDialogOpen] = React.useState(false);
+  const [versionDialogState, setVersionDialogState] = React.useState<{
+    open: boolean;
+    version?: DocumentTemplateVersionDetail;
+  }>({ open: false });
   const [mappingDialogState, setMappingDialogState] = React.useState<{
     open: boolean;
     version?: DocumentTemplateVersionDetail;
@@ -569,7 +573,7 @@ function TemplateDetailCard({ templateId }: { templateId: string }) {
               </TabsTrigger>
             ))}
           </TabsList>
-          <Button onClick={() => setVersionDialogOpen(true)}>
+          <Button onClick={() => setVersionDialogState({ open: true, version: undefined })}>
             <Icons.add className='mr-2 h-4 w-4' />
             Add Version
           </Button>
@@ -617,7 +621,15 @@ function TemplateDetailCard({ templateId }: { templateId: string }) {
                       filePath={version.filePath}
                       schemaJson={version.schemaJson}
                     />
-                    <Button variant='outline' onClick={() => setVersionDialogOpen(true)}>
+                    <Button
+                      variant='outline'
+                      onClick={() =>
+                        setVersionDialogState({
+                          open: true,
+                          version,
+                        })
+                      }
+                    >
                       Edit Version
                     </Button>
                     <Button
@@ -634,6 +646,11 @@ function TemplateDetailCard({ templateId }: { templateId: string }) {
                   </div>
                 </div>
               </div>
+              <TemplateVersionManagementPanel
+                templateId={template.id}
+                version={version}
+                versions={template.versions}
+              />
             <div className='space-y-3'>
               {version.mappings.map((mapping) => (
                 <div key={mapping.id} className='rounded-lg border p-4'>
@@ -699,10 +716,12 @@ function TemplateDetailCard({ templateId }: { templateId: string }) {
       </Tabs>
 
       <VersionDialog
-        open={versionDialogOpen}
-        onOpenChange={setVersionDialogOpen}
+        open={versionDialogState.open}
+        onOpenChange={(open) =>
+          setVersionDialogState((current) => ({ ...current, open }))
+        }
         templateId={template.id}
-        version={undefined}
+        version={versionDialogState.version}
       />
       {mappingDialogState.open && mappingDialogState.version ? (
         <MappingDialog