Added Printer Spoofer for testing purposes

manager_dashboard/src/pages/Settings/SettingsPage.jsx

@@ -1,10 +1,12 @@
 import { useState } from 'react'
 import AppInfoTab from './tabs/AppInfoTab'
 import ColoursTab from './tabs/ColoursTab'
+import DevelopmentTab from './tabs/DevelopmentTab'
 
 const TABS = [
-  { key: 'app-info', label: 'App Info' },
-  { key: 'colours',  label: 'UI Personalization' },
+  { key: 'app-info',     label: 'App Info' },
+  { key: 'colours',      label: 'UI Personalization' },
+  { key: 'development',  label: 'Development' },
 ]
 
 export default function SettingsPage() {
@@ -44,8 +46,9 @@ export default function SettingsPage() {
       </div>
 
       {/* Tab content */}
-      {activeTab === 'app-info' && <AppInfoTab />}
-      {activeTab === 'colours'  && <ColoursTab />}
+      {activeTab === 'app-info'    && <AppInfoTab />}
+      {activeTab === 'colours'     && <ColoursTab />}
+      {activeTab === 'development' && <DevelopmentTab />}
     </div>
   )
 }

manager_dashboard/src/pages/Settings/tabs/DevelopmentTab.jsx

@@ -0,0 +1,86 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import toast from 'react-hot-toast'
+import client from '../../../api/client'
+
+function Toggle({ checked, onChange, disabled }) {
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      onClick={() => !disabled && onChange(!checked)}
+      style={{
+        width: 44, height: 24, borderRadius: 999, border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
+        background: checked ? '#dc2626' : '#d1d5db',
+        position: 'relative', transition: 'background 150ms', flexShrink: 0, opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      <span style={{
+        position: 'absolute', top: 3, left: checked ? 23 : 3,
+        width: 18, height: 18, borderRadius: '50%', background: 'white',
+        transition: 'left 150ms', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+      }} />
+    </button>
+  )
+}
+
+export default function DevelopmentTab() {
+  const qc = useQueryClient()
+
+  const { data: settings, isLoading } = useQuery({
+    queryKey: ['settings'],
+    queryFn: () => client.get('/api/settings/').then(r => r.data),
+  })
+
+  const mutation = useMutation({
+    mutationFn: ({ key, value }) => client.put(`/api/settings/${key}`, { value }),
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['settings'] }) },
+    onError: () => toast.error('Failed to update setting'),
+  })
+
+  const spoofOn = settings?.['dev.spoof_printing']?.value === 'true'
+
+  function toggleSpoof(val) {
+    mutation.mutate({ key: 'dev.spoof_printing', value: val ? 'true' : 'false' })
+    toast.success(val ? 'Spoof printing ON — printers are silenced' : 'Spoof printing OFF — printers active')
+  }
+
+  if (isLoading) return <p style={{ color: '#6b7280', fontSize: 14 }}>Loading…</p>
+
+  return (
+    <div style={{ maxWidth: 560 }}>
+      <div style={{
+        background: '#fef2f2', border: '1px solid #fca5a5',
+        borderRadius: 10, padding: '12px 16px', marginBottom: 24,
+        fontSize: 13, color: '#991b1b',
+      }}>
+        These settings are intended for testing only. Do not leave them enabled in production.
+      </div>
+
+      <div style={{
+        background: 'white', border: '1px solid #e5e7eb',
+        borderRadius: 10, padding: '16px 20px',
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
+      }}>
+        <div>
+          <div style={{ fontWeight: 600, fontSize: 14, color: '#111827' }}>
+            Spoof Printer Mode
+          </div>
+          <div style={{ fontSize: 13, color: '#6b7280', marginTop: 3 }}>
+            All print jobs are silently dropped. Devices behave as if printing succeeded — no errors, nothing printed.
+          </div>
+        </div>
+        <Toggle checked={spoofOn} onChange={toggleSpoof} disabled={mutation.isPending} />
+      </div>
+
+      {spoofOn && (
+        <div style={{
+          marginTop: 12, padding: '10px 14px',
+          background: '#fff7ed', border: '1px solid #fed7aa',
+          borderRadius: 8, fontSize: 13, color: '#92400e', fontWeight: 500,
+        }}>
+          Spoof mode is active — printers are silenced.
+        </div>
+      )}
+    </div>
+  )
+}