From 9e1e9c23fb91adb900dfe9df3bb8421c0dfd1426 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Fri, 6 Mar 2026 00:25:48 +0000
Subject: [PATCH] 9

---
 frontend/src/pages/calculator.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/calculator.tsx b/frontend/src/pages/calculator.tsx
index 9b6c7aa..d6d8a5d 100644
--- a/frontend/src/pages/calculator.tsx
+++ b/frontend/src/pages/calculator.tsx
@@ -8,7 +8,6 @@ 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 [val1, setVal1] = useState('')
@@ -22,6 +21,7 @@ const CalculatorPage = () => {
   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
@@ -33,7 +33,7 @@ const CalculatorPage = () => {
       case 'AND': res = num1 & num2; break
       case 'OR': res = num1 | num2; break
       case 'XOR': res = num1 ^ num2; break
-      default: res = num1
+      default: res = 0
     }
     return res.toString(baseMap[base]).toUpperCase()
   }
@@ -48,14 +48,15 @@ const CalculatorPage = () => {
         setActiveInput('val2')
       }
     } catch (e) {
+      console.error(e)
       alert('Error: Invalid calculation')
     }
   }
 
   const keys = base === 'hex' 
-    ? ['7', '8', '9', 'A', '4', '5', '6', 'B', '1', '2', '3', 'C', '0', 'D', 'E', 'F']
+    ? ['F', 'E', 'D', 'C', 'B', 'A', '9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
     : base === 'dec' 
-    ? ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0']
+    ? ['9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
     : base === 'oct'
     ? ['7', '6', '5', '4', '3', '2', '1', '0']
     : ['1', '0']
@@ -75,14 +76,15 @@ const CalculatorPage = () => {
           {''}
         </SectionTitleLineWithButton>
         <CardBox className="mb-6">
-          <div className="flex gap-2 mb-4">
+          <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="Sequential Mode" onClick={() => setIsSequential(!isSequential)} />
+            <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" onClick={() => setActiveInput('val1')} style={{ borderColor: activeInput === 'val1' ? '#53F6C7' : '#ccc' }}>
+            <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>
@@ -93,7 +95,7 @@ const CalculatorPage = () => {
                 <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" onClick={() => setActiveInput('val2')} style={{ borderColor: activeInput === 'val2' ? '#53F6C7' : '#ccc' }}>
+            <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>
@@ -106,7 +108,7 @@ const CalculatorPage = () => {
           </div>
 
           <BaseButtons>
-            <BaseButton color="info" label="Calculate" onClick={handleCalculate} />
+            <BaseButton color="info" label="Calculate (=)" onClick={handleCalculate} />
           </BaseButtons>
         </CardBox>
 
@@ -122,4 +124,4 @@ const CalculatorPage = () => {
 
 CalculatorPage.getLayout = (page: ReactElement) => <LayoutAuthenticated>{page}</LayoutAuthenticated>
 
-export default CalculatorPage
+export default CalculatorPage
\ No newline at end of file