adding printer testing for HANS

src/app/(main)/testing/page.tsx

@@ -4,13 +4,47 @@ import React, { useState } from "react";
 import { 
   Box, Grid, Paper, Typography, Button, Dialog, DialogTitle, 
   DialogContent, DialogActions, TextField, Stack, Table, 
-  TableBody, TableCell, TableContainer, TableHead, TableRow 
+  TableBody, TableCell, TableContainer, TableHead, TableRow,
+  Tabs, Tab  // ← Added for tabs
 } from "@mui/material";
 import { FileDownload, Print, SettingsEthernet, Lan, Router } from "@mui/icons-material";
 import dayjs from "dayjs";
 import { NEXT_PUBLIC_API_URL } from "@/config/api";
 
+// Simple TabPanel component for conditional rendering
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          {children}
+        </Box>
+      )}
+    </div>
+  );
+}
+
 export default function TestingPage() {
+  // Tab state
+  const [tabValue, setTabValue] = useState(0);
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
   // --- 1. TSC Section States ---
   const [tscConfig, setTscConfig] = useState({ ip: '192.168.1.100', port: '9100' });
   const [tscItems, setTscItems] = useState([
@@ -35,10 +69,22 @@ export default function TestingPage() {
   });
 
   // --- 4. Laser Section States ---
-const [laserConfig, setLaserConfig] = useState({ ip: '192.168.1.102', port: '8080' });
-const [laserItems, setLaserItems] = useState([
-  { id: 1, templateId: 'JOB_001', lotNo: 'L-LASER-01', expiryDate: '2025-12-31', power: '50' },
-]);
+  const [laserConfig, setLaserConfig] = useState({ ip: '192.168.1.102', port: '8080' });
+  const [laserItems, setLaserItems] = useState([
+    { id: 1, templateId: 'JOB_001', lotNo: 'L-LASER-01', expiryDate: '2025-12-31', power: '50' },
+  ]);
+
+  // --- 5. HANS600S-M Section States ---
+  const [hansConfig, setHansConfig] = useState({ ip: '192.168.76.10', port: '45678' });
+  const [hansItems, setHansItems] = useState([
+    { 
+      id: 1, 
+      textChannel3: 'SN-HANS-001-20260117',  // channel 3 (e.g. serial / text1)
+      textChannel4: 'BATCH-HK-TEST-OK',      // channel 4 (e.g. batch / text2)
+      text3ObjectName: 'Text3',              // EZCAD object name for channel 3
+      text4ObjectName: 'Text4'               // EZCAD object name for channel 4
+    },
+  ]);
 
   // Generic handler for inline table edits
   const handleItemChange = (setter: any, id: number, field: string, value: string) => {
@@ -105,6 +151,7 @@ const [laserItems, setLaserItems] = useState([
     } catch (e) { console.error("OnPack Error:", e); }
   };
 
+  // Laser Print (Section 4 - original)
   const handleLaserPrint = async (row: any) => {
     const token = localStorage.getItem("accessToken");
     const payload = { ...row, printerIp: laserConfig.ip, printerPort: laserConfig.port };
@@ -122,7 +169,6 @@ const [laserItems, setLaserItems] = useState([
     const token = localStorage.getItem("accessToken");
     const payload = { ...row, printerIp: laserConfig.ip, printerPort: parseInt(laserConfig.port) };
     try {
-      // We'll create this endpoint in the backend next
       const response = await fetch(`${NEXT_PUBLIC_API_URL}/plastic/preview-laser`, {
         method: 'POST',
         headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
@@ -132,24 +178,58 @@ const [laserItems, setLaserItems] = useState([
     } catch (e) { console.error("Preview Error:", e); }
   };
 
+  // HANS600S-M TCP Print (Section 5)
+  const handleHansPrint = async (row: any) => {
+    const token = localStorage.getItem("accessToken");
+    const payload = { 
+      printerIp: hansConfig.ip, 
+      printerPort: hansConfig.port,
+      textChannel3: row.textChannel3,
+      textChannel4: row.textChannel4,
+      text3ObjectName: row.text3ObjectName,
+      text4ObjectName: row.text4ObjectName
+    };
+    try {
+      const response = await fetch(`${NEXT_PUBLIC_API_URL}/plastic/print-laser-tcp`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      });
+      const result = await response.text();
+      if (response.ok) {
+        alert(`HANS600S-M Mark Success: ${result}`);
+      } else {
+        alert(`HANS600S-M Failed: ${result}`);
+      }
+    } catch (e) { 
+      console.error("HANS600S-M Error:", e); 
+      alert("HANS600S-M Connection Error");
+    }
+  };
+
   // Layout Helper
   const Section = ({ title, children }: { title: string, children?: React.ReactNode }) => (
-    <Grid item xs={12} md={6}>
-      <Paper sx={{ p: 3, minHeight: '450px', display: 'flex', flexDirection: 'column' }}>
-        <Typography variant="h5" gutterBottom color="primary" sx={{ borderBottom: '2px solid #f0f0f0', pb: 1, mb: 2 }}>
-            {title}
-        </Typography>
-        {children || <Typography color="textSecondary" sx={{ m: 'auto' }}>Waiting for implementation...</Typography>}
-      </Paper>
-    </Grid>
+    <Paper sx={{ p: 3, minHeight: '450px', display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="h5" gutterBottom color="primary" sx={{ borderBottom: '2px solid #f0f0f0', pb: 1, mb: 2 }}>
+        {title}
+      </Typography>
+      {children || <Typography color="textSecondary" sx={{ m: 'auto' }}>Waiting for implementation...</Typography>}
+    </Paper>
   );
 
   return (
     <Box sx={{ p: 4 }}>
-      <Typography variant="h4" sx={{ mb: 4, fontWeight: 'bold' }}>Printer Testing Dashboard</Typography>
+      <Typography variant="h4" sx={{ mb: 4, fontWeight: 'bold' }}>Printer Testing</Typography>
       
-      <Grid container spacing={3}>
-        {/* 1. TSC Section */}
+      <Tabs value={tabValue} onChange={handleTabChange} aria-label="printer sections tabs" centered variant="fullWidth">
+        <Tab label="1. TSC" />
+        <Tab label="2. DataFlex" />
+        <Tab label="3. OnPack" />
+        <Tab label="4. Laser" />
+        <Tab label="5. HANS600S-M" />
+      </Tabs>
+
+      <TabPanel value={tabValue} index={0}>
         <Section title="1. TSC">
           <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
             <TextField size="small" label="Printer IP" value={tscConfig.ip} onChange={e => setTscConfig({...tscConfig, ip: e.target.value})} />
@@ -181,8 +261,9 @@ const [laserItems, setLaserItems] = useState([
             </Table>
           </TableContainer>
         </Section>
+      </TabPanel>
 
-        {/* 2. DataFlex Section */}
+      <TabPanel value={tabValue} index={1}>
         <Section title="2. DataFlex">
           <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
             <TextField size="small" label="Printer IP" value={dfConfig.ip} onChange={e => setDfConfig({...dfConfig, ip: e.target.value})} />
@@ -214,8 +295,9 @@ const [laserItems, setLaserItems] = useState([
             </Table>
           </TableContainer>
         </Section>
+      </TabPanel>
 
-        {/* 3. OnPack Section */}
+      <TabPanel value={tabValue} index={2}>
         <Section title="3. OnPack">
           <Box sx={{ m: 'auto', textAlign: 'center' }}>
             <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
@@ -226,8 +308,9 @@ const [laserItems, setLaserItems] = useState([
             </Button>
           </Box>
         </Section>
+      </TabPanel>
 
-        {/* 4. Laser Section (HANS600S-M) */}
+      <TabPanel value={tabValue} index={3}>
         <Section title="4. Laser">
           <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
             <TextField size="small" label="Laser IP" value={laserConfig.ip} onChange={e => setLaserConfig({...laserConfig, ip: e.target.value})} />
@@ -283,7 +366,94 @@ const [laserItems, setLaserItems] = useState([
             Note: HANS Laser requires pre-saved templates on the controller.
           </Typography>
         </Section>
-      </Grid>
+      </TabPanel>
+
+      <TabPanel value={tabValue} index={4}>
+        <Section title="5. HANS600S-M">
+          <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
+            <TextField 
+              size="small" 
+              label="Laser IP" 
+              value={hansConfig.ip} 
+              onChange={e => setHansConfig({...hansConfig, ip: e.target.value})}
+            />
+            <TextField 
+              size="small" 
+              label="Port" 
+              value={hansConfig.port} 
+              onChange={e => setHansConfig({...hansConfig, port: e.target.value})}
+            />
+            <Router color="action" sx={{ ml: 'auto' }} />
+          </Stack>
+          
+          <TableContainer component={Paper} variant="outlined" sx={{ maxHeight: 300 }}>
+            <Table size="small" stickyHeader>
+              <TableHead>
+                <TableRow>
+                  <TableCell>Ch3 Text (SN)</TableCell>
+                  <TableCell>Ch4 Text (Batch)</TableCell>
+                  <TableCell>Obj3 Name</TableCell>
+                  <TableCell>Obj4 Name</TableCell>
+                  <TableCell align="center">Action</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {hansItems.map(row => (
+                  <TableRow key={row.id}>
+                    <TableCell>
+                      <TextField 
+                        variant="standard" 
+                        value={row.textChannel3} 
+                        onChange={e => handleItemChange(setHansItems, row.id, 'textChannel3', e.target.value)}
+                        sx={{ minWidth: 180 }}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <TextField 
+                        variant="standard" 
+                        value={row.textChannel4} 
+                        onChange={e => handleItemChange(setHansItems, row.id, 'textChannel4', e.target.value)}
+                        sx={{ minWidth: 140 }}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <TextField 
+                        variant="standard" 
+                        value={row.text3ObjectName} 
+                        onChange={e => handleItemChange(setHansItems, row.id, 'text3ObjectName', e.target.value)}
+                        size="small"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <TextField 
+                        variant="standard" 
+                        value={row.text4ObjectName} 
+                        onChange={e => handleItemChange(setHansItems, row.id, 'text4ObjectName', e.target.value)}
+                        size="small"
+                      />
+                    </TableCell>
+                    <TableCell align="center">
+                      <Button 
+                        variant="contained" 
+                        color="error" 
+                        size="small" 
+                        startIcon={<Print />} 
+                        onClick={() => handleHansPrint(row)}
+                        sx={{ minWidth: 80 }}
+                      >
+                        TCP Mark
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <Typography variant="caption" sx={{ mt: 2, display: 'block', color: 'text.secondary', fontSize: '0.75rem' }}>
+            TCP Push to EZCAD3 (Ch3/Ch4 via E3_SetTextObject) | IP:192.168.76.10:45678 | Backend: /print-laser-tcp
+          </Typography>
+        </Section>
+      </TabPanel>
 
       {/* Dialog for OnPack */}
       <Dialog open={isPrinterModalOpen} onClose={() => setIsPrinterModalOpen(false)} fullWidth maxWidth="sm">

src/components/NavigationContent/NavigationContent.tsx

@@ -247,7 +247,7 @@ const NavigationContent: React.FC = () => {
       icon: <BugReportIcon />,
       label: "PS",
       path: "/ps",
-      requiredAbility: AUTH.TESTING,
+      requiredAbility: [AUTH.TESTING, AUTH.ADMIN],
       isHidden: false,
     },
     {