bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Build [v1.14.24]

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-25 12:04:02 +03:00
parent 33c1555d8c
commit 3257a2cf48
50 changed files with 837 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/app/items/create.tsx
View File

@@ -110,18 +110,10 @@ export default function CreateItemPage() {
return (
<div
className={`flex items-center gap-2 text-xs font-normal ${
isActive ? 'text-primary' : isCompleted ? 'text-slate-400' : 'text-slate-500'
}`}
className={`flex items-center gap-2 text-xs font-normal ${ isActive ? 'text-primary' : isCompleted ? 'text-secondary' : 'text-secondary' }`}
>
<div
className={`w-6 h-6 rounded-full flex items-center justify-center ${
isActive
? 'bg-primary text-white'
: isCompleted
? 'bg-slate-400 text-white'
: 'bg-slate-700'
}`}
className={`w-6 h-6 flex items-center justify-center ${ isActive ? 'bg-primary text-foreground' : isCompleted ? 'bg-surface-bright text-foreground' : 'bg-surface-bright' }`}
>
{stepNum}
</div>
@@ -131,24 +123,24 @@ export default function CreateItemPage() {
};
return (
<div className="min-h-screen bg-slate-950 text-white p-4">
<div className="min-h-screen bg-background text-foreground p-4">
{/* Header */}
<div className="max-w-2xl mx-auto mb-6">
<button
onClick={() => router.back()}
className="flex items-center gap-2 text-sm text-slate-400 hover:text-white transition-colors mb-6"
className="flex items-center gap-2 text-sm text-secondary hover:text-foreground transition-colors mb-6"
>
<ArrowLeft size={16} />
Back
</button>
<div className="flex items-center gap-4 mb-8">
<div className="p-3 bg-primary/10 rounded-lg border border-primary/20">
<div className="p-3 bg-primary/10 border border-primary/20">
<Upload size={24} className="text-primary" />
</div>
<div>
<h1 className="text-2xl font-normal">Create New Item</h1>
<p className="text-xs text-slate-500 mt-1">
<p className="text-xs text-secondary mt-1">
Step {step === 'details' ? 1 : step === 'photo' ? 2 : step === 'preview' ? 3 : 4} of 4
</p>
</div>
@@ -167,7 +159,7 @@ export default function CreateItemPage() {
<div className="max-w-2xl mx-auto">
{/* Details Step */}
{step === 'details' && (
<div className="bg-slate-900 rounded-lg border border-slate-800 p-6">
<div className="bg-surface-container border border-outline/30 p-6">
<h2 className="text-lg font-normal mb-6">Item Details</h2>
<div className="space-y-4">
@@ -179,7 +171,7 @@ export default function CreateItemPage() {
value={formData.name}
onChange={(e) => setFormData({ name: e.target.value })}
placeholder="Enter item name"
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:border-primary focus:outline-none"
className="w-full px-3 py-2 bg-surface-container border border-outline-variant text-foreground placeholder-secondary focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
@@ -190,7 +182,7 @@ export default function CreateItemPage() {
<select
value={formData.category}
onChange={(e) => setFormData({ category: e.target.value })}
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-primary focus:outline-none"
className="w-full px-3 py-2 bg-surface-container border border-outline-variant text-foreground focus:border-primary focus:outline-none"
disabled={isLoading}
>
<option value="">Select a category</option>
@@ -210,7 +202,7 @@ export default function CreateItemPage() {
value={formData.item_type}
onChange={(e) => setFormData({ item_type: e.target.value })}
placeholder="e.g., Component, Part, Equipment"
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:border-primary focus:outline-none"
className="w-full px-3 py-2 bg-surface-container border border-outline-variant text-foreground placeholder-secondary focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
@@ -223,7 +215,7 @@ export default function CreateItemPage() {
min="1"
value={formData.quantity}
onChange={(e) => setFormData({ quantity: parseInt(e.target.value) || 1 })}
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-primary focus:outline-none"
className="w-full px-3 py-2 bg-surface-container border border-outline-variant text-foreground focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
@@ -236,7 +228,7 @@ export default function CreateItemPage() {
value={formData.part_number || ''}
onChange={(e) => setFormData({ part_number: e.target.value })}
placeholder="e.g., PN-12345"
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:border-primary focus:outline-none"
className="w-full px-3 py-2 bg-surface-container border border-outline-variant text-foreground placeholder-secondary focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
@@ -249,14 +241,14 @@ export default function CreateItemPage() {
value={formData.barcode || ''}
onChange={(e) => setFormData({ barcode: e.target.value })}
placeholder="e.g., 1234567890"
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:border-primary focus:outline-none"
className="w-full px-3 py-2 bg-surface-container border border-outline-variant text-foreground placeholder-secondary focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
{/* Error Message */}
{error && (
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
<div className="p-3 bg-error/10 border border-error/30 text-error text-sm">
{error}
</div>
)}
@@ -265,7 +257,7 @@ export default function CreateItemPage() {
<div className="flex gap-3 pt-4">
<button
onClick={() => router.back()}
className="flex-1 px-4 py-2 border border-slate-700 text-slate-300 rounded-lg hover:border-slate-600 transition-colors font-normal"
className="flex-1 px-4 py-2 border border-outline-variant text-foreground hover:border-outline-variant transition-colors font-normal"
disabled={isLoading}
>
Discard Draft
@@ -273,7 +265,7 @@ export default function CreateItemPage() {
<button
onClick={handleDetailsSubmit}
disabled={isLoading}
className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
className="flex-1 px-4 py-2 bg-primary text-foreground hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
>
{isLoading ? <Loader2 size={16} className="animate-spin" /> : <ChevronRight size={16} />}
{isLoading ? 'Creating...' : 'Next: Upload Photo'}
@@ -285,9 +277,9 @@ export default function CreateItemPage() {
{/* Photo Upload Step */}
{step === 'photo' && (
<div className="bg-slate-900 rounded-lg border border-slate-800 p-6">
<div className="bg-surface-container border border-outline/30 p-6">
<h2 className="text-lg font-normal mb-4">Upload Item Photo</h2>
<p className="text-sm text-slate-400 mb-6">
<p className="text-sm text-secondary mb-6">
Take a photo or upload an image. You can crop it manually on the next step.
</p>
@@ -304,7 +296,7 @@ export default function CreateItemPage() {
</div>
{photoError && (
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm mb-6">
<div className="p-3 bg-error/10 border border-error/30 text-error text-sm mb-6">
{photoError}
</div>
)}
@@ -313,14 +305,14 @@ export default function CreateItemPage() {
<div className="flex gap-3">
<button
onClick={prevStep}
className="flex-1 px-4 py-2 border border-slate-700 text-slate-300 rounded-lg hover:border-slate-600 transition-colors font-normal"
className="flex-1 px-4 py-2 border border-outline-variant text-foreground hover:border-outline transition-colors font-normal"
>
Back
</button>
<button
onClick={nextStep}
disabled={!uploadedPhoto}
className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:bg-slate-700 disabled:text-slate-500 transition-colors font-normal flex items-center justify-center gap-2"
className="flex-1 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-surface-bright disabled:text-secondary transition-colors font-normal flex items-center justify-center gap-2"
>
<ChevronRight size={16} />
Next: Crop & Preview
@@ -331,13 +323,13 @@ export default function CreateItemPage() {
{/* Preview Step (Crop) */}
{step === 'preview' && uploadedPhoto && (
<div className="bg-slate-900 rounded-lg border border-slate-800 p-6">
<div className="bg-surface-container border border-outline/30 p-6">
<h2 className="text-lg font-normal mb-4">Crop & Preview</h2>
<p className="text-sm text-slate-400 mb-6">
<p className="text-sm text-secondary mb-6">
Adjust the crop area or use the full photo. Manual crop handles are visible.
</p>
<div className="mb-6 bg-slate-800 rounded-lg p-4">
<div className="mb-6 bg-background p-4 border border-outline/20">
<ManualCropUI
imageUrl={uploadedPhoto.full_url}
onCropChange={setCropBounds}
@@ -346,7 +338,7 @@ export default function CreateItemPage() {
</div>
{/* Use Full Photo Toggle */}
<div className="flex items-center gap-3 mb-6 p-3 bg-slate-800 rounded-lg">
<div className="flex items-center gap-3 mb-6 p-3 bg-surface-bright border border-outline/20">
<input
type="checkbox"
id="use-full-photo"
@@ -357,9 +349,9 @@ export default function CreateItemPage() {
setCropBounds(null);
}
}}
className="w-4 h-4 rounded border-slate-600 accent-primary"
className="w-4 h-4 border-outline-variant accent-primary"
/>
<label htmlFor="use-full-photo" className="text-sm font-normal text-slate-300">
<label htmlFor="use-full-photo" className="text-sm font-normal text-foreground">
Use full photo (skip cropping)
</label>
</div>
@@ -368,13 +360,13 @@ export default function CreateItemPage() {
<div className="flex gap-3">
<button
onClick={prevStep}
className="flex-1 px-4 py-2 border border-slate-700 text-slate-300 rounded-lg hover:border-slate-600 transition-colors font-normal"
className="flex-1 px-4 py-2 border border-outline-variant text-foreground hover:border-outline transition-colors font-normal"
>
Back
</button>
<button
onClick={nextStep}
className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
className="flex-1 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
>
<ChevronRight size={16} />
Next: Confirm
@@ -385,31 +377,31 @@ export default function CreateItemPage() {
{/* Confirm Step */}
{step === 'confirm' && (
<div className="bg-slate-900 rounded-lg border border-slate-800 p-6">
<div className="bg-surface-container border border-outline/30 p-6">
<h2 className="text-lg font-normal mb-6">Confirm & Save</h2>
{/* Item Summary */}
<div className="bg-slate-800 rounded-lg p-4 mb-6 space-y-2">
<div className="bg-surface-bright p-4 mb-6 space-y-2 border border-outline/20">
<div className="flex justify-between text-sm">
<span className="text-slate-400">Name:</span>
<span className="font-normal">{formData.name}</span>
<span className="text-secondary">Name:</span>
<span className="font-normal text-foreground">{formData.name}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-slate-400">Category:</span>
<span className="font-normal">{formData.category}</span>
<span className="text-secondary">Category:</span>
<span className="font-normal text-foreground">{formData.category}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-slate-400">Type:</span>
<span className="font-normal">{formData.item_type}</span>
<span className="text-secondary">Type:</span>
<span className="font-normal text-foreground">{formData.item_type}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-slate-400">Quantity:</span>
<span className="font-normal">{formData.quantity}</span>
<span className="text-secondary">Quantity:</span>
<span className="font-normal text-foreground">{formData.quantity}</span>
</div>
{uploadedPhoto && (
<div className="flex justify-between text-sm">
<span className="text-slate-400">Photo:</span>
<span className="font-normal text-green-400">Uploaded</span>
<span className="text-secondary">Photo:</span>
<span className="font-normal text-success">Uploaded</span>
</div>
)}
</div>
@@ -417,12 +409,14 @@ export default function CreateItemPage() {
{/* Photo Thumbnail */}
{uploadedPhoto && (
<div className="mb-6">
<p className="text-sm text-slate-400 mb-2">Photo Preview</p>
<img
src={uploadedPhoto.thumbnail_url}
alt="Item"
className="w-full h-48 object-cover rounded-lg"
/>
<p className="text-sm text-secondary mb-2">Photo Preview</p>
<div className="border border-outline/30 overflow-hidden">
<img
src={uploadedPhoto.thumbnail_url}
alt="Item"
className="w-full h-48 object-cover"
/>
</div>
</div>
)}
@@ -430,13 +424,13 @@ export default function CreateItemPage() {
<div className="flex gap-3">
<button
onClick={prevStep}
className="flex-1 px-4 py-2 border border-slate-700 text-slate-300 rounded-lg hover:border-slate-600 transition-colors font-normal"
className="flex-1 px-4 py-2 border border-outline-variant text-foreground hover:border-outline transition-colors font-normal"
>
Back
</button>
<button
onClick={handleConfirm}
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-normal flex items-center justify-center gap-2"
className="flex-1 px-4 py-2 bg-success text-foreground hover:bg-success/80 transition-colors font-normal flex items-center justify-center gap-2 shadow-lg shadow-success/20"
>
Save & Close
</button>