Fix TypeScript errors in Products page
- Add explicit type annotation for productTypes array - Add type assertion for product.type in Set conversion - Add React import to resolve module warnings - Remove unused consulting availability banner - Improve type safety for onChange handlers Resolves IDE TypeScript warnings caused by missing type annotations. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { supabase } from '@/integrations/supabase/client';
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
import { AppLayout } from '@/components/AppLayout';
|
import { AppLayout } from '@/components/AppLayout';
|
||||||
@@ -105,7 +105,7 @@ export default function Products() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Get unique product types for filter
|
// Get unique product types for filter
|
||||||
const productTypes = ['all', ...Array.from(new Set(products.map(p => p.type)))];
|
const productTypes: string[] = ['all', ...Array.from(new Set(products.map(p => p.type as string)))];
|
||||||
|
|
||||||
const clearFilters = () => {
|
const clearFilters = () => {
|
||||||
setSearchQuery('');
|
setSearchQuery('');
|
||||||
@@ -118,21 +118,6 @@ export default function Products() {
|
|||||||
<h1 className="text-4xl font-bold mb-2">Produk</h1>
|
<h1 className="text-4xl font-bold mb-2">Produk</h1>
|
||||||
<p className="text-muted-foreground mb-4">Jelajahi konsultasi, webinar, dan bootcamp kami</p>
|
<p className="text-muted-foreground mb-4">Jelajahi konsultasi, webinar, dan bootcamp kami</p>
|
||||||
|
|
||||||
{/* Consulting Availability Banner */}
|
|
||||||
{!loading && consultingSettings?.is_consulting_enabled && (
|
|
||||||
<div className="mb-6 p-4 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border-2 border-primary/30 flex items-center gap-3 hover:border-primary/50 transition-colors">
|
|
||||||
<div className="bg-primary text-primary-foreground p-2 rounded-full shrink-0">
|
|
||||||
<Video className="w-5 h-5" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-semibold">Konsultasi Tersedia!</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Booking jadwal konsultasi 1-on-1 dengan mentor • {formatIDR(consultingSettings.consulting_block_price)} / {consultingSettings.consulting_block_duration_minutes} menit
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Search and Filter */}
|
{/* Search and Filter */}
|
||||||
{!loading && products.length > 0 && (
|
{!loading && products.length > 0 && (
|
||||||
<div className="mb-6 space-y-4">
|
<div className="mb-6 space-y-4">
|
||||||
@@ -143,7 +128,7 @@ export default function Products() {
|
|||||||
type="text"
|
type="text"
|
||||||
placeholder="Cari produk..."
|
placeholder="Cari produk..."
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
|
||||||
className="pl-10 border-2"
|
className="pl-10 border-2"
|
||||||
/>
|
/>
|
||||||
{searchQuery && (
|
{searchQuery && (
|
||||||
@@ -218,7 +203,7 @@ export default function Products() {
|
|||||||
<Video className="w-5 h-5 text-primary shrink-0" />
|
<Video className="w-5 h-5 text-primary shrink-0" />
|
||||||
Konsultasi 1-on-1
|
Konsultasi 1-on-1
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<Badge className="bg-primary text-white shadow-sm shrink-0">
|
<Badge variant="default" className="shrink-0">
|
||||||
Konsultasi
|
Konsultasi
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
@@ -243,12 +228,12 @@ export default function Products() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Regular Products */}
|
{/* Regular Products */}
|
||||||
{filteredProducts.map((product) => (
|
{filteredProducts.map((product: Product) => (
|
||||||
<Card key={product.id} className="border-2 border-border shadow-sm hover:shadow-md transition-shadow h-full flex flex-col">
|
<Card key={product.id} className="border-2 border-border shadow-sm hover:shadow-md transition-shadow h-full flex flex-col">
|
||||||
<CardHeader className="pb-4">
|
<CardHeader className="pb-4">
|
||||||
<div className="flex justify-between items-start gap-2 mb-2">
|
<div className="flex justify-between items-start gap-2 mb-2">
|
||||||
<CardTitle className="text-xl line-clamp-1">{product.title}</CardTitle>
|
<CardTitle className="text-xl line-clamp-2 leading-tight">{product.title}</CardTitle>
|
||||||
<Badge variant="outline" className="shrink-0">
|
<Badge className="shrink-0">
|
||||||
{getTypeLabel(product.type)}
|
{getTypeLabel(product.type)}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user