Index: src/app/globals.css =================================================================== --- src/app/globals.css (revision 65f7b64a4488d0ab35cde03686d8f46e2980d28e) +++ src/app/globals.css (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -1,8 +1,6 @@ @import "tailwindcss"; +@import "tw-animate-css"; -:root { - --background: #ffffff; - --foreground: #171717; -} +@custom-variant dark (&:is(.dark *)); @theme inline { @@ -11,16 +9,115 @@ --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: #0272D1; + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply text-foreground; + background-color: #F4FAFF; } } - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} Index: src/app/layout.tsx =================================================================== --- src/app/layout.tsx (revision 65f7b64a4488d0ab35cde03686d8f46e2980d28e) +++ src/app/layout.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -2,4 +2,9 @@ import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import '@fortawesome/fontawesome-svg-core/styles.css'; +import { config } from '@fortawesome/fontawesome-svg-core'; + +// Prevent FontAwesome from adding CSS automatically +config.autoAddCss = false; const geistSans = Geist({ @@ -14,6 +19,6 @@ export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "IKnow - UKIM", + description: "University Managment System used to provide students informations and manage their progress.", }; @@ -28,5 +33,5 @@ className={`${geistSans.variable} ${geistMono.variable} antialiased`} > - {children} +
{children}
Index: src/app/page.tsx =================================================================== --- src/app/page.tsx (revision 65f7b64a4488d0ab35cde03686d8f46e2980d28e) +++ src/app/page.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -1,103 +1,14 @@ import Image from "next/image"; +import Navbar from "@/components/navbar"; +import Header from "@/components/header"; +import Exams from "@/components/exams"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+ <> +
+ + + ); } Index: src/components/exams.tsx =================================================================== --- src/components/exams.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ src/components/exams.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,418 @@ +"use client" +import { useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'; + +const Exams = () => { + const [sortField, setSortField] = useState<'grade' | 'date' | null>(null); + const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(null); + // Real exam data + const stats = { + average: 8.95, + credits: { current: 108, total: 240 }, + passed: 19, + remaining: 22 + }; + + const exams = [ + { + id: 1, + code: "F23L1W005", + subject: "Бизнис и менаџмент", + session: "2024 (Зимска) Прва испитна сесија", + date: "21.02.2024", + semester: 1, + credits: 6.00, + type: "З", + grade: 7 + }, + { + id: 2, + code: "F23L1W007", + subject: "Вовед во компјутерските науки", + session: "2024 (Зимска) Прва испитна сесија", + date: "06.02.2024", + semester: 1, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 3, + code: "F23L2W003", + subject: "Избрани теми од математика", + session: "2024 (Зимска) Прва испитна сесија", + date: "12.02.2024", + semester: 1, + credits: 6.00, + type: "З", + grade: 9 + }, + { + id: 4, + code: "F23L1W018", + subject: "Професионални вештини", + session: "2024 (Зимска) Прва испитна сесија", + date: "01.02.2024", + semester: 1, + credits: 4.00, + type: "З", + grade: 9 + }, + { + id: 5, + code: "F23L1W004", + subject: "Спорт и здравје", + session: "2024 (Летна) Втора испитна сесија", + date: "15.07.2024", + semester: 1, + credits: 2.00, + type: "З", + grade: "Реализиран" + }, + { + id: 6, + code: "F23L1W020", + subject: "Структурно програмирање", + session: "2024 (Зимска) Прва испитна сесија", + date: "12.02.2024", + semester: 1, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 7, + code: "F23L1S003", + subject: "Архитектура и организација на компјутери", + session: "2024 (Летна) Втора испитна сесија", + date: "03.07.2024", + semester: 2, + credits: 6.00, + type: "З", + grade: 9 + }, + { + id: 8, + code: "F23L1S023", + subject: "Бизнис статистика", + session: "2024 (Летна) Втора испитна сесија", + date: "02.07.2024", + semester: 2, + credits: 6.00, + type: "З", + grade: 8 + }, + { + id: 9, + code: "F23L1S120", + subject: "Креативни вештини за решавање проблеми", + session: "2024 (Летна) Втора испитна сесија", + date: "25.06.2024", + semester: 2, + credits: 6.00, + type: "И", + grade: 10 + }, + { + id: 10, + code: "F23L1S016", + subject: "Објектно-ориентирано програмирање", + session: "2024 (Летна) Втора испитна сесија", + date: "13.07.2024", + semester: 2, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 11, + code: "F23L1S146", + subject: "Основи на Веб дизајн", + session: "2024 (Летна) Втора испитна сесија", + date: "24.06.2024", + semester: 2, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 12, + code: "F23L2W100", + subject: "Економија за ИКТ инженери", + session: "2025 (Зимска) Прва испитна сесија", + date: "03.02.2025", + semester: 3, + credits: 6.00, + type: "З", + grade: 8 + }, + { + id: 13, + code: "F23L2W109", + subject: "Интернет програмирање на клиентска страна", + session: "2025 (Зимска) Прва испитна сесија", + date: "30.01.2025", + semester: 3, + credits: 6.00, + type: "И", + grade: 10 + }, + { + id: 14, + code: "F23L2W014", + subject: "Компјутерски мрежи и безбедност", + session: "2025 (Зимска) Прва испитна сесија", + date: "10.02.2025", + semester: 3, + credits: 6.00, + type: "З", + grade: 7 + }, + { + id: 15, + code: "F23L2W201", + subject: "Примена на алгоритми и податочни структури", + session: "2025 (Зимска) Прва испитна сесија", + date: "13.02.2025", + semester: 3, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 16, + code: "F23L2W167", + subject: "Шаблони за дизајн на кориснички интерфејси", + session: "2025 (Зимска) Прва испитна сесија", + date: "06.02.2025", + semester: 3, + credits: 6.00, + type: "И", + grade: 10 + }, + { + id: 17, + code: "F23L2S026", + subject: "Маркетинг", + session: "2025 (Летна) Втора испитна сесија", + date: "12.06.2025", + semester: 4, + credits: 6.00, + type: "З", + grade: 8 + }, + { + id: 18, + code: "F23L2S017", + subject: "Оперативни системи", + session: "2025 (Летна) Втора испитна сесија", + date: "19.06.2025", + semester: 4, + credits: 6.00, + type: "З", + grade: 7 + }, + { + id: 19, + code: "F23L2S029", + subject: "Софтверско инженерство", + session: "2025 (Летна) Втора испитна сесија", + date: "23.06.2025", + semester: 4, + credits: 6.00, + type: "З", + grade: 8 + } + ]; + + const getGradeColor = (grade: number | string) => { + if (grade === "Реализиран") return "bg-blue-100 text-blue-800 border-blue-200"; + if (typeof grade === "number") { + if (grade >= 9) return "bg-green-100 text-green-800 border-green-200"; + if (grade >= 8) return "bg-yellow-100 text-yellow-800 border-yellow-200"; + if (grade >= 6) return "bg-orange-100 text-orange-800 border-orange-200"; + return "bg-red-100 text-red-800 border-red-200"; + } + return "bg-gray-100 text-gray-800 border-gray-200"; + }; + + const handleSortByGrade = () => { + if (sortField === 'grade') { + if (sortOrder === 'desc') { + setSortOrder('asc'); + } else if (sortOrder === 'asc') { + setSortField(null); + setSortOrder(null); + } else { + setSortOrder('desc'); + } + } else { + setSortField('grade'); + setSortOrder('desc'); + } + }; + + const handleSortByDate = () => { + if (sortField === 'date') { + if (sortOrder === 'desc') { + setSortOrder('asc'); + } else if (sortOrder === 'asc') { + setSortField(null); + setSortOrder(null); + } else { + setSortOrder('desc'); + } + } else { + setSortField('date'); + setSortOrder('desc'); + } + }; + + const getSortedExams = () => { + if (!sortField || !sortOrder) return exams; + + return [...exams].sort((a, b) => { + if (sortField === 'grade') { + // Handle "Реализиран" grade separately + if (a.grade === "Реализиран" && b.grade === "Реализиран") return 0; + if (a.grade === "Реализиран") return sortOrder === 'asc' ? -1 : 1; + if (b.grade === "Реализиран") return sortOrder === 'asc' ? 1 : -1; + + // Handle numeric grades + const gradeA = typeof a.grade === 'number' ? a.grade : 0; + const gradeB = typeof b.grade === 'number' ? b.grade : 0; + + return sortOrder === 'asc' ? gradeA - gradeB : gradeB - gradeA; + } + + if (sortField === 'date') { + // Convert date strings to Date objects for proper sorting + const dateA = new Date(a.date.split('.').reverse().join('-')); // Convert DD.MM.YYYY to YYYY-MM-DD + const dateB = new Date(b.date.split('.').reverse().join('-')); + + return sortOrder === 'asc' ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime(); + } + + return 0; + }); + }; + + const getSortIcon = (field: 'grade' | 'date') => { + if (sortField === field) { + if (sortOrder === 'asc') return faSortUp; + if (sortOrder === 'desc') return faSortDown; + } + return faSort; + }; + + const creditsPercentage = (stats.credits.current / stats.credits.total) * 100; + + return ( +
+ {/* Statistics Section */} +
+
+ {/* Average Grade */} +
+
{stats.average}
+
Просек
+
+ + {/* Credits */} +
+
+ {stats.credits.current} + /{stats.credits.total} +
+
Кредити
+
+ + {/* Passed Exams */} +
+
{stats.passed}
+
Положени
+
+ + {/* Remaining Exams */} +
+
{stats.remaining}
+
Останато
+
+
+ + {/* Progress Bar spanning entire statistics section */} +
+
+
+
+ + {/* Exams Table */} +
+

Испити

+ +
+ + + + + + + + + + + + + {getSortedExams().map((exam) => ( + + + + + + + + + ))} + +
#ПредметСеместарКредити + + + +
{exam.id}{exam.subject}{exam.semester}{exam.credits}{exam.date} + + {exam.grade} + +
+
+
+
+ ); +}; + +export default Exams; Index: src/components/header.tsx =================================================================== --- src/components/header.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ src/components/header.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,71 @@ +"use client" +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faUser, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; +import Image from 'next/image'; + +const Header = () => { + return ( +
+
+
+ {/* Left side - Logos and University Info */} +
+ {/* UKIM Logo */} +
+ UKIM Logo +
+ + {/* FINKI Logo */} +
+ FINKI Logo +
+ + {/* University Text */} +
+
+ Универзитет „Св. КИРИЛ И МЕТОДИЈ“ - Скопје +
+
+ Факултет за информатички науки и компјутерско инженерство +
+
+
+ + {/* Right side - User Profile */} +
+
+ {/* User Avatar */} +
+ +
+ + {/* User Name */} +
+ Стефан Савески +
+ + {/* Logout Button */} + +
+
+
+
+
+ ); +}; + +export default Header; Index: src/components/navbar.tsx =================================================================== --- src/components/navbar.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ src/components/navbar.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,79 @@ +"use client" +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faUser } from '@fortawesome/free-solid-svg-icons'; +import { faBookmark } from '@fortawesome/free-solid-svg-icons'; +import { faBook } from '@fortawesome/free-solid-svg-icons'; +import { faPenToSquare } from '@fortawesome/free-solid-svg-icons'; +import { faListCheck } from '@fortawesome/free-solid-svg-icons'; +import { faFilePdf } from '@fortawesome/free-solid-svg-icons'; +import { faBars, faTimes, faGraduationCap } from '@fortawesome/free-solid-svg-icons'; +import { useState } from 'react'; + +const Navbar = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const menuItems = [ + { icon: faUser, label: 'Профил' }, + { icon: faBookmark, label: 'Семестри' }, + { icon: faBook, label: 'Предмети' }, + { icon: faPenToSquare, label: 'Пријави' }, + { icon: faListCheck, label: 'Положени' }, + { icon: faFilePdf, label: 'Документи' } + ]; + + return ( + <> + {/* Desktop Navbar */} + + + {/* Mobile Navbar */} + + + ); +}; + +export default Navbar; Index: src/lib/utils.ts =================================================================== --- src/lib/utils.ts (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ src/lib/utils.ts (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +}