# NCR Dashboard — Next.js Template `webNonConformanceReport` (CRA + react-router-dom v5 + Light Bootstrap Dashboard) projesinden, gereksiz bağımlılıklar kaldırılarak türetilmiş güncel Next.js (App Router, JavaScript) şablonu. ## Kurulum ```bash npm install cp .env.example .env.local # NEXT_PUBLIC_API_URL değerini kendi API adresinizle değiştirin npm run dev ``` ## Eskisiyle karşılaştırma | Eski proje | Yeni proje | |---|---| | Create React App + `react-scripts` | Next.js 15 (App Router) | | `react-router-dom` v5 (`Switch`, `useHistory`) | Next.js dosya tabanlı routing (`app/`), `next/navigation` | | `ProtectedRoute.js` (route bileşeni) | `components/auth/AuthGuard.jsx` (dashboard route grubunu sarar) | | Bootstrap + `react-bootstrap` + `reactstrap` + el yazımı SCSS teması | Tailwind CSS + shadcn/ui birincil (Radix tabanlı, kendi bileşen kodunuz) | | Ant Design (`antd`) — sadece Login sayfasında kullanılıyordu | shadcn/ui `Button`/`Input`/`Card` bileşenleri | | `@fortawesome/fontawesome-free`, `nc-icon` seti | `lucide-react` (tree-shakeable, tek ikon seti) | | `chartist`, `react-chartist` (kullanılmıyordu) | kaldırıldı — ihtiyaç olursa `recharts` eklenebilir | | `gulp`, `gulp-append-prepend` (SCSS build script'leri) | kaldırıldı — Tailwind zaten derlemeyi hallediyor | | `@tanstack/react-table`, `react-highlight-words`, `react-notification-alert`, `@react-hook/media-query`, `@emotion/*`, `ajv`, `jquery` (optional) | kaldırıldı — hiçbiri `src/` içinde kullanılmıyordu | | `localStorage` üzerinden manuel `ncr-user` okuma/yazma her dosyada tekrarlanıyordu | `store/authSlice.js` içinde tek noktadan yönetiliyor (Redux Toolkit korundu) | | `REACT_APP_BASE_PATH` her `Route`/`Link`'te elle birleştiriliyordu | `next.config.mjs` → `basePath` (tek noktadan, otomatik) | | `REACT_APP_API_URL` + çıplak `fetch` | `NEXT_PUBLIC_API_URL` + `lib/axios.js` (tek `axios` instance, token interceptor) | ## Yapı ``` src/ app/ layout.js kök layout, font + Redux Provider login/page.js not-authorized/page.js not-found.js genel 404 (dashboard)/ layout.js AuthGuard + Sidebar + Navbar + Footer page.js Ana sayfa ncr-list/page.js project/page.js rol korumalı (QUALITY, ADMINISTRATOR) resource/page.js rol korumalı person/page.js rol korumalı components/ ui/ shadcn/ui birincil bileşenleri (button, input, card, ...) layout/ Sidebar, Navbar, Footer auth/AuthGuard.jsx oturum + rol kontrolü lib/ routes.js sidebar + erişim kontrolü tek kaynağı axios.js API istemcisi utils.js `cn()` class birleştirici store/ store.js, authSlice.js Redux Toolkit ``` ## Not - Kimlik doğrulama halen istemci tarafında `localStorage` (`ncr-user`) üzerinden yürütülüyor — eski projeyle aynı model. Sunucu tarafı (middleware/cookie tabanlı) koruma isterseniz `AuthGuard` yerine `middleware.js` + httpOnly cookie'ye geçmeniz önerilir. - `ncr-list`, `project`, `resource`, `person` sayfaları içerik eklemeniz için boş bırakılmış placeholder'lardır. - Backend'iniz `POST /auth/login` isteğine `{ token, fullName, role, ... }` benzeri bir JSON dönüyorsa login akışı olduğu gibi çalışır.