lashman/zeroclock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add Clients view with card grid, dialogs, and billing details

Browse Source
This commit is contained in:
Your Name
2026-02-17 22:57:08 +02:00
parent 8ee45cdefc
commit d33159594d
2 changed files with 338 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AppSelect.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { ChevronDown, Check } from 'lucide-vue-next'
interface Props {

337
src/views/Clients.vue Normal file
View File

@@ -0,0 +1,337 @@
<template>
<div class="p-6">
<!-- Header -->
<div class="flex items-center justify-between mb-6">
<h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">Clients</h1>
<button
@click="openCreateDialog"
class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
>
+ Add
</button>
</div>
<!-- Clients Grid -->
<div v-if="clientsStore.clients.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div
v-for="client in clientsStore.clients"
:key="client.id"
class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] hover:bg-bg-elevated transition-all duration-150 cursor-pointer"
@click="openEditDialog(client)"
>
<div class="p-4">
<div class="flex items-start justify-between">
<div class="min-w-0 flex-1">
<h3 class="text-[0.8125rem] font-semibold text-text-primary truncate">{{ client.name }}</h3>
<p v-if="client.company" class="text-xs text-text-secondary mt-0.5 truncate">{{ client.company }}</p>
<p v-if="client.email" class="text-xs text-text-tertiary mt-0.5 truncate">{{ client.email }}</p>
</div>
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-100 shrink-0 ml-2">
<button
@click.stop="openEditDialog(client)"
class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors duration-150"
title="Edit"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button
@click.stop="confirmDelete(client)"
class="p-1.5 text-text-tertiary hover:text-status-error transition-colors duration-150"
title="Delete"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Empty State -->
<div v-else class="flex flex-col items-center justify-center py-16">
<Users class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
<p class="text-sm text-text-secondary mt-4">No clients yet</p>
<p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Clients let you organize projects and generate invoices with billing details.</p>
<button
@click="openCreateDialog"
class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors"
>
Create Client
</button>
</div>
<!-- Create/Edit Dialog -->
<div
v-if="showDialog"
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="closeDialog"
>
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter max-h-[85vh] overflow-y-auto">
<h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
{{ editingClient ? 'Edit Client' : 'Create Client' }}
</h2>
<form @submit.prevent="handleSubmit" class="space-y-4">
<!-- Contact Info -->
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Name *</label>
<input
v-model="formData.name"
type="text"
required
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="Client name"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Email</label>
<input
v-model="formData.email"
type="email"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="client@example.com"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Phone</label>
<input
v-model="formData.phone"
type="tel"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="+1 (555) 000-0000"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Address</label>
<textarea
v-model="formData.address"
rows="2"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible resize-none"
placeholder="Street, City, State, ZIP"
/>
</div>
<!-- Billing Details (collapsible) -->
<div class="border-t border-border-subtle pt-4">
<button
type="button"
@click="billingOpen = !billingOpen"
class="flex items-center gap-2 text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] cursor-pointer hover:text-text-secondary transition-colors"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 transition-transform duration-150"
:class="{ 'rotate-90': billingOpen }"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
Billing Details
</button>
<div v-if="billingOpen" class="mt-3 space-y-4">
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Company</label>
<input
v-model="formData.company"
type="text"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="Business name for invoices"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Tax ID</label>
<input
v-model="formData.tax_id"
type="text"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="VAT / Tax number"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Payment Terms</label>
<input
v-model="formData.payment_terms"
type="text"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="e.g. Net 30, Due on receipt"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Notes</label>
<textarea
v-model="formData.notes"
rows="2"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible resize-none"
placeholder="Internal notes about this client"
/>
</div>
</div>
</div>
<!-- Buttons -->
<div class="flex justify-end gap-3 pt-4">
<button
type="button"
@click="closeDialog"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
>
Cancel
</button>
<button
type="submit"
class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
>
{{ editingClient ? 'Update' : 'Create' }}
</button>
</div>
</form>
</div>
</div>
<!-- Delete Confirmation Dialog -->
<div
v-if="showDeleteDialog"
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="cancelDelete"
>
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
<h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Client</h2>
<p class="text-[0.75rem] text-text-secondary mb-6">
Are you sure you want to delete "{{ clientToDelete?.name }}"? This action cannot be undone.
</p>
<div class="flex justify-end gap-3">
<button
@click="cancelDelete"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
>
Cancel
</button>
<button
@click="handleDelete"
class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
>
Delete
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Users } from 'lucide-vue-next'
import { useClientsStore, type Client } from '../stores/clients'
const clientsStore = useClientsStore()
// Dialog state
const showDialog = ref(false)
const showDeleteDialog = ref(false)
const editingClient = ref<Client | null>(null)
const clientToDelete = ref<Client | null>(null)
const billingOpen = ref(false)
// Form data
const formData = reactive<Client>({
name: '',
email: undefined,
phone: undefined,
address: undefined,
company: undefined,
tax_id: undefined,
payment_terms: undefined,
notes: undefined,
})
// Check if any billing field has data
function hasBillingData(client: Client): boolean {
return !!(client.company || client.tax_id || client.payment_terms || client.notes)
}
// Open create dialog
function openCreateDialog() {
editingClient.value = null
formData.name = ''
formData.email = undefined
formData.phone = undefined
formData.address = undefined
formData.company = undefined
formData.tax_id = undefined
formData.payment_terms = undefined
formData.notes = undefined
billingOpen.value = false
showDialog.value = true
}
// Open edit dialog
function openEditDialog(client: Client) {
editingClient.value = client
formData.id = client.id
formData.name = client.name
formData.email = client.email
formData.phone = client.phone
formData.address = client.address
formData.company = client.company
formData.tax_id = client.tax_id
formData.payment_terms = client.payment_terms
formData.notes = client.notes
billingOpen.value = hasBillingData(client)
showDialog.value = true
}
// Close dialog
function closeDialog() {
showDialog.value = false
editingClient.value = null
}
// Handle form submit
async function handleSubmit() {
if (editingClient.value) {
await clientsStore.updateClient({ ...formData })
} else {
await clientsStore.createClient({ ...formData })
}
closeDialog()
}
// Confirm delete
function confirmDelete(client: Client) {
clientToDelete.value = client
showDeleteDialog.value = true
}
// Cancel delete
function cancelDelete() {
showDeleteDialog.value = false
clientToDelete.value = null
}
// Handle delete
async function handleDelete() {
if (clientToDelete.value?.id) {
await clientsStore.deleteClient(clientToDelete.value.id)
}
cancelDelete()
}
// Load data on mount
onMounted(async () => {
await clientsStore.fetchClients()
})
</script>