feat: complete Week 1 frontend setup (#9 #10 #11 #12) #43

Merged
makiolaj merged 2 commits from feature/issue-12-supabase-client into develop 2026-02-09 12:56:38 +00:00
13 changed files with 1484 additions and 44 deletions
Showing only changes of commit 01c5880e37 - Show all commits

3
app/.env.example Normal file
View File

@@ -0,0 +1,3 @@
# Supabase Configuration
NUXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NUXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

View File

@@ -1,6 +1,5 @@
<template> <template>
<div> <NuxtLayout>
<NuxtRouteAnnouncer /> <NuxtPage />
<NuxtWelcome /> </NuxtLayout>
</div>
</template> </template>

View File

@@ -0,0 +1,15 @@
<template>
<div class="min-h-screen bg-gray-50">
<AppHeader />
<main class="container mx-auto px-4 py-6 max-w-7xl">
<slot />
</main>
<AppFooter />
</div>
</template>
<script setup lang="ts">
// App layout automatically wraps all pages
</script>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,40 @@
<template>
<footer class="bg-white border-t border-gray-200 mt-auto">
<div class="container mx-auto px-4 py-6 max-w-7xl">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<!-- Copyright -->
<p class="text-sm text-gray-600">
© {{ currentYear }} Pantry. Self-hosted inventory management.
</p>
<!-- Links -->
<div class="flex items-center space-x-6">
<a
href="https://github.com/pantry-app/pantry"
target="_blank"
rel="noopener noreferrer"
class="text-sm text-gray-600 hover:text-primary transition-colors"
>
GitHub
</a>
<NuxtLink
to="/about"
class="text-sm text-gray-600 hover:text-primary transition-colors"
>
About
</NuxtLink>
<NuxtLink
to="/privacy"
class="text-sm text-gray-600 hover:text-primary transition-colors"
>
Privacy
</NuxtLink>
</div>
</div>
</div>
</footer>
</template>
<script setup lang="ts">
const currentYear = new Date().getFullYear()
</script>

View File

@@ -0,0 +1,122 @@
<template>
<header class="bg-white border-b border-gray-200 sticky top-0 z-50">
<div class="container mx-auto px-4 max-w-7xl">
<div class="flex items-center justify-between h-16">
<!-- Logo / Brand -->
<NuxtLink to="/" class="flex items-center space-x-2">
<UIcon name="i-heroicons-squares-2x2" class="w-8 h-8 text-primary" />
<span class="text-xl font-bold text-gray-900">Pantry</span>
</NuxtLink>
<!-- Navigation -->
<nav class="hidden md:flex items-center space-x-6">
<NuxtLink
to="/"
class="text-gray-700 hover:text-primary transition-colors"
active-class="text-primary font-semibold"
>
Inventory
</NuxtLink>
<NuxtLink
to="/scan"
class="text-gray-700 hover:text-primary transition-colors"
active-class="text-primary font-semibold"
>
Scan
</NuxtLink>
<NuxtLink
to="/settings"
class="text-gray-700 hover:text-primary transition-colors"
active-class="text-primary font-semibold"
>
Settings
</NuxtLink>
</nav>
<!-- User Menu -->
<div class="flex items-center space-x-4">
<UButton
v-if="!user"
to="/auth/login"
color="primary"
variant="soft"
>
Sign In
</UButton>
<UDropdown v-else :items="userMenuItems" mode="hover">
<UAvatar
:alt="user.email"
size="sm"
:ui="{ background: 'bg-primary' }"
/>
</UDropdown>
</div>
<!-- Mobile Menu Button -->
<UButton
icon="i-heroicons-bars-3"
color="gray"
variant="ghost"
class="md:hidden"
@click="mobileMenuOpen = !mobileMenuOpen"
/>
</div>
<!-- Mobile Navigation -->
<nav
v-if="mobileMenuOpen"
class="md:hidden py-4 space-y-2 border-t border-gray-200"
>
<NuxtLink
to="/"
class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
@click="mobileMenuOpen = false"
>
Inventory
</NuxtLink>
<NuxtLink
to="/scan"
class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
@click="mobileMenuOpen = false"
>
Scan
</NuxtLink>
<NuxtLink
to="/settings"
class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
@click="mobileMenuOpen = false"
>
Settings
</NuxtLink>
</nav>
</div>
</header>
</template>
<script setup lang="ts">
const { user, signOut } = useSupabaseAuth()
const mobileMenuOpen = ref(false)
const userMenuItems = [[
{
label: user.value?.email || 'User',
slot: 'account',
disabled: true
}
], [
{
label: 'Settings',
icon: 'i-heroicons-cog-6-tooth',
to: '/settings'
},
{
label: 'Sign Out',
icon: 'i-heroicons-arrow-right-on-rectangle',
click: async () => {
await signOut()
navigateTo('/auth/login')
}
}
]]
</script>

View File

@@ -0,0 +1,81 @@
import { createClient, SupabaseClient } from '@supabase/supabase-js'
import type { Database } from '~/types/database.types'
let supabaseInstance: SupabaseClient<Database> | null = null
export const useSupabase = () => {
const config = useRuntimeConfig()
if (!supabaseInstance) {
supabaseInstance = createClient<Database>(
config.public.supabaseUrl,
config.public.supabaseAnonKey,
{
auth: {
persistSession: true,
autoRefreshToken: true,
detectSessionInUrl: true,
storage: process.client ? window.localStorage : undefined
}
}
)
}
return supabaseInstance
}
/**
* Composable for Supabase authentication
*/
export const useSupabaseAuth = () => {
const supabase = useSupabase()
const user = useState('supabase_user', () => null as any)
const session = useState('supabase_session', () => null as any)
// Initialize auth state
const initAuth = async () => {
const { data: { session: currentSession } } = await supabase.auth.getSession()
session.value = currentSession
user.value = currentSession?.user || null
// Listen for auth changes
supabase.auth.onAuthStateChange((_event, newSession) => {
session.value = newSession
user.value = newSession?.user || null
})
}
// Call initAuth on composable mount
if (process.client) {
initAuth()
}
const signIn = async (email: string, password: string) => {
const { data, error } = await supabase.auth.signInWithPassword({
email,
password
})
return { data, error }
}
const signUp = async (email: string, password: string) => {
const { data, error } = await supabase.auth.signUp({
email,
password
})
return { data, error }
}
const signOut = async () => {
const { error } = await supabase.auth.signOut()
return { error }
}
return {
user: readonly(user),
session: readonly(session),
signIn,
signUp,
signOut
}
}

View File

@@ -1,5 +1,21 @@
// https://nuxt.com/docs/api/configuration/nuxt-config // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({ export default defineNuxtConfig({
compatibilityDate: '2025-07-15', compatibilityDate: '2025-07-15',
devtools: { enabled: true } devtools: { enabled: true },
modules: [
'@nuxt/ui',
'@nuxt/fonts'
],
runtimeConfig: {
public: {
supabaseUrl: process.env.NUXT_PUBLIC_SUPABASE_URL || 'http://localhost:54321',
supabaseAnonKey: process.env.NUXT_PUBLIC_SUPABASE_ANON_KEY || ''
}
},
colorMode: {
preference: 'light'
}
}) })

View File

@@ -10,8 +10,14 @@
"postinstall": "nuxt prepare" "postinstall": "nuxt prepare"
}, },
"dependencies": { "dependencies": {
"@nuxt/fonts": "^0.13.0",
"@nuxt/ui": "^4.4.0",
"@supabase/supabase-js": "^2.95.3",
"nuxt": "^4.3.1", "nuxt": "^4.3.1",
"vue": "^3.5.28", "vue": "^3.5.28",
"vue-router": "^4.6.4" "vue-router": "^4.6.4"
},
"devDependencies": {
"@nuxtjs/tailwindcss": "^6.14.0"
} }
} }

57
app/pages/index.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div>
<div class="flex items-center justify-between mb-6">
<h1 class="text-3xl font-bold text-gray-900">Inventory</h1>
<div class="flex gap-2">
<UButton
to="/scan"
color="primary"
size="lg"
icon="i-heroicons-qr-code"
>
Scan Item
</UButton>
<UButton
color="white"
size="lg"
icon="i-heroicons-plus"
>
Add Manually
</UButton>
</div>
</div>
<!-- Empty State -->
<UCard v-if="true">
<div class="text-center py-12">
<UIcon
name="i-heroicons-inbox"
class="w-16 h-16 text-gray-400 mx-auto mb-4"
/>
<h3 class="text-lg font-semibold text-gray-900 mb-2">
No items yet
</h3>
<p class="text-gray-600 mb-6">
Start by scanning a barcode or adding an item manually.
</p>
<UButton
to="/scan"
color="primary"
icon="i-heroicons-qr-code"
>
Scan First Item
</UButton>
</div>
</UCard>
<!-- TODO: Item list will go here -->
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'default'
})
</script>

33
app/pages/scan.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div>
<h1 class="text-3xl font-bold text-gray-900 mb-6">Scan Item</h1>
<UCard>
<div class="text-center py-12">
<UIcon
name="i-heroicons-qr-code"
class="w-16 h-16 text-gray-400 mx-auto mb-4"
/>
<h3 class="text-lg font-semibold text-gray-900 mb-2">
Barcode Scanner
</h3>
<p class="text-gray-600 mb-6">
This feature will be implemented in Week 3.
</p>
<UButton
to="/"
color="gray"
variant="soft"
>
Back to Inventory
</UButton>
</div>
</UCard>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'default'
})
</script>

74
app/pages/settings.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<div>
<h1 class="text-3xl font-bold text-gray-900 mb-6">Settings</h1>
<div class="grid gap-6 md:grid-cols-2">
<UCard>
<template #header>
<h3 class="text-lg font-semibold">Account</h3>
</template>
<div class="space-y-4">
<div v-if="user">
<label class="text-sm font-medium text-gray-700">Email</label>
<p class="text-gray-900">{{ user.email }}</p>
</div>
<UButton
v-if="!user"
to="/auth/login"
color="primary"
>
Sign In
</UButton>
</div>
</UCard>
<UCard>
<template #header>
<h3 class="text-lg font-semibold">Tags</h3>
</template>
<p class="text-gray-600">
Manage your custom tags here (coming in Week 2).
</p>
</UCard>
<UCard>
<template #header>
<h3 class="text-lg font-semibold">Units</h3>
</template>
<p class="text-gray-600">
Manage your custom units here (coming in Week 2).
</p>
</UCard>
<UCard>
<template #header>
<h3 class="text-lg font-semibold">About</h3>
</template>
<div class="space-y-2 text-sm text-gray-600">
<p><strong>Pantry</strong> v0.1.0-alpha</p>
<p>Self-hosted inventory management</p>
<a
href="https://github.com/pantry-app/pantry"
target="_blank"
class="text-primary hover:underline"
>
View on GitHub
</a>
</div>
</UCard>
</div>
</div>
</template>
<script setup lang="ts">
const { user } = useSupabaseAuth()
definePageMeta({
layout: 'default'
})
</script>

184
app/types/database.types.ts Normal file
View File

@@ -0,0 +1,184 @@
/**
* Database type definitions
*
* TODO: Generate these from Supabase schema using:
* supabase gen types typescript --project-id <project-id> > types/database.types.ts
*
* For now, using a placeholder structure that matches our schema
*/
export type Json =
| string
| number
| boolean
| null
| { [key: string]: Json | undefined }
| Json[]
export interface Database {
public: {
Tables: {
inventory_items: {
Row: {
id: string
product_id: string | null
name: string
quantity: number
unit_id: string
expiry_date: string | null
notes: string | null
added_by: string
created_at: string
updated_at: string
}
Insert: {
id?: string
product_id?: string | null
name: string
quantity: number
unit_id: string
expiry_date?: string | null
notes?: string | null
added_by: string
created_at?: string
updated_at?: string
}
Update: {
id?: string
product_id?: string | null
name?: string
quantity?: number
unit_id?: string
expiry_date?: string | null
notes?: string | null
added_by?: string
created_at?: string
updated_at?: string
}
}
products: {
Row: {
id: string
barcode: string
name: string
brand: string | null
image_url: string | null
default_unit_id: string | null
cached_at: string
created_at: string
}
Insert: {
id?: string
barcode: string
name: string
brand?: string | null
image_url?: string | null
default_unit_id?: string | null
cached_at?: string
created_at?: string
}
Update: {
id?: string
barcode?: string
name?: string
brand?: string | null
image_url?: string | null
default_unit_id?: string | null
cached_at?: string
created_at?: string
}
}
tags: {
Row: {
id: string
name: string
category: 'position' | 'type' | 'custom'
icon: string | null
color: string | null
created_by: string | null
created_at: string
}
Insert: {
id?: string
name: string
category?: 'position' | 'type' | 'custom'
icon?: string | null
color?: string | null
created_by?: string | null
created_at?: string
}
Update: {
id?: string
name?: string
category?: 'position' | 'type' | 'custom'
icon?: string | null
color?: string | null
created_by?: string | null
created_at?: string
}
}
units: {
Row: {
id: string
name: string
abbreviation: string
unit_type: 'weight' | 'volume' | 'count' | 'custom'
base_unit_id: string | null
conversion_factor: number | null
is_default: boolean
created_by: string | null
created_at: string
}
Insert: {
id?: string
name: string
abbreviation: string
unit_type?: 'weight' | 'volume' | 'count' | 'custom'
base_unit_id?: string | null
conversion_factor?: number | null
is_default?: boolean
created_by?: string | null
created_at?: string
}
Update: {
id?: string
name?: string
abbreviation?: string
unit_type?: 'weight' | 'volume' | 'count' | 'custom'
base_unit_id?: string | null
conversion_factor?: number | null
is_default?: boolean
created_by?: string | null
created_at?: string
}
}
item_tags: {
Row: {
item_id: string
tag_id: string
created_at: string
}
Insert: {
item_id: string
tag_id: string
created_at?: string
}
Update: {
item_id?: string
tag_id?: string
created_at?: string
}
}
}
Views: {
[_ in never]: never
}
Functions: {
[_ in never]: never
}
Enums: {
tag_category: 'position' | 'type' | 'custom'
unit_type: 'weight' | 'volume' | 'count' | 'custom'
}
}
}