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/subjects/page.tsx

    r298f9b3 r50f2fb4  
    99import { useEffect, useState } from 'react';
    1010import { getAccessToken } from '@/lib/auth';
     11import { useTranslation } from 'react-i18next';
    1112
    1213interface Subject {
    … …  
    147148
    148149const StatusBadge = ({ status }: { status: string }) => {
     150  const { t } = useTranslation();
    149151  const baseClasses = "px-3 py-1 rounded-md text-xs font-medium";
    150  
    151   if (status === "Зад.") {
     152  if (status === t('mandatory_short')) {
    152153    return (
    153154      <span className={`${baseClasses} bg-blue-100 text-blue-800`}>
    154         {status}
     155        {t('mandatory_short')}
    155156      </span>
    156157    );
    157   } else if (status === "Изб.") {
     158  } else if (status === t('elective_short')) {
    158159    return (
    159160      <span className={`${baseClasses} bg-green-100 text-green-800`}>
    160         {status}
     161        {t('elective_short')}
    161162      </span>
    162163    );
    163164  }
    164  
    165165  return (
    166166    <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
    167       {status}
     167      {t(status) || status}
    168168    </span>
    169169  );
    … …  
    176176  const [isLoading, setIsLoading] = useState(true);
    177177  const [errorMessage, setErrorMessage] = useState<string | null>(null);
     178  const { t } = useTranslation();
    178179
    179180  useEffect(() => {
    … …  
    275276      <div className="min-h-screen pb-8">
    276277        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    277           Loading...
     278          {t('loading')}
    278279        </div>
    279280      </div>
    … …  
    285286      <div className="min-h-screen pb-8">
    286287        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
    287           {errorMessage ?? 'Failed to load subjects.'}
     288          {errorMessage ?? t('failed_to_load_subjects')}
    288289        </div>
    289290      </div>
    … …  
    308309          </div>
    309310          <div>
    310             <h1 className="text-3xl font-bold mb-2">Предмети</h1>
     311            <h1 className="text-3xl font-bold mb-2">{t('subjects')}</h1>
    311312            <p className="text-lg opacity-90">
    312               Преглед на запишани предмети по семестри
     313              {t('subjects_overview')}
    313314            </p>
    314315          </div>
    … …  
    325326          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
    326327            <div className="text-sm text-gray-600 mb-2">
    327               Статус: <span className="text-primary font-semibold">Запишан од студент</span>
     328              {t('status')}: <span className="text-primary font-semibold">{t('enrolled_by_student')}</span>
    328329            </div>
    329330            <div className="text-sm text-gray-600">
    330               Број на тикет: <span className="font-semibold">{currentSemester.ticketNumber}</span>
     331              {t('ticket_number')}: <span className="font-semibold">{currentSemester.ticketNumber}</span>
    331332            </div>
    332333          </div>
    … …  
    335336          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
    336337            <div className="text-sm text-gray-600 mb-2">
    337               Долг од документи: <span className="font-semibold">{currentSemester.debt}</span>
     338              {t('debt_from_documents')}: <span className="font-semibold">{currentSemester.debt}</span>
    338339            </div>
    339340           
    340341            <div className="relative mt-4">
    341342              <label className="block text-sm font-medium text-gray-700 mb-2">
    342                 Избери семестар:
     343                {t('select_semester')}:
    343344              </label>
    344345              <div className="relative">
    … …  
    370371                      >
    371372                        <div className="font-medium text-gray-900">{semester.name}</div>
    372                         <div className="text-xs text-gray-500">Статус: {semester.status}</div>
     373                        <div className="text-xs text-gray-500">{t('status')}: {semester.status}</div>
    373374                      </button>
    374375                    ))}
    … …  
    380381            <div className="mt-4 text-sm">
    381382              <div className="text-primary font-medium">
    382                 Сериски број: {currentSemesterData.serviceNumber}
     383                {t('serial_number')}: {currentSemesterData.serviceNumber}
    383384              </div>
    384385            </div>
    … …  
    389390            <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
    390391              <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
    391               Запишани предмети
     392              {t('enrolled_subjects')}
    392393            </h3>
    393394            <div className="text-3xl font-bold text-primary">
    … …  
    403404              <h2 className="text-xl font-bold flex items-center gap-2">
    404405                <FontAwesomeIcon icon={faFileInvoice} />
    405                 Финансиски информации
     406                {t('financial_info')}
    406407              </h2>
    407408            </div>
    … …  
    413414                <div className="space-y-4">
    414415                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
    415                     <span className="text-gray-600">Сума:</span>
     416                    <span className="text-gray-600">{t('sum')}:</span>
    416417                    <span className="font-semibold text-primary">{currentSemester.financialInfo.sum}</span>
    417418                  </div>
    418419                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
    419                     <span className="text-gray-600">Платено:</span>
     420                    <span className="text-gray-600">{t('paid')}:</span>
    420421                    <span className="font-semibold text-green-600">{currentSemester.financialInfo.paid}</span>
    421422                  </div>
    422423                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
    423                     <span className="text-gray-600">Должи:</span>
     424                    <span className="text-gray-600">{t('due')}:</span>
    424425                    <span className="font-semibold text-red-600">{currentSemester.financialInfo.due}</span>
    425426                  </div>
    426427                  <div className="mt-4 p-4 bg-blue-50 rounded-lg">
    427                     <div className="text-sm font-medium text-blue-800 mb-1">Материјални трошоци:</div>
    428                     <div className="text-sm text-blue-700">{currentSemester.financialInfo.materialCosts}</div>
     428                    <div className="text-sm font-medium text-blue-800 mb-1">{t('material_costs')}:</div>
     429                    <div className="text-sm text-blue-700">{t('material_costs_info')}</div>
    429430                  </div>
    430431                </div>
    … …  
    433434                <div className="space-y-4">
    434435                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
    435                     <span className="text-gray-600">Кредити:</span>
     436                    <span className="text-gray-600">{t('credits')}:</span>
    436437                    <span className="font-semibold text-primary">{currentSemester.financialInfo.credits}</span>
    437438                  </div>
    438439                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
    439                     <span className="text-gray-600">МКСА:</span>
     440                    <span className="text-gray-600">{t('mksa')}:</span>
    440441                    <span className="font-semibold">{currentSemester.financialInfo.MKSA}</span>
    441442                  </div>
    442443                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
    443                     <span className="text-gray-600">Електронско запишување:</span>
     444                    <span className="text-gray-600">{t('electronic_registration')}:</span>
    444445                    <span className="font-semibold">{currentSemester.financialInfo.electronicRegistration}</span>
    445446                  </div>
    446447                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
    447                     <span className="text-gray-600">Е-УКИМ:</span>
     448                    <span className="text-gray-600">{t('eukim')}:</span>
    448449                    <span className="font-semibold">{currentSemester.financialInfo.eUKIM}</span>
    449450                  </div>
    450451                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
    451                     <span className="text-gray-600">Банкарска провизија:</span>
     452                    <span className="text-gray-600">{t('bank_provision')}:</span>
    452453                    <span className="font-semibold">{currentSemester.financialInfo.bankProvision}</span>
    453454                  </div>
    454455                  <div className="flex justify-between items-center py-3 border-t-2 border-primary bg-primary bg-opacity-5 rounded-lg px-4">
    455                     <span className="font-bold text-white">Тотал:</span>
     456                    <span className="font-bold text-white">{t('total')}:</span>
    456457                    <span className="font-bold text-xl text-white">{currentSemester.financialInfo.total}</span>
    457458                  </div>
    … …  
    466467      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    467468        <div className="bg-primary text-white px-6 py-4">
    468           <h2 className="text-xl font-bold">Листа на предмети</h2>
     469          <h2 className="text-xl font-bold">{t('subjects_list')}</h2>
    469470        </div>
    470471       
    … …  
    474475              <tr>
    475476                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
    476                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Код</th>
    477                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Часови</th>
    478                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Кој пат</th>
    479                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Предмет</th>
    480                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Семестар</th>
    481                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
    482                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Потпис</th>
    483                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Група</th>
    484                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Професор</th>
     477                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('code')}</th>
     478                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('hours')}</th>
     479                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('which_time')}</th>
     480                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('subject')}</th>
     481                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('semester')}</th>
     482                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status')}</th>
     483                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('signature')}</th>
     484                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('group')}</th>
     485                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('professor')}</th>
    485486              </tr>
    486487            </thead>
    … …  
    495496                    <div className="flex items-center gap-2">
    496497                      <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
    497                       {subject.name}
     498                      {t(subject.name, subject.name)}
    498499                    </div>
    499500                  </TableCell>
    500                   <TableCell className="text-center font-medium text-primary">{subject.semester}</TableCell>
     501                  <TableCell className="text-center font-medium text-primary">{t(subject.semester.toString(), subject.semester.toString())}</TableCell>
    501502                  <TableCell>
    502503                    <StatusBadge status={subject.status} />
    503504                  </TableCell>
    504505                  <TableCell className="text-center">
    505                     {subject.signature || (
     506                    {subject.signature ? t(subject.signature, subject.signature) : (
    506507                      <span className="text-gray-400">—</span>
    507508                    )}
    508509                  </TableCell>
    509510                  <TableCell className="text-center">
    510                     {subject.group || (
     511                    {subject.group ? t(subject.group, subject.group) : (
    511512                      <span className="text-gray-400">—</span>
    512513                    )}
    513514                  </TableCell>
    514515                  <TableCell>
    515                     {subject.professor || (
     516                    {subject.professor ? t(subject.professor, subject.professor) : (
    516517                      <span className="text-gray-400">—</span>
    517518                    )}
Note: See TracChangeset for help on using the changeset viewer.