shortcut-next 0.2.2 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shortcut-next",
-  "version": "0.2.2",
+  "version": "0.2.6",
   "description": "Scaffold Next.js apps with MUI base or Tailwind v4 preset.",
   "main": "index.js",
   "bin": {
@@ -61,6 +61,9 @@
     "ora": "^8.2.0"
   },
   "devDependencies": {
-    "@types/js-cookie": "^3.0.6"
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@types/js-cookie": "^3.0.6",
+    "semantic-release": "^25.0.3"
   }
 }

package/templates/base/@core/configs/clientConfig.ts

@@ -13,7 +13,7 @@ const authConfig = {
 
   // ** Routes
   loginPageURL: '/login',
-  homePageURL: '/',
+  homePageURL: '/home',
 
   // ** Request Configuration
   requestTimeout: 15000, // 15 seconds

package/templates/base/@core/context/AuthContext.tsx

@@ -75,11 +75,9 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     try {
       setIsLoading(true)
 
-      const response = await axios.post<AuthResponse>(
-        `${authConfig.baseURL}${authConfig.loginEndpoint}`,
-        credentials,
-        { timeout: authConfig.requestTimeout }
-      )
+      const response = await axios.post<AuthResponse>(`${authConfig.baseURL}${authConfig.loginEndpoint}`, credentials, {
+        timeout: authConfig.requestTimeout
+      })
 
       const { user: userData, accessToken, refreshToken } = response.data
 
@@ -98,12 +96,12 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
 
       // Redirect to home page
       router.push(authConfig.homePageURL)
-
     } catch (error) {
       console.error('Login failed:', error)
-      const message = axios.isAxiosError(error) && error.response?.data?.message
-        ? error.response.data.message
-        : 'Login failed. Please try again.'
+      const message =
+        axios.isAxiosError(error) && error.response?.data?.message
+          ? error.response.data.message
+          : 'Login failed. Please try again.'
 
       onError?.(message)
     } finally {
@@ -139,12 +137,12 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
 
       // Redirect to home page
       router.push(authConfig.homePageURL)
-
     } catch (error) {
       console.error('Signup failed:', error)
-      const message = axios.isAxiosError(error) && error.response?.data?.message
-        ? error.response.data.message
-        : 'Signup failed. Please try again.'
+      const message =
+        axios.isAxiosError(error) && error.response?.data?.message
+          ? error.response.data.message
+          : 'Signup failed. Please try again.'
 
       onError?.(message)
     } finally {
@@ -154,18 +152,17 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
 
   // ** Logout function
   const logout = async (): Promise<void> => {
-      // Clear all auth data regardless of API call result
-      setUser(null)
-      localStorage.removeItem(authConfig.storageTokenKeyName)
-      localStorage.removeItem(authConfig.storageUserDataKeyName)
-      localStorage.removeItem(authConfig.storageRefreshTokenKeyName)
-
-      // Clear cookie
-      document.cookie = `${authConfig.cookieName}=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT`
+    // Clear all auth data regardless of API call result
+    setUser(null)
+    localStorage.removeItem(authConfig.storageTokenKeyName)
+    localStorage.removeItem(authConfig.storageUserDataKeyName)
+    localStorage.removeItem(authConfig.storageRefreshTokenKeyName)
 
-      // Redirect to login page
-      router.push(authConfig.loginPageURL)
+    // Clear cookie
+    document.cookie = `${authConfig.cookieName}=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT`
 
+    // Redirect to login page
+    router.push(authConfig.loginPageURL)
   }
 
   // ** Context value
@@ -180,11 +177,7 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     setLoading: setIsLoading
   }
 
-  return (
-    <AuthContext.Provider value={contextValue}>
-      {children}
-    </AuthContext.Provider>
-  )
+  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
 }
 
 // ** Auth Hook

package/templates/base/@core/hooks/useAbility.ts

@@ -0,0 +1,58 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useAuth } from '@/@core/context/AuthContext'
+import { defineAbilitiesFor } from '@/lib/abilities'
+import type { AppAbility, UserRole } from '@/lib/abilities'
+
+/**
+ * Hook to get CASL ability instance for the current user
+ *
+ * Usage:
+ * ```tsx
+ * const ability = useAbility()
+ *
+ * if (ability.can('read', 'Users')) {
+ *   // Show users link
+ * }
+ *
+ * if (ability.can('manage', 'Settings')) {
+ *   // Show settings link
+ * }
+ * ```
+ *
+ * @returns CASL AppAbility instance
+ */
+export function useAbility(): AppAbility {
+  const { user } = useAuth()
+
+  const ability = useMemo(() => {
+    const role = (user?.role as UserRole) || 'viewer'
+    return defineAbilitiesFor(role)
+  }, [user?.role])
+
+  return ability
+}
+
+/**
+ * Hook to check if current user can perform an action
+ *
+ * Convenience wrapper around useAbility for simple permission checks.
+ *
+ * Usage:
+ * ```tsx
+ * const canReadUsers = useCan('read', 'Users')
+ * const canManageSettings = useCan('manage', 'Settings')
+ * ```
+ *
+ * @param action - The action to check
+ * @param subject - The subject to check against
+ * @returns boolean indicating if the user can perform the action
+ */
+export function useCan(
+  action: 'read' | 'create' | 'update' | 'delete' | 'manage',
+  subject: 'Dashboard' | 'Users' | 'Settings' | 'Reports' | 'Tickets' | 'all'
+): boolean {
+  const ability = useAbility()
+  return ability.can(action, subject)
+}

package/templates/base/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { Box, Container, Typography, Grid, Card, CardContent } from '@mui/material'
+import { Users, Ticket, Settings, BarChart3 } from 'lucide-react'
+import Link from 'next/link'
+
+const dashboardCards = [
+  {
+    title: 'Users',
+    description: 'Manage system users',
+    icon: Users,
+    href: '/dashboard/users',
+    color: 'primary',
+    roles: ['admin', 'manager']
+  },
+  {
+    title: 'Tickets',
+    description: 'View and manage tickets',
+    icon: Ticket,
+    href: '/dashboard/tickets',
+    color: 'secondary',
+    roles: ['admin', 'manager', 'agent']
+  },
+  {
+    title: 'Reports',
+    description: 'View analytics and reports',
+    icon: BarChart3,
+    href: '/dashboard/reports',
+    color: 'info',
+    roles: ['admin', 'manager', 'agent', 'viewer']
+  },
+  {
+    title: 'Settings',
+    description: 'Configure application settings',
+    icon: Settings,
+    href: '/dashboard/settings',
+    color: 'warning',
+    roles: ['admin']
+  }
+]
+
+/**
+ * Dashboard Home Page
+ *
+ * This page is accessible to all authenticated users.
+ * The navigation cards shown here are just examples -
+ * actual access control is enforced by middleware.
+ */
+export default function DashboardPage() {
+  return (
+    <Container maxWidth='lg' sx={{ py: 4 }}>
+      <Typography variant='h4' fontWeight={700} gutterBottom>
+        Dashboard
+      </Typography>
+      <Typography variant='body1' color='text.secondary' sx={{ mb: 4 }}>
+        Welcome to your dashboard. Select a section to get started.
+      </Typography>
+
+      <Grid container spacing={3}>
+        {dashboardCards.map(card => (
+          <Grid size={{ xs: 12, sm: 6, md: 3 }} key={card.title}>
+            <Card
+              component={Link}
+              href={card.href}
+              sx={{
+                height: '100%',
+                textDecoration: 'none',
+                transition: 'transform 0.2s, box-shadow 0.2s',
+                '&:hover': {
+                  transform: 'translateY(-4px)',
+                  boxShadow: 4
+                }
+              }}
+            >
+              <CardContent sx={{ textAlign: 'center', py: 4 }}>
+                <Box
+                  sx={{
+                    width: 56,
+                    height: 56,
+                    borderRadius: 2,
+                    bgcolor: `${card.color}.lighter`,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    mx: 'auto',
+                    mb: 2
+                  }}
+                >
+                  <card.icon size={28} />
+                </Box>
+                <Typography variant='h6' fontWeight={600}>
+                  {card.title}
+                </Typography>
+                <Typography variant='body2' color='text.secondary'>
+                  {card.description}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Container>
+  )
+}

package/templates/base/app/(dashboard)/layout.tsx

@@ -0,0 +1,97 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { decodeJwt } from 'jose'
+import type { UserRole } from '@/lib/abilities'
+
+/**
+ * JWT payload structure
+ */
+interface JWTPayload {
+  sub: string
+  email?: string
+  role?: string
+  name?: string
+  exp?: number
+}
+
+/**
+ * Session data extracted from JWT
+ */
+interface Session {
+  userId: string
+  role: UserRole
+  name?: string
+  email?: string
+}
+
+/**
+ * Extract session from cookies (server-side)
+ *
+ * This is the defense-in-depth check that runs in addition to middleware.
+ * It ensures no protected content is ever rendered without a valid session.
+ */
+async function getServerSession(): Promise<Session | null> {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('accessToken')?.value
+
+  if (!token) {
+    return null
+  }
+
+  try {
+    const payload = decodeJwt(token) as JWTPayload
+
+    // Check expiration
+    if (payload.exp && payload.exp * 1000 < Date.now()) {
+      return null
+    }
+
+    const validRoles: UserRole[] = ['admin', 'manager', 'agent', 'viewer']
+    const role = validRoles.includes(payload.role as UserRole)
+      ? (payload.role as UserRole)
+      : 'viewer'
+
+    return {
+      userId: payload.sub,
+      role,
+      name: payload.name,
+      email: payload.email,
+    }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Dashboard Layout
+ *
+ * This is a Server Component that provides defense-in-depth for all dashboard routes.
+ * Even if middleware is bypassed, this layout ensures no protected content renders
+ * without a valid session.
+ *
+ * The layout wraps all routes in the (dashboard) route group.
+ */
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const session = await getServerSession()
+
+  // Defense-in-depth: redirect if no session
+  // This should rarely trigger since middleware handles it first
+  if (!session) {
+    redirect('/login?returnUrl=/dashboard')
+  }
+
+  return (
+    <div className="dashboard-layout">
+      {/*
+        Add dashboard navigation/sidebar here
+        Navigation items can be filtered based on session.role
+        using the useAbility hook in client components
+      */}
+      <main className="dashboard-content">{children}</main>
+    </div>
+  )
+}

package/templates/base/app/home/page.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { Container, Typography, Paper, Box, Chip, Button } from '@mui/material'
+import { LogOut } from 'lucide-react'
+import { useAuth } from '@/@core/context/AuthContext'
+import { useCan } from '@/@core/hooks/useAbility'
+
+// Role-specific home components
+function AdminHome() {
+  return (
+    <Paper sx={{ p: 4, bgcolor: 'error.50', border: '2px solid', borderColor: 'error.main' }}>
+      <Typography variant='h5' color='error.main' gutterBottom>
+        Admin Dashboard
+      </Typography>
+      <Typography variant='body1' color='text.secondary'>
+        Welcome, Admin! You have full access to all system features including user management, settings, reports, and
+        tickets.
+      </Typography>
+    </Paper>
+  )
+}
+
+function ManagerHome() {
+  return (
+    <Paper sx={{ p: 4, bgcolor: 'warning.50', border: '2px solid', borderColor: 'warning.main' }}>
+      <Typography variant='h5' color='warning.main' gutterBottom>
+        Manager Dashboard
+      </Typography>
+      <Typography variant='body1' color='text.secondary'>
+        Welcome, Manager! You can manage users, tickets, and reports. Settings are restricted to admins.
+      </Typography>
+    </Paper>
+  )
+}
+
+function AgentHome() {
+  return (
+    <Paper sx={{ p: 4, bgcolor: 'info.50', border: '2px solid', borderColor: 'info.main' }}>
+      <Typography variant='h5' color='info.main' gutterBottom>
+        Agent Dashboard
+      </Typography>
+      <Typography variant='body1' color='text.secondary'>
+        Welcome, Agent! You can handle tickets and view reports. User management and settings are restricted.
+      </Typography>
+    </Paper>
+  )
+}
+
+function ViewerHome() {
+  return (
+    <Paper sx={{ p: 4, bgcolor: 'success.50', border: '2px solid', borderColor: 'success.main' }}>
+      <Typography variant='h5' color='success.main' gutterBottom>
+        Viewer Dashboard
+      </Typography>
+      <Typography variant='body1' color='text.secondary'>
+        Welcome, Viewer! You have read-only access to the dashboard and reports.
+      </Typography>
+    </Paper>
+  )
+}
+
+export default function HomePage() {
+  const { user, logout } = useAuth()
+
+  // Use CASL abilities to determine which component to render
+  // Each check is based on unique permissions for that role
+  const canManageSettings = useCan('manage', 'Settings') // Only admin
+  const canManageUsers = useCan('manage', 'Users') // Admin & Manager
+  const canManageTickets = useCan('manage', 'Tickets') // Admin, Manager & Agent
+
+  // Determine the appropriate component based on abilities (most privileged first)
+  const getRoleInfo = () => {
+    if (canManageSettings) {
+      return { Component: AdminHome, label: 'ADMIN', color: 'error' as const }
+    }
+    if (canManageUsers) {
+      return { Component: ManagerHome, label: 'MANAGER', color: 'warning' as const }
+    }
+    if (canManageTickets) {
+      return { Component: AgentHome, label: 'AGENT', color: 'info' as const }
+    }
+    return { Component: ViewerHome, label: 'VIEWER', color: 'success' as const }
+  }
+
+  const { Component: RoleComponent, label, color } = getRoleInfo()
+
+  const handleLogout = () => {
+    logout()
+  }
+
+  return (
+    <Container maxWidth='md' sx={{ py: 6 }}>
+      <Box sx={{ mb: 4, textAlign: 'center' }}>
+        <Typography variant='h3' gutterBottom>
+          Welcome Home
+        </Typography>
+        <Typography variant='body1' color='text.secondary' sx={{ mb: 2 }}>
+          Hello, {user?.name || 'User'}!
+        </Typography>
+        <Chip label={label} color={color} size='medium' />
+      </Box>
+
+      <RoleComponent />
+
+      <Box sx={{ mt: 4, textAlign: 'center' }}>
+        <Button variant='outlined' color='error' startIcon={<LogOut size={18} />} onClick={handleLogout}>
+          Logout
+        </Button>
+      </Box>
+    </Container>
+  )
+}