Ignore:
Timestamp:
02/13/26 19:32:02 (7 months ago)
Author:
Stefan-Saveski <stefansaveski19@…>
Branches:
master
Children:
d7deae5
Parents:
50f2fb4
Message:

Added dark theme.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r50f2fb4 rba52069  
    2323
    2424const TableCell = ({ children, className = "" }: TableCellProps) => (
    25   <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
     25  <td className={`px-4 py-3 text-sm border-b border-border ${className}`}>
    2626    {children}
    2727  </td>
    … …  
    3838  }
    3939  return (
    40     <span className="inline-flex items-center justify-center w-8 h-8 bg-gray-100 text-gray-600 rounded-full">
     40    <span className="inline-flex items-center justify-center w-8 h-8 bg-accent text-muted-foreground rounded-full">
    4141      <FontAwesomeIcon icon={faFileText} className="w-4 h-4" />
    4242    </span>
    … …  
    7373      <div className="bg-primary text-white rounded-xl p-8 mb-8">
    7474        <div className="flex items-center gap-4">
    75           <div className="bg-white bg-opacity-20 rounded-full p-4">
    76             <FontAwesomeIcon icon={faFilePdf} className="text-3xl text-primary" />
     75          <div className="bg-white rounded-full p-4">
     76            <FontAwesomeIcon icon={faFilePdf} className="text-3xl text-[#0272D1]" />
    7777          </div>
    7878          <div>
    … …  
    8686
    8787      {/* Document Request Form */}
    88       <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-8">
    89         <h2 className="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2">
     88      <div className="bg-card rounded-xl p-6 shadow-sm border border-border mb-8">
     89        <h2 className="text-lg font-semibold text-card-foreground mb-6 flex items-center gap-2">
    9090          <FontAwesomeIcon icon={faFileText} className="text-primary" />
    9191          {t('new_document_request', 'Ново барање за документ')}
    … …  
    9595          {/* Document Type Selection */}
    9696          <div>
    97             <label className="block text-sm font-medium text-gray-700 mb-2">
     97            <label className="block text-sm font-medium text-muted-foreground mb-2">
    9898              {t('select_document', 'Избери документ')}:
    9999            </label>
    … …  
    101101              <button
    102102                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
    103                 className="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
     103                className="w-full bg-card border border-border rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
    104104              >
    105105                <div className="flex items-center justify-between">
    106                   <span className="text-sm text-gray-900 truncate">
     106                  <span className="text-sm text-card-foreground truncate">
    107107                    {selectedDocument ? t(selectedDocument.id) : t('select_document', 'Избери документ')}
    108108                  </span>
    109109                  <FontAwesomeIcon
    110110                    icon={faChevronDown}
    111                     className={`w-4 h-4 text-gray-400 transition-transform ml-2 flex-shrink-0 ${isDropdownOpen ? 'rotate-180' : ''}`}
     111                    className={`w-4 h-4 text-muted-foreground transition-transform ml-2 flex-shrink-0 ${isDropdownOpen ? 'rotate-180' : ''}`}
    112112                  />
    113113                </div>
    … …  
    115115             
    116116              {isDropdownOpen && (
    117                 <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-80 overflow-y-auto">
     117                <div className="absolute z-10 w-full mt-1 bg-card border border-border rounded-lg shadow-lg max-h-80 overflow-y-auto">
    118118                  {documentsData.documentTypes.map((docType) => (
    119119                    <button
    … …  
    123123                        setIsDropdownOpen(false);
    124124                      }}
    125                       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"
     125                      className="w-full px-4 py-3 text-left text-sm hover:bg-accent focus:outline-none focus:bg-accent border-b border-border last:border-b-0"
    126126                    >
    127                       <div className="font-medium text-gray-900">{t(docType.id)}</div>
     127                      <div className="font-medium text-card-foreground">{t(docType.id)}</div>
    128128                      {docType.price > 0 && (
    129129                        <div className="text-xs text-blue-600 mt-1">{t('price', 'Цена')}: {docType.price} мкд</div>
    … …  
    138138          {/* Comment Section */}
    139139          <div>
    140             <label className="block text-sm font-medium text-gray-700 mb-2">
     140            <label className="block text-sm font-medium text-muted-foreground mb-2">
    141141              {t('comment', 'Коментар')}:
    142142            </label>
    … …  
    145145              onChange={(e) => setComment(e.target.value)}
    146146              rows={4}
    147               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"
     147              className="w-full border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary resize-none"
    148148              placeholder={t('add_comment', 'Додај коментар')}
    149149            />
    … …  
    163163
    164164      {/* Documents Table */}
    165       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
     165      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
    166166        <div className="bg-primary text-white px-6 py-4">
    167167          <h2 className="text-xl font-bold">{t('my_documents', 'Мои документи')}</h2>
    … …  
    170170        <div className="overflow-x-auto">
    171171          <table className="w-full">
    172             <thead className="bg-gray-50">
     172            <thead className="bg-accent">
    173173              <tr>
    174                 <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>
     174                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
     175                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('archive', 'Архива')}</th>
     176                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('date', 'Датум')}</th>
     177                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('request', 'Барање')}</th>
     178                <th className="px-4 py-4 text-right text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('price', 'Цена')}</th>
     179                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('paid', 'Платено')}</th>
     180                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('document', 'Документ')}</th>
     181                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('pay_online', 'Плати онлајн')}</th>
     182                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('status', 'Статус')}</th>
     183                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('comment', 'Коментар')}</th>
    184184              </tr>
    185185            </thead>
    186             <tbody className="divide-y divide-gray-100">
     186            <tbody className="divide-y divide-border">
    187187              {currentDocuments.map((document) => (
    188                 <tr key={document.id} className="hover:bg-gray-50 transition-colors">
    189                   <TableCell className="font-medium text-gray-900">{document.id}</TableCell>
     188                <tr key={document.id} className="hover:bg-accent transition-colors">
     189                  <TableCell className="font-medium text-card-foreground">{document.id}</TableCell>
    190190                  <TableCell className="font-mono text-sm text-primary font-medium">{document.archive}</TableCell>
    191                   <TableCell className="text-gray-600">{document.date}</TableCell>
    192                   <TableCell className="font-medium text-gray-900 max-w-xs">
     191                  <TableCell className="text-muted-foreground">{document.date}</TableCell>
     192                  <TableCell className="font-medium text-card-foreground max-w-xs">
    193193                    {t(document.request)}
    194194                  </TableCell>
    … …  
    210210                      <FontAwesomeIcon icon={faCheckCircle} className="w-5 h-5 text-green-600" />
    211211                    ) : (
    212                       <span className="text-gray-400">{t('none', '—')}</span>
     212                      <span className="text-muted-foreground">{t('none', '—')}</span>
    213213                    )}
    214214                  </TableCell>
    … …  
    218218                  <TableCell>
    219219                    {document.comment || (
    220                       <span className="text-gray-400">{t('none', '—')}</span>
     220                      <span className="text-muted-foreground">{t('none', '—')}</span>
    221221                    )}
    222222                  </TableCell>
    … …  
    228228
    229229        {/* Pagination */}
    230         <div className="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
    231           <div className="flex items-center gap-4 text-sm text-gray-700">
     230        <div className="bg-accent px-6 py-4 flex items-center justify-between border-t border-border">
     231          <div className="flex items-center gap-4 text-sm text-muted-foreground">
    232232            <div className="flex items-center gap-2">
    233233              <span>{t('show_rows', 'Прикажи редови')}:</span>
    … …  
    235235                value={recordsPerPage}
    236236                onChange={(e) => setRecordsPerPage(Number(e.target.value))}
    237                 className="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
     237                className="border border-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
    238238              >
    239239                <option value={15}>15</option>
    … …  
    249249                value={currentPage}
    250250                onChange={(e) => setCurrentPage(Number(e.target.value))}
    251                 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"
     251                className="w-12 border border-border rounded px-2 py-1 text-sm text-center focus:outline-none focus:ring-1 focus:ring-primary"
    252252              /> {t('of', 'од')} {totalPages}
    253253            </div>
    … …  
    258258              onClick={() => setCurrentPage(1)}
    259259              disabled={currentPage === 1}
    260               className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
     260              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
    261261            >
    262262              <FontAwesomeIcon icon={faAngleDoubleLeft} className="w-4 h-4" />
    … …  
    265265              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
    266266              disabled={currentPage === 1}
    267               className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
     267              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
    268268            >
    269269              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
    … …  
    275275              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
    276276              disabled={currentPage === totalPages}
    277               className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
     277              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
    278278            >
    279279              <FontAwesomeIcon icon={faChevronRight} className="w-4 h-4" />
    … …  
    282282              onClick={() => setCurrentPage(totalPages)}
    283283              disabled={currentPage === totalPages}
    284               className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
     284              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
    285285            >
    286286              <FontAwesomeIcon icon={faAngleDoubleRight} className="w-4 h-4" />
    287287            </button>
    288             <span className="ml-4 text-sm text-gray-700">
     288            <span className="ml-4 text-sm text-muted-foreground">
    289289              {t('last', 'Последна')}
    290290            </span>
    291291          </div>
    292292
    293           <div className="text-sm text-gray-700">
     293          <div className="text-sm text-muted-foreground">
    294294            {t('total', 'Вкупно')}: {documents.length}
    295295          </div>
    … …  
    309309      {/* Statistics Cards */}
    310310      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
    311         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     311        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    312312          <div className="flex items-center gap-4">
    313313            <div className="bg-blue-100 text-blue-600 rounded-full p-3">
    … …  
    315315            </div>
    316316            <div>
    317               <h3 className="text-lg font-bold text-gray-900">{t('total_documents', 'Вкупно документи')}</h3>
     317              <h3 className="text-lg font-bold text-card-foreground">{t('total_documents', 'Вкупно документи')}</h3>
    318318              <p className="text-2xl font-bold text-blue-600">
    319319                {documents.length}
    … …  
    323323        </div>
    324324
    325         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     325        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    326326          <div className="flex items-center gap-4">
    327327            <div className="bg-green-100 text-green-600 rounded-full p-3">
    … …  
    329329            </div>
    330330            <div>
    331               <h3 className="text-lg font-bold text-gray-900">{t('approved', 'Одобрени')}</h3>
     331              <h3 className="text-lg font-bold text-card-foreground">{t('approved', 'Одобрени')}</h3>
    332332              <p className="text-2xl font-bold text-green-600">
    333333                {documents.filter(doc => doc.status === "approved").length}
    … …  
    337337        </div>
    338338
    339         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     339        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    340340          <div className="flex items-center gap-4">
    341341            <div className="bg-yellow-100 text-yellow-600 rounded-full p-3">
    … …  
    343343            </div>
    344344            <div>
    345               <h3 className="text-lg font-bold text-gray-900">{t('total_price', 'Вкупна цена')}</h3>
     345              <h3 className="text-lg font-bold text-card-foreground">{t('total_price', 'Вкупна цена')}</h3>
    346346              <p className="text-2xl font-bold text-yellow-600">
    347347                {documents.reduce((sum, doc) => sum + doc.price, 0).toFixed(2)} {t('mkd', 'мкд')}
Note: See TracChangeset for help on using the changeset viewer.