diff --git a/packages/admin/src/routes/_authenticated.tsx b/packages/admin/src/routes/_authenticated.tsx index d790e1c..64367af 100644 --- a/packages/admin/src/routes/_authenticated.tsx +++ b/packages/admin/src/routes/_authenticated.tsx @@ -1,5 +1,5 @@ import { createFileRoute, Outlet, Link, redirect, useRouter } from '@tanstack/react-router' -import { useQuery } from '@tanstack/react-query' +import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query' import { queryOptions } from '@tanstack/react-query' import { useEffect, useState } from 'react' import { api } from '@/lib/api-client' @@ -9,6 +9,9 @@ import { moduleListOptions } from '@/api/modules' import { Avatar } from '@/components/shared/avatar-upload' import { Button } from '@/components/ui/button' import { Users, UserRound, HelpCircle, Shield, UserCog, LogOut, User, Wrench, Package, ClipboardList, FolderOpen, KeyRound, Settings, PanelLeftClose, PanelLeft, CalendarDays, GraduationCap, CalendarRange, BookOpen, BookMarked, Package2, Tag, Truck, ShoppingCart } from 'lucide-react' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { toast } from 'sonner' export const Route = createFileRoute('/_authenticated')({ beforeLoad: () => { @@ -104,6 +107,58 @@ function NavGroup({ label, children, collapsed }: { label: string; children: Rea ) } +function SetPinModal() { + const queryClient = useQueryClient() + const [pin, setPin] = useState('') + const [confirmPin, setConfirmPin] = useState('') + const [error, setError] = useState('') + + const setPinMutation = useMutation({ + mutationFn: () => api.post('/v1/auth/set-pin', { pin }), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['auth', 'me'] }) + toast.success('PIN set successfully') + }, + onError: (err) => setError(err.message), + }) + + function handleSubmit(e: React.FormEvent) { + e.preventDefault() + setError('') + if (pin.length < 4 || pin.length > 6) { setError('PIN must be 4-6 digits'); return } + if (!/^\d+$/.test(pin)) { setError('PIN must be digits only'); return } + if (pin !== confirmPin) { setError('PINs do not match'); return } + setPinMutation.mutate() + } + + return ( +
+
+

Set your POS PIN

+

+ A PIN is required to use the Point of Sale. Choose a 4-6 digit PIN you'll use to unlock the terminal. +

+
+
+
+ + setPin(e.target.value)} placeholder="****" autoFocus /> +
+
+ + setConfirmPin(e.target.value)} placeholder="****" /> +
+
+ {error &&

{error}

} + +
+
+
+ ) +} + function AuthenticatedLayout() { const router = useRouter() const user = useAuthStore((s) => s.user) @@ -112,6 +167,13 @@ function AuthenticatedLayout() { const setPermissions = useAuthStore((s) => s.setPermissions) const permissionsLoaded = useAuthStore((s) => s.permissionsLoaded) + // Fetch profile for PIN warning + const { data: profile } = useQuery(queryOptions({ + queryKey: ['auth', 'me'], + queryFn: () => api.get<{ hasPin: boolean }>('/v1/auth/me'), + enabled: !!useAuthStore.getState().token, + })) + // Fetch permissions on mount const { data: permData } = useQuery({ ...myPermissionsOptions(), @@ -263,6 +325,7 @@ function AuthenticatedLayout() {
+ {profile && !profile.hasPin && }
diff --git a/packages/admin/src/routes/_authenticated/profile.tsx b/packages/admin/src/routes/_authenticated/profile.tsx index e938c62..cbf322c 100644 --- a/packages/admin/src/routes/_authenticated/profile.tsx +++ b/packages/admin/src/routes/_authenticated/profile.tsx @@ -1,4 +1,4 @@ -import { createFileRoute, Link } from '@tanstack/react-router' +import { createFileRoute } from '@tanstack/react-router' import { useState } from 'react' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { queryOptions } from '@tanstack/react-query' @@ -12,8 +12,7 @@ import { Label } from '@/components/ui/label' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Separator } from '@/components/ui/separator' import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs' -import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert' -import { Sun, Moon, Monitor, AlertTriangle } from 'lucide-react' +import { Sun, Moon, Monitor } from 'lucide-react' import { toast } from 'sonner' import { AvatarUpload } from '@/components/shared/avatar-upload' @@ -53,23 +52,6 @@ function ProfilePage() {

Profile

- {profile && !profile.hasPin && ( - - - POS PIN not set - - You need a PIN to use the Point of Sale.{' '} - - Set your PIN - - - - )} - Account