@syscore/ui-library 1.1.12 → 1.2.0

package/client/ui/WELLDashboard/WELLDashboard.stories.tsx

@@ -1,115 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { WELLDashboard } from ".";
-
-const meta = {
-  title: "UI/WELLDashboard",
-  component: WELLDashboard,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded",
-  },
-  argTypes: {
-    certifiedPercentage: {
-      control: { type: "range", min: 0, max: 100, step: 1 },
-      description: "Percentage of locations certified (0-100)",
-    },
-  },
-} satisfies Meta<typeof WELLDashboard>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// Default dashboard with standard data
-export const Default: Story = {
-  args: {
-    certifiedPercentage: 60,
-  },
-};
-
-// Full certification (100%)
-export const FullyCertified: Story = {
-  args: {
-    certifiedPercentage: 100,
-  },
-};
-
-// Low certification percentage
-export const LowCertification: Story = {
-  args: {
-    certifiedPercentage: 25,
-  },
-};
-
-// Custom data example
-export const CustomData: Story = {
-  args: {
-    certifiedPercentage: 75,
-    certifications: [
-      { name: "Platinum", locations: 3, color: "#A8A7AE" },
-      { name: "Gold", locations: 5, color: "#D7C686" },
-      { name: "Silver", locations: 2, color: "#C0C2C4" },
-      { name: "Bronze", locations: 1, color: "#D1A778" },
-    ],
-    ratings: [
-      { name: "Health-Safety", locations: 8, color: "#7FB3DC", percentage: 80 },
-      { name: "Equity", locations: 5, color: "#41937D", percentage: 60 },
-      { name: "Performance", locations: 3, color: "#0B667F", percentage: 40 },
-      { name: "Coworking", locations: 1, color: "#AD7DA3", percentage: 15 },
-    ],
-  },
-};
-
-// All ratings active
-export const AllRatingsActive: Story = {
-  args: {
-    certifiedPercentage: 85,
-    ratings: [
-      { name: "Health-Safety", locations: 10, color: "#7FB3DC", percentage: 90 },
-      { name: "Equity", locations: 8, color: "#41937D", percentage: 75 },
-      { name: "Performance", locations: 6, color: "#0B667F", percentage: 60 },
-      { name: "Coworking", locations: 4, color: "#AD7DA3", percentage: 45 },
-    ],
-  },
-};
-
-// Complete overview in a constrained container
-export const InContainer: Story = {
-  render: (args) => (
-    <div className="max-w-6xl mx-auto p-8 bg-[#FAFAFA]">
-      <WELLDashboard {...args} />
-    </div>
-  ),
-  args: {
-    certifiedPercentage: 60,
-  },
-};
-
-// Responsive demo
-export const ResponsiveDemo: Story = {
-  render: (args) => (
-    <div className="space-y-8">
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Desktop (1200px)</h3>
-        <div className="w-full max-w-6xl border-2 border-dashed border-gray-300 p-4">
-          <WELLDashboard {...args} />
-        </div>
-      </div>
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Tablet (768px)</h3>
-        <div className="w-full max-w-3xl border-2 border-dashed border-gray-300 p-4">
-          <WELLDashboard {...args} />
-        </div>
-      </div>
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Mobile (375px)</h3>
-        <div className="w-full max-w-sm border-2 border-dashed border-gray-300 p-4">
-          <WELLDashboard {...args} />
-        </div>
-      </div>
-    </div>
-  ),
-  args: {
-    certifiedPercentage: 60,
-  },
-};

package/client/ui/WELLDashboard/index.tsx

@@ -1,317 +0,0 @@
-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";