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

    r298f9b3 r50f2fb4  
    1515import { useState } from 'react';
    1616import documentsData from '@/data/documents.json';
     17import { useTranslation } from 'react-i18next';
    1718
    1819interface TableCellProps {
    … …  
    2829
    2930const StatusBadge = ({ status }: { status: string }) => {
    30   if (status === "approved") {
     31  const { t } = useTranslation();
     32  if (status === t('approved', 'Одобрено')) {
    3133    return (
    3234      <span className="inline-flex items-center justify-center w-8 h-8 bg-green-100 text-green-600 rounded-full">
    … …  
    4345
    4446const PriceBadge = ({ price }: { price: number }) => {
     47  const { t } = useTranslation();
    4548  if (price === 0) {
    46     return <span className="font-medium text-green-600">0,00</span>;
     49    return <span className="font-medium text-green-600">{t('free', '0,00')}</span>;
    4750  }
    4851  return <span className="font-medium text-blue-600">{price.toFixed(2)}</span>;
    … …  
    5558  const [currentPage, setCurrentPage] = useState(1);
    5659  const [recordsPerPage, setRecordsPerPage] = useState(15);
     60  const { t } = useTranslation();
    5761
    5862  const selectedDocument = documentsData.documentTypes.find(d => d.id === selectedDocumentType);
    … …  
    7377          </div>
    7478          <div>
    75             <h1 className="text-3xl font-bold mb-2">Документи</h1>
     79            <h1 className="text-3xl font-bold mb-2">{t('documents')}</h1>
    7680            <p className="text-lg opacity-90">
    77               Барање и преглед на документи
     81              {t('documents_overview', 'Преглед на вашите документи и нивниот статус.')}
    7882            </p>
    7983          </div>
    … …  
    8589        <h2 className="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2">
    8690          <FontAwesomeIcon icon={faFileText} className="text-primary" />
    87           Ново барање за документ
     91          {t('new_document_request', 'Ново барање за документ')}
    8892        </h2>
    8993       
    … …  
    9296          <div>
    9397            <label className="block text-sm font-medium text-gray-700 mb-2">
    94               Изберете документ:
     98              {t('select_document', 'Избери документ')}:
    9599            </label>
    96100            <div className="relative">
    … …  
    101105                <div className="flex items-center justify-between">
    102106                  <span className="text-sm text-gray-900 truncate">
    103                     {selectedDocument?.name || "Изберете документ"}
     107                    {selectedDocument ? t(selectedDocument.id) : t('select_document', 'Избери документ')}
    104108                  </span>
    105109                  <FontAwesomeIcon
    … …  
    121125                      className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 border-b border-gray-100 last:border-b-0"
    122126                    >
    123                       <div className="font-medium text-gray-900">{docType.name}</div>
     127                      <div className="font-medium text-gray-900">{t(docType.id)}</div>
    124128                      {docType.price > 0 && (
    125                         <div className="text-xs text-blue-600 mt-1">Цена: {docType.price} мкд</div>
     129                        <div className="text-xs text-blue-600 mt-1">{t('price', 'Цена')}: {docType.price} мкд</div>
    126130                      )}
    127131                    </button>
    … …  
    135139          <div>
    136140            <label className="block text-sm font-medium text-gray-700 mb-2">
    137               Коментар:
     141              {t('comment', 'Коментар')}:
    138142            </label>
    139143            <textarea
    … …  
    142146              rows={4}
    143147              className="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary resize-none"
    144               placeholder="Додајте коментар..."
     148              placeholder={t('add_comment', 'Додај коментар')}
    145149            />
    146150          </div>
    … …  
    153157          >
    154158            <FontAwesomeIcon icon={faFileText} className="w-4 h-4" />
    155             Внеси
     159            {t('submit', 'Поднеси')}
    156160          </button>
    157161        </div>
    … …  
    161165      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    162166        <div className="bg-primary text-white px-6 py-4">
    163           <h2 className="text-xl font-bold">Мои документи</h2>
     167          <h2 className="text-xl font-bold">{t('my_documents', 'Мои документи')}</h2>
    164168        </div>
    165169       
    … …  
    169173              <tr>
    170174                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
    171                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Архива</th>
    172                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Датум</th>
    173                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Барање</th>
    174                 <th className="px-4 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Цена</th>
    175                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Платено</th>
    176                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Документ</th>
    177                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Плати онлајн</th>
    178                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
    179                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Коментар</th>
     175                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('archive', 'Архива')}</th>
     176                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date', 'Датум')}</th>
     177                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('request', 'Барање')}</th>
     178                <th className="px-4 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{t('price', 'Цена')}</th>
     179                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('paid', 'Платено')}</th>
     180                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('document', 'Документ')}</th>
     181                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('pay_online', 'Плати онлајн')}</th>
     182                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status', 'Статус')}</th>
     183                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('comment', 'Коментар')}</th>
    180184              </tr>
    181185            </thead>
    … …  
    187191                  <TableCell className="text-gray-600">{document.date}</TableCell>
    188192                  <TableCell className="font-medium text-gray-900 max-w-xs">
    189                     {document.request}
     193                    {t(document.request)}
    190194                  </TableCell>
    191195                  <TableCell className="text-right">
    … …  
    206210                      <FontAwesomeIcon icon={faCheckCircle} className="w-5 h-5 text-green-600" />
    207211                    ) : (
    208                       <span className="text-gray-400">—</span>
     212                      <span className="text-gray-400">{t('none', '—')}</span>
    209213                    )}
    210214                  </TableCell>
    … …  
    214218                  <TableCell>
    215219                    {document.comment || (
    216                       <span className="text-gray-400">—</span>
     220                      <span className="text-gray-400">{t('none', '—')}</span>
    217221                    )}
    218222                  </TableCell>
    … …  
    227231          <div className="flex items-center gap-4 text-sm text-gray-700">
    228232            <div className="flex items-center gap-2">
    229               <span>Прикажи редови:</span>
     233              <span>{t('show_rows', 'Прикажи редови')}:</span>
    230234              <select
    231235                value={recordsPerPage}
    … …  
    239243            </div>
    240244            <div>
    241               Страна <input
     245              {t('page', 'Страница')} <input
    242246                type="number"
    243247                min="1"
    … …  
    246250                onChange={(e) => setCurrentPage(Number(e.target.value))}
    247251                className="w-12 border border-gray-300 rounded px-2 py-1 text-sm text-center focus:outline-none focus:ring-1 focus:ring-primary"
    248               /> од {totalPages}
     252              /> {t('of', 'од')} {totalPages}
    249253            </div>
    250254          </div>
    … …  
    266270            </button>
    267271            <span className="px-4 py-2 bg-primary text-white rounded text-sm font-medium">
    268               Прва
     272              {t('first', 'Прва')}
    269273            </span>
    270274            <button
    … …  
    283287            </button>
    284288            <span className="ml-4 text-sm text-gray-700">
    285               Последна
     289              {t('last', 'Последна')}
    286290            </span>
    287291          </div>
    288292
    289293          <div className="text-sm text-gray-700">
    290             Вкупно: {documents.length}
     294            {t('total', 'Вкупно')}: {documents.length}
    291295          </div>
    292296        </div>
    … …  
    297301            <FontAwesomeIcon icon={faMoneyBillWave} className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
    298302            <p className="text-sm text-blue-800 leading-relaxed">
    299               {paymentInfo}
     303              {t('documents_payment_info', paymentInfo)}
    300304            </p>
    301305          </div>
    … …  
    311315            </div>
    312316            <div>
    313               <h3 className="text-lg font-bold text-gray-900">Вкупно документи</h3>
     317              <h3 className="text-lg font-bold text-gray-900">{t('total_documents', 'Вкупно документи')}</h3>
    314318              <p className="text-2xl font-bold text-blue-600">
    315319                {documents.length}
    … …  
    325329            </div>
    326330            <div>
    327               <h3 className="text-lg font-bold text-gray-900">Одобрени</h3>
     331              <h3 className="text-lg font-bold text-gray-900">{t('approved', 'Одобрени')}</h3>
    328332              <p className="text-2xl font-bold text-green-600">
    329333                {documents.filter(doc => doc.status === "approved").length}
    … …  
    339343            </div>
    340344            <div>
    341               <h3 className="text-lg font-bold text-gray-900">Вкупна цена</h3>
     345              <h3 className="text-lg font-bold text-gray-900">{t('total_price', 'Вкупна цена')}</h3>
    342346              <p className="text-2xl font-bold text-yellow-600">
    343                 {documents.reduce((sum, doc) => sum + doc.price, 0).toFixed(2)} мкд
     347                {documents.reduce((sum, doc) => sum + doc.price, 0).toFixed(2)} {t('mkd', 'мкд')}
    344348              </p>
    345349            </div>
Note: See TracChangeset for help on using the changeset viewer.