6

2026-03-05 23:48:44 +00:00 · 2026-03-05 23:48:44 +00:00 · 606636bded
commit 606636bded
parent b71fb014db
2 changed files with 83 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,77 @@
+import { mdiCalculator, mdiHistory } 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'
+import FormField from '../components/FormField'
+
+const CalculatorPage = () => {
+  const [input, setInput] = useState('')
+  const [results, setResults] = useState({ hex: '', dec: '', oct: '', bin: '' })
+
+  const handleCalculate = () => {
+    // Basic implementation for now - this should ideally call the backend
+    try {
+      const decValue = parseInt(input, 10)
+      if (isNaN(decValue)) throw new Error('Invalid input')
+      
+      setResults({
+        hex: decValue.toString(16).toUpperCase(),
+        dec: decValue.toString(10),
+        oct: decValue.toString(8),
+        bin: decValue.toString(2)
+      })
+    } catch (e) {
+      alert('Error: Please enter a valid decimal number')
+    }
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Calculator')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiCalculator} title="Hex Calculator" main>
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className="mb-6">
+          <FormField label="Enter Decimal Number">
+            <input 
+              type="text" 
+              value={input} 
+              onChange={(e) => setInput(e.target.value)} 
+              className="w-full p-2 border rounded"
+              placeholder="e.g. 255"
+            />
+          </FormField>
+          <BaseButtons>
+            <BaseButton color="info" label="Calculate" onClick={handleCalculate} />
+          </BaseButtons>
+        </CardBox>
+
+        {results.dec && (
+          <CardBox>
+            <div className="grid grid-cols-2 gap-4">
+              <div><strong>Decimal:</strong> {results.dec}</div>
+              <div><strong>Hex:</strong> 0x{results.hex}</div>
+              <div><strong>Octal:</strong> {results.oct}</div>
+              <div><strong>Binary:</strong> {results.bin}</div>
+            </div>
+          </CardBox>
+        )}
+      </SectionMain>
+    </>
+  )
+}
+
+CalculatorPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+}
+
+export default CalculatorPage