tr]:last:border-b-0", className)}
32 | {...props} />
33 | ))
34 | TableFooter.displayName = "TableFooter"
35 |
36 | const TableRow = React.forwardRef(({ className, ...props }, ref) => (
37 | |
44 | ))
45 | TableRow.displayName = "TableRow"
46 |
47 | const TableHead = React.forwardRef(({ className, ...props }, ref) => (
48 | [role=checkbox]]:translate-y-[2px]",
52 | className
53 | )}
54 | {...props} />
55 | ))
56 | TableHead.displayName = "TableHead"
57 |
58 | const TableCell = React.forwardRef(({ className, ...props }, ref) => (
59 | | [role=checkbox]]:translate-y-[2px]",
63 | className
64 | )}
65 | {...props} />
66 | ))
67 | TableCell.displayName = "TableCell"
68 |
69 | const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
70 |
74 | ))
75 | TableCaption.displayName = "TableCaption"
76 |
77 | export {
78 | Table,
79 | TableHeader,
80 | TableBody,
81 | TableFooter,
82 | TableHead,
83 | TableRow,
84 | TableCell,
85 | TableCaption,
86 | }
87 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/textarea.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Textarea = React.forwardRef(({ className, ...props }, ref) => {
6 | return (
7 | ()
14 | );
15 | })
16 | Textarea.displayName = "Textarea"
17 |
18 | export { Textarea }
19 |
--------------------------------------------------------------------------------
/frontend/src/components/useMySWR.jsx:
--------------------------------------------------------------------------------
1 | import useSWR from 'swr'
2 |
3 | import fetcher from "@/lib/fetcher";
4 |
5 | export default function useMySWR(url) {
6 | return useSWR(url, fetcher);
7 | }
--------------------------------------------------------------------------------
/frontend/src/lib/auth.js:
--------------------------------------------------------------------------------
1 |
2 | const { cookies } = require("next/headers")
3 | const { urlJoin } = require('./urlJoin')
4 |
5 | const DJANGO_API_URL = process.env.DJANGO_API_URL;
6 | const TOKEN_AGE = 3600
7 | const TOKEN_NAME = "auth-token"
8 | const TOKEN_REFRESH_NAME = "auth-refresh-token"
9 |
10 | export async function getToken(){
11 | // api requests
12 | const cookieStore = await cookies()
13 | const myAuthToken = cookieStore.get(TOKEN_NAME)
14 | return myAuthToken?.value
15 | }
16 |
17 |
18 | export async function getRefreshToken(){
19 | // api requests
20 | const cookieStore = await cookies()
21 | const myAuthToken = cookieStore.get(TOKEN_REFRESH_NAME)
22 | return myAuthToken?.value
23 | }
24 |
25 | export async function setToken(authToken){
26 | // login
27 | const cookieStore = await cookies()
28 | const result = cookieStore.set({
29 | name: TOKEN_NAME,
30 | value: authToken,
31 | httpOnly: true, // limit client-side js
32 | sameSite: 'strict',
33 | secure: process.env.NODE_ENV !== 'development',
34 | maxAge: TOKEN_AGE,
35 | })
36 | return result
37 | }
38 |
39 | export async function setRefreshToken(authRefreshToken){
40 | // login
41 | const cookieStore = await cookies()
42 | const result = cookieStore.set({
43 | name: TOKEN_REFRESH_NAME,
44 | value: authRefreshToken,
45 | httpOnly: true, // limit client-side js
46 | sameSite: 'strict',
47 | secure: process.env.NODE_ENV !== 'development',
48 | maxAge: TOKEN_AGE,
49 | })
50 | return result
51 | }
52 |
53 | export async function deleteTokens() {
54 | // logout
55 | const cookieStore = await cookies()
56 | cookieStore.delete(TOKEN_REFRESH_NAME)
57 | cookieStore.delete(TOKEN_NAME)
58 | }
59 |
60 |
61 | export async function performTokenRefresh() {
62 | try {
63 | const refreshToken = await getRefreshToken();
64 | const response = await fetch(urlJoin(DJANGO_API_URL, '/token/refresh/'), {
65 | method: 'POST',
66 | headers: {
67 | 'Content-Type': 'application/json',
68 | },
69 | body: JSON.stringify({
70 | refresh: refreshToken
71 | }),
72 | });
73 | if (!response.ok) {
74 | throw new Error('Token refresh failed');
75 | }
76 | const data = await response.json();
77 | const newAccessToken = data.access
78 | const newRefreshToken = data.refresh
79 | await setToken(newAccessToken)
80 | await setRefreshToken(newRefreshToken)
81 | return newAccessToken
82 | } catch (error) {
83 | throw new Error('Failed to refresh token: ' + error.message);
84 | }
85 | }
--------------------------------------------------------------------------------
/frontend/src/lib/fetcher.js:
--------------------------------------------------------------------------------
1 | const fetcher = async (url) => {
2 | const res = await fetch(url, {
3 | headers: {
4 | 'Content-Type': 'application/json',
5 | },
6 | });
7 | if (!res.ok) {
8 | const error = new Error(res.status === 401 ? "Login required or permission is not allowed" : "An error occurred");
9 | error.status = res.status;
10 | throw error;
11 | }
12 | return res.json();
13 | };
14 |
15 | export default fetcher;
--------------------------------------------------------------------------------
/frontend/src/lib/getApiEndpoint.js:
--------------------------------------------------------------------------------
1 | import urlJoin from './urlJoin';
2 |
3 | const DJANGO_API_URL = process.env.DJANGO_API_URL;
4 |
5 |
6 | export default function getApiEndpoint(path, urlSearchString) {
7 | const endpoint = urlJoin(DJANGO_API_URL, path);
8 | const url = new URL(endpoint);
9 | const searchString = urlSearchString ? `?${urlSearchString}` : '';
10 | return url.toString() + searchString;
11 | }
--------------------------------------------------------------------------------
/frontend/src/lib/tokenFetcher.js:
--------------------------------------------------------------------------------
1 | import { getToken, performTokenRefresh } from '@/lib/auth';
2 |
3 | export class TokenFetch {
4 | static async fetch(url, options = {}) {
5 | // Ensure headers exist
6 | options.headers = options.headers || {};
7 |
8 | // First attempt with current token
9 | let token = await getToken();
10 | if (token) {
11 | options.headers.Authorization = `Bearer ${token}`;
12 | }
13 | let response = await fetch(url, options);
14 |
15 |
16 | if (token && response.status === 401) {
17 | console.log('attempt token refresh')
18 | token = await performTokenRefresh()
19 | if (token) {
20 | options.headers.Authorization = `Bearer ${token}`;
21 | }
22 | response = await fetch(url, options);
23 | }
24 |
25 | return response
26 | }
27 | }
--------------------------------------------------------------------------------
/frontend/src/lib/urlJoin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Joins multiple URL parts and ensures no double slashes
3 | * @param {string} base - The base URL
4 | * @param {...string} parts - Additional URL parts to join
5 | * @returns {string} The joined URL
6 | */
7 |
8 | const APPEND_SLASH = `${process.env.APPEND_SLASH}` === 'true' ? true : `${process.env.APPEND_SLASH}` === 'false' ? false : true;
9 |
10 | export function urlJoin(base, ...parts) {
11 | try {
12 | // Start with the base URL
13 | let url = new URL(base);
14 |
15 | // Flatten arrays and handle nested parts
16 | const flatParts = parts.flat();
17 |
18 | const cleanParts = flatParts
19 | .filter(Boolean)
20 | .map(part => String(part).trim())
21 | .filter(part => part !== '/'); // Filter out standalone slashes
22 |
23 | // Append parts to pathname instead of creating new URL
24 | if (cleanParts.length > 0) {
25 | url.pathname = [
26 | url.pathname,
27 | ...cleanParts
28 | ].map(part => part.replace(/^\/+|\/+$/g, '')) // Remove leading/trailing slashes
29 | .filter(Boolean)
30 | .join('/');
31 | }
32 |
33 | // Ensure pathname starts with /
34 | if (!url.pathname.startsWith('/')) {
35 | url.pathname = '/' + url.pathname;
36 | }
37 |
38 | // Append trailing slash if APPEND_SLASH is true
39 | if (APPEND_SLASH && !url.pathname.endsWith('/')) {
40 | url.pathname += '/';
41 | }
42 |
43 | return url.toString();
44 | } catch (error) {
45 | throw new Error(`Invalid URL: ${error.message}`);
46 | }
47 | }
48 |
49 | export default urlJoin;
--------------------------------------------------------------------------------
/frontend/src/lib/utils.js:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 |
3 | const { fontFamily } = require("tailwindcss/defaultTheme")
4 |
5 |
6 |
7 | module.exports = {
8 | darkMode: ["class"],
9 | content: [
10 | './pages/**/*.{js,jsx}',
11 | './components/**/*.{js,jsx}',
12 | './app/**/*.{js,jsx}',
13 | './src/**/*.{js,jsx}',
14 | ],
15 | prefix: "",
16 | theme: {
17 | container: {
18 | center: true,
19 | padding: '2rem',
20 | screens: {
21 | '2xl': '1400px'
22 | }
23 | },
24 | extend: {
25 | fontFamily: {
26 | sans: [
27 | 'var(--font-sans)',
28 | ...fontFamily.sans
29 | ]
30 | },
31 | colors: {
32 | border: 'hsl(var(--border))',
33 | input: 'hsl(var(--input))',
34 | ring: 'hsl(var(--ring))',
35 | background: 'hsl(var(--background))',
36 | foreground: 'hsl(var(--foreground))',
37 | primary: {
38 | DEFAULT: 'hsl(var(--primary))',
39 | foreground: 'hsl(var(--primary-foreground))'
40 | },
41 | secondary: {
42 | DEFAULT: 'hsl(var(--secondary))',
43 | foreground: 'hsl(var(--secondary-foreground))'
44 | },
45 | destructive: {
46 | DEFAULT: 'hsl(var(--destructive))',
47 | foreground: 'hsl(var(--destructive-foreground))'
48 | },
49 | muted: {
50 | DEFAULT: 'hsl(var(--muted))',
51 | foreground: 'hsl(var(--muted-foreground))'
52 | },
53 | accent: {
54 | DEFAULT: 'hsl(var(--accent))',
55 | foreground: 'hsl(var(--accent-foreground))'
56 | },
57 | popover: {
58 | DEFAULT: 'hsl(var(--popover))',
59 | foreground: 'hsl(var(--popover-foreground))'
60 | },
61 | card: {
62 | DEFAULT: 'hsl(var(--card))',
63 | foreground: 'hsl(var(--card-foreground))'
64 | },
65 | chart: {
66 | '1': 'hsl(var(--chart-1))',
67 | '2': 'hsl(var(--chart-2))',
68 | '3': 'hsl(var(--chart-3))',
69 | '4': 'hsl(var(--chart-4))',
70 | '5': 'hsl(var(--chart-5))'
71 | }
72 | },
73 | borderRadius: {
74 | lg: 'var(--radius)',
75 | md: 'calc(var(--radius) - 2px)',
76 | sm: 'calc(var(--radius) - 4px)'
77 | },
78 | keyframes: {
79 | 'accordion-down': {
80 | from: {
81 | height: '0'
82 | },
83 | to: {
84 | height: 'var(--radix-accordion-content-height)'
85 | }
86 | },
87 | 'accordion-up': {
88 | from: {
89 | height: 'var(--radix-accordion-content-height)'
90 | },
91 | to: {
92 | height: '0'
93 | }
94 | }
95 | },
96 | animation: {
97 | 'accordion-down': 'accordion-down 0.2s ease-out',
98 | 'accordion-up': 'accordion-up 0.2s ease-out'
99 | }
100 | }
101 | },
102 | plugins: [
103 | require("tailwindcss-animate"),
104 | require("@tailwindcss/typography")
105 | ],
106 | }
--------------------------------------------------------------------------------
/rav.yaml:
--------------------------------------------------------------------------------
1 | scripts:
2 | ui:
3 | - cd frontend
4 | - npm run dev
5 | ui-install:
6 | - cd frontend
7 | - npm install
8 | api:
9 | - cd backend/src
10 | - ../../venv/bin/python manage.py runserver
11 | api-migrate:
12 | - cd backend/src
13 | - ../../venv/bin/python manage.py migrate
14 | api-makemigrations:
15 | - cd backend/src
16 | - ../../venv/bin/python manage.py makemigrations
17 | api-install:
18 | - cd backend
19 | - ../venv/bin/pip-compile src/requirements/dev.in --output-file requirements.dev.txt
20 | - ../venv/bin/pip-compile src/requirements/prod.in --output-file requirements.txt
21 | - ../venv/bin/pip install -r requirements.dev.txt
22 | - ../venv/bin/pip install -r requirements.txt
23 | generate-favicon:
24 | # brew install imagemagick
25 | - magick frontend/public/django-nextjs-favicon.png -resize 32x32 frontend/src/app/favicon.ico
26 |
--------------------------------------------------------------------------------
|