9

8
7
2026-03-06 00:25:48 +00:00 · 2026-03-06 00:19:52 +00:00 · 2026-03-06 00:08:18 +00:00 · 2026-03-06 00:04:20 +00:00 · 2026-03-05 23:48:44 +00:00
2 changed files with 133 additions and 1 deletions
--- a/frontend/src/menuAside.ts
+++ b/frontend/src/menuAside.ts
@ -48,6 +48,11 @@ const menuAside: MenuAsideItem[] = [
    icon: 'mdiCalculator' in icon ? icon['mdiCalculator' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
    permissions: 'READ_CALCULATIONS'
  },
+  {
+    href: '/calculator',
+    label: 'Calculator',
+    icon: icon.mdiCalculator,
+  },
  {
    href: '/ai_requests/ai_requests-list',
    label: 'Ai requests',
@ -88,4 +93,4 @@ const menuAside: MenuAsideItem[] = [
  },
 ]

-export default menuAside
+export default menuAside
--- a/frontend/src/pages/calculator.tsx
+++ b/frontend/src/pages/calculator.tsx
@ -0,0 +1,127 @@
+import { mdiCalculator } from '@mdi/js'
+import Head from 'next/head'
+import React, { useState, ReactElement } from 'react'
+import CardBox from '../components/CardBox'
+import LayoutAuthenticated from '../layouts/Authenticated'
+import SectionMain from '../components/SectionMain'
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../config'
+import BaseButton from '../components/BaseButton'
+import BaseButtons from '../components/BaseButtons'
+
+const CalculatorPage = () => {
+  const [val1, setVal1] = useState('')
+  const [val2, setVal2] = useState('')
+  const [base, setBase] = useState<'hex' | 'dec' | 'oct' | 'bin'>('dec')
+  const [operation, setOperation] = useState<'+' | '-' | '*' | '/' | 'AND' | 'OR' | 'XOR'>('+')
+  const [result, setResult] = useState<string | null>(null)
+  const [activeInput, setActiveInput] = useState<'val1' | 'val2'>('val1')
+  const [isSequential, setIsSequential] = useState(false)
+
+  const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 }
+
+  const calculate = (v1: string, v2: string, op: string) => {
+    if (!v1 || !v2) return ''
+    const num1 = parseInt(v1, baseMap[base])
+    const num2 = parseInt(v2, baseMap[base])
+    let res: number
+    switch(op) {
+      case '+': res = num1 + num2; break
+      case '-': res = num1 - num2; break
+      case '*': res = num1 * num2; break
+      case '/': res = num1 / num2; break
+      case 'AND': res = num1 & num2; break
+      case 'OR': res = num1 | num2; break
+      case 'XOR': res = num1 ^ num2; break
+      default: res = 0
+    }
+    return res.toString(baseMap[base]).toUpperCase()
+  }
+
+  const handleCalculate = () => {
+    try {
+      const res = calculate(val1, val2, operation)
+      setResult(res)
+      if (isSequential) {
+        setVal1(res)
+        setVal2('')
+        setActiveInput('val2')
+      }
+    } catch (e) {
+      console.error(e)
+      alert('Error: Invalid calculation')
+    }
+  }
+
+  const keys = base === 'hex' 
+    ? ['F', 'E', 'D', 'C', 'B', 'A', '9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
+    : base === 'dec' 
+    ? ['9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
+    : base === 'oct'
+    ? ['7', '6', '5', '4', '3', '2', '1', '0']
+    : ['1', '0']
+
+  const handleKeyClick = (key: string) => {
+    if (activeInput === 'val1') setVal1(val1 + key)
+    else setVal2(val2 + key)
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Calculator')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiCalculator} title="Hex Calculator" main>
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className="mb-6">
+          <div className="flex flex-wrap gap-2 mb-4">
+            {(['hex', 'dec', 'oct', 'bin'] as const).map(b => (
+              <BaseButton key={b} color={base === b ? 'info' : 'light'} label={b.toUpperCase()} onClick={() => { setBase(b); setVal1(''); setVal2(''); setResult(null); }} />
+            ))}
+            <BaseButton color={isSequential ? 'success' : 'light'} label={isSequential ? "Sequential: ON" : "Sequential: OFF"} onClick={() => setIsSequential(!isSequential)} />
+            <BaseButton color="warning" label="CLR ALL" onClick={() => { setVal1(''); setVal2(''); setResult(null); }} />
+          </div>
+          <div className="flex gap-4 mb-4">
+            <div className={`flex-1 cursor-pointer p-2 border-2 rounded ${activeInput === 'val1' ? 'border-info-500 bg-info-50' : 'border-gray-300'}`} onClick={() => setActiveInput('val1')}>
+              <label className="text-xs">Value 1</label>
+              <div className="text-xl">{val1 || '...'}</div>
+            </div>
+            <div className="w-24">
+              <label className="text-xs">Op</label>
+              <select value={operation} onChange={(e) => setOperation(e.target.value as any)} className="w-full p-2 border rounded">
+                <option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option>
+                <option value="AND">AND</option><option value="OR">OR</option><option value="XOR">XOR</option>
+              </select>
+            </div>
+            <div className={`flex-1 cursor-pointer p-2 border-2 rounded ${activeInput === 'val2' ? 'border-info-500 bg-info-50' : 'border-gray-300'}`} onClick={() => setActiveInput('val2')}>
+              <label className="text-xs">Value 2</label>
+              <div className="text-xl">{val2 || '...'}</div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-4 gap-2 mb-4">
+            {keys.map(k => <BaseButton key={k} label={k} onClick={() => handleKeyClick(k)} />)}
+            <BaseButton label="DEL" color="danger" onClick={() => activeInput === 'val1' ? setVal1(val1.slice(0, -1)) : setVal2(val2.slice(0, -1))} />
+            <BaseButton label="CLR" color="warning" onClick={() => activeInput === 'val1' ? setVal1('') : setVal2('')} />
+          </div>
+
+          <BaseButtons>
+            <BaseButton color="info" label="Calculate (=)" onClick={handleCalculate} />
+          </BaseButtons>
+        </CardBox>
+
+        {result !== null && (
+          <CardBox>
+            <div className="text-xl font-bold">Result: {result}</div>
+          </CardBox>
+        )}
+      </SectionMain>
+    </>
+  )
+}
+
+CalculatorPage.getLayout = (page: ReactElement) => <LayoutAuthenticated>{page}</LayoutAuthenticated>
+
+export default CalculatorPage
Author	SHA1	Message	Date
Flatlogic Bot	9e1e9c23fb	9	2026-03-06 00:25:48 +00:00
Flatlogic Bot	f70acc8a33	8	2026-03-06 00:19:52 +00:00
Flatlogic Bot	0ba706f6b9	7	2026-03-06 00:08:18 +00:00
Flatlogic Bot	537c499699	7	2026-03-06 00:04:20 +00:00
Flatlogic Bot	606636bded	6	2026-03-05 23:48:44 +00:00