Add separate 'Add New Image' function for week 3+ with size and alignment options

client/src/pages/WeeklyPractice.tsx

@@ -24,6 +24,8 @@ interface WeeklyPractice {
   translationBrief?: string;
   imageUrl?: string;
   imageAlt?: string;
+  imageSize?: number;
+  imageAlignment?: 'left' | 'center' | 'right';
 }
 
 interface WeeklyPracticeWeek {
@@ -96,6 +98,7 @@ const WeeklyPractice: React.FC = () => {
   const [editingPractice, setEditingPractice] = useState<string | null>(null);
   const [editingBrief, setEditingBrief] = useState<{[key: number]: boolean}>({});
   const [addingPractice, setAddingPractice] = useState<boolean>(false);
+  const [addingImage, setAddingImage] = useState<boolean>(false);
   const [editForm, setEditForm] = useState<{
     content: string;
     translationBrief: string;
@@ -107,6 +110,17 @@ const WeeklyPractice: React.FC = () => {
     imageUrl: '',
     imageAlt: ''
   });
+  const [imageForm, setImageForm] = useState<{
+    imageUrl: string;
+    imageAlt: string;
+    imageSize: number;
+    imageAlignment: 'left' | 'center' | 'right';
+  }>({
+    imageUrl: '',
+    imageAlt: '',
+    imageSize: 200,
+    imageAlignment: 'center'
+  });
   const [saving, setSaving] = useState(false);
   const [uploading, setUploading] = useState(false);
   const navigate = useNavigate();
@@ -1048,6 +1062,26 @@ const WeeklyPractice: React.FC = () => {
     });
   };
 
+  const startAddingImage = () => {
+    setAddingImage(true);
+    setImageForm({
+      imageUrl: '',
+      imageAlt: '',
+      imageSize: 200,
+      imageAlignment: 'center'
+    });
+  };
+
+  const cancelAddingImage = () => {
+    setAddingImage(false);
+    setImageForm({
+      imageUrl: '',
+      imageAlt: '',
+      imageSize: 200,
+      imageAlignment: 'center'
+    });
+  };
+
   const saveNewPractice = async () => {
     try {
       setSaving(true);
@@ -1101,6 +1135,50 @@ const WeeklyPractice: React.FC = () => {
     }
   };
 
+  const saveNewImage = async () => {
+    try {
+      setSaving(true);
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+        return;
+      }
+
+      if (!imageForm.imageUrl.trim()) {
+        return;
+      }
+
+      const payload = {
+        title: `Week ${selectedWeek} Image Practice`,
+        content: 'Image-based practice',
+        sourceLanguage: 'English',
+        weekNumber: selectedWeek,
+        category: 'weekly-practice',
+        imageUrl: imageForm.imageUrl.trim(),
+        imageAlt: imageForm.imageAlt.trim() || null,
+        imageSize: imageForm.imageSize,
+        imageAlignment: imageForm.imageAlignment
+      };
+
+      console.log('Saving new image with payload:', payload);
+
+      const response = await api.post('/api/auth/admin/weekly-practice', payload);
+
+      if (response.data) {
+        console.log('Image saved successfully:', response.data);
+        await fetchWeeklyPractice(false);
+        setAddingImage(false);
+      } else {
+        console.error('Failed to save image');
+      }
+    } catch (error) {
+      console.error('Failed to add image practice:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
   const deletePractice = async (practiceId: string) => {
     const user = JSON.parse(localStorage.getItem('user') || '{}');
     
@@ -1674,6 +1752,113 @@ const WeeklyPractice: React.FC = () => {
                     )}
                   </div>
                 </div>
+              ) : addingImage ? (
+                <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6 w-full">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-2">
+                      <div className="bg-blue-100 rounded-full p-2">
+                        <PlusIcon className="h-5 w-5 text-blue-600" />
+                      </div>
+                      <h3 className="text-lg font-semibold text-gray-900">Add New Image</h3>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <button
+                        onClick={saveNewImage}
+                        disabled={saving}
+                        className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2"
+                      >
+                        {saving ? (
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                        ) : (
+                          <>
+                            <CheckIcon className="h-4 w-4" />
+                            <span>Save Image</span>
+                          </>
+                        )}
+                      </button>
+                      <button
+                        onClick={cancelAddingImage}
+                        className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2"
+                      >
+                        <XMarkIcon className="h-4 w-4" />
+                        <span>Cancel</span>
+                      </button>
+                    </div>
+                  </div>
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
+                      <input
+                        type="text"
+                        value={imageForm.imageUrl}
+                        onChange={(e) => setImageForm({...imageForm, imageUrl: e.target.value})}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="Enter image URL..."
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Image Alt Text</label>
+                      <input
+                        type="text"
+                        value={imageForm.imageAlt}
+                        onChange={(e) => setImageForm({...imageForm, imageAlt: e.target.value})}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="Enter alt text for accessibility..."
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Upload Local Image</label>
+                      <input
+                        type="file"
+                        accept="image/*"
+                        onChange={async (e) => {
+                          const file = e.target.files?.[0];
+                          if (file) {
+                            try {
+                              const imageUrl = await handleFileUpload(file);
+                              setImageForm({ ...imageForm, imageUrl });
+                            } catch (error) {
+                              console.error('Error uploading file:', error);
+                            }
+                          }
+                        }}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      />
+                      {uploading && (
+                        <div className="mt-2 text-sm text-blue-600">
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 inline-block mr-2"></div>
+                          Uploading...
+                        </div>
+                      )}
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Image Size</label>
+                        <select
+                          value={imageForm.imageSize}
+                          onChange={(e) => setImageForm({...imageForm, imageSize: parseInt(e.target.value)})}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                          <option value={150}>150px</option>
+                          <option value={200}>200px</option>
+                          <option value={300}>300px</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Alignment</label>
+                        <select
+                          value={imageForm.imageAlignment}
+                          onChange={(e) => setImageForm({...imageForm, imageAlignment: e.target.value as 'left' | 'center' | 'right'})}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                          <option value="left">Left</option>
+                          <option value="center">Center</option>
+                          <option value="right">Right</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               ) : (
                 <div className="bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl p-6 border border-orange-200 border-dashed">
                   <div className="flex items-center justify-between">
@@ -1686,13 +1871,24 @@ const WeeklyPractice: React.FC = () => {
                         <p className="text-orange-700 text-sm">Create a new practice example for Week {selectedWeek}</p>
                       </div>
                     </div>
-                    <button
-                      onClick={startAddingPractice}
-                      className="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg transition-colors duration-200 flex items-center space-x-2 shadow-lg hover:shadow-xl"
-                    >
-                      <PlusIcon className="h-5 w-5" />
-                      <span className="font-medium">Add Practice</span>
-                    </button>
+                    <div className="flex space-x-3">
+                      <button
+                        onClick={startAddingPractice}
+                        className="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg transition-colors duration-200 flex items-center space-x-2 shadow-lg hover:shadow-xl"
+                      >
+                        <PlusIcon className="h-5 w-5" />
+                        <span className="font-medium">Add Practice</span>
+                      </button>
+                      {selectedWeek >= 3 && (
+                        <button
+                          onClick={startAddingImage}
+                          className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors duration-200 flex items-center space-x-2 shadow-lg hover:shadow-xl"
+                        >
+                          <PlusIcon className="h-5 w-5" />
+                          <span className="font-medium">Add Image</span>
+                        </button>
+                      )}
+                    </div>
                   </div>
                 </div>
               )}
@@ -1830,16 +2026,32 @@ const WeeklyPractice: React.FC = () => {
                     ) : (
                       <div>
                         {practice.imageUrl && selectedWeek >= 3 ? (
-                          <div className="flex flex-col md:flex-row gap-6 items-start">
-                            {/* Image on the left - 50% width */}
-                            <div className="w-full md:w-1/2 flex justify-center">
+                          <div className={`flex flex-col md:flex-row gap-6 items-start ${
+                            practice.imageAlignment === 'left' ? 'md:flex-row' : 
+                            practice.imageAlignment === 'right' ? 'md:flex-row-reverse' : 
+                            'md:flex-col'
+                          }`}>
+                            {/* Image with dynamic alignment */}
+                            <div className={`${
+                              practice.imageAlignment === 'left' ? 'w-full md:w-1/2' :
+                              practice.imageAlignment === 'right' ? 'w-full md:w-1/2' :
+                              'w-full'
+                            } flex ${
+                              practice.imageAlignment === 'left' ? 'justify-start' :
+                              practice.imageAlignment === 'right' ? 'justify-end' :
+                              'justify-center'
+                            }`}>
                               {practice.imageUrl.startsWith('data:') ? (
                                 <div className="inline-block rounded-lg shadow-md overflow-hidden">
                                   <img 
                                     src={practice.imageUrl} 
                                     alt={practice.imageAlt || 'Uploaded image'}
                                     className="w-full h-auto"
-                                    style={{ height: '200px', width: 'auto', objectFit: 'contain' }}
+                                    style={{ 
+                                      height: `${practice.imageSize || 200}px`, 
+                                      width: 'auto', 
+                                      objectFit: 'contain' 
+                                    }}
                                     onError={(e) => {
                                       console.error('Error loading image:', e);
                                       e.currentTarget.style.display = 'none';
@@ -1860,10 +2072,16 @@ const WeeklyPractice: React.FC = () => {
                                 </div>
                               )}
                             </div>
-                            {/* Text on the right - 50% width */}
-                            <div className="w-full md:w-1/2">
-                              <p className="text-orange-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</p>
-                            </div>
+                            {/* Text with conditional display */}
+                            {practice.content && practice.content !== 'Image-based practice' && (
+                              <div className={`${
+                                practice.imageAlignment === 'left' ? 'w-full md:w-1/2' :
+                                practice.imageAlignment === 'right' ? 'w-full md:w-1/2' :
+                                'w-full'
+                              }`}>
+                                <p className="text-orange-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</p>
+                              </div>
+                            )}
                           </div>
                         ) : (
                           <p className="text-orange-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</p>

server/models/SourceText.js

@@ -28,6 +28,8 @@ const sourceTextSchema = new mongoose.Schema({
   translationBrief: { type: String },
   imageUrl: { type: String },
   imageAlt: { type: String },
+  imageSize: { type: Number, default: 200 },
+  imageAlignment: { type: String, enum: ['left', 'center', 'right'], default: 'center' },
   culturalElements: [culturalElementSchema],
   difficulty: { 
     type: String, 

server/routes/auth.js

@@ -496,7 +496,9 @@ router.post('/admin/weekly-practice', authenticateToken, async (req, res) => {
       culturalElements: culturalElements || [],
       sourceType: 'weekly-practice',
       imageUrl: req.body.imageUrl || null,
-      imageAlt: req.body.imageAlt || null
+      imageAlt: req.body.imageAlt || null,
+      imageSize: req.body.imageSize || 200,
+      imageAlignment: req.body.imageAlignment || 'center'
     });
     
     const savedPractice = await newWeeklyPractice.save();