@dilipod/ui 0.4.5 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/impact-metrics-form.d.ts.map +1 -1
  2. package/dist/index.js +97 -130
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +97 -130
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/impact-metrics-form.tsx +87 -132
package/dist/index.mjs CHANGED
@@ -4244,12 +4244,9 @@ function ImpactMetricsForm({
4244
4244
  const impliedFrequencyPerMonth = Math.round(impliedFrequencyPerYear / 12);
4245
4245
  const laborSavingsPerYear = metrics.fte_equivalent * HOURS_PER_FTE_YEAR * metrics.hourly_rate_euros;
4246
4246
  const netAnnualSavings = laborSavingsPerYear - workerCostPerYear;
4247
- return /* @__PURE__ */ jsxs(Card, { className: cn("border-[var(--cyan)]/20 bg-gradient-to-br from-white to-[var(--cyan)]/5", className), children: [
4248
- /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
4249
- /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
4250
- /* @__PURE__ */ jsx(IconBox, { size: "sm", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69l58.34-58.35a8,8,0,0,1,11.32,11.32l-64,64a8,8,0,0,1-11.32,0L96,123.31,40,179.31V200H224A8,8,0,0,1,232,208Z" }) }) }),
4251
- "Impact Metrics (ROI)"
4252
- ] }),
4247
+ return /* @__PURE__ */ jsx(Card, { className: cn("border-[var(--cyan)]/20 bg-gradient-to-br from-white to-[var(--cyan)]/5", className), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
4248
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
4249
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Impact Metrics (ROI)" }),
4253
4250
  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
4254
4251
  isInitiallySaved && /* @__PURE__ */ jsx(
4255
4252
  Button,
@@ -4278,135 +4275,105 @@ function ImpactMetricsForm({
4278
4275
  children: "Edit"
4279
4276
  }
4280
4277
  ) })
4281
- ] }) }),
4282
- /* @__PURE__ */ jsxs(CardContent, { children: [
4283
- /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-4", children: [
4284
- /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
4285
- /* @__PURE__ */ jsx("div", { className: "p-2 rounded-sm bg-[var(--cyan)]/10 shrink-0", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", viewBox: "0 0 256 256", className: "text-[var(--cyan)]", children: /* @__PURE__ */ jsx("path", { d: "M128,40a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,40Zm0,176a80,80,0,1,1,80-80A80.09,80.09,0,0,1,128,216ZM173.66,90.34a8,8,0,0,1,0,11.32l-40,40a8,8,0,0,1-11.32-11.32l40-40A8,8,0,0,1,173.66,90.34ZM96,16a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H104A8,8,0,0,1,96,16Z" }) }) }),
4286
- /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
4287
- /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground block mb-1", children: "Time per Task" }),
4288
- isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
4289
- /* @__PURE__ */ jsx(
4290
- "input",
4291
- {
4292
- type: "number",
4293
- value: metrics.time_saved_minutes_per_run,
4294
- onChange: (e) => setMetrics((prev) => ({
4295
- ...prev,
4296
- time_saved_minutes_per_run: parseInt(e.target.value) || 0
4297
- })),
4298
- className: "w-16 px-2 py-1 text-lg font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background",
4299
- min: "0"
4300
- }
4301
- ),
4302
- /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "min" })
4303
- ] }) : /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", children: [
4304
- metrics.time_saved_minutes_per_run,
4305
- " ",
4306
- /* @__PURE__ */ jsx("span", { className: "text-base font-normal text-muted-foreground", children: "min" })
4307
- ] }),
4308
- /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "How long manually" })
4309
- ] })
4310
- ] }),
4311
- /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
4312
- /* @__PURE__ */ jsx("div", { className: "p-2 rounded-sm bg-[var(--cyan)]/10 shrink-0", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", viewBox: "0 0 256 256", className: "text-[var(--cyan)]", children: /* @__PURE__ */ jsx("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm0-144a8,8,0,0,1,8,8v4.4c14.25,3.14,24,14.43,24,30.6,0,4.42-3.58,8-8,8s-8-3.58-8-8c0-8.64-7.18-13-16-13s-16,4.36-16,13,7.18,13,16,13c17.64,0,32,11.35,32,29,0,16.17-9.75,27.46-24,30.6V192a8,8,0,0,1-16,0v-4.4c-14.25-3.14-24-14.43-24-30.6a8,8,0,0,1,16,0c0,8.64,7.18,13,16,13s16-4.36,16-13-7.18-13-16-13c-17.64,0-32-11.35-32-29,0-16.17,9.75-27.46,24-30.6V80A8,8,0,0,1,128,72Z" }) }) }),
4313
- /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
4314
- /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground block mb-1", children: "Manual Cost" }),
4315
- isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
4316
- /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u20AC" }),
4317
- /* @__PURE__ */ jsx(
4318
- "input",
4319
- {
4320
- type: "number",
4321
- value: metrics.hourly_rate_euros,
4322
- onChange: (e) => setMetrics((prev) => ({
4323
- ...prev,
4324
- hourly_rate_euros: parseFloat(e.target.value) || 0
4325
- })),
4326
- className: "w-16 px-2 py-1 text-lg font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background",
4327
- min: "0",
4328
- step: "0.5"
4329
- }
4330
- ),
4331
- /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/hr" })
4332
- ] }) : /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", children: [
4333
- "\u20AC",
4334
- metrics.hourly_rate_euros,
4335
- " ",
4336
- /* @__PURE__ */ jsx("span", { className: "text-base font-normal text-muted-foreground", children: "/hr" })
4337
- ] }),
4338
- /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Employee hourly cost" })
4339
- ] })
4340
- ] }),
4341
- /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
4342
- /* @__PURE__ */ jsx("div", { className: "p-2 rounded-sm bg-[var(--cyan)]/10 shrink-0", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", viewBox: "0 0 256 256", className: "text-[var(--cyan)]", children: /* @__PURE__ */ jsx("path", { d: "M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z" }) }) }),
4343
- /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
4344
- /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground block mb-1", children: "Job Portion" }),
4345
- isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
4346
- /* @__PURE__ */ jsx(
4347
- "input",
4348
- {
4349
- type: "number",
4350
- value: Math.round(metrics.fte_equivalent * 100),
4351
- onChange: (e) => setMetrics((prev) => ({
4352
- ...prev,
4353
- fte_equivalent: (parseFloat(e.target.value) || 0) / 100
4354
- })),
4355
- className: "w-16 px-2 py-1 text-lg font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background",
4356
- min: "0",
4357
- max: "1000",
4358
- step: "5"
4359
- }
4360
- ),
4361
- /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "%" })
4362
- ] }) : /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", children: [
4363
- Math.round(metrics.fte_equivalent * 100),
4364
- " ",
4365
- /* @__PURE__ */ jsx("span", { className: "text-base font-normal text-muted-foreground", children: "%" })
4366
- ] }),
4367
- /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: [
4368
- "% of FTE (",
4369
- hoursSavedPerYear,
4370
- "h/year)"
4371
- ] })
4372
- ] })
4373
- ] }),
4374
- /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
4375
- /* @__PURE__ */ jsx("div", { className: "p-2 rounded-sm bg-[var(--cyan)]/10 shrink-0", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", viewBox: "0 0 256 256", className: "text-[var(--cyan)]", children: /* @__PURE__ */ jsx("path", { d: "M240,56v64a8,8,0,0,1-16,0V75.31l-82.34,82.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,212.69,64H168a8,8,0,0,1,0-16h64A8,8,0,0,1,240,56Z" }) }) }),
4376
- /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
4377
- /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground block mb-1", children: "Net Annual Savings" }),
4378
- /* @__PURE__ */ jsxs("p", { className: cn("text-2xl font-bold", netAnnualSavings >= 0 ? "text-[var(--cyan)]" : "text-red-500"), children: [
4379
- "\u20AC",
4380
- netAnnualSavings.toLocaleString(void 0, { maximumFractionDigits: 0 })
4381
- ] }),
4382
- /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: [
4383
- "\u20AC",
4384
- laborSavingsPerYear.toLocaleString(void 0, { maximumFractionDigits: 0 }),
4385
- " labor \u2212 \u20AC",
4386
- workerCostPerYear,
4387
- " worker"
4388
- ] })
4389
- ] })
4278
+ ] }),
4279
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-6", children: [
4280
+ /* @__PURE__ */ jsxs("div", { children: [
4281
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground uppercase tracking-wide mb-1", children: "Time per Task" }),
4282
+ isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
4283
+ /* @__PURE__ */ jsx(
4284
+ "input",
4285
+ {
4286
+ type: "number",
4287
+ value: metrics.time_saved_minutes_per_run,
4288
+ onChange: (e) => setMetrics((prev) => ({
4289
+ ...prev,
4290
+ time_saved_minutes_per_run: parseInt(e.target.value) || 0
4291
+ })),
4292
+ className: "w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background",
4293
+ min: "0"
4294
+ }
4295
+ ),
4296
+ /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "min" })
4297
+ ] }) : /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", children: [
4298
+ metrics.time_saved_minutes_per_run,
4299
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-muted-foreground ml-1", children: "min" })
4390
4300
  ] })
4391
4301
  ] }),
4392
- impliedFrequencyPerYear > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 pt-4 border-t border-border/50", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
4393
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Implied frequency:" }),
4394
- " ",
4395
- "~",
4396
- impliedFrequencyPerMonth,
4397
- "/month (",
4398
- impliedFrequencyPerYear,
4399
- "/year)",
4400
- /* @__PURE__ */ jsxs("span", { className: "text-xs ml-2", children: [
4401
- "based on ",
4402
- metrics.time_saved_minutes_per_run,
4403
- " min/task \xD7 ",
4302
+ /* @__PURE__ */ jsxs("div", { children: [
4303
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground uppercase tracking-wide mb-1", children: "Manual Cost" }),
4304
+ isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
4305
+ /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "\u20AC" }),
4306
+ /* @__PURE__ */ jsx(
4307
+ "input",
4308
+ {
4309
+ type: "number",
4310
+ value: metrics.hourly_rate_euros,
4311
+ onChange: (e) => setMetrics((prev) => ({
4312
+ ...prev,
4313
+ hourly_rate_euros: parseFloat(e.target.value) || 0
4314
+ })),
4315
+ className: "w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background",
4316
+ min: "0",
4317
+ step: "0.5"
4318
+ }
4319
+ ),
4320
+ /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "/hr" })
4321
+ ] }) : /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", children: [
4322
+ "\u20AC",
4323
+ metrics.hourly_rate_euros,
4324
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-muted-foreground ml-1", children: "/hr" })
4325
+ ] })
4326
+ ] }),
4327
+ /* @__PURE__ */ jsxs("div", { children: [
4328
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground uppercase tracking-wide mb-1", children: "Job Portion" }),
4329
+ isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
4330
+ /* @__PURE__ */ jsx(
4331
+ "input",
4332
+ {
4333
+ type: "number",
4334
+ value: Math.round(metrics.fte_equivalent * 100),
4335
+ onChange: (e) => setMetrics((prev) => ({
4336
+ ...prev,
4337
+ fte_equivalent: (parseFloat(e.target.value) || 0) / 100
4338
+ })),
4339
+ className: "w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background",
4340
+ min: "0",
4341
+ max: "1000",
4342
+ step: "5"
4343
+ }
4344
+ ),
4345
+ /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "%" })
4346
+ ] }) : /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", children: [
4404
4347
  Math.round(metrics.fte_equivalent * 100),
4405
- "% FTE"
4348
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-muted-foreground ml-1", children: "%" })
4349
+ ] }),
4350
+ /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
4351
+ hoursSavedPerYear,
4352
+ "h/year"
4353
+ ] })
4354
+ ] }),
4355
+ /* @__PURE__ */ jsxs("div", { children: [
4356
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground uppercase tracking-wide mb-1", children: "Net Annual Savings" }),
4357
+ /* @__PURE__ */ jsxs("p", { className: cn("text-2xl font-bold", netAnnualSavings >= 0 ? "text-[var(--cyan)]" : "text-red-500"), children: [
4358
+ "\u20AC",
4359
+ netAnnualSavings.toLocaleString(void 0, { maximumFractionDigits: 0 })
4360
+ ] }),
4361
+ /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
4362
+ "\u20AC",
4363
+ laborSavingsPerYear.toLocaleString(void 0, { maximumFractionDigits: 0 }),
4364
+ " \u2212 \u20AC",
4365
+ workerCostPerYear
4406
4366
  ] })
4407
- ] }) })
4367
+ ] })
4368
+ ] }),
4369
+ impliedFrequencyPerYear > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-4 pt-3 border-t border-border/50", children: [
4370
+ "Implied: ~",
4371
+ impliedFrequencyPerMonth,
4372
+ "\xD7/month (",
4373
+ impliedFrequencyPerYear,
4374
+ "\xD7/year)"
4408
4375
  ] })
4409
- ] });
4376
+ ] }) });
4410
4377
  }
4411
4378
 
4412
4379
  // src/index.ts