use crm- components everywhere

resources/js/components/DeleteUser.vue

@@ -6,7 +6,7 @@ import { ref } from 'vue';
 // Components
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import {
     Dialog,
     DialogClose,
@@ -17,7 +17,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 
 const passwordInput = ref<InstanceType<typeof Input> | null>(null);

resources/js/components/DialogCloseButton/DialogCloseButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/crm-button'
 import { X } from "lucide-vue-next"
 
 </script>

resources/js/components/NavUser.vue

@@ -5,7 +5,7 @@ import { useSidebar } from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown } from 'lucide-vue-next';
 import UserMenuContent from './UserMenuContent.vue';
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/crm-button'
 
 
 const page = usePage();

resources/js/components/TwoFactorRecoveryCodes.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { regenerateRecoveryCodes } from '@/routes/two-factor';

resources/js/components/TwoFactorSetupModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';

resources/js/components/documents/InvoiceDialog.vue

@@ -19,8 +19,8 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, }
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Table, TableBody, TableCell, TableHead, TableRow, } from '@/components/ui/table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button'
+import { Input } from '@/components/ui/crm-input';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
 import { StatusBadge, statusBadgeLabels } from '@/components/ui/status-badge'
 import LineItemTable from '@/components/documents/LineItemTable.vue'

resources/js/components/documents/LineItemTable.vue

@@ -2,7 +2,7 @@
 <!-- TODO: Enter in LineItem = neue Zeile -->
 <script setup lang="ts">
 
-import { ref, watch, HTMLAttributes, onUpdated, onMounted } from 'vue'
+import { ref, watch, HTMLAttributes, onUpdated } from 'vue'
 import draggable from 'vuedraggable';
 import { cn, toCurrency } from '@/lib/utils';
 import { LineItem } from '@/types';
@@ -10,12 +10,12 @@ import { newLineItem } from '@/types/index.d'
 import { Table, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from '@/components/ui/table';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"
 import { NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, } from '@/components/ui/number-field'
-import { Input } from '@/components/ui/input';
-import { Loader2, GripVertical, Trash2, Plus, TextSelect, BetweenHorizonalEnd } from 'lucide-vue-next';
-import Button from '../ui/button/Button.vue';
+import { Input } from '@/components/ui/crm-input';
+import { Loader2, GripVertical, Trash2, Plus, TextSelect } from 'lucide-vue-next';
+import { Button } from '@/components/ui/crm-button';
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '@/components/ui/empty'
-import NumberInput from '../ui/number-input/NumberInput.vue';
-import { GrowingTextarea } from '../ui/growing-textarea';
+import NumberInput from '@/components/ui/number-input/NumberInput.vue';
+import { GrowingTextarea } from '@/components/ui/growing-textarea';
 
 const props = defineProps<{
   isLoading?: boolean,

resources/js/components/ui/crm-textarea/Textarea.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { ref } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+defineExpose({
+  textareaRef
+})
+
+</script>
+
+<template>
+  <textarea ref="textareaRef" v-model="modelValue" data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)" />
+</template>

resources/js/components/ui/crm-textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"

resources/js/components/ui/send-mail-dialog/SendMailDialog.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue"
 import { type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/crm-button"
 import { Dialog, DialogContent, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/crm-input"
 import { Label } from "@/components/ui/label"
 
 const props = defineProps<DialogRootProps & {

resources/js/layouts/AppLayout.vue

@@ -5,7 +5,7 @@ import { onMounted } from 'vue';
 import 'vue-sonner/style.css'
 import { Toaster } from 'vue-sonner'
 import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/crm-button'
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/vue3';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
@@ -78,7 +78,7 @@ onMounted(() => {
     <AlertDialog v-model:open="alert.open">
         <AlertDialogContent>
             <AlertDialogHeader>
-                <AlertDialogTitle>{{ alert.title }}</AlertDialogTitle>
+                <AlertDialogTitle class="text-md">{{ alert.title }}</AlertDialogTitle>
                 <AlertDialogDescription v-if="alert.message">{{ alert.message }}</AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>

resources/js/layouts/settings/Layout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Heading from '@/components/Heading.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Separator } from '@/components/ui/separator';
 import { toUrl, urlIsActive } from '@/lib/utils';
 import { edit as editAppearance } from '@/routes/appearance';

resources/js/pages/CRM.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AppLayout from '@/layouts/AppLayout.vue';
-import { crm } from '@/routes';
 import { Head } from '@inertiajs/vue3';
 </script>
 
@@ -8,6 +7,6 @@ import { Head } from '@inertiajs/vue3';
 
     <Head title="Dashboard" />
 
-    <AppLayout>
+    <AppLayout title="Dashboard">
     </AppLayout>
 </template>

resources/js/pages/Customers.vue

@@ -7,7 +7,7 @@ import { Address, Customer } from '@/types'
 import { newCustomer } from '@/types/index.d'
 import { bgColorForString } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Input } from '@/components/ui/input'
+import { Input } from '@/components/ui/crm-input'
 import { Button } from '@/components/ui/crm-button'
 import { ButtonGroup } from '@/components/ui/button-group'
 import { Delete, Globe, House, LayoutGrid, Mail, Phone, Plus, Rows3, Search, Smartphone } from "lucide-vue-next"

resources/js/pages/Dashboard.vue

@@ -1,20 +1,9 @@
 <script setup lang="ts">
 import AppLayout from '@/layouts/AppLayout.vue';
-import { dashboard } from '@/routes';
-import { Head } from '@inertiajs/vue3';
-import PlaceholderPattern from '../components/PlaceholderPattern.vue';
 import { usePage } from '@inertiajs/vue3';
-import { Trophy, ShieldCheck, Star, ArrowRight, UserCheck, UserCheck2 } from 'lucide-vue-next';
+import { Trophy, ArrowRight, UserCheck2 } from 'lucide-vue-next';
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
+import { Table, TableCell, TableHead, TableRow, } from '@/components/ui/table';
 
 const page = usePage();
 const token = page.props.flash?.token;
@@ -65,7 +54,8 @@ if (token) {
                         </TableRow>
                         <TableRow>
                             <TableHead class="text-right px-4">Gestellt, nicht bezahlt</TableHead>
-                            <TableCell class="text-right px-4 text-destructive font-bold tabular-nums">8.637,00 €</TableCell>
+                            <TableCell class="text-right px-4 text-destructive font-bold tabular-nums">8.637,00 €
+                            </TableCell>
                         </TableRow>
                         <TableRow class="border-b-slate-600">
                             <TableHead class="text-right px-4">Noch nicht gestellt</TableHead>
@@ -77,8 +67,7 @@ if (token) {
                         </TableRow>
                     </table>
                 </div>
-                <div
-                    class="relative flex-1 overflow-y-auto">
+                <div class="relative flex-1 overflow-y-auto">
                     Aktuelle Angebote
                 </div>
             </div>

resources/js/pages/Invoices.vue

@@ -5,12 +5,12 @@ import { type Invoice } from '@/types'
 import { newInvoice } from '@/types/index.d'
 import axios from 'axios'
 import AppLayout from '@/layouts/AppLayout.vue'
+import { Button } from '@/components/ui/crm-button'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '@/components/ui/select'
-import { Button } from '@/components/ui/button'
 import DocumentTable from '@/components/documents/DocumentTable.vue'
 import { ChevronLeft, ChevronRight, Plus, Search, Delete } from "lucide-vue-next"
 import Fuse from 'fuse.js';
-import { Input } from '@/components/ui/input'
+import { Input } from '@/components/ui/crm-input'
 import SelectSeparator from '@/components/ui/select/SelectSeparator.vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'

resources/js/pages/auth/ConfirmPassword.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { store } from '@/routes/password/confirm';

resources/js/pages/auth/ForgotPassword.vue

@@ -2,8 +2,8 @@
 import PasswordResetLinkController from '@/actions/App/Http/Controllers/Auth/PasswordResetLinkController';
 import InputError from '@/components/InputError.vue';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { login } from '@/routes';

resources/js/pages/auth/Login.vue

@@ -2,9 +2,9 @@
 import AuthenticatedSessionController from '@/actions/App/Http/Controllers/Auth/AuthenticatedSessionController';
 import InputError from '@/components/InputError.vue';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Input } from '@/components/ui/input';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { register } from '@/routes';

resources/js/pages/auth/Register.vue

@@ -2,8 +2,8 @@
 import RegisteredUserController from '@/actions/App/Http/Controllers/Auth/RegisteredUserController';
 import InputError from '@/components/InputError.vue';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { login } from '@/routes';

resources/js/pages/auth/ResetPassword.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import NewPasswordController from '@/actions/App/Http/Controllers/Auth/NewPasswordController';
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { Form, Head } from '@inertiajs/vue3';

resources/js/pages/auth/TwoFactorChallenge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { store } from '@/routes/two-factor/login';

resources/js/pages/auth/VerifyEmail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import EmailVerificationNotificationController from '@/actions/App/Http/Controllers/Auth/EmailVerificationNotificationController';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { logout } from '@/routes';
 import { Form, Head } from '@inertiajs/vue3';

resources/js/pages/settings/Appearance.vue

@@ -7,7 +7,7 @@ import SettingsLayout from '@/layouts/settings/Layout.vue';
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout title="Erscheinungsbild">
         <Head title="Erscheinungsbild" />
 
         <SettingsLayout>

resources/js/pages/settings/Password.vue

@@ -6,8 +6,8 @@ import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { Form, Head } from '@inertiajs/vue3';
 import { ref } from 'vue';
 import HeadingSmall from '@/components/HeadingSmall.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 
 const passwordInput = ref<HTMLInputElement | null>(null);

resources/js/pages/settings/Profile.vue

@@ -6,8 +6,8 @@ import { Form, Link, usePage } from '@inertiajs/vue3';
 import DeleteUser from '@/components/DeleteUser.vue';
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';

resources/js/pages/settings/TwoFactor.vue

@@ -3,7 +3,7 @@ import HeadingSmall from '@/components/HeadingSmall.vue';
 import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
 import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';