Ignore:
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:
1 edited

Legend:

Unmodified
Added
Removed

  • src/app/students/applications/page.tsx

    r298f9b3 r50f2fb4  
    1414} from '@fortawesome/free-solid-svg-icons';
    1515import { useState } from 'react';
     16import { useTranslation } from 'react-i18next';
    1617import applicationsData from '@/data/applications.json';
    1718
    … …  
    2829
    2930const CompletedBadge = ({ completed }: { completed: string }) => {
    30   if (completed === "Да") {
    31     return (
    32       <span className="inline-flex items-center justify-center w-6 h-6 bg-green-100 text-green-600 rounded-full">
     31  const { t } = useTranslation();
     32  if (completed === t('yes', 'Да')) {
     33    return (
     34      <span className="inline-flex items-center justify-center w-6 h-6 bg-green-100 text-green-600 rounded-full" title={t('completed')}>
    3335        <FontAwesomeIcon icon={faCheckCircle} className="w-4 h-4" />
    3436      </span>
    … …  
    3638  } else {
    3739    return (
    38       <span className="inline-flex items-center justify-center w-6 h-6 bg-red-100 text-red-600 rounded-full">
     40      <span className="inline-flex items-center justify-center w-6 h-6 bg-red-100 text-red-600 rounded-full" title={t('not_completed')}>
    3941        <FontAwesomeIcon icon={faTimesCircle} className="w-4 h-4" />
    4042      </span>
    … …  
    6466
    6567export default function ApplicationsPage() {
     68  const { t } = useTranslation();
    6669  const [selectedSession, setSelectedSession] = useState(applicationsData.currentSession.id);
    6770  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    68  
     71
    6972  const currentSessionData = applicationsData.examSessions.find(s => s.id === selectedSession) || applicationsData.currentSession;
    7073  const { applications } = applicationsData;
    … …  
    7982          </div>
    8083          <div>
    81             <h1 className="text-3xl font-bold mb-2">Пријави</h1>
     84            <h1 className="text-3xl font-bold mb-2">{t('applications_header', 'Пријави')}</h1>
    8285            <p className="text-lg opacity-90">
    83               Електронски пријави за испити
     86              {t('applications_subheader', 'Електронски пријави за испити')}
    8487            </p>
    8588          </div>
    … …  
    9295          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
    9396            <FontAwesomeIcon icon={faCalendarAlt} className="text-primary" />
    94             Избери испитна сесија:
     97            {t('select_exam_session', 'Избери испитна сесија:')}
    9598          </h2>
    96          
     99
    97100          <div className="relative">
    98101            <button
    … …  
    102105              <div className="flex items-center justify-between">
    103106                <span className="text-sm font-medium text-primary">
    104                   {currentSessionData.name}
     107                  {t(currentSessionData.id, currentSessionData.name)}
    105108                </span>
    106                 <FontAwesomeIcon 
    107                   icon={faChevronDown} 
     109                <FontAwesomeIcon
     110                  icon={faChevronDown}
    108111                  className={`w-4 h-4 text-gray-400 transition-transform ml-4 ${isDropdownOpen ? 'rotate-180' : ''}`}
    109112                />
    110113              </div>
    111114            </button>
    112            
     115
    113116            {isDropdownOpen && (
    114117              <div className="absolute z-10 right-0 mt-1 w-80 bg-white border border-gray-200 rounded-lg shadow-lg">
    … …  
    122125                    className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
    123126                  >
    124                     <div className="font-medium text-gray-900">{session.name}</div>
    125                     <div className="text-xs text-gray-500">{session.year} - {session.semester} - {session.session}</div>
     127                    <div className="font-medium text-gray-900">{t(session.id, session.name)}</div>
     128                    <div className="text-xs text-gray-500">{session.year} - {t(session.semester, session.semester)} - {t(session.session, session.session)}</div>
    126129                  </button>
    127130                ))}
    … …  
    135138      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    136139        <div className="bg-primary text-white px-6 py-4">
    137           <h2 className="text-xl font-bold">Пријавени испити</h2>
    138         </div>
    139        
     140          <h2 className="text-xl font-bold">{t('registered_exams', 'Пријавени испити')}</h2>
     141        </div>
     142
    140143        <div className="overflow-x-auto">
    141144          <table className="w-full">
    … …  
    143146              <tr>
    144147                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
    145                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сериски број</th>
    146                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Код</th>
    147                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Предмет</th>
    148                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Завршена</th>
    149                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Таксени</th>
    150                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Датум</th>
    151                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Наставник</th>
    152                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Декада</th>
     148                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('serial_number', 'Сериски број')}</th>
     149                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('code', 'Код')}</th>
     150                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('subject', 'Предмет')}</th>
     151                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('completed', 'Завршена')}</th>
     152                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('fee', 'Таксени')}</th>
     153                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date', 'Датум')}</th>
     154                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('instructor', 'Наставник')}</th>
     155                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('decade', 'Декада')}</th>
    153156              </tr>
    154157            </thead>
    … …  
    166169                    <div className="flex items-center gap-2">
    167170                      <FontAwesomeIcon icon={faFileText} className="w-4 h-4 text-primary" />
    168                       {application.subject}
     171                      {t(application.subject, application.subject)}
    169172                    </div>
    170173                  </TableCell>
    … …  
    179182                    <div className="flex items-center gap-2">
    180183                      <FontAwesomeIcon icon={faUser} className="w-4 h-4 text-gray-400" />
    181                       <span className="font-medium text-gray-900">{application.instructor}</span>
     184                      <span className="font-medium text-gray-900">{t(application.instructor, application.instructor)}</span>
    182185                    </div>
    183186                  </TableCell>
    … …  
    194197            <FontAwesomeIcon icon={faInfoCircle} className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
    195198            <div>
    196               <h3 className="font-medium text-blue-900 mb-1">Важна забелешка</h3>
     199              <h3 className="font-medium text-blue-900 mb-1">{t('important_note', 'Важна забелешка')}</h3>
    197200              <p className="text-sm text-blue-800 leading-relaxed">
    198                 {applicationsData.note}
     201                {t('applications_important_note_text')}
    199202              </p>
    200203            </div>
    … …  
    211214            </div>
    212215            <div>
    213               <h3 className="text-lg font-bold text-gray-900">Пријавени испити</h3>
     216              <h3 className="text-lg font-bold text-gray-900">{t('registered_exams', 'Пријавени испити')}</h3>
    214217              <p className="text-2xl font-bold text-blue-600">
    215218                {applications.length}
    … …  
    225228            </div>
    226229            <div>
    227               <h3 className="text-lg font-bold text-gray-900">Завршени</h3>
     230              <h3 className="text-lg font-bold text-gray-900">{t('completed', 'Завршени')}</h3>
    228231              <p className="text-2xl font-bold text-green-600">
    229                 {applications.filter(app => app.completed === "Да").length}
     232                {applications.filter(app => app.completed === t('yes', 'Да')).length}
    230233              </p>
    231234            </div>
    … …  
    239242            </div>
    240243            <div>
    241               <h3 className="text-lg font-bold text-gray-900">Вкупна такса</h3>
     244              <h3 className="text-lg font-bold text-gray-900">{t('total_fee', 'Вкупна такса')}</h3>
    242245              <p className="text-2xl font-bold text-yellow-600">
    243246                {applications.reduce((sum, app) => sum + parseFloat(app.fee.replace(',', '.')), 0).toFixed(2)}
Note: See TracChangeset for help on using the changeset viewer.