TAKE THIS CODE:
[{
	"resource": "/c:/Users/LucaP/Desktop/journaling-app/src/app/dashboard/tags/page.tsx",
	"owner": "typescript",
	"code": "2345",
	"severity": 8,
	"message": "Argument of type 'string | undefined' is not assignable to parameter of type 'string'.\n  Type 'undefined' is not assignable to type 'string'.",
	"source": "ts",
	"startLineNumber": 182,
	"startColumn": 133,
	"endLineNumber": 182,
	"endColumn": 142
},{
	"resource": "/c:/Users/LucaP/Desktop/journaling-app/src/app/dashboard/tags/page.tsx",
	"owner": "typescript",
	"code": "1005",
	"severity": 8,
	"message": "')' expected.",
	"source": "ts",
	"startLineNumber": 215,
	"startColumn": 5,
	"endLineNumber": 215,
	"endColumn": 6
}]

AND UPDATE IT WITH:
'use client'

import { useState, useEffect } from 'react';
import { Tag, TagType, TAG_TYPES } from '@/types/tag';
import { Button } from "@/components/ui/button";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Plus, X } from 'lucide-react';
import { Badge } from "@/components/ui/badge";

// High-impact color combinations with better contrast
const VIBRANT_COLORS = [
    { bg: '#FF3366', gradient: '#FF0044' }, // Hot pink with gradient
    { bg: '#4CAF50', gradient: '#45A049' }, // Vivid green
    { bg: '#2196F3', gradient: '#1E88E5' }, // Bright blue
    { bg: '#FF9800', gradient: '#F57C00' }, // Vivid orange
    { bg: '#9C27B0', gradient: '#8E24AA' }, // Rich purple
    { bg: '#00BCD4', gradient: '#00ACC1' }, // Bright cyan
    { bg: '#FFC107', gradient: '#FFB300' }, // Vivid amber
    { bg: '#E91E63', gradient: '#D81B60' }, // Deep pink
    { bg: '#3F51B5', gradient: '#3949AB' }, // Indigo
    { bg: '#009688', gradient: '#00897B' }, // Teal
];

export default function TagsPage() {
    const [tags, setTags] = useState<Tag[]>([]);
    const [newTagName, setNewTagName] = useState('');
    const [selectedType, setSelectedType] = useState<TagType>('TRADE_JOURNAL');
    const [isCreating, setIsCreating] = useState(false);

    const generateTagColor = (): string => {
        const colorSet = VIBRANT_COLORS[Math.floor(Math.random() * VIBRANT_COLORS.length)];
        return colorSet.bg;
    };

    const getGradientColor = (baseColor: string): string => {
        const colorSet = VIBRANT_COLORS.find(c => c.bg === baseColor);
        return colorSet ? colorSet.gradient : baseColor;
    };

    const getContrastColor = (bgColor: string): string => {
        const hex = bgColor.replace('#', '');
        const r = parseInt(hex.substring(0, 2), 16);
        const g = parseInt(hex.substring(2, 4), 16);
        const b = parseInt(hex.substring(4, 6), 16);
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        return luminance > 0.5 ? '#000000' : '#ffffff';
    };

    // ... [keeping your existing useEffect and handle functions] ...

    return (
        <div className="container mx-auto py-6">
            <div className="flex justify-between items-center mb-6">
                <h1 className="text-2xl font-bold">Tag Management</h1>
                <Button 
                    onClick={() => setIsCreating(true)} 
                    className="flex items-center gap-2 rounded-full hover:scale-105 transition-transform"
                >
                    <Plus className="w-4 h-4" /> Add New Tag
                </Button>
            </div>

            {isCreating && (
                <Card className="mb-6">
                    <CardHeader>
                        <CardTitle>Create New Tag</CardTitle>
                        <CardDescription>Add a new tag to organize your trades and journal entries</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="flex gap-4">
                            <Input
                                value={newTagName}
                                onChange={(e) => setNewTagName(e.target.value)}
                                placeholder="Enter tag name..."
                                className="flex-1 rounded-full"
                            />
                            <Select value={selectedType} onValueChange={handleTypeChange}>
                                <SelectTrigger className="w-[200px] rounded-full">
                                    <SelectValue placeholder="Select type" />
                                </SelectTrigger>
                                <SelectContent>
                                    {Object.values(TAG_TYPES).map((type) => (
                                        <SelectItem key={type} value={type}>
                                            {type.replace(/_/g, ' ')}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                            <Button onClick={createTag} className="rounded-full">Create</Button>
                            <Button variant="ghost" onClick={() => setIsCreating(false)} className="rounded-full">Cancel</Button>
                        </div>
                    </CardContent>
                </Card>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {Object.entries(groupedTags).map(([type, tagsList]) => (
                    <Card key={type}>
                        <CardHeader>
                            <CardTitle>{type.replace(/_/g, ' ')}</CardTitle>
                            <CardDescription>{tagsList.length} tags</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="flex flex-wrap gap-2">
                                {tagsList.map(tag => (
                                    <Badge
                                        key={tag.id}
                                        variant={tag.active ? "default" : "secondary"}
                                        className="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-200 hover:scale-105 hover:shadow-lg"
                                        style={{
                                            backgroundColor: tag.active ? (tag.color || '#e5e7eb') : '#e5e7eb',
                                            backgroundImage: tag.active && tag.color ? `linear-gradient(135deg, ${tag.color}, ${getGradientColor(tag.color)})` : 'none',
                                            color: tag.active && tag.color ? getContrastColor(tag.color || '') : undefined,
                                            fontSize: '0.9rem',
                                            fontWeight: '600',
                                            letterSpacing: '0.02em',
                                            border: 'none',
                                            boxShadow: tag.active ? '0 2px 4px rgba(0,0,0,0.2)' : 'none',
                                            textShadow: tag.active ? '0 1px 2px rgba(0,0,0,0.1)' : 'none'
                                        }}
                                    >
                                        {tag.name}
                                        <button
                                            onClick={() => toggleTagActive(tag.id, !tag.active)}
                                            className="hover:scale-110 transition-transform ml-1"
                                            style={{
                                                opacity: 0.8,
                                                padding: '2px',
                                                borderRadius: '50%',
                                                display: 'flex',
                                                alignItems: 'center',
                                                justifyContent: 'center'
                                            }}
                                        >
                                            <X className="w-3.5 h-3.5" />
                                        </button>
                                    </Badge>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        </div>
    );
}

only RTURN UPDATED CODE