Fix spool-only materials to allow spool option when using refill-only colors

- Update isRefillOnly function to check spool-only status first
- Spool-only finishes now override refill-only color restrictions
- PLA Metal and Silk+ with refill-only colors now correctly enable spool option
- Reorder function definitions to avoid circular dependency
- Add type parameter to all isRefillOnly function calls

app/upadaj/dashboard/page.tsx

@@ -30,8 +30,17 @@ const REFILL_ONLY_COLORS = [
   'Dark Gray'
 ];
 
+// Helper function to check if a filament is spool-only
+const isSpoolOnly = (finish?: string, type?: string): boolean => {
+  return finish === 'Translucent' || finish === 'Metal' || finish === 'Silk+' || (type === 'PPA' && finish === 'CF') || type === 'PA6' || type === 'PC';
+};
+
 // Helper function to check if a filament should be refill-only
-const isRefillOnly = (color: string, finish?: string): boolean => {
+const isRefillOnly = (color: string, finish?: string, type?: string): boolean => {
+  // If the finish/type combination is spool-only, then it's not refill-only
+  if (isSpoolOnly(finish, type)) {
+    return false;
+  }
   // Translucent finish always has spool option
   if (finish === 'Translucent') {
     return false;
@@ -39,11 +48,6 @@ const isRefillOnly = (color: string, finish?: string): boolean => {
   return REFILL_ONLY_COLORS.includes(color);
 };
 
-// Helper function to check if a filament is spool-only
-const isSpoolOnly = (finish?: string, type?: string): boolean => {
-  return finish === 'Translucent' || finish === 'Metal' || finish === 'Silk+' || (type === 'PPA' && finish === 'CF') || type === 'PA6' || type === 'PC';
-};
-
 // Helper function to filter colors based on material and finish
 const getFilteredColors = (colors: Array<{id: string, name: string, hex: string, cena_refill?: number, cena_spulna?: number}>, type?: string, finish?: string) => {
   // PPA CF only has black color
@@ -681,7 +685,7 @@ function FilamentForm({
     boja: filament.boja || '',
     boja_hex: filament.boja_hex || '',
     refill: isSpoolOnly(filament.finish, filament.tip) ? 0 : (filament.refill || 0),  // Store as number
-    spulna: isRefillOnly(filament.boja || '', filament.finish) ? 0 : (filament.spulna || 0), // Store as number
+    spulna: isRefillOnly(filament.boja || '', filament.finish, filament.tip) ? 0 : (filament.spulna || 0), // Store as number
     kolicina: filament.kolicina || 0,  // Default to 0, stored as number
     cena: '', // Price is now determined by color selection
     cena_refill: 0,
@@ -745,7 +749,7 @@ function FilamentForm({
       });
     } else if (name === 'boja') {
       // If changing to a refill-only color, reset spulna to 0
-      const refillOnly = isRefillOnly(value, formData.finish);
+      const refillOnly = isRefillOnly(value, formData.finish, formData.tip);
       setFormData({
         ...formData,
         [name]: value,
@@ -753,7 +757,7 @@ function FilamentForm({
       });
     } else if (name === 'finish') {
       // If changing to Translucent finish, enable spool option and disable refill
-      const refillOnly = isRefillOnly(formData.boja, value);
+      const refillOnly = isRefillOnly(formData.boja, value, formData.tip);
       const spoolOnly = isSpoolOnly(value, formData.tip);
       // If changing to PPA CF and current color is not black, reset color
       const needsColorReset = formData.tip === 'PPA' && value === 'CF' && formData.boja.toLowerCase() !== 'black';
@@ -993,7 +997,7 @@ function FilamentForm({
         <div>
           <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
             Spulna
-            {isRefillOnly(formData.boja, formData.finish) && (
+            {isRefillOnly(formData.boja, formData.finish, formData.tip) && (
               <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">(samo refil postoji)</span>
             )}
           </label>
@@ -1005,9 +1009,9 @@ function FilamentForm({
             min="0"
             step="1"
             placeholder="0"
-            disabled={isRefillOnly(formData.boja, formData.finish)}
+            disabled={isRefillOnly(formData.boja, formData.finish, formData.tip)}
             className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
-              isRefillOnly(formData.boja, formData.finish) 
+              isRefillOnly(formData.boja, formData.finish, formData.tip) 
                 ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' 
                 : 'bg-white dark:bg-gray-700'
             } text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500`}