260223:1415 20260223 nextJS & nestJS Best pratices

frontend/app/(admin)/admin/doc-control/numbering/[id]/edit/page.tsx

@@ -1,17 +1,21 @@
-"use client";
+'use client';
 
-import { useState, useEffect } from "react";
-import { TemplateEditor } from "@/components/numbering/template-editor";
-import { SequenceViewer } from "@/components/numbering/sequence-viewer";
-import { numberingApi } from "@/lib/api/numbering";
-import { NumberingTemplate } from "@/lib/api/numbering"; // Correct import
-import { useRouter } from "next/navigation";
-import { Loader2 } from "lucide-react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useCorrespondenceTypes, useContracts, useDisciplines } from "@/hooks/use-master-data";
-import { useProjects } from "@/hooks/use-projects";
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { TemplateEditor } from '@/components/numbering/template-editor';
+import { SequenceViewer } from '@/components/numbering/sequence-viewer';
+import { numberingApi } from '@/lib/api/numbering';
+import { NumberingTemplate } from '@/lib/api/numbering';
+import { useRouter } from 'next/navigation';
+import { Loader2 } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useCorrespondenceTypes, useContracts, useDisciplines } from '@/hooks/use-master-data';
+import { useProjects } from '@/hooks/use-projects';
+import { toast } from 'sonner';
 
-export default function EditTemplatePage({ params }: { params: { id: string } }) {
+export default function EditTemplatePage() {
+  const params = useParams();
+  const id = params['id'] as string;
   const router = useRouter();
   const [loading, setLoading] = useState(true);
   const [template, setTemplate] = useState<NumberingTemplate | null>(null);
@@ -24,33 +28,36 @@ export default function EditTemplatePage({ params }: { params: { id: string } })
   const contractId = contracts[0]?.id;
   const { data: disciplines = [] } = useDisciplines(contractId);
 
-  const selectedProjectName = projects.find((p: { id: number; projectName: string }) => p.id === projectId)?.projectName || 'LCBP3';
+  const selectedProjectName =
+    projects.find((p: { id: number; projectName: string }) => p.id === projectId)?.projectName ||
+    'LCBP3';
 
   useEffect(() => {
     const fetchTemplate = async () => {
       setLoading(true);
       try {
-        const data = await numberingApi.getTemplate(parseInt(params.id));
+        const data = await numberingApi.getTemplate(parseInt(id));
         if (data) {
           setTemplate(data);
         }
       } catch (error) {
-        console.error("Failed to fetch template", error);
+        toast.error('Failed to load template');
+        console.error('[EditTemplatePage] fetchTemplate:', error);
       } finally {
         setLoading(false);
       }
     };
 
     fetchTemplate();
-  }, [params.id]);
+  }, [id]);
 
   const handleSave = async (data: Partial<NumberingTemplate>) => {
     try {
-      await numberingApi.saveTemplate({ ...data, id: parseInt(params.id) });
-      router.push("/admin/numbering");
+      await numberingApi.saveTemplate({ ...data, id: parseInt(id) });
+      router.push('/admin/doc-control/numbering');
     } catch (error) {
-      console.error("Failed to update template", error);
-      alert("Failed to update template");
+      toast.error('Failed to update template');
+      console.error('[EditTemplatePage] handleSave:', error);
     }
   };
 

frontend/app/(admin)/admin/doc-control/numbering/new/page.tsx

@@ -5,6 +5,7 @@ import { numberingApi, NumberingTemplate } from "@/lib/api/numbering";
 import { useRouter } from "next/navigation";
 import { useCorrespondenceTypes, useContracts, useDisciplines } from "@/hooks/use-master-data";
 import { useProjects } from "@/hooks/use-projects";
+import { toast } from 'sonner';
 
 export default function NewTemplatePage() {
   const router = useRouter();
@@ -17,20 +18,21 @@ export default function NewTemplatePage() {
   const contractId = contracts[0]?.id;
   const { data: disciplines = [] } = useDisciplines(contractId);
 
-  const selectedProjectName = projects.find((p: any) => p.id === projectId)?.projectName || 'LCBP3';
+  const selectedProjectName =
+    projects.find((p: { id: number; projectName: string }) => p.id === projectId)?.projectName || 'LCBP3';
 
   const handleSave = async (data: Partial<NumberingTemplate>) => {
     try {
       await numberingApi.saveTemplate(data);
       router.push("/admin/numbering");
     } catch (error) {
-      console.error("Failed to create template", error);
-      alert("Failed to create template");
+      toast.error('Failed to create template');
+      console.error('[NewTemplatePage]', error);
     }
   };
 
   const handleCancel = () => {
-    router.push("/admin/numbering");
+    router.push('/admin/doc-control/numbering');
   };
 
   return (

frontend/app/(admin)/admin/doc-control/workflows/new/page.tsx

@@ -14,6 +14,7 @@ import { workflowApi } from '@/lib/api/workflows';
 import { WorkflowType } from '@/types/workflow';
 import { useRouter } from 'next/navigation';
 import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
 
 export default function NewWorkflowPage() {
   const router = useRouter();
@@ -31,8 +32,8 @@ export default function NewWorkflowPage() {
       await workflowApi.createWorkflow(workflowData);
       router.push('/admin/doc-control/workflows');
     } catch (error) {
-      console.error('Failed to create workflow', error);
-      alert('Failed to create workflow');
+      toast.error('Failed to create workflow');
+      console.error('[NewWorkflowPage]', error);
     } finally {
       setSaving(false);
     }

frontend/app/(admin)/admin/doc-control/workflows/page.tsx

@@ -8,6 +8,7 @@ import { Plus, Edit, Copy, Trash, Loader2 } from 'lucide-react';
 import Link from 'next/link';
 import { Workflow } from '@/types/workflow';
 import { workflowApi } from '@/lib/api/workflows';
+import { toast } from 'sonner';
 
 export default function WorkflowsPage() {
   const [workflows, setWorkflows] = useState<Workflow[]>([]);
@@ -20,7 +21,8 @@ export default function WorkflowsPage() {
         const data = await workflowApi.getWorkflows();
         setWorkflows(data);
       } catch (error) {
-        console.error('Failed to fetch workflows', error);
+        toast.error('Failed to load workflows');
+        console.error('[WorkflowsPage]', error);
       } finally {
         setLoading(false);
       }

frontend/app/(admin)/error.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+import Link from 'next/link';
+
+export default function AdminError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error('[Admin Error Boundary]', error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4 text-center px-4">
+      <AlertTriangle className="h-10 w-10 text-amber-500" />
+      <div>
+        <h2 className="text-lg font-semibold">Admin Panel Error</h2>
+        <p className="text-muted-foreground mt-1 text-sm max-w-md">
+          {error.message || 'An error occurred in the admin panel.'}
+        </p>
+        {error.digest && (
+          <p className="text-xs text-muted-foreground mt-2">Error ID: {error.digest}</p>
+        )}
+      </div>
+      <div className="flex gap-3">
+        <Button onClick={reset} variant="outline" size="sm">
+          <RefreshCw className="mr-2 h-4 w-4" />
+          Try again
+        </Button>
+        <Button asChild variant="ghost" size="sm">
+          <Link href="/admin">Back to Admin</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}