feat: slicing home page

lib/presentation/home/widgets/product_card.dart

@@ -1,4 +1,5 @@
 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:enaklo_pos/core/constants/variables.dart';
@@ -14,8 +15,87 @@ import '../../../core/constants/colors.dart';
 class ProductCard extends StatelessWidget {
   final Product data;
   final VoidCallback onCartButton;
+  const ProductCard(
+      {super.key, required this.data, required this.onCartButton});
 
-  const ProductCard({
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+        onTap: () {
+          context.read<CheckoutBloc>().add(CheckoutEvent.addItem(data));
+        },
+        child: Container(
+          padding: const EdgeInsets.all(8.0),
+          decoration: BoxDecoration(
+            color: AppColors.white,
+            borderRadius: BorderRadius.circular(12.0),
+          ),
+          child: Column(
+            children: [
+              ClipRRect(
+                borderRadius: BorderRadius.circular(12),
+                child: CachedNetworkImage(
+                  imageUrl: data.image!.contains('http')
+                      ? data.image!
+                      : '${Variables.baseUrl}/${data.image}',
+                  width: double.infinity,
+                  height: context.deviceHeight * 0.18,
+                  fit: BoxFit.fill,
+                  errorWidget: (context, url, error) => Container(
+                    width: double.infinity,
+                    height: context.deviceHeight * 0.18,
+                    decoration: BoxDecoration(
+                      color: AppColors.grey.withOpacity(0.1),
+                      borderRadius: BorderRadius.circular(12),
+                    ),
+                    child: const Icon(
+                      Icons.image_outlined,
+                      color: AppColors.grey,
+                      size: 40,
+                    ),
+                  ),
+                ),
+              ),
+              const SpaceHeight(8.0),
+              Row(
+                children: [
+                  Expanded(
+                    child: Text(
+                      "${data.name}",
+                      style: const TextStyle(
+                        fontSize: 14,
+                        fontWeight: FontWeight.w700,
+                      ),
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                  ),
+                ],
+              ),
+              Spacer(),
+              const SpaceHeight(4.0),
+              Align(
+                alignment: Alignment.centerRight,
+                child: Text(
+                  data.price!.toIntegerFromText.currencyFormatRp,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 13,
+                    color: AppColors.primary,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ));
+  }
+}
+
+class ProductCardOld extends StatelessWidget {
+  final Product data;
+  final VoidCallback onCartButton;
+
+  const ProductCardOld({
     super.key,
     required this.data,
     required this.onCartButton,
@@ -29,11 +109,9 @@ class ProductCard extends StatelessWidget {
       },
       child: Container(
         padding: const EdgeInsets.all(16.0),
-        decoration: ShapeDecoration(
-          shape: RoundedRectangleBorder(
-            side: const BorderSide(width: 1, color: AppColors.card),
-            borderRadius: BorderRadius.circular(16),
-          ),
+        decoration: BoxDecoration(
+          color: AppColors.white,
+          borderRadius: BorderRadius.circular(12.0),
         ),
         child: Stack(
           children: [
@@ -63,6 +141,8 @@ class ProductCard extends StatelessWidget {
                       width: 60,
                       height: 60,
                       fit: BoxFit.cover,
+                      errorWidget: (context, url, error) =>
+                          const Icon(Icons.error),
                     ),
                   ),
                 ),