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

Build [v1.14.31]

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-25 12:53:41 +03:00
parent d0f166a370
commit de8c5c7135
42 changed files with 441 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -111,16 +111,16 @@ 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'
isActive ? 'text-primary' : isCompleted ? 'text-secondary' : 'text-secondary'
}`}
>
<div
className={`w-6 h-6 rounded-full flex items-center justify-center ${
className={`w-6 h-6 rounded-none flex items-center justify-center ${
isActive
? 'bg-primary text-white'
: isCompleted
? 'bg-slate-400 text-white'
: 'bg-slate-700'
: 'bg-[#222222]'
}`}
>
{stepNum}
@@ -131,24 +131,24 @@ export default function CreateItemPage() {
};
return (
<div className="min-h-screen bg-slate-950 text-white p-4">
<div className="min-h-screen bg-surface text-white 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-white 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 rounded-none 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 +167,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 rounded-none border border-border p-6">
<h2 className="text-lg font-normal mb-6">Item Details</h2>
<div className="space-y-4">
@@ -179,7 +179,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-bright border border-border rounded-none text-white placeholder-slate-500 focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
@@ -190,7 +190,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-bright border border-border rounded-none text-white focus:border-primary focus:outline-none"
disabled={isLoading}
>
<option value="">Select a category</option>
@@ -210,7 +210,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-bright border border-border rounded-none text-white placeholder-slate-500 focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
@@ -223,7 +223,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-bright border border-border rounded-none text-white focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
@@ -236,7 +236,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-bright border border-border rounded-none text-white placeholder-slate-500 focus:border-primary focus:outline-none"
disabled={isLoading}
/>
</div>
@@ -249,14 +249,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-bright border border-border rounded-none text-white placeholder-slate-500 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-red-500/10 border border-red-500/30 rounded-none text-red-400 text-sm">
{error}
</div>
)}
@@ -265,7 +265,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-border text-[#CCCCCC] rounded-none hover:border-slate-600 transition-colors font-normal"
disabled={isLoading}
>
Discard Draft
@@ -273,7 +273,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-white rounded-none 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 +285,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 rounded-none border border-border 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 +304,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-red-500/10 border border-red-500/30 rounded-none text-red-400 text-sm mb-6">
{photoError}
</div>
)}
@@ -313,14 +313,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-border text-[#CCCCCC] rounded-none hover:border-slate-600 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-white rounded-none hover:bg-primary/90 disabled:bg-[#222222] disabled:text-secondary transition-colors font-normal flex items-center justify-center gap-2"
>
<ChevronRight size={16} />
Next: Crop & Preview
@@ -331,13 +331,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 rounded-none border border-border 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-surface-bright rounded-none p-4">
<ManualCropUI
imageUrl={uploadedPhoto.full_url}
onCropChange={setCropBounds}
@@ -346,7 +346,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 rounded-none">
<input
type="checkbox"
id="use-full-photo"
@@ -359,7 +359,7 @@ export default function CreateItemPage() {
}}
className="w-4 h-4 rounded border-slate-600 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-[#CCCCCC]">
Use full photo (skip cropping)
</label>
</div>
@@ -368,13 +368,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-border text-[#CCCCCC] rounded-none hover:border-slate-600 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-white rounded-none hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
>
<ChevronRight size={16} />
Next: Confirm
@@ -385,30 +385,30 @@ 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 rounded-none border border-border 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 rounded-none p-4 mb-6 space-y-2">
<div className="flex justify-between text-sm">
<span className="text-slate-400">Name:</span>
<span className="text-secondary">Name:</span>
<span className="font-normal">{formData.name}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-slate-400">Category:</span>
<span className="text-secondary">Category:</span>
<span className="font-normal">{formData.category}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-slate-400">Type:</span>
<span className="text-secondary">Type:</span>
<span className="font-normal">{formData.item_type}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-slate-400">Quantity:</span>
<span className="text-secondary">Quantity:</span>
<span className="font-normal">{formData.quantity}</span>
</div>
{uploadedPhoto && (
<div className="flex justify-between text-sm">
<span className="text-slate-400">Photo:</span>
<span className="text-secondary">Photo:</span>
<span className="font-normal text-green-400">Uploaded</span>
</div>
)}
@@ -417,11 +417,11 @@ export default function CreateItemPage() {
{/* Photo Thumbnail */}
{uploadedPhoto && (
<div className="mb-6">
<p className="text-sm text-slate-400 mb-2">Photo Preview</p>
<p className="text-sm text-secondary mb-2">Photo Preview</p>
<img
src={uploadedPhoto.thumbnail_url}
alt="Item"
className="w-full h-48 object-cover rounded-lg"
className="w-full h-48 object-cover rounded-none"
/>
</div>
)}
@@ -430,13 +430,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-border text-[#CCCCCC] rounded-none hover:border-slate-600 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-green-600 text-white rounded-none hover:bg-green-700 transition-colors font-normal flex items-center justify-center gap-2"
>
Save & Close
</button>