@syscore/ui-library 1.1.10 → 1.1.11

package/client/ui/WELLDashboard/index.tsx

@@ -0,0 +1,221 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Building2 } from "lucide-react";
+
+interface CertificationLevel {
+  name: string;
+  locations: number;
+  color: string;
+  icon?: string;
+}
+
+interface RatingCategory {
+  name: string;
+  locations: number | string;
+  color: string;
+  percentage: number;
+  icon?: string;
+  inactive?: boolean;
+}
+
+export interface WELLDashboardProps {
+  certifiedPercentage?: number;
+  certifications?: CertificationLevel[];
+  ratings?: RatingCategory[];
+  className?: string;
+}
+
+const defaultCertifications: CertificationLevel[] = [
+  { name: "Platinum", locations: 1, color: "#A8A7AE", icon: "platinum" },
+  { name: "Gold", locations: 1, color: "#D7C686", icon: "gold" },
+  { name: "Silver", locations: 1, color: "#C0C2C4", icon: "silver" },
+  { name: "Bronze", locations: 1, color: "#D1A778", icon: "bronze" },
+  { name: "Precertified", locations: 1, color: "#44B0BC", icon: "precertified" },
+];
+
+const defaultRatings: RatingCategory[] = [
+  { name: "Health-Safety", locations: 1, color: "#7FB3DC", percentage: 50, icon: "health" },
+  { name: "Equity", locations: 1, color: "#41937D", percentage: 67, icon: "equity" },
+  { name: "Performance", locations: "Not Pursued", color: "#0B667F", percentage: 2, icon: "performance", inactive: true },
+  { name: "Coworking", locations: "Not Pursued", color: "#AD7DA3", percentage: 2, icon: "coworking", inactive: true },
+];
+
+export const WELLDashboard = React.forwardRef<HTMLDivElement, WELLDashboardProps>(
+  ({ certifiedPercentage = 60, certifications = defaultCertifications, ratings = defaultRatings, className }, ref) => {
+    return (
+      <div ref={ref} className={cn("flex flex-col gap-4", className)}>
+        <div className="flex flex-col lg:flex-row gap-4">
+          {/* WELL Certified Locations Card */}
+          <div className="flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs">
+            <h2 className="text-xl font-medium text-[#3D3E46] text-center mb-6" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+              WELL Certified Locations
+            </h2>
+            
+            <div className="flex flex-col md:flex-row justify-center items-center gap-10">
+              {/* Circular Progress Chart */}
+              <div className="relative w-60 h-60 shrink-0">
+                <svg width="240" height="240" viewBox="0 0 240 240" className="transform -rotate-90">
+                  {/* Background circle */}
+                  <circle cx="120" cy="120" r="120" fill="#F5F9FB" />
+                  
+                  {/* Progress segments */}
+                  <circle
+                    cx="120"
+                    cy="120"
+                    r="100"
+                    fill="none"
+                    stroke="#327DB9"
+                    strokeWidth="20"
+                    strokeDasharray={`${(certifiedPercentage / 100) * 628} 628`}
+                    strokeLinecap="round"
+                  />
+                  
+                  {/* Certification level arcs */}
+                  {certifications.map((cert, index) => {
+                    const totalSegments = certifications.length;
+                    const segmentAngle = (certifiedPercentage / 100) * 360 / totalSegments;
+                    const startAngle = index * segmentAngle;
+                    const arcLength = (segmentAngle * Math.PI * 100) / 180;
+                    const offset = (startAngle * Math.PI * 100) / 180;
+                    
+                    return (
+                      <circle
+                        key={cert.name}
+                        cx="120"
+                        cy="120"
+                        r="100"
+                        fill="none"
+                        stroke={cert.color}
+                        strokeWidth="20"
+                        strokeDasharray={`${arcLength} 628`}
+                        strokeDashoffset={-offset}
+                        opacity="0.7"
+                      />
+                    );
+                  })}
+                  
+                  {/* Inner white circle */}
+                  <circle cx="120" cy="120" r="80" fill="white" filter="drop-shadow(0 0 16px rgba(0,0,0,0.04))" />
+                </svg>
+                
+                {/* Center text */}
+                <div className="absolute inset-0 flex flex-col items-center justify-center">
+                  <div className="text-5xl font-medium text-[#327DB9]" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+                    {certifiedPercentage}%
+                  </div>
+                  <div className="text-sm font-medium text-[#78777F] mt-1" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+                    Certified
+                  </div>
+                </div>
+              </div>
+              
+              {/* Legend */}
+              <div className="flex flex-col gap-4 min-w-[160px]">
+                {certifications.map((cert) => (
+                  <div key={cert.name} className="flex items-center gap-2">
+                    <div 
+                      className="w-10 h-10 rounded-full shrink-0 flex items-center justify-center"
+                      style={{ backgroundColor: cert.color }}
+                    >
+                      {cert.icon === "precertified" && (
+                        <div className="w-9 h-6 bg-[#44B0BC] rounded-sm flex items-center justify-center text-white text-[10px] font-bold">
+                          WELL
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex flex-col gap-0.5 flex-1">
+                      <div className="text-base font-medium text-[#3D3E46]" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+                        {cert.name}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Building2 size={16} className="text-[#327DB9]" strokeWidth={1.2} />
+                        <span className="text-xs font-medium text-[#327DB9]" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+                          {cert.locations} Location{cert.locations !== 1 ? 's' : ''}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          
+          {/* WELL Rated Locations Card */}
+          <div className="flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs">
+            <h2 className="text-xl font-medium text-[#3D3E46] text-center mb-6" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+              WELL Rated Locations
+            </h2>
+            
+            <div className="flex flex-col md:flex-row justify-center items-center gap-10">
+              {/* Bar Chart */}
+              <div className="flex items-end gap-4 h-60 px-4">
+                {ratings.map((rating) => (
+                  <div key={rating.name} className="w-10 h-60 relative">
+                    {/* Background */}
+                    <div className="absolute inset-0 rounded-t border border-[#DEDEE5] bg-[#F5F9FB]" />
+                    {/* Bar */}
+                    <div 
+                      className="absolute bottom-0 left-0 right-0 rounded-t transition-all"
+                      style={{ 
+                        backgroundColor: rating.color,
+                        height: `${rating.percentage}%`,
+                      }}
+                    />
+                  </div>
+                ))}
+                {/* Y-axis */}
+                <div className="w-px h-60 bg-[#DEDEE5]" />
+              </div>
+              
+              {/* Legend */}
+              <div className="flex flex-col gap-4 min-w-[160px]">
+                {ratings.map((rating) => (
+                  <div 
+                    key={rating.name} 
+                    className={cn("flex items-center gap-2", rating.inactive && "opacity-50")}
+                  >
+                    <div 
+                      className="w-10 h-10 rounded-full shrink-0 flex items-center justify-center"
+                      style={{ backgroundColor: rating.color }}
+                    />
+                    <div className="flex flex-col gap-0.5 flex-1">
+                      <div className="text-base font-medium text-[#3D3E46]" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+                        {rating.name}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Building2 
+                          size={16} 
+                          className={rating.inactive ? "text-[#78777F]" : "text-[#327DB9]"} 
+                          strokeWidth={1.2} 
+                        />
+                        <span 
+                          className={cn(
+                            "text-xs font-medium",
+                            rating.inactive ? "text-[#78777F]" : "text-[#327DB9]"
+                          )} 
+                          style={{ fontFamily: "'DM Sans', sans-serif" }}
+                        >
+                          {typeof rating.locations === 'number' 
+                            ? `${rating.locations} Location${rating.locations !== 1 ? 's' : ''}`
+                            : rating.locations
+                          }
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        {/* Footer note */}
+        <p className="text-[10px] leading-3 font-medium text-[#78777F] text-center" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+          Achievement metrics reflect all active program achievements, as of {new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+        </p>
+      </div>
+    );
+  }
+);
+
+WELLDashboard.displayName = "WELLDashboard";

package/client/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />