marco.pms.mobileapp/lib/helpers/widgets/my_custom_skeleton.dart

import 'package:flutter/material.dart';
import 'package:marco/helpers/widgets/my_card.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/utils/my_shadow.dart';

class SkeletonLoaders {

static Widget buildLoadingSkeleton() {
  return SizedBox(
    height: 360,
    child: Column(
      children: List.generate(5, (index) {
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 6),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: List.generate(6, (i) {
                return Container(
                  margin: const EdgeInsets.symmetric(horizontal: 4),
                  width: 48,
                  height: 16,
                  decoration: BoxDecoration(
                    color: Colors.grey.shade300,
                    borderRadius: BorderRadius.circular(6),
                  ),
                );
              }),
            ),
          ),
        );
      }),
    ),
  );
}


  // Employee List - Card Style
  static Widget employeeListSkeletonLoader() {
    return Column(
      children: List.generate(4, (index) {
        return MyCard.bordered(
          borderRadiusAll: 12,
          paddingAll: 10,
          margin: MySpacing.bottom(12),
          shadow: MyShadow(elevation: 3),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Avatar
              Container(
                width: 41,
                height: 41,
                decoration: BoxDecoration(
                  color: Colors.grey.shade300,
                  shape: BoxShape.circle,
                ),
              ),
              MySpacing.width(16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Container(height: 14, width: 100, color: Colors.grey.shade300),
                        MySpacing.width(8),
                        Container(height: 12, width: 60, color: Colors.grey.shade300),
                      ],
                    ),
                    MySpacing.height(8),
                    Row(
                      children: [
                        Icon(Icons.email, size: 16, color: Colors.grey.shade300),
                        MySpacing.width(4),
                        Container(height: 10, width: 140, color: Colors.grey.shade300),
                      ],
                    ),
                    MySpacing.height(8),
                    Row(
                      children: [
                        Icon(Icons.phone, size: 16, color: Colors.grey.shade300),
                        MySpacing.width(4),
                        Container(height: 10, width: 100, color: Colors.grey.shade300),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }),
    );
  }

  // Employee List - Compact Collapsed Style
  static Widget employeeListCollapsedSkeletonLoader() {
    return MyCard.bordered(
      borderRadiusAll: 4,
      paddingAll: 8,
      child: Column(
        children: List.generate(4, (index) {
          return Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(bottom: 8),
                child: Row(
                  children: [
                    // Avatar
                    Container(
                      width: 31,
                      height: 31,
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        shape: BoxShape.circle,
                      ),
                    ),
                    MySpacing.width(16),
                    // Name, Designation & Buttons
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(height: 12, width: 100, color: Colors.grey.shade300),
                          MySpacing.height(8),
                          Container(height: 10, width: 80, color: Colors.grey.shade300),
                          MySpacing.height(12),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Container(height: 28, width: 60, color: Colors.grey.shade300),
                              MySpacing.width(8),
                              Container(height: 28, width: 60, color: Colors.grey.shade300),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              if (index != 3)
                Divider(
                  color: Colors.grey.withOpacity(0.3),
                  thickness: 1,
                  height: 1,
                ),
            ],
          );
        }),
      ),
    );
  }

  // Daily Progress Report Header Loader
  static Widget dailyProgressReportSkeletonLoader() {
    return MyCard.bordered(
      borderRadiusAll: 4,
      border: Border.all(color: Colors.grey.withOpacity(0.2)),
      shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
      paddingAll: 8,
      child: Column(
        children: List.generate(3, (index) {
          return Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(height: 14, width: 120, color: Colors.grey.shade300),
                  Icon(Icons.add_circle, color: Colors.grey.shade300),
                ],
              ),
              if (index != 2) ...[
                MySpacing.height(12),
                Divider(color: Colors.grey.withOpacity(0.3), thickness: 1),
                MySpacing.height(12),
              ],
            ],
          );
        }),
      ),
    );
  }

  // Daily Progress Planning (Collapsed View)

  static Widget dailyProgressPlanningSkeletonCollapsedOnly() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: List.generate(3, (index) {
        return MyCard.bordered(
          borderRadiusAll: 12,
          paddingAll: 16,
          margin: MySpacing.bottom(12),
          shadow: MyShadow(elevation: 3),
          child: Row(
            children: [
              // Icon placeholder
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.grey.shade300,
                  shape: BoxShape.circle,
                ),
              ),
              MySpacing.width(12),
              // Text line
              Expanded(
                child: Container(height: 16, color: Colors.grey.shade300),
              ),
              MySpacing.width(12),
              // Expand button placeholder
              Container(
                width: 28,
                height: 28,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.grey.shade300,
                ),
              ),
            ],
          ),
        );
      }),
    );
  }
  static Widget employeeSkeletonCard() {
  return MyCard.bordered(
    margin: MySpacing.only(bottom: 12),
    paddingAll: 12,
    borderRadiusAll: 12,
    shadow: MyShadow(
      elevation: 1.5,
      position: MyShadowPosition.bottom,
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Avatar
        Container(
          height: 35,
          width: 35,
          decoration: BoxDecoration(
            color: Colors.grey.shade300,
            shape: BoxShape.circle,
          ),
        ),
        MySpacing.width(12),

        // Name, org, email, phone
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(height: 12, width: 120, color: Colors.grey.shade300),
              MySpacing.height(6),
              Container(height: 10, width: 80, color: Colors.grey.shade300),
              MySpacing.height(8),

              // Email placeholder
              Row(
                children: [
                  Icon(Icons.email_outlined, size: 14, color: Colors.grey.shade300),
                  MySpacing.width(4),
                  Container(height: 10, width: 140, color: Colors.grey.shade300),
                ],
              ),
              MySpacing.height(8),

              // Phone placeholder
              Row(
                children: [
                  Icon(Icons.phone_outlined, size: 14, color: Colors.grey.shade300),
                  MySpacing.width(4),
                  Container(height: 10, width: 100, color: Colors.grey.shade300),
                  MySpacing.width(8),
                  Container(
                    height: 16,
                    width: 16,
                    decoration: BoxDecoration(
                      color: Colors.grey.shade300,
                      shape: BoxShape.circle,
                    ),
                  ),
                ],
              ),
              MySpacing.height(8),

              // Tags placeholder
              Container(height: 8, width: 80, color: Colors.grey.shade300),
            ],
          ),
        ),

        // Arrow
        Icon(Icons.arrow_forward_ios, size: 14, color: Colors.grey.shade300),
      ],
    ),
  );
}

  static Widget contactSkeletonCard() {
  return MyCard.bordered(
    margin: MySpacing.only(bottom: 12),
    paddingAll: 16,
    borderRadiusAll: 16,
    shadow: MyShadow(
      elevation: 1.5,
      position: MyShadowPosition.bottom,
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Container(
              height: 40,
              width: 40,
              decoration: BoxDecoration(
                color: Colors.grey.shade300,
                shape: BoxShape.circle,
              ),
            ),
            MySpacing.width(12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 12,
                    width: 100,
                    color: Colors.grey.shade300,
                  ),
                  MySpacing.height(6),
                  Container(
                    height: 10,
                    width: 60,
                    color: Colors.grey.shade300,
                  ),
                ],
              ),
            ),
          ],
        ),
        MySpacing.height(16),
        Container(height: 10, width: 150, color: Colors.grey.shade300),
        MySpacing.height(8),
        Container(height: 10, width: 100, color: Colors.grey.shade300),
        MySpacing.height(8),
        Container(height: 10, width: 120, color: Colors.grey.shade300),
      ],
    ),
  );
}

}