Changeset 50f2fb4 for src/app/students/semesters/page.tsx

Timestamp:

01/30/26 01:40:27 (8 months ago)

Author:

Stefan-Saveski <stefansaveski19@…>

Branches:

master

Children:

ba52069

Parents:

298f9b3

Message:

Added dual language feature.

File:

• src/app/students/semesters/page.tsx (modified) (12 diffs)

src/app/students/semesters/page.tsx

@@ -14 +14 @@
 import { useEffect, useState } from 'react';
 import { getAccessToken } from '@/lib/auth';
+import { useTranslation } from 'react-i18next';
 
 type Semester = {
@@ -54 +55 @@
 
 const StatusBadge = ({ status }: { status: string }) => {
+  const { t } = useTranslation();
   const baseClasses = "px-2 py-1 rounded-full text-xs font-medium";
-  
-  if (status === "валиден") {
+  if (status === t('valid')) {
     return (
       <span className={`${baseClasses} bg-green-100 text-green-800 flex items-center gap-1`}>
         <FontAwesomeIcon icon={faCheckCircle} className="w-3 h-3" />
-        {status}
+        {t('valid')}
       </span>
     );
   }
-  
   return (
     <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
-      {status}
+      {t(status) || status}
     </span>
   );
@@ -73 +73 @@
 
 const YesNoBadge = ({ value }: { value: string }) => {
-  if (value === "Да") {
+  const { t } = useTranslation();
+  if (value === t('yes')) {
     return (
       <span className="inline-flex items-center justify-center w-6 h-6 bg-green-100 text-green-600 rounded-full">
@@ -79 +80 @@
       </span>
     );
-  } else if (value === "Не") {
+  } else if (value === t('no')) {
     return (
       <span className="inline-flex items-center justify-center w-6 h-6 bg-red-100 text-red-600 rounded-full">
@@ -112 +113 @@
   const [isLoading, setIsLoading] = useState(true);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const { t } = useTranslation();
 
   useEffect(() => {
@@ -162 +164 @@
       <div className="min-h-screen pb-8">
         <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
-          Loading...
+          {t('loading')}
         </div>
       </div>
@@ -187 +189 @@
           </div>
           <div>
-            <h1 className="text-3xl font-bold mb-2">Семестри</h1>
+            <h1 className="text-3xl font-bold mb-2">{t('semesters')}</h1>
             <p className="text-lg opacity-90">
-              Преглед на сите запишани семестри и нивниот статус
+              {t('semesters_overview')}
             </p>
           </div>
@@ -198 +200 @@
       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
         <div className="bg-primary text-white px-6 py-4">
-          <h2 className="text-xl font-bold">Листа на семестри</h2>
+          <h2 className="text-xl font-bold">{t('semesters_list')}</h2>
         </div>
         
@@ -206 +208 @@
               <tr>
                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Семестар</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Насока</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Квота</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Забелешка</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Студ.Ком.</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сума</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Платено</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">УКИМ</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Креирано на</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Датум промена</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ц.Кр</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Тип</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Док.</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Док1.</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Вериф.</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Таксени</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Потписи</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Зав.</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('semester')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('direction')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('quota')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('note')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('student_com')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('sum')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('paid')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('ukim')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('created_on')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date_changed')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('credits')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('type')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('doc')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('doc1')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('verified')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('taxes')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('signatures')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('completed')}</th>
               </tr>
             </thead>
@@ -335 +337 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">Завршени семестри</h3>
+              <h3 className="text-lg font-bold text-gray-900">{t('completed_semesters')}</h3>
               <p className="text-2xl font-bold text-green-600">
                 {semesters.filter(s => s.completed !== "Не").length}
@@ -349 +351 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">Верифицирани</h3>
+              <h3 className="text-lg font-bold text-gray-900">{t('verified_semesters')}</h3>
               <p className="text-2xl font-bold text-blue-600">
                 {semesters.filter(s => s.verified === "Да").length}
@@ -363 +365 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">Вкупно семестри</h3>
+              <h3 className="text-lg font-bold text-gray-900">{t('total_semesters')}</h3>
               <p className="text-2xl font-bold text-primary">
                 {semesters.length}