From f4a6d27c5e8da6d9fc761d524076a5d0f48e5386 Mon Sep 17 00:00:00 2001
From: Joshua Rose <joshua.rose@squaredup.com>
Date: Mon, 22 Sep 2025 14:58:42 +0100
Subject: [PATCH 1/2] Add useEffect to load initial config values

---
 text-tile/TextTileEditor.tsx | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/text-tile/TextTileEditor.tsx b/text-tile/TextTileEditor.tsx
index f89def4..e20b226 100644
--- a/text-tile/TextTileEditor.tsx
+++ b/text-tile/TextTileEditor.tsx
@@ -2,7 +2,7 @@ import Modal, { ModalButtons } from 'components/Modal';
 import Button from 'components/button/Button';
 import { TextTileConfig } from 'dashboard-engine/tiles/text';
 import type { TextConfig } from 'dashboard-engine/visualisations/Text/Config';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TextPreview } from './TextPreview';
 
 /**
@@ -21,6 +21,30 @@ export const TextTileEditor: React.FC<{
     const [fontSize, setFontSize] = useState();
     const [align, setAlign] = useState<TextConfig['align']>('left');
 
+    useEffect(() => {
+        console.log('Setting default values');
+
+        if (config.visualisation?.config) {
+            setContent(config.visualisation?.config?.content || 'Sample text');
+            setFontSize(config.visualisation?.config?.fontSize || 16);
+            setAlign(config.visualisation?.config?.align || 'left');
+        }
+    }, []);
+
+    const renderTextArea = () => {
+        return (
+            <div className='mb-4'>
+                <label className='block mb-2 text-sm font-medium'>Content</label>
+                <textarea
+                    value={content}
+                    onChange={(e) => setContent(e.target.value)}
+                    placeholder='Type some text here'
+                    className='w-full h-32 p-3 border border-gray-300 rounded-md'
+                />
+            </div>
+        );
+    };
+
     return (
         <Modal title='Edit Text Tile' close={onClose} maxWidth='max-w-4xl'>
             <div className='flex min-h-[400px]'>
@@ -28,6 +52,8 @@ export const TextTileEditor: React.FC<{
                 <div className='flex-1 p-6 border-r'>
                     <h2 className='mb-4 text-xl font-bold'>Edit text tile</h2>
 
+                    {renderTextArea()}
+
                     <div className='mb-4'>
                         <label className='block mb-2 text-sm font-medium'>Font Size</label>
                         <input

From df3d9c15ba3abd9540c78d6e26b71966220a6ad9 Mon Sep 17 00:00:00 2001
From: Joshua Rose <joshua.rose@squaredup.com>
Date: Mon, 22 Sep 2025 14:59:12 +0100
Subject: [PATCH 2/2] Implement save functionality with API call

---
 text-tile/TextTileEditor.tsx | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/text-tile/TextTileEditor.tsx b/text-tile/TextTileEditor.tsx
index e20b226..b7fdf0d 100644
--- a/text-tile/TextTileEditor.tsx
+++ b/text-tile/TextTileEditor.tsx
@@ -2,7 +2,7 @@ import Modal, { ModalButtons } from 'components/Modal';
 import Button from 'components/button/Button';
 import { TextTileConfig } from 'dashboard-engine/tiles/text';
 import type { TextConfig } from 'dashboard-engine/visualisations/Text/Config';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { TextPreview } from './TextPreview';
 
 /**
@@ -20,6 +20,7 @@ export const TextTileEditor: React.FC<{
     const [content, setContent] = useState('');
     const [fontSize, setFontSize] = useState();
     const [align, setAlign] = useState<TextConfig['align']>('left');
+    const [isSaving, setIsSaving] = useState(false);
 
     useEffect(() => {
         console.log('Setting default values');
@@ -31,6 +32,34 @@ export const TextTileEditor: React.FC<{
         }
     }, []);
 
+    const handleSave = async () => {
+        setIsSaving(true);
+
+        try {
+            const response = await fetch('/api/text-tile/save', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    id: config.id,
+                    content,
+                    fontSize,
+                    align
+                })
+            });
+
+            if (response.ok) {
+                console.log('Saved successfully');
+                onClose();
+            } else {
+                console.error('Save failed');
+            }
+        } catch (error) {
+            console.error('Network error:', error);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
     const renderTextArea = () => {
         return (
             <div className='mb-4'>
@@ -88,8 +117,8 @@ export const TextTileEditor: React.FC<{
                         <Button type='button' onClick={onClose} variant='tertiary'>
                             Cancel
                         </Button>
-                        <Button type='button' onClick={() => onClose()}>
-                            Save
+                        <Button type='button' onClick={handleSave} disabled={isSaving}>
+                            {isSaving ? 'Saving...' : 'Save'}
                         </Button>
                     </ModalButtons>
                 </div>