Compare commits
No commits in common. "221a0f879dc28f06aef62625c950463256d163b7" and "6e76ce9c68ea8b724b00906da79a37aca1dfdd45" have entirely different histories.
221a0f879d
...
6e76ce9c68
9 changed files with 237 additions and 50 deletions
|
|
@ -3,14 +3,14 @@ import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
|
||||||
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
|
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
type FormType = 'purchase' | 'milestone' | 'price';
|
|
||||||
|
|
||||||
interface InlineFormProps {
|
interface InlineFormProps {
|
||||||
type: FormType | null;
|
type: 'purchase' | 'milestone' | 'price' | null;
|
||||||
unit?: string;
|
unit?: string;
|
||||||
priceTrackingEnabled?: boolean;
|
priceTrackingEnabled?: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSuccess?: (type: FormType) => void;
|
onPurchaseSuccess?: () => void;
|
||||||
|
onMilestoneSuccess?: () => void;
|
||||||
|
onPriceSuccess?: () => void;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -19,16 +19,13 @@ export default function InlineForm({
|
||||||
unit = 'units',
|
unit = 'units',
|
||||||
priceTrackingEnabled = false,
|
priceTrackingEnabled = false,
|
||||||
onClose,
|
onClose,
|
||||||
onSuccess,
|
onPurchaseSuccess,
|
||||||
|
onMilestoneSuccess,
|
||||||
|
onPriceSuccess,
|
||||||
className,
|
className,
|
||||||
}: InlineFormProps) {
|
}: InlineFormProps) {
|
||||||
if (!type) return null;
|
if (!type) return null;
|
||||||
|
|
||||||
const handleSuccess = () => {
|
|
||||||
if (onSuccess) onSuccess(type);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|
@ -43,17 +40,26 @@ export default function InlineForm({
|
||||||
<AddEntryForm
|
<AddEntryForm
|
||||||
unit={unit}
|
unit={unit}
|
||||||
priceTrackingEnabled={priceTrackingEnabled}
|
priceTrackingEnabled={priceTrackingEnabled}
|
||||||
onSuccess={handleSuccess}
|
onSuccess={() => {
|
||||||
|
if (onPurchaseSuccess) onPurchaseSuccess();
|
||||||
|
onClose();
|
||||||
|
}}
|
||||||
onCancel={onClose}
|
onCancel={onClose}
|
||||||
/>
|
/>
|
||||||
) : type === 'milestone' ? (
|
) : type === 'milestone' ? (
|
||||||
<AddMilestoneForm
|
<AddMilestoneForm
|
||||||
onSuccess={handleSuccess}
|
onSuccess={() => {
|
||||||
|
if (onMilestoneSuccess) onMilestoneSuccess();
|
||||||
|
onClose();
|
||||||
|
}}
|
||||||
onCancel={onClose}
|
onCancel={onClose}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<UpdatePriceForm
|
<UpdatePriceForm
|
||||||
onSuccess={handleSuccess}
|
onSuccess={() => {
|
||||||
|
if (onPriceSuccess) onPriceSuccess();
|
||||||
|
onClose();
|
||||||
|
}}
|
||||||
onCancel={onClose}
|
onCancel={onClose}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,10 @@
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import type { Milestone } from '@/types/domain';
|
|
||||||
|
interface Milestone {
|
||||||
|
target: number;
|
||||||
|
description: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface ProgressBarProps {
|
interface ProgressBarProps {
|
||||||
currentQuantity: number;
|
currentQuantity: number;
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,12 @@ import { cn } from '@/lib/utils';
|
||||||
import { Plus, ChevronRight } from 'lucide-react';
|
import { Plus, ChevronRight } from 'lucide-react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import ComponentTitle from '@/components/ui/ComponentTitle';
|
import ComponentTitle from '@/components/ui/ComponentTitle';
|
||||||
import type { Milestone } from '@/types/domain';
|
|
||||||
|
interface Milestone {
|
||||||
|
target: number;
|
||||||
|
description: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface StatsBoxProps {
|
interface StatsBoxProps {
|
||||||
stats: {
|
stats: {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@ import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import InputError from '@/components/InputError';
|
import InputError from '@/components/InputError';
|
||||||
import { useForm } from '@inertiajs/react';
|
import { useForm } from '@inertiajs/react';
|
||||||
import { todayISO } from '@/lib/utils';
|
|
||||||
import { LoaderCircle } from 'lucide-react';
|
import { LoaderCircle } from 'lucide-react';
|
||||||
import { FormEventHandler } from 'react';
|
import { FormEventHandler } from 'react';
|
||||||
import ComponentTitle from '@/components/ui/ComponentTitle';
|
import ComponentTitle from '@/components/ui/ComponentTitle';
|
||||||
|
|
@ -23,7 +22,7 @@ interface UpdatePriceFormProps {
|
||||||
|
|
||||||
export default function UpdatePriceForm({ currentPrice, className, onSuccess, onCancel }: UpdatePriceFormProps) {
|
export default function UpdatePriceForm({ currentPrice, className, onSuccess, onCancel }: UpdatePriceFormProps) {
|
||||||
const { data, setData, post, processing, errors } = useForm<PriceUpdateFormData>({
|
const { data, setData, post, processing, errors } = useForm<PriceUpdateFormData>({
|
||||||
date: todayISO(), // Today's date in YYYY-MM-DD format
|
date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format
|
||||||
price: currentPrice?.toString() || '100.00',
|
price: currentPrice?.toString() || '100.00',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -61,7 +60,7 @@ export default function UpdatePriceForm({ currentPrice, className, onSuccess, on
|
||||||
type="date"
|
type="date"
|
||||||
value={data.date}
|
value={data.date}
|
||||||
onChange={(e) => setData('date', e.target.value)}
|
onChange={(e) => setData('date', e.target.value)}
|
||||||
max={todayISO()}
|
max={new Date().toISOString().split('T')[0]}
|
||||||
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none transition-all glow-red"
|
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none transition-all glow-red"
|
||||||
/>
|
/>
|
||||||
<InputError message={errors.date} />
|
<InputError message={errors.date} />
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@ import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import InputError from '@/components/InputError';
|
import InputError from '@/components/InputError';
|
||||||
import { useForm } from '@inertiajs/react';
|
import { useForm } from '@inertiajs/react';
|
||||||
import { todayISO } from '@/lib/utils';
|
|
||||||
import { LoaderCircle } from 'lucide-react';
|
import { LoaderCircle } from 'lucide-react';
|
||||||
import { FormEventHandler, useEffect, useState } from 'react';
|
import { FormEventHandler, useEffect, useState } from 'react';
|
||||||
import ComponentTitle from '@/components/ui/ComponentTitle';
|
import ComponentTitle from '@/components/ui/ComponentTitle';
|
||||||
|
|
@ -31,7 +30,7 @@ interface EntrySummary {
|
||||||
|
|
||||||
export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = false, onSuccess, onCancel }: AddEntryFormProps) {
|
export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = false, onSuccess, onCancel }: AddEntryFormProps) {
|
||||||
const { data, setData, post, processing, errors, reset } = useForm<EntryFormData>({
|
const { data, setData, post, processing, errors, reset } = useForm<EntryFormData>({
|
||||||
date: todayISO(),
|
date: new Date().toISOString().split('T')[0],
|
||||||
quantity: '',
|
quantity: '',
|
||||||
unit_price: '',
|
unit_price: '',
|
||||||
total_cost: '',
|
total_cost: '',
|
||||||
|
|
@ -73,7 +72,7 @@ export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = fa
|
||||||
post(route('entries.store'), {
|
post(route('entries.store'), {
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
reset();
|
reset();
|
||||||
setData('date', todayISO());
|
setData('date', new Date().toISOString().split('T')[0]);
|
||||||
if (onSuccess) onSuccess();
|
if (onSuccess) onSuccess();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -97,7 +96,7 @@ export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = fa
|
||||||
type="date"
|
type="date"
|
||||||
value={data.date}
|
value={data.date}
|
||||||
onChange={(e) => setData('date', e.target.value)}
|
onChange={(e) => setData('date', e.target.value)}
|
||||||
max={todayISO()}
|
max={new Date().toISOString().split('T')[0]}
|
||||||
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none transition-all glow-red"
|
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none transition-all glow-red"
|
||||||
/>
|
/>
|
||||||
<InputError message={errors.date} />
|
<InputError message={errors.date} />
|
||||||
|
|
|
||||||
178
resources/js/components/Transactions/AddPurchaseForm.tsx
Normal file
178
resources/js/components/Transactions/AddPurchaseForm.tsx
Normal file
|
|
@ -0,0 +1,178 @@
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import InputError from '@/components/InputError';
|
||||||
|
import { useForm } from '@inertiajs/react';
|
||||||
|
import { LoaderCircle } from 'lucide-react';
|
||||||
|
import { FormEventHandler, useEffect, useState } from 'react';
|
||||||
|
import ComponentTitle from '@/components/ui/ComponentTitle';
|
||||||
|
|
||||||
|
interface PurchaseFormData {
|
||||||
|
date: string;
|
||||||
|
shares: string;
|
||||||
|
price_per_share: string;
|
||||||
|
total_cost: string;
|
||||||
|
[key: string]: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AddPurchaseFormProps {
|
||||||
|
onSuccess?: () => void;
|
||||||
|
onCancel?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PurchaseSummary {
|
||||||
|
total_shares: number;
|
||||||
|
total_investment: number;
|
||||||
|
average_cost_per_share: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AddPurchaseForm({ onSuccess, onCancel }: AddPurchaseFormProps) {
|
||||||
|
const { data, setData, post, processing, errors, reset } = useForm<PurchaseFormData>({
|
||||||
|
date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format
|
||||||
|
shares: '',
|
||||||
|
price_per_share: '',
|
||||||
|
total_cost: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const [currentHoldings, setCurrentHoldings] = useState<PurchaseSummary | null>(null);
|
||||||
|
|
||||||
|
// Load existing holdings data on mount
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchCurrentHoldings = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/purchases/summary');
|
||||||
|
if (response.ok) {
|
||||||
|
const summary = await response.json();
|
||||||
|
setCurrentHoldings(summary);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch current holdings:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchCurrentHoldings();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Auto-calculate total cost when shares or price changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (data.shares && data.price_per_share) {
|
||||||
|
const shares = parseFloat(data.shares);
|
||||||
|
const pricePerShare = parseFloat(data.price_per_share);
|
||||||
|
|
||||||
|
if (!isNaN(shares) && !isNaN(pricePerShare)) {
|
||||||
|
const totalCost = (shares * pricePerShare).toFixed(2);
|
||||||
|
setData('total_cost', totalCost);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [data.shares, data.price_per_share, setData]);
|
||||||
|
|
||||||
|
const submit: FormEventHandler = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
post(route('purchases.store'), {
|
||||||
|
onSuccess: () => {
|
||||||
|
reset();
|
||||||
|
setData('date', new Date().toISOString().split('T')[0]);
|
||||||
|
if (onSuccess) {
|
||||||
|
onSuccess();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<ComponentTitle>ADD PURCHASE</ComponentTitle>
|
||||||
|
{currentHoldings && currentHoldings.total_shares > 0 && (
|
||||||
|
<p className="text-sm text-red-400/60 font-mono">
|
||||||
|
[CURRENT] {currentHoldings.total_shares.toFixed(6)} shares • €{currentHoldings.total_investment.toFixed(2)} invested
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<form onSubmit={submit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="date" className="text-red-400 font-mono text-xs uppercase tracking-wider">> Purchase Date</Label>
|
||||||
|
<Input
|
||||||
|
id="date"
|
||||||
|
type="date"
|
||||||
|
value={data.date}
|
||||||
|
onChange={(e) => setData('date', e.target.value)}
|
||||||
|
max={new Date().toISOString().split('T')[0]}
|
||||||
|
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none transition-all glow-red"
|
||||||
|
/>
|
||||||
|
<InputError message={errors.date} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="shares" className="text-red-400 font-mono text-xs uppercase tracking-wider">> Number of Shares</Label>
|
||||||
|
<Input
|
||||||
|
id="shares"
|
||||||
|
type="number"
|
||||||
|
step="0.000001"
|
||||||
|
min="0"
|
||||||
|
placeholder="1.234567"
|
||||||
|
value={data.shares}
|
||||||
|
onChange={(e) => setData('shares', e.target.value)}
|
||||||
|
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-red-400/40 transition-all glow-red"
|
||||||
|
/>
|
||||||
|
<InputError message={errors.shares} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="price_per_share" className="text-red-400 font-mono text-xs uppercase tracking-wider">> Price per Share (€)</Label>
|
||||||
|
<Input
|
||||||
|
id="price_per_share"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
placeholder="123.45"
|
||||||
|
value={data.price_per_share}
|
||||||
|
onChange={(e) => setData('price_per_share', e.target.value)}
|
||||||
|
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-red-400/40 transition-all glow-red"
|
||||||
|
/>
|
||||||
|
<InputError message={errors.price_per_share} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="total_cost" className="text-red-400 font-mono text-xs uppercase tracking-wider">> Total Cost (€)</Label>
|
||||||
|
<Input
|
||||||
|
id="total_cost"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
placeholder="1234.56"
|
||||||
|
value={data.total_cost}
|
||||||
|
onChange={(e) => setData('total_cost', e.target.value)}
|
||||||
|
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-red-400/40 transition-all glow-red"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-red-400/60 mt-1 font-mono">
|
||||||
|
[AUTO-CALC] shares × price
|
||||||
|
</p>
|
||||||
|
<InputError message={errors.total_cost} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-2">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={processing}
|
||||||
|
className="flex-1 bg-red-500 hover:bg-red-500 text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red"
|
||||||
|
>
|
||||||
|
{processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
[EXECUTE]
|
||||||
|
</Button>
|
||||||
|
{onCancel && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={onCancel}
|
||||||
|
className="flex-1 bg-black border-red-500 text-red-400 hover:bg-red-950 hover:text-red-300 font-mono text-sm font-bold rounded-none border-2 uppercase tracking-wider transition-all glow-red"
|
||||||
|
>
|
||||||
|
[ABORT]
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -4,5 +4,3 @@ import { twMerge } from 'tailwind-merge';
|
||||||
export function cn(...inputs: ClassValue[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs));
|
return twMerge(clsx(inputs));
|
||||||
}
|
}
|
||||||
|
|
||||||
export const todayISO = (): string => new Date().toISOString().split('T')[0];
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@ import OnboardingFlow from '@/components/Onboarding/OnboardingFlow';
|
||||||
import TerminalSpinner from '@/components/ui/TerminalSpinner';
|
import TerminalSpinner from '@/components/ui/TerminalSpinner';
|
||||||
import { Head } from '@inertiajs/react';
|
import { Head } from '@inertiajs/react';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import type { Milestone, Tracker, TrackerAsset } from '@/types/domain';
|
|
||||||
|
|
||||||
interface PurchaseSummary {
|
interface PurchaseSummary {
|
||||||
total_shares: number;
|
total_shares: number;
|
||||||
|
|
@ -18,6 +17,26 @@ interface CurrentPrice {
|
||||||
current_price: number | null;
|
current_price: number | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface Milestone {
|
||||||
|
target: number;
|
||||||
|
description: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TrackerAsset {
|
||||||
|
id: number;
|
||||||
|
symbol: string;
|
||||||
|
full_name: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Tracker {
|
||||||
|
id: number;
|
||||||
|
label: string;
|
||||||
|
unit: string;
|
||||||
|
price_tracking_enabled: boolean;
|
||||||
|
asset: TrackerAsset | null;
|
||||||
|
}
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const [purchaseData, setPurchaseData] = useState<PurchaseSummary>({
|
const [purchaseData, setPurchaseData] = useState<PurchaseSummary>({
|
||||||
total_shares: 0,
|
total_shares: 0,
|
||||||
|
|
@ -292,11 +311,9 @@ export default function Dashboard() {
|
||||||
unit={tracker?.unit}
|
unit={tracker?.unit}
|
||||||
priceTrackingEnabled={priceTrackingEnabled}
|
priceTrackingEnabled={priceTrackingEnabled}
|
||||||
onClose={() => setActiveForm(null)}
|
onClose={() => setActiveForm(null)}
|
||||||
onSuccess={(type) => {
|
onPurchaseSuccess={handlePurchaseSuccess}
|
||||||
if (type === 'purchase') handlePurchaseSuccess();
|
onMilestoneSuccess={handleMilestoneSuccess}
|
||||||
else if (type === 'milestone') handleMilestoneSuccess();
|
onPriceSuccess={handlePriceSuccess}
|
||||||
else if (type === 'price') handlePriceSuccess();
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export interface Milestone {
|
|
||||||
id?: number;
|
|
||||||
target: number;
|
|
||||||
description: string;
|
|
||||||
created_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TrackerAsset {
|
|
||||||
id: number;
|
|
||||||
symbol: string;
|
|
||||||
full_name: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Tracker {
|
|
||||||
id: number;
|
|
||||||
label: string;
|
|
||||||
unit: string;
|
|
||||||
price_tracking_enabled: boolean;
|
|
||||||
asset: TrackerAsset | null;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue